/* =====================================================================
   CoroAmbra — Sanjaya-exact monochrome clone
   Fonts: Geist + Geist Mono · Theme: near-black / white / grays
   ===================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{text-decoration:none;color:inherit}
ul{list-style:none}
input{font:inherit}

/* ---------- Tokens ---------- */
:root{
  --bg:#010004;
  --bg-1:#1a1a1d;
  --bg-2:#212121;
  --bg-3:#323135;
  --text:#ffffff;
  --muted:#a8a8a8;
  --faint:#999999;
  --border:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.25);
  --overlay:rgba(1,1,1,0.25);

  --sans:'Geist','Inter',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;

  --maxw:1280px;
  --gutter:24px;
  --radius:20px;
  --radius-lg:24px;
  --sec-pad:clamp(80px,12vw,160px);

  --ease:cubic-bezier(0.2,0.8,0.2,1);
}

/* ---------- Base ---------- */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- Typography ---------- */
.h-display{
  font-weight:400;
  font-size:clamp(40px,4.4vw,56px);
  line-height:1;
  letter-spacing:-0.05em;
}
.h-section{
  font-weight:600;
  font-size:clamp(34px,5.2vw,64px);
  line-height:1.04;
  letter-spacing:-0.025em;
}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--muted);
}
.section-sub{
  color:var(--muted);
  font-size:clamp(15px,1.4vw,18px);
  max-width:56ch;
}
.center{text-align:center}
.center.section-sub,.center .section-sub{margin-inline:auto}
.mt-xl{margin-top:clamp(40px,6vw,80px)}

/* section header block */
.section-head{display:flex;flex-direction:column;gap:18px}
.section-head.center{align-items:center}
.section-head .eyebrow{order:2}
.section-head .h-section{order:3}
.section-head .section-sub{order:4;margin-top:4px}
.tick{order:1;display:block;width:1px;height:54px;background:linear-gradient(var(--border-strong),transparent)}
.section-head.center .tick{margin-bottom:6px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;line-height:1;
  font-size:14px;font-weight:500;
  padding:13px 22px;border-radius:12px;
  border:1px solid transparent;
  transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease),opacity .3s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn--pill{border-radius:999px}
.btn--sm{padding:10px 16px;font-size:13px}
.btn--xs{padding:8px 14px;font-size:12px}
.btn--block{display:flex;width:100%;justify-content:center}
.btn--light{background:var(--text);color:#000;border-color:var(--text)}
.btn--light:hover{background:#eee}
.btn--dark{background:var(--bg-1);color:var(--text);border:1px solid var(--border)}
.btn--dark:hover{background:var(--bg-3);border-color:var(--border-strong)}
.nav__cta{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:12px 22px;font-size:15px;font-weight:500;backdrop-filter:blur(6px);transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
.nav__cta:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2)}
.ico-arrow{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .ico-arrow{transform:translateX(3px)}

.pill{display:inline-flex;align-items:center;border-radius:999px}
/* Label pill — shared by hero ("WE AUTOMATE…") and section eyebrows ("OUR WORKS").
   Sanjaya: 6px/10px padding, square, ~transparent white BG + 2px left divider line. */
.pill--label{
  position:relative;
  border-radius:0;border:none;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;line-height:1;
  color:#fff;padding:6px 10px;
  background:rgba(255,255,255,.07);
}
.pill--label::before{                 /* the vertical divider at the very start (left) */
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,.25);
}
.hero__headline .pill--label{align-self:flex-start}

/* ---------- Placeholders (media to attach later) ---------- */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 12px,transparent 12px 24px),
    var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.28);
  font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  overflow:hidden;
}
.ph--image{aspect-ratio:4/3;width:100%}
.ph--banner{border-radius:0}
.ph--avatar{width:46px;height:46px;border-radius:999px;font-size:0;flex:0 0 auto}
.ph--logo{width:120px;height:40px;border-radius:8px;font-size:9px}
.ph--chip{width:120px;height:64px;border-radius:14px;flex:0 0 auto;font-size:9px}
.ph--object{width:200px;height:200px;border-radius:18px}

/* ---------- Reveal animation ---------- */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0s);
}
[data-reveal].is-visible{opacity:1;transform:none}
/* staggered / word containers: parent shows as a layout box, children animate */
[data-reveal].is-container{opacity:1;transform:none;transition:none}
.reveal-child{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--cd,0s);
}
.reveal-child.is-visible{opacity:1;transform:none}
.reveal-word{display:inline-block;white-space:pre}
@media (prefers-reduced-motion:reduce){
  [data-reveal],.reveal-child{opacity:1;transform:none;transition:none}
}

