/* ═══════════════════════════════════════════════
   MangoStack — brand tokens
   Palette + type derived from the MangoStack deck.
   ═══════════════════════════════════════════════ */
:root{
  /* ── Core (Brand Guide v1.0) ──────────────────────────── */
  --forest:     #3E5A47;   /* Deep Forest */
  --amber:      #B0812E;   /* Amber — accent, wordmark on light */
  --mango:      #E3A951;   /* Mango — the one warm note */
  --paper:      #ECEAE1;   /* Warm Paper */

  /* ── Green ramp & support ─────────────────────────────── */
  --sage-lt:    #9FB899;
  --sage:       #7FA07E;
  --fern:       #5E876A;
  --leaf:       #8FA870;
  --ground:     #26332C;   /* dark background */
  --tint:       #F2EFE6;   /* icon / surface fill */
  --card:       #FFFFFF;
  --ink:        #2E3A31;   /* body text */

  /* ── Derived ──────────────────────────────────────────── */
  --ink-soft:   #667064;
  --on-dark:    #E4E7DF;
  --on-dark-2:  #A9B8A5;
  --line:       rgba(46,58,49,.14);
  --line-lt:    rgba(236,234,225,.16);

  /* ── Type (Space Grotesk + IBM Plex Mono) ─────────────── */
  --sans: 'Space Grotesk', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, Menlo, monospace;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --sec: clamp(72px, 10vw, 132px);
  --r: 14px;
}

/* ── reset ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--mango);color:var(--ink);padding:12px 18px;z-index:200;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}

:where(a,button,input,select,textarea):focus-visible{
  outline:2.5px solid var(--mango);outline-offset:3px;border-radius:4px;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ── bands ── */
.band--dark{background:var(--ground);color:var(--on-dark)}
.band--paper{background:var(--paper);color:var(--ink)}
.section{padding-block:var(--sec)}

/* ── type ── */
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fern);
  margin-bottom:20px;
}
.eyebrow--sage{color:var(--sage)}

.h2{
  font-size:clamp(28px,4.1vw,46px);line-height:1.12;letter-spacing:-.02em;
  font-weight:600;margin:0 0 20px;text-wrap:balance;
}
.h2--light{color:var(--tint)}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft);line-height:1.55}
.lede--light{color:var(--sage-lt)}
.measure{max-width:19ch}
.measure-sm{max-width:56ch}
.mango{color:var(--mango)}
.muted{color:var(--on-dark-2)}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:15.5px;letter-spacing:-.01em;text-decoration:none;
  cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--mango{background:var(--mango);color:var(--ground)}
.btn--mango:hover{background:#EDB765}
.btn--forest{background:var(--forest);color:var(--tint)}
.btn--forest:hover{background:#334C3B}
.btn--ghost{border-color:rgba(236,234,225,.35);color:var(--on-dark)}
.btn--ghost:hover{border-color:var(--sage);background:rgba(127,160,126,.14)}
.btn--block{width:100%;padding-block:16px}

/* ═══════════ NAV ═══════════ */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(38,51,42,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s ease, background .25s ease;
}
.nav.is-stuck{border-bottom-color:var(--line-lt)}
.nav__inner{display:flex;align-items:center;gap:28px;height:70px}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
/* Clear space = one bar height (9/77 of mark height) on all sides. */
.mark{width:45px;height:31px;flex-shrink:0}
.mark--footer{width:74px;height:51px;margin-inline:auto}
.brand__word{font-size:20px;font-weight:600;letter-spacing:-.03em;margin:0}
.brand__word--lg{font-size:clamp(32px,4.6vw,44px);margin-top:16px}
.brand__mango{color:var(--mango)}
.brand__stack{color:var(--tint)}

.nav__links{display:flex;gap:26px;margin-left:auto}
.nav__links a{
  font-size:14.5px;font-weight:500;color:var(--on-dark-2);text-decoration:none;
  transition:color .18s ease;
}
.nav__links a:hover{color:var(--mango)}
.nav__cta{padding:10px 20px;font-size:14.5px}

.nav__toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:40px;height:40px;flex-direction:column;justify-content:center;gap:6px;padding:0 8px;
}
.nav__toggle span{display:block;height:2px;background:var(--on-dark);border-radius:2px;transition:transform .2s ease, opacity .2s ease}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

.nav__drawer{display:none}
@media (max-width:760px){
  .nav__drawer:not([hidden]){
    display:flex;flex-direction:column;gap:2px;padding:8px var(--pad) 22px;
    background:var(--ground);border-top:1px solid var(--line-lt);
  }
}
.nav__drawer a{padding:13px 0;text-decoration:none;color:var(--on-dark-2);font-weight:500;border-bottom:1px solid var(--line-lt)}
.nav__drawer-cta{color:var(--mango) !important;border-bottom:0 !important}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;overflow:hidden;padding-block:clamp(84px,13vw,150px) clamp(76px,11vw,128px)}
.hero__inner{position:relative;z-index:2}

