/* CVNext weekly landing. Tokens: DESIGN.md. The five color slots (--bg --ink --paper
   --accent --accent-2) and --on-bg-muted come from the week's skin, set inline per page.
   Everything below is fixed across weeks. Layout uses logical properties so /en mirrors;
   character art is never flipped. */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r-input:12px; --r-card:20px; --r-chip:6px; --border:3px solid var(--ink);
  --shadow:0 6px 0 var(--ink);
  --h1:clamp(30px, 8.6vw, 38px); --h2:24px; --h3:18px; --body:17px; --small:15px;
  --error:#B3261E; --field:#fff; --hint:#4a4a4a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--body)/1.5 Assistant,system-ui,sans-serif;caret-color:var(--ink);overflow-x:hidden}
::selection{background:var(--accent-2);color:var(--ink)}
/* two-tone focus ring (T1 decision D1): ink carries the contrast, accent-2 is decoration */
:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
a{color:inherit;text-underline-offset:3px}
a:visited{color:inherit}
button,input,select{font:inherit;color:inherit}
.skip{position:absolute;inset-inline-start:var(--s2);top:-80px;z-index:3;background:var(--paper);color:var(--ink);padding:var(--s2) var(--s3);border:var(--border);border-radius:var(--r-input);font-weight:700}
.skip:focus{top:var(--s2)}
.page{max-width:632px;margin:0 auto;padding:0 var(--s4)}

/* header */
header.top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:56px}
.logo{font:700 21px Fredoka,Assistant,sans-serif;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.logo b{color:var(--accent-2);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}
.ep{font:600 13px Assistant,sans-serif;background:var(--ink);color:var(--accent-2);border-radius:var(--r-chip);padding:3px 8px;white-space:nowrap}
.lang{font:600 var(--small) Assistant,sans-serif;min-width:44px;min-height:44px;display:inline-grid;place-items:center}

/* preview ribbon (7C) */
.ribbon{position:sticky;top:0;z-index:2;background:#FFB020;color:#121212;border-bottom:3px solid #121212;font:700 var(--small) Assistant,sans-serif;text-align:center;padding:var(--s2) var(--s4)}

/* opt-in consent strip (2B): scrolls away, never floats, collapses after a choice */
.consent-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);background:var(--ink);color:var(--paper);border-radius:var(--r-input);padding:var(--s2) var(--s3);margin:0 0 var(--s3);max-height:200px;overflow:hidden;transition:max-height .2s ease-out,padding .2s ease-out,margin .2s ease-out,opacity .2s ease-out}
.consent-strip p{margin:0;font:600 var(--small) Assistant,sans-serif}
.consent-strip .choices{display:flex;gap:var(--s2)}
.consent-strip button{min-width:64px;min-height:44px;border:2px solid var(--paper);border-radius:var(--r-input);background:transparent;color:var(--paper);font:700 var(--small) Assistant,sans-serif;cursor:pointer}
.consent-strip.closing{max-height:0;padding-block:0;margin:0;opacity:0}
.consent-strip[hidden]{display:none}

/* first screen */
.first{display:grid;gap:var(--s4)}
.hero{display:grid;grid-template-columns:1fr 44%;align-items:end;gap:var(--s2)}
.hero.lead-start{grid-template-columns:44% 1fr}
.hero.lead-start .lead{order:-1}
.hero picture{display:contents} /* the img stays the grid item */
h1{font:700 var(--h1)/1.1 Fredoka,Assistant,sans-serif;margin:var(--s2) 0;overflow-wrap:anywhere;text-wrap:balance}
.sub{margin:0 0 var(--s2);color:var(--on-bg-muted)}
.lead{width:100%;aspect-ratio:3/4;object-fit:contain;object-position:50% 100%;animation:enter-left .4s cubic-bezier(.2,.8,.2,1)}
/* the character slides in 24 px from the page edge it sits on (4A) */
[dir=rtl] .hero.lead-start .lead,[dir=ltr] .hero:not(.lead-start) .lead{animation-name:enter-right}
@keyframes enter-left{from{transform:translateX(-24px)}to{transform:none}}
@keyframes enter-right{from{transform:translateX(24px)}to{transform:none}}