/* =====================================================================
   NAVBAR
   ===================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:18px 0;
  background:rgba(255,255,255,0.018);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:transform .6s var(--ease),background .55s var(--ease),backdrop-filter .55s var(--ease),padding .45s var(--ease),border-color .55s var(--ease);
  will-change:transform;
}
.nav.is-scrolled{
  padding:14px 0;
  background:rgba(4,4,8,0.26);
  backdrop-filter:blur(22px) saturate(1.25);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  border-bottom:1px solid var(--border);
}
.nav.is-hidden{transform:translateY(-100%)}
.nav__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav__brand{display:inline-flex;align-items:center;gap:10px}
.nav__mark{height:26px;width:auto;filter:brightness(0) invert(1)}
.nav__wordmark{height:20px;width:auto;filter:brightness(0) invert(1)}
.nav__links{display:flex;gap:34px}
.nav__links a{
  font-size:16px;color:#fff;letter-spacing:-.02em;position:relative;padding:4px 0;
  transition:opacity .2s;opacity:.92;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--text);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav__burger span{width:22px;height:2px;background:var(--text);display:block;transition:.25s}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:90;visibility:hidden;}
.drawer.is-open{visibility:visible}
.drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.drawer.is-open .drawer__backdrop{opacity:1}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(82vw,360px);
  background:var(--bg-1);border-left:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;padding:90px 28px 28px;
  transform:translateX(100%);transition:transform .3s var(--ease);
}
.drawer.is-open .drawer__panel{transform:none}
.drawer__panel a{padding:14px 0;font-size:20px;border-bottom:1px solid var(--border)}
.drawer__panel .btn{margin-top:18px;justify-content:center}
.drawer__close{position:absolute;top:24px;right:24px;font-size:30px;line-height:1;color:var(--muted)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;overflow:hidden}
.hero__bg{position:absolute;inset:-8% 0 0 0;z-index:0;will-change:transform}
/* Static hero: full original HeroIMG, edge to edge (object-fit:cover fills corner to corner).
   hero.jpg is a plain 2560-wide resize of Branding-CoroAmbra/HeroIMG.png (no compositing). */
