/* Aurben "Contact us" funnel — white and black only, waste management.
   Follows a "Contact us" ad button, so it reads as a form you fill out, not a
   pitch you scroll. The mono voice echoes the command line on aurben.co.
   Standalone: does not depend on funnel.css. */

:root{
  /* White and black, nothing else. The page carries no colour at all, so the
     one coloured object on it — the film — is the only thing that can pull an
     eye. One accent doing every job: selected, focused, pressed and confirmed
     are all the same black, so nothing competes. */
  --b:#0B0B0B;              /* dark black: text, and the accent itself */
  --w:#fff;
  --paper:#fff;             /* bright white, everywhere */
  --acc:#0B0B0B;
  --acc-2:#2A2A2A;        /* hover */
  --acc-ink:#8A8A8A;      /* muted accent */
  --acc-lt:#EFEFEF;       /* tints: badges, wells, focus rings */
  --g1:#1A1A1A;   /* body copy */
  --g2:#6E6E6E;   /* muted */
  --g3:#E4E4E4;   /* hairlines — light enough that white stays white */
  --g4:#F7F7F7;   /* wells */
  --font-sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-display:"Fraunces","Times New Roman",serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{height:100%}
body{
  margin:0;background:var(--paper);color:var(--b);
  font-family:var(--font-sans);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
}
/* One screen per step. main only scrolls if a viewport is genuinely too short
   to hold the form — clipping it would make the funnel impossible to finish. */
main{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
img{max-width:100%;display:block}
a{color:inherit}
.serif-i{font-family:var(--font-display);font-style:italic;font-weight:500}

/* ── progress ─────────────────────────────────────────────── */
.prog{position:fixed;top:0;left:0;right:0;height:5px;background:var(--g3);z-index:60}
.prog i{display:block;height:100%;width:0;border-radius:0 3px 3px 0;
  transition:width .42s cubic-bezier(.34,1.3,.5,1);background:var(--acc)}
/* The bar answers the tap: it lengthens, then flares once at its leading edge.
   Movement you caused is the cheapest reward there is. */
.prog.bump i::after{
  content:"";position:absolute;top:0;bottom:0;width:46px;right:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85));
  animation:flare .5s ease-out forwards;
}
.prog i{position:relative;overflow:hidden}
@keyframes flare{from{opacity:1}to{opacity:0}}

/* Step dots: four beats, filling. A bar tells you how much is left; dots tell
   you how few there are. */
.dots{display:inline-flex;align-items:center;gap:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--g3);
  transition:background .28s ease,transform .28s cubic-bezier(.3,1.5,.5,1)}
.dots i.on{background:var(--acc)}
.dots i.now{background:var(--acc);transform:scale(1.62)}

/* ── header ───────────────────────────────────────────────── */
.hd{border-bottom:1px solid var(--g3);position:sticky;top:0;background:var(--paper);z-index:50}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;
  font-size:.95rem;letter-spacing:.22em;text-transform:uppercase}
.mark img{width:24px;height:24px;border-radius:5px;filter:grayscale(1) contrast(1.15)}
.stepcount{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--g2);
  font-variant-numeric:tabular-nums}

/* ── layout ───────────────────────────────────────────────── */
/* ONE layout, at every size. The column is phone width and stays phone width
   on a 27-inch screen: same stacked cards, same thumbnail, same type. A funnel
   that rearranges itself between devices is two funnels to judge and two to
   fix, and the ad audience is mostly on a phone anyway — so the phone is the
   design and the desktop is that design, centred. */
.wrap{width:100%;max-width:520px;margin:0 auto;padding:0 22px}
main{display:flex;align-items:safe center;padding:clamp(16px,3.4vh,34px) 0 20px}
main > .wrap{width:100%}

/* ── the explainer ────────────────────────────────────────────
   A thumbnail under the options, at every width. The question owns the screen;
   this is proof that the thing works, not the thing itself. It leaves with
   question 1. */
.q-video{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--g3);
  display:flex;align-items:center;gap:14px}
