/* Três tons do design que só o fluxo de cadastro usa — o layout de
   S4 carrega os tokens compartilhados e não precisa crescer por
   causa desta página. */
:root {
    --faint: #94a3b8;
    --teal-wash: #f0fdfa;
    --amber-ink: #b45309;
}

/* Os três estados são irmãos no mesmo documento: sem o `!important`
   o `display:flex` das seções venceria o atributo `hidden`. */
[hidden] { display: none !important; }

.state {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 0 8px;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

.state h1 { font-size: clamp(26px, 3vw, 38px); outline: none; }

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    align-items: start;
}

.split__intro { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }

.split__intro p { font-size: 16px; max-width: 420px; }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(1, 31, 68, .05);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.panel__note {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 14px;
    text-wrap: pretty;
}

.linkish {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--teal);
}

.linkish:hover { color: var(--teal-strong); text-decoration: underline; text-underline-offset: 0.2em; }

.linkish:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

.back { align-self: flex-start; font-size: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label { font-size: 13px; font-weight: 700; color: var(--ink); }

.field__hint { font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

.field__error { font-size: 13px; line-height: 1.5; color: var(--warn); }

.input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
}

.input::placeholder { color: var(--faint); }

.input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .14);
}

.input[aria-invalid="true"] { border-color: var(--warn); }

.input--code {
    padding: 14px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.45em;
    text-align: center;
}

.seg { display: flex; gap: 10px; }

.seg__btn {
    flex: 1;
    cursor: pointer;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 11px 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--body);
}

.seg__btn[aria-pressed="true"] {
    border-color: var(--teal);
    background: var(--teal-wash);
    color: var(--ink);
    font-weight: 800;
}

.seg__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Par do `.input[aria-invalid="true"]`: o grupo inteiro é que fica
   inválido, porque a escolha é uma só entre os dois botões. */
.seg[aria-invalid="true"] .seg__btn { border-color: var(--warn); }

/* `.hp` é o honeypot da spec 009 §Wire — fora da tela, fora da
   ordem de foco e fora do leitor de tela, só um preenchedor
   automático o encontra. `.sr-only` tem a mesma geometria e o
   propósito OPOSTO: rótulo que só o leitor de tela lê. */
.hp,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.chip {
    align-self: flex-start;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    word-break: break-all;
}

.resend { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; }

.resend__note { color: var(--muted); font-size: 13px; text-align: center; }

.confirm { display: flex; flex-direction: column; gap: 18px; }

.confirm__head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding-top: 8px; }

.confirm__mark {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm__head h1 { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }

.confirm__head p { font-size: 15px; }

.start-here {
    background: var(--surface);
    border: 1.5px solid var(--yellow);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 10px 28px rgba(255, 211, 0, .16);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.start-here__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; color: var(--amber-ink); }

.start-here__title { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.3; text-wrap: pretty; }

.start-here p { font-size: 14.5px; }

.start-here .btn { font-size: 15px; padding: 14px 28px; }

.stores { display: flex; flex-direction: column; gap: 10px; }

.stores__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; color: var(--muted); }

.stores__note { font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

.stores__stack { display: flex; flex-direction: column; gap: 10px; }

/* Flip de ordem por aparelho escolhido no form (handover §4.1):
   iPhone ⇒ App Store primeiro; Android ⇒ Google Play primeiro. */
.stores__stack[data-device="android"] { flex-direction: column-reverse; }

/* Botão e QR da MESMA loja num único filho da pilha — é o que os mantém
   juntos quando o flip acima inverte a ordem. */
.store-item { display: flex; align-items: center; gap: 12px; }

.store-item > .store { flex: 1; min-width: 0; }

/* O QR do partial nasce 160×160; aqui ele vira um selo ao lado do botão.
   O seletor de filho direto é o que o separa dos ícones das lojas, que
   moram DENTRO do botão. */
.store-item > svg {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #ffffff;
}

.store {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 12px 20px;
    background: var(--on-yellow);
    color: #ffffff;
    font-family: inherit;
    text-decoration: none;
}

a.store:hover { color: #ffffff; text-decoration: none; }

.store__lines { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }

.store__pre { font-size: 11px; font-weight: 700; opacity: .7; }

.store__name { font-size: 16px; font-weight: 800; }

.store--soon { background: var(--line); color: var(--muted); cursor: default; }

.store--soon .store__name { font-size: 14px; }

.path { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 20px; }

.path__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; color: var(--muted); }

.path__item {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: -5px -8px;
    padding: 5px 8px;
    border-radius: 12px;
    color: var(--on-yellow);
    font-weight: 700;
    transition: background 120ms cubic-bezier(0.32, 0.72, 0.28, 1);
}

/* O realce é de NAVEGAÇÃO: só o passo que leva a algum lugar o recebe. O
   passo que acontece dentro do app é `<p>`, e o seletor de elemento é o que
   impede o cursor de prometer um destino que não existe. */
a.path__item:hover { background: var(--bg); color: var(--on-yellow); text-decoration: none; }

.path__item--static { cursor: default; }

.path__n {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--on-yellow);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.path__text { flex: 1; font-size: 15px; line-height: 1.5; }

.path__chevron { color: var(--faint); font-size: 18px; font-weight: 700; }

.notice { max-width: 620px; display: flex; flex-direction: column; gap: 14px; padding: 32px 0 40px; }

.notice p { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
    .path__item { transition: none; }
}