/* ============================================================
   99FOUNDER — Design System
   Monochrome / black & white gradient / editorial luxury
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* neutral ramp */
  --n-0:#ffffff;
  --n-50:#f7f7f7;
  --n-100:#efefef;
  --n-200:#e2e2e2;
  --n-300:#c9c9c9;
  --n-400:#a3a3a3;
  --n-500:#7a7a7a;
  --n-600:#525252;
  --n-700:#333333;
  --n-800:#1a1a1a;
  --n-900:#0d0d0d;
  --n-950:#000000;

  /* type */
  --font-display:"Cormorant Garamond", "Times New Roman", serif;
  --font-ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1:clamp(.8rem,.77rem + .15vw,.875rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.0625rem);
  --step-1:clamp(1.125rem,1.05rem + .35vw,1.3rem);
  --step-2:clamp(1.4rem,1.2rem + .9vw,1.9rem);
  --step-3:clamp(1.9rem,1.4rem + 2.2vw,3.4rem);
  --step-4:clamp(2.4rem,1.5rem + 4.2vw,5rem);
  --step-5:clamp(2.8rem,1rem + 7vw,7.25rem);

  /* rhythm */
  --gutter:clamp(1.25rem,4vw,3rem);
  --section-y:clamp(5rem,11vw,10rem);
  --max:1280px;
  --max-prose:64ch; /* Cormorant's digit is narrow, so ch over-reports the real measure */

  /* motion */
  --ease:cubic-bezier(.2,.7,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* default band = light */
  --fg:var(--n-950);
  --fg-2:var(--n-600);
  --fg-3:var(--n-500);
  --bg:var(--n-0);
  --line:rgba(0,0,0,.13);
  --line-soft:rgba(0,0,0,.07);
  --chip:rgba(0,0,0,.045);
  --inv-fg:var(--n-0);
  --inv-bg:var(--n-950);
  --shimmer:linear-gradient(110deg,#111 0%,#5c5c5c 32%,#0a0a0a 55%,#4a4a4a 78%,#111 100%);
}

/* band contexts — every component reads these.
   .hero is always dark, so it carries the dark tokens without needing the class. */
.band-dark,.hero{
  --fg:var(--n-0);
  --fg-2:rgba(255,255,255,.66);
  --fg-3:rgba(255,255,255,.44);
  --bg:var(--n-950);
  --line:rgba(255,255,255,.15);
  --line-soft:rgba(255,255,255,.08);
  --chip:rgba(255,255,255,.06);
  --inv-fg:var(--n-950);
  --inv-bg:var(--n-0);
  --shimmer:linear-gradient(110deg,#fff 0%,#9a9a9a 32%,#ffffff 55%,#b5b5b5 78%,#fff 100%);
  color:var(--fg);
  background:var(--bg);
}
.band-light{
  --fg:var(--n-950);
  --fg-2:var(--n-600);
  --fg-3:var(--n-500);
  --bg:var(--n-0);
  --line:rgba(0,0,0,.13);
  --line-soft:rgba(0,0,0,.07);
  --chip:rgba(0,0,0,.045);
  --inv-fg:var(--n-0);
  --inv-bg:var(--n-950);
  --shimmer:linear-gradient(110deg,#111 0%,#5c5c5c 32%,#0a0a0a 55%,#4a4a4a 78%,#111 100%);
  color:var(--fg);
  background:var(--bg);
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--step-0);
  font-weight:300;
  line-height:1.75;
  color:var(--n-950);
  background:var(--n-950);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.02em;line-height:1.04}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--n-950);color:var(--n-0)}
.band-dark ::selection{background:var(--n-0);color:var(--n-950)}

/* film grain */
body::after{
  content:"";position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Layout primitives ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:980px}
.section{padding-block:var(--section-y);position:relative;isolation:isolate}
/* flat, so consecutive same-band sections never show a seam of their own —
   the gradient identity lives in .seam, .hero, .cta and the footer instead */