/* the form card: the one card on the page */
.card{background:var(--paper);border:var(--border);border-radius:var(--r-card);padding:var(--s5) var(--s4);box-shadow:var(--shadow)}
.card h2{font:700 var(--h2)/1.15 Fredoka,Assistant,sans-serif;margin:0 0 var(--s1);text-wrap:balance}
fieldset{border:0;margin:0;padding:0;min-width:0}
.field{margin-top:var(--s4)}
label{display:block;font:700 var(--small) Assistant,sans-serif;margin:0 0 6px}
label small{font-weight:400;color:var(--hint)}
input[type=text],input[type=tel],input[type=email],select{width:100%;min-height:48px;font:400 var(--body) Assistant,sans-serif;padding:11px var(--s3);border:var(--border);border-radius:var(--r-input);background:var(--field);color:var(--ink)}
.hint{font-size:var(--small);color:var(--hint);margin:var(--s1) 0 0}
.err{display:none;font:600 var(--small) Assistant,sans-serif;color:var(--error);margin:var(--s1) 0 0}
.field.invalid input,.field.invalid select{border-color:var(--error)}
.field.invalid .err{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.consent{display:flex;gap:10px;align-items:flex-start}
.consent .box{display:grid;place-items:center;min-width:44px;min-height:44px;margin:-10px}
.consent input{width:24px;height:24px;margin:0;accent-color:var(--ink)}
.consent label{font:400 var(--small)/1.45 Assistant,sans-serif;margin:0}
/* consent gate (JS only): until the box is checked the CTA is aria-disabled, the box
   pulses and an arrow points at it from the inline-start side; checking collapses the arrow */
.nudge{display:none;flex:none;width:32px;margin:2px 0 0;margin-inline-end:6px;color:var(--ink);overflow:hidden;transition:width .2s ease-out,margin .2s ease-out,opacity .2s ease-out}
[dir=rtl] .nudge svg{transform:scaleX(-1)}
.gate .nudge{display:block;--toward:5px;animation:nudge 1s ease-in-out infinite}
[dir=rtl] .gate .nudge{--toward:-5px}
.gate .consent input{animation:pulse 1s ease-in-out infinite}
.gate.agreed .nudge{width:0;margin-inline-end:-10px;opacity:0;animation:none}
.gate.agreed .consent input{animation:none}
@keyframes nudge{50%{transform:translateX(var(--toward))}}
@keyframes pulse{50%{transform:scale(1.3);box-shadow:0 0 0 3px var(--accent-2)}}
.cta[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.cta[aria-disabled=true]:active{transform:none;box-shadow:0 4px 0 var(--ink)}
.hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
.banner{margin-top:var(--s4);padding:var(--s3);border:var(--border);border-radius:var(--r-input);background:#FFE7D6;font-size:var(--small)}
.banner a{font-weight:700}
.banner[hidden]{display:none}
.cta{width:100%;min-height:52px;margin-top:var(--s4);font:700 20px Fredoka,Assistant,sans-serif;background:var(--accent);color:var(--ink);border:var(--border);border-radius:14px;box-shadow:0 4px 0 var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--s2)}
.cta:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.cta[disabled]{cursor:progress}
fieldset[disabled] .cta{cursor:not-allowed;opacity:.6}
.spin{display:none;width:18px;height:18px;border:3px solid var(--ink);border-inline-end-color:transparent;border-radius:50%;animation:rot .8s linear infinite}
.cta[aria-busy=true] .spin{display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
.reassure{font-size:var(--small);text-align:center;margin:10px 0 0;color:var(--hint)}

/* benefits: alternating big art, no cards (4B) */
.benefits{padding:40px 0 var(--s4)}
.benefits h2{font:700 var(--h2) Fredoka,Assistant,sans-serif;margin:0 0 var(--s5)}
.b{display:grid;grid-template-columns:40% 1fr;gap:14px;align-items:center;margin:0 0 22px}
.b.flip{grid-template-columns:1fr 40%}
.b.flip img{order:2}
.b img{width:100%;aspect-ratio:1;object-fit:contain}
.b h3{font:700 var(--h3)/1.25 Assistant,sans-serif;margin:0 0 var(--s1)}
.b p{margin:0;color:var(--on-bg-muted)}
.who{font:600 var(--small) Assistant,sans-serif;color:var(--on-bg-muted)}

/* proof strip (7B): only rendered with >= 3 approved logos */
.proof{padding:var(--s5) 0;border-top:var(--border)}
.proof ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center}
.proof img{height:32px;width:auto}
.claim{font:700 var(--h3) Assistant,sans-serif}

footer{padding:var(--s5) 0 var(--s6);font-size:var(--small);display:flex;flex-wrap:wrap;gap:var(--s4);color:var(--on-bg-muted)}
footer a{min-height:44px;display:inline-flex;align-items:center}

/* thanks + 404 */
.done{display:grid;grid-template-columns:1fr 40%;gap:var(--s4);align-items:end;padding:var(--s5) 0}
.done-text{background:var(--paper);border:var(--border);border-radius:var(--r-card);box-shadow:var(--shadow);padding:var(--s5) var(--s4)}
.done h1{margin-top:0}
.done h2{font:700 var(--h3) Assistant,sans-serif;margin:var(--s5) 0 var(--s2)}
.promise{font-size:20px;margin:0}
.steps{margin:0;padding-inline-start:1.4em;display:grid;gap:var(--s1)}
.steps li::marker{font-weight:700}
.call a{font-weight:700}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s5);font:700 20px Fredoka,Assistant,sans-serif;background:var(--accent);color:var(--ink);border:var(--border);border-radius:14px;box-shadow:0 4px 0 var(--ink);text-decoration:none}
.button:visited{color:var(--ink)}
.button:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.done .lead{aspect-ratio:auto;animation:none}
.lost .lead{transform:rotate(-6deg)}