/* ambient echo of the logo mark: five tapering bars */
.hero__field{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  opacity:.2;pointer-events:none;
}
/* Ambient echo of the mark: five bars in the same 26/44/60/44/26 proportion,
   in the mark's own colour ramp, mango crowning the stack. */
.hero__bar{display:block;height:22px;border-radius:11px}
.hero__bar:nth-child(1){width:143px;background:var(--mango)}
.hero__bar:nth-child(2){width:242px;background:var(--sage-lt)}
.hero__bar:nth-child(3){width:330px;background:var(--sage)}
.hero__bar:nth-child(4){width:242px;background:var(--fern)}
.hero__bar:nth-child(5){width:143px;background:var(--forest)}

.hero__title{
  font-size:clamp(42px,8vw,94px);line-height:1.0;letter-spacing:-.03em;
  font-weight:600;color:var(--tint);margin:0 0 34px;
}
.hero__sub{font-size:clamp(17px,1.8vw,21px);line-height:1.6;color:var(--sage-lt);max-width:56ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.hero__note{
  margin-top:34px;font-family:var(--mono);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sage);display:flex;align-items:center;gap:9px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mango);flex-shrink:0}

/* ═══════════ RISKS ═══════════ */
.risks{margin-top:56px;border-top:1px solid var(--line)}
.risk{
  display:flex;gap:clamp(18px,4vw,54px);align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.risk__no{font-family:var(--mono);font-size:12.5px;color:var(--fern);letter-spacing:.1em;flex-shrink:0}
.risk p{font-size:clamp(18px,2.2vw,25px);font-weight:500;letter-spacing:-.02em;line-height:1.38}
.risk:hover p{color:var(--fern)}
.risk p{transition:color .2s ease}

/* ═══════════ THE STACK (signature) ═══════════ */
.stack{margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:12px}
.stack__layer{
  width:var(--w);min-width:min(100%,320px);
  display:flex;align-items:flex-start;gap:clamp(14px,2.5vw,28px);
  padding:22px clamp(20px,3vw,34px);
  border-radius:999px;
  background:var(--layer-bg);border:1px solid var(--layer-line);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
/* Each layer takes the colour of its bar in the mark, read bottom-up:
   Deep Forest at the base, lightening as it rises, Mango crowning the stack. */
.stack__layer--forest {--layer-bg:rgba(62,90,71,.34);  --layer-line:rgba(62,90,71,.75)}
.stack__layer--fern   {--layer-bg:rgba(94,135,106,.24);--layer-line:rgba(94,135,106,.62)}
.stack__layer--sage   {--layer-bg:rgba(127,160,126,.20);--layer-line:rgba(127,160,126,.55)}
.stack__layer--sage-lt{--layer-bg:rgba(159,184,153,.16);--layer-line:rgba(159,184,153,.48)}
.stack__layer--mango  {--layer-bg:rgba(227,169,81,.13); --layer-line:rgba(227,169,81,.55)}
.stack__layer:hover{transform:translateY(-2px);background:var(--layer-line)}
.stack__layer--mango:hover{background:rgba(227,169,81,.26)}
.stack__tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage-lt);padding-top:5px;flex-shrink:0;width:88px;
}
.stack__layer--mango .stack__tag{color:var(--mango)}
.stack__body h3{font-size:clamp(17px,2vw,21px);font-weight:600;margin:0 0 5px;letter-spacing:-.02em;color:var(--tint)}
.stack__body p{font-size:15.5px;color:var(--on-dark-2);line-height:1.5;max-width:62ch}
.stack__foot{
  margin-top:22px;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sage);
}

/* ═══════════ CYCLE ═══════════ */
.cycle{
  margin-top:52px;display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.cycle__step{background:var(--paper);padding:28px clamp(18px,2.4vw,28px) 32px}
.cycle__no{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--amber);
  display:block;margin-bottom:14px;
}
.cycle__step h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 7px}
.cycle__step p{font-size:15px;color:var(--ink-soft);line-height:1.5}