.band-dark.section{background:#000}
.band-light.section{background:#fff}

/* gradient seams between bands — the black&white gradient signature */
.seam{height:clamp(80px,13vw,160px);width:100%}
.seam-to-light{background:linear-gradient(180deg,#000 0%,#2e2e2e 40%,#8f8f8f 68%,#dcdcdc 86%,#fff 100%)}
.seam-to-dark{background:linear-gradient(180deg,#fff 0%,#dcdcdc 14%,#8f8f8f 32%,#2e2e2e 60%,#000 100%)}

.rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}

.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- 4. Type ---------- */
.eyebrow{
  font-family:var(--font-ui);font-size:.6875rem;font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;color:var(--fg-3);
  display:flex;align-items:center;gap:.9rem;margin:0 0 1.5rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--fg-3);flex:none}
.eyebrow.is-center{justify-content:center}

.display{font-family:var(--font-display);font-weight:300;letter-spacing:-.025em;line-height:.98}
.d-1{font-size:var(--step-5)}
.d-2{font-size:var(--step-4)}
.d-3{font-size:var(--step-3)}
.d-4{font-size:var(--step-2);line-height:1.15}
.italic{font-style:italic;font-weight:300}
.metal{
  background:var(--shimmer);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;
  animation:sheen 9s linear infinite;
}
@keyframes sheen{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.metal{animation:none}}

.lede{font-size:var(--step-1);font-weight:300;line-height:1.65;color:var(--fg-2);max-width:60ch}
.muted{color:var(--fg-2)}
.small{font-size:var(--step--1);color:var(--fg-3);line-height:1.65}
.tag{
  display:inline-block;font-size:.625rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;padding:.45rem .85rem;border:1px solid var(--line);
  border-radius:999px;color:var(--fg-2);background:var(--chip);
}

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-fg:var(--inv-fg);--btn-bg:var(--inv-bg);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.05rem 2.1rem;font-size:.72rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;border:1px solid transparent;border-radius:999px;
  color:var(--btn-fg);background:var(--btn-bg);cursor:pointer;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),opacity .3s;
  white-space:nowrap;
}
.btn span{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;
  background:radial-gradient(120% 160% at 50% 120%,rgba(255,255,255,.35),transparent 60%);
  transition:opacity .5s var(--ease);
}
.band-light .btn::before{background:radial-gradient(120% 160% at 50% 120%,rgba(255,255,255,.28),transparent 60%)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0)}
.btn-ghost{
  --btn-fg:var(--fg);--btn-bg:transparent;border-color:var(--line);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:var(--fg);background:var(--chip)}
.btn-lg{padding:1.2rem 2.6rem}
.btn-sm{padding:.8rem 1.5rem;font-size:.66rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
@media (max-width:520px){.btn-row .btn{width:100%}}

/* text link with animated rule */
.link{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fg);padding-bottom:.4rem;
  position:relative;
}
.link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--fg);transform-origin:right;transform:scaleX(1);
  transition:transform .5s var(--ease-out);
}
.link:hover::after{transform:scaleX(0)}
.link .arw{transition:transform .45s var(--ease-out)}
.link:hover .arw{transform:translateX(5px)}

/* ---------- 6. Header / nav ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent;
  padding-block:1.35rem;
}
.site-header.is-stuck{
  background:rgba(0,0,0,.78);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.1);padding-block:.9rem;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;color:#fff}
.brand{display:flex;align-items:center;gap:.7rem;flex:none}
/* the emblem is dark-on-dark in the header, so it needs size to read —
   34px turned it into a smudge. It shrinks once the header condenses. */
.brand-mark{width:42px;height:42px;flex:none;transition:width .5s var(--ease),height .5s var(--ease)}
.site-header.is-stuck .brand-mark{width:34px;height:34px}
.footer-brand .brand-mark{width:54px;height:54px}
@media (max-width:520px){.brand-mark{width:36px;height:36px}}
.brand-text{display:flex;align-items:baseline;gap:.32rem;line-height:1}
.brand-9{font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.03em}
.brand-w{font-size:.72rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;padding-top:.12rem}

.nav-links{display:flex;align-items:center;gap:2.4rem}
.nav-links a{
  font-size:.72rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.7);transition:color .35s var(--ease);position:relative;padding-block:.4rem;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out);
}
.nav-links a:hover,.nav-links a[aria-current]{color:#fff}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}

.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + 1.1rem);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:230px;padding:.6rem;border-radius:14px;
  background:rgba(10,10,10,.94);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12);
  opacity:0;visibility:hidden;transition:all .4s var(--ease-out);
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub a{display:block;padding:.75rem 1rem;border-radius:9px;letter-spacing:.16em}
.sub a::after{display:none}
.sub a:hover{background:rgba(255,255,255,.08)}
.nav-cta{display:flex;align-items:center;gap:1rem;flex:none}
.nav-cta .btn{--btn-fg:#000;--btn-bg:#fff}

.burger{
  display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
  background:transparent;cursor:pointer;place-items:center;flex:none;
}
.burger span{display:block;width:16px;height:1px;background:#fff;transition:transform .4s var(--ease),opacity .3s}
.burger span+span{margin-top:5px}
body.menu-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-3px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;
  justify-content:center;padding:6rem var(--gutter) 3rem;
  background:linear-gradient(180deg,#000,#151515 60%,#000);
  clip-path:circle(0% at 92% 5%);transition:clip-path .8s var(--ease-out);
}
body.menu-open .mobile-menu{clip-path:circle(150% at 92% 5%)}
.mobile-menu a{
  font-family:var(--font-display);font-size:clamp(2rem,9vw,3.2rem);font-weight:300;
  color:#fff;padding-block:.35rem;display:block;opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease),transform .5s var(--ease-out);
}
.mobile-menu .sub-item{font-size:clamp(1.05rem,4vw,1.4rem);color:rgba(255,255,255,.55);padding-left:1.6rem}
body.menu-open .mobile-menu a{opacity:1;transform:none}
body.menu-open .mobile-menu a:nth-child(1){transition-delay:.18s}
body.menu-open .mobile-menu a:nth-child(2){transition-delay:.24s}
body.menu-open .mobile-menu a:nth-child(3){transition-delay:.3s}
body.menu-open .mobile-menu a:nth-child(4){transition-delay:.36s}
body.menu-open .mobile-menu a:nth-child(5){transition-delay:.42s}
body.menu-open .mobile-menu a:nth-child(6){transition-delay:.48s}
body.menu-open{overflow:hidden}
@media (max-width:1024px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:grid}
}
@media (min-width:1025px){.mobile-menu{display:none}}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;min-height:clamp(640px,96svh,1000px);display:flex;align-items:flex-end;
  padding-top:clamp(9rem,18vh,13rem);padding-bottom:clamp(3rem,7vh,5.5rem);
  background:radial-gradient(120% 90% at 50% -10%,#3a3a3a 0%,#141414 42%,#000 78%);
  overflow:hidden;
}
.hero-sm{min-height:auto;padding-top:clamp(9rem,20vh,12rem);padding-bottom:clamp(4rem,9vh,7rem);align-items:center}
/* photographic hero — pass the image in as --hero-img on the element.
   Framed at 18% from the top so the banner's own title sits below the crop
   and doesn't compete with the <h1> laid over it. */
.hero-photo{
  background:
    /* horizontal: shields the left-aligned headline, lets the picture breathe on the right */
    linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.66) 44%,rgba(0,0,0,.18) 100%),
    /* vertical: must land on solid black so the seam strip below joins seamlessly */
    linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.5) 74%,#000 100%),
    var(--hero-img) center top / cover no-repeat,
    #000;
}
.hero-photo::after{display:none}
.hero-photo::before{opacity:.14}
/* Paths are declared here, not inline on the page: a relative url() inside a
   custom property resolves against this stylesheet, so ../../ reaches /images
   from any page depth. */