/* privacy, accessibility */
.prose{background:var(--paper);border:var(--border);border-radius:var(--r-card);padding:var(--s5) var(--s4);margin:var(--s4) 0;max-width:72ch}
.prose h1{font-size:32px;margin-top:0}
.prose h2{font:700 var(--h3) Assistant,sans-serif;margin:var(--s5) 0 var(--s2)}
.prose ul{padding-inline-start:1.2em}
.prose li{margin-bottom:var(--s2)}

@media (prefers-reduced-motion:reduce){
  .lead,.spin,.gate .nudge,.gate .consent input{animation:none}
  .nudge{transition:none}
  .consent-strip{transition:none}
  .cta:active,.button:active{transform:none}
}

/* phone + tablet: one column, the form right under the H1; the subline and the
   character follow it side by side. DOM order stays h1, sub, art, form (nothing
   focusable is reordered). */
@media (max-width:1023px){
  .first{grid-template-columns:1fr 44%;grid-template-areas:"h1 h1" "form form" "sub lead";column-gap:var(--s2);row-gap:var(--s3)}
  .first.lead-start{grid-template-columns:44% 1fr;grid-template-areas:"h1 h1" "form form" "lead sub"}
  .hero,.hero-text{display:contents}
  .first h1{grid-area:h1}
  .first .card{grid-area:form}
  .first .sub{grid-area:sub;align-self:center;margin:0}
  .first .lead{grid-area:lead}
}
@media (min-width:480px) and (max-width:1023px){
  .first{grid-template-columns:1fr 40%}
  .first.lead-start{grid-template-columns:40% 1fr}
}
/* desktop: two columns in the first screen, form on the end side (6A) */
@media (min-width:1024px){
  :root{--h1:56px}
  .page{max-width:1080px}
  .first{grid-template-columns:1fr 440px;gap:40px;align-items:start;padding-top:var(--s5)}
  .sub{font-size:20px}
  .hero{grid-template-columns:1fr 46%}
  .hero.lead-start{grid-template-columns:46% 1fr}
  .b,.b.flip{grid-template-columns:340px 1fr;gap:40px;margin-bottom:var(--s6)}
  .b.flip{grid-template-columns:1fr 340px}
  .b h3{font-size:24px}
  .b p{font-size:19px}
  .b > div{max-width:46ch}
  .done{grid-template-columns:1fr 360px;gap:40px;padding-top:var(--s6)}
  .prose{padding:var(--s6)}
}
@media (min-width:1440px){ .page{max-width:1200px} }