/* Generated from components/feedback.mjs. Do not edit by hand.
   The in-app feedback surface, shared by the site and the application. */
.fb{display:grid;grid-template-columns:5fr 7fr;gap:30px;background:#33194B;border:2px solid #4B2C69;
  border-bottom:6px solid #180A28;border-radius:30px;padding:30px;color:#FFF6EE;margin-top:8px;
  font-family:Nunito,ui-rounded,"Segoe UI",system-ui,sans-serif}
.fb-score{background:#402060;border:2px solid #4B2C69;border-radius:24px;padding:26px 24px;text-align:center}
.fb-big{font-size:70px;font-weight:900;letter-spacing:-.05em;line-height:.95;color:#FF6B3D}
.fb-big small{font-size:.36em;color:#B79ECF;letter-spacing:-.02em;font-weight:900}
.fb-bravo{font-size:26px;font-weight:900;letter-spacing:-.025em;margin-top:10px;color:#FFF6EE}
.fb-bravos{font-size:14.5px;font-weight:600;color:#B79ECF;margin:8px 0 0;line-height:1.45;max-width:none}
.fb-wave{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:52px;margin-top:20px}
.fb-wave b{width:6px;border-radius:3px;background:#FF6B3D;display:block;flex:none;opacity:.9}
.fb-tag{display:flex;align-items:center;gap:9px;margin-top:18px;background:#402060;border-radius:14px;
  padding:12px 15px;font-size:14px;font-weight:800;color:#FFF6EE}
.fb-ico{width:20px;height:20px;color:#FF6B3D;flex:none}
.fb-ico svg{width:20px;height:20px}
.fb-lab{font-size:13px;font-weight:800;color:#B79ECF;margin-top:12px;text-align:center}
.fb-gauge{margin-top:14px}
.fb-gbar{position:relative;display:block;height:12px;border-radius:999px;background:#4B2C69;overflow:hidden}
.fb-gbar i{display:block;height:100%;border-radius:999px;background:#FF6B3D}
.fb-gauge.is-ok .fb-gbar i{background:#5DD6C0}
.fb-gmark{position:absolute;top:-4px;left:50%;width:3px;height:20px;background:#FFF6EE;border-radius:2px;overflow:visible}
.fb-gthr{display:block;margin-top:8px;font-size:12px;font-weight:900;color:#FFF6EE;letter-spacing:.02em}
.fb-esttag{display:inline-block;margin-left:7px;background:#FFB93D;color:#3B1D57;border-radius:999px;
  padding:2px 8px;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle}
.fb-crit.fb-est{border-color:#FFB93D}
.fb-est-note{font-size:13px;line-height:1.5;font-weight:600;color:#B79ECF;margin:14px 0 0;max-width:none}
.fb-head{display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
.fb-head .fb-t{font-size:19px;font-weight:900;letter-spacing:-.02em}
.fb-head .fb-sub{margin-left:auto;font-size:12.5px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;color:#B79ECF;white-space:nowrap}
.fb-grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fb-grille li{background:#3B1D57;border:1.5px solid #4B2C69;border-radius:16px;padding:12px 14px 13px;
  margin:0;max-width:none}
.fb-crit .fb-h{display:flex;align-items:center;gap:10px}
.fb-name{font-size:14.5px;font-weight:800;color:#FFF6EE;line-height:1.2}
.fb-n{margin-left:auto;font-size:16px;font-weight:900;white-space:nowrap}
.fb-n small{font-size:12px;color:#B79ECF;font-weight:800}
.fb-bar{display:flex;gap:5px;margin-top:9px}
.fb-seg{height:9px;flex:1;border-radius:5px;background:#4B2C69;display:block}
.fb-c .fb-n{color:#FF6B3D}.fb-c .fb-seg.on{background:#FF6B3D}
.fb-a .fb-n{color:#FFB93D}.fb-a .fb-seg.on{background:#FFB93D}
.fb-m .fb-n{color:#5DD6C0}.fb-m .fb-seg.on{background:#5DD6C0}
.fb-v .fb-n{color:#B98CFF}.fb-v .fb-seg.on{background:#B98CFF}
.fb-foot{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.fb-retry{display:inline-block;background:#FFB93D;color:#3B2200;border-bottom:4px solid #C97C00;
  border-radius:14px;padding:13px 22px;font-size:15px;font-weight:800;white-space:nowrap}
.fb-note{font-size:13.5px;font-weight:600;color:#B79ECF;margin:0}

.fb--compact{grid-template-columns:1fr;gap:18px;padding:18px;border-radius:22px;border-bottom-width:4px}
.fb--compact .fb-score{padding:18px 16px;border-radius:18px}
.fb--compact .fb-big{font-size:46px}
.fb--compact .fb-bravo{font-size:19px}
.fb--compact .fb-bravos{font-size:13px}
.fb--compact .fb-wave{height:34px;gap:3px}
.fb--compact .fb-wave b{width:4px}
.fb--compact .fb-grille{grid-template-columns:1fr;gap:8px}
.fb--compact .fb-grille li{padding:9px 11px 10px;border-radius:12px}
.fb--compact .fb-name{font-size:13px}
.fb--compact .fb-seg{height:7px}
.fb--compact .fb-foot,.fb--compact .fb-tag{display:none}

/* The phone frame. The screen inside is the component above, unchanged. */
.sim{width:min(360px,100%);margin-inline:auto}
.sim-phone{background:#180A28;border-radius:40px;padding:12px;border-bottom:8px solid #0E0518}
.sim-screen{background:#241238;border-radius:30px;padding:22px 18px;color:#FFF6EE}
.sim-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:900;color:#B79ECF;
  padding-bottom:14px;border-bottom:2px solid #3A2154}
.sim-step{background:#3A2154;color:#FFB93D;border-radius:999px;padding:5px 11px;letter-spacing:.04em}
.sim-q{font-size:1.3rem;font-weight:900;line-height:1.2;letter-spacing:-.025em;margin:18px 0 0;
  max-width:none;color:#FFF6EE}
.sim-gloss{font-size:.95rem;font-weight:600;color:#B79ECF;margin:8px 0 0;max-width:none}

@media (max-width:900px){
  .fb{grid-template-columns:1fr;gap:22px;padding:22px;border-radius:24px}
  .fb-grille{grid-template-columns:1fr}
  .fb-big{font-size:58px}
}
@media (max-width:640px){
  .fb{gap:16px;padding:17px 15px;border-radius:22px;border-bottom-width:5px}
  .fb-score{padding:18px 14px;border-radius:18px}
  .fb-big{font-size:46px}
  .fb-bravo{font-size:19px;margin-top:8px}
  .fb-bravos{font-size:13.5px}
  .fb-wave{height:40px;gap:3px}
  .fb-wave b{width:5px}
  .fb-tag{margin-top:14px;padding:10px 13px;font-size:13px}
  .fb-head{flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:11px}
  .fb-head .fb-t{font-size:17px}
  .fb-head .fb-sub{margin-left:0;white-space:normal}
  .fb-grille{gap:9px}
  .fb-grille li{padding:11px 12px}
  .fb-name{font-size:13.5px}
  .fb-n{font-size:15px}
  .fb-foot{gap:12px;margin-top:15px}
  .fb-retry{width:100%;text-align:center;white-space:normal;padding:14px 18px}
  .fb-note{max-width:none;flex:1 1 100%}
  .fb-est-note{font-size:12.5px}
}

.email-check{margin:6px 0 12px;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.email-check__fix{font:inherit;font-weight:700;color:var(--coral-ink);background:none;border:0;padding:10px 0;min-height:44px;text-decoration:underline;cursor:pointer;overflow-wrap:anywhere}
.email-hint{margin:12px 0;padding:12px;border-radius:6px;background:var(--paper);color:var(--ink)}
.question-report{margin:16px 0;font-size:15px}
.question-report summary{cursor:pointer;min-height:44px;display:flex;align-items:center;text-decoration:underline}
.question-report label{display:block;margin:12px 0}
.question-report textarea{display:block;width:100%;box-sizing:border-box;margin-top:8px;font:inherit}
.question-report [role=status]{overflow-wrap:anywhere}
.academy-answer{text-wrap:pretty}
.gift-home{display:flex;flex-direction:column;gap:3px;margin:16px 0;padding:14px 16px;border:2px solid var(--amber);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);line-height:1.35}
.gift-home strong{font-size:1.05rem}
.gift-home a,.gift-feature a{font-weight:800;color:var(--coral-ink)}
.gift-feature{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px;border:2px solid var(--amber);border-radius:12px;background:var(--paper);list-style:none}
.gift-feature::before{display:none}
.gift-badge{display:inline-block;padding:4px 9px;border-radius:99px;background:var(--amber);color:var(--ink);font-size:.8rem;font-weight:900;white-space:nowrap}
/* ---------------------------------------------------------------- header -- */
.authbox{display:inline-flex;align-items:center;gap:16px}
.account-layout .tiles{grid-template-columns:minmax(0,1fr)}

/* ------------------------------------------------------------ auth cards -- */
.authcard{border:2px solid var(--line);border-bottom:6px solid var(--line-deep);border-radius:var(--r-lg);
  background:var(--paper);padding:30px 30px 34px;max-width:520px;margin:0 auto}
.authcard h2{font-size:1.35rem;margin-top:0}
.authcard .field{margin-bottom:16px}
.authalt{margin:22px auto 0;max-width:520px;font-size:15px;font-weight:700;color:var(--ink-2);text-align:center}
.authalt a{color:var(--coral-ink);font-weight:800}
.authnote{max-width:520px;margin:14px auto 0}

/* ----------------------------------------------- one-time link sign-in -- */
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;max-width:520px;margin:0 auto 4px;
  background:var(--paper);border:2px solid var(--line);border-bottom:5px solid var(--line-deep);color:var(--ink)}
.gbtn:hover{border-color:var(--coral);color:var(--ink);filter:none}
.gmark{flex:none}
.authdiv{max-width:520px;margin:16px auto;text-align:center;position:relative;color:var(--ink-2);font-weight:800;font-size:14px}
.authdiv:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line)}
.authdiv span{position:relative;background:var(--cream);padding:0 14px}
.pwfold{max-width:520px;margin:20px auto 0;border-top:2px solid var(--line);padding-top:14px}
.pwfold summary{cursor:pointer;font-weight:800;color:var(--ink-2);font-size:15px}
.pwfold summary::marker{color:var(--coral)}
.pwfold form{margin-top:16px}

/* -------------------------------------------------------------- rating -- */
.scorerow{display:flex;gap:10px;flex-wrap:wrap}
.scorepick{flex:1;min-width:58px}
.scorepick input{position:absolute;opacity:0;width:0;height:0}
.scorepick span{display:block;text-align:center;padding:14px 0;border:2px solid var(--line);border-bottom:5px solid var(--line-deep);
  border-radius:var(--r-md);background:var(--paper);font-weight:900;font-size:1.1rem;cursor:pointer}
.scorepick input:checked+span{background:var(--coral);border-color:var(--coral);color:#fff}
.scorepick input:focus-visible+span{outline:3px solid var(--coral-ink);outline-offset:2px}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2);font-weight:600;margin:6px 0 18px}
.checkline input{margin-top:4px}

/* ------------------------------------------- transcription quality note -- */
.qnote{max-width:640px;margin:0 auto 18px;border:2px solid var(--amber);border-bottom:5px solid var(--amber-deep,var(--line-deep));
  border-radius:var(--r-md);background:var(--cream-3);padding:16px 20px}
.qnote strong{display:block;font-size:1.02rem;margin-bottom:4px}
.qnote p{margin:0;font-size:15px;color:var(--ink-2)}
.qnote .qcta{display:inline-block;margin-top:10px;font-weight:900;color:var(--coral-ink)}
.proofline{margin:14px 0 0;font-size:14.5px;font-weight:800;color:var(--ink-2);text-align:center}

/* ------------------------------------------------------------- unit list -- */
.unitlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.unitlist li{margin:0;max-width:none}
.urow{display:flex;align-items:center;gap:18px;border:2px solid var(--line);border-bottom:5px solid var(--line-deep);
  border-radius:var(--r-md);background:var(--paper);padding:16px 20px;text-decoration:none;color:inherit}
a.urow:hover{border-color:var(--coral);}
.urow--lock{background:var(--cream-3);opacity:.85}
.udot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:var(--coral)}
.udot svg{width:24px;height:24px}
.udot--done{background:var(--mint);color:#0C3B33}
.udot--lock{background:var(--track);color:var(--ink-lock)}
.utxt{flex:1;min-width:0}
.utitle{font-weight:900;font-size:1.05rem;letter-spacing:-.02em}
.ugoal{font-size:14.5px;color:var(--ink-2);margin:2px 0 0}
.umeta{font-size:13.5px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.ubar{height:8px;border-radius:5px;background:var(--track);overflow:hidden;margin-top:8px;max-width:260px}
.ubar i{display:block;height:100%;background:var(--coral)}

/* --------------------------------------------------------------- runner -- */
.exwrap{max-width:760px;margin:0 auto}
.exhead{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.exhead .pbar{flex:1}
.pbar{height:14px;border-radius:8px;background:var(--track);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--coral);border-radius:8px}
.exq{border:2px solid var(--line);border-bottom:6px solid var(--line-deep);border-radius:var(--r-lg);
  background:var(--paper);padding:26px 26px 30px}
.exq h2{font-size:1.35rem}
.exlb{font-size:1.3rem;font-weight:900;letter-spacing:-.02em;margin:0 0 6px}
.exgloss{font-size:15px;color:var(--ink-2);font-weight:700;margin:0 0 18px}
.opt{display:block;border:2px solid var(--line);border-bottom:5px solid var(--line-deep);border-radius:var(--r-sm);
  padding:14px 18px;margin:0 0 12px;font-weight:700;cursor:pointer;background:var(--paper)}
.opt:hover{border-color:var(--coral)}
.opt input{margin-right:12px;accent-color:var(--coral)}
.opt--ok{border-color:var(--mint);background:var(--mint-tint)}
.opt--bad{border-color:var(--coral-deep);background:var(--coral-tint)}
.exnote{font-size:15px;font-weight:700;color:var(--ink-2);margin:14px 0 0}
textarea.answer{width:100%;min-height:170px;font-family:inherit;font-size:17px;font-weight:600;line-height:1.5;
  padding:16px 18px;border:2px solid var(--line-deep);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);resize:vertical}
textarea.answer:focus{outline:3px solid var(--coral);outline-offset:2px}
.helplist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.helplist li{margin:0;max-width:none;font-size:15px;background:var(--amber-tint);border-radius:12px;padding:10px 14px}
.helplist b{color:var(--ink);font-weight:900}
.helplist span{color:var(--ink-2);font-weight:700}
.verdict{display:flex;align-items:center;gap:12px;font-weight:900;font-size:1.15rem;margin:0 0 10px}
.verdict--ok{color:var(--green-ink)}
.verdict--no{color:var(--coral-ink)}
.verdict svg{width:26px;height:26px;flex:0 0 26px}
.xpchip{display:inline-flex;align-items:center;gap:6px;background:var(--amber-tint);color:var(--amber-text);
  font-weight:900;font-size:14px;border-radius:999px;padding:6px 12px}
.xpchip svg{width:16px;height:16px}

/* ----------------------------------------------------------------- demo -- */
.steps{display:flex;gap:10px;list-style:none;padding:0;margin:0 0 26px;flex-wrap:wrap}
.steps li{margin:0;max-width:none;font-size:13.5px;font-weight:800;color:var(--ink-2);
  background:var(--cream-3);border:2px solid var(--line);border-radius:999px;padding:6px 14px}
.steps li.on{background:var(--coral);border-color:var(--coral-deep);color:#fff}
.audiobox{display:flex;align-items:center;gap:18px;background:var(--plum);color:var(--onplum);
  border-radius:var(--r-lg);padding:22px 24px;margin:0 0 22px}
.audiobox .play{width:58px;height:58px;border-radius:50%;border:0;background:var(--coral);color:#fff;
  display:grid;place-items:center;cursor:pointer;flex:none;border-bottom:4px solid var(--coral-deep)}
.audiobox .play:active{transform:translateY(2px)}
.audiobox .play svg{width:26px;height:26px}
.audiobox .pause{display:none}
.audiobox .play[aria-pressed=true] .go{display:none}
.audiobox .play[aria-pressed=true] .pause{display:block}
.audiobox p{margin:0;font-size:15px;color:var(--onplum-2);font-weight:700}
.audiobox b{display:block;color:var(--onplum);font-size:1.05rem;font-weight:900}
.scene{border:2px solid var(--line-deep);border-radius:var(--r-lg);overflow:hidden;background:var(--cream-2);margin:0 0 22px}
.scene img{width:100%;display:block}
.miccard{border:2px dashed var(--line-deep);border-radius:var(--r-md);padding:18px 20px;margin:22px 0 0;background:var(--cream-3)}
.miccard h3{font-size:1.02rem;margin:0 0 6px}
.miccard p{font-size:14.5px;color:var(--ink-2);margin:0 0 12px}
.microw{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.microw audio{height:38px}

/* ------------------------------------------------------------- the oral -- */
.vrec{background:var(--cream-3)}
.vrec h3{margin:0 0 6px}
.vtimer{font-weight:900;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--coral-ink)}
.vstate{margin:12px 0 0;font-size:14.5px;font-weight:800;color:var(--ink-2);min-height:1.2em}
.vstate--live{color:var(--coral-ink)}
.vstate--ok{color:var(--green-ink)}
.vstate--bad{color:var(--coral-ink)}
.vlimit{margin:10px 0 0}
.vblocked{margin:0;font-size:15px;font-weight:700;color:var(--ink-2)}
.vblocked .arrow{color:var(--coral-ink);font-weight:900;text-decoration:none}
.vmeter{margin:18px 0 0;padding:14px 16px;border:2px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.vmeter .muted{margin:8px 0 0}
.vmrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.vmlab{font-weight:900;font-size:14.5px;letter-spacing:-.01em}
.vmnum{font-weight:900;font-size:14.5px;color:var(--coral-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.vbar{height:10px;border-radius:6px;background:var(--track);overflow:hidden;margin:9px 0 0}
.vbar i{display:block;height:100%;background:var(--coral);border-radius:6px}
.vmleft{margin:9px 0 0;font-size:14px;font-weight:800;color:var(--ink-2)}
.vmeter--warn{border-color:var(--amber-deep);background:var(--amber-tint)}
.vmeter--warn .vbar i{background:var(--amber-deep)}
.vmeter--warn .vmnum{color:var(--amber-text)}
.vmeter--out{border-color:var(--coral-deep);background:var(--coral-tint)}
.vmeter--out .vbar i{background:var(--coral-deep)}
.vnotice--warn{border-left-color:var(--amber-deep);background:var(--amber-tint);color:var(--amber-ink)}
.vnotice--warn strong{color:var(--amber-ink)}
.vtag{display:inline-flex;align-items:center;gap:7px;background:var(--mint-tint);color:var(--green-ink);
  border-radius:999px;padding:5px 13px;font-size:13px;font-weight:900;margin:0 0 12px}

/* -------------------------------------------------------------- feedback -- */
.critlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.critlist li{margin:0;max-width:none;border:2px solid var(--line);border-bottom:5px solid var(--line-deep);
  border-radius:var(--r-sm);background:var(--paper);padding:14px 18px}
.critline{display:flex;align-items:center;gap:12px;justify-content:space-between}
.critname{font-weight:900;font-size:1rem;letter-spacing:-.02em}
.critscore{font-weight:900;font-size:1rem;color:var(--coral-ink);white-space:nowrap}
.critbar{display:flex;gap:5px;margin:8px 0 0}
.critbar span{flex:1;height:9px;border-radius:5px;background:var(--track)}
.critbar span.on{background:var(--coral)}
.crittip{font-size:14.5px;color:var(--ink-2);margin:9px 0 0;font-weight:600}
.critband{font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.totalcard{background:var(--plum);color:var(--onplum);border-radius:var(--r-lg);padding:26px 28px;margin:0 0 24px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.totalcard .big{font-size:3.2rem;font-weight:900;line-height:1;letter-spacing:-.04em}
.totalcard .big small{font-size:1.2rem;color:var(--onplum-3);font-weight:800}
.totalcard p{margin:0;color:var(--onplum-2);font-size:15px;font-weight:700}
.totalcard p b{color:var(--onplum);font-weight:900}
.totalcard>div{display:grid;gap:12px;min-width:190px}
/* the one scale, on the plum result card */
.totalcard .gbar{background:rgba(255,255,255,.16)}
.totalcard .gmark{background:#FFF6EE}
.totalcard .glabels{color:var(--onplum-3)}
.totalcard .glabels .gthr{color:var(--onplum)}
.critlist li.crit--est{border-left:5px solid var(--amber-deep)}
.notice--est{border-color:var(--amber-deep);background:var(--amber-tint)}
.notice--est p{color:var(--amber-ink)}
.pointlist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pointlist li{margin:0;max-width:none;display:flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px}
.pointlist .mk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:14px;font-weight:900}
.pointlist .yes .mk{background:var(--mint-tint);color:#12775F}
.pointlist .no .mk{background:var(--coral-tint);color:var(--coral-ink)}
.pointlist .no{color:var(--ink-2)}
.slips{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.slips li{margin:0;max-width:none;background:var(--coral-tint);border-radius:12px;padding:8px 13px;font-size:14.5px;font-weight:700}
.slips b{font-weight:900}
.answerbox{background:var(--cream-3);border:2px solid var(--line);border-radius:var(--r-md);padding:16px 20px;
  font-size:16px;font-weight:600;white-space:pre-wrap;margin:0 0 22px}
.modelbox{background:var(--amber-tint);border-radius:var(--r-md);padding:18px 22px;margin:0 0 8px}
.modelbox p{margin:0 0 10px}
.modelbox .lb{font-weight:800;font-size:1.02rem}
.modelbox .tr{font-size:15px;color:var(--ink-2);margin:0}
.measured{display:flex;gap:26px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.measured li{margin:0;max-width:none;text-align:center}
.measured b{display:block;font-size:1.6rem;font-weight:900;letter-spacing:-.03em}
.measured span{font-size:13.5px;font-weight:700;color:var(--ink-2)}

/* ------------------------------------------------- the phone pass, 2026-09 --
   The microphone block is the product on a phone: the record button is the
   one control that matters, so it gets the full width and a thumb-sized
   height, and its label is allowed to wrap instead of widening the card. */
@media (max-width:760px){
  .miccard{padding:15px 15px 16px;margin-top:18px}
  .miccard h3{font-size:1rem;margin-bottom:5px}
  .miccard p{font-size:14px;margin-bottom:10px}
  .microw{gap:10px}
  .microw .btn--mic,.microw .btn--stop{display:flex;width:100%;justify-content:center;
    white-space:normal;padding:15px 18px;font-size:16px}
  .microw audio{width:100%}
  .vtimer{font-size:1rem}
  .vstate{font-size:14px;margin-top:10px}
  .vlimit{font-size:12.5px;line-height:1.5}
  .vmeter{padding:12px 14px}
  .steps{gap:7px;margin-bottom:20px}
  .steps li{font-size:12px}
  .audiobox{padding:14px 15px}
  .modelbox{padding:15px 16px}
  .measured{gap:16px}
  .measured b{font-size:1.4rem}
  /* the phone mock: its own frame must not eat the real phone's width */
  .sim{width:100%}
  .sim-phone{padding:9px;border-radius:32px}
  .sim-screen{padding:16px 13px;border-radius:24px}
  .sim-bar{font-size:10.5px;gap:8px;padding-bottom:11px}
  .sim-q{font-size:1.12rem}
  .sim-gloss{font-size:.9rem}
}

@media (max-width:820px){
  .authbox{gap:10px}
  .urow{gap:12px;padding:14px}
  .totalcard{gap:16px}
  .totalcard .big{font-size:2.6rem}
}

/* ------------------------------------------------------- consent banner --
   A band at the bottom of the first visit, stacked on top of the sticky price
   bar. Both choices live here, in the first layer, one click each, in boxes of
   exactly the same size. The hierarchy is colour and weight only: "Accept all"
   is the coral primary, "Only necessary" is a grey ghost at a lighter weight.
   The band uses the page's own container width, so its sentence runs the full
   line instead of wrapping into a stub. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--paper);
  border-top:2px solid var(--line);box-shadow:0 -8px 28px rgba(36,18,56,.16)}
.consent[hidden]{display:none}
/* Diagnostic pages reserve real document space instead of covering answers. */
.has-diagnostic .consent{position:static;box-shadow:none}
.has-diagnostic .pricebar{display:none}
.consent-in{max-width:var(--wrap);margin:0 auto;padding:18px 28px;display:flex;gap:28px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.consent-tx{flex:1 1 520px;min-width:240px}
.consent-tx h2{font-size:1.05rem;margin:0 0 4px}
.consent-tx p{margin:0;font-size:15px;color:var(--ink-2)}
.consent-tx a{color:var(--coral-ink);font-weight:800}
.consent-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;flex:none}
/* One box for both. The row is a two-track grid of equal fractions, so the
   longer of the two labels (the French "Uniquement nécessaires") sets BOTH
   widths instead of only its own: same width, same padding, same radius, same
   line-box, in every language. Only the ink changes. */
.consent-btn{min-width:190px;font-size:15px;padding:14px 22px;text-align:center;
  font-family:inherit;line-height:1;border-radius:16px;cursor:pointer;display:inline-block}
.consent-btn--quiet{background:transparent;border:0;border-bottom:5px solid transparent;
  color:var(--ink-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.consent-btn--quiet:hover{color:var(--ink)}
@media (max-width:720px){
  .consent-in{padding:16px;gap:14px}
  .consent-btns{width:100%}
  .consent-btn{min-width:0;padding:14px 12px}
}

[data-exam-plan] input{display:block;box-sizing:border-box;width:100%;min-height:48px;font:inherit;margin-block:12px}
[data-exam-plan] [hidden]{display:none!important}
.plan-question{margin-block:24px;border-top:1px solid currentColor;padding-top:16px}
.plan-options{display:flex;flex-direction:column;gap:12px}
.plan-options button{width:100%;min-height:48px;white-space:normal;text-align:left}
[data-exam-plan] audio{width:100%}

/* ------------------------------------------------------- the first screen -- */
/* The two columns start on the SAME line: the intro is short and the exercise
   card is tall, so centring the row used to drop the headline a couple of
   hundred pixels below the top of the card and push the submit CTA off screen.
   Aligned to the top, the whole intro and the first step of the card share the
   first viewport. */
.tryhero{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:start}
.tryintro{padding-top:2px}
.tryintro .eyebrow{margin:0 0 14px}
.tryintro h1{color:#FFF6EE;font-size:clamp(2.05rem,1.2rem + 2.3vw,2.9rem);margin:0 0 16px}
.tryintro .hsub,.trysub .hsub{font-size:1.1rem;line-height:1.45;font-weight:600;color:var(--onplum-2);margin:0 0 16px}
.trysub>:last-child{margin-bottom:0}
.tryquiet{margin:0;font-size:14.5px;font-weight:700;color:var(--onplum-3)}

.trycard{color:var(--ink);background:var(--paper);border:2px solid var(--line);border-bottom:7px solid var(--line-deep);
  border-radius:var(--r-xl);padding:24px 24px 26px;box-shadow:0 26px 60px rgba(20,6,34,.34)}
.trystep{font-size:12.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral-ink);margin:0 0 12px}
.trycard .qbox{margin-top:0}
.trycard textarea.answer{min-height:136px;margin-top:16px}
.tryhint{font-size:14px;font-weight:600;color:var(--ink-2);margin:10px 0 0}
.trystart{margin:16px 0 20px}
.trycard .btn--block{margin-top:4px}

/* --------------------------------------------------------------- the flow -- */
.trysteps{margin-bottom:30px}
.steps li.was{background:var(--cream-3);border-color:var(--line-deep);color:var(--ink-2)}
.trynext{margin-top:30px}
.tryq{border:0;padding:0;margin:0 0 24px}
.tryq legend{padding:0;margin-bottom:.6rem}
.tryalt{margin:16px 0 0;font-size:15px;font-weight:700}
.tryalt a{font-weight:800;text-decoration:underline}
.linkbtn{background:none;border:0;padding:0;margin:22px 0 0;font-family:inherit;font-size:15.5px;
  font-weight:800;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.linkbtn:hover{color:var(--amber)}

/* ---------------------------------------------------------- level and gaps -- */
.levelcard{display:grid;grid-template-columns:minmax(200px,.8fr) 1.2fr;gap:26px;align-items:center;
  border:2px solid var(--line);border-bottom:6px solid var(--line-deep);border-radius:var(--r-lg);
  background:var(--paper);padding:26px 28px;margin:0 0 34px}
.lvmain{display:flex;flex-direction:column;gap:4px}
.lvlab{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.lvval{font-size:clamp(2.6rem,1.6rem + 3vw,3.6rem);font-weight:900;line-height:1;color:var(--coral-ink)}
.lvtarget{font-size:14px;font-weight:700;color:var(--ink-2);margin-top:6px}
.lvfigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.lvfig{background:var(--cream-3);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px 16px}
.lvfig b{display:block;font-size:1.6rem;font-weight:900;line-height:1.1}
.lvfig b small{font-size:.9rem;font-weight:800;color:var(--ink-2)}
.lvfig span{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-top:4px}

.weaklist{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.weaklist li{margin:0;max-width:none;border-left:5px solid var(--coral);background:var(--cream-3);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 18px}
.weaklist--ok li{border-left-color:var(--mint)}
.weaklist b{display:block;font-size:15.5px;font-weight:900}
.weaklist span{display:block;font-size:14.5px;font-weight:600;color:var(--ink-2);margin-top:3px}

/* Stack at the same width as the signed-in hero (.hero): below 1000px the two
   columns are too narrow to hold the headline and the exercise side by side.
   Stacked order is unchanged: intro, then the exercise card. */
@media (max-width:1000px){
  .tryhero{grid-template-columns:1fr;gap:28px}
  .tryintro{padding-top:0}
  .tryintro h1{max-width:none}
}
@media (max-width:900px){
  .levelcard{grid-template-columns:1fr;gap:20px}
}
/* The entry eyebrow is a long line ("Sproochentest speaking test · question 1")
   and the pill is nowrap by default, so on a phone it was clipped by the
   hero's overflow. Let it wrap instead. */
@media (max-width:600px){
  .tryintro .eyebrow{white-space:normal;line-height:1.3;text-align:left}
}
/* ------------------------------------------- the audit pass, Sept 2026 --- */

/* Positioning line + three facts, above the exercise. One spacing step (16px)
   between every element of the intro column, so it reads as one block. */
.position{margin:0 0 16px;font-size:1.02rem;font-weight:800;color:var(--onplum-2)}
.facts{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.facts li{position:relative;padding-left:26px;font-size:15px;font-weight:700;color:var(--onplum-2);margin:0}
.facts li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:4px;background:var(--amber)}
.tryline{margin:0 0 16px;font-size:1.02rem;font-weight:900;color:var(--amber)}

/* The play control: big, labelled, impossible to miss */
.qbox--lead{display:block}
.playbig{display:none;width:100%;margin-top:14px;align-items:center;justify-content:center;gap:12px;
  background:var(--coral);color:#fff;border:0;border-bottom:5px solid var(--coral-deep);border-radius:var(--r-sm);
  padding:14px 18px;font:inherit;font-size:16px;font-weight:900;cursor:pointer}
.playbig.ready{display:flex}
.playbig:active{transform:translateY(2px);border-bottom-width:3px}
.playbig svg{width:24px;height:24px}
.playbig .pause{display:none}
.playbig.playing .pause{display:block}
.playbig.playing .go{display:none}

/* Voice first: the microphone is the primary control, the keyboard is under it */
.answerpad{margin-top:18px}
.miccard--primary{border:2px solid var(--coral);border-style:solid;background:var(--coral-tint);margin-top:0}
.btn--mic{background:var(--coral);color:#fff;border-bottom:5px solid var(--coral-deep);display:inline-flex;align-items:center;gap:10px}
.btn--stop{background:var(--plum);color:#fff;border-bottom:5px solid #12061F}
.micdot{width:12px;height:12px;border-radius:50%;background:#fff;display:inline-block}
.typebox{margin-top:16px}
.typelab{display:block;font-size:14px;font-weight:900;color:var(--ink-2);margin-bottom:6px}
.vtag{font-size:13px;font-weight:800;color:var(--coral-ink);margin:0 0 6px}

/* Distance to the 20/40 threshold, on the result screen */
.threshold{margin:26px 0 34px;padding:20px 22px;border-radius:var(--r-md);border:2px solid var(--line);background:var(--cream-3)}
.threshold h2{margin:0 0 12px;font-size:1.08rem}
.threshold--ok{border-color:var(--mint);background:#EFFCF8}
.threshold--under{border-color:var(--amber-deep);background:var(--amber-tint)}
.thbar{position:relative;height:16px;border-radius:999px;background:#EADFF2;overflow:hidden}
.thbar i{display:block;height:100%;border-radius:999px;background:var(--coral)}
.threshold--ok .thbar i{background:var(--mint)}
.thmark{position:absolute;top:-4px;width:3px;height:24px;background:var(--plum);border-radius:2px}
.thline{margin:12px 0 4px;font-size:15.5px}

/* The sections under the exercise */
.threelines{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:12px}
.threelines li{padding-left:26px;position:relative;font-size:16px;font-weight:600;color:var(--ink-2)}
.threelines li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--coral)}
.howsteps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.howsteps li{display:flex;gap:14px;align-items:flex-start;margin:0;max-width:none}
.howsteps .hn{flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:var(--coral);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:17px;border-bottom:4px solid var(--coral-deep)}
.howsteps h3{margin:0 0 4px;font-size:1.02rem}
.howsteps p{margin:0;font-size:14.6px;font-weight:600;color:var(--ink-2)}
.anchors{list-style:none;margin:16px auto 0;padding:0;display:grid;gap:12px;max-width:760px}
.anchors li{padding:14px 18px;border-radius:var(--r-sm);background:rgba(255,255,255,.07);
  font-size:15px;font-weight:700;color:var(--onplum-2);margin:0;max-width:none}
.arrow--light{color:var(--amber)}

/* E-mail capture */
.capwrap{margin-top:28px}
.capwrap--result{margin:30px 0 0}
.capture{margin:0;padding:22px 24px;border-radius:var(--r-md);border:2px solid var(--coral);background:var(--coral-tint)}
.capture--compact{padding:16px 18px}
.capture .cap-h{margin:0 0 6px;font-size:1.08rem;font-weight:900;color:var(--ink)}
.capture .cap-p{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--ink-2)}
.cap-row{display:flex;gap:10px;flex-wrap:wrap}
.cap-row input{flex:1 1 240px;min-width:0;padding:13px 15px;border-radius:var(--r-sm);border:2px solid var(--line-deep);
  background:var(--paper);font:inherit;font-size:16px;font-weight:700;color:var(--ink)}
.cap-row input:focus{outline:3px solid var(--coral);outline-offset:1px}
.cap-consent{margin:12px 0 0;font-size:13px;font-weight:700;color:var(--ink-2)}
.cap-err{margin:0 0 12px;font-size:14.5px;font-weight:800;color:var(--coral-ink)}
/* The detail gate: one card, below the free result and on the spoken-result gate page */
.capgate{margin:20px 0 0;padding:22px 24px;border-radius:var(--r-md);border:2px solid var(--coral);background:var(--coral-tint)}
.capgate h2{margin:0 0 6px;font-size:1.35rem;line-height:1.2;color:var(--ink)}
.capgate>p{margin:0 0 14px;font-size:15px;font-weight:600;line-height:1.5;color:var(--ink-2)}
.capgate>label{display:block;margin:0 0 12px;font-size:14px;font-weight:800;color:var(--ink-2)}
.capgate input[type=email]{display:block;width:100%;margin-top:6px;padding:13px 15px;border-radius:var(--r-sm);border:2px solid var(--line-deep);
  background:var(--paper);font:inherit;font-size:16px;font-weight:700;color:var(--ink)}
.capgate input[type=email]:focus{outline:3px solid var(--coral);outline-offset:1px}
.capgate .cap-consent{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;line-height:1.45}
.capgate .cap-consent input{flex:none;margin:3px 0 0;width:18px;height:18px;accent-color:var(--coral)}
.capgate .btn{justify-content:center;min-width:240px}
.capgate [role=alert]{margin:10px 0 0;font-size:14.5px;font-weight:800;color:var(--coral-ink)}
.capgate [role=alert]:empty{display:none}
.diagstatus{margin:16px 0 0;font-size:15px;font-weight:700;color:var(--ink-2)}
@media (max-width:760px){.capgate{padding:18px 16px}.capgate .btn{width:100%}}
.capture--ok{border-color:var(--mint);background:#EFFCF8}
.capture--ok p{margin:0;font-size:16px;color:var(--ink)}
.capture .field{margin-bottom:12px}
.section--deep .capture,.section--plum .capture{background:rgba(255,255,255,.07);border-color:var(--amber)}
.section--deep .capture .cap-h,.section--plum .capture .cap-h{color:var(--onplum)}
.section--deep .capture .cap-p,.section--plum .capture .cap-p,
.section--deep .capture .cap-consent,.section--plum .capture .cap-consent{color:var(--onplum-2)}

/* The sticky mobile price bar */
.direct-buy{display:grid;gap:8px;width:100%;margin:0}
.direct-buy__consent{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.35;cursor:pointer}
.direct-buy__consent input{flex:none;margin:2px 0 0;accent-color:var(--plum)}
.direct-buy .btn{width:100%}
.pricebar .direct-buy{flex:1;min-width:0}
.pricebar .direct-buy__consent{color:var(--onplum)}
.pricebar .direct-buy__consent a{color:var(--amber)}
.pricebar{display:none}
body.has-bar{padding-bottom:0}
@media (max-width:860px){
  .pricebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;
    gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--plum);
    border-top:2px solid var(--plum-300);box-shadow:0 -8px 26px rgba(24,10,40,.28)}
  .pb-tx{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .pb-tx b{font-size:14px;font-weight:900;color:var(--onplum)}
  .pb-tx span{font-size:15px;font-weight:900;color:var(--amber)}
  .pb-tx del{margin-right:5px;font-size:13px;font-weight:700;color:var(--onplum);opacity:.62;text-decoration-thickness:1.5px}
  .pb-cta{padding:11px 18px;font-size:15px;white-space:nowrap}
  body.has-bar{padding-bottom:120px}
  .howsteps{grid-template-columns:1fr}
}
@media (max-width:600px){.pricebar .pb-tx{display:none}}
@media print{.pricebar{display:none}}

/* ------------------------------------------------- the phone pass, 2026-09 --
   The try-first hero is the first thing a phone sees. It broke in one very
   specific way: the microphone button carries a long label and buttons are
   nowrap, so the button's min-content width set the width of the whole grid
   column and pushed the page 60 px wider than the screen. Every headline in
   the intro then ran off the right edge. Fixed at the source (min-width:0 on
   the columns, wrapping labels on the phone), never with a hidden overflow. */
.tryhero>*{min-width:0}

@media (max-width:760px){
  .tryhero{gap:22px}
  .trycard{padding:18px 16px 20px;border-radius:20px;box-shadow:0 14px 34px rgba(20,6,34,.3)}
  .trycard textarea.answer{min-height:118px;margin-top:12px}
  .trystep{font-size:11.5px;margin-bottom:10px}
  .tryintro h1{font-size:1.85rem;line-height:1.14;max-width:none;margin-bottom:12px}
  .tryintro .hsub,.trysub .hsub{font-size:1rem;line-height:1.45;max-width:none}
  .tryintro .eyebrow{white-space:normal;text-align:left;line-height:1.35}
  .position{font-size:.98rem;max-width:none}
  .facts{gap:7px}
  .facts li{font-size:14.5px;padding-left:24px}
  .tryline{font-size:1rem}
  .tryquiet{font-size:13.5px}
  .tryhint{font-size:13px}
  .trysteps{margin-bottom:22px}
  .playbig{font-size:15px;padding:13px 16px}
  .answerpad{margin-top:14px}
  .typelab{font-size:13.5px}
  .levelcard{padding:20px 18px}
  .lvfigs{grid-template-columns:1fr 1fr;gap:10px}
  .lvfig{padding:12px 13px}
  .lvfig b{font-size:1.4rem}
  .weaklist li{padding:12px 14px}
  .threshold{padding:16px 16px;margin:20px 0 26px}
  .howsteps{gap:16px}
  /* the price bar keeps its own tight label: the CTA must stay on one line */
  .pb-cta{white-space:nowrap}
}

/* ==========================================================================
   THE RHYTHM PASS, September 2026
   Alan's brief: "too much text, the site feels like work". Every block below
   replaces a paragraph with a short heading, one sentence and a shape. No new
   colours, no new font, no images, no animation library.
   ========================================================================== */

/* --------------------------------------------------------------- icons ---- */
.vi{width:24px;height:24px;display:block}
.vchart,.vwave{display:block;width:100%;height:auto}

/* ------------------------------------------------------ the first screen -- */
/* Three grid areas, not two. On a desktop the intro and the facts stack in the
   left column beside the card; on a phone the card comes SECOND, before the
   facts, so the microphone is one short scroll from the top instead of five
   paragraphs down.

   The row sizes matter. The card spans both rows and is much taller than the
   intro, and with two auto rows the grid shared the card's extra height
   BETWEEN them: the intro sat at the top of an over-tall first row and the
   facts started a couple of hundred pixels lower, with dead space in the
   middle. The first row is sized to the intro (auto) and the second takes
   whatever the card leaves (1fr), so the left column reads as one block at the
   top of the card and any spare height falls below the facts. */
.hero-section[data-try]{padding:44px 0 54px}
.hero-section[data-try] .tryhero{grid-template-areas:"intro card" "sub card" "facts card";grid-template-rows:auto auto 1fr;gap:14px 44px}
.tryintro{grid-area:intro}
.trysub{grid-area:sub}
.hero-section[data-try] .trycard{grid-area:card}
.tryfacts{grid-area:facts;align-self:start}
.trysub .position{margin:0 0 14px}
.tryfacts .facts{margin:0 0 14px}
.tryfacts .tryline{margin:0 0 8px}

/* Spacing on the entry card is tuned so the question, the microphone AND the
   submit button share one 800 px viewport at 1280 px wide, and so the phone
   reaches the microphone in one short scroll. Every value below is a tighter
   version of the same token used elsewhere, never a new one. */
.hero-section[data-try] .trycard{padding:20px 22px 22px}
.hero-section[data-try] .qbox{padding:13px 15px}
.hero-section[data-try] .qtx{font-size:17.5px}
.hero-section[data-try] .answerpad{margin-top:14px}
.hero-section[data-try] .miccard{padding:15px 17px}
.hero-section[data-try] .miccard p{margin-bottom:10px}
.hero-section[data-try] .vlimit{font-size:12.5px;line-height:1.45;margin-top:8px}
.hero-section[data-try] .vstate{margin-top:8px}
.hero-section[data-try] .trystart{margin:12px 0 14px}
.hero-section[data-try] .tryhint{margin-top:8px}

.tryhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.tryhead .trystep{margin:0}
.trybadge{flex:none;width:38px;height:38px;border-radius:12px;background:var(--coral-tint);
  color:var(--coral-ink);display:grid;place-items:center}
.trybadge .vi{width:20px;height:20px}

/* The folded typed answer. The recorder that used to open it is withdrawn;
   the rule stays because the folded box is still styled elsewhere. */
.typebox--fold{margin-top:16px;padding:0;border:2px dashed var(--line-deep);
  border-radius:var(--r-sm);background:var(--cream-3)}
.typebox--fold>summary{list-style:none;cursor:pointer;padding:12px 15px;
  font-size:14.5px;font-weight:900;color:var(--ink-2)}
.typebox--fold>summary::-webkit-details-marker{display:none}
.typebox--fold>summary::after{content:"+";float:right;font-size:17px;line-height:1.1}
.typebox--fold[open]>summary::after{content:"\2212"}
.typebox--fold>.dbody{padding:0 15px 15px}
.trycard .typebox--fold textarea.answer{min-height:110px;margin-top:8px}

/* Narrow: the card jumps ahead of the positioning line and the lede, so the
   first question is the first thing under the title. Same DOM, grid order. */
@media (max-width:1000px){
  .hero-section[data-try] .tryhero{grid-template-areas:"intro" "card" "sub" "facts";grid-template-rows:auto auto auto auto;gap:18px}
  .trysub{margin-top:2px}
}
/* Single column: every value below is spent on one thing, getting question 1
   and all three of its answers onto the first screen above the cookie banner,
   the header and the title. Measured at 390, 768, 1280, 1440 and 1920 px in
   all three languages; 768 needs the same tightening as 390 because the hero
   is already stacked there and the consent card is still 206 px tall. */
@media (max-width:1000px){
  .hero-section[data-try]{padding:14px 0 40px}
  .hero-section[data-try] .tryhero{gap:14px}
  .hero-section[data-try] .tryintro .eyebrow{margin:0 0 8px}
  .hero-section[data-try] .tryintro h1{font-size:1.62rem;line-height:1.16;margin:0 0 6px}
  .hero-section[data-try] .diagcard{padding:14px 16px 18px}
  .hero-section[data-try] .diaghead{gap:8px;margin-bottom:12px}
  .hero-section[data-try] .diagprompt{margin:0 0 10px}
  .hero-section[data-try] .diagaudio{margin:0 0 10px}
  .hero-section[data-try] .diagstem{margin:0 0 12px;padding:11px 13px}
  .hero-section[data-try] .diagopts{gap:8px}
}

/* --------------------------------------------------------- trust marks ---- */
/* LetzTest has no customers yet. Nothing here is a testimonial, a star rating
   or a learner count: four checkable facts about the offer, and that is all. */
.section--band{background:var(--cream-2);padding:32px 0;
  border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.tmarks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tmark{display:flex;gap:12px;align-items:flex-start;margin:0;max-width:none}
.tmark-i{flex:0 0 auto;width:40px;height:40px;border-radius:13px;background:var(--coral-tint);
  color:var(--coral-ink);display:grid;place-items:center}
.tmark-i .vi{width:21px;height:21px}
.tmark-t b{display:block;font-size:15.5px;font-weight:900;line-height:1.25}
.tmark-t span{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-top:2px}
@media (max-width:900px){.tmarks{grid-template-columns:1fr 1fr;gap:16px}}
@media (max-width:520px){.tmarks{grid-template-columns:1fr;gap:14px}.section--band{padding:24px 0}}

/* ------------------------------------------------------- the big numbers -- */
.sec-stats{padding:62px 0}
.stats{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{margin:0;max-width:none;text-align:center;background:rgba(255,255,255,.06);
  border:1.5px solid var(--plum-200);border-radius:var(--r-lg);padding:22px 14px 20px}
.stat-n{display:block;font-size:clamp(2.5rem,1.4rem + 3.2vw,3.5rem);font-weight:900;line-height:1;
  color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat-l{display:block;margin-top:8px;font-size:15.5px;font-weight:900;color:var(--onplum)}
.stat-s{display:block;margin-top:3px;font-size:13.5px;font-weight:600;color:var(--onplum-3)}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr;gap:14px}.sec-stats{padding:48px 0}}
@media (max-width:420px){.stat{padding:18px 10px 16px}.stat-n{font-size:2.3rem}.stat-l{font-size:14.5px}}

/* ----------------------------------------------------------- icon cards --- */
.icards{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:20px}
.icards--3{grid-template-columns:repeat(3,1fr)}
.icard{margin:0;max-width:none;background:var(--paper);border:2px solid var(--line);
  border-bottom:5px solid var(--line-deep);border-radius:var(--r-lg);padding:22px 22px 24px}
.icard-i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--amber-tint);color:var(--amber-text);margin-bottom:14px}
.icard-i .vi{width:23px;height:23px}
.icard h3{margin:0 0 6px;font-size:1.05rem}
.icard p{margin:0;font-size:15px;font-weight:600;color:var(--ink-2);max-width:none}
@media (max-width:860px){.icards--3{grid-template-columns:1fr;gap:14px}}

/* --------------------------------------------------------- the three steps */
.howsteps{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hstep{position:relative;display:block;margin:0;max-width:none;background:var(--cream-2);
  border:2px solid var(--line);border-bottom:5px solid var(--line-deep);
  border-radius:var(--r-lg);padding:26px 22px 20px}
.hstep .hn{position:absolute;top:-17px;left:22px;width:38px;height:38px;border-radius:12px;
  background:var(--coral);color:#fff;display:grid;place-items:center;font-weight:900;font-size:17px;
  border-bottom:4px solid var(--coral-deep)}
.hstep .hicon{display:block;color:var(--coral-ink);margin:8px 0 10px}
.hstep .hicon .vi{width:28px;height:28px}
.hstep h3{margin:0 0 5px;font-size:1.06rem}
.hstep p{margin:0;font-size:15px;font-weight:600;color:var(--ink-2);max-width:none}
.hart{display:block;margin-top:auto;padding-top:18px;color:var(--coral);opacity:.42}
.hart svg{display:block;width:auto;height:48px;max-width:100%}
.hart .vwave{height:34px}
.hart .vchart{height:44px}
.hstep{display:flex;flex-direction:column}
@media (max-width:860px){.howsteps{grid-template-columns:1fr;gap:32px}}

/* ------------------------------------------------------- price anchors ---- */
.anchors li{display:flex;gap:12px;align-items:center}
.anchor-i{flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.1);
  color:var(--amber);display:grid;place-items:center}
.anchor-i .vi{width:18px;height:18px}
.disclosure--wide{max-width:900px;margin-inline:auto}

/* ------------------------------------------------- page-level rhythm ------ */
/* Long guide pages get the same treatment: a facts strip under the headline
   instead of a third paragraph. */
.keyfacts{list-style:none;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:14px}
.keyfact{margin:0;max-width:none;text-align:center;padding:16px 12px;border-radius:var(--r-md);
  background:rgba(255,255,255,.07);border:1.5px solid var(--plum-200)}
.keyfact b{display:block;font-size:1.85rem;font-weight:900;line-height:1;color:var(--amber);
  font-variant-numeric:tabular-nums}
.keyfact span{display:block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--onplum-2)}
@media (max-width:760px){.keyfacts{grid-template-columns:1fr 1fr;gap:10px}.keyfact b{font-size:1.6rem}}

/* ------------------------------------------------- the level diagnostic --- */
/* The first thing on the home page: eight closed questions, one per screen.
   The card is the same object as the old exercise card (.trycard) so the hero
   grid, the shadow and the radii are unchanged; everything below styles what
   is inside it. Without JavaScript the whole list shows at once and each
   answer is a <details> the visitor opens: no dead controls either way. */
.diagcard{padding:22px 22px 24px}
.diaghead{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.diaghead .trystep{margin:0}
.diagbar{display:block;height:8px;border-radius:999px;background:var(--cream-3);overflow:hidden}
.diagbar i{display:block;height:100%;border-radius:999px;background:var(--coral);transition:width .28s ease}
.diaglist{list-style:none;margin:0;padding:0}
.diagq{margin:0 0 30px}
.diagcard.is-on .diagq{margin:0}
.diagprompt{margin:0 0 14px;font-size:1.06rem;font-weight:800;line-height:1.35;color:var(--ink)}
.diagstem{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-md);background:var(--cream-2,var(--cream-3));
  border-left:5px solid var(--amber);font-size:1.02rem;font-weight:800;line-height:1.45;color:var(--ink)}
.diagaudio{margin:0 0 16px}
.playbig--sm{display:flex;margin-top:0;padding:12px 16px;font-size:15px}
.playbig--sm[hidden]{display:none}
.diagopt-note{margin:10px 0 0;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.diagscript p{margin:0 0 6px;font-weight:700}
.diagscript p:last-child{margin-bottom:0}
.diagopts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.diagopt{display:block;width:100%;text-align:left;font:inherit;font-size:15.5px;font-weight:700;line-height:1.35;
  color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:var(--r-md);
  padding:13px 15px;cursor:pointer}
.diagopt--lb{font-weight:800}
.diagopt:hover:not(:disabled){border-color:var(--coral);background:var(--coral-tint)}
.diagopt:disabled{cursor:default;opacity:1}
.diagopt.is-right{border-color:var(--mint);background:var(--mint-tint);color:var(--green-ink)}
.diagopt.is-wrong{border-color:var(--coral-deep);background:var(--coral-tint);color:var(--coral-ink)}
.diagopt.is-picked,.diagopt.is-picked:hover:not(:disabled){border-color:var(--plum);background:var(--plum);color:#fff;box-shadow:0 0 0 3px rgba(36,18,56,.15)}
.diagfb{margin-top:16px}
.diagfb>summary{cursor:pointer;font-size:14.5px;font-weight:800;color:var(--coral-ink)}
.diagcard.is-on .diagfb>summary{display:none}
.diagcard.is-on .diagfb:not([open]){display:none}
.diagfb-b{margin-top:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--cream-3)}
.diagverdict{margin:0 0 6px;font-size:14px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.diagverdict.is-right{color:var(--green-ink)}
.diagverdict.is-wrong{color:var(--coral-ink)}
.diagwhy{margin:0;font-size:15px;font-weight:600;line-height:1.5;color:var(--ink)}
.diagfb-cta{margin-top:14px}
.diagfb-cta .btn{width:100%;justify-content:center}

/* the closing screen: the estimate, what is missing, then the microphone */
.diagres .eyebrow{margin:0 0 10px;color:var(--coral-ink)}
.diagres-h{margin:0 0 16px;font-size:1.45rem;line-height:1.2}
.diagscore{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.diagscore b{font-size:2.6rem;font-weight:900;line-height:1;color:var(--coral);font-variant-numeric:tabular-nums}
.diagscore span{font-size:15px;font-weight:700;color:var(--ink-2)}
.diaglevel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;
  border-radius:var(--r-md);background:var(--cream-3);border:2px solid var(--line)}
.diaglevel span{font-size:14px;font-weight:800;color:var(--ink-2)}
.diaglevel b{font-size:1.3rem;font-weight:900;color:var(--ink)}
.diagband{margin:16px 0 6px;font-size:1.05rem;font-weight:900;color:var(--ink)}
.diagband-p{margin:0;font-size:15px;font-weight:600;line-height:1.5;color:var(--ink-2)}
.diagweak,.mockweak{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
.diagweak[hidden],.mockweak[hidden]{display:none}
.diagnote{margin:14px 0 0;font-size:13.5px;font-weight:700;line-height:1.45;color:var(--ink-2)}
.diaggaps-h{margin:22px 0 10px;font-size:1.05rem}
.diaggaps{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.diaggaps li{position:relative;padding-left:24px;font-size:15px;font-weight:600;line-height:1.45;color:var(--ink)}
.diaggaps li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:11px;border-radius:4px;background:var(--amber)}
.diagmic{margin-top:24px;padding:18px 18px 20px;border-radius:var(--r-lg,var(--r-md));background:var(--coral-tint);border:2px solid var(--coral)}
.diagmic-h{margin:0 0 6px;font-size:1.08rem;font-weight:900;color:var(--ink)}
.diagmic-p{margin:0 0 14px;font-size:15px;font-weight:600;line-height:1.5;color:var(--ink)}
.diagmic .btn-row{margin:0}
.diagmic .btn{width:100%;justify-content:center}
.diagmore{margin:14px 0 0;font-size:15px;font-weight:800}
.diagoffer{margin-top:16px;border-block:2px solid var(--coral);padding-block:14px}
.diagoffer .pfig{font-size:2.4rem;font-weight:900;white-space:nowrap}
.diagoffer .pfig del{font-size:1.1rem;font-weight:600;color:var(--ink-2)}
.diagoffer p{margin:8px 0;font-size:15px}
.diagres{scroll-margin-top:16px}
.diagfoot{margin-top:18px}
.diagfoot .linkbtn{margin:0;color:var(--coral-ink)}
.diagsaved{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--ink-2)}

/* the microphone section, which used to be the hero */
.micwrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:start}
.micwrap>*{min-width:0}
.micintro h2{color:#FFF6EE;margin:0 0 14px}
.micintro .eyebrow{margin:0 0 12px}
.micintro .hsub{font-size:1.05rem;line-height:1.45;font-weight:600;color:var(--onplum-2);margin:0 0 14px}
@media (max-width:1000px){.micwrap{grid-template-columns:1fr;gap:24px}}
@media (max-width:760px){
  .diagcard{padding:18px 16px 20px}
  .diagprompt{font-size:1rem}
  .diagopt{font-size:15px;padding:12px 13px}
  .diagscore b{font-size:2.2rem}
}

/* ------------------------------------------- the listening simulation ------
   The whole width the page gives it: no inner cap, no narrow column. Options
   and documents are full-bleed inside their parent at every width. */
.mock{margin:0}
.mockfacts{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:0 0 22px;padding:0}
.mockfacts li{font-weight:800;font-size:1.05rem;padding:10px 16px;border:2px solid var(--plum);border-radius:14px;background:#fff}
.mockrules-h{margin:0 0 10px;font-size:1.25rem}
.mockrules{margin:0 0 22px;padding-left:1.3em}
.mockrules li{font-weight:600;margin:0 0 8px}
.mockindep{margin:14px 0 0;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.mocktimer{position:sticky;top:0;z-index:5;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  background:var(--plum);color:#fff;border-radius:14px;padding:12px 18px;margin:0 0 20px;font-weight:800}
.mocktimer b{font-size:1.8rem;font-variant-numeric:tabular-nums}
.mocktimer.is-low{background:var(--coral-deep)}
.mockdoc-h{margin:6px 0 8px}
.mockdoc-p{margin:0 0 16px;font-weight:600}
.mockaudio{margin:0 0 22px}
/* the shared .playbig is display:none until a script adds .ready; here the
   script only removes [hidden], so the button is shown as soon as it is not
   hidden and never sits dead on the page */
.mockaudio .playbig:not([hidden]){display:flex}
.mockonce{margin:10px 0 0;font-size:13.5px;font-weight:800;color:var(--ink-2)}
.mockqs{list-style:none;margin:0;padding:0}
.mockq{margin:0 0 24px}
.mockprompt{display:flex;gap:12px;align-items:baseline;margin:0 0 12px;font-weight:800;font-size:1.05rem}
.mockn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--plum);color:#fff;font-size:15px;font-weight:900}
.mockopts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mockopt{display:block;width:100%;text-align:left;font:inherit;font-size:15.5px;font-weight:700;line-height:1.35;
  padding:13px 15px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);cursor:pointer}
.mockopt:hover{border-color:var(--coral);background:var(--coral-tint)}
.mockopt.is-picked,.mockopt.is-picked:hover{border-color:var(--plum);background:var(--plum);color:#fff;box-shadow:0 0 0 3px rgba(36,18,56,.15)}
.mockopt.is-right{border-color:var(--mint);background:var(--mint-tint);color:var(--green-ink)}
.mockopt.is-wrong{border-color:var(--coral-deep);background:var(--coral-tint);color:var(--coral-ink)}
.mockcount{margin:0 0 14px;font-size:14px;font-weight:700;color:var(--ink-2)}
.mockstatus{margin:14px 0 0;font-weight:800}
.mockres{scroll-margin-top:16px}
.mockres .eyebrow{margin:0 0 10px;color:var(--coral-ink)}
.mockscore{display:flex;align-items:baseline;gap:10px;margin:0 0 6px}
.mockscore b{font-size:3.2rem;font-weight:900;line-height:1}
.mockscore span{font-weight:800;color:var(--ink-2)}
.mockverdict{margin:10px 0 4px;font-size:1.5rem;font-weight:900}
.mockres.is-pass .mockverdict{color:var(--green-ink)}
.mockverdict-p{margin:0 0 10px;font-weight:600}
.mockpassmark{margin:0 0 18px;font-size:14.5px;font-weight:700;color:var(--ink-2)}
.mockoffer{margin:0 0 18px;border-block:2px solid var(--coral);padding-block:16px}
.mockoffer .pfig{font-size:2.6rem;font-weight:900;white-space:nowrap}
.mockoffer h3{margin:6px 0 8px}
.mockoffer p{margin:8px 0}
.mockterms{font-size:14px;font-weight:700;color:var(--ink-2)}
.mockdetail-h{margin:0 0 14px}
.mockexpl{margin:0;padding-left:1.4em}
.mockexpl li{margin:0 0 18px;font-weight:600}
.mockexpl li.yes::marker{color:var(--green-ink)}
.mockexpl li.no::marker{color:var(--coral-deep)}
.mockexpl-q{margin:0 0 6px;font-weight:800}
.mockexpl-a{margin:0 0 2px;font-weight:800;color:var(--green-ink)}
.mockexpl-y{margin:0 0 6px;font-size:14.5px;color:var(--ink-2)}
.mockexpl-t{margin:22px 0 8px}
.mockwhy{margin:6px 0 0;font-weight:600}
.mockfoot{margin-top:20px}
.mockfoot .linkbtn{margin:0;color:var(--coral-ink)}
/* the free sample on the home page */
.smp{margin:0}
.smpres{margin-top:18px;border-top:2px solid var(--coral);padding-top:16px}
@media (max-width:760px){
  .mockfacts li{font-size:15px;padding:8px 12px}
  .mockscore b{font-size:2.6rem}
  .mocktimer b{font-size:1.5rem}
  .mockopt{font-size:15px;padding:12px 13px}
  .mockverdict{font-size:1.25rem}
}

.reveal.pre{opacity:0;transform:translateY(14px);will-change:opacity,transform}
.reveal.pre.in{opacity:1;transform:none;will-change:auto;
  transition:opacity .42s ease-out var(--d,0ms),transform .42s cubic-bezier(.22,.7,.3,1) var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.reveal.pre{opacity:1;transform:none;transition:none}}


[data-smp] .player{display:flex;align-items:center;gap:22px;background:var(--plum);color:var(--onplum);border-radius:16px;padding:16px}
[data-smp] .player .play{display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;border:0;border-bottom:5px solid var(--coral-deep);border-radius:50%;background:var(--coral);color:var(--plum);cursor:pointer}
[data-smp] .player svg{width:28px;height:28px;fill:currentColor}
[data-smp] .player strong,[data-smp] .player small{display:block}
[data-smp] .player small{color:var(--onplum-2)}
[data-smp] .wave{display:flex;align-items:center;gap:5px;margin-left:auto}
[data-smp] .wave i{width:5px;border-radius:3px;background:var(--amber)}
[data-smp] .questions{display:grid;gap:26px;margin:0 0 26px}
[data-smp] .questions fieldset{margin:0;padding:0;border:0;min-width:0}
[data-smp] .questions legend{font-weight:900;margin-bottom:12px}
[data-smp] label.answer{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 0;cursor:pointer}
[data-smp] label.answer input{width:22px;height:22px;flex:none;accent-color:var(--plum)}
[data-smp] label.answer:has(input:checked){outline:2px solid var(--plum);background:var(--cream-2);border-radius:8px}
[data-smp] .offer{display:flex;align-items:center;flex-wrap:wrap;gap:26px;border-top:1px solid var(--ink-2);padding:22px 0}
[data-smp] .offer>div{flex:1;min-width:0}
[data-smp] .offer>strong{font-size:2rem;white-space:nowrap}
[data-smp] .pagehead{padding:8px 0;background:transparent;color:var(--ink);overflow:visible}
[data-smp] .pagehead h1{color:var(--ink)}
[data-smp] .pagehead .clarity-lead{font-size:1.18rem;line-height:1.45}
[data-smp] .clarity-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
[data-smp] .clarity-actions .btn{min-height:52px}
[data-smp] #hero .btn--secondary{background:transparent;color:var(--plum);border:2px solid var(--plum);border-bottom-width:5px}
[data-smp] #hero .btn--secondary:hover{color:var(--plum)}
[data-smp] .clarity-reassurance{margin:14px 0 0;color:var(--ink-2)}
[data-smp] .clarity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
[data-smp] .clarity-grid article{min-width:0;background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:22px}
[data-smp] .clarity-grid h3{margin:10px 0}
[data-smp] .clarity-grid p{margin:0}
[data-smp] .clarity-number{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--coral);color:#fff;font-weight:900}
[data-smp] .clarity-link{display:inline-block;margin-top:18px;font-weight:900}
[data-smp] .clarity-access{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.4fr);gap:28px;background:var(--plum);color:var(--onplum);border-radius:18px;padding:28px}
[data-smp] .clarity-access h2{color:var(--onplum)}
[data-smp] .clarity-access li{margin:8px 0}
[data-smp] .clarity-gift-link{color:var(--amber);font-weight:900}
[data-smp] .clarity-access-action{display:flex;flex-direction:column;justify-content:center;gap:16px}
[data-smp] .clarity-access-action strong{font-size:2.5rem}
[data-smp] .clarity-access-action p{margin:0}
[data-smp] .clarity-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
[data-smp] .clarity-band>div{display:flex;flex-direction:column;background:var(--plum);color:var(--onplum);padding:16px;border-radius:12px;min-width:0}
[data-smp] .clarity-band strong{color:var(--amber);font-size:2rem}
[data-smp] .c4-hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;width:100%}
[data-smp] .c4-hero-facts>div{padding:12px 16px}
[data-smp] .clarity-final{background:var(--plum);color:var(--onplum);border-radius:18px;padding:36px}
[data-smp] .clarity-final h2{color:var(--onplum)}
[data-smp] .clarity-final-link{color:var(--onplum);font-weight:900}
[data-smp] #sample .questions{margin-top:24px}
@media(max-width:999px){[data-smp] .clarity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}[data-smp] .clarity-grid article:last-child{grid-column:1/-1}[data-smp] .clarity-access{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){[data-smp] .clarity-band{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:719px){[data-smp] .clarity-grid,[data-smp] .clarity-access{grid-template-columns:minmax(0,1fr)}[data-smp] .clarity-grid article:last-child{grid-column:auto}[data-smp] .clarity-band{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:479px){[data-smp] .clarity-actions{display:grid;grid-template-columns:minmax(0,1fr)}[data-smp] .clarity-actions .btn{width:100%;justify-content:center}[data-smp] #hero{padding-top:0;padding-bottom:14px}[data-smp] #hero h1{font-size:1.85rem;line-height:1.12;margin:8px 0}[data-smp] #hero .eyebrow{margin:0}[data-smp] .clarity-lead{margin:10px 0}}
@media(max-width:479px){[data-smp] .c4-hero-facts{gap:6px}[data-smp] .c4-hero-facts>div{padding:9px 7px}[data-smp] .c4-hero-facts strong{font-size:1.45rem}[data-smp] .c4-hero-facts span{font-size:11px;line-height:1.25}}
@media(max-width:900px){[data-smp] .clarity-band.c4-hero-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){[data-smp] .wave{display:none}}