/* Entrar and Cadastro: sign-in with Google/Apple and the register steps. The form sits on the left;
   on the right, a real screenshot of the part of the app that step is about, so each step shows
   what the account is for. Tokens come from theme.css. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 14px/1.5 var(--sans); color: var(--ink); background: var(--bg); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; min-height: 100vh; }
::selection { background: var(--ink); color: var(--on-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.shell { display: grid; grid-template-columns: minmax(380px, 520px) 1fr; min-height: 100vh; }
.side { display: flex; flex-direction: column; padding: clamp(16px, 3vh, 28px) 48px clamp(16px, 3vh, 32px); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; letter-spacing: -0.03em; text-decoration: none; }
.brand svg { width: 26px; height: 18px; }
.side-top { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.side-top .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.side-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(8px, 2vh, 40px) 0; max-width: 400px; width: 100%; }
.side-foot { font-size: 12px; color: var(--muted); }
.side-foot a { color: var(--muted); }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; line-height: 1.2; background: var(--band); font-size: 12px; font-weight: 500; }
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
h1 { margin: clamp(10px, 2vh, 16px) 0 clamp(6px, 1.2vh, 10px); font-size: clamp(26px, 4vh, 34px); line-height: 1.08; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.lede { margin: 0 0 clamp(14px, 3vh, 28px); color: var(--muted); font-size: 15px; max-width: 42ch; text-wrap: pretty; }

/* Provider buttons: same size, Google on white with its mark, Apple in ink. */
.oauth { display: grid; gap: 10px; }
.oauth a, .oauth button { height: clamp(42px, 6vh, 48px); border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 500; font-size: 15px; text-decoration: none; cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .1s; }
.oauth a:active, .oauth button:active { transform: scale(.985); }
.oauth svg { width: 20px; height: 20px; flex: none; }
.g-btn { background: var(--surface); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.g-btn:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.a-btn { background: var(--ink); color: var(--on-ink); border: 0; }
.a-btn:hover { background: var(--ink-hover); }
.oauth .off { opacity: .4; pointer-events: none; }
.fine { margin: clamp(10px, 2vh, 18px) 0 0; font-size: 12px; color: var(--muted); }
.fine b { color: var(--ink); font-weight: 500; }
.perks { list-style: none; margin: clamp(14px, 3vh, 28px) 0 0; padding: 0; display: grid; gap: clamp(6px, 1.2vh, 10px); font-size: 13px; }
.perks li { display: flex; gap: 10px; align-items: flex-start; }
.perks svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* Invite (entrar, via /convite/CODE): who sent it and the special deal, in place of the trial tag. */
.invite { display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--ink); color: var(--on-ink); }
.invite-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--on-ink); color: var(--ink); font-weight: 600; }
.invite b { display: block; font-weight: 600; }
.invite small { display: block; font-size: 13px; opacity: .75; text-wrap: pretty; }

.alert { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.note { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--band); font-size: 13px; color: var(--muted); }
.note b { color: var(--ink); font-weight: 500; }

.dev { margin-top: clamp(12px, 2.5vh, 24px); padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; }
.dev p { margin: 0; font-size: 12px; color: var(--muted); }
.dev form { display: flex; gap: 8px; }
.dev input { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); }

