/* "Tell us a bit more", step 4 of sign-up. Builds on base.css and auth.css (the sign-up pages' Teal Split)
   and only adds the pieces this page needs: the same tokens, pixel borders and fonts. */
/* Pixelify Sans draws its 5 like an S, so its digits come from Press Start 2P, as on the Pricing page. */
@font-face{font-family:'Px Digits';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/press-start-2p-400.woff2) format('woff2');unicode-range:U+0030-0039;size-adjust:72%}
/* The capital C from Silkscreen: Pixelify's C reads as an O, and Silkscreen's sits on the baseline at the same height
   and weight (Press Start 2P's sat high; owner's demo, 2026-10-25). */
@font-face{font-family:'Px C';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/silkscreen-400.woff2) format('woff2');unicode-range:U+0043}
@font-face{font-family:'Px C';font-style:normal;font-weight:600 900;font-display:swap;src:url(../fonts/silkscreen-700.woff2) format('woff2');unicode-range:U+0043}
:root{--px:'Px Digits','Px C','Pixelify Sans',monospace;
  --ck-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' shape-rendering='crispEdges'%3E%3Cpath fill='%23083c36' d='M1 5h2v2H1zM3 6h1v2H3zM4 7h1v2H4zM5 6h1v2H5zM6 5h1v2H6zM7 4h1v2H7zM8 3h1v2H8zM9 2h1v2H9z'/%3E%3C/svg%3E");
  --rd-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' shape-rendering='crispEdges'%3E%3Cpath fill='%23083c36' d='M4 2h3v1H4zM3 3h5v5H3zM4 8h3v1H4zM2 4h1v3H2zM8 4h1v3H8z'/%3E%3C/svg%3E")}
.type-labels .field>label,.type-labels .field .lbl,.type-labels :is(.topline,.linkbtn,.next-card b,.steps li,.pitch .sub){font-family:var(--px)}

.card.wide{position:relative;width:min(100%,680px)}
.h1like{margin:0 0 10px;font:700 34px/1.1 var(--px);color:var(--teal)}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend.lbl{padding:0}
.q{margin:0 0 30px}
.q legend .opt,.lbl .opt{font:600 13px/1.2 var(--body);color:var(--muted);margin-left:4px}
.q-hint{margin:-2px 0 12px}
.lbl-s{display:block;margin:10px 0 6px;font:500 15px/1.2 var(--px);color:var(--teal-dark)}
.grp{margin:16px 0 8px;font:700 12px/1 var(--tiny);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.grp:first-of-type{margin-top:4px}

/* screen pips */
.pips{display:flex;align-items:center;gap:6px;margin:0 0 12px}
.pips .pip{width:12px;height:12px;background:var(--rule);box-shadow:0 0 0 2px var(--rule)}
.pips .pip.on{background:var(--coin);box-shadow:0 0 0 2px #8a5a00}
.pips .pip.done{background:var(--teal);box-shadow:0 0 0 2px var(--teal-dark)}
.pips b{margin-left:6px;font:400 8px/1 var(--ps);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- pixel checkbox and radio (native inputs, restyled) ---------- */
.ck{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;margin:1px 3px 0;background:#fff center/16px 16px no-repeat;cursor:pointer;
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark);image-rendering:pixelated}
.ck:checked{background-color:var(--coin);background-image:var(--ck-on)}
.ck.rd:checked{background-image:var(--rd-on)}
.ck:focus-visible{outline:3px dashed var(--pink);outline-offset:5px}
/* coin stamp: a ticked box pops in two hard steps */
.ck:checked{animation:stamp .24s steps(2,end)}
@keyframes stamp{0%{transform:scale(1.35)}50%{transform:scale(.9)}100%{transform:scale(1)}}

/* option rows */
.opts{display:grid;gap:10px;margin:0 3px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ob{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:11px 12px;background:#fff;cursor:pointer;font:700 15px/1.35 var(--px);color:var(--text);
  box-shadow:0 -3px 0 0 var(--rule),0 3px 0 0 var(--rule),-3px 0 0 0 var(--rule),3px 0 0 0 var(--rule)}
.ob:hover{background:#fffbe6}
.ob:has(.ck:checked){background:var(--paper);box-shadow:0 -3px 0 0 var(--teal),0 3px 0 0 var(--teal),-3px 0 0 0 var(--teal),3px 0 0 0 var(--teal)}
.ob span{min-width:0}
.ob .opt{display:block;font:600 13px/1.35 var(--px);color:var(--muted);margin:2px 0 0}
.ob-mini{padding:8px 10px;font-size:14px}

/* chips (multi or single choice) */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin:0 3px}
.chip{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:8px 13px;background:#fff;cursor:pointer;font:700 15px/1.2 var(--px);color:var(--teal-dark);
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark),0 6px 0 0 var(--teal-dark)}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip:hover{background:#fffbe6}
.chip:has(input:checked){background:var(--teal);color:var(--coin);transform:translateY(3px);box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark)}
.chip:has(input:focus-visible){outline:3px dashed var(--pink);outline-offset:5px}
.chip:has(input:checked) span::before{content:'';display:inline-block;width:9px;height:9px;margin:0 7px 0 0;background:var(--coin);box-shadow:0 0 0 2px #8a5a00}

/* drawer: dependent questions open downwards in four hard steps */
.drawer[hidden]{display:none}
.drawer.opening{animation:drawer .28s steps(4,end)}
@keyframes drawer{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 0 0)}}
.sub-in{margin:0 0 4px 38px}

/* errors (auth.css shows .err under .field.bad) */
.q.bad .ob,.q.bad .chip{box-shadow:0 -3px 0 0 var(--err),0 3px 0 0 var(--err),-3px 0 0 0 var(--err),3px 0 0 0 var(--err)}

/* screen 2 */
.fitbox{margin:0 3px 24px;padding:12px 14px;background:var(--paper);box-shadow:0 -3px 0 0 var(--rule),0 3px 0 0 var(--rule),-3px 0 0 0 var(--rule),3px 0 0 0 var(--rule)}
.fitbox p{margin:0;font:600 15px/1.5 var(--body)}
.whats summary{margin-top:8px;cursor:pointer;font:500 15px/1.3 var(--px);color:var(--teal);text-decoration:underline;text-underline-offset:.16em}
.whats summary:hover{background:var(--coin);color:var(--teal-dark)}
.whats p{margin:8px 0 0;font-size:14px;color:var(--text)}
.carrier{margin:0 3px 14px;padding:12px;background:#fff;box-shadow:0 -3px 0 0 var(--rule),0 3px 0 0 var(--rule),-3px 0 0 0 var(--rule),3px 0 0 0 var(--rule)}
.carrier .crow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.carrier .lbl-s{margin-top:0}
.carrier .c-other{margin:10px 0 0}
.carrier option:disabled{color:#9aa39f}
.rm{height:40px;padding:0 10px;border:0;background:none;color:var(--err);font:700 12px/1 var(--tiny);letter-spacing:.04em;cursor:pointer}
.rm:hover{background:#ffd9d6}
.addbtn{display:inline-flex;align-items:center;gap:8px;margin:2px 3px 0;padding:8px 12px;border:0;cursor:pointer;background:none;color:var(--teal);font:500 16px/1.2 var(--px);
  box-shadow:0 -3px 0 0 var(--teal),0 3px 0 0 var(--teal),-3px 0 0 0 var(--teal),3px 0 0 0 var(--teal)}
.addbtn:hover{background:var(--coin);color:var(--teal-dark)}
.addbtn span{font-size:20px}
/* monthly volume: three coin stacks; the one picked hops */
.stacks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 3px}
.stk{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 10px;background:#fff;cursor:pointer;font:500 17px/1 var(--px);color:var(--teal-dark);
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark),0 6px 0 0 var(--teal-dark)}
.stk input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.stk span{letter-spacing:.08em}
.stk canvas{width:84px;height:auto}
.stk:hover{background:#fffbe6}
.stk:has(input:checked){background:var(--paper);box-shadow:0 -3px 0 0 var(--teal),0 3px 0 0 var(--teal),-3px 0 0 0 var(--teal),3px 0 0 0 var(--teal),0 6px 0 0 var(--teal),0 0 0 7px var(--coin)}
.stk:has(input:checked) canvas{animation:hop .5s steps(4,end)}
.stk:has(input:focus-visible){outline:3px dashed var(--pink);outline-offset:9px}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}70%{transform:translateY(-4px)}}
.inp select{background-color:#fff}
.s2-foot{display:flex;justify-content:space-between;gap:16px;margin:0 4px}

/* done recap */
.recap{margin:4px 0 18px;text-align:left}
.recap dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto}
.recap dt,.recap dd{margin:0;padding:9px 0;border-bottom:3px dashed var(--rule)}
.recap dt{font:500 15px/1.3 var(--px);color:var(--teal-dark)}
.recap dt span{display:block;margin-top:3px;font:600 14px/1.4 var(--body);color:var(--text)}
.recap dt span.none{color:var(--muted);font-style:italic}
.recap dd{display:flex;align-items:center;padding-left:12px}

/* side panel: the license "Checking" chip blinks three times, Peter's tally of answers */
.steps .tick-run{background:var(--coin);color:var(--teal-dark);animation:blinkchip 1.2s steps(2,end) 3}
@keyframes blinkchip{50%{opacity:.55}}
.stage .tally{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);z-index:2;margin:0;padding:3px 8px;white-space:nowrap;background:var(--teal-dark);color:var(--coin);font:400 8px/1.4 var(--ps);letter-spacing:.05em;text-transform:uppercase}
.pig.gulp{animation:gulp .3s steps(2,end)}
@keyframes gulp{50%{translate:0 4px;scale:1.04 .94}}
.flyer{position:fixed;left:0;top:0;width:28px;height:28px;z-index:40;pointer-events:none}
.wipe{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;display:none}
.wipe.on{display:block}

@media (max-width:899px){
  .stage{width:126px}
  .stage .tally{position:static;transform:none;margin:0 0 4px;padding:3px 4px;white-space:normal;text-align:center;font-size:10px;line-height:1.3}
  .h1like{font-size:29px}
}
@media (max-width:560px){
  .opts.two{grid-template-columns:minmax(0,1fr)}
  .stacks{gap:10px}
  .stk canvas{width:60px}
  .sub-in{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.chip:has(input:checked){transform:none}}
/* Pixelify Sans draws its fi ligature as one glyph that reads "Ane"; kept last because the font shorthands above reset it. */
h1,h2,h3,.h1like,.type-labels *{font-variant-ligatures:none!important}