/* acaisafe.com/plus and /presente. The header, type and footer come from site.css. */

.plus { max-width: var(--max); margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: var(--s7); align-items: start; }
.pitch h1 { font: 500 var(--text-h1-site) / 1.05 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.pitch .lead { font-size: var(--text-lead); color: var(--ink-2); margin-top: var(--s4); max-width: 34rem; }
.features { margin-top: var(--s6); padding-left: 1.2em; display: grid; gap: var(--s3); max-width: 34rem; }
.features li::marker { color: var(--acai); }
/* A margin note, the same rule as labels and selected options. */

.checkout { position: relative; padding: var(--s5) var(--s6); display: grid; gap: var(--s4); margin-top: var(--s6); }
.checkout fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.checkout legend { font-weight: 700; margin-bottom: var(--s2); padding: 0; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); padding: 2px; border-radius: var(--radius-s); border: 1px solid var(--line); }
.seg label { display: grid; place-items: center; min-height: var(--tap); padding: 0 var(--s2); border-radius: var(--radius-s); font-weight: 600; text-align: center; line-height: 1.2; cursor: pointer; }
.seg input, .opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--acai); color: var(--acai-ink); }
.seg label:has(input:focus-visible), .opt:has(input:focus-visible) { outline: var(--focus); outline-offset: 2px; }

/* Options are square sheets with a hairline; the selected one gets the margin rule, like a proofreader's bar. */
.opt { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s3); align-items: baseline; padding: var(--s3) var(--s5); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; }
.opt:has(input:checked) { border-color: var(--acai); }
.opt b { font-weight: 700; }
.opt .price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt small { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--text-small); }
.opt-row { display: flex; align-items: center; gap: var(--s2); }
.opt-row .i { color: var(--acai); }
.hint { color: var(--ink-2); font-size: var(--text-small); }

.field { display: grid; gap: var(--s1); }
.field label { font-weight: 700; }
.field input { min-height: var(--tap-primary); padding: 0 var(--s4); border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: 400 var(--text-body) var(--font-text); }
.field input:focus-visible { border-color: var(--acai); outline-offset: 1px; }
.cf-turnstile:empty { display: none; } /* nothing to show until Cloudflare asks for a click */

.assure { margin: 0; padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: var(--s3); font-size: var(--text-small); }
.assure div { display: grid; gap: 0; }
.assure dt { font-weight: 700; }
.assure dd { margin: 0; color: var(--ink-2); }

@media (max-width: 900px) { .plus { grid-template-columns: minmax(0, 1fr); } }
/* On a phone the three choices stack, so no label wraps. */
@media (max-width: 560px) {
  .seg { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: 0; border: 0; }
  .seg label { place-items: center start; padding: 0 var(--s5); border: 1px solid var(--line); border-radius: var(--radius-s); }
  .seg label:has(input:checked) { background: transparent; color: var(--ink); border: 1px solid var(--acai); }
}
@media (forced-colors: active) {
  .opt:has(input:checked) { border: 2px solid Highlight; }
  .seg label:has(input:checked) { border-bottom-color: Highlight; }
  }

/* The one-card pages: /plus/pago, /ativar, /conta, /excluir-conta. */
.doc .checkout { margin-top: 0; }
.doc .checkout h1 { margin-bottom: 0; }
.code { font: 600 var(--text-h2) / 1.2 var(--font-mono); letter-spacing: 0.12em; overflow-wrap: anywhere; }
.devices { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.devices li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.devices small { grid-column: 1; color: var(--ink-2); font-size: var(--text-small); }
.devices .btn { grid-row: 1 / span 2; grid-column: 2; }
/* Steps toggle with the hidden attribute; .field and .card set display, which would otherwise win. */
[hidden] { display: none !important; }

/* /en/plus/: the Worker fills data-paddle once Paddle is open; until then only "coming soon" shows. */
main[data-paddle=""] .paddle-open, main:not([data-paddle=""]) .paddle-soon { display: none; }
.plans { border: 0; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.plans legend { font-weight: 600; margin-bottom: 0.25rem; padding: 0; }