/* desmos wizard: the store's own pages (got-it, code, terms, privacy, refund), on the v2 system (/shared/tokens.css) */
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font-size:var(--t-m);line-height:1.5}
[hidden]{display:none!important}
a{color:inherit}

/* top bar: the brand, and on the code page the × */
.topo{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 var(--gutter);width:100%;max-width:640px;margin:0 auto}
.marca{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--ink)}
.marca b{font:700 var(--t-m)/1 var(--f-ui);letter-spacing:-.01em}
.marca-gob{width:30px;height:26px;display:block}
.marca-gob svg{width:100%;height:100%;display:block}
.fecha{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;border-radius:50%;color:var(--mute);text-decoration:none;transition:background var(--m-rapido)}
.fecha:hover{background:var(--sunk)}
.fecha svg{width:20px;height:20px}

.palco{flex:1;width:100%;max-width:480px;margin:0 auto;padding:var(--s4) var(--gutter) var(--s10)}

/* the goblin and his balloon */
.gob{display:block;margin:0 auto}
.gob svg{width:100%;height:100%;display:block}
.balao{position:relative;display:table;margin:var(--s3) auto 0;padding:var(--s2) var(--s4);background:var(--surface);border-radius:var(--r-chip);box-shadow:var(--sombra-1);font:500 var(--t-s)/1.35 var(--f-ui);color:var(--ink-2);text-align:center;max-width:300px}
.balao::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;background:var(--surface);transform:rotate(45deg);border-radius:2px}

.titulo{margin:var(--s6) 0 0;font:400 var(--d-m)/1 var(--f-display);letter-spacing:-.01em;text-align:center}
.sub{margin:var(--s3) auto 0;max-width:34ch;color:var(--mute);text-align:center}
.sub b{color:var(--ink);font-weight:600}

/* the code, big */
.rotulo{display:block;margin:var(--s8) 0 var(--s2);font:500 var(--t-xs)/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-align:center}
.codigo{display:flex;align-items:center;justify-content:center;gap:var(--s3);width:100%;min-height:84px;padding:var(--s4);background:var(--surface);border:1.5px dashed var(--line-2);border-radius:var(--r-card);font:600 clamp(26px,8.4vw,36px)/1 var(--f-mono);letter-spacing:.06em;word-spacing:0;white-space:nowrap;color:var(--ink);user-select:all;-webkit-user-select:all}
.copia{appearance:none;border:0;background:var(--sunk);color:var(--ink-2);height:36px;padding:0 var(--s3);border-radius:var(--r-chip);font:600 var(--t-s)/1 var(--f-ui);letter-spacing:0;cursor:pointer;flex:none;user-select:none;-webkit-user-select:none}
.copia:active{transform:translateY(1px)}
.nota{margin:var(--s3) 0 0;font-size:var(--t-s);color:var(--mute);text-align:center}
.nota a{color:var(--ink-2);text-underline-offset:2px}
.estado{min-height:1.5em;margin:var(--s3) 0 0;font-size:var(--t-s);color:var(--ink-2);text-align:center}
.estado.quase{color:var(--quase-ink)}