/* The film is white-ground too, so a hairline is what gives it an edge. */
.q-video video{
  display:block;width:96px;height:96px;flex:0 0 96px;object-fit:cover;
  border-radius:9px;background:var(--g4);border:1px solid var(--g3);
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.09);
}
.q-video figcaption{font-size:.82rem;line-height:1.4;color:var(--g2);max-width:26em}
@media(max-height:700px){
  .q-video{margin-top:12px;padding-top:11px}
  .q-video video{width:72px;height:72px;flex-basis:72px}
  .q-video figcaption{font-size:.78rem}
}
/* Tall screens have room to show more of the film than a 96px chip, so it takes
   the room rather than leaving it blank. Height only — never width, or the
   phone and the desktop stop matching. */
@media(min-height:820px){
  .q-video{margin-top:20px;padding-top:16px;gap:16px}
  .q-video video{width:124px;height:124px;flex-basis:124px;border-radius:11px}
}

/* ── steps ────────────────────────────────────────────────── */
.step{display:none}
.step.active{display:block;animation:in .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.kicker{display:block;font-family:var(--font-mono);font-size:.74rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.step h1{font-size:clamp(1.6rem,6.4vw,1.9rem);font-weight:800;letter-spacing:-.035em;line-height:1.06;
  margin:0 0 10px;text-wrap:balance}
/* The question types itself in a word at a time. It costs 200ms nobody waits
   for — the options are still cascading in underneath — and it makes the
   screen feel like it is being said to you rather than served to you. */
.step.active h1 .wd{display:inline-block;animation:wd .4s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(var(--i,0) * .05s)}
@keyframes wd{from{opacity:0;transform:translateY(.32em) rotate(-1.2deg)}to{opacity:1;transform:none}}
/* Focus is moved here on every step so screen readers land on the question.
   It is not an interactive control, so it should not paint a focus ring. */
.step h1:focus{outline:none}
.sub{color:var(--g2);font-size:.97rem;margin:0 0 20px;max-width:34em}

/* ── answer echo ──────────────────────────────────────────────
   A half-second acknowledgement after each tap. Cheap to build, and it turns a
   form into something that answers back. */
.echo{
  position:fixed;left:50%;top:88px;transform:translate(-50%,-6px);z-index:70;
  background:var(--acc);color:var(--w);border-radius:999px;padding:12px 24px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  font-size:.9rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  opacity:0;pointer-events:none;max-width:calc(100vw - 40px);overflow:hidden;text-overflow:ellipsis;
}
.echo.on{animation:echo 1.15s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes echo{
  0%{opacity:0;transform:translate(-50%,-10px) scale(.94)}
  18%{opacity:1;transform:translate(-50%,0) scale(1)}
  75%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-8px) scale(.98)}
}

/* ── option cards ─────────────────────────────────────────── */
.opts{display:grid;gap:9px;grid-template-columns:1fr}
/* Options cascade in behind the question so the screen assembles itself
   instead of arriving as a wall. */
.step.active .opt{animation:optin .34s cubic-bezier(.2,.7,.3,1) both}
.step.active .opt:nth-child(1){animation-delay:.05s}
.step.active .opt:nth-child(2){animation-delay:.10s}
.step.active .opt:nth-child(3){animation-delay:.15s}
.step.active .opt:nth-child(4){animation-delay:.20s}
.step.active .opt:nth-child(5){animation-delay:.25s}
@keyframes optin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.opt{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  font:inherit;font-weight:600;color:var(--b);background:var(--w);
  border:1px solid var(--g3);border-radius:11px;padding:14px 48px 14px 15px;cursor:pointer;
  box-shadow:0 1px 1px rgba(0,0,0,.04), 0 3px 10px rgba(0,0,0,.05);
  transition:background .16s ease,color .16s ease,border-color .16s ease,
             box-shadow .16s ease,transform .12s cubic-bezier(.2,.7,.3,1);
}
/* The arrow is the affordance: it says "this takes you somewhere" before you
   touch it, and it leans forward when you hover. */
.opt::after{
  content:"→";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:1.1rem;font-weight:700;color:var(--g3);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),color .16s ease;
}
.opt:hover::after,.opt:focus-visible::after{color:var(--acc);transform:translate(4px,-50%)}
.opt.sel::after{content:"";}
.opt .key{
  flex:0 0 32px;height:32px;display:grid;place-items:center;
  background:var(--acc-lt);color:var(--acc);border:0;border-radius:8px;
  font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.02em;
  transition:background .16s ease,color .16s ease;
}
.opt .txt{display:block}
.opt .txt small{display:block;font-weight:400;font-size:.83rem;color:var(--g2);margin-top:1px}
.opt:hover,.opt:focus-visible{
  border-color:var(--acc);outline:none;transform:translateY(-2px);
  box-shadow:0 2px 3px rgba(0,0,0,.05), 0 10px 22px rgba(0,0,0,.13);
}
.opt:focus-visible{box-shadow:0 0 0 3px var(--acc-lt), 0 10px 22px rgba(0,0,0,.13)}
.opt.sel .txt small{color:rgba(255,255,255,.7)}
.opt:active{transform:translateY(0) scale(.995);
  box-shadow:0 1px 1px rgba(0,0,0,.06), 0 2px 5px rgba(0,0,0,.06)}