.hero-founders{--hero-img:url("../../images/banner-founders.jpg")}
.hero-businesses{--hero-img:url("../../images/banner-businesses.jpg")}
.hero-about{--hero-img:url("../../images/about-hero.jpg")}
/* this headline runs much wider than the collection ones, so it needs the
   shield carried further across the frame */
.hero-about.hero-photo{
  background:
    linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.83) 54%,rgba(0,0,0,.45) 100%),
    linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.06) 34%,rgba(0,0,0,.55) 74%,#000 100%),
    var(--hero-img) center 30% / cover no-repeat,
    #000;
}

/* founder portrait block: a photo plate that keeps its own proportion rather
   than stretching to the height of the text beside it */
.portrait{aspect-ratio:9/11;max-width:460px}
@media (max-width:900px){.portrait{max-width:none}}
.role{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-3);
  margin:.6rem 0 1.6rem;display:block;
}
.hero::before{ /* vertical hairline grid */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.hero::after{ /* floor glow */
  content:"";position:absolute;left:50%;bottom:-40%;width:130%;height:70%;translate:-50% 0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.14),transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:2}
.hero-title{margin-bottom:2rem}
.hero-title .ln{display:block;overflow:hidden}
.hero-title .ln>span{display:block;transform:translateY(105%);animation:riseIn 1.1s var(--ease-out) forwards}
.hero-title .ln:nth-child(1)>span{animation-delay:.12s}
.hero-title .ln:nth-child(2)>span{animation-delay:.24s}
.hero-title .ln:nth-child(3)>span{animation-delay:.36s}
@keyframes riseIn{to{transform:translateY(0)}}
.hero-foot{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:end;
  padding-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(255,255,255,.14);
}
@media (max-width:820px){.hero-foot{grid-template-columns:1fr;align-items:start}}
.hero-stats{display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap}
.stat-n{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:300;line-height:1;display:block}
.stat-l{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3);margin-top:.55rem;display:block}

/* ---------- 8. Marquee ---------- */
.marquee{
  overflow:hidden;padding-block:1.6rem;border-block:1px solid var(--line);
  background:var(--bg);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:clamp(2rem,5vw,4.5rem);padding-right:clamp(2rem,5vw,4.5rem)}
.marquee-group span{
  font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.6rem);font-weight:300;
  font-style:italic;color:var(--fg-2);white-space:nowrap;
}
.marquee-group i{width:5px;height:5px;border-radius:50%;background:var(--fg-3);flex:none;display:block}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 9. Cards ---------- */
.card{
  position:relative;padding:clamp(1.75rem,3vw,2.6rem);border:1px solid var(--line);
  background:var(--chip);border-radius:2px;overflow:hidden;
  transition:border-color .5s var(--ease),transform .6s var(--ease-out),background .5s var(--ease);
  height:100%;display:flex;flex-direction:column;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0%,rgba(255,255,255,.1),transparent 70%);
}
.band-light .card::before{background:radial-gradient(90% 70% at 50% 0%,rgba(0,0,0,.05),transparent 70%)}
.card:hover{border-color:var(--fg);transform:translateY(-6px)}
.card:hover::before{opacity:1}
.card-n{
  font-family:var(--font-display);font-size:.95rem;letter-spacing:.22em;color:var(--fg-3);
  text-transform:uppercase;display:block;margin-bottom:1.4rem;
}
.card h3{font-family:var(--font-display);font-size:var(--step-2);margin-bottom:.85rem;font-weight:400}
.card p{color:var(--fg-2);font-size:var(--step--1);line-height:1.8}

