/* ==========================================================================
   MG Autogroups — Sell Your Car
   styles.css

   Direction: the world of a title office. Warm paper, stamped ink, and the
   red and black of the MG Autogroups logo. The one bold element is the
   vehicle record card that fills itself in as the seller answers. Everything
   else stays quiet so that card reads.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* canvas, tinted warm. Never pure white. */
  --canvas:#FCFBF9;
  --canvas-2:#F4F2EE;
  --panel:#FFFFFF;
  --paper:#FBF7EE;

  --ink:#1F1F1F;
  --ink-2:#5E5C59;
  --ink-3:#716E68;

  --line:rgba(31,31,31,.11);     /* decorative hairlines only */
  --line-2:rgba(31,31,31,.26);   /* decorative, stronger */
  --edge:#8E8A83;                /* every interactive border: measured at 3:1+ */

  /* The logo red is #FF1616, which only reaches 3.9:1 under white text.
     #D81212 is the same red a step deeper and clears 4.5:1 on every surface.
     config.js can override --accent; everything else here derives from it. */
  --accent:#D81212;
  --accent-h:color-mix(in srgb,var(--accent) 84%,#000);
  --accent-t:var(--accent);
  --accent-w:color-mix(in srgb,var(--accent) 9%,transparent);
  --wa:#25D366;
  --wa-h:#1FB457;

  --radius:12px;
  --r-s:9px;
  --r-l:18px;

  --fd:'Archivo','Arial Narrow',system-ui,sans-serif;
  --fb:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-o:cubic-bezier(.34,1.3,.5,1);

  --pad:clamp(20px,5vw,40px);
  --shadow:0 1px 2px rgba(31,31,31,.05),0 8px 26px -12px rgba(31,31,31,.18);
  --shadow-l:0 2px 6px rgba(31,31,31,.06),0 22px 60px -22px rgba(31,31,31,.3);
}

@media (prefers-color-scheme:dark){
  :root{
    --canvas:#12131A;
    --canvas-2:#171922;
    --panel:#1C1E28;
    --paper:#1F2029;

    --ink:#F3F1EC;
    --ink-2:#ACAEB9;
    --ink-3:#888A94;

    --line:rgba(243,241,236,.13);
    --line-2:rgba(243,241,236,.3);
    --edge:#70727C;

    --accent-t:color-mix(in srgb,var(--accent) 55%,#fff);
    --accent-w:color-mix(in srgb,var(--accent) 14%,transparent);

    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
    --shadow-l:0 2px 8px rgba(0,0,0,.45),0 26px 70px -24px rgba(0,0,0,.8);
  }
}

/* ----------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  overflow-x:hidden;overflow-x:clip;
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--fb);font-size:1.0625rem;line-height:1.6;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
fieldset{margin:0;padding:0;border:0;min-inline-size:0}
legend{padding:0}

.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:fixed;top:-100px;left:14px;z-index:90;padding:12px 18px;
  background:var(--accent);color:#fff;border-radius:0 0 var(--r-s) var(--r-s);
  font-weight:600;text-decoration:none;transition:top .22s var(--ease)}
.skip:focus-visible{top:0}

:focus-visible{outline:2.5px solid var(--accent-t);outline-offset:3px;border-radius:4px}

/* ----------------------------------------------- the environment layer */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env-glow{position:absolute;display:block;border-radius:50%;filter:blur(90px)}
.env-glow-a{width:62vw;height:62vw;max-width:760px;max-height:760px;top:-18vh;left:-14vw;
  background:radial-gradient(circle,var(--accent-w) 0%,transparent 70%);
  animation:drift-a 74s var(--ease) -12s infinite alternate}
.env-glow-b{width:54vw;height:54vw;max-width:640px;max-height:640px;bottom:-16vh;right:-12vw;
  background:radial-gradient(circle,rgba(31,31,31,.06) 0%,transparent 70%);
  animation:drift-b 88s var(--ease) -30s infinite alternate}
@media (prefers-color-scheme:dark){
  .env-glow-b{background:radial-gradient(circle,rgba(255,255,255,.035) 0%,transparent 70%)}
}
@keyframes drift-a{to{transform:translate3d(9vw,7vh,0) scale(1.14)}}
@keyframes drift-b{to{transform:translate3d(-8vw,-6vh,0) scale(1.1)}}

.env-grain{position:absolute;inset:-50%;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){.env-grain{opacity:.05}}

/* ---------------------------------------------------------------- header */
.head{position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);
  background:color-mix(in srgb,var(--canvas) 84%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.head.stuck{border-bottom-color:var(--line)}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{display:block;height:40px;width:auto}
@media (max-width:400px){.brand-logo{height:34px}}

.lang-btn{display:flex;align-items:center;gap:7px;padding:8px 13px;
  font-family:var(--fm);font-size:.78rem;font-weight:700;letter-spacing:.08em;
  border:1px solid var(--edge);border-radius:99px;
  transition:border-color .22s var(--ease),background-color .22s var(--ease)}
.lang-btn:hover{border-color:var(--accent-t);background:var(--accent-w)}
.lang-cur{color:var(--ink)}
.lang-sep{color:var(--ink-3)}
.lang-alt{color:var(--ink-3)}
.lang-btn:hover .lang-alt{color:var(--accent-t)}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;text-align:center;
  padding:clamp(34px,7vw,74px) var(--pad) clamp(18px,3vw,26px);
  max-width:820px;margin-inline:auto}

.kicker{font-family:var(--fm);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-t);margin-bottom:14px}