.hero__bg img{width:100%;height:116%;object-fit:cover;object-position:center 42%}
/* Sanjaya-exact hero scrim: fixed (not parallaxed) so the solid #010004 bottom always
   aligns with the hero edge and blends seamlessly into the next section */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#01000480 0%,#01000433 25%,#01000433 50%,#01000480 75%,#010004 100%);
}
.hero__inner{
  position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-top:112px;padding-bottom:56px;min-height:100svh;
}
.hero__eyebrows{display:flex;flex-direction:column;gap:12px;font-family:var(--mono);font-size:12px;font-weight:400;color:#fff;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.hero__lead{
  position:absolute;top:102px;right:var(--gutter);max-width:305px;
  font-size:18px;color:#fff;text-align:right;line-height:1.4;letter-spacing:-.04em;
}
.hero__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.hero__headline{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
/* hero H1 shrunk (Malik): the new copy is longer than "Clear. Precise. Automated." so 56px ate too much space */
.hero__headline .h-display{max-width:9em;font-size:clamp(34px,3.6vw,46px)}

/* person card */
.person{
  display:flex;align-items:center;gap:18px;
  background:var(--bg-1);border:1px solid var(--border);
  border-radius:14px;padding:8px;
}
.person__avatar{width:52px;height:52px;border-radius:12px;flex:0 0 auto}
.person__col{display:flex;flex-direction:column;gap:5px;line-height:1.25}
.person__name{font-size:16px;font-weight:500}
.person__role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.person__cta{margin-top:10px;border-radius:8px}   /* sleek small rounded corners, not a full pill */
/* FAQ advisor card: larger square avatar (Sanjaya), card sits under the heading */
.person--stack{margin-top:40px;display:inline-flex}
.person--stack .person__avatar{width:104px;height:104px;border-radius:10px;border:1px solid rgba(255,255,255,.04)}   /* BIG square nearly filling the card; card padding 8 = thin gap to edges */

/* =====================================================================
   TRUST
   ===================================================================== */
/* Faithful Sanjaya "Logos" grid — 5x2 bordered cells, hover nudges the box up-right 8px */
.trust{background:var(--bg);padding:100px 0}
.trust__container{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:1240px}
.trust .eyebrow{margin:0}
.trust__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(200px,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  justify-content:center;
  gap:0;
  width:100%;
  overflow:visible;
}
.trust__cell{
  position:relative;
  height:110px;
  display:block;
  cursor:pointer;
  background:var(--bg-1);            /* grey grid revealed beneath the box on hover (Sanjaya rgb(26,26,29)) */
}
.trust__cell:hover{z-index:5}
.trust__box{
  position:absolute;top:0;left:0;
  width:100%;height:110px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  border:1px solid var(--bg-2);
  transition:top 1.05s cubic-bezier(0.16,1,0.3,1),left 1.05s cubic-bezier(0.16,1,0.3,1);
}
.trust__cell:hover .trust__box{top:-8px;left:8px}
.trust__logo{
  width:auto;max-width:62%;height:32px;
  object-fit:contain;
  filter:brightness(0) invert(.62);          /* uniform muted-grey monochrome mark */
  opacity:.9;
  transition:filter .4s ease,opacity .4s ease;
}
/* Cal.com is a wide wordmark whose ink fills only ~1/5 of its square viewBox — size it up so it reads */
.trust__logo--wordmark{height:84px;max-width:80%}
.trust__cell:hover .trust__logo{filter:brightness(0) invert(.92);opacity:1}
.trust__note{
  margin-top:10px;
  max-width:600px;
  text-align:center;
  font-size:11px;line-height:1.5;letter-spacing:.01em;
  color:rgba(255,255,255,.26);
}
@media (max-width:1024px){
  .trust{padding:64px 0}
  .trust__grid{grid-template-columns:repeat(4,minmax(150px,1fr));grid-template-rows:none;grid-auto-rows:110px}
}
@media (max-width:768px){
  .trust__grid{grid-template-columns:repeat(2,minmax(140px,1fr));grid-auto-rows:110px}
}

/* =====================================================================
   PAIN POINTS
   ===================================================================== */
/* Sanjaya "Pain point": a tall section whose sticky child pins for 250vh while
   5 chips reveal 1-by-1 (scroll-scrubbed) and decorative arc-rings rotate. */
.pain{background:var(--bg);position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.pain__sticky{
  position:sticky;top:0;
  width:100%;max-width:1440px;height:100vh;
  padding:0 20px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  overflow:hidden;
  -webkit-mask:linear-gradient(rgba(0,0,0,0) 0%,#000 16.88%,#000 80.13%,rgba(0,0,0,0) 100%);
          mask:linear-gradient(rgba(0,0,0,0) 0%,#000 16.88%,#000 80.13%,rgba(0,0,0,0) 100%);
}
.pain__trigger{flex:0 0 auto;width:100%;height:50vh}

/* ---- rotating arc rings (4 nested circles, conic-masked so only arcs show) ---- */
.pain__circles{
  position:absolute;top:50%;left:50%;
  width:min(1200px,128vmin);height:min(1200px,128vmin);
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:0;
  -webkit-mask:linear-gradient(rgba(0,0,0,0) 0%,#000 20%,#000 79%,rgba(0,0,0,0) 100%);
          mask:linear-gradient(rgba(0,0,0,0) 0%,#000 20%,#000 79%,rgba(0,0,0,0) 100%);
}
.pain__ring{
  position:absolute;top:50%;left:50%;
  aspect-ratio:1/1;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;
  transform:translate(-50%,-50%);will-change:transform;
}
.pain__ring--s {width:46%;-webkit-mask:conic-gradient(#000 0deg,rgba(0,0,0,0) 89deg);mask:conic-gradient(#000 0deg,rgba(0,0,0,0) 89deg);animation:painSpinCW 18s linear infinite}
.pain__ring--m {width:61%;-webkit-mask:conic-gradient(from 180deg,rgba(0,0,0,.25) 0deg,rgba(0,0,0,0) 180deg);mask:conic-gradient(from 180deg,rgba(0,0,0,.25) 0deg,rgba(0,0,0,0) 180deg);animation:painSpinCCW 24s linear infinite}
.pain__ring--l {width:75%;-webkit-mask:conic-gradient(from 275deg,rgba(0,0,0,.6) 0deg,rgba(0,0,0,0) 112deg);mask:conic-gradient(from 275deg,rgba(0,0,0,.6) 0deg,rgba(0,0,0,0) 112deg);animation:painSpinCW 30s linear infinite}
.pain__ring--xl{width:93%;-webkit-mask:conic-gradient(from 100deg,rgba(0,0,0,.5) 0deg,rgba(0,0,0,0) 72deg);mask:conic-gradient(from 100deg,rgba(0,0,0,.5) 0deg,rgba(0,0,0,0) 72deg);animation:painSpinCCW 38s linear infinite}
@keyframes painSpinCW {from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes painSpinCCW{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}

/* ---- chips (revealed 1-by-1 by JS scroll progress) ---- */
.pain__text{position:absolute;inset:0;z-index:1}
.pain__chip{
  position:absolute;
  display:inline-flex;align-items:center;gap:16px;white-space:nowrap;
  padding:12px;border-radius:12px;
  background:var(--bg-1);border:1px solid var(--border);
  font-size:18px;font-weight:400;letter-spacing:-.04em;line-height:1.2;color:#fff;
  transform:translate(-50%,-50%) scale(.5);opacity:0;
  will-change:transform,opacity;
}
.pain__dot{flex:0 0 auto;width:8px;height:8px;border-radius:2px;background:var(--bg-3)}

/* ---- headline (the thin, clean Geist 32/400 — exact Sanjaya preset) ---- */
.pain__title{
  position:relative;z-index:2;
  width:100%;max-width:440px;text-align:center;text-wrap:balance;
  font-size:clamp(28px,3.6vw,48px);font-weight:400;letter-spacing:-.05em;line-height:1;color:#fff;
}

@media (prefers-reduced-motion:reduce){
  .pain__chip{opacity:1;transform:translate(-50%,-50%)}
  .pain__ring{animation:none}
}

/* =====================================================================
   OUR WORKS
   ===================================================================== */
/* Sanjaya "Our works" wrapper sits 100px below the pain section (no tick line) */
.works{padding:clamp(64px,8vw,100px) 0}
.works .section-head{margin-bottom:48px}
/* header matched to Sanjaya: 600px centered block, pill→8px→thin 48/400 headline→24px→16/400 subline */
.works .section-head{gap:0;max-width:600px;margin-inline:auto}
.works .section-head .pill--label{order:2;margin-bottom:8px}
.works .section-head .h-section{
  order:3;margin-bottom:24px;
  font-weight:400;font-size:clamp(28px,4vw,48px);line-height:1;letter-spacing:-.05em;
}
.works .section-head .section-sub{
  order:4;margin-top:0;max-width:none;text-align:center;
  font-size:16px;font-weight:400;line-height:1.4;letter-spacing:-.02em;color:var(--muted);
}
/* Sticky-stacking cards: each ~80vh so ONE fills the view, pins at top:100px, next scrolls up over it (Sanjaya gap 120px) */
.cases{display:flex;flex-direction:column;gap:120px}
.case{
  position:sticky;top:100px;
  display:grid;grid-template-columns:1fr 1.08fr;gap:0;
  background:var(--bg-1);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;height:80vh;max-height:800px;min-height:480px;
  transform-origin:50% 0%;will-change:transform,filter;
}
.case__media{border:none;border-radius:0;aspect-ratio:auto;height:100%;min-height:0}
/* Sanjaya distributes the card content: meta+logo pinned TOP, the title/desc/button/stats grouped at
   the BOTTOM (big gap between). `.case__title{margin-top:auto}` absorbs the free space to do this. */
.case__body{padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:flex-start;gap:18px}
.case__meta{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--border)}
.dot{width:3px;height:3px;border-radius:999px;background:var(--muted);display:inline-block}
.case__logo{background:none;border:none;justify-content:flex-start;color:rgba(255,255,255,.5);height:30px;width:auto;letter-spacing:.1em}
/* title = Sanjaya preset kg2izs: Geist 38/400/-.05em/lh1.2 (was a heavy 600/34) */
.case__title{margin-top:auto;font-size:clamp(26px,2.9vw,38px);font-weight:400;letter-spacing:-.05em;line-height:1.2}
/* desc = preset gaenl2: 16/400/lh1.4/-.02em/muted (was 15) */
.case__sub{color:var(--muted);font-size:16px;line-height:1.4;letter-spacing:-.02em;max-width:46ch}
.case .btn{align-self:flex-start;margin-top:4px}
.case__stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:24px;border-top:1px solid var(--border)}
/* stat number = same preset kg2izs as the title: 38/400/-.05em (was 600/44) */
.stat-num{display:block;font-size:clamp(26px,2.9vw,38px);font-weight:400;letter-spacing:-.05em}
.stat-cap{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
/* Sanjaya "How it works" uses the SAME Heading component as Our Works (no tick line); moved up like works */
.how{padding:clamp(64px,8vw,100px) 0}
/* header matched to Sanjaya: 600px centered block, pill→8px→thin 48/400 headline→24px→16/400 subline */
.how .section-head{margin-bottom:48px;gap:0;max-width:600px;margin-inline:auto}
.how .section-head .pill--label{order:2;margin-bottom:8px}
.how .section-head .h-section{
  order:3;margin-bottom:24px;
  font-weight:400;font-size:clamp(28px,4vw,48px);line-height:1;letter-spacing:-.05em;
}
.how .section-head .section-sub{
  order:4;margin-top:0;max-width:none;text-align:center;
  font-size:16px;font-weight:400;line-height:1.4;letter-spacing:-.02em;color:var(--muted);
}
.how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
/* Sanjaya step card: column, 24px media→text gap, cards rise from a staggered offset (see main.js 8d) */
.step{display:flex;flex-direction:column;align-items:flex-start;gap:24px;will-change:transform}
.step__media{width:100%;aspect-ratio:1.04737/1;border-radius:8px;border:1px solid var(--border);filter:grayscale(1)}
.step__text{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* title preset 5x8c5w: Geist 24/400/-.05em/lh120%/white (number same white), Geist char variants for premium glyphs */
.step__title{font-size:24px;font-weight:400;letter-spacing:-.05em;line-height:1.2;color:var(--text);font-feature-settings:"cv03" 1,"cv04" 1,"cv09" 1,"cv11" 1}
/* desc preset gaenl2: 16/400/lh1.4/-.02em/muted (same as section sublines) */
.step__desc{color:var(--muted);font-size:16px;font-weight:400;line-height:1.4;letter-spacing:-.02em}

/* =====================================================================
   INTEGRATION MARQUEE
   ===================================================================== */
.integ{padding:var(--sec-pad) 0 clamp(50px,7vw,90px)}
.integ .section-head{margin-bottom:clamp(48px,6vw,72px)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);padding:10px 0}
.marquee__track{display:flex;gap:18px;width:max-content;animation:marquee 38s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse;animation-duration:46s}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =====================================================================
   SERVICES
   ===================================================================== */
.services{padding:var(--sec-pad) 0}
/* Sanjaya services row: 1240 container, 80px gap; cards column is the wider one (head ~37% / cards ~63%) */
.services__grid{display:grid;grid-template-columns:0.72fr 1.28fr;gap:80px;align-items:start}
.services__head{position:sticky;top:120px;display:flex;flex-direction:column;gap:0}
/* SERVICES header = same Sanjaya Heading preset as Our Works (10kpn8m / gaenl2) but LEFT-aligned; no tick */
.services__head .pill--label{align-self:flex-start;margin-bottom:8px}
.services__head .h-section{
  margin-bottom:24px;text-align:left;
  font-weight:400;font-size:clamp(28px,4vw,48px);line-height:1;letter-spacing:-.05em;
}
.services__head .section-sub{
  margin-top:0;max-width:none;text-align:left;
  font-size:16px;font-weight:400;line-height:1.4;letter-spacing:-.02em;color:var(--muted);
}
.services__list{display:flex;flex-direction:column;gap:22px}
/* Sanjaya service card = bg #1a1a1d, 1px white-10% border, radius 12px (sleek, not 24); text column (left) + media (right).
   Entrance (slide-from-right + de-blur + brighten) is scroll-scrubbed in main.js "8e". No inner row hover. */
/* Sanjaya: card padding 16 (= the THIN image frame); text block has its OWN 16 padding (text sits at 32);
   text + image both flex:1 (≈50/50); image align-self:stretch so card HEIGHT is content-driven (no min-height). */
.service{
  display:flex;flex-direction:row;align-items:stretch;gap:24px;
  background:var(--bg-1);border:1px solid var(--border);border-radius:12px;
  padding:16px;overflow:hidden;
}
.service__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;gap:73px;padding:16px}
.service__head2{display:flex;flex-direction:column;align-items:flex-start}
.service__idx{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;line-height:1.2;color:var(--muted)}
/* title preset 1kcu2xp: Geist 24/400/-.05em/lh120%/white */
.service__title{font-size:clamp(22px,1.9vw,24px);font-weight:400;letter-spacing:-.05em;line-height:1.2;color:var(--text);margin-top:14px}
/* sub preset gaenl2: 16/400/lh1.4/-.02em/muted */
.service__sub{color:var(--muted);font-size:16px;font-weight:400;line-height:1.4;letter-spacing:-.02em;margin-top:8px}
/* rows preset yne2n5: Geist Mono 12/400/.08em/uppercase/muted, divider #323135 BETWEEN rows only (no box, no hover) */
.service__rows{list-style:none;display:flex;flex-direction:column}
.service__rows li{
  font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:13px 0;
}
.service__rows li:first-child{padding-top:0}
.service__rows li:last-child{padding-bottom:0}
.service__rows li + li{border-top:1px solid var(--bg-3)}
/* image mask: flex:1 (≈50%), stretches to card height, 1px white-10% border, thin 8px radius */
.service__media{flex:1 1 0;align-self:stretch;width:auto;aspect-ratio:auto;min-height:0;border:1px solid var(--border);border-radius:8px;filter:grayscale(1)}

/* =====================================================================
   WHY US
   ===================================================================== */
/* Sanjaya "Why us" wrapper padding is 64px top/bottom (was var(--sec-pad)) -> shortens the gap from SERVICES + moves the whole section (bg included, since .why__bg is inset:0) up */
.why{position:relative;padding:64px 0;overflow:hidden}
/* Sanjaya WHY-US bg: same atmospheric landscape as the hero, VERTICAL mask that fades to 0 at
   top+bottom and peaks at only 0.2 alpha (= the exact dim) so it blends seamlessly into the black. */
.why__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  -webkit-mask:linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 53.43%, rgba(0,0,0,0) 100%);
  mask:linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 53.43%, rgba(0,0,0,0) 100%);
}
.why__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 64%}
.why .container{position:relative;z-index:2}
/* header = same Sanjaya Heading preset as Our Works (10kpn8m / gaenl2), centered; heading is NOT
   width-clamped so it stays ONE line like Sanjaya, only the (longer) sub is constrained */
.why .section-head{margin-bottom:clamp(44px,5vw,64px);gap:0;max-width:none}
.why .section-head .pill--label{order:2;margin-bottom:8px}
.why .section-head .h-section{
  order:3;margin-bottom:24px;
  font-weight:400;font-size:clamp(28px,4vw,48px);line-height:1;letter-spacing:-.05em;
}
.why .section-head .section-sub{
  order:4;margin-top:0;max-width:620px;text-align:center;
  font-size:16px;font-weight:400;line-height:1.4;letter-spacing:-.02em;color:var(--muted);
}
/* Sanjaya comparison table: MINIMAL + TRANSPARENT (landscape shows through), thin grid lines,
   narrow label column, all text white Geist 16/400 (normal case), subtle highlight on the us column. */
.compare{border:1px solid var(--border);border-radius:0;overflow:hidden;background:transparent}
.compare__head,.compare__row{display:grid;grid-template-columns:0.66fr 1fr 1fr 1fr}
.compare__row{border-top:1px solid var(--border)}
.compare__rowlabel,.compare__col{
  padding:22px clamp(16px,1.7vw,26px);display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:400;letter-spacing:-.01em;color:var(--text);
  border-right:1px solid var(--border);
}
.compare__head .compare__rowlabel,.compare__head .compare__col{padding-top:26px;padding-bottom:26px}
.compare__rowlabel{color:var(--muted)}                 /* row labels slightly dimmer than values */
.compare__col:last-child{border-right:none}
.compare__col--us{background:rgba(255,255,255,.04)}     /* subtle highlight spanning the us column */
.compare__logo{height:20px;width:auto;filter:brightness(0) invert(1)}
/* sleek line markers (Sanjaya: 24-viewBox, stroke-width 1.5, muted) before each value */
.mk{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.compare__col--us .mk{stroke:rgba(255,255,255,.9)}      /* the us ticks read a touch brighter */

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testi{padding:var(--sec-pad) 0}
.testi .section-head{margin-bottom:clamp(48px,6vw,80px)}
.testi__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tcard{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(26px,2.5vw,36px);display:flex;flex-direction:column;gap:24px;transition:transform .35s var(--ease),border-color .35s}
.tcard:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.tcard__logo{background:none;border:none;justify-content:flex-start;color:rgba(255,255,255,.5);height:26px;width:auto}
.tcard__quote{font-size:17px;line-height:1.55;flex:1}
.tcard__person{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--border)}
.tcard__name{display:block;font-size:14px;font-weight:500}
.tcard__role{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* =====================================================================
   STATS
   ===================================================================== */
.stats{padding:clamp(60px,9vw,120px) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.statblock{display:flex;flex-direction:column;gap:10px;text-align:left}
.statblock__num{font-size:clamp(48px,6vw,82px);font-weight:600;letter-spacing:-0.03em;line-height:1}
.statblock__cap{color:var(--muted);font-size:15px}

/* =====================================================================
   PRICING
   ===================================================================== */
.pricing{padding:var(--sec-pad) 0}
.pricing .section-head{margin-bottom:34px}
.toggle{position:relative;display:inline-flex;margin:0 auto 56px;left:50%;transform:translateX(-50%);background:var(--bg-1);border:1px solid var(--border);border-radius:999px;padding:5px}
.toggle__opt{position:relative;z-index:2;padding:10px 22px;border-radius:999px;font-size:14px;color:var(--muted);transition:color .25s}
.toggle__opt.is-active{color:#000}
.toggle__knob{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:var(--text);border-radius:999px;transition:transform .32s var(--ease)}
.toggle[data-period="yearly"] .toggle__knob{transform:translateX(100%)}
.toggle__badge{position:absolute;right:-46px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--muted);opacity:0;transition:opacity .25s}
.toggle[data-period="yearly"] .toggle__badge{opacity:1}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.plan{position:relative;background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(28px,2.6vw,38px);display:flex;flex-direction:column;gap:18px;transition:border-color .3s,transform .3s var(--ease)}
.plan:hover{border-color:var(--border-strong);transform:translateY(-4px)}
.plan--popular{border-color:var(--border-strong);background:var(--bg-2);transform:translateY(-14px)}
.plan--popular:hover{transform:translateY(-18px)}
.plan__badge{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#000;background:var(--text);padding:5px 12px;border-radius:999px}
.plan__name{font-size:20px;font-weight:600}
.plan__tagline{color:var(--muted);font-size:14px;min-height:40px}
.plan__price{display:flex;align-items:baseline;gap:6px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.plan__amt{font-size:clamp(38px,4vw,52px);font-weight:600;letter-spacing:-0.03em}
.plan__per{color:var(--muted);font-size:15px}
.plan__guarantee{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.plan__feats{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.plan__feats li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted)}
.plan__feats li::before{content:"\2713";color:var(--text);flex:0 0 auto}

/* =====================================================================
   BLOG
   ===================================================================== */
.blog{padding:var(--sec-pad) 0}
.blog__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(40px,5vw,64px)}
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{display:flex;flex-direction:column;gap:16px;cursor:pointer}
.post__media{aspect-ratio:3/4;border-radius:var(--radius);transition:transform .4s var(--ease)}
.post:hover .post__media{transform:scale(1.015)}
.post__meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post__title{font-size:19px;font-weight:500;line-height:1.3}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{padding:var(--sec-pad) 0}
/* whole FAQ slightly smaller than before: narrower content + gentler gap (Malik: "make it slightly smaller") */
.faq__grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(36px,5vw,80px);align-items:start;max-width:1100px;margin-inline:auto}
/* header = pill + thin Geist LEFT heading (preset 10kpn8m), no tick; advisor card below */
.faq__head{position:sticky;top:120px;display:flex;flex-direction:column;gap:0}
.faq__head .pill--label{align-self:flex-start;margin-bottom:22px}
.faq__head .h-section{font-weight:400;font-size:clamp(26px,3.6vw,46px);line-height:1.05;letter-spacing:-.05em;text-align:left}
/* accordion bars: bg #1a1a1d, radius 8, gap 10, question 17 (slightly smaller) */
.faq__list{display:flex;flex-direction:column;gap:10px}
.faq__item{background:var(--bg-1);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.faq__q{width:100%;background:none;border:0;cursor:pointer;color:var(--text);font-family:inherit;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;font-size:17px;font-weight:400;letter-spacing:-.01em}
/* + icon that rotates to × on open (was +/-); thin sleek bars; motion-blur pulse while toggling */
/* + that VERY SLOWLY rotates to × (core anim) with only a VERY SUBTLE blur (Malik: blur was too much+fast) */
.faq__icon{position:relative;width:16px;height:16px;flex:0 0 auto;transition:transform .9s cubic-bezier(0.45,0,0.25,1)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:1.5px;background:var(--muted);transform:translate(-50%,-50%)}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item.is-open .faq__icon{transform:rotate(45deg)}
@keyframes faqIconBlur{0%,100%{filter:blur(0)}50%{filter:blur(0.9px)}}
.faq__item.is-animating .faq__icon{animation:faqIconBlur .9s var(--ease)}
/* animated panel: JS drives height (slower); inner content blurs IN on open / OUT on close (slower) */
/* ease-in-out (even, not front-loaded) + longer = genuinely slow open/close (Malik: still felt fast) */
.faq__a{height:0;overflow:hidden;transition:height 1s cubic-bezier(0.45,0,0.25,1)}
.faq__a-inner{padding:0 18px 18px;color:var(--muted);font-size:16px;line-height:1.55;
  filter:blur(8px);opacity:0;transition:filter 1.1s cubic-bezier(0.45,0,0.25,1),opacity .9s cubic-bezier(0.45,0,0.25,1)}
.faq__item.is-open .faq__a-inner{filter:blur(0);opacity:1}

/* =====================================================================
   FINAL CTA
   ===================================================================== */
.cta{position:relative;padding:var(--sec-pad) 0;overflow:hidden;text-align:center}
/* Sanjaya FINAL-CTA banner: same atmospheric landscape, but its OWN mask (NOT the Why-Us 0.2 one).
   Exact scrape value (framer-11hrnea): 0deg gradient peaking 0.5 alpha @39% (lower third = landscape
   shows most) -> 0.3 @64% -> fades to 0 at top(100%)+bottom(0%). The mask IS the dim; no extra overlay. */
.cta__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  -webkit-mask:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 39%, rgba(0,0,0,.3) 64%, rgba(0,0,0,0) 100%);
  mask:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 39%, rgba(0,0,0,.3) 64%, rgba(0,0,0,0) 100%);
}
.cta__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* Sanjaya CTA stack: max-width 600px centered. Exact framer gaps (gap:0 + margins):
   the sub is a child of the Heading block (framer-3w2bh4, gap 24) along with pill+h2, so
   pill -> heading 24px AND heading -> sub 24px; then sub -> button 48px (Content block, framer-6ywni9). */
.cta__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0;max-width:600px;width:100%;margin-inline:auto}
.cta__inner .pill--label{margin-bottom:24px}
/* heading = Sanjaya preset 10kpn8m: thin Geist 400, clamp(28,4vw,48), lh100%, -.05em, center.
   balanced wrap -> "Ready to Refine" / "Your Workflow?" like Sanjaya (not the heavy base .h-section). */
.cta__inner .h-section{
  font-weight:400;
  font-size:clamp(28px,4vw,48px);
  line-height:1;
  letter-spacing:-.05em;
  max-width:none;
  margin-bottom:24px;
  text-wrap:balance;
}
/* sub = Sanjaya preset gaenl2: Geist 16/400, lh140%, -.02em, muted, balanced 2-line wrap. */
.cta__inner .section-sub{
  font-size:16px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:-.02em;
  color:var(--muted);
  max-width:none;
  margin:0 0 48px;
  text-wrap:balance;
}
/* button = Sanjaya White button: 8px radius (base .btn is 12px), no arrow icon. */
.cta__inner .btn--light{border-radius:8px}

/* =====================================================================
   FOOTER
   ===================================================================== */
/* No top border: Sanjaya's footer has no hairline — the CTA banner's mask fades to 0 at the bottom
   (same as the top fade-in) so it blends straight into the footer black both ways. */
.footer{padding-top:clamp(70px,9vw,120px);background:linear-gradient(var(--bg),#000)}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:50px}
.footer__brand .nav__wordmark{height:18px}
/* footer wordmark uses the SAME font as the hero H1 = Sanjaya footer preset 10kpn8m: thin Geist 400,
   -.05em, lh1 (was a heavy 600 — Malik: must match the hero typeface). */
.footer__wordmark{font-size:clamp(28px,4vw,48px);font-weight:400;letter-spacing:-0.05em;margin-top:24px;line-height:1}
/* Static 3D glass CA mark in the footer brand column (Sanjaya footer = a 350x350 rotating-S mp4; we use
   a static glossy mark). Sized DOWN so the brand column bottom aligns with the right column's bottom. */
.footer__object{position:relative;margin-top:36px;width:100%;max-width:240px;aspect-ratio:1/1}
.footer__object img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block}
/* NAVIGATION label -> links gap = Sanjaya framer-jktjbn 24px */
.footer__col .eyebrow{margin-bottom:24px}
.footer__col nav{display:flex;flex-direction:column;gap:16px}
/* nav links = Sanjaya preset gaenl2: 16/400, -.02em, lh1.4, muted (was 15px); list gap 16 (framer-wz6nl6) */
.footer__col nav a{color:var(--muted);font-size:16px;letter-spacing:-.02em;line-height:1.4;transition:color .2s;width:fit-content}
.footer__col nav a:hover{color:var(--text)}
/* contact labels (SOCIALS/EMAIL/PHONE/SUBSCRIBE): Sanjaya label->value gap is just 8px (framer-1226crs
   /18t89fc/11g6orr all gap 8) — NOT the 24px nav gap. 30px between blocks. */
.footer__contact .eyebrow{margin-top:30px;margin-bottom:8px}
.footer__contact .eyebrow:first-child{margin-top:0}
/* Sanjaya drops the Newsletter into its own lower block (big gap after Phone) so it sits near the
   column bottom; we mirror that, which also realigns the glass logo's bottom with the newsletter. */
.footer__contact .eyebrow--news{margin-top:88px}
.footer__socials{display:flex;gap:10px}
/* Sanjaya social tiles = rounded SQUARES with a subtle fill + white brand icon (was lettered circles) */
.soc{width:40px;height:40px;border-radius:9px;background:var(--bg-1);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.soc img{width:17px;height:17px;filter:brightness(0) invert(1);opacity:.85;transition:opacity .3s}
.soc:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.soc:hover img{opacity:1}
/* email + phone = Sanjaya jv5lnj: white, 20px, weight 400. margin-top:0 -> label->value gap is the
   label's 8px margin-bottom only (Malik: value was sitting too far from the tag). */
.footer__big{display:block;font-size:20px;font-weight:400;color:var(--text);letter-spacing:-.02em;margin-top:0}
.footer__phone{display:block;font-size:20px;font-weight:400;color:var(--text);letter-spacing:-.02em;margin-top:0}
/* SUBSCRIBE label(8) + newsletter(8) = 16px to the field (Sanjaya framer-1kuo4u1 gap 16) */
.newsletter{display:flex;gap:8px;margin-top:8px;background:var(--bg-1);border:1px solid var(--border);border-radius:10px;padding:5px;max-width:360px}
.newsletter input{flex:1;background:none;border:none;color:var(--text);padding:9px 12px;font-size:14px;outline:none}
.newsletter input::placeholder{color:var(--faint)}
.newsletter .btn{padding:9px 18px;font-size:13px;border-radius:7px}
/* bottom bar aligned under the Navigation -> right columns (NOT under the brand/glass logo): the
   divider line + copyright span only cols 2..3 of the footer grid, so the line no longer runs full-width. */
.footer__bottom{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:50px;margin-top:clamp(50px,7vw,90px)}
/* divider -> copyright text gap = Sanjaya framer-gibxqf padding 16px 0 (was 26px, Malik: text too far from line) */
.footer__bottom-inner{grid-column:2 / -1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--border);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .services__grid,.faq__grid{grid-template-columns:1fr}
  .services__head,.faq__head{position:static}
  .case{grid-template-columns:1fr}
  .case__media{min-height:300px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__bottom{grid-template-columns:1fr}
  .footer__bottom-inner{grid-column:1 / -1}
}
@media (max-width:768px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .hero__lead{position:static;text-align:left;max-width:100%;margin-top:24px}
  .hero__inner{padding-top:120px}
  .hero__bottom{flex-direction:column;align-items:flex-start;gap:28px}
  .how__grid,.testi__grid,.blog__grid,.plans{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr 1fr;gap:40px 20px}
  .plan--popular{transform:none}
  .plan--popular:hover{transform:translateY(-4px)}
  .compare{overflow-x:auto}
  .compare__head,.compare__row{grid-template-columns:1fr;min-width:0}
  .compare__head{display:none}
  .compare__row{padding:6px 0}
  .compare__rowlabel{padding-bottom:0}
  .blog__head{flex-direction:column;align-items:flex-start}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .toggle__badge{position:static;transform:none;margin-left:10px;display:inline}
}

/* =====================================================================
   LEGAL PAGES (privacy.html, terms.html): static, self-contained,
   no JS / no data-reveal. Reuses tokens, .nav__brand/.nav__wordmark,
   .btn/.nav__cta, .pill--label and the whole .footer.
   ===================================================================== */
.legal-nav{
  position:sticky;top:0;z-index:80;
  padding:16px 0;
  background:rgba(4,4,8,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.legal-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}

.legal{padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,72px)}
.legal__wrap{max-width:820px}
.legal__back{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);transition:color .2s;display:inline-block;margin-bottom:28px;
}
.legal__back:hover{color:var(--text)}
.legal__title{
  font-weight:400;font-size:clamp(36px,5vw,56px);line-height:1.02;letter-spacing:-.05em;
  margin:18px 0 14px;
}
.legal__meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.legal__intro{
  color:rgba(255,255,255,.82);font-size:clamp(16px,1.5vw,18px);line-height:1.7;
  max-width:70ch;margin-top:28px;
}

/* slim table of contents */
.legal__toc{
  margin:40px 0 8px;padding:22px 24px;
  background:var(--bg-1);border:1px solid var(--border);border-radius:14px;
}
.legal__toc p{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.legal__toc ul{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px}
.legal__toc a{color:rgba(255,255,255,.82);font-size:15px;line-height:1.4;transition:color .2s;display:inline-flex;gap:8px}
.legal__toc a span{color:var(--faint);font-variant-numeric:tabular-nums}
.legal__toc a:hover{color:var(--text)}

.legal__body{margin-top:8px}
.legal__section{padding-top:clamp(40px,5vw,64px);scroll-margin-top:90px}
.legal__section h2{
  font-weight:500;font-size:clamp(22px,2.4vw,28px);line-height:1.2;letter-spacing:-.03em;
  margin-bottom:18px;display:flex;gap:14px;align-items:baseline;
}
.legal__section h2 span{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.06em;color:var(--faint)}
.legal__section h3{
  font-weight:500;font-size:17px;letter-spacing:-.01em;color:#fff;margin:26px 0 10px;
}
.legal__body p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.78;margin-bottom:16px;max-width:74ch}
.legal__body a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.legal__body a:hover{text-decoration-color:#fff}
.legal__body ul{margin:0 0 16px;padding-left:0;max-width:74ch}
.legal__body li{
  position:relative;color:rgba(255,255,255,.82);font-size:16px;line-height:1.7;
  padding-left:22px;margin-bottom:10px;
}
.legal__body li::before{
  content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;
  background:var(--border-strong);
}
.legal__body li strong{color:#fff;font-weight:500}
.legal__note{
  margin-top:14px;padding:16px 18px;background:var(--bg-1);border:1px solid var(--border);
  border-radius:12px;color:var(--muted);font-size:14px;line-height:1.6;
}
.legal__note p{color:var(--muted);font-size:14px;margin:0}
@media (max-width:640px){
  .legal__toc ul{grid-template-columns:1fr}
}