/* numbered process list */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(1.75rem,3.5vw,2.75rem);border-top:1px solid var(--line);
  transition:padding-left .6s var(--ease-out);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step:hover{padding-left:clamp(0px,1.5vw,1.25rem)}
.step::before{
  content:"0" counter(s);font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:300;color:var(--fg-3);line-height:1;padding-top:.2rem;
}
.step-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1rem,3vw,3rem);align-items:start}
@media (max-width:760px){.step-body{grid-template-columns:1fr;gap:.7rem}}
.step h3{font-family:var(--font-display);font-size:var(--step-2);font-weight:400}
.step p{color:var(--fg-2);font-size:var(--step--1);line-height:1.85}

/* ---------- 10. Split / SERP mock ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.serp{
  border:1px solid var(--line);background:var(--bg);border-radius:4px;overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7);
}
.serp-bar{
  display:flex;align-items:center;gap:.55rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);
  background:var(--chip);
}
.serp-dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.serp-url{
  flex:1;margin-left:.6rem;padding:.4rem .9rem;border-radius:999px;background:var(--chip);
  border:1px solid var(--line-soft);font-size:.7rem;color:var(--fg-3);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.serp-body{padding:clamp(1.1rem,2.5vw,1.8rem)}
.serp-item{padding-block:1rem;border-bottom:1px dashed var(--line-soft)}
.serp-item:last-child{border-bottom:0}
.serp-item .u{font-size:.68rem;color:var(--fg-3);letter-spacing:.04em}
.serp-item .t{font-family:var(--font-display);font-size:1.22rem;font-weight:400;margin-top:.25rem;color:var(--fg)}
.serp-item .d{font-size:.75rem;color:var(--fg-2);line-height:1.65;margin-top:.35rem}
.serp-item.is-weak .t,.serp-item.is-weak .d,.serp-item.is-weak .u{opacity:.38}
.serp-item.is-ours{
  position:relative;padding-left:1.1rem;margin-left:-1.1rem;
  border-left:2px solid var(--fg);background:var(--chip);
  padding-right:1rem;border-bottom:0;
}
.serp-item.is-ours::after{
  content:"99FOUNDER";position:absolute;top:1rem;right:1rem;font-size:.55rem;
  letter-spacing:.22em;color:var(--fg-3);
}

/* ---------- 11. Pricing ---------- */
.pricing-controls{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.toggle{
  display:inline-flex;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--chip);
  position:relative;
}
.toggle button{
  position:relative;z-index:1;border:0;background:transparent;cursor:pointer;
  padding:.72rem 1.5rem;border-radius:999px;font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);
  transition:color .45s var(--ease);white-space:nowrap;
}
.toggle button[aria-pressed="true"]{color:var(--inv-fg)}
.toggle-pill{
  position:absolute;z-index:0;top:5px;bottom:5px;border-radius:999px;background:var(--inv-bg);
  transition:left .55s var(--ease-out),width .55s var(--ease-out);
}
.save-note{
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-2);
  padding:.5rem .9rem;border:1px dashed var(--line);border-radius:999px;
}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{
  position:relative;padding:clamp(2rem,3.4vw,3rem) clamp(1.5rem,2.6vw,2.4rem);
  display:flex;flex-direction:column;border-right:1px solid var(--line);
  transition:background .6s var(--ease);
}
.plan:last-child{border-right:0}
@media (max-width:900px){
  .plan{border-right:0;border-bottom:1px solid var(--line)}
  .plan:last-child{border-bottom:0}
}
.plan:not(.is-featured):hover{background:var(--chip)}

