/* Wetsuit finder v2: one question per screen, then swipe.
   Branding per Nick 21 Oct 2026: black, white and light blue, white Underground "Ride better." logo. */
:root{
  color-scheme: light;
  --ink:#000; --white:#fff; --blue:#08D9D6; --blue-soft:#DDF8F7;
  --page:#F2F2F2; --muted:#5A5A5A; --line:#D6D6D6;
  --font:"TeX Gyre Adventor","Century Gothic","Avenir Next",Arial,sans-serif;
  --max:34rem;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100dvh}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
:where(a,button,input,summary):focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ── header: bigger, black, white logo ─── */
.bar{position:sticky;top:0;z-index:20;background:var(--ink);display:flex;justify-content:center;
  padding:1rem 1rem calc(1rem + 4px);padding-top:max(1rem,env(safe-area-inset-top))}
.bar .logo img{width:clamp(220px,62vw,300px);height:auto}
.progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:#222}
.progress i{display:block;height:100%;width:0;background:var(--blue);transition:width .3s ease}

/* ── screens ───────────────────────────── */
main{flex:1;display:flex;flex-direction:column}
.screen{width:min(100% - 2rem,var(--max));margin:0 auto;padding:1.75rem 0 2rem;display:flex;flex-direction:column;animation:in .28s ease}
.screen[hidden]{display:none}
@keyframes in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.screen.backwards{animation-name:inback}
@keyframes inback{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

.q-num{margin:0 0 .4rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1,h2{margin:0 0 .75rem;line-height:1.05;text-transform:uppercase;letter-spacing:-.005em}
h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem)}
.hint{margin:0 0 1.25rem;color:var(--muted);font-size:.95rem}

/* intro */
.intro{justify-content:center;text-align:center;flex:1}
.intro h1{font-size:clamp(2.4rem,1.9rem + 3.6vw,3.6rem);margin-bottom:.75rem}
.intro .sub{font-size:1.25rem;font-weight:700;margin:0 auto 1.5rem}
.how{list-style:none;counter-reset:n;margin:0 auto 2rem;padding:0;text-align:left;max-width:20rem}
.how li{counter-increment:n;display:flex;align-items:center;gap:.75rem;padding:.5rem 0;font-size:1rem}
.how li::before{content:counter(n);flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  background:var(--blue);color:var(--ink);font-weight:700}
.trust{margin:1.75rem auto 0;font-size:.8rem;color:var(--muted);max-width:30ch}

/* options */
.opts{display:flex;flex-direction:column;gap:.6rem}
.opts button{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;width:100%;
  min-height:58px;padding:.85rem 1.1rem;background:var(--white);border:2px solid var(--white);
  font-size:1.1rem;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:border-color .12s,transform .08s}
.opts button small{font-size:.82rem;font-weight:400;color:var(--muted)}
.opts button small:empty{display:none}
.opts button:hover{border-color:var(--ink)}
.opts button:active{transform:scale(.98)}
.opts button.on{border-color:var(--ink);background:var(--ink);color:var(--white)}
.opts button.on small{color:rgba(255,255,255,.75)}

.go{width:100%;min-height:58px;border:0;background:var(--ink);color:var(--white);font-size:1.15rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;transition:background .15s,color .15s}
.go:hover{background:var(--blue);color:var(--ink)}
.go:disabled{opacity:.3;cursor:not-allowed;background:var(--ink);color:var(--white)}
.go.small{min-height:46px;font-size:.9rem}

.goback,.textlink{align-self:center;border:0;background:none;color:var(--ink);font-size:.95rem;
  text-decoration:underline;text-underline-offset:.25em;padding:.6rem .5rem}
.goback{margin-top:1.25rem;color:var(--muted)}
.goback:hover,.textlink:hover{color:var(--ink);text-decoration-color:var(--blue);text-decoration-thickness:3px}
.links{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:.5rem}