.loop{
  margin-top:26px;display:flex;align-items:center;gap:18px;
  padding:24px 28px;border-radius:var(--r);
  background:rgba(127,160,126,.18);border:1px solid rgba(94,135,106,.32);
}
.loop__glyph{font-size:26px;color:var(--fern);flex-shrink:0;line-height:1}
.loop p{font-size:16.5px;color:var(--ink);line-height:1.5}

/* ═══════════ CAPABILITIES ═══════════ */
.cap{padding-block:clamp(52px,7vw,86px)}
.cap__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(32px,6vw,80px);align-items:center;
}
.cap--flip .cap__copy{order:2}
.cap--flip .cap__art{order:1}
.cap__copy .h2{font-size:clamp(27px,3.5vw,40px);max-width:16ch}
.cap__copy .lede{margin-bottom:30px}

.ticks{display:flex;flex-direction:column;gap:2px}
.ticks li{
  position:relative;padding:11px 0 11px 20px;font-size:16.5px;
  font-weight:500;line-height:1.45;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:3px;background:var(--sage);
}
.ticks li:nth-child(1)::before{background:var(--mango)}
.ticks li:nth-child(3)::before{background:var(--fern)}
.ticks li:nth-child(4)::before{background:var(--forest)}
.ticks--tight li{font-size:15.5px;padding-block:8px}