.opt.sel{background:var(--acc);color:var(--w);border-color:var(--acc);
  box-shadow:0 2px 4px rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.2)}
/* The tapped card confirms itself: the letter flips to a tick and the whole
   card gives one short pulse. That beat is the reward for answering. */
.opt.sel .key{background:rgba(255,255,255,.16);color:var(--w);font-size:0}
.opt.sel .key::before{content:"✓";font-size:1.05rem;font-family:var(--font-sans);font-weight:800}
.opt.picked{animation:pick .32s cubic-bezier(.3,1.5,.45,1)}
@keyframes pick{38%{transform:scale(1.022)}100%{transform:none}}
/* A ring of light leaves the exact spot the thumb landed. Tap feedback that
   comes from where you touched feels like the page noticed you, not like an
   animation that was going to play anyway. */
.opt .rip{
  position:absolute;left:var(--rx,50%);top:var(--ry,50%);width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;background:rgba(255,255,255,.5);
  pointer-events:none;animation:rip .52s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes rip{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(34)}}

/* ── details form ─────────────────────────────────────────── */
.fields{display:grid;gap:11px;grid-template-columns:1fr}
.field label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:5px;color:var(--g1)}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:1rem;color:var(--b);background:var(--w);
  border:1px solid var(--g3);border-radius:10px;padding:13px 15px;
  box-shadow:0 1px 1px rgba(0,0,0,.03);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field select{
  appearance:none;cursor:pointer;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--b) 50%),
                   linear-gradient(135deg,var(--b) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--acc-ink)}

/* A tick the moment a field is actually valid. Progress you can see beats an
   error you get told about after the fact. */
.field{position:relative}
.field.ok input{border-color:var(--acc);padding-right:46px}
.field.ok::after{
  content:"✓";position:absolute;right:16px;bottom:15px;font-weight:800;font-size:1rem;color:var(--acc);
  animation:tick .26s cubic-bezier(.3,1.5,.5,1) both;
}
@keyframes tick{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.field select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-lt)}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#a3a3a3}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-lt)}
.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--w) inset}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── recap of the answers they picked ─────────────────────── */
.recap{margin:0 0 14px;padding:0;list-style:none;font-size:.78rem;font-weight:700;
  letter-spacing:.02em;color:var(--acc)}

/* ── one proof line, not a wall of stats ──────────────────── */
.proof-line{margin:38px 0 0;padding-top:22px;border-top:1px solid var(--g3);
  font-size:.9rem;line-height:1.55;color:var(--g2);max-width:44em}
.proof-line b{color:var(--acc);font-weight:800}

/* ── resume banner (they refreshed or came back) ──────────── */
.resume{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 26px;padding:14px 18px;
  background:var(--acc-lt);border:1px solid #E3E3E3;border-radius:11px;font-size:.9rem;font-weight:600}
.resume button{font:inherit;font-weight:800;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.resume[hidden]{display:none}

/* ── consent ──────────────────────────────────────────────── */
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:14px;font-size:.78rem;line-height:1.45;
  color:var(--g1);cursor:pointer}
.consent input{flex:0 0 22px;width:22px;height:22px;margin:1px 0 0;accent-color:var(--acc);cursor:pointer}
.consent input:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.opt-tag{text-transform:none;letter-spacing:0;font-weight:400;color:var(--g2)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── buttons ──────────────────────────────────────────────── */
/* One button look, two roles: .btn-lg is the hero CTA, .submit is the form's
   own control. Keeping the hooks distinct stops a selector hitting both. */
.submit,.btn-lg{
  width:100%;margin-top:26px;font:inherit;font-size:.95rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--acc);color:var(--w);border:0;border-radius:11px;
  padding:17px 24px;cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.1), 0 10px 24px rgba(0,0,0,.18);
  transition:background .16s ease,box-shadow .16s ease,transform .12s ease;
}
.submit:hover,.btn-lg:hover{background:var(--acc-2);transform:translateY(-1px);
  box-shadow:0 3px 6px rgba(0,0,0,.12), 0 14px 30px rgba(0,0,0,.24)}
