/* ---- Fonts ---- */
@font-face{font-family:"Zalando Sans Expanded";src:url("../fonts/ZalandoSansExpanded-VariableFont_wght.ttf") format("truetype-variations");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Zalando Sans Expanded";src:url("../fonts/ZalandoSansExpanded-Italic-VariableFont_wght.ttf") format("truetype-variations");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Zalando Sans SemiExpanded";src:url("../fonts/ZalandoSansSemiExpanded-VariableFont_wght.ttf") format("truetype-variations");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Zalando Sans SemiExpanded";src:url("../fonts/ZalandoSansSemiExpanded-Italic-VariableFont_wght.ttf") format("truetype-variations");font-weight:200 900;font-style:italic;font-display:swap}

/* ---- Design tokens ---- */
:root{
  --brown-900:#2E221C;
  --brown-700:#5D4439;
  --taupe-400:#BEA594;
  --cream-100:#FAF8F7;
  --white:#FFFFFF;
  --black:#000000;
  --color-bg:var(--cream-100);
  --color-surface:var(--white);
  --color-text:var(--brown-700);
  --color-text-muted:rgba(93,68,57,0.7);
  --color-text-faint:rgba(93,68,57,0.5);
  --color-border:rgba(93,68,57,0.2);
  --color-border-strong:rgba(93,68,57,0.6);
  --color-neutral:var(--taupe-400);
  --color-accent:var(--brown-700);
  --color-accent-hover:var(--brown-900);
  --color-on-accent:var(--white);
  --color-on-dark:var(--cream-100);
  --shadow-soft:0 4px 6px 0 rgba(0,0,0,0.1);
  --shadow-lift:0 2px 10px 0 rgba(0,0,0,0.1);

  --font-display:"Zalando Sans Expanded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Zalando Sans SemiExpanded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --h1-size:70px;--h1-line:74px;--h1-tracking:-0.01em;
  --h1-mobile-size:42px;--h1-mobile-line:42px;--h1-mobile-tracking:-0.01em;
  --h2-size:40px;--h2-line:46px;--h2-tracking:-0.01em;
  --h2-mobile-size:26px;--h2-mobile-line:30px;--h2-mobile-tracking:0em;
  --h3-mobile-size:18px;--h3-mobile-line:21px;--h3-mobile-tracking:0em;
  --p1-size:16px;--p1-line:21px;
  --p2-size:14px;--p2-line:20px;
  --p2-mobile-size:15px;--p2-mobile-line:21px;
  --caption-size:12px;--caption-line:18px;
  --eyebrow-size:12px;--eyebrow-line:1.5;--eyebrow-tracking:0.06em;

  --space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;
  --space-6:40px;--space-7:64px;--space-8:96px;--space-9:128px;--space-10:180px;
  --radius-sm:4px;--radius-md:4px;--radius-lg:4px;--radius:4px;
  --content-max:1200px;--container-pad:86px;--container-pad-mobile:24px;
}

@media (max-width:1024px){:root{--container-pad:40px;--space-10:112px;--space-9:88px;--space-8:64px;--space-7:48px}}
@media (max-width:640px){:root{--container-pad:24px;--space-10:80px;--space-9:64px;--space-8:48px;--space-7:40px;--space-6:32px}}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
#proof-strip > *{width:100%;max-width:var(--content-max);margin-left:auto;margin-right:auto}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-weight:400}
h1,h2,h3,.font-display{font-family:var(--font-display);font-weight:400;margin:0}
p,.font-body{font-family:var(--font-body);font-weight:400;margin:0}
h1{font-size:var(--h1-size);line-height:var(--h1-line);letter-spacing:var(--h1-tracking)}
h2{font-size:var(--h2-size);line-height:var(--h2-line);letter-spacing:var(--h2-tracking)}
p{font-size:var(--p1-size);line-height:var(--p1-line)}
a{color:var(--color-accent)}
a:hover{color:var(--color-accent-hover)}
img{max-width:100%}

@media (max-width:640px){
  h1{font-size:var(--h1-mobile-size);line-height:var(--h1-mobile-line);letter-spacing:var(--h1-mobile-tracking)}
  h2{font-size:var(--h2-mobile-size);line-height:var(--h2-mobile-line);letter-spacing:var(--h2-mobile-tracking)}
  h3{font-size:var(--h3-mobile-size);line-height:var(--h3-mobile-line);letter-spacing:var(--h3-mobile-tracking)}
  p{font-size:var(--p2-mobile-size);line-height:var(--p2-mobile-line)}
}

/* ---- Button ---- */
.btn{
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.4;
  border:none;
  border-radius:var(--radius-md);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:19px 32px;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
  text-decoration:none;
  box-sizing:border-box;
}
.btn-white{background-color:var(--color-surface);color:var(--color-accent)}
.btn-white:hover{background-color:#F8F8F8;color:var(--color-accent);box-shadow:var(--shadow-lift)}
.btn-primary{background-color:var(--color-accent);color:var(--color-on-accent)}
.btn-primary:hover{background-color:var(--color-accent-hover);color:var(--color-on-accent);box-shadow:var(--shadow-soft)}
.btn-full{width:100%;justify-content:center}

/* ---- Layout helpers ---- */
#hero-bleed{margin:var(--space-4) 0 0 0;border-radius:var(--radius)}
@media (max-width:640px){#hero-bleed{min-height:min(52vh,545px)}}
@media (max-width:900px){.closing-art{display:none}}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-track{animation:logo-scroll 38s linear infinite}
#logo-marquee:hover .logo-track{animation-play-state:paused}
@media (max-width:640px){.logo-track{animation-duration:26s;gap:var(--space-6)}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
#problem-img{width:100%}
@media (min-width:1025px){#problem-img{width:min(100%,420px);justify-self:end}}
@media (min-width:940px){#hero-bleed{margin:calc(-1 * var(--space-8) - 56px) calc(-1 * var(--container-pad)) -72px 0}}

/* Scroll reveal is driven by inline styles in main.js (per-element durations). */

/* ---- FAQ accordion ---- */
[data-faq-icon]{transition:transform 520ms cubic-bezier(.22,.61,.36,1)}
[data-faq-panel]{display:grid;grid-template-rows:0fr;transition:grid-template-rows 520ms cubic-bezier(.22,.61,.36,1)}
[data-faq-answer]{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--color-text-muted);padding:0;opacity:0;transition:opacity 400ms ease, padding 520ms cubic-bezier(.22,.61,.36,1)}
[data-faq][data-open="1"] [data-faq-icon]{transform:rotate(180deg)}
[data-faq][data-open="1"] [data-faq-panel]{grid-template-rows:1fr}
[data-faq][data-open="1"] [data-faq-answer]{opacity:1;transition-delay:140ms, 0ms;padding-top:var(--space-4);padding-bottom:20px}