.nums{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}
.nums label{display:block;background:var(--white);padding:.75rem 1rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nums span{display:flex;align-items:baseline;gap:.35rem;margin-top:.25rem;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.nums input{width:100%;min-width:0;border:0;border-bottom:2px solid var(--ink);background:none;padding:.15rem 0;
  font:700 1.8rem var(--font);color:var(--ink);border-radius:0}
.nums input:focus{outline:none;border-bottom-color:var(--blue)}
.tip{background:var(--white);border-left:5px solid var(--blue);padding:.75rem 1rem;font-size:.88rem;margin-bottom:1.25rem}

/* ── results ───────────────────────────── */
.results{padding-top:1rem}
.match{background:var(--ink);color:var(--white);padding:1.1rem 1.2rem 1.2rem;margin-bottom:.75rem}
.match .k{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.match h2{margin:.25rem 0 .6rem;font-size:clamp(1.6rem,1.35rem + 1.2vw,2rem);color:var(--white)}
.match p{margin:.35rem 0 0;font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.9)}
.match b{background:var(--blue);color:var(--ink);padding:0 .3em}
.match .warn{border-left:3px solid var(--blue);padding-left:.6rem;margin-top:.7rem;font-size:.88rem}
.match .textlink{color:var(--white);padding:.4rem 0 0;font-size:.9rem;align-self:flex-start;display:inline-block}

.brands{display:flex;gap:.4rem;overflow-x:auto;padding:.1rem 0 .6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.brands::-webkit-scrollbar{display:none}
.brands button{flex:none;min-height:38px;padding:0 .9rem;border:2px solid var(--line);background:var(--white);font-size:.85rem;font-weight:700}
.brands button.on{background:var(--ink);border-color:var(--ink);color:var(--white)}

.deck{position:relative;height:380px}
.card{position:absolute;inset:0;background:var(--white);display:flex;flex-direction:column;
  box-shadow:0 8px 24px rgba(0,0,0,.14);touch-action:pan-y;user-select:none;-webkit-user-select:none;
  transition:transform .3s ease,opacity .3s ease;will-change:transform}
.card.drag{transition:none}
.card.under{transform:scale(.95) translateY(10px);opacity:.7}
.card .img{height:210px;flex:none;display:flex;align-items:center;justify-content:center;padding:.75rem;background:#fff;cursor:pointer}
.card .img img{max-height:100%;width:auto;object-fit:contain;pointer-events:none}
.card .info{flex:1;padding:.75rem 1rem .85rem;border-top:1px solid var(--page)}
.card .brand{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card .name{margin:.1rem 0 .35rem;font-size:1rem;font-weight:700;line-height:1.25}
.card .line{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem}
.card .price{font-size:1.3rem;font-weight:700}
.card .tag{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--page);padding:.2em .5em}
.card .size{margin-top:.4rem;font-size:.88rem;display:flex;flex-wrap:wrap;gap:.25rem .75rem;align-items:center}
.card .size b{background:var(--blue);padding:0 .35em}
.card .chart-link{border:0;background:none;padding:0;font-size:.85rem;text-decoration:underline;text-underline-offset:.2em}
.card .count{position:absolute;top:.6rem;right:.6rem;font-size:.75rem;font-weight:700;color:var(--muted);background:rgba(255,255,255,.9);padding:.15rem .5rem}
.stamp{position:absolute;top:1.25rem;padding:.3rem .8rem;border:4px solid;font-size:1.5rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;opacity:0;transform:rotate(-12deg);pointer-events:none;background:rgba(255,255,255,.9)}
.stamp.yes{left:1rem;color:var(--ink);border-color:var(--blue)}
.stamp.no{right:1rem;color:var(--ink);border-color:var(--ink);transform:rotate(12deg)}

.deck-btns{display:flex;justify-content:center;gap:1.75rem;margin-top:.9rem}
.deck-btns button{width:62px;height:62px;border-radius:50%;font-size:1.5rem;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.12);transition:transform .1s}
.deck-btns button:active{transform:scale(.92)}
.deck-btns .nope{background:var(--white);color:var(--ink);border:2px solid var(--ink)}
.deck-btns .yes{background:var(--blue);color:var(--ink);border:2px solid var(--blue)}
.swipe-hint{text-align:center;font-size:.8rem;color:var(--muted);margin:.5rem 0 0}
.empty{background:var(--white);padding:1.5rem;text-align:center}
.empty p{margin:0 0 1rem}

/* ── picks ─────────────────────────────── */
.pick-list{display:flex;flex-direction:column;gap:.6rem;margin:.5rem 0 1rem}
.pick{display:grid;grid-template-columns:84px 1fr;gap:.85rem;background:var(--white);padding:.7rem;align-items:center}
.pick img{width:84px;height:84px;object-fit:contain;background:#fff}
.pick .name{font-weight:700;font-size:.95rem;line-height:1.25}
.pick .meta{font-size:.82rem;color:var(--muted);margin:.15rem 0 .45rem}
.pick .price{font-weight:700;font-size:1.1rem;margin-right:.5rem}
.pick .buy{display:inline-block;background:var(--ink);color:var(--white);text-decoration:none;font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:.55rem .9rem;margin-top:.3rem}
.pick .buy:hover{background:var(--blue);color:var(--ink)}
.addon{background:var(--white);border-left:5px solid var(--blue);padding:.8rem 1rem;font-size:.9rem;margin:0 0 .6rem}
.addon a{color:var(--ink);font-weight:700}
.row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.ghost{flex:1;min-height:48px;border:2px solid var(--ink);background:none;font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;padding:0 .75rem}
.ghost:hover{background:var(--ink);color:var(--white)}

.faq{margin-top:2.25rem}
.faq h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .6rem}
.faq details{background:var(--white);margin-bottom:.4rem}
.faq summary{list-style:none;cursor:pointer;padding:.95rem 2.5rem .95rem 1rem;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.3rem;font-weight:400}
.faq details[open] summary{border-bottom:3px solid var(--blue)}
.faq details[open] summary::after{content:"\2212"}
.faq details p,.faq .warr{margin:0;padding:.75rem 1rem 0;font-size:.92rem}
.faq details > :last-child{padding-bottom:1rem}
.faq .warr{padding-left:2rem}
.faq .warr li{margin-bottom:.25rem}
.faq a{color:var(--ink);font-weight:700}
table.mini{width:calc(100% - 2rem);margin:.75rem 1rem 0;border-collapse:collapse;font-size:.88rem}
table.mini th,table.mini td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--page)}
table.mini th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid var(--ink)}