/* ── shared mockup atoms ── */
.ui-label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:16px 0 8px;
}
.ui-label--amber{color:var(--amber)}
.ui-label--sage{color:var(--fern)}
.pill{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.pill--outline{border:1px solid var(--line);color:var(--ink-soft)}
.pill--ok{background:rgba(94,135,106,.16);color:var(--fern)}
.pill--warn{background:rgba(176,129,46,.16);color:var(--amber)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-size:11.5px;padding:5px 11px;border-radius:999px;
  background:var(--paper);color:var(--ink-soft);white-space:nowrap;
}
.chip--hi{background:rgba(159,184,153,.42);color:var(--ink);font-weight:600}

/* ── phone frame ── */
.phone{
  width:min(300px,100%);margin-inline:auto;background:var(--ground);
  border-radius:34px;padding:9px;box-shadow:0 26px 60px -22px rgba(27,36,30,.5);
}
.phone__inner{border-radius:26px;overflow:hidden;background:var(--card);min-height:430px}

/* whatsapp */
.wa__bar{display:flex;align-items:center;gap:10px;background:#0B5D4C;padding:11px 13px;color:#EDF3EF}
.wa__av{
  width:30px;height:30px;border-radius:50%;background:#0F7A62;display:grid;place-items:center;
  font-size:11px;font-weight:700;flex-shrink:0;
}
.wa__who{display:flex;flex-direction:column;line-height:1.25;flex:1}
.wa__who strong{font-size:13px}
.wa__who em{font-size:10.5px;font-style:normal;color:#A9CFC1}
.wa__dots{opacity:.7}
.wa__thread{background:var(--paper);padding:14px 12px;min-height:370px}
.wa__msg{background:#fff;border-radius:10px;padding:6px 6px 5px;box-shadow:0 1px 2px rgba(0,0,0,.08);max-width:88%}
.wa__photo{height:82px;border-radius:6px;background:linear-gradient(135deg,#C6C6B2,#AFB39A)}
.wa__msg p{font-size:12.5px;line-height:1.35;padding:7px 4px 0}
.wa__time{display:block;text-align:right;font-size:10px;color:#8A9689;padding:2px 4px 0}
.wa__ticks{color:#3A9CD4}
.wa__voice{
  display:flex;align-items:center;gap:9px;background:#fff;border-radius:10px;
  padding:9px 12px;margin-top:8px;max-width:64%;box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.wa__play{
  width:22px;height:22px;border-radius:50%;background:#0B5D4C;color:#fff;
  display:grid;place-items:center;font-size:8px;flex-shrink:0;
}
.wa__wave{flex:1;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--fern) 30%,#CDD6CB 30%)}
.wa__dur{font-size:10.5px;color:#8A9689}
.wa__chip{
  margin-top:12px;display:inline-block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.05em;background:rgba(227,169,81,.24);color:var(--amber);padding:5px 11px;border-radius:6px;
}

/* structured evidence */
.ev__photo{
  height:150px;background:linear-gradient(140deg,#C6C6B2,#ABAF96);
  display:flex;align-items:flex-end;padding:12px;
}
.ev__geo{
  font-family:var(--mono);font-size:9.5px;background:rgba(38,51,44,.84);color:var(--tint);
  padding:5px 11px;border-radius:999px;letter-spacing:.02em;
}
.ev__card{padding:14px 16px 18px}
.ev__rows div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.ev__rows dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ev__rows dd{margin:0;font-size:13.5px;font-weight:600}
.ev__chips{display:flex;gap:7px;margin-top:14px}

/* ── browser frame ── */
.browser{
  background:var(--ground);border-radius:12px;padding:8px;
  box-shadow:0 26px 60px -22px rgba(27,36,30,.45);
}
.browser__bar{display:flex;align-items:center;gap:10px;padding:2px 4px 9px}
.browser__dots{display:flex;gap:5px}
.browser__dots i{width:8px;height:8px;border-radius:50%;background:var(--fern);display:block}
.browser__url{
  flex:1;background:rgba(239,237,230,.1);border-radius:6px;padding:5px 12px;
  font-family:var(--mono);font-size:10px;color:var(--on-dark-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.browser__body{background:var(--card);border-radius:7px;padding:18px 20px 20px}

.plan__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.plan__head strong{display:block;font-size:16px;letter-spacing:-.01em}
.plan__head small{font-size:11.5px;color:var(--ink-soft)}

.outcomes li{display:grid;grid-template-columns:16px 1fr;gap:0 10px;padding:8px 0}
.outcomes .box{width:13px;height:13px;border:1.6px solid var(--amber);border-radius:3px;margin-top:3px;grid-row:span 2}
.outcomes b{font-size:13.5px;font-weight:600}
.outcomes small{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);letter-spacing:.06em}

.strength{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.strength .ui-label{margin:0;flex-shrink:0}
.strength__track{flex:1;height:6px;border-radius:3px;background:rgba(46,58,49,.11);overflow:hidden}
.strength__track i{display:block;height:100%;background:var(--mango);border-radius:3px}
.strength b{font-family:var(--mono);font-size:11.5px;color:var(--amber)}

/* dashboard */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.stat{background:var(--paper);border-radius:9px;padding:11px 13px}
.stat b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.stat b.ok{color:var(--fern)}
.stat b.warn{color:var(--amber)}
.stat span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

.projects li{padding:9px 0;border-bottom:1px solid var(--line)}
.projects li:last-child{border-bottom:0}
.projects__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.projects__top b{font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.projects__top b span{color:var(--ink);font-weight:700}
.bar{display:block;height:5px;border-radius:3px;background:rgba(46,58,49,.11);overflow:hidden}
.bar i{display:block;height:100%;background:var(--fern);border-radius:3px}
.bar--warn i{background:var(--amber)}
.projects small{display:block;text-align:right;font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);margin-top:4px}

/* utilisation certificate */
.doc{
  width:min(430px,100%);margin-inline:auto;background:var(--card);border-radius:12px;
  overflow:hidden;box-shadow:0 26px 60px -24px rgba(27,36,30,.4);border:1px solid var(--line);
}
.doc__head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.doc__head strong{font-size:15.5px;letter-spacing:-.01em}
.doc__body{padding:18px}
.skel{display:block;height:7px;border-radius:4px;background:rgba(46,58,49,.11);margin-bottom:8px}
.skel--title{height:10px;width:52%;background:var(--forest);margin-bottom:14px}
.skel--short{width:70%}
.verified{background:rgba(227,169,81,.16);border-radius:9px;padding:13px 15px;margin-top:16px}
.verified .ui-label{margin-top:0}
.verified li{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:3px 0;color:var(--ink)}
.check{
  width:16px;height:16px;border-radius:50%;background:var(--fern);color:var(--card);
  display:grid;place-items:center;font-size:9px;flex-shrink:0;
}
.doc__foot{padding:0 18px 18px}
.doc__submit{
  display:block;text-align:center;background:var(--forest);color:var(--tint);
  padding:11px;border-radius:7px;font-size:13.5px;font-weight:700;
}

/* ═══════════ COMPARE ═══════════ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,26px);margin-top:52px}
.compare__col{padding:30px clamp(20px,2.6vw,32px) 34px;border-radius:var(--r);border:1px solid var(--line-lt)}
.compare__col h3{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;margin:0 0 20px;
}
.compare__col li{position:relative;padding:10px 0 10px 30px;font-size:16.5px;line-height:1.45;border-bottom:1px solid var(--line-lt)}
.compare__col li:last-child{border-bottom:0}
.compare__col li::before{position:absolute;left:0;top:10px;font-size:15px}
.compare__col--today{background:rgba(239,237,230,.03)}
.compare__col--today h3{color:var(--sage)}
.compare__col--today li{color:var(--on-dark-2)}
.compare__col--today li::before{content:"✕";color:var(--fern)}
.compare__col--after{background:rgba(227,169,81,.08);border-color:rgba(227,169,81,.28)}
.compare__col--after h3{color:var(--mango)}
.compare__col--after li{color:var(--tint);font-weight:500}
.compare__col--after li::before{content:"✓";color:var(--mango)}

/* ═══════════ EARLY ACCESS ═══════════ */
.cta__grid{display:grid;grid-template-columns:1fr minmax(0,440px);gap:clamp(36px,6vw,72px);align-items:start}
.cta .lede{margin-bottom:22px}
.form{background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,32px)}
.field{margin-bottom:15px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.opt{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:11px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;
  background:var(--card);font-size:15.5px;transition:border-color .18s ease;resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--fern);outline:none}
.field input[aria-invalid="true"]{border-color:var(--amber)}
.form__status{margin-top:14px;font-size:14.5px;line-height:1.5;min-height:1.2em}
.form__status.is-ok{color:var(--fern);font-weight:600}
.form__status.is-err{color:var(--amber);font-weight:600}

/* ═══════════ FOOTER ═══════════ */
.footer{background:var(--ground);color:var(--on-dark-2);padding-block:clamp(52px,7vw,86px)}
.footer__brand{text-align:center}
.footer__tag{font-size:clamp(17px,2.2vw,21px);color:var(--sage-lt);margin-top:8px}
.footer__meta{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;
  margin-top:clamp(40px,6vw,64px);padding-top:22px;border-top:1px solid var(--line-lt);
  font-size:14.5px;
}
.footer__names,.footer__fine{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);
}
.footer__meta a{color:var(--mango);text-decoration:none}
.footer__meta a:hover{text-decoration:underline}

/* ═══════════ MOTION ═══════════ */
.rise{opacity:0;transform:translateY(16px);animation:rise .75s cubic-bezier(.2,.7,.3,1) forwards}
.rise[data-rise="1"]{animation-delay:.05s}
.rise[data-rise="2"]{animation-delay:.14s}
.rise[data-rise="3"]{animation-delay:.26s}
.rise[data-rise="4"]{animation-delay:.36s}
.rise[data-rise="5"]{animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:none}}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.risks .risk:nth-child(2),.stack__layer:nth-child(2),.cycle__step:nth-child(2){transition-delay:.06s}
.risks .risk:nth-child(3),.stack__layer:nth-child(3),.cycle__step:nth-child(3){transition-delay:.12s}
.risks .risk:nth-child(4),.stack__layer:nth-child(4),.cycle__step:nth-child(4){transition-delay:.18s}
.risks .risk:nth-child(5),.stack__layer:nth-child(5),.cycle__step:nth-child(5){transition-delay:.24s}
.cycle__step:nth-child(6){transition-delay:.3s}
.compare__col--after{transition-delay:.1s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rise,.reveal{opacity:1;transform:none}
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:960px){
  .cap__grid{grid-template-columns:1fr;gap:38px}
  .cap--flip .cap__copy,.cap--flip .cap__art{order:0}
  .cta__grid{grid-template-columns:1fr}
  .cycle{grid-template-columns:repeat(2,1fr)}
  .hero__field{display:none}
  .measure{max-width:24ch}
}
@media (max-width:760px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .compare{grid-template-columns:1fr}
  .stack__layer{width:100% !important;border-radius:var(--r);flex-direction:column;gap:8px}
  .stack__tag{width:auto;padding-top:0}
  .stack__foot{text-align:left}
  .footer__meta{flex-direction:column;align-items:center;text-align:center;gap:10px}
}
@media (max-width:540px){
  body{font-size:16px}
  .cycle{grid-template-columns:1fr}
  .risk{gap:16px}
  .hero__actions .btn{flex:1 1 100%}
  .stats{grid-template-columns:1fr 1fr 1fr}
}