.hero-h{font-family:var(--fd);font-weight:800;
  font-size:clamp(30px,6.4vw,58px);line-height:1.02;letter-spacing:-.025em;
  text-wrap:balance;margin-bottom:14px}

.hero-sub{font-size:clamp(1.0625rem,2.1vw,1.28rem);color:var(--ink-2);
  max-width:34ch;margin-inline:auto;text-wrap:balance}

.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:22px}
.trust-i{display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px 9px 12px;border:1px solid var(--line);border-radius:99px;
  background:var(--panel);box-shadow:var(--shadow);
  font-size:.875rem;font-weight:500;color:var(--ink-2)}
.ic{width:17px;height:17px;flex:none;fill:none;stroke:var(--accent-t);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.road{width:min(240px,52vw);height:34px;margin:26px auto 0;opacity:.75}
.road-l{fill:none;stroke:var(--line-2);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:9 11;animation:road 5.5s linear infinite}
@keyframes road{to{stroke-dashoffset:-40}}

/* ------------------------------------------------------- the form region */
.apply{padding:clamp(10px,2vw,18px) var(--pad) clamp(48px,7vw,80px)}

.rig{display:grid;gap:clamp(18px,3vw,34px);max-width:920px;margin-inline:auto;
  grid-template-columns:1fr;align-items:start}

@media (min-width:1000px){
  .rig{grid-template-columns:318px minmax(0,520px);justify-content:center;
       gap:clamp(28px,3.4vw,52px)}
  .rec{position:sticky;top:88px}
}

/* ================= THE SIGNATURE ELEMENT: vehicle record ================= */
.rec{order:2}
@media (min-width:1000px){.rec{order:0}}

.rec-paper{position:relative;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-l);
  padding:20px 20px 16px 26px}

/* slow sheen across the paper, the card's one living detail */
.rec-paper::after{content:"";position:absolute;top:0;bottom:0;width:38%;
  left:-45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  animation:sheen 14s var(--ease) -3s infinite}
@media (prefers-color-scheme:dark){
  .rec-paper::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.055),transparent)}
}
@keyframes sheen{0%,72%{transform:translateX(0)}100%{transform:translateX(340%)}}

.rec-guilloche{position:absolute;inset:0;width:100%;height:100%;
  opacity:.055;pointer-events:none}
.rec-guilloche path{stroke:var(--ink);stroke-width:.7;fill:none}

/* the perforated edge, so it reads as a document torn from a book */
.rec-perf{position:absolute;left:11px;top:16px;bottom:16px;width:2px;
  background-image:radial-gradient(circle,var(--line-2) 1.1px,transparent 1.2px);
  background-size:2px 9px;opacity:.85}