/* the featured plan inverts against whichever band it sits in */
.band-dark .plan.is-featured{
  --fg:#0a0a0a;--fg-2:rgba(0,0,0,.62);--fg-3:rgba(0,0,0,.45);
  --bg:#fff;--line:rgba(0,0,0,.14);--chip:rgba(0,0,0,.045);
  --inv-fg:#fff;--inv-bg:#0a0a0a;
  color:var(--fg);background:linear-gradient(180deg,#fff 0%,#eaeaea 100%);
}
.band-light .plan.is-featured{
  --fg:#ffffff;--fg-2:rgba(255,255,255,.66);--fg-3:rgba(255,255,255,.45);
  --bg:#0a0a0a;--line:rgba(255,255,255,.16);--chip:rgba(255,255,255,.06);
  --inv-fg:#0a0a0a;--inv-bg:#ffffff;
  color:var(--fg);background:linear-gradient(180deg,#161616 0%,#000 100%);
}
.plan-flag{
  position:absolute;top:0;right:0;font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.5rem .9rem;background:var(--fg);color:var(--bg);
}
/* on the leading card the flag would land on an internal divider — pin it to
   the outer edge of the block instead */
.plan:first-child .plan-flag{right:auto;left:0}

/* --- per-edition accent glow -------------------------------------------
   Each card carries its own colour as an RGB triplet, so one rule can build
   both the hairline ring and the blurred halo from it. Desaturated jewel
   tones, kept low-opacity so the page still reads as monochrome. */
.plans .plan{--rgb:140,140,140}
.plans .plan:nth-child(1){--rgb:214,176,92}   /* Legacy   — champagne gold */
.plans .plan:nth-child(2){--rgb:96,166,222}   /* Business — azure */
.plans .plan:nth-child(3){--rgb:184,138,212}  /* Personal — violet */

/* two halo layers: a tight bright one to define the edge, a wide soft one to
   bleed onto the black. A single blurred shadow disappears on pure black. */
.plans .plan{
  box-shadow:
    0 0 0 1px rgba(var(--rgb),.5),
    0 0 26px -2px rgba(var(--rgb),.32),
    0 0 72px 2px rgba(var(--rgb),.17);
  transition:box-shadow .6s var(--ease),background .6s var(--ease);
}
.plans .plan:hover{
  z-index:2; /* lift so the halo isn't overlapped by the neighbouring card */
  box-shadow:
    0 0 0 1px rgba(var(--rgb),.9),
    0 0 36px 0 rgba(var(--rgb),.55),
    0 0 100px 8px rgba(var(--rgb),.3);
}
.plans .plan.is-featured{z-index:1}
@media (prefers-reduced-motion:reduce){.plans .plan{transition:none}}
.plan-name{font-family:var(--font-display);font-size:var(--step-2);font-weight:400;margin-bottom:.4rem}
.plan-for{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3);margin-bottom:1.8rem}
.plan-price{display:flex;align-items:baseline;gap:.35rem;font-family:var(--font-display);line-height:1}
.plan-cur{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:300;color:var(--fg-2)}
.plan-amt{font-size:clamp(2.6rem,5vw,3.9rem);font-weight:300;letter-spacing:-.03em}
.plan-per{font-family:var(--font-ui);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);align-self:flex-end;padding-bottom:.6rem}
.plan-sub{font-size:.72rem;color:var(--fg-2);margin-top:.7rem;min-height:2.6em;line-height:1.6}
.plan-sub b{font-weight:500;color:var(--fg)}
.plan-deliver{
  margin-top:1.6rem;padding:1rem 1.1rem;border:1px solid var(--line);background:var(--chip);
  font-size:.72rem;line-height:1.6;color:var(--fg-2);
}
.plan-deliver b{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.45rem;font-weight:500}
.plan ul{margin:1.6rem 0 2rem;display:grid;gap:.85rem}
.plan li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;font-size:.8rem;line-height:1.55;color:var(--fg-2)}
.plan li svg{margin-top:.32rem;flex:none;stroke:var(--fg)}
.plan .btn{width:100%;margin-top:auto}
.plan.is-featured .btn{--btn-fg:var(--inv-fg);--btn-bg:var(--fg)}

.price-foot{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;justify-content:space-between;align-items:center}

/* comparison strip — horizontal rules only; vertical borders made it read
   like a spreadsheet rather than a specification */
.compare{
  margin-top:0;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 45%);
}
.compare-row{
  display:grid;grid-template-columns:1.7fr repeat(3,1fr);
  border-bottom:1px solid var(--line-soft);
  transition:background .45s var(--ease);
}
.compare-row:last-child{border-bottom:0}
.compare-row:not(.is-head):hover{background:var(--chip)}
.compare-row>div{
  padding:1.1rem 1.5rem;font-size:.8rem;line-height:1.5;color:var(--fg-2);
  display:flex;align-items:center;min-height:3.5rem;
}
.compare-row>div+div{justify-content:center;text-align:center}
.compare-row>div:first-child{color:var(--fg)}
/* values sit in the display face, so they echo the price figures above */
.compare-row:not(.is-head)>div+div{
  font-family:var(--font-display);font-size:1.15rem;color:var(--fg);letter-spacing:.01em;
}
.compare-row.is-head{border-bottom:1px solid var(--line);background:var(--chip)}
.compare-row.is-head>div{
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  color:var(--fg);min-height:0;padding-block:1.05rem;
}
/* each column header carries the accent of the card it describes */
.compare-row.is-head>div:nth-child(2){color:rgb(214,176,92);box-shadow:inset 0 2px 0 currentColor}
.compare-row.is-head>div:nth-child(3){color:rgb(96,166,222);box-shadow:inset 0 2px 0 currentColor}
.compare-row.is-head>div:nth-child(4){color:rgb(184,138,212);box-shadow:inset 0 2px 0 currentColor}
.compare .yes svg{stroke:var(--fg);stroke-linecap:round;stroke-linejoin:round}
.compare .no{opacity:.26}
@media (max-width:760px){
  /* the table scrolls sideways here; fade the right edge so that reads as
     intentional rather than as content being clipped */
  .compare{
    overflow-x:auto;display:block;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.15));
    mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.15));
  }
  .compare-row{min-width:640px}
}