/* ── size charts pop-up ────────────────── */
.sheet{width:min(100%,40rem);max-width:100%;max-height:92dvh;margin:auto auto 0;padding:0;border:0;background:var(--white);color:var(--ink);
  display:none;flex-direction:column}
.sheet[open]{display:flex}
.sheet::backdrop{background:rgba(0,0,0,.6)}
@media(min-width:700px){.sheet{margin:auto}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--white);padding:.9rem 1rem}
.sheet-head h3{margin:0;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase}
.sheet .x{border:0;background:none;color:var(--white);font-size:1.3rem;width:40px;height:40px}
.sheet-tabs{display:flex;gap:.4rem;padding:.75rem 1rem 0;overflow-x:auto;scrollbar-width:none}
.sheet-tabs::-webkit-scrollbar{display:none}
.sheet-tabs button{flex:none;min-height:36px;padding:0 .9rem;border:2px solid var(--line);background:var(--white);font-size:.85rem;font-weight:700}
.sheet-tabs button.on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.sheet-note{margin:.75rem 1rem 0;font-size:.88rem}
.sheet-note b{background:var(--blue);padding:0 .3em}
.sheet-table{overflow:auto;margin:.75rem 1rem 0;border:1px solid var(--line);flex:1;min-height:0}
.sheet-table table{border-collapse:collapse;width:100%;font-size:.85rem;min-width:24rem}
.sheet-table th,.sheet-table td{padding:.5rem .6rem;text-align:left;border-bottom:1px solid var(--page);white-space:nowrap}
.sheet-table th{position:sticky;top:0;background:var(--white);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
.sheet-table td:first-child{font-weight:700}
.sheet-table tr.you td{background:var(--blue-soft)}
.sheet-table tr.you td:first-child{box-shadow:inset 5px 0 0 var(--blue)}
.sheet-foot{margin:.6rem 1rem 1rem;font-size:.8rem;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* keep the yes and no buttons in reach on phones, even with the bigger match box */
.deck-btns{position:sticky;bottom:0;z-index:5;margin:0 -1rem;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--page) 70%,rgba(242,242,242,0))}
@media (max-height:900px){
  .deck{height:315px}
  .card .img{height:150px}
}

/* ── prices, savings and stock (cards and picks) ── */
.was{font-size:.9rem;color:var(--muted);text-decoration:line-through}
.save{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--white);padding:.2em .5em}
.card .line.tags{margin-top:.3rem}
.low{font-weight:700}
.low b,.card .size b{background:var(--blue);padding:0 .35em}