/* Showcase: the screenshot in a quiet frame, caption under it. */
.show { position: relative; background: var(--band); display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 6vh, 48px) 0 clamp(24px, 6vh, 48px) 56px; overflow: hidden; }
.show-copy { max-width: 520px; padding-right: 48px; margin-bottom: clamp(16px, 3vh, 28px); }
.show-copy .k { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: none; }
.show-copy h3 { margin: 6px 0 8px; font-size: 26px; line-height: 1.12; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.show-copy p { margin: 0; color: var(--muted); font-size: 15px; max-width: 46ch; text-wrap: pretty; }
.frame { position: relative; width: 118%; max-width: 1180px; aspect-ratio: 16 / 10; border-radius: 14px 0 0 14px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06); }
:root[data-theme="dark"] .frame { box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px #3a3a3c; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; transform: scale(1.015); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
.frame img.on { opacity: 1; transform: none; }
.dots { display: flex; gap: 6px; margin-top: 20px; }
.dots button { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: var(--line); cursor: pointer; transition: background-color .2s, width .3s; }
.dots button[aria-current="true"] { background: var(--ink); width: 34px; }
.copy-swap { transition: opacity .3s; }
.copy-swap.out { opacity: 0; }

/* Register steps. */
.progress { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(14px, 3vh, 28px); }
.progress ol { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.progress li { width: 28px; height: 4px; border-radius: 4px; background: var(--band); transition: background-color .3s; }
.progress li.done, .progress li.now { background: var(--ink); }
.progress span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.step { display: grid; gap: clamp(10px, 1.8vh, 16px); }
.step:not([hidden]) { animation: step-in .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
.step > p.sub { margin: -8px 0 4px; color: var(--muted); }
.f { display: grid; gap: 6px; min-width: 0; }
.f > span { font-size: 12px; color: var(--muted); }
.f > span em { font-style: normal; opacity: .8; }
.f input, .f textarea { height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--surface); min-width: 0; width: 100%; font-size: 15px; }
.f textarea { height: auto; padding: 10px 12px; line-height: 1.45; resize: vertical; font: inherit; font-size: 15px; color: inherit; }
.f input:focus-visible, .f textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
.f small { font-size: 12px; color: var(--muted); }
.f.bad input { border-color: var(--warn); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Phone with its country (phone.js): flag and code on the left, the number on the right. */
.phone { position: relative; display: flex; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.phone:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
.phone .cc { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 12px; border: 0; border-right: 1px solid var(--line); border-radius: 12px 0 0 12px; background: transparent; cursor: pointer; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--muted); }
.phone .cc:hover, .phone .cc:focus-visible { outline: none; background: var(--band); }
.phone .flag { font-size: 20px; line-height: 1; }
.phone .cc svg { width: 10px; height: 10px; }
.f .phone > input { flex: 1; height: 100%; border: 0; border-radius: 0 12px 12px 0; box-shadow: none; background: transparent; }
.f .phone > input:focus-visible { box-shadow: none; }
.cc-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: 320px; max-width: calc(100vw - 32px); background: var(--surface); border-radius: 14px; box-shadow: var(--pop-shadow); padding: 6px; }
.f .cc-menu input { height: 38px; border: 0; border-radius: 10px; background: var(--band); margin-bottom: 4px; }
.f .cc-menu input:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cc-list { max-height: 260px; overflow-y: auto; display: grid; }
.cc-list button { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cc-list button:hover, .cc-list button:focus-visible { background: var(--band); outline: none; }
.cc-list button[aria-selected="true"] { font-weight: 500; }
.cc-list .flag { font-size: 18px; }
.cc-list small { color: var(--muted); font-variant-numeric: tabular-nums; }
.cc-sep { height: 1px; background: var(--line); margin: 4px 10px; }
.cc-none { margin: 0; padding: 10px; font-size: 13px; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--band); cursor: pointer; font-size: 13px; transition: background-color .15s, color .15s; user-select: none; }
.chips span:hover { background: var(--hover); }
.chips input:checked + span { background: var(--ink); color: var(--on-ink); }
.chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.chip-other button, .chip-other input { height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px; color: inherit; }
.chip-other button { border: 1px dashed var(--line); background: none; cursor: pointer; transition: background-color .15s; }
.chip-other button:hover { background: var(--band); }
.chip-other button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chips .chip-other input { position: static; opacity: 1; pointer-events: auto; width: 190px; border: 1px solid var(--ink); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--ring); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
legend { padding: 0; margin-bottom: 8px; font-size: 12px; color: var(--muted); }

.actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.btn { height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 500; font-size: 15px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background-color .15s, transform .1s; }
.btn:hover { background: var(--ink-hover); }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.wide { flex: 1; }
.btn--ghost { background: var(--band); color: var(--ink); }
.btn--ghost:hover { background: var(--hover); }
.link { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--ink); }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.who img { width: 24px; height: 24px; border-radius: 50%; }

/* Plan: what happens today, at the end of the trial, and how to leave. */
/* Plan picker: one card per plan, the chosen one outlined in ink. */
.plan-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.plan-pick[hidden] { display: none; }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick > span { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 14px; background: var(--band); cursor: pointer; transition: box-shadow .15s; }
.pick b { font-weight: 600; font-size: 14px; }
.pick em { font-style: normal; font-weight: 600; font-size: 16px; margin-bottom: 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pick em small { font-size: 12px; font-weight: 400; color: var(--muted); }
.pick > span > small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.pick input:checked + span { box-shadow: inset 0 0 0 2px var(--ink); background: var(--surface); }
.pick input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 520px) { .plan-pick { grid-template-columns: 1fr; } }
.plan { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); padding: 18px 18px 6px; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plan-head b { font-size: 15px; font-weight: 600; }
.plan-head .price { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan-head .price small { font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: -0.01em; }
.timeline { list-style: none; margin: 14px 0 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; position: relative; }
.timeline li + li { box-shadow: inset 0 1px 0 var(--rule); }
.timeline .pip { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); }
.timeline li:first-child .pip { background: var(--ink); }
.timeline b { font-weight: 500; display: block; }
.timeline small { color: var(--muted); font-size: 12px; }
.timeline .amt { font-variant-numeric: tabular-nums; font-weight: 500; }
.secure { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.secure svg { width: 14px; height: 14px; flex: none; }

/* Mock checkout (BILLING_MOCK=1), so the flow can be tried without AbacatePay. */
.card-mock { border-radius: 16px; padding: 18px; background: linear-gradient(135deg, #2c2c2e, #1d1d1f); color: #f5f5f7; display: grid; gap: 18px; font-variant-numeric: tabular-nums; }
.card-mock .num { font-size: 18px; letter-spacing: .08em; }
.card-mock .meta { display: flex; justify-content: space-between; font-size: 12px; opacity: .8; }

.done-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; margin-bottom: 8px; }
.done-mark svg { width: 26px; height: 26px; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Desktop: the page is exactly one screen. Spacing above shrinks with the viewport height, the
   screenshot crops instead of pushing the page down, and the side scrolls on its own only as a
   last resort. On short screens the perks go: the lede already says the same. */
@media (min-width: 1001px) {
  .shell { height: 100vh; height: 100dvh; min-height: 0; }
  .side { overflow-y: auto; }
  .frame { flex: 0 1 auto; min-height: 0; }
  .dots { flex: none; }
}
@media (min-width: 1001px) and (max-height: 900px) {
  .step { gap: 10px; }
  .f input { height: 40px; }
  .phone { height: 40px; }
  .chips { gap: 6px; }
  .chips span { height: 32px; padding: 0 12px; }
  .chip-other button, .chip-other input { height: 32px; padding: 0 12px; }
  fieldset { gap: 6px; }
  legend { margin-bottom: 6px; }
}
@media (min-width: 1001px) and (max-height: 820px) {
  .side { padding-top: 16px; padding-bottom: 16px; }
  .side-body { padding: 8px 0; }
  .step > p.sub { margin-bottom: 0; }
  .f textarea { height: 56px; }
  .f textarea + small { display: none; }
}
@media (min-width: 1001px) and (max-height: 760px) { .perks { display: none; } }

@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; }
  .side { padding: 20px 16px 28px; }
  .side-body { padding: 28px 0; max-width: 520px; justify-content: flex-start; }
  .show { padding: 32px 0 32px 16px; order: 2; }
  .show-copy { padding-right: 16px; margin-bottom: 18px; }
  .show-copy h3 { font-size: 22px; }
  .frame { width: 130%; }
  h1 { font-size: 30px; }
}
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } .actions { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .frame img, .step:not([hidden]), .copy-swap { transition: none; animation: none; } }