.rec-head{position:relative;display:flex;align-items:flex-start;
  justify-content:space-between;gap:12px;
  padding-bottom:13px;border-bottom:1.5px solid var(--line-2);margin-bottom:14px}
.rec-t{font-family:var(--fd);font-weight:800;font-size:.94rem;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.15}
.rec-s{font-size:.75rem;color:var(--ink-3);margin-top:3px}
.rec-ref{font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;
  color:var(--ink-3);text-align:right;white-space:nowrap}
.rec-ref b{display:block;color:var(--ink-2);font-weight:700;margin-top:2px}

.rec-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:11px 14px}
.rec-wide{grid-column:1/-1}

.rec-row{min-width:0}
.rec-row dt{font-family:var(--fm);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.rec-row dd{font-family:var(--fm);font-size:.83rem;font-weight:500;
  color:var(--ink-3);margin:0;
  border-bottom:1px dashed var(--line-2);padding-bottom:3px;min-height:1.5em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.rec-row.has dd{color:var(--ink);border-bottom-style:solid;border-bottom-color:var(--accent-t)}

/* a value that just arrived gets one quick settle, never a bounce */
.rec-row.just dd{animation:landval .42s var(--ease-o)}
@keyframes landval{from{transform:translateY(-4px);opacity:.25}to{transform:none;opacity:1}}

.rec-stampzone{position:relative;height:74px;margin-top:6px}
.stamp{position:absolute;right:2px;bottom:2px;
  display:grid;place-items:center;padding:9px 15px;
  border:2.5px solid var(--accent-t);border-radius:7px;
  color:var(--accent-t);font-family:var(--fm);font-weight:700;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;max-width:88%;
  opacity:0;transform:rotate(-7deg) scale(1.5);
  box-shadow:inset 0 0 0 1px var(--accent-t)}
.stamp.on{animation:land .5s var(--ease-o) forwards}
/* the last stamp is filled, not outlined: the one that says the file is complete */
.stamp.final{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
@keyframes land{
  0%{opacity:0;transform:rotate(-16deg) scale(1.5)}
  55%{opacity:.95;transform:rotate(-6deg) scale(.96)}
  100%{opacity:.9;transform:rotate(-7deg) scale(1)}
}

/* ------------------------------------------------------------- progress */
.fw{order:1;min-width:0;width:100%;max-width:520px;margin-inline:auto}
@media (min-width:1000px){.fw{order:0;margin-inline:0}}

.prog{margin-bottom:18px}
.prog-lbl{font-family:var(--fm);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.prog-track{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg{height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.seg i{display:block;height:100%;width:0;border-radius:99px;
  background:var(--accent);transition:width .55s var(--ease)}
.seg.done i{width:100%}
.seg.on i{width:100%}

/* ------------------------------------------------------------ the steps */
.step{position:relative}
.step.is-on{animation:stepin .42s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.step-h{font-family:var(--fd);font-weight:800;font-size:clamp(23px,4vw,30px);
  line-height:1.1;letter-spacing:-.02em;margin-bottom:7px}
.step-lede{color:var(--ink-2);font-size:.95rem;margin-bottom:22px;max-width:44ch}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ----------------------------------------------------------- form fields */
.f{margin-bottom:17px;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:430px){.grid2{grid-template-columns:1fr}}

.f label,.q-l{display:block;font-size:.815rem;font-weight:600;
  letter-spacing:.005em;color:var(--ink);margin-bottom:7px}

.f input,.sel select{
  width:100%;padding:13px 14px;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--panel);border:1.5px solid var(--edge);border-radius:var(--r-s);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.f input::placeholder{color:var(--ink-3);opacity:.85}
.f input:hover,.sel select:hover{border-color:var(--ink-2)}
.f input:focus,.sel select:focus{outline:0;border-color:var(--accent-t);
  box-shadow:0 0 0 3.5px var(--accent-w)}
.f input:focus-visible,.sel select:focus-visible{outline:0}

#vin{font-family:var(--fm);font-size:.95rem;letter-spacing:.09em;text-transform:uppercase}
#mileage,#zip,#loan_balance,#phone{font-family:var(--fm);font-size:.97rem;letter-spacing:.02em}

.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.caret{position:absolute;right:13px;top:50%;width:18px;height:18px;
  transform:translateY(-50%);pointer-events:none;
  fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.money{position:relative}
.money-s{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-family:var(--fm);color:var(--ink-3);pointer-events:none}
.money input{padding-left:29px}

.help{font-size:.79rem;color:var(--ink-3);margin-top:6px;line-height:1.45}
.vinstate{font-family:var(--fm);font-size:.73rem;letter-spacing:.03em;
  margin-top:6px;min-height:1.1em;color:var(--ink-3)}
.vinstate.ok{color:var(--accent-t);font-weight:700}

.err{font-size:.79rem;font-weight:600;color:var(--accent-t);
  margin-top:0;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .25s var(--ease),opacity .25s var(--ease),margin-top .25s var(--ease)}
.err.on{max-height:4em;opacity:1;margin-top:6px}
.err-send{text-align:center}
.f.bad input,.f.bad select{border-color:var(--accent-t);background:var(--accent-w)}

.cond{overflow:hidden}
.cond:not([hidden]){animation:condin .38s var(--ease)}
@keyframes condin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* --------------------------------------------------- multiple choice cards */
.q{margin-bottom:24px}
.q-l{font-size:.94rem;font-weight:600;margin-bottom:10px}

.opts{display:grid;gap:9px}
@media (min-width:520px){
  .opts-2{grid-template-columns:1fr 1fr}
  .opts-3{grid-template-columns:repeat(3,1fr)}
}

.opt{display:block;position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}

.ob{display:flex;align-items:center;gap:11px;min-height:56px;
  padding:12px 15px;border:1.5px solid var(--edge);border-radius:var(--r-s);
  background:var(--panel);font-size:.95rem;font-weight:500;line-height:1.3;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),
             transform .2s var(--ease),box-shadow .2s var(--ease)}
.ob-c{flex-direction:column;justify-content:center;gap:7px;text-align:center}

.od{flex:none;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--edge);position:relative;
  transition:border-color .2s var(--ease)}
.od::after{content:"";position:absolute;inset:3.5px;border-radius:50%;
  background:var(--accent);transform:scale(0);
  transition:transform .24s var(--ease-o)}
.ob-c .od{display:none}

.ic-o{width:21px;height:21px;fill:none;stroke:var(--ink-3);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s var(--ease)}

.opt:hover .ob{border-color:var(--ink-2);transform:translateY(-1px)}
.opt input:focus-visible + .ob{outline:2.5px solid var(--accent-t);outline-offset:2px}

.opt input:checked + .ob{border-color:var(--accent);background:var(--accent-w);
  box-shadow:0 0 0 1px var(--accent)}
.opt input:checked + .ob .od{border-color:var(--accent)}
.opt input:checked + .ob .od::after{transform:scale(1)}
.opt input:checked + .ob .ic-o{stroke:var(--accent-t)}
.opt-wa input:checked + .ob{border-color:var(--wa);box-shadow:0 0 0 1px var(--wa);
  background:rgba(37,211,102,.1)}
.opt-wa input:checked + .ob .ic-o{stroke:var(--wa-h)}
@media (prefers-color-scheme:dark){.opt-wa input:checked + .ob .ic-o{stroke:var(--wa)}}

.q.bad .ob{border-color:var(--accent-t)}

/* ---------------------------------------------------------------- consent */
.consent{margin:24px 0 4px}
.cbx{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:15px;border:1.5px solid var(--edge);border-radius:var(--r-s);
  background:var(--panel);transition:border-color .2s var(--ease)}
.cbx:hover{border-color:var(--ink-2)}
.cbx input{position:absolute;opacity:0;width:1px;height:1px}
.cbx-b{flex:none;width:23px;height:23px;margin-top:1px;border-radius:6px;
  border:1.5px solid var(--edge);display:grid;place-items:center;
  transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.cbx-b svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .3s var(--ease)}
.cbx input:checked + .cbx-b{background:var(--accent);border-color:var(--accent)}
.cbx input:checked + .cbx-b svg{stroke-dashoffset:0}
.cbx input:focus-visible + .cbx-b{outline:2.5px solid var(--accent-t);outline-offset:2px}
.cbx-t{font-size:.8rem;line-height:1.5;color:var(--ink-2)}
.consent.bad .cbx{border-color:var(--accent-t)}

/* ---------------------------------------------------------------- buttons */
.nav{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:26px}
.nav-end{margin-top:22px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:var(--r-s);
  font-family:var(--fb);font-size:1rem;font-weight:600;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;border:1.5px solid transparent;
  transition:transform .2s var(--ease),background-color .2s var(--ease),
             box-shadow .2s var(--ease)}
.btn:active{transform:translateY(1px)}

.btn-go{background:var(--accent);color:#fff;
  box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 24%,transparent),0 10px 22px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn-go:hover{background:var(--accent-h);transform:translateY(-1px);
  box-shadow:0 2px 4px color-mix(in srgb,var(--accent) 26%,transparent),0 16px 30px -12px color-mix(in srgb,var(--accent) 66%,transparent)}

/* the submit button is the most visible thing on the page */
.btn-send{flex:1;background:var(--accent);color:#fff;padding:18px 28px;
  font-size:1.0625rem;font-weight:600;
  box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 26%,transparent),0 14px 30px -10px color-mix(in srgb,var(--accent) 66%,transparent)}
.btn-send:hover:not(:disabled){background:var(--accent-h);transform:translateY(-1px);
  box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 30%,transparent),0 20px 40px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-send:disabled{cursor:progress;opacity:.82;transform:none}

.btn-big{padding:18px 34px;font-size:1.0625rem}

.btn-wa{background:var(--wa);color:#08301A;font-weight:600;
  box-shadow:0 1px 2px rgba(37,211,102,.2),0 10px 24px -10px rgba(37,211,102,.55)}
.btn-wa:hover{background:var(--wa-h);color:#04220F;transform:translateY(-1px)}
.btn-wa .ic-o{stroke:currentColor;width:20px;height:20px}

.lnk{display:inline-flex;align-items:center;gap:5px;padding:10px 6px;
  font-size:.92rem;font-weight:600;color:var(--ink-2);
  transition:color .2s var(--ease)}
.lnk:hover{color:var(--accent-t)}
.ic-s{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

.spin{display:none;width:17px;height:17px;border-radius:50%;
  border:2.2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .68s linear infinite}
.btn-send.sending .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.fine{font-size:.78rem;color:var(--ink-3);text-align:center;margin-top:14px;
  line-height:1.5;text-wrap:balance}

/* --------------------------------------------------------------- sections */
.band{padding:clamp(52px,8vw,96px) var(--pad)}
.wa{padding:clamp(28px,4vw,40px) var(--pad);text-align:center;
  border-block:1px solid var(--line);background:var(--canvas-2)}
.wa-l{font-size:.98rem;color:var(--ink-2);margin-bottom:15px}

.band-h{font-family:var(--fd);font-weight:800;
  font-size:clamp(25px,3.9vw,40px);line-height:1.08;letter-spacing:-.022em;
  text-wrap:balance;max-width:19ch;margin-bottom:clamp(28px,4vw,44px)}

/* how it works: a numbered rail, nothing like the section under it */
.how{max-width:1040px;margin-inline:auto}
.steps3{display:grid;gap:clamp(20px,3vw,30px);grid-template-columns:1fr}
@media (min-width:760px){.steps3{grid-template-columns:repeat(3,1fr)}}
.s3{position:relative;padding:26px 22px 24px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow)}
.s3-n{position:absolute;top:18px;right:20px;font-family:var(--fm);font-weight:700;
  font-size:1.5rem;color:var(--line-2);letter-spacing:-.02em;line-height:1}
.s3-ic{width:40px;height:40px;margin-bottom:16px;fill:none;stroke:var(--accent-t);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s3 h3{font-family:var(--fd);font-weight:700;font-size:1.06rem;line-height:1.22;
  letter-spacing:-.012em;margin-bottom:7px;text-wrap:balance}
.s3 p{font-size:.9rem;color:var(--ink-2);line-height:1.55}

/* why: full-bleed tinted band, asymmetric, deliberately not a card grid */
.why{background:var(--canvas-2);border-block:1px solid var(--line)}
.why-in{max-width:1000px;margin-inline:auto;
  display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:1fr}
@media (min-width:880px){
  .why-in{grid-template-columns:1.02fr .98fr;align-items:center;
          column-gap:clamp(40px,5vw,72px)}
}
.why-h{font-family:var(--fd);font-weight:800;
  font-size:clamp(26px,4.2vw,42px);line-height:1.04;letter-spacing:-.025em;
  margin-bottom:16px;text-wrap:balance;max-width:17ch}
.why-b{color:var(--ink-2);font-size:1rem;line-height:1.66;max-width:46ch}

.why-list{display:grid;gap:12px}
.wl{display:flex;align-items:flex-start;gap:14px;padding:17px 18px;
  background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r-s);
  box-shadow:var(--shadow)}
.wl-ic{width:24px;height:24px;flex:none;margin-top:2px;fill:none;
  stroke:var(--accent-t);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wl h3{font-size:.95rem;font-weight:600;margin-bottom:3px;line-height:1.3}
.wl p{font-size:.865rem;color:var(--ink-2);line-height:1.5}

/* FAQ */
.faq{max-width:760px;margin-inline:auto}
.acc{display:grid;gap:10px}
.ac{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);
  overflow:hidden;transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.ac:hover,.ac[open]{border-color:var(--edge);box-shadow:var(--shadow)}
.ac summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;cursor:pointer;list-style:none;
  font-size:1rem;font-weight:600;line-height:1.35}
.ac summary::-webkit-details-marker{display:none}
.ac summary:focus-visible{outline:2.5px solid var(--accent-t);outline-offset:-3px}
.ac-x{position:relative;flex:none;width:17px;height:17px}
.ac-x::before,.ac-x::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--accent-t);border-radius:2px;transform:translate(-50%,-50%);
  transition:transform .28s var(--ease),opacity .28s var(--ease)}
.ac-x::before{width:15px;height:2.2px}
.ac-x::after{width:2.2px;height:15px}
.ac[open] .ac-x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.ac-b{padding:0 20px 20px;animation:acc .34s var(--ease)}
.ac-b p{font-size:.94rem;color:var(--ink-2);line-height:1.66;max-width:60ch}
@keyframes acc{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* closing */
.end{text-align:center;padding:clamp(52px,8vw,96px) var(--pad);
  border-top:1px solid var(--line)}
.end-h{font-family:var(--fd);font-weight:800;font-size:clamp(26px,4.4vw,42px);
  line-height:1.05;letter-spacing:-.025em;margin-bottom:10px}
.end-s{color:var(--ink-2);margin-bottom:26px}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--canvas-2);border-top:1px solid var(--line);
  padding:clamp(32px,5vw,48px) var(--pad)}
.foot-in{max-width:760px;margin-inline:auto;text-align:center}
.foot-b{margin-bottom:14px}
.foot-logo{display:block;height:46px;width:auto;margin-inline:auto}
.foot-c{font-size:.9rem;color:var(--ink-2);display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:center;gap:4px 10px}
.foot-c a{color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--line-2);transition:color .2s var(--ease)}
.foot-c a:hover{color:var(--accent-t)}
.foot-dot{color:var(--ink-3)}
.foot-lic{font-size:.79rem;color:var(--ink-3);margin-top:9px}
.foot-p{font-size:.85rem;color:var(--ink-2);margin-top:16px;font-weight:500}
.foot-r{font-family:var(--fm);font-size:.7rem;letter-spacing:.05em;
  color:var(--ink-3);margin-top:14px}

/* ============================ motion system ============================ */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.reveal.in{opacity:1;transform:none}

.stagger > *{opacity:0;transform:translateY(18px);
  transition:opacity .58s var(--ease),transform .58s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.15s}
.stagger.in > *:nth-child(3){transition-delay:.25s}
.stagger.in > *:nth-child(4){transition-delay:.35s}
/* retire the delays once the entrance is over, or every later hover lags.
   Specificity has to beat the nth-child rules above. */
.stagger.in.done > *:nth-child(n){transition-delay:0s}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
.offscreen,.offscreen::after{animation-play-state:paused}

/* -------------------------------------------------------- touch targets */
@media (pointer:coarse){
  .btn{min-height:48px}
  .lnk{min-height:44px}
  .lang-btn{min-height:44px}
  .ac summary{min-height:56px}
  /* .brand is already a flex row, so a min-height grows the tap area
     without disturbing how the mark and the name line up */
  .brand{min-height:44px}
  /* phone and back links sit inside a sentence. Vertical padding grows the
     hit area without changing the line box around them. */
  .foot-c a,.ty-call a,.ty-back a{padding-block:10px}
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important}
  .reveal,.stagger > *{opacity:1!important;transform:none!important}
  .stamp{opacity:.9}
  .stamp.on{transform:rotate(-7deg) scale(1)}
  .cbx input:checked + .cbx-b svg{stroke-dashoffset:0}
  .env-grain{display:none}
}

/* ------------------------------------------ small and short screens */
@media (max-width:999px){
  /* on phones the record only shows what has actually been answered,
     so it starts small and grows instead of pushing the form down */
  .rec-paper{padding:17px 17px 13px 23px}
  .rec-row:not(.has){display:none}
  .rec:not(.filled){display:none}
  .rec-grid{gap:10px 14px}
  .rec-stampzone{height:66px}
}
@media (max-height:560px) and (pointer:coarse){
  .road{display:none}
}
/* phones: buy back vertical space so step 1's first field sits above the
   fold, which is the whole point of a page people reach by scanning a QR */
@media (max-width:720px){
  .trust{margin-top:17px;gap:7px}
  .road{height:24px;margin:15px auto 0}
  .step-lede{margin-bottom:18px}
  .prog{margin-bottom:15px}
}
@media (max-width:400px){
  .trust-i{font-size:.82rem;padding:8px 13px 8px 11px}
  .btn,.btn-send{padding-inline:20px}
  .nav{gap:8px}
}

/* ======================================================= thank-you page */
.ty{max-width:640px;margin-inline:auto;text-align:center;
  padding:clamp(34px,7vw,66px) var(--pad) clamp(46px,7vw,78px)}

/* the payoff: the seal the record card was building toward */
.ty-seal{width:76px;height:76px;margin:0 auto 26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);box-shadow:0 0 0 7px var(--accent-w);
  animation:seal .62s var(--ease-o)}