/* picks, laid out like a website listing */
.pick{display:grid;grid-template-columns:120px 1fr;gap:1rem;background:var(--white);padding:.85rem;align-items:start}
.pick .pimg{position:relative;display:block;background:#fff}
.pick .pimg img{width:120px;height:150px;object-fit:contain}
.pick .flag{position:absolute;top:0;left:0;background:var(--blue);color:var(--ink);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.2em .45em}
.pick .brand{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pick .name{font-weight:700;font-size:1rem;line-height:1.25;margin:.1rem 0 .35rem}
.pick .line{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem}
.pick .price{font-size:1.3rem;font-weight:700;margin:0}
.pick .stock{font-size:.85rem;margin:.35rem 0 .6rem}
.pick .buy{display:block;text-align:center;margin:0;padding:.8rem 1rem;font-size:.95rem}
.pick .via{font-size:.72rem;color:var(--muted);margin-top:.35rem;text-align:center}
@media(max-width:360px){.pick{grid-template-columns:90px 1fr}.pick .pimg img{width:90px;height:120px}}

/* ── email perk pop-out ────────────────── */
.perk{position:fixed;z-index:30;right:max(.75rem,env(safe-area-inset-right));bottom:max(.75rem,env(safe-area-inset-bottom));
  width:min(calc(100vw - 1.5rem),21rem);background:var(--ink);color:var(--white);padding:1.1rem 1.1rem 1rem;
  box-shadow:0 12px 32px rgba(0,0,0,.35);border-top:5px solid var(--blue);transform:translateX(115%);transition:transform .35s ease}
.perk.in{transform:none}
.perk-x{position:absolute;top:.35rem;right:.35rem;width:36px;height:36px;border:0;background:none;color:var(--white);font-size:1.1rem}
.perk-k{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.perk h3{margin:.2rem 2rem .35rem 0;font-size:1.2rem;line-height:1.15;text-transform:uppercase}
.perk-sub{margin:0 0 .75rem;font-size:.9rem}
.perk-sub strong{color:var(--blue)}
.perk form{display:flex;flex-direction:column;gap:.5rem}
.perk input{min-height:48px;border:2px solid var(--white);padding:0 .8rem;font:1rem var(--font);border-radius:0}
.perk input.bad{border-color:var(--blue);outline:2px solid var(--blue)}
.perk .go{background:var(--blue);color:var(--ink)}
.perk .go:hover{background:var(--white)}
.perk-fine{margin:.6rem 0 0;font-size:.7rem;line-height:1.4;color:rgba(255,255,255,.7)}
.perk-done{margin:.25rem 0 0;font-weight:700;color:var(--blue)}
.perk-tab{position:fixed;z-index:29;right:0;bottom:5.5rem;border:0;background:var(--blue);color:var(--ink);font-weight:700;font-size:.85rem;
  padding:.7rem .9rem;box-shadow:0 4px 14px rgba(0,0,0,.2)}

/* start screen: light background, all text black, black button that turns light blue (Nick, 21 Oct) */
.intro,.intro h1,.intro .sub,.intro .sub2,.intro .trust{color:var(--ink)}
.intro .sub{margin-bottom:.4rem}
.intro .sub2{font-size:1.05rem;margin:0 auto 2.25rem;max-width:24ch}

/* stock: "We have this in your size" plus an honest low-stock note */
.card .size .low,.pick .stock .low{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:2px solid var(--ink);padding:.05em .45em}
.pick .stock{display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:center}

/* pop-out polish: phones get a slim bar that slides up from the bottom; email and button side by side */
.perk form{flex-direction:row}
.perk input{flex:1;min-width:0}
.perk .go{width:auto;flex:none;padding:0 1rem;min-height:48px;font-size:.85rem}
@media(max-width:599px){
  .perk{left:0;right:0;bottom:0;width:auto;padding:.9rem 1rem calc(.8rem + env(safe-area-inset-bottom));transform:translateY(110%)}
  .perk.in{transform:none}
  .perk h3{font-size:1.05rem;margin-bottom:.2rem}
  .perk-sub{font-size:.85rem;margin-bottom:.6rem}
  .perk-fine{font-size:.68rem;margin-top:.45rem}
  .perk-tab{bottom:1rem}
}

/* "Recommended for you" tag (replaces the low-stock notes) */
.reco{display:inline-block;background:var(--blue);color:var(--ink);font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.2em .5em;margin-bottom:.3rem}
.card .brand .reco{margin:0 .5rem 0 0;vertical-align:.08em}
.reco-row{margin-bottom:.1rem}
/* the best match stands out in the picks list */
.pick.top{outline:3px solid var(--blue);outline-offset:-3px}

/* ══ Armstrong trade-in v2 additions (21 Oct 2026) ══ */
.search{display:block;width:100%;min-height:52px;margin:0 0 1rem;padding:0 1rem;border:2px solid var(--ink);border-radius:0;
  background:var(--white);font:700 1.05rem var(--font);color:var(--ink)}
.search::placeholder{font-weight:400;color:var(--muted)}
.grp{margin:1.1rem 0 .5rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.grp:first-child{margin-top:0}
.none-found{background:var(--white);padding:1rem;font-size:.92rem}
.chosen{background:var(--ink);color:var(--white);padding:.7rem 1rem;margin:0 0 1rem;font-weight:700}
.chosen span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}

.tlist{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.tlist li{display:flex;align-items:center;gap:.75rem;background:var(--white);padding:.85rem 1rem}
.tlist .nm{flex:1;min-width:0;font-weight:700;line-height:1.25}
.tlist .gr{display:block;font-size:.8rem;font-weight:400;color:var(--muted)}
.tlist .rm{flex:none;border:0;background:none;font-size:.85rem;text-decoration:underline;text-underline-offset:.2em;color:var(--muted);padding:.5rem}
.tlist .rm:hover{color:var(--ink)}
.stack{display:flex;flex-direction:column;gap:.6rem}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.6rem}
.fields label,.field-wide{display:block;background:var(--white);padding:.65rem .9rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fields .full{grid-column:1/-1}
.fields input,.field-wide textarea{display:block;width:100%;margin-top:.25rem;border:0;border-bottom:2px solid var(--ink);background:none;border-radius:0;
  padding:.2rem 0;font:700 1.1rem var(--font);color:var(--ink);letter-spacing:0;text-transform:none}
.field-wide{margin-bottom:.6rem}
.field-wide textarea{font-weight:400;font-size:1rem;min-height:3.2rem;resize:vertical}
.fields input:focus,.field-wide textarea:focus{outline:none;border-bottom-color:var(--blue)}
@media(max-width:400px){.fields{grid-template-columns:1fr}}
.optin{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;margin:.25rem 0 1.25rem;cursor:pointer}
.optin input{width:1.25rem;height:1.25rem;margin:.1rem 0 0;accent-color:var(--ink);flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{margin:.75rem 0 0;font-weight:700;font-size:.92rem;border-left:4px solid var(--ink);padding-left:.6rem}
.fine{margin:.75rem 0 0;font-size:.78rem;color:var(--muted);text-align:center}

.sent{background:var(--ink);color:var(--white);padding:1.4rem 1.2rem}
.sent .k{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.sent h2{color:var(--white);margin:.3rem 0 .6rem}
.sent p{margin:.45rem 0 0;color:rgba(255,255,255,.9)}
.sent b{background:var(--blue);color:var(--ink);padding:0 .3em;word-break:break-all}

/* ══ 2026 brand, variation A "Surf Teal" (22 Oct 2026) ══
   Source: Underground_Brand_Web_Design_System_Claude.md (Drive, Working Files) and the live fit site.
   Foil = Surf Teal #00B0B9. Black text on teal fills. Black focus rings (teal is too pale on white). */
:root{--teal:#00B0B9;--teal-ink:#006A70;--blue:#00B0B9;--blue-soft:#E0F5F6}
:where(a,button,input,summary,textarea):focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 2px var(--white)}
.bar{background:var(--teal);padding-top:max(.75rem,env(safe-area-inset-top));padding-bottom:calc(.75rem + 4px)}
.bar .logo img{width:clamp(200px,58vw,320px)}
.progress{background:rgba(0,0,0,.18)}
.progress i{background:var(--ink)}
.stripe{display:none}
.eyebrow{margin:0 0 .5rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.intro h1{font-size:clamp(1.9rem,1.2rem + 3.4vw,2.9rem);line-height:1.06}
.ticks{list-style:none;margin:0 auto 1rem;padding:0;text-align:left;width:fit-content}
.ticks li{display:flex;align-items:center;gap:.55rem;padding:.15rem 0;font-size:1.1rem;font-weight:700}
.ticks li::before{content:"";flex:none;width:1.15em;height:1.15em;background:no-repeat center/contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5l5.5 5.5L20.5 6' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.intro .sub2{max-width:30ch;margin-bottom:1.5rem;font-weight:700}
.intro .trust{max-width:none;line-height:1.45}
.intro .trust>span{display:block}
.stars{color:#FBBC04;letter-spacing:.06em}
.go:hover{background:var(--teal);color:var(--ink)}
.opts button.on{border-color:var(--ink);background:var(--ink);color:var(--white)}
.chosen span,.sent .k{color:var(--teal)}
.sent b{background:var(--teal)}
.faq details[open] summary{border-bottom-color:var(--teal)}

/* ══ 2026 brand, variation B "Black and Stripe" (22 Oct 2026) ══
   Black and white first, Surf Teal only as the action colour (design system: 70-80% white, 15-25% black, 5-10% accent).
   Official 2026 stripe pattern (logo suite 06, white vector) as the brand graphic on the start screen. Square everything. */
body.v-black{background:var(--white)}
.v-black .bar{background:var(--ink);border-bottom:0}
.v-black .progress{background:#2a2a2a}
.v-black .progress i{background:var(--teal)}

.v-black .intro{background:var(--ink);color:var(--white);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);
  padding-top:0;padding-bottom:2.25rem;margin-bottom:0}
.v-black .stripe{display:block;height:clamp(84px,18vw,130px);margin:0 0 1.5rem;
  background:url("ug-stripe-white.svg") center/auto 230% no-repeat}
.v-black .intro h1,.v-black .intro .sub2,.v-black .intro .trust,.v-black .ticks li{color:var(--white)}
.v-black .eyebrow{color:var(--teal)}
.v-black .ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5l5.5 5.5L20.5 6' fill='none' stroke='%2300B0B9' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.v-black .intro .trust{color:rgba(255,255,255,.75)}
.v-black .intro .go{background:var(--teal);color:var(--ink)}
.v-black .intro .go:hover{background:var(--white);color:var(--ink)}
.v-black .intro :focus-visible{outline-color:var(--white);box-shadow:0 0 0 2px var(--ink)}

/* question screens: white page, 1px Alloy borders (design system cards), black when chosen */
.v-black .opts button{border:1px solid var(--line);box-shadow:none;border-left:5px solid var(--line)}
.v-black .opts button:hover{border-color:var(--ink)}
.v-black .opts button.on{border-color:var(--ink);background:var(--ink);color:var(--white);border-left-color:var(--teal)}
.v-black .q-num{color:var(--teal-ink)}
.v-black .search{border:1px solid #333;border-bottom:3px solid var(--ink)}
.v-black .go{background:var(--ink);color:var(--white)}
.v-black .go:hover{background:var(--teal);color:var(--ink)}
.v-black .tlist li,.v-black .none-found{border:1px solid var(--line)}
.v-black .fields label,.v-black .field-wide{border:1px solid var(--line)}
.v-black .chosen{border-left:6px solid var(--teal)}
.v-black .faq details{border:1px solid var(--line)}
.v-black .sent{border-top:6px solid var(--teal)}

/* start screen footnote (Nick, 26 Oct) */
.note-star{margin:1rem auto 0;max-width:34rem;font-size:.78rem;line-height:1.45;text-align:left}
.v-black .note-star{color:rgba(255,255,255,.72)}

/* start screen photo instead of the stripes (Nick, 26 Oct). Same Armstrong photo as demo.undergroundsurf.co.nz,
   full width behind the top of the start screen, darkened toward the bottom so the white headline reads. */
body.v-black{overflow-x:clip}
.v-black .intro{position:relative;isolation:isolate;padding-top:calc(var(--ph) - 7.5rem)}
.v-black{--ph:clamp(300px,52vh,470px)}
.v-black .stripe{display:none}
.v-black .hero-photo,.v-black .intro::before{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;max-width:none;height:var(--ph)}
.v-black .hero-photo{object-fit:cover;object-position:40% 42%;z-index:-2}
.v-black .intro::before{content:"";z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.1) 35%,rgba(0,0,0,.75) 75%,#000 100%)}
@media(max-width:600px){.v-black .hero-photo{object-position:38% 40%}}
.v-black .intro h1{text-shadow:0 2px 12px rgba(0,0,0,.45)}

/* items we're not taking as trade-ins (column D not Y): still listed, clearly flagged (Nick, 26 Oct) */
.opts button.not-taking{border-left-color:#F5B335}
.opts button.not-taking small{color:#7A4F00;font-weight:700}
.opts button.not-taking.on small{color:#F5B335}
.chosen .nt{display:block;margin-top:.35rem;font-style:normal;font-size:.8rem;font-weight:400;color:#F5B335}
.tlist li.not-taking{border-left:5px solid #F5B335}
.tlist .nt{display:block;margin-top:.15rem;font-size:.78rem;font-weight:700;color:#7A4F00}

/* used.: budget is a single-line input inside .field-wide */
.field-wide input{display:block;width:100%;margin-top:.25rem;border:0;border-bottom:2px solid var(--ink);background:none;border-radius:0;font:inherit;font-weight:400;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);padding:.3rem 0}
.field-wide input:focus{outline:none;border-bottom-color:var(--blue)}