/* ---------- 12. Article cards / plates ---------- */
.plate{
  position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(150deg,#f0f0f0,#bdbdbd 40%,#5e5e5e 75%,#121212);
  display:grid;place-items:center;
}
.band-dark .plate{background:linear-gradient(150deg,#2c2c2c,#0e0e0e 45%,#3d3d3d 78%,#000)}
.plate--wide{aspect-ratio:16/10}
/* photographic plate — the image replaces the gradient + monogram */
.plate--photo{background:#000}
/* .plate::after is declared further down, so this needs the extra class to win */
.plate.plate--photo::after{display:none}
.plate--photo>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease-out);
}
.entry:hover .plate--photo>img,.feature:hover .plate--photo>img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.plate--photo>img{transition:none}}
/* vary the light source so a grid of plates doesn't read as one repeated tile */
.grid .entry:nth-child(3n+2) .plate{background:linear-gradient(205deg,#f2f2f2,#a8a8a8 40%,#4a4a4a 74%,#0d0d0d)}
.grid .entry:nth-child(3n+3) .plate{background:linear-gradient(115deg,#e9e9e9,#9c9c9c 36%,#3a3a3a 70%,#000)}
.band-dark .grid .entry:nth-child(3n+2) .plate{background:linear-gradient(205deg,#333,#0d0d0d 44%,#454545 78%,#000)}
.band-dark .grid .entry:nth-child(3n+3) .plate{background:linear-gradient(115deg,#262626,#000 40%,#383838 76%,#0a0a0a)}
.plate::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 30% 20%,rgba(255,255,255,.28),transparent 60%);
  mix-blend-mode:soft-light;
}
.plate-mono{
  font-family:var(--font-display);font-size:clamp(3rem,7vw,5.5rem);font-weight:300;
  color:rgba(255,255,255,.9);letter-spacing:-.03em;position:relative;z-index:1;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.band-light .plate-mono{color:rgba(255,255,255,.95)}

.entry{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);background:var(--chip);transition:transform .6s var(--ease-out),border-color .5s}
.entry:hover{transform:translateY(-6px);border-color:var(--fg)}
.entry .plate{border:0;border-bottom:1px solid var(--line)}
.entry-body{padding:clamp(1.3rem,2.4vw,1.9rem);display:flex;flex-direction:column;flex:1;gap:.7rem}
.entry-meta{display:flex;gap:.7rem;align-items:center;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3)}
.entry-meta i{width:3px;height:3px;border-radius:50%;background:currentColor;display:block}
.entry h3{font-family:var(--font-display);font-size:var(--step-2);font-weight:400;line-height:1.12}
.entry p{font-size:.78rem;color:var(--fg-2);line-height:1.75}
.entry .link{margin-top:auto;padding-top:1rem;font-size:.64rem}
/* the tag is a flex item here, so it would stretch full-width without this */
.entry-body>.tag{align-self:flex-start;margin-top:auto}

/* featured wide entry */
.feature{
  display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--chip);
  transition:border-color .5s;
}
.feature:hover{border-color:var(--fg)}
@media (max-width:860px){.feature{grid-template-columns:1fr}}
.feature .plate{aspect-ratio:auto;min-height:340px;border:0}
.feature-body{padding:clamp(1.8rem,4vw,3.4rem);display:flex;flex-direction:column;gap:1.1rem;justify-content:center}

/* ---------- 13. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding-block:clamp(1.4rem,2.6vw,2rem);
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
  font-family:var(--font-display);font-size:var(--step-2);font-weight:400;line-height:1.25;
  transition:color .4s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--fg-2)}
.faq .sign{position:relative;width:16px;height:16px;flex:none}
.faq .sign::before,.faq .sign::after{
  content:"";position:absolute;background:var(--fg);transition:transform .45s var(--ease-out);
}
.faq .sign::before{left:0;top:7.5px;width:16px;height:1px}
.faq .sign::after{top:0;left:7.5px;height:16px;width:1px}
.faq details[open] .sign::after{transform:rotate(90deg)}
.faq .answer{padding-bottom:clamp(1.4rem,2.6vw,2rem);max-width:62ch;color:var(--fg-2);font-size:var(--step--1);line-height:1.85}

/* ---------- 14. Forms ---------- */
.form{display:grid;gap:1.6rem}
.field{position:relative;display:grid;gap:.6rem}
.field label{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3)}
.field input,.field textarea,.field select{
  width:100%;padding:.95rem 0;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--fg);font-size:1rem;font-weight:300;
  transition:border-color .45s var(--ease);border-radius:0;
}
.field select{cursor:pointer;padding-right:1.5rem;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 12px) center,calc(100% - 7px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.field select option{background:#0f0f0f;color:#fff}
.band-light .field select option{background:#fff;color:#000}
.field textarea{resize:vertical;min-height:130px;line-height:1.7}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--fg)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media (max-width:620px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:.7rem;color:var(--fg-3);line-height:1.7}
.form-status{
  font-size:.72rem;letter-spacing:.06em;padding:1rem 1.2rem;border:1px solid var(--line);
  background:var(--chip);display:none;
}
.form-status.is-on{display:block}

/* ---------- 15. Article typography ---------- */
.article-hero{
  min-height:auto;align-items:center;
  padding-top:clamp(9rem,18vh,12rem);padding-bottom:clamp(3rem,6vw,5rem);
  background:radial-gradient(110% 80% at 50% -20%,#333 0%,#111 45%,#000 80%);
}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin-bottom:2rem}
.breadcrumb a:hover{color:var(--fg)}
.breadcrumb i{opacity:.5;font-style:normal}
.article-meta{
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;margin-top:2.4rem;
  padding-top:1.8rem;border-top:1px solid var(--line);
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);
}

.prose{max-width:var(--max-prose);margin-inline:auto;font-family:var(--font-display);font-size:clamp(1.16rem,.5vw + 1.05rem,1.32rem);font-weight:500;line-height:1.78;color:var(--n-800)}
.prose>*+*{margin-top:1.5em}
.prose h2{
  position:relative;
  font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:400;
  margin-top:2em;padding-top:1.15em;margin-bottom:.1em;line-height:1.15;color:var(--n-950);
}
/* hairline separator above every section heading */
.prose h2::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--n-300),var(--n-200) 45%,transparent);
}
/* ...except when the article opens on a heading — nothing to separate from */
.prose h2:first-child{margin-top:0;padding-top:0}
.prose h2:first-child::before{display:none}
.prose h2+p{margin-top:.9em}
.prose h3{font-family:var(--font-display);font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:500;margin-top:1.9em;color:var(--n-950)}
.prose h3+p{margin-top:.7em}
.prose .drop::first-letter{
  float:left;font-size:4.6em;line-height:.78;padding:.06em .1em 0 0;font-weight:400;color:var(--n-950);
}
.prose a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:var(--n-400)}
.prose a:hover{text-decoration-color:var(--n-950)}
.prose strong{font-weight:700;color:var(--n-950)}
.prose ul,.prose ol{display:grid;gap:.7em;padding-left:1.3em}
.prose ul li{list-style:none;position:relative}
.prose ul li::before{content:"";position:absolute;left:-1.15em;top:.72em;width:.42em;height:1px;background:var(--n-500)}
.prose ol{list-style:decimal;padding-left:1.5em}
.prose ol li{list-style:decimal}
.prose blockquote{
  margin-block:2em;padding:0 0 0 clamp(1.2rem,3vw,2.2rem);border-left:1px solid var(--n-300);
  font-style:italic;font-size:1.2em;line-height:1.55;color:var(--n-700);
}
.prose blockquote cite{display:block;margin-top:.9em;font-family:var(--font-ui);font-style:normal;font-size:.58em;letter-spacing:.22em;text-transform:uppercase;color:var(--n-500)}
/* margin-inline:0 overrides the UA default of 40px, which otherwise insets
   figures relative to the surrounding text — very visible on narrow screens */