.ty-seal svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:32;stroke-dashoffset:32;
  animation:sealtick .5s var(--ease) .26s forwards}
@keyframes seal{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes sealtick{to{stroke-dashoffset:0}}

.ty-h{font-family:var(--fd);font-weight:800;font-size:clamp(27px,5.2vw,44px);
  line-height:1.05;letter-spacing:-.025em;text-wrap:balance;margin-bottom:12px}
.ty-s{color:var(--ink-2);font-size:1.03rem;max-width:40ch;margin-inline:auto;
  text-wrap:balance;margin-bottom:28px}
.ty-wa{width:100%;max-width:460px;text-wrap:balance;line-height:1.3;
  padding-block:19px}

.ty-tips{margin-top:40px;padding-top:34px;border-top:1px solid var(--line)}
.ty-tt{font-family:var(--fd);font-weight:700;font-size:1.06rem;
  letter-spacing:-.01em;margin-bottom:20px}
.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:440px){.tips{grid-template-columns:repeat(2,1fr)}}
.tip{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:16px 8px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-s);box-shadow:var(--shadow);
  font-size:.83rem;font-weight:500;color:var(--ink-2)}
.tip svg{width:28px;height:28px;fill:none;stroke:var(--accent-t);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.ty-call{margin-top:32px;font-size:.95rem;color:var(--ink-2)}
.ty-call a{font-family:var(--fm);font-weight:700;color:var(--accent-t);
  text-decoration:none;border-bottom:1.5px solid var(--accent-w);white-space:nowrap}
.ty-call a:hover{border-bottom-color:var(--accent-t)}
.ty-back{margin-top:16px;font-size:.88rem}
.ty-back a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line-2)}
.ty-back a:hover{color:var(--accent-t)}