.submit:active,.btn-lg:active{transform:translateY(0) scale(.995);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.submit:disabled,.btn-lg:disabled{opacity:.55;cursor:default}
/* All three fields valid: the button stops being a wall and starts being a
   door. It jumps once, lights a sweep across itself, and the arrow keeps
   nudging until they take it. */
.submit{position:relative;overflow:hidden}
.submit.ready{animation:ready .44s cubic-bezier(.3,1.5,.45,1);box-shadow:0 0 0 3px var(--acc-lt), 0 10px 24px rgba(0,0,0,.2)}
@keyframes ready{40%{transform:scale(1.016)}100%{transform:none}}
.submit.ready::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.28) 50%,transparent 66%);
  animation:sweep .72s ease-out;
}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.submit .arw{display:inline-block;margin-left:9px;opacity:.5;transition:opacity .2s ease}
.submit.ready .arw{opacity:1;animation:nudge 1.15s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.submit.sending{opacity:.75}
.back{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:none;border:0;
  font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g2);cursor:pointer;min-height:44px;padding:10px 14px 10px 0;
}
.back:hover{color:var(--acc)}
.back[hidden]{display:none}
.msg{margin-top:14px;font-size:.9rem;font-weight:600;min-height:1.2em}
.msg.err{color:var(--b);border-left:3px solid var(--b);padding-left:11px}
.legal{margin-top:20px;font-size:.78rem;line-height:1.5;color:var(--g2)}
/* Risk reversal, right where the hesitation is: next to the button. */
.reassure{margin:12px 0 0;padding:11px 14px;background:var(--g4);border-radius:9px;
  font-size:.78rem;line-height:1.45;color:var(--g1)}
.reassure a{color:var(--acc);font-weight:700}
.legal a{text-decoration:underline}

/* ── trust strip ──────────────────────────────────────────── */
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px;padding-top:22px;
  border-top:1px solid var(--g3);font-size:.83rem;color:var(--g2)}
.trust span::before{content:"—  ";color:var(--b)}

/* ── the thank-you: inverted, so the state change is felt ──── */
body.inverted{background:var(--acc);color:var(--w)}
body.inverted .hd{background:var(--acc);border-bottom-color:rgba(255,255,255,.14)}
/* On black the mark has to flip, not brighten — brightening a dark tile just
   makes it grey. Inverted, the tile goes white and the A goes black. */
body.inverted .mark img{filter:grayscale(1) invert(1) contrast(1.08)}
body.inverted .stepcount,body.inverted .sub{color:rgba(255,255,255,.68)}
body.inverted .kicker{font-family:var(--font-mono);color:rgba(255,255,255,.62)}
body.inverted footer{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.55)}
body.inverted .serif-i{color:#FFFFFF}

.ticker{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:11px 18px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);
  border-radius:999px;font-size:.86rem;font-weight:600}