.prose figure{margin-block:2.6em;margin-inline:0}
.prose figure img{width:100%;height:auto;display:block;border:1px solid var(--n-200)}
/* a lead image sits flush under the headline rather than floating in space */
.prose>figure:first-child{margin-top:0}
.prose figcaption{font-family:var(--font-ui);font-size:.72rem;color:var(--n-500);margin-top:.9rem;line-height:1.6;text-align:center}
.prose hr{margin-block:3em;height:1px;border:0;background:linear-gradient(90deg,transparent,var(--n-300),transparent)}
.prose .callout{
  font-family:var(--font-ui);font-size:.86rem;line-height:1.8;color:var(--n-700);
  border:1px solid var(--n-200);background:var(--n-50);padding:clamp(1.3rem,3vw,2rem);
}
.prose .callout b{display:block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--n-500);margin-bottom:.7rem;font-weight:500}
.prose .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--n-200);border:1px solid var(--n-200);margin-block:2.6em}
@media (max-width:620px){.prose .stat-grid{grid-template-columns:1fr}}
.prose .stat-grid div{background:#fff;padding:1.5rem 1.2rem;text-align:center}
.prose .stat-grid b{display:block;font-family:var(--font-display);font-size:2.2rem;font-weight:300;line-height:1;color:var(--n-950)}
.prose .stat-grid span{display:block;font-family:var(--font-ui);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--n-500);margin-top:.7rem}

.reading-bar{position:fixed;top:0;left:0;height:2px;width:0;background:#fff;z-index:1001;transition:width .1s linear}
.band-light .reading-bar{background:#000}

.toc{
  position:sticky;top:110px;align-self:start;border-left:1px solid var(--line);
  padding-left:1.4rem;display:grid;gap:.85rem;
}
.toc b{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3);font-weight:500}
.toc a{font-size:.78rem;color:var(--fg-2);line-height:1.5;transition:color .35s}
.toc a:hover{color:var(--fg)}
.article-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:1000px){.article-layout{grid-template-columns:1fr}.toc{display:none}}

