/* =========================================================
   Sidereal Tech Limited - siderealtech.com
   Global stylesheet
   ========================================================= */

/* ---------- 0. Fonts (self-hosted) ----------
   Inter and Space Grotesk, SIL Open Font License, served from our own domain.
   Variable files: one per subset covers every weight we use. Nothing is
   requested from Google, so the site makes no third-party requests at all.
   To add a subset, download the .woff2 from Google Fonts with a modern
   browser user agent and copy its unicode-range here verbatim. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- 1. Tokens ---------- */
:root{
  /* Neutrals */
  --ink:#0B0D17;
  --ink-soft:#242942;
  --body:#575C79;
  --muted:#6E7391;
  --line:#E7E9F4;
  --bg:#FFFFFF;
  --soft:#F4F6FE;
  --soft-2:#EDF1FF;

  /* Deep space */
  --deep:#060918;
  --deep-2:#0D1330;
  --deep-3:#161D45;

  /* Brand — Egyptian blue */
  --brand:#1034A6;        /* buttons + accents on light surfaces */
  --brand-ink:#0A2472;    /* eyebrow / label text on light surfaces */
  --brand-lift:#8095F0;   /* accents on the deep surfaces */
  --brand-hover:#2043C4;  /* button hover, and button fill on deep */

  /* Card accents (service tiles) */
  --c-violet:#B98BFF;
  --c-amber:#FFB35C;
  --c-lime:#CDE577;
  --c-cyan:#7FDCEC;
  --c-pink:#FF9ADB;
  --c-blue:#93AEFF;

  /* Shape */
  --r-xl:32px;
  --r-lg:24px;
  --r-md:16px;
  --r-sm:10px;
  --max:1200px;
  --gut:24px;

  /* Type */
  --f-display:"Space Grotesk","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-body:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--ink);
  margin:0;
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:700;
}
p{margin:0}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{padding:104px 0}
.section--tight{padding:72px 0}
.section--soft{background:var(--soft)}
.section--deep{background:var(--deep);color:#A8AEC9}
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{color:#fff}

.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ---------- 4. Type helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-body);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-ink);
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 4px rgba(16,52,166,.15);
}
.section--deep .eyebrow{color:var(--brand-lift)}
.section--deep .eyebrow::before{background:var(--brand-lift);box-shadow:0 0 0 4px rgba(128,149,240,.18)}