.ticker b{font-variant-numeric:tabular-nums;font-weight:800}
.ticker::before{content:"";width:8px;height:8px;border-radius:50%;background:#FFFFFF;
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.next-actions{display:grid;gap:12px;grid-template-columns:1fr;margin-top:34px;max-width:520px}
.big-link{
  display:block;text-decoration:none;border:1px solid var(--g3);border-radius:12px;padding:21px 22px;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .14s ease;
}
.big-link strong{display:block;font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.big-link span{display:block;font-size:.87rem;color:var(--g2);margin-top:4px}
.big-link.solid{background:var(--acc);color:var(--w);border-color:var(--acc);
  box-shadow:0 8px 22px rgba(0,0,0,.18)}
.big-link.solid span{color:#b4b4b4}
.big-link:hover{border-color:var(--acc);transform:translateY(-2px)}
.big-link.solid:hover{background:var(--acc-2)}

/* Inverted (the thank-you): same components, flipped ground. */
body.inverted .big-link{border-color:rgba(255,255,255,.24)}
body.inverted .big-link span{color:rgba(255,255,255,.62)}
body.inverted .big-link.solid{background:var(--w);color:var(--acc);border-color:var(--w);
  box-shadow:0 10px 26px rgba(0,0,0,.28)}
body.inverted .big-link.solid span{color:rgba(0,0,0,.72)}
body.inverted .big-link:hover{border-color:var(--w);transform:translateY(-2px)}
body.inverted .big-link.solid:hover{background:#EDEDED}

.redirect{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;
  margin:40px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.85rem;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.redirect b{color:var(--w);font-weight:800}
.redirect a{color:var(--w)}
.redirect button{font:inherit;font-size:.85rem;background:none;border:0;color:rgba(255,255,255,.6);
  cursor:pointer;text-decoration:underline;text-underline-offset:4px;
  min-height:44px;padding:0 10px;margin-left:2px}
.redirect button:hover{color:var(--w)}

/* review mode (?rv=1) — funnel.js injects this pill; keep it mono here */
.rv-back{position:fixed;left:14px;bottom:14px;z-index:80;display:inline-flex;align-items:center;gap:6px;
  background:var(--acc);color:var(--w);font-weight:800;font-size:.85rem;text-decoration:none;
  padding:10px 16px;border-radius:999px}

/* ── footer ───────────────────────────────────────────────── */
footer{flex:0 0 auto;border-top:1px solid var(--g3);padding:11px 0;font-size:.74rem;color:var(--g2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

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


/* ── fitting one screen ───────────────────────────────────────
   The page is locked to the viewport, so on shorter screens the layout gives
   up ornament in order, cheapest first: spacing, then the subhead, then the
   video, then the kicker. The question, the options and the button never go. */
@media(max-height:880px){
  main{padding-top:14px;padding-bottom:12px}
  .step h1{font-size:clamp(1.45rem,6vw,1.78rem);margin-bottom:8px}
  .sub{font-size:.92rem;margin-bottom:14px}
  .opt{padding:12px 44px 12px 14px}
  .opts{gap:8px}
  .fields{gap:9px}
  .field input{padding:12px 15px}
  .consent{margin-top:12px;font-size:.75rem}
  .submit{margin-top:13px;padding:15px 24px}
  .reassure{margin-top:10px;padding:9px 12px;font-size:.75rem}
  .back{margin-top:4px;min-height:44px}
  footer{padding:9px 0;font-size:.72rem}
}
@media(max-height:760px){
  .kicker{margin-bottom:9px;font-size:.72rem}
  .sub{display:none}                 /* the question already says it */
  .step h1{font-size:clamp(1.35rem,5.6vw,1.62rem)}
  .opt .txt small{display:none}      /* the label alone is enough to choose */
  .opt{padding:13px 44px 13px 14px}
  .q-video{margin-top:10px;padding-top:9px}
  .recap{margin-bottom:10px}
}
@media(max-height:640px){
  .msg{min-height:0}
  .recap{display:none}
  .field input{padding:10px 13px}
  .submit{padding:13px 22px;margin-top:11px}
  .back{margin-top:0;min-height:44px;padding-top:8px;padding-bottom:8px}
  .q-video{display:none}             /* the question owns the screen */
  .kicker{display:none}
  .step h1{font-size:1.35rem;margin-bottom:6px}
  .opt{padding:11px 40px 11px 12px;gap:10px}
  .opt .key{flex-basis:26px;height:26px}
  .opts{gap:6px}
  .consent{font-size:.72rem;line-height:1.4}
  .reassure{display:none}            /* the consent line carries the promise */
  .consent{line-height:1.35}
  .fields{gap:7px}
  footer{padding:6px 0;font-size:.73rem}
}

/* Landscape phones: short but wide, so the fields go side by side rather than
   stacking three deep. */
@media(max-height:520px) and (min-width:620px){
  .fields{grid-template-columns:1fr 1fr 1fr}
  .field.f-full{grid-column:auto}
  .step h1{font-size:1.2rem;margin-bottom:4px}
  .consent{margin-top:8px;font-size:.74rem}
  .submit{margin-top:9px;padding:12px 22px}
  main{padding-top:8px;padding-bottom:6px}
  footer{padding:5px 0;font-size:.73rem}
  .back{min-height:44px;margin-top:0}
}