.acoes{display:grid;gap:var(--s3);margin-top:var(--s8)}
.acoes .btn{display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none}
.link{display:block;margin:var(--s4) auto 0;padding:var(--s3);background:none;border:0;font:500 var(--t-s)/1.2 var(--f-ui);color:var(--mute);text-align:center;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* the field */
.campo{display:block;width:100%;height:64px;margin-top:var(--s8);padding:0 var(--s4);background:var(--surface);border:0;border-radius:var(--r-card);box-shadow:inset 0 0 0 1.5px var(--line-2);font:600 clamp(22px,7vw,28px)/1 var(--f-mono);letter-spacing:.08em;word-spacing:0;text-align:center;color:var(--ink);text-transform:uppercase;transition:box-shadow var(--m-rapido)}
.campo::placeholder{color:#bdb7ad;letter-spacing:.08em}
.campo:focus{outline:0;box-shadow:inset 0 0 0 2px var(--ink)}
.campo.quase{box-shadow:inset 0 0 0 2px var(--quase)}
.campo.email{font:500 var(--t-l)/1 var(--f-ui);letter-spacing:var(--track-ui);text-transform:none;text-align:left;height:56px;margin-top:var(--s4)}
.exemplo{white-space:nowrap;font-family:var(--f-mono);letter-spacing:.02em;word-spacing:0;color:var(--ink-2)}

/* "Lost it?" */
.perdeu{margin-top:var(--s10);padding-top:var(--s6);border-top:1.5px solid var(--line)}
.perdeu h2{margin:0;font:600 var(--t-l)/1.2 var(--f-ui)}
.perdeu p{margin:var(--s2) 0 0;color:var(--mute);font-size:var(--t-s)}
.perdeu .btn{width:100%;margin-top:var(--s3)}

/* entrance: a stagger, nothing else */
.entra>*{animation:sobe var(--m-lento) var(--e-saida) both}
.entra>*:nth-child(2){animation-delay:calc(var(--stagger)*1)}
.entra>*:nth-child(3){animation-delay:calc(var(--stagger)*2)}
.entra>*:nth-child(4){animation-delay:calc(var(--stagger)*3)}
.entra>*:nth-child(5){animation-delay:calc(var(--stagger)*4)}
.entra>*:nth-child(6){animation-delay:calc(var(--stagger)*5)}
.entra>*:nth-child(n+7){animation-delay:calc(var(--stagger)*6)}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}}

/* footer */
.rodape{width:100%;max-width:640px;margin:0 auto;padding:var(--s6) var(--gutter) calc(var(--s8) + env(safe-area-inset-bottom));border-top:1.5px solid var(--line);color:var(--mute);font-size:var(--t-xs);line-height:1.5}
.rodape nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:var(--s3)}
.rodape nav a{font-size:var(--t-s);font-weight:500;text-decoration:none;color:var(--ink-2)}
.rodape p{margin:0}

/* legal pages: long text that reads well */
.legal{flex:1;width:100%;max-width:640px;margin:0 auto;padding:var(--s6) var(--gutter) var(--s14)}
.legal h1{margin:0;font:400 var(--d-m)/1 var(--f-display);letter-spacing:-.01em}
.legal .data{margin:var(--s2) 0 0;color:var(--mute);font-size:var(--t-s)}
.legal .curto{margin:var(--s8) 0 0;padding:var(--s5) var(--s6);background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sombra-1)}
.legal .curto h2{margin:0 0 var(--s2);font:600 var(--t-xs)/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.legal .curto ul{margin:0;padding:0;list-style:none}
.legal .curto li{position:relative;padding-left:var(--s6);margin:var(--s2) 0 0;color:var(--ink-2)}
.legal .curto li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.legal section{margin-top:var(--s10)}
.legal h2{margin:0;font:600 var(--t-xl)/1.25 var(--f-ui)}
.legal p,.legal li{color:var(--ink-2);max-width:62ch}
.legal p{margin:var(--s3) 0 0}
.legal ul.lista{margin:var(--s3) 0 0;padding-left:1.2em}
.legal ul.lista li{margin:var(--s2) 0 0}
.legal b{color:var(--ink);font-weight:600}
.legal a{text-underline-offset:2px}
.legal .abas{display:flex;gap:var(--s2);margin:0 0 var(--s8);flex-wrap:wrap}
.legal .abas a{display:inline-flex;align-items:center;height:36px;padding:0 var(--s4);border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font:500 var(--t-s)/1 var(--f-ui);text-decoration:none;color:var(--ink-2)}
.legal .abas a[aria-current]{background:var(--ink);color:#fff;box-shadow:none}

@media (min-width:768px){
  .palco{padding-top:var(--s10)}
  .titulo{font-size:var(--d-l)}
  .legal h1{font-size:var(--d-l)}
}
@media (prefers-reduced-motion:reduce){.entra>*{animation:none}}