.h-xl{font-size:clamp(2.6rem,6.4vw,4.6rem)}
.h-lg{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.h-md{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.h-sm{font-size:1.2rem;letter-spacing:-.02em}

.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.7;color:var(--body);max-width:62ch}
.section--deep .lead{color:#A8AEC9}
.muted{color:var(--muted)}
.center{text-align:center}
.center .lead{margin-inline:auto}

.sec-head{max-width:760px;margin-bottom:56px}
.sec-head.center{margin-inline:auto}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:15px 28px;border-radius:999px;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn--primary{background:var(--brand);color:#fff;box-shadow:0 10px 28px -10px rgba(16,52,166,.6)}
.btn--primary:hover{background:var(--brand-hover);box-shadow:0 16px 34px -10px rgba(16,52,166,.72)}

.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#1B2036}

.btn--ghost{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}

.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#EDF1FF}

.btn--outline-light{border:1.5px solid rgba(255,255,255,.28);color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.center .btn-row{justify-content:center}

.textlink{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;color:var(--brand);font-size:15px;
}
.textlink svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(11,13,23,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}

.brand{display:flex;align-items:center;flex-shrink:0}
/* The lockup is 813x168 (4.84:1). Solid weight is used at these sizes on purpose:
   the outline cut has 3.5-unit walls, which fall below one device pixel under
   ~72px tall and turn to grey mush. Outline variants are for large use only. */
.brand__logo{height:34px;width:auto;display:block}
.site-footer .brand__logo{height:32px}

.nav__links{display:flex;align-items:center;gap:6px}
.nav__links a{
  position:relative;padding:9px 16px;border-radius:999px;
  font-size:15px;font-weight:500;color:var(--ink-soft);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav__links a:hover{background:var(--soft-2);color:var(--ink)}
.nav__links a.is-active{color:var(--brand);font-weight:600}

.nav__cta{display:flex;align-items:center;gap:12px}
.nav__cta .btn{padding:12px 22px;font-size:14px}

.burger{
  display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  display:none;border-top:1px solid var(--line);background:#fff;
  padding:14px var(--gut) 26px;
}
.mobile-nav.is-open{display:block;animation:drop .28s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile-nav a{
  display:block;padding:14px 4px;font-size:17px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-nav .btn{width:100%;margin-top:20px}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1100px 620px at 78% -8%,#14246E 0%,transparent 62%),
             radial-gradient(760px 520px at 8% 108%,#1B1E5E 0%,transparent 60%),
             var(--deep);
  color:#A8AEC9;
  padding:118px 0 0;
  isolation:isolate;
}
#stars{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:180px;z-index:-1;
  background:linear-gradient(to bottom,transparent,rgba(6,9,24,.85));
}
.hero__inner{max-width:920px}
.hero h1{color:#fff;font-size:clamp(2.7rem,6.6vw,5rem);letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--brand-lift)}

/* On the deep surfaces the base brand blue is too close to the background —
   lift the filled button one step so it still reads as the primary action. */
.hero .btn--primary,.section--deep .btn--primary{
  background:var(--brand-hover);box-shadow:0 10px 28px -10px rgba(32,67,196,.8);
}
.hero .btn--primary:hover,.section--deep .btn--primary:hover{background:#3055DC}
.hero__sub{margin-top:26px;font-size:clamp(1.02rem,1.6vw,1.24rem);line-height:1.72;color:#A8AEC9;max-width:64ch}
.hero .btn-row{margin-top:38px}

.hero__pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 10px;border-radius:999px;margin-bottom:30px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  font-size:13px;font-weight:500;color:#CBD2EC;letter-spacing:.01em;
}
.hero__pill b{
  background:var(--brand);color:#fff;font-weight:700;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;
}

/* Hero stat bar */
.hero__bar{
  margin-top:82px;border-top:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.hero__bar div{padding:32px 26px 40px;border-right:1px solid rgba(255,255,255,.12)}
.hero__bar div:first-child{padding-left:0}
.hero__bar div:last-child{border-right:0}
.hero__bar b{
  display:block;font-family:var(--f-display);font-size:clamp(1.9rem,3.4vw,2.6rem);
  font-weight:700;color:#fff;letter-spacing:-.035em;line-height:1;
}
.hero__bar span{
  display:block;margin-top:12px;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#8D97BF;line-height:1.5;
}

/* ---------- 8. Marquee ---------- */
.marquee{
  overflow:hidden;padding:26px 0;border-block:1px solid var(--line);background:#fff;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee__item{
  display:inline-flex;align-items:center;gap:14px;padding:0 26px;
  font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--muted);white-space:nowrap;
}
.marquee__item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--line)}

/* ---------- 9. Edge cards ---------- */
.edge{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 30px 36px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.edge:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(11,13,23,.35);border-color:#D6DCF5}
.edge__ico{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:26px;
  background:var(--soft-2);color:var(--brand-ink);
}
.edge__ico svg{width:25px;height:25px;stroke-width:1.6}
.edge h3{font-size:1.16rem;margin-bottom:12px;letter-spacing:-.02em}
.edge p{font-size:15px;line-height:1.65}

/* ---------- 10. Service tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);padding:32px 30px 120px;min-height:290px;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.tile:hover{transform:translateY(-7px);box-shadow:0 30px 55px -30px rgba(11,13,23,.45)}
.tile h3{font-size:1.5rem;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}
.tile p{font-size:14.5px;line-height:1.6;color:rgba(11,13,23,.72);max-width:30ch}
.tile__tag{
  font-family:var(--f-display);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(11,13,23,.72);margin-bottom:auto;padding-bottom:26px;
}
.tile__body{margin-top:auto}
.tile__num{
  position:absolute;right:20px;bottom:-22px;
  font-family:var(--f-display);font-size:8rem;font-weight:700;line-height:1;
  color:rgba(255,255,255,.45);letter-spacing:-.06em;pointer-events:none;
}
.t-violet{background:var(--c-violet)}
.t-amber{background:var(--c-amber)}
.t-lime{background:var(--c-lime)}
.t-cyan{background:var(--c-cyan)}
.t-pink{background:var(--c-pink)}
.t-blue{background:var(--c-blue)}

/* ---------- 11. Numbers ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.13);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--deep);padding:44px 30px 48px}
.stat b{
  display:block;font-family:var(--f-display);font-weight:700;color:#fff;
  font-size:clamp(2.2rem,4.6vw,3.4rem);letter-spacing:-.045em;line-height:1;
}
.stat span{display:block;margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#8D97BF;line-height:1.6}

/* ---------- 12. Process ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{position:relative;padding-top:30px;border-top:2px solid var(--line);counter-increment:s}
.step::before{
  content:"0" counter(s);
  font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:.1em;
  color:var(--brand);display:block;margin-bottom:16px;
}
.step::after{
  content:"";position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--brand);
  transition:width .7s var(--ease);
}
.step.is-in::after{width:100%}
.step h3{font-size:1.14rem;margin-bottom:11px}
.step p{font-size:14.7px;line-height:1.65}

/* ---------- 13. Vertical pills ---------- */
.pills{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:56px;padding-top:36px;border-top:1px solid var(--line);
}
.pills__label{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-right:10px;
}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px;border:1px solid var(--line);border-radius:999px;
  font-size:13.5px;font-weight:500;color:var(--ink-soft);background:#fff;
  transition:border-color .22s var(--ease);
}
.pill:hover{border-color:var(--ink-soft)}
.pill i{width:8px;height:8px;border-radius:50%;flex:none}

/* ---------- 14. Split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center}
.checks{margin-top:32px;display:grid;gap:16px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.6}
.checks svg{width:21px;height:21px;flex-shrink:0;margin-top:2px;color:var(--brand)}
.section--deep .checks svg{color:var(--brand-lift)}
.checks b{color:var(--ink);font-weight:600}
.section--deep .checks b{color:#fff}

.panel{
  background:linear-gradient(160deg,var(--deep-2),var(--deep));
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);
  padding:38px 34px;color:#A8AEC9;
}
.panel h4{color:#fff;font-size:1.05rem;margin-bottom:20px}
.panel__row{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:17px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:14.6px;
}
.panel__row:last-child{border-bottom:0;padding-bottom:0}
.panel__row b{color:#fff;font-family:var(--f-display);font-size:15.5px;letter-spacing:-.02em}
.panel__row span{color:#8D97BF;font-size:13px;text-align:right}
.chip{
  display:inline-block;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;background:rgba(128,149,240,.16);color:var(--brand-lift);
}

/* ---------- 15. Quote ---------- */
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 32px;
  display:flex;flex-direction:column;gap:22px;
}
.quote p{font-family:var(--f-display);font-size:1.1rem;line-height:1.5;color:var(--ink);letter-spacing:-.02em}
.quote footer{display:flex;align-items:center;gap:13px;font-size:14px}
.quote__av{width:40px;height:40px;border-radius:50%;background:var(--soft-2);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;color:var(--brand-ink);font-size:14px}
.quote__av--2{background:#DDE4FC;color:#12379E}
.quote__av--3{background:#C9D2F5;color:#0A2472}
.quote b{display:block;color:var(--ink);font-weight:600}
.quote small{color:var(--muted)}

/* ---------- 16. CTA band ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:radial-gradient(760px 420px at 15% 0%,#16307F 0%,transparent 62%),
             radial-gradient(620px 400px at 92% 110%,#1B2A6B 0%,transparent 58%),
             var(--deep-2);
  padding:78px 56px;text-align:center;
}
.cta h2{color:#fff;margin-bottom:20px}
.cta p{color:#A8AEC9;max-width:56ch;margin:0 auto 34px;font-size:1.05rem;line-height:1.7}

/* ---------- 17. Footer ---------- */
.site-footer{background:var(--deep);color:#8D97BF;padding:78px 0 34px;font-size:14.6px}
.footer__top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__brand .brand__name{color:#fff}
.footer__brand p{margin-top:20px;max-width:34ch;line-height:1.7}
.site-footer h4{color:#fff;font-size:12px;font-family:var(--f-body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.footer__col a,.footer__col li{display:block;padding:7px 0;transition:color .2s var(--ease)}
.footer__col a:hover{color:#fff}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:28px;flex-wrap:wrap;font-size:13.4px}
.footer__legal{display:flex;gap:22px;flex-wrap:wrap}
.footer__legal a:hover{color:#fff}
.social{display:flex;gap:10px;margin-top:26px}
.social a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);transition:background .22s var(--ease),border-color .22s var(--ease);
}
.social a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.social svg{width:16px;height:16px}

/* ---------- 18. Page hero (inner pages) ---------- */
.phero{
  background:radial-gradient(900px 480px at 82% -20%,#14246E 0%,transparent 62%),var(--deep);
  color:#A8AEC9;padding:82px 0 92px;position:relative;overflow:hidden;
}
.phero h1{color:#fff;font-size:clamp(2.3rem,5.4vw,3.9rem)}
.phero p{margin-top:22px;max-width:62ch;font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.72;color:#A8AEC9}
.crumb{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8D97BF;margin-bottom:22px}
.crumb a:hover{color:#fff}

/* ---------- 19. Model cards (solutions) ---------- */
.model{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:36px 34px;display:flex;flex-direction:column;gap:18px;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.model:hover{box-shadow:0 26px 50px -32px rgba(11,13,23,.4);border-color:#D6DCF5;transform:translateY(-4px)}
.model__code{
  align-self:flex-start;font-family:var(--f-display);font-size:12px;font-weight:700;
  letter-spacing:.14em;padding:7px 14px;border-radius:999px;background:var(--soft-2);color:var(--brand-ink);
}
.model h3{font-size:1.4rem}
.model p{font-size:15px;line-height:1.68}
.model ul{display:grid;gap:10px;margin-top:4px}
.model ul li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6}
.model ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--brand)}

/* ---------- 20. Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.field{display:grid;gap:9px;margin-bottom:20px}
.field label{font-size:13.5px;font-weight:600;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:15px;color:var(--ink);background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-height:132px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(16,52,166,.14);
}
.form-note{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.6}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:38px 36px;box-shadow:0 30px 60px -46px rgba(11,13,23,.5)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.info-item{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.info-item:last-child{border-bottom:0}
.info-item__ico{width:44px;height:44px;border-radius:13px;background:var(--soft-2);color:var(--brand-ink);display:grid;place-items:center;flex-shrink:0}
.info-item__ico svg{width:19px;height:19px}
.info-item b{display:block;color:var(--ink);font-family:var(--f-display);font-size:15.5px;letter-spacing:-.02em;margin-bottom:4px}
.info-item a{color:var(--brand);font-weight:500}
.info-item a:hover{text-decoration:underline}
.info-item p{font-size:14.6px}

/* ---------- 21. Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 22. Responsive ---------- */
@media (max-width:1024px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:32px}
  .split{grid-template-columns:1fr;gap:44px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero__bar{grid-template-columns:repeat(2,1fr)}
  .hero__bar div{padding-left:26px;border-bottom:1px solid rgba(255,255,255,.12)}
  .hero__bar div:nth-child(1),.hero__bar div:nth-child(3){padding-left:0}
  .hero__bar div:nth-child(2){border-right:0}
  .footer__top{grid-template-columns:1fr 1fr;gap:38px}
  .contact-grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:860px){
  .nav__links,.nav__cta .btn{display:none}
  .burger{display:flex}
  .g-3{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  :root{--gut:20px}
  .section{padding:72px 0}
  .section--tight{padding:56px 0}
  .g-2,.g-3,.g-4,.tiles,.steps,.two-col{grid-template-columns:1fr}
  .pills{margin-top:44px;padding-top:28px}
  .pills__label{width:100%;margin:0 0 4px}
  .stats{grid-template-columns:1fr}
  .hero{padding-top:78px}
  .hero__bar{grid-template-columns:1fr;margin-top:56px}
  .hero__bar div{padding:26px 0 !important;border-right:0}
  .hero__bar div:last-child{border-bottom:0}
  .cta{padding:56px 26px}
  .footer__top{grid-template-columns:1fr;gap:34px}
  .form-card{padding:28px 22px}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .tile{padding-bottom:96px;min-height:250px}
  .tile__num{font-size:6rem}
}

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

/* ---------- 24. Long-form prose (legal pages) ---------- */
.prose{max-width:76ch}
.prose h2{font-size:1.5rem;margin:52px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.14rem;margin:30px 0 12px}
.prose p{margin-bottom:18px;font-size:16px;line-height:1.75}
.prose ul{margin:0 0 20px;display:grid;gap:10px}
.prose ul li{position:relative;padding-left:22px;font-size:16px;line-height:1.7}
.prose ul li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:2px;background:var(--brand)}
.prose a{color:var(--brand);font-weight:500}
.prose a:hover{text-decoration:underline}
.notice{
  border:1px solid #FFD9A8;background:#FFF7EC;border-radius:var(--r-md);
  padding:20px 22px;font-size:14.6px;line-height:1.7;margin-bottom:40px;color:#7A4C0B;
}
.notice b{color:#5E3906}

/* ---------- 25. Star-chart graticule ---------- */
/* A faint lat/long grid under the deep surfaces — a nod to the star charts the
   company is named after, and a way to give dark areas texture without noise. */
.hero::before,.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,.055) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.055) 0 1px,transparent 1px 96px);
}
.hero::before{z-index:-1}
.cta::before{z-index:0}
.cta>*{position:relative;z-index:1}
.hero .wrap{position:relative;z-index:1}

.figcap{margin-top:28px;font-size:12.5px;color:var(--muted);line-height:1.65;max-width:70ch}

/* ---------- 26. Funnel diagram ---------- */
.funnel{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.funnel__stage{display:grid;grid-template-rows:auto 210px auto}
.funnel__idx{
  font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--muted);display:block;
}
.funnel__name{
  font-family:var(--f-display);font-size:15px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);display:block;margin-top:6px;line-height:1.25;
}
.funnel__barwrap{display:flex;align-items:flex-end;padding:20px 0 16px}
.funnel__bar{
  width:100%;height:var(--p);background:var(--c);border-radius:10px 10px 3px 3px;
  transition:height .8s var(--ease),width .8s var(--ease);
}
.reveal .funnel__bar{height:6px}
.reveal.is-in .funnel__bar{height:var(--p)}
.funnel__foot{border-top:1px solid var(--line);padding-top:16px;min-height:58px}
.funnel__badge{
  display:inline-block;font-family:var(--f-display);font-size:12px;font-weight:700;
  letter-spacing:.1em;padding:6px 12px;border-radius:999px;
  background:var(--brand);color:#fff;
}
.funnel__pays{display:block;margin-top:8px;font-size:11.5px;color:var(--muted);line-height:1.45}
.funnel__none{color:var(--line);font-size:18px;line-height:1}

/* ---------- 27. Sample report ---------- */
.report{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.report th{
  text-align:left;font-family:var(--f-body);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#7A85AD;
  padding:0 0 13px;border-bottom:1px solid rgba(255,255,255,.14);white-space:nowrap;
}
.report td{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#A8AEC9}
.report tr:last-child td{border-bottom:0}
.report .num{text-align:right;font-family:var(--f-mono);font-size:13px;color:#fff}
.report .src{font-family:var(--f-mono);font-size:12.5px;color:#CBD2EC}
.report th.num{text-align:right}
.stat-chip{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.stat-chip--up{background:rgba(128,149,240,.18);color:#A9B7EF}
.stat-chip--watch{background:rgba(240,192,120,.16);color:#F0C078}
.stat-chip--cut{background:rgba(240,128,149,.16);color:#F08095}
.report-note{
  margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;color:#7A85AD;line-height:1.65;
}
.report-note b{color:#A8AEC9;font-weight:600}

/* ---------- 28. Market map ---------- */
.geo{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:0;
  background:linear-gradient(160deg,var(--deep-2),var(--deep));
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);overflow:hidden;
}
/* min-width:0 is load-bearing. Without it the 2:1 canvas inherits an automatic
   minimum width transferred from the stretched row height, which swallows the
   readout column whole. Keep aspect-ratio on the inner box, never on the cell. */
.geo__plot{
  position:relative;min-width:0;display:flex;align-items:center;
  padding:20px;border-right:1px solid rgba(255,255,255,.1);
}
.geo__canvas{position:relative;width:100%;aspect-ratio:2/1}
.geo__gas,.geo__band,.geo__vig,.geo__sky{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}
/* Layer order: gas -> band -> vignette -> graticule/stars/links -> markers.
   The vignette sits under the sky so the grid and stars stay crisp while the
   gas recedes at the edges. All three are confined to .geo__canvas, so the
   readout column's text contrast is untouched. */
.geo__band{background:linear-gradient(104deg,transparent 33%,rgba(150,175,255,.13) 50%,transparent 67%)}
.geo__vig{background:radial-gradient(118% 132% at 50% 44%,transparent 40%,rgba(3,5,16,.78) 100%)}

.geo__grat{fill:none;stroke:rgba(255,255,255,.075);stroke-width:1}
.geo__star{fill:#fff}
/* lifted from .15/.6 — the gas layer swallowed the lines at the old values */
.geo__link{
  stroke:var(--brand-lift);stroke-width:1;opacity:.25;
  transition:opacity .35s var(--ease),stroke .35s var(--ease);
}
.geo__link.is-lit{opacity:.72;stroke:#fff}

.geo__pin{
  position:absolute;transform:translate(-50%,-50%);
  width:auto;padding:9px;background:none;border:0;cursor:pointer;line-height:0;
}
/* core star */
.geo__pin i{
  display:block;position:relative;border-radius:50%;background:#E8EEFF;
  box-shadow:0 0 9px 1px rgba(128,149,240,.75);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .25s var(--ease);
}
/* the nebula itself.
   No mix-blend-mode here: .geo__pin carries a transform, which opens a stacking
   context and isolates the blend, so screen could never reach a neighbouring
   cloud. Plain alpha compositing at these opacities looks the same. */
.geo__pin i::before{
  content:"";position:absolute;left:50%;top:50%;
  width:var(--cloud);height:var(--cloud);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.9;
  background:radial-gradient(circle,
    rgba(150,170,255,.52) 0%,rgba(93,116,224,.3) 30%,
    rgba(16,52,166,.16) 56%,transparent 74%);
  transition:transform .38s var(--ease),opacity .38s var(--ease);
}
/* star scatter inside the cloud, one element, no extra DOM */
.geo__pin i::after{
  content:"";position:absolute;left:50%;top:50%;width:1.6px;height:1.6px;
  border-radius:50%;background:rgba(255,255,255,.7);pointer-events:none;
  box-shadow:
    -19px -11px 0 rgba(255,255,255,.48), 15px -17px 0 rgba(255,255,255,.36),
     23px  10px 0 rgba(255,255,255,.44),-13px  20px 0 rgba(255,255,255,.3),
    -27px   7px 0 rgba(255,255,255,.26),  9px  23px 0 rgba(255,255,255,.34),
     31px  -7px 0 rgba(255,255,255,.2), -7px -25px 0 rgba(255,255,255,.28);
}
.geo__pin[data-tier="1"] i{--cloud:88px;width:9px;height:9px}
.geo__pin[data-tier="2"] i{--cloud:70px;width:7px;height:7px}
.geo__pin[data-tier="3"] i{--cloud:56px;width:6px;height:6px}

.geo__pin:hover i,.geo__pin:focus-visible i{transform:scale(1.3);background:#fff}
.geo__pin:hover i::before,.geo__pin:focus-visible i::before{
  transform:translate(-50%,-50%) scale(1.16);opacity:1;
}
.geo__pin[aria-pressed="true"] i{
  background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 20px 5px rgba(128,149,240,.85);
}
.geo__pin[aria-pressed="true"] i::before{transform:translate(-50%,-50%) scale(1.26);opacity:1}
.geo__tip{
  position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%);
  background:#fff;color:var(--ink);font-size:11.5px;font-weight:600;line-height:1;
  padding:7px 11px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease);
}
.geo__pin:hover .geo__tip,.geo__pin:focus-visible .geo__tip{opacity:1}

.geo__read{padding:36px 34px;display:flex;flex-direction:column;gap:0}
.geo__eyebrow{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7A85AD;
}
.geo__name{
  font-family:var(--f-display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;
  color:#fff;margin:12px 0 0;line-height:1.15;
}
.geo__tier{
  display:inline-block;align-self:flex-start;margin-top:14px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;background:rgba(128,149,240,.16);color:var(--brand-lift);
}
.geo__row{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.geo__row:first-of-type{border-top:0;padding-top:0}
.geo__label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#7A85AD;margin-bottom:9px;
}
.geo__val{font-size:14.5px;color:#CBD2EC;line-height:1.6}
.geo__hint{margin-top:auto;padding-top:26px;font-size:12px;color:#7A85AD;line-height:1.55}

/* ---------- 29. Edge micro-diagrams ---------- */
/* Replaces the tinted-square stock icons: 1px marks that draw the idea itself. */
.edge__mark{width:66px;height:42px;margin-bottom:26px;color:var(--brand);overflow:visible}
.edge__mark [stroke]{stroke-linecap:round;stroke-linejoin:round}

/* ---------- 30. Ad format frames ---------- */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.frame{display:flex;flex-direction:column;gap:18px}
.phone{
  border:1.5px solid var(--line);border-radius:26px;background:#fff;
  padding:9px;aspect-ratio:10/18;display:flex;flex-direction:column;position:relative;
  width:100%;max-width:226px;margin-inline:auto;
}
.tiles--2{grid-template-columns:repeat(2,1fr)}
.phone::before{
  content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:44px;height:5px;border-radius:99px;background:var(--line);z-index:2;
}
.phone__screen{
  flex:1;border-radius:19px;background:var(--soft);overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}
.frame h4{font-size:1.05rem;letter-spacing:-.02em}
.frame p{font-size:14px;line-height:1.6;margin-top:8px}

/* rewarded video */
.ph-video{flex:1;background:var(--deep-2);display:grid;place-items:center;position:relative}
.ph-video::after{
  content:"";width:0;height:0;border-left:20px solid rgba(255,255,255,.9);
  border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px;
}
.ph-skip{
  position:absolute;top:12px;right:12px;font-size:8.5px;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.3);
  padding:4px 9px;border-radius:99px;
}
.ph-reward{padding:14px 13px;background:#fff;display:grid;gap:8px}
.ph-reward span{height:8px;border-radius:99px;background:var(--line);display:block}
.ph-reward span:first-child{width:62%;background:var(--brand)}
.ph-reward span:last-child{width:88%}

/* playable */
.ph-play{flex:1;margin:13px;border:1.5px dashed #B9C4E8;border-radius:14px;position:relative;display:grid;place-items:center}
.ph-play i{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--brand);display:block;position:relative}
.ph-play i::after{
  content:"";position:absolute;inset:-11px;border-radius:50%;border:1.5px solid var(--brand);opacity:.3;
}
.ph-cta{margin:0 13px 13px;height:30px;border-radius:9px;background:var(--brand)}

/* native feed */
.ph-feed{flex:1;padding:13px;overflow:hidden;position:relative}
.ph-feed__track{display:grid;gap:9px;align-content:start}
.ph-feed__track div{height:26px;border-radius:7px;background:#fff;border:1px solid var(--line)}
.ph-feed__track div.is-ad{
  height:66px;border-color:var(--brand);background:var(--soft-2);position:relative;
}
.ph-feed__track div.is-ad::after{
  content:"AD";position:absolute;top:7px;right:8px;font-size:7.5px;font-weight:700;
  letter-spacing:.1em;color:var(--brand-ink);
}

/* ---------- 35. Ad format animation ----------
   Each mockup plays back the format it depicts. Everything is gated on
   .formats.is-playing, which main.js adds only while the section is on screen
   and only when the visitor has not asked for reduced motion — so nothing
   animates off-screen, and the static base state is a sensible still frame. */
.ph-progress{
  position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:rgba(255,255,255,.16);
}
.ph-progress::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:45%;
  background:var(--brand-lift);
}
.ph-cta{position:relative;overflow:hidden}
.ph-cta::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}

.formats.is-playing .ph-progress::after{animation:phPlay 5s linear infinite}
.formats.is-playing .ph-video::after{animation:phBeat 2.5s ease-in-out infinite}
.formats.is-playing .ph-skip{animation:phSkip 5s linear infinite}
.formats.is-playing .ph-reward span:first-child{animation:phFill 5s ease-in-out infinite}
.formats.is-playing .ph-play i{animation:phTap 3.2s ease-in-out infinite}
.formats.is-playing .ph-play i::after{animation:phRipple 3.2s ease-out infinite}
.formats.is-playing .ph-cta::after{animation:phSweep 3.2s ease-in-out infinite}
.formats.is-playing .ph-feed__track{animation:phScroll 17s linear infinite}
.formats.is-playing .ph-feed__track div.is-ad{animation:phAd 17s ease-in-out infinite}

@keyframes phPlay{from{width:0}to{width:100%}}
@keyframes phBeat{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:1}}
@keyframes phSkip{0%,55%{opacity:.5}70%,100%{opacity:1;border-color:rgba(255,255,255,.6)}}
@keyframes phFill{0%{width:10%}70%,100%{width:62%}}
@keyframes phTap{0%,68%,100%{transform:scale(1)}77%{transform:scale(.86)}86%{transform:scale(1.05)}}
@keyframes phRipple{0%,68%{transform:scale(.55);opacity:0}78%{opacity:.6}100%{transform:scale(2);opacity:0}}
@keyframes phSweep{0%,52%{transform:translateX(-100%)}82%,100%{transform:translateX(100%)}}
/* -50% would land half a gap short; the extra 4.5px is half of the 9px gap */
@keyframes phScroll{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 4.5px))}}
@keyframes phAd{0%,38%,100%{box-shadow:0 0 0 0 rgba(16,52,166,0)}
                50%{box-shadow:0 0 0 3px rgba(16,52,166,.18)}}

/* ---------- 32. Model comparison table ---------- */
/* Replaces four identical cards. These four things are genuinely comparable,
   so a table is both more useful and a break from the grid rhythm. */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.cmp{width:100%;min-width:780px;border-collapse:collapse;text-align:left}
.cmp th{
  font-family:var(--f-body);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding:0 20px 16px 0;
  border-bottom:1.5px solid var(--ink);white-space:nowrap;vertical-align:bottom;
}
.cmp td{padding:26px 20px 26px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:14.5px;line-height:1.6}
.cmp tr:last-child td{border-bottom:0}
.cmp tr:target td:first-child{box-shadow:inset 3px 0 0 var(--brand);padding-left:16px}
.cmp__model{min-width:250px}
.cmp__model .model__code{margin-bottom:12px}
.cmp__model b{
  display:block;font-family:var(--f-display);font-size:1.12rem;font-weight:700;
  letter-spacing:-.025em;color:var(--ink);margin-bottom:8px;
}
.cmp__model span{display:block;font-size:14px;line-height:1.6;color:var(--body);max-width:34ch}
.cmp__event{font-family:var(--f-mono);font-size:13px;color:var(--ink);white-space:nowrap}
.cmp__risk{font-weight:600;color:var(--ink)}
.cmp-note{margin-top:20px;font-size:12.5px;color:var(--muted);line-height:1.6}

/* ---------- 33. Sticky-scroll process ---------- */
.sticky-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.sticky-split__aside{position:sticky;top:112px}
.sticky-split__count{
  display:flex;align-items:baseline;gap:4px;margin-top:32px;
  font-family:var(--f-display);letter-spacing:-.03em;color:var(--ink);
}
.sticky-split__count b{font-size:3.2rem;font-weight:700;line-height:1;color:var(--brand)}
.sticky-split__count span{font-size:1.2rem;font-weight:700;color:var(--line)}

.pstep{padding:36px 0 40px;border-top:1px solid var(--line);position:relative}
.pstep:first-child{border-top:0;padding-top:0}
.pstep__idx{
  font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--muted);display:block;margin-bottom:14px;transition:color .35s var(--ease);
}
.pstep h3{font-size:1.45rem;margin-bottom:14px;transition:color .35s var(--ease)}
.pstep p{font-size:15.5px;line-height:1.7;max-width:52ch}
.pstep.is-current .pstep__idx{color:var(--brand)}
.pstep::after{
  content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:var(--brand);
  transition:width .6s var(--ease);
}
.pstep.is-current::after{width:100%}
.pstep:first-child::after{display:none}

/* ---------- 34. Editorial break ---------- */
/* One section with no cards, no icons, no grid — just type. */
.editorial{max-width:44ch;margin-inline:auto;text-align:center}
.editorial p{
  font-family:var(--f-display);font-weight:500;letter-spacing:-.025em;
  font-size:clamp(1.32rem,2.5vw,1.95rem);line-height:1.42;color:var(--ink);
}
.editorial p + p{margin-top:26px}
.editorial em{font-style:normal;color:var(--brand)}
.editorial cite{
  display:block;margin-top:34px;font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

/* ---------- 31. Phase-4 responsive ---------- */
@media (max-width:1024px){
  .geo{grid-template-columns:1fr}
  .geo__plot{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .formats{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .sticky-split{grid-template-columns:1fr;gap:40px}
  .sticky-split__aside{position:static}
  .sticky-split__count{display:none}
  .funnel{grid-template-columns:1fr;gap:0}
  .funnel__stage{
    grid-template-rows:none;grid-template-columns:118px 1fr 78px;
    align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);
  }
  .funnel__stage:last-child{border-bottom:0}
  .funnel__name{margin-top:3px;font-size:14px}
  .funnel__barwrap{padding:0;height:28px;align-items:center}
  .funnel__bar{height:100%;width:var(--p);border-radius:4px}
  .reveal .funnel__bar{height:100%;width:6px}
  .reveal.is-in .funnel__bar{width:var(--p)}
  .funnel__foot{border-top:0;padding-top:0;min-height:0;text-align:right}
  .funnel__pays{display:none}
  .report th:nth-child(3),.report td:nth-child(3){display:none}
}
@media (max-width:640px){
  .formats{grid-template-columns:1fr}
  .tiles--2{grid-template-columns:1fr}
  .geo__read{padding:28px 24px}
  .report th:nth-child(4),.report td:nth-child(4){display:none}
  /* The canvas is only ~300px wide here — shrink the clouds so neighbouring
     markets stay distinguishable, and drop the tooltip since tapping fills the
     readout. The star scatter is wider than the cloud at this size, so it goes. */
  .geo__plot{padding:14px}
  .geo__pin{padding:7px}
  .geo__pin[data-tier="1"] i{--cloud:44px;width:7px;height:7px}
  .geo__pin[data-tier="2"] i{--cloud:36px;width:6px;height:6px}
  .geo__pin[data-tier="3"] i{--cloud:30px;width:5px;height:5px}
  .geo__pin i::after{display:none}
  .geo__tip{display:none}
}