/* Article body runs edge to edge: 50px | table of contents | article | 50px.
   Put `wrap-article` on the .wrap that holds .article-layout. */
.wrap-article{max-width:none;padding-inline:50px}
.wrap-article .prose{max-width:none;margin-inline:0}
/* Below the TOC breakpoint the article is a single column; the standard
   responsive gutter takes over, so narrow screens keep more of their width. */
@media (max-width:1000px){
  .wrap-article{padding-inline:var(--gutter)}
}

/* ---------- 15c. Language toggle (article pages) ---------- */
.lang-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}
.lang-toggle{
  display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:999px;
  background:var(--chip);position:relative;
}
.lang-toggle button{
  position:relative;z-index:1;border:0;background:transparent;cursor:pointer;
  padding:.6rem 1.2rem;border-radius:999px;font-size:.64rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);
  transition:color .45s var(--ease);white-space:nowrap;
}
.lang-toggle button[aria-pressed="true"]{color:var(--inv-fg)}
.lang-toggle button[lang="hi"]{letter-spacing:.06em;font-size:.78rem;text-transform:none}
.lang-toggle .toggle-pill{
  position:absolute;z-index:0;top:4px;bottom:4px;border-radius:999px;background:var(--inv-bg);
  transition:left .5s var(--ease-out),width .5s var(--ease-out);
}
.lang-toggle button:disabled{opacity:.45;cursor:progress}
.lang-note{font-size:.66rem;letter-spacing:.02em;color:var(--fg-3);line-height:1.6;max-width:44ch}

/* Devanagari has no coverage in Cormorant or Inter, so translated text would
   fall back to a system face. Noto Serif Devanagari is loaded on demand
   instead, keeping the editorial texture and costing English readers nothing.
   The script owns the text, so it can label the translated regions honestly
   and everything below hangs off that one attribute. */
[lang="hi"]{font-family:"Noto Serif Devanagari","Nirmala UI",serif}

.prose[lang="hi"]{font-size:clamp(1.02rem,.4vw + .95rem,1.12rem);line-height:1.9;font-weight:400}
.prose[lang="hi"] h2,.prose[lang="hi"] h3{
  font-family:"Noto Serif Devanagari","Nirmala UI",serif;font-weight:600;line-height:1.4;
}
.display[lang="hi"]{font-weight:600;line-height:1.35;letter-spacing:0}
/* the drop cap has no place in Devanagari */
.prose[lang="hi"] .drop::first-letter{float:none;font-size:inherit;padding:0}

/* ---------- 16. Footer ---------- */
.site-footer{background:linear-gradient(180deg,#000 0%,#0f0f0f 55%,#000 100%);padding-top:clamp(4rem,8vw,7rem)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3rem);padding-bottom:clamp(3rem,6vw,5rem)}
@media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer-col h4{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-3);margin-bottom:1.4rem;font-weight:500}
.footer-col ul{display:grid;gap:.85rem}
.footer-col a{font-size:.85rem;color:var(--fg-2);transition:color .35s var(--ease)}
.footer-col a:hover{color:var(--fg)}
.footer-brand p{font-size:.85rem;color:var(--fg-2);line-height:1.8;max-width:34ch;margin-top:1.3rem}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;
  padding-block:2rem;border-top:1px solid var(--line);font-size:.72rem;color:var(--fg-3);
}
.footer-word{
  font-family:var(--font-display);font-size:clamp(3.5rem,15vw,13rem);font-weight:300;line-height:.85;
  letter-spacing:-.04em;text-align:center;padding-bottom:.1em;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.02));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-user-select:none;user-select:none;
}

/* ---------- 17. CTA band ---------- */
/* .section.cta — needs to match .band-dark.section's specificity to win */
.section.cta{
  position:relative;text-align:center;overflow:hidden;
  background:radial-gradient(90% 120% at 50% 0%,#2b2b2b,#0a0a0a 55%,#000);
}
.cta::before{
  content:"";position:absolute;left:50%;top:-30%;width:80%;height:100%;translate:-50% 0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.13),transparent 70%);
}
.cta .wrap{position:relative;z-index:1}

/* ---------- 18. Reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.1s}
[data-reveal][data-d="2"]{transition-delay:.2s}
[data-reveal][data-d="3"]{transition-delay:.3s}
[data-reveal][data-d="4"]{transition-delay:.4s}
[data-reveal][data-d="5"]{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .hero-title .ln>span{animation:none;transform:none}
  .marquee-track{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- 19. Utilities ---------- */
.center{text-align:center}
.center .lede{margin-inline:auto}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-2{margin-bottom:2rem}.mb-3{margin-bottom:clamp(2rem,4vw,3.5rem)}
.max-60{max-width:60ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:1002;padding:1rem 1.5rem;background:#fff;color:#000}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.notice{
  display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.2rem;border:1px dashed var(--line);
  background:var(--chip);font-size:.72rem;line-height:1.7;color:var(--fg-2);
}
.notice b{color:var(--fg);font-weight:500}
code{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.9em;padding:.15em .4em;border:1px solid var(--line);background:var(--chip);border-radius:3px}