/* ============================================================
   SOUNDPAYS  ·  style.css
   Game responsive experiences.
   ------------------------------------------------------------
   0.  Tokens
   1.  Reset and base
   2.  Layout shells
   3.  Typography primitives
   4.  Buttons, chips, links
   5.  Navigation
   6.  Hero
   7.  Marquee
   8.  Sections, ornaments, textures
   9.  Cards, panels, tiles, steps
   10. Integration, privacy, stats
   11. Accordion
   12. Contact form
   13. Sub-page template (page.html)
   14. Footer
   15. Reveal and motion
   16. Responsive
   ============================================================ */

/* ── 0. TOKENS ───────────────────────────────────────────── */
:root{
  /* brand spectrum, sampled from the Soundpays mark */
  --coral:#E96B71;
  --rose:#C56585;
  --purple:#8A5999;
  --indigo:#5E82BD;
  --blue:#2F92D1;
  --blue-deep:#1B72AC;
  --cyan:#4EB7D3;
  --teal:#5CC9C4;
  --lime:#A8CC8E;
  --gold:#E5CB4F;

  /* warm neutrals */
  --paper:#FBF7F2;
  --paper-2:#F6EEE4;
  --paper-3:#F1E6D9;
  --card:#FFFFFF;
  --ink:#0B1015;
  --ink-2:#1A222B;
  --muted:#5C6874;
  --muted-2:#8A949E;
  --line:rgba(11,16,21,.10);
  --line-soft:rgba(11,16,21,.06);

  /* ink surfaces */
  --ink-bg:#0B1015;
  --ink-bg-2:#111922;
  --on-ink:#F4F1EC;
  --on-ink-muted:rgba(244,241,236,.66);
  --on-ink-line:rgba(244,241,236,.14);

  /* gradients */
  --grad-brand:linear-gradient(100deg,var(--coral) 0%,var(--purple) 32%,var(--blue) 64%,var(--teal) 84%,var(--gold) 100%);
  --grad-cta:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue) 46%,var(--teal) 100%);
  --grad-cta-hover:linear-gradient(135deg,var(--blue) 0%,var(--cyan) 46%,var(--teal) 100%);

  /* type */
  --font:'Inter',system-ui,-apple-system,'SF Pro Text','Segoe UI',Helvetica,Arial,sans-serif;
  --fs-hero:clamp(2.85rem,6.4vw,5.4rem);
  --fs-h2:clamp(1.95rem,4.3vw,3.5rem);
  --fs-h3:clamp(1.12rem,1.6vw,1.35rem);
  --fs-lead:clamp(1.04rem,1.45vw,1.3rem);
  --fs-body:clamp(.98rem,1.15vw,1.06rem);
  --fs-small:.875rem;
  --fs-micro:.75rem;

  /* spacing scale (4px base) */
  --s1:.25rem;  --s2:.5rem;   --s3:.75rem;  --s4:1rem;
  --s5:1.5rem;  --s6:2rem;    --s7:2.5rem;  --s8:3rem;
  --s9:4rem;    --s10:5rem;   --s11:6.5rem; --s12:8.5rem;
  --gutter:clamp(1.25rem,4.4vw,2.75rem);
  --section-y:clamp(3.25rem,6.5vw,6.5rem);

  /* radii */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;

  /* elevation */
  --sh-1:0 1px 2px rgba(11,16,21,.05),0 4px 14px rgba(11,16,21,.05);
  --sh-2:0 2px 6px rgba(11,16,21,.05),0 14px 40px rgba(11,16,21,.08);
  --sh-3:0 10px 30px rgba(11,16,21,.09),0 40px 90px rgba(11,16,21,.13);
  --sh-brand:0 14px 34px rgba(47,146,209,.28);

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s; --t:.32s; --t-slow:.62s;

  --nav-h:74px;
}

/* ── 1. RESET AND BASE ───────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  overflow-x:hidden;
}

body{
  margin:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video{max-width:100%;display:block}
img{height:auto}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.032em;line-height:1.06}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
hr{border:0}

::selection{background:rgba(47,146,209,.20)}

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:var(--s4);top:-100px;z-index:200;
  background:var(--ink);color:var(--on-ink);
  padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-size:var(--fs-small);font-weight:500;
  transition:top var(--t) var(--ease);
}
.skip-link:focus{top:var(--s4)}

/* ── 2. LAYOUT SHELLS ────────────────────────────────────── */
.shell{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--narrow{max-width:880px}
.shell--reading{max-width:760px}

.section{
  position:relative;
  padding-block:var(--section-y);
  overflow:hidden;
}

.section--warm{
  background:
    radial-gradient(120% 70% at 12% 0%,rgba(233,107,113,.07) 0%,rgba(233,107,113,0) 58%),
    radial-gradient(110% 76% at 92% 24%,rgba(92,201,196,.09) 0%,rgba(92,201,196,0) 60%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 46%,var(--paper) 100%);
}
.section--warm::before{
  content:"";position:absolute;inset:0;
  background-image:url("images/pattern-dots.svg");
  background-size:26px 26px;
  opacity:.5;
  pointer-events:none;
}

.section--ink{
  background:
    radial-gradient(90% 60% at 82% 6%,rgba(47,146,209,.20) 0%,rgba(47,146,209,0) 62%),
    radial-gradient(80% 60% at 8% 92%,rgba(138,89,153,.22) 0%,rgba(138,89,153,0) 60%),
    linear-gradient(180deg,var(--ink-bg) 0%,var(--ink-bg-2) 52%,var(--ink-bg) 100%);
  color:var(--on-ink);
}
.section--ink h2,.section--ink h3,.section--ink h4{color:var(--on-ink)}
.section--ink p{color:var(--on-ink-muted)}

/* ── 3. TYPOGRAPHY PRIMITIVES ────────────────────────────── */
.kicker{
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-deep);
  margin-bottom:var(--s4);
}
.kicker--on{color:var(--cyan)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.46rem .95rem .46rem .7rem;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  box-shadow:var(--sh-1);
}
.eyebrow__dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--grad-brand);
  box-shadow:0 0 0 4px rgba(47,146,209,.14);
  animation:pulseDot 2.6s var(--ease) infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 3px rgba(47,146,209,.16)}
  50%{box-shadow:0 0 0 8px rgba(47,146,209,0)}
}

.grad-text{
  background:var(--grad-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-size:220% 100%;
  animation:gradShift 14s var(--ease) infinite alternate;
}
@keyframes gradShift{from{background-position:0% 50%}to{background-position:100% 50%}}

.section__head{max-width:820px;margin-inline:auto;text-align:center;margin-bottom:clamp(2rem,3.6vw,3.25rem)}
.section__head--left{margin-inline:0;text-align:left}
.section__title{font-size:var(--fs-h2);line-height:1.06}
.section__lead{
  margin-top:var(--s5);
  font-size:var(--fs-lead);
  line-height:1.58;
  color:var(--muted);
  font-weight:400;
}
.section__head--on-ink .section__lead{color:var(--on-ink-muted)}

/* ── 4. BUTTONS, CHIPS, LINKS ────────────────────────────── */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.5rem;
  border-radius:var(--r-pill);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:-.005em;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out),
             background-color var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease);
  will-change:transform;
}
.btn--lg{padding:1.02rem 1.9rem;font-size:1rem}
.btn--block{width:100%}

.btn--primary{
  color:#fff;
  background:var(--grad-cta);
  background-size:180% 180%;
  box-shadow:var(--sh-brand);
}
.btn--primary:hover{
  background-image:var(--grad-cta-hover);
  transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(47,146,209,.36);
}
.btn--primary:active{transform:translateY(0) scale(.985)}

.btn--outline{
  color:var(--ink);
  border:1px solid var(--line);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.btn--outline:hover{
  border-color:rgba(47,146,209,.5);
  background:#fff;
  transform:translateY(-2px);
  box-shadow:var(--sh-2);
}
.btn--outline:active{transform:translateY(0) scale(.985)}

.btn--quiet{color:var(--ink);padding:.6rem .95rem}
.btn--quiet:hover{color:var(--blue-deep)}

.btn__icon{
  width:20px;height:20px;flex:0 0 20px;
  filter:brightness(0) invert(1);
  transition:transform var(--t) var(--ease-out);
}
.btn:hover .btn__icon{transform:translateX(4px)}

/* click ripple, injected by main.js */
.btn .ripple{
  position:absolute;border-radius:50%;transform:scale(0);
  background:rgba(255,255,255,.42);
  pointer-events:none;
  animation:ripple .62s var(--ease-out) forwards;
}
.btn--outline .ripple,.btn--quiet .ripple{background:rgba(47,146,209,.22)}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

.btn__spinner{
  display:none;width:17px;height:17px;
  border:2px solid rgba(255,255,255,.42);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-busy .btn__label{opacity:.55}
.btn.is-busy .btn__spinner{display:block}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:var(--s6);
  font-weight:600;font-size:var(--fs-small);
  color:var(--blue-deep);
  padding-bottom:2px;
  background-image:linear-gradient(var(--blue-deep),var(--blue-deep));
  background-repeat:no-repeat;
  background-size:0% 1px;
  background-position:0 100%;
  transition:background-size var(--t) var(--ease-out);
}
.link-arrow img{width:20px;height:20px;transition:transform var(--t) var(--ease-out)}
.link-arrow:hover{background-size:100% 1px}
.link-arrow:hover img{transform:translateX(5px)}

.chip{
  display:inline-flex;align-items:center;
  padding:.42rem .85rem;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  box-shadow:var(--sh-1);
}

/* ── 5. NAVIGATION ───────────────────────────────────────── */
.site-nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  width:100%;
  transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             backdrop-filter var(--t) var(--ease),border-color var(--t) var(--ease);
  border-bottom:1px solid transparent;
}
.site-nav.is-stuck,.site-nav--solid{
  background:rgba(251,247,242,.78);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom-color:var(--line-soft);
  box-shadow:0 1px 24px rgba(11,16,21,.05);
}
.site-nav__inner{
  height:var(--nav-h);
  display:flex;align-items:center;gap:var(--s5);
}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brand__logo{
  width:154px;height:auto;      /* 576 x 221 native, ratio preserved */
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-out);
}
.brand:hover .brand__logo{opacity:.72;transform:translateY(-1px)}

.site-nav__links{display:flex;align-items:center;gap:var(--s5);margin-left:auto}
.site-nav__links a{
  position:relative;
  font-size:var(--fs-small);font-weight:500;color:var(--muted);
  padding:.35rem 0;
  transition:color var(--t) var(--ease);
}
.site-nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--grad-brand);
  transition:width var(--t) var(--ease-out);
}
.site-nav__links a:hover{color:var(--ink)}
.site-nav__links a:hover::after{width:100%}

.site-nav__actions{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  margin-left:auto;
  transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.nav-toggle__bar{
  display:block;width:17px;height:1.6px;border-radius:2px;background:var(--ink);
  transition:transform var(--t) var(--ease-out),opacity var(--t) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* full height sheet: nothing from the page shows through behind it */
.nav-drawer{
  position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;
  z-index:99;
  display:flex;flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:var(--s6) var(--gutter) calc(var(--s8) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-soft);
  background:
    radial-gradient(120% 50% at 8% 0%,rgba(233,107,113,.09) 0%,rgba(233,107,113,0) 60%),
    radial-gradient(110% 50% at 94% 26%,rgba(92,201,196,.10) 0%,rgba(92,201,196,0) 60%),
    var(--paper);
  animation:drawerIn .34s var(--ease-out) both;
}
@keyframes drawerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav-drawer[hidden]{display:none}
.nav-drawer__links{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s6)}
.nav-drawer .btn--block{margin-top:auto}
.nav-drawer__links a{
  padding:.78rem 0;
  font-size:1.06rem;font-weight:500;
  border-bottom:1px solid var(--line-soft);
  transition:color var(--t) var(--ease),padding-left var(--t) var(--ease-out);
}
.nav-drawer__links a:hover{color:var(--blue-deep);padding-left:.4rem}

body.nav-open{overflow:hidden}

/* ── 6. HERO ─────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(2.5rem,7vw,5.5rem));
  padding-bottom:clamp(3.5rem,8vw,7rem);
  overflow:hidden;
  background:
    radial-gradient(130% 90% at 8% -10%,rgba(233,107,113,.14) 0%,rgba(233,107,113,0) 55%),
    radial-gradient(120% 80% at 96% 8%,rgba(92,201,196,.16) 0%,rgba(92,201,196,0) 58%),
    radial-gradient(100% 70% at 50% 108%,rgba(138,89,153,.10) 0%,rgba(138,89,153,0) 60%),
    linear-gradient(180deg,#FFFDFA 0%,var(--paper) 52%,var(--paper-2) 100%);
}

.hero__field{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__arcs{
  position:absolute;top:-24%;left:-16%;
  width:min(1120px,132vw);
  aspect-ratio:1/1;                 /* keeps the 900x900 SVG perfectly round */
  overflow:visible;
  opacity:.34;
  transition:opacity .5s var(--ease-out),filter .5s var(--ease-out);
  animation:driftArcs 26s var(--ease) infinite alternate;
}
.hero__ring{transform-box:view-box;transform-origin:120px 140px}

/* the moment reaches the hero: the contour lines already on the page wake up,
   ring by ring, travelling outward from the top left towards the phone */
.hero.is-moment .hero__arcs{opacity:.62;filter:drop-shadow(0 0 10px rgba(47,146,209,.30))}
.hero.is-moment .hero__ring{
  animation:ringWake 1.05s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i) * 44ms);
}
@keyframes ringWake{
  0%  {stroke-width:1.5;transform:scale(1)}
  18% {stroke-width:4.2;transform:scale(1.014)}
  46% {stroke-width:2.2;transform:scale(1.005)}
  100%{stroke-width:1.5;transform:scale(1)}
}
@keyframes driftArcs{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2.5%,1.5%,0) scale(1.05)}}

.hero__orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.hero__orb--a{
  width:min(460px,58vw);aspect-ratio:1/1;top:4%;right:-8%;
  background:radial-gradient(circle at 34% 34%,rgba(78,183,211,.60),rgba(78,183,211,0) 68%);
  animation:floatOrb 17s var(--ease) infinite alternate;
}
.hero__orb--b{
  width:min(380px,52vw);aspect-ratio:1/1;bottom:-6%;left:6%;
  background:radial-gradient(circle at 60% 40%,rgba(233,107,113,.46),rgba(233,107,113,0) 70%);
  animation:floatOrb 21s var(--ease) infinite alternate-reverse;
}
@keyframes floatOrb{from{transform:translate3d(0,0,0)}to{transform:translate3d(-4%,5%,0)}}

.hero__grain{
  position:absolute;inset:0;
  background:url("images/pattern-grain.svg") repeat;
  background-size:220px 220px;
  opacity:.30;
  mix-blend-mode:multiply;
}

.hero__inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
}
.hero__copy{min-width:0}
.hero__title{
  margin-top:var(--s5);
  font-size:var(--fs-hero);
  font-weight:600;
  letter-spacing:-.042em;
  line-height:.96;
}
.hero__lead{
  margin-top:var(--s5);
  max-width:44ch;
  font-size:var(--fs-lead);
  line-height:1.56;
  color:var(--muted);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7)}

.hero__proof{
  display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6);
  margin-top:var(--s8);
  padding-top:var(--s5);
  border-top:1px solid var(--line-soft);
}
.hero__proof li{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-small);color:var(--muted);font-weight:500}
.hero__proof img{width:28px;height:28px;flex:0 0 28px}

/* ── hero device: a physical phone, a real club app ─────────── */
.hero__stage{position:relative;display:flex;justify-content:center;min-width:0;--phone-w:clamp(248px,34vh,352px)}

.phone{
  position:relative;
  width:var(--phone-w);
  max-width:86%;
  z-index:2;
  transform-style:preserve-3d;
}

.phone__frame{
  container-type:inline-size;
  position:relative;z-index:3;
  aspect-ratio:393/852;
  border-radius:13.6%/6.3%;
  padding:1.9%;
  background:
    linear-gradient(148deg,#8C97A4 0%,#3A434E 14%,#1A222C 34%,#0C1117 58%,#2C3540 82%,#69737F 100%);
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.30) inset,
    0 1px 1px rgba(255,255,255,.22) inset,
    0 -1px 2px rgba(0,0,0,.55) inset,
    0 18px 30px rgba(11,16,21,.16),
    0 42px 70px rgba(11,16,21,.20),
    0 90px 140px rgba(11,16,21,.16);
}

/* side hardware */
.phone__side{
  position:absolute;z-index:1;
  border-radius:2px;
  background:linear-gradient(180deg,#6E7885,#333C46 40%,#1B222B);
  box-shadow:0 1px 1px rgba(255,255,255,.16) inset;
}
.phone__side--silent{left:-1.5px;top:15.5%;width:3px;height:3.2%}
.phone__side--up{left:-1.7px;top:22%;width:3.2px;height:6.4%}
.phone__side--down{left:-1.7px;top:30.5%;width:3.2px;height:6.4%}
.phone__side--power{right:-1.7px;top:25%;width:3.2px;height:9.4%}

/* glass */
.phone__gloss{
  position:absolute;inset:0;z-index:6;border-radius:13.6%/6.3%;
  pointer-events:none;
  background:
    linear-gradient(122deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.07) 17%,rgba(255,255,255,0) 34%,
                    rgba(255,255,255,0) 66%,rgba(255,255,255,.05) 84%,rgba(255,255,255,.16) 100%);
  mix-blend-mode:screen;
}

.phone__cast{
  position:absolute;inset:-16% -26% -20%;z-index:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 52%,rgba(47,146,209,.30),rgba(47,146,209,0) 63%);
  filter:blur(42px);
  opacity:.9;
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
/* the wave arrives, the device answers */
.is-goal .phone__cast,
[data-state="offer"] .phone__cast,
[data-state="price"] .phone__cast{opacity:1;transform:scale(1.14)}

.phone__screen{
  position:relative;
  height:100%;
  border-radius:11.6%/5.4%;
  overflow:hidden;
  background:#0A0F15;
  color:#F2F4F7;
  font-size:15px;
  font-size:4.72cqw;
  line-height:1.35;
  letter-spacing:-.006em;
}

.phone__island{
  position:absolute;top:2.6%;left:50%;transform:translateX(-50%);
  width:31%;height:3.6%;
  border-radius:var(--r-pill);
  background:#04070A;
  z-index:5;
  box-shadow:0 0 0 .5px rgba(255,255,255,.06);
}

/* ── the club app ───────────────────────────────────────────── */
.app{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 52% at 16% 0%,rgba(36,68,111,.55) 0%,rgba(36,68,111,0) 62%),
    linear-gradient(178deg,#101821 0%,#0B1118 44%,#0D141C 100%);
  transition:filter .34s var(--ease-out),opacity .34s var(--ease-out),transform .34s var(--ease-out);
}
[data-state="offer"] .app,
[data-state="price"] .app,
[data-state="size"] .app,
[data-state="press"] .app,
[data-state="buying"] .app,
[data-state="done"] .app{filter:blur(1px) brightness(.8);transform:scale(.994)}
/* a scrim, not a privacy blur — you can still read the club app behind it */
.app::after{
  content:"";position:absolute;inset:0;
  background:rgba(4,8,12,0);
  transition:background .34s var(--ease-out);
  pointer-events:none;
}
[data-state="offer"] .app::after,
[data-state="price"] .app::after,
[data-state="size"] .app::after,
[data-state="press"] .app::after,
[data-state="buying"] .app::after,
[data-state="done"] .app::after{background:rgba(4,8,12,.28)}

.app__status{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.05em 1.5em .2em;
  font-size:.66em;font-weight:600;letter-spacing:.01em;color:#EDF1F5;
}
.app__sig{display:inline-flex;align-items:flex-end;gap:1.5px;height:.7em}
.app__sig i{width:2px;border-radius:1px;background:#EDF1F5;display:block}
.app__sig i:nth-child(1){height:34%}
.app__sig i:nth-child(2){height:56%}
.app__sig i:nth-child(3){height:78%}
.app__sig i:nth-child(4){height:100%}

.app__bar{
  display:flex;align-items:center;gap:.55em;
  padding:.85em 1.15em .8em;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.app__crest{width:1.85em;height:auto;flex:0 0 auto}
.app__name{font-size:.86em;font-weight:600;letter-spacing:-.015em}
.app__bell{
  margin-left:auto;width:.95em;height:.95em;border-radius:50%;
  border:1.2px solid rgba(255,255,255,.34);
  position:relative;
}
.app__bell::after{
  content:"";position:absolute;top:-1px;right:-1px;
  width:.32em;height:.32em;border-radius:50%;background:var(--coral);
}

.app__body{flex:1;padding:1em 1.15em;display:flex;flex-direction:column;gap:.85em;min-height:0}
.app__eyebrow{
  font-size:.58em;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(242,244,247,.44);
}

.match{
  border-radius:.95em;
  padding:.85em .95em .9em;
  background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
}
.match__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6em}
.match__live{
  display:inline-flex;align-items:center;gap:.35em;
  font-size:.56em;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#FF6B6B;
}
.match__live i{width:.42em;height:.42em;border-radius:50%;background:#FF5A5A;animation:livePip 1.8s var(--ease) infinite}
@keyframes livePip{0%,100%{opacity:1}50%{opacity:.35}}
.match__clock{font-size:.62em;font-weight:600;color:rgba(242,244,247,.6);font-variant-numeric:tabular-nums}

.match__row{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:.3em 0;
}
.match__club{font-size:.82em;font-weight:500}
.match__num,.match__goal{
  font-size:1.05em;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:1.1em;text-align:right;
}
.match__goal{
  position:absolute;right:0;top:50%;
  transform:translateY(-30%);
  opacity:0;color:#7FE3C6;
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
}
.match__row [data-score-home]{transition:opacity .26s var(--ease-out),transform .26s var(--ease-out)}
[data-state="offer"] .match__goal,
[data-state="price"] .match__goal,
[data-state="size"] .match__goal,
[data-state="press"] .match__goal,
[data-state="buying"] .match__goal,
[data-state="done"] .match__goal{opacity:1;transform:translateY(-50%)}
[data-state="offer"] [data-score-home],
[data-state="price"] [data-score-home],
[data-state="size"] [data-score-home],
[data-state="press"] [data-score-home],
[data-state="buying"] [data-score-home],
[data-state="done"] [data-score-home]{opacity:0;transform:translateY(-55%)}

.app__list{display:flex;flex-direction:column;gap:.1em}
.app__list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:.72em .2em;
  font-size:.76em;font-weight:500;color:rgba(242,244,247,.82);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.app__list li span{color:rgba(242,244,247,.35)}
.app__list li:last-child{border-bottom:0}

.app__nav{
  display:flex;justify-content:space-between;
  padding:.75em 1.05em 1.5em;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(6,10,14,.5);
  font-size:.55em;font-weight:600;letter-spacing:.02em;
  color:rgba(242,244,247,.38);
}
.app__nav .is-on{color:#6FB9E8}

/* ── what the moment opened ─────────────────────────────────── */
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  max-height:68%;
  display:flex;flex-direction:column;
  border-radius:1.5em 1.5em 0 0;
  padding:.7em 1.2em 1.15em;
  background:linear-gradient(180deg,#FCFAF7 0%,#F4EFE7 100%);
  color:#0B1015;
  box-shadow:0 -14px 40px rgba(0,0,0,.42);
  transform:translateY(101%);
  opacity:0;
  transition:transform .38s cubic-bezier(.17,.84,.34,1),opacity .22s linear;
}
[data-state="offer"] .sheet,
[data-state="price"] .sheet,
[data-state="size"] .sheet,
[data-state="press"] .sheet,
[data-state="buying"] .sheet,
[data-state="done"] .sheet{transform:translateY(0);opacity:1}

.sheet__grip{
  display:block;width:2.4em;height:.26em;border-radius:var(--r-pill);
  background:rgba(11,16,21,.16);margin:0 auto .8em;
}

.sheet__pane{flex:1;display:flex;flex-direction:column;min-height:0;transition:opacity .24s var(--ease-out),transform .28s var(--ease-out)}
.sheet__pane--done{
  position:absolute;left:0;right:0;top:1.75em;bottom:0;
  padding:.25em 1.2em 1.3em;
  justify-content:center;
  background:linear-gradient(180deg,#FBF8F4 0%,#F4EFE7 100%);
  opacity:0;transform:translateY(6px);pointer-events:none;
}
[data-state="done"] .sheet__pane--offer{opacity:0;transform:translateY(-6px);transition-duration:.16s}
[data-state="done"] .sheet__pane--done{opacity:1;transform:translateY(0);transition-delay:.1s}

.sheet__kicker{
  font-size:.6em;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#B4453F;
}
.sheet__title{
  margin-top:.16em;
  font-size:1.28em;font-weight:700;letter-spacing:-.032em;line-height:1.08;
}

.sheet__product{display:flex;gap:.9em;align-items:center;margin-top:.78em}
.sheet__shot{
  position:relative;
  flex:0 0 45%;
  aspect-ratio:400/470;
  border-radius:.75em;
  background:
    radial-gradient(90% 62% at 50% 26%,#FFFFFF 0%,#F7F2EA 58%,#EAE2D6 100%);
  border:1px solid rgba(11,16,21,.08);
  box-shadow:0 1px 2px rgba(11,16,21,.05) inset;
  overflow:hidden;
  display:grid;place-items:center;
}
.sheet__shot::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 118%,rgba(11,16,21,.10),rgba(11,16,21,0) 62%);
  pointer-events:none;
}
.sheet__jersey{width:94%;height:auto;filter:drop-shadow(0 6px 10px rgba(11,16,21,.18));transition:opacity .22s var(--ease-out)}
.sheet__jersey--away{position:absolute;opacity:0}

.sheet__meta{display:flex;flex-direction:column;gap:.1em;min-width:0}
.sheet__brand{font-size:.56em;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(11,16,21,.45)}
.sheet__item{font-size:.8em;font-weight:600;letter-spacing:-.015em}
.sheet__price{display:flex;align-items:baseline;gap:.5em;margin-top:.26em}
.sheet__price s{font-size:.68em;font-weight:500;color:rgba(11,16,21,.46);text-decoration:none;position:relative}
.sheet__price s::after{
  content:"";position:absolute;left:-3%;top:52%;height:1.3px;width:0;
  background:#B4453F;transition:width .42s var(--ease-out);
}
[data-state="price"] .sheet__price s::after,
[data-state="size"] .sheet__price s::after,
[data-state="press"] .sheet__price s::after,
[data-state="buying"] .sheet__price s::after,
[data-state="done"] .sheet__price s::after{width:104%}
.sheet__price b{
  font-size:1.34em;font-weight:800;letter-spacing:-.03em;line-height:1.05;
  opacity:0;transform:translateY(2px);
  transition:opacity .38s var(--ease-out) .26s,transform .38s var(--ease-out) .26s;
}
[data-state="price"] .sheet__price b,
[data-state="size"] .sheet__price b,
[data-state="press"] .sheet__price b,
[data-state="buying"] .sheet__price b,
[data-state="done"] .sheet__price b{opacity:1;transform:translateY(0)}

.sheet__timer{
  margin-top:.2em;
  font-size:.58em;font-weight:600;letter-spacing:.04em;
  color:rgba(11,16,21,.5);font-variant-numeric:tabular-nums;
}

.sheet__label{
  margin-top:.78em;
  font-size:.54em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(11,16,21,.42);
}
.opts{display:flex;gap:.38em;margin-top:.34em}
.opt{
  flex:1;text-align:center;
  padding:.46em .2em;
  border-radius:.55em;
  border:1px solid rgba(11,16,21,.16);
  background:rgba(255,255,255,.7);
  font-size:.66em;font-weight:600;letter-spacing:-.005em;
  color:rgba(11,16,21,.72);
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .12s var(--ease);
}
.opt.is-on{background:#0B1015;border-color:#0B1015;color:#FBF7F2}
.opt.is-tap{transform:scale(.93);background:rgba(11,16,21,.10);border-color:rgba(11,16,21,.34)}
.opt.is-on{box-shadow:0 3px 10px rgba(11,16,21,.18)}
.opts--size .opt{flex:1}

.buy{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  margin-top:.88em;
  padding:.78em 1em;
  border-radius:.7em;
  background:linear-gradient(135deg,var(--blue-deep),var(--blue) 55%,var(--teal));
  color:#fff;
  font-size:.74em;font-weight:700;letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(47,146,209,.34);
  transition:transform .12s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);
}
[data-state="press"] .buy{transform:scale(.965);box-shadow:0 3px 9px rgba(47,146,209,.3);filter:brightness(.94)}
.buy--ghost{
  margin-top:.85em;
  background:transparent;color:rgba(11,16,21,.7);
  border:1px solid rgba(11,16,21,.16);box-shadow:none;
}
.buy__spin{
  width:.9em;height:.9em;border-radius:50%;
  border:1.6px solid rgba(255,255,255,.35);border-top-color:#fff;
  display:none;
  animation:buySpin .62s linear infinite;
}
[data-state="buying"] .buy__spin{display:block}
@keyframes buySpin{to{transform:rotate(360deg)}}

.sheet__pay{
  margin-top:.5em;text-align:center;
  font-size:.55em;font-weight:600;letter-spacing:.03em;
  color:rgba(11,16,21,.4);
}

/* confirmation */
.done__tick{
  display:grid;place-items:center;
  width:1.9em;height:1.9em;border-radius:50%;
  background:linear-gradient(135deg,#2E9E7A,#5CC9C4);
  margin:0 auto;
  box-shadow:0 6px 16px rgba(46,158,122,.3);
}
.done__tick::after{
  content:"";width:.62em;height:.34em;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-2px);
}
.done__title{
  margin-top:.45em;text-align:center;
  font-size:.95em;font-weight:700;letter-spacing:-.028em;
}
.done__order{
  display:flex;align-items:center;gap:.65em;
  margin-top:.65em;padding:.55em;
  border-radius:.7em;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(11,16,21,.08);
}
.done__thumb{
  flex:0 0 2.9em;aspect-ratio:400/470;border-radius:.42em;overflow:hidden;
  background:linear-gradient(160deg,#FFFFFF,#EFE9DF);
  display:grid;place-items:center;
}
.done__thumb img{width:86%;height:auto}
.done__lines{display:flex;flex-direction:column;min-width:0}
.done__item{font-size:.68em;font-weight:600;letter-spacing:-.012em}
.done__spec{font-size:.58em;color:rgba(11,16,21,.5);font-weight:500}
.done__cost{margin-left:auto;font-size:.78em;font-weight:800;letter-spacing:-.02em}

.done__pickup{
  margin-top:.6em;padding:.65em .75em;
  border-radius:.7em;
  background:linear-gradient(135deg,rgba(46,158,122,.13),rgba(92,201,196,.09));
  border:1px solid rgba(46,158,122,.22);
}
.done__k{font-size:.54em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#1F7A5E}
.done__v{margin-top:.16em;font-size:.76em;font-weight:700;letter-spacing:-.018em}
.done__s{font-size:.6em;color:rgba(11,16,21,.56);font-weight:500}
.done__hint{
  margin-top:.55em;text-align:center;
  font-size:.6em;font-weight:500;line-height:1.45;
  color:rgba(11,16,21,.52);
}
.done__eta{
  margin-top:.24em;
  font-size:.58em;font-weight:600;
  color:rgba(31,122,94,.9);
}
.done__ref{
  margin-top:.6em;margin-bottom:.15em;text-align:center;
  font-size:.54em;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(11,16,21,.36);
}

/* ── the moment, outside the phone ──────────────────────────── */
/* A broadcast score bug, not a notification. It belongs to the room
   the game is being played in, not to the phone's operating system. */
.goalcard{
  position:absolute;z-index:4;
  top:6%;
  right:calc(50% + var(--phone-w) * .47);
  min-width:10.25rem;
  border-radius:5px;
  overflow:hidden;
  background:rgba(9,14,20,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  color:var(--on-ink);
  border-top:2px solid transparent;
  border-image:var(--grad-brand) 1;
  border-image-slice:1;
  border-left:0;border-right:0;border-bottom:0;
  opacity:0;transform:translate3d(-8px,0,0);
  transition:opacity .28s var(--ease-out),transform .36s cubic-bezier(.17,.84,.34,1);
  pointer-events:none;
}
.is-goal .goalcard{opacity:1;transform:translate3d(0,0,0)}

.goalcard__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:.5rem .7rem .45rem;
  border-bottom:1px solid rgba(244,241,236,.10);
}
.goalcard__word{
  font-size:.82rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.goalcard__min{
  font-size:.62rem;font-weight:600;letter-spacing:.06em;
  color:rgba(244,241,236,.52);font-variant-numeric:tabular-nums;
}

.goalcard__score{display:grid}
.goalcard__score > div{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.34rem .7rem .34rem .58rem;
  border-left:3px solid rgba(244,241,236,.14);
}
.goalcard__score > div + div{border-top:1px solid rgba(244,241,236,.07)}
.goalcard__score .is-scorer{border-left-color:var(--blue)}
.goalcard__score dt{
  font-size:.7rem;font-weight:500;letter-spacing:-.006em;
  color:rgba(244,241,236,.72);
}
.goalcard__score dd{
  font-size:.82rem;font-weight:700;
  color:var(--on-ink);font-variant-numeric:tabular-nums;
}
.goalcard__score .is-scorer dt{color:var(--on-ink);font-weight:600}

@media (max-width:1180px){
  .goalcard{right:calc(50% + var(--phone-w) * .45);min-width:9.5rem}
}
@media (max-width:900px){
  /* the bug lies across the top of the composition, clear of the device */
  .goalcard{top:0;left:0;right:auto;display:flex;align-items:stretch;min-width:0}
  .goalcard__top{
    flex-direction:column;justify-content:center;gap:.1rem;
    border-bottom:0;border-right:1px solid rgba(244,241,236,.10);
    padding:.42rem .65rem;
  }
  .goalcard__score{grid-auto-flow:row}
  .goalcard__score > div{gap:.85rem;padding-block:.26rem}
}
@media (max-width:480px){
  .goalcard__word{font-size:.72rem}
  .goalcard__min{font-size:.55rem}
  .goalcard__score dt{font-size:.62rem}
  .goalcard__score dd{font-size:.72rem}
}

@media (prefers-reduced-motion:reduce){
  .match__live i,.buy__spin{animation:none}
  .hero.is-moment .hero__ring{animation:none}
}

.hero__divider{
  position:absolute;left:0;right:0;bottom:-1px;
  width:100%;height:clamp(56px,7vw,120px);
  opacity:.5;pointer-events:none;
}

/* ── 7. MARQUEE ──────────────────────────────────────────── */
.leagues{
  position:relative;
  padding-block:clamp(2.2rem,4vw,3.4rem);
  background:var(--paper-2);
  border-block:1px solid var(--line-soft);
  overflow:hidden;
}
.leagues__label{
  text-align:center;
  font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:var(--s5);
  padding-inline:var(--gutter);
}
.marquee{
  --marquee-gap:clamp(2rem,5vw,4rem);
  display:flex;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

/* One track holding N pixel-identical groups. The track shifts by exactly
   one group width (-100% / N), so the frame it ends on is the frame it
   started on: group k+1 lands precisely where group k began. There is no
   reset to hide, because nothing resets. */
.marquee__track{
  display:flex;flex-wrap:nowrap;
  width:max-content;
  will-change:transform;
  animation:marqueeShift var(--marquee-dur,34s) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused}

.marquee__group{
  display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:center;
  gap:var(--marquee-gap);
  /* the group carries its own trailing gap, so the seam between the last
     name of one group and the first of the next is spaced like every
     other pair — and one group width stays exactly measurable */
  padding-right:var(--marquee-gap);
  margin:0;
}
.marquee__group li{
  flex:0 0 auto;
  font-size:clamp(1.1rem,2.2vw,1.6rem);
  font-weight:700;letter-spacing:-.02em;
  color:var(--muted-2);
  opacity:.6;
  white-space:nowrap;
  transition:color var(--t) var(--ease),opacity var(--t) var(--ease);
}
.marquee__group li:hover{color:var(--blue-deep);opacity:1}

@keyframes marqueeShift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--marquee-shift,-50%),0,0)}
}

@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none;justify-content:center}
  .marquee__track{width:auto;animation:none}
  .marquee__group{flex-wrap:wrap;justify-content:center;padding-right:0;row-gap:var(--s3)}
  .marquee__group[aria-hidden="true"]{display:none}
}

/* ── 8. ORNAMENTS AND TEXTURES ───────────────────────────── */
.ornament{
  position:absolute;top:50%;
  width:320px;height:900px;                /* native SVG box, never stretched */
  transform:translateY(-50%);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  z-index:0;
}
.ornament--left{left:0;background-image:url("images/ornament-left.svg")}
.ornament--right{right:0;background-image:url("images/ornament-right.svg")}
.ornament--soft{opacity:.55}

.section > .shell{position:relative;z-index:1}

.wave-accent{
  position:absolute;left:0;bottom:clamp(1.2rem,3vw,2.5rem);
  width:100%;height:clamp(40px,5vw,80px);
  opacity:.35;pointer-events:none;
}

.how__texture,.stats__texture,.site-foot__texture,.doc__grain{
  position:absolute;inset:0;pointer-events:none;
}
.how__texture{
  background-image:url("images/pattern-arcs.svg");
  background-size:320px 320px;
  opacity:.42;
}
.stats__texture{
  background-image:url("images/pattern-grid.svg");
  background-size:64px 64px;
  opacity:.5;
}
.site-foot__texture{
  background-image:url("images/pattern-waves.svg");
  background-repeat:repeat;
  background-size:280px 168px;
  opacity:.26;
}
.doc__grain{
  background-image:url("images/pattern-grain.svg");
  background-size:220px 220px;
  opacity:.22;
  mix-blend-mode:multiply;
}

/* ── 9. CARDS, PANELS, TILES, STEPS ──────────────────────── */
.cards{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  position:relative;
  padding:clamp(1.6rem,2.6vw,2.2rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.78);
  border:1px solid var(--line-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out),
             border-color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(47,146,209,.09),rgba(138,89,153,.06) 46%,rgba(92,201,196,.08));
  opacity:0;transition:opacity var(--t-slow) var(--ease);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-3);
  border-color:rgba(47,146,209,.24);
  background:#fff;
}
.card:hover::before{opacity:1}
.card--tall{display:flex;flex-direction:column;min-height:100%}
.card__icon{width:28px;height:28px;flex:0 0 28px;margin-bottom:var(--s5)}
.card__title{position:relative;font-size:var(--fs-h3);line-height:1.24;letter-spacing:-.022em}
.card__body{position:relative;margin-top:var(--s4);color:var(--muted);font-size:var(--fs-body)}
.card--tall .card__body{margin-bottom:var(--s7)}
.card__rule{
  position:relative;
  display:block;margin-top:auto;
  height:2px;width:34px;border-radius:2px;
  background:var(--grad-brand);
  transition:width var(--t-slow) var(--ease-out);
}
.card:hover .card__rule{width:74px}

/* comparison panels */
.compare__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.75rem)}
.panel{
  padding:clamp(1.75rem,3vw,2.6rem);
  border-radius:var(--r-lg);
  border:1px solid var(--line-soft);
  transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out);
}
.panel:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.panel--muted{
  background:linear-gradient(180deg,rgba(11,16,21,.035),rgba(11,16,21,.015));
}
.panel--bright{
  background:linear-gradient(150deg,rgba(47,146,209,.10),rgba(92,201,196,.07) 60%,rgba(229,203,79,.06));
  border-color:rgba(47,146,209,.22);
  box-shadow:var(--sh-1);
}
.panel__tag{
  display:inline-block;margin-bottom:var(--s4);
  padding:.3rem .75rem;border-radius:var(--r-pill);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(11,16,21,.06);color:var(--muted);
}
.panel__tag--on{background:var(--grad-cta);color:#fff}
.panel__title{font-size:var(--fs-h3);letter-spacing:-.022em;margin-bottom:var(--s5)}

.ticks{display:flex;flex-direction:column;gap:var(--s4)}
.section__lead + .ticks,.section__lead + .link-arrow{margin-top:var(--s7)}
.ticks li{
  position:relative;padding-left:2rem;
  color:var(--muted);font-size:var(--fs-body);line-height:1.56;
}
.ticks strong{color:var(--ink);font-weight:600}
.ticks li::before{
  content:"";position:absolute;left:0;top:.44em;
  width:18px;height:18px;border-radius:50%;
}
.ticks--x li::before{
  background:rgba(233,107,113,.14);
  box-shadow:inset 0 0 0 1px rgba(233,107,113,.42);
}
.ticks--x li::after{
  content:"";position:absolute;left:5px;top:calc(.44em + 5px);
  width:8px;height:8px;
  background:
    linear-gradient(45deg,transparent 44%,var(--coral) 44%,var(--coral) 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,var(--coral) 44%,var(--coral) 56%,transparent 56%);
}
.ticks--check li::before{
  background:rgba(47,146,209,.14);
  box-shadow:inset 0 0 0 1px rgba(47,146,209,.42);
}
.ticks--check li::after{
  content:"";position:absolute;left:6px;top:calc(.44em + 5px);
  width:6px;height:9px;
  border:solid var(--blue-deep);
  border-width:0 1.8px 1.8px 0;
  transform:rotate(43deg);
}
.ticks--lg li{font-size:var(--fs-lead);line-height:1.5}
.ticks--lg li::before{top:.36em}
.ticks--lg li::after{top:calc(.36em + 5px)}

/* steps */
.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.step{
  position:relative;
  padding:clamp(1.5rem,2.4vw,2rem);
  border-radius:var(--r-lg);
  background:rgba(244,241,236,.045);
  border:1px solid var(--on-ink-line);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform var(--t-slow) var(--ease-out),background-color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.step:hover{
  transform:translateY(-6px);
  background:rgba(244,241,236,.085);
  border-color:rgba(78,183,211,.42);
}
.step__num{
  display:block;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;
  color:var(--cyan);
  margin-bottom:var(--s5);
}
.step__icon{width:28px;height:28px;margin-bottom:var(--s4)}
.step__title{font-size:var(--fs-h3);letter-spacing:-.022em}
.step__body{margin-top:var(--s3);font-size:var(--fs-small);line-height:1.62;color:var(--on-ink-muted)}

.how__figure{margin:clamp(3rem,6vw,5rem) auto 0;max-width:720px;text-align:center}
.how__figure img{width:100%;height:auto;margin-inline:auto}
.how__figure figcaption{
  margin-top:var(--s5);
  font-size:var(--fs-small);color:var(--on-ink-muted);
}

/* tiles */
.cards--tiles{gap:clamp(.85rem,1.6vw,1.15rem)}
.tile{
  padding:clamp(1.5rem,2.4vw,2rem);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.7);
  border:1px solid var(--line-soft);
  transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out),
             background-color var(--t) var(--ease);
}
.tile:hover{transform:translateY(-5px);background:#fff;box-shadow:var(--sh-2)}
.tile__title{font-size:1.05rem;letter-spacing:-.02em;line-height:1.3}
.tile__body{margin-top:var(--s3);font-size:var(--fs-small);color:var(--muted);line-height:1.62}

/* ── 10. INTEGRATION, PRIVACY, STATS ─────────────────────── */
.integrate__grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2.5rem,5vw,5rem);align-items:center;
}
.integrate__copy .section__lead{margin-bottom:var(--s7)}

.stack-card{
  padding:clamp(1.6rem,2.6vw,2.2rem);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,#131C25 0%,#0B1015 62%,#101A23 100%);
  color:var(--on-ink);
  box-shadow:var(--sh-3);
  position:relative;overflow:hidden;
}
.stack-card::after{
  content:"";position:absolute;inset:0;
  background:url("images/pattern-arcs.svg") no-repeat right -60px top -60px;
  background-size:300px 300px;
  opacity:.5;pointer-events:none;
}
.stack-card__label{
  position:relative;z-index:1;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:var(--s5);
}
.kv{position:relative;z-index:1;display:flex;flex-direction:column;gap:.1rem}
.kv__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:.72rem 0;
  border-bottom:1px solid var(--on-ink-line);
}
.kv__row:last-child{border-bottom:0}
.kv dt{
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:.82rem;color:var(--cyan);
}
.kv dd{font-size:.82rem;color:var(--on-ink-muted);text-align:right}
.stack-card__note{
  position:relative;z-index:1;
  margin-top:var(--s5);padding-top:var(--s5);
  border-top:1px solid var(--on-ink-line);
  font-size:var(--fs-small);color:var(--on-ink-muted);
}

.logo-strip{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5)}
.logo-strip li{
  display:flex;align-items:center;gap:.7rem;
  padding:.8rem 1.05rem;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line-soft);
  font-size:var(--fs-small);font-weight:500;color:var(--muted);
  transition:transform var(--t) var(--ease-out),border-color var(--t) var(--ease);
}
.logo-strip li:hover{transform:translateX(4px);border-color:rgba(47,146,209,.3)}
.logo-strip img{width:28px;height:28px;flex:0 0 28px}

.privacy__figure{
  margin:0 auto clamp(2.5rem,5vw,4rem);
  max-width:960px;
  padding:clamp(1.25rem,3vw,2rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-1);
}
.privacy__figure img{width:100%;height:auto}

.stats__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.stat{text-align:center}
/* Each number carries a two stop gradient of its own. A single shared
   spectrum compresses to one flat hue inside a one character box, so the
   row is tinted per item instead and reads the same at every width. */
.stat__num{
  display:block;
  font-size:clamp(2.2rem,4.6vw,3.5rem);
  font-weight:600;letter-spacing:-.04em;line-height:1;
  background-image:linear-gradient(135deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.stat:nth-child(1) .stat__num{background-image:linear-gradient(135deg,var(--coral),var(--rose))}
.stat:nth-child(2) .stat__num{background-image:linear-gradient(135deg,var(--rose),var(--purple))}
.stat:nth-child(3) .stat__num{background-image:linear-gradient(135deg,var(--indigo),var(--blue))}
.stat:nth-child(4) .stat__num{background-image:linear-gradient(135deg,var(--cyan),var(--teal))}
.stat__label{
  display:block;margin-top:var(--s4);
  font-size:var(--fs-small);color:var(--on-ink-muted);
  max-width:22ch;margin-inline:auto;
}

/* ── 11. ACCORDION ───────────────────────────────────────── */
.accordion{display:flex;flex-direction:column;gap:.6rem}
.acc{
  border-radius:var(--r-md);
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.66);
  overflow:hidden;
  transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.acc:hover{border-color:rgba(47,146,209,.26);background:#fff}
.acc.is-open{border-color:rgba(47,146,209,.34);background:#fff;box-shadow:var(--sh-2)}
.acc__btn{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:clamp(1.05rem,2vw,1.4rem) clamp(1.1rem,2.4vw,1.7rem);
  text-align:left;
  font-size:clamp(1rem,1.4vw,1.1rem);font-weight:600;letter-spacing:-.018em;
  color:var(--ink);
  transition:color var(--t) var(--ease);
}
.acc.is-open .acc__btn{color:var(--blue-deep)}
.acc__sign{position:relative;width:18px;height:18px;flex:0 0 18px}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform var(--t) var(--ease-out),opacity var(--t) var(--ease);
}
.acc__sign::before{width:14px;height:1.8px}
.acc__sign::after{width:1.8px;height:14px}
.acc.is-open .acc__sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

/* visibility is toggled alongside the row collapse so a closed answer
   leaves the accessibility tree and the tab order, not just the viewport */
.acc__panel{
  display:grid;grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows var(--t-slow) var(--ease-out),visibility 0s linear var(--t-slow);
}
.acc.is-open .acc__panel{
  grid-template-rows:1fr;
  visibility:visible;
  transition:grid-template-rows var(--t-slow) var(--ease-out),visibility 0s linear 0s;
}
.acc__panel > p{
  overflow:hidden;min-height:0;
  padding-inline:clamp(1.1rem,2.4vw,1.7rem);
  color:var(--muted);font-size:var(--fs-body);
  opacity:0;
  transition:opacity var(--t) var(--ease),padding-bottom var(--t-slow) var(--ease-out);
}
.acc.is-open .acc__panel > p{opacity:1;padding-bottom:clamp(1.15rem,2.4vw,1.6rem)}

/* ── 12. CONTACT FORM ────────────────────────────────────── */
.contact__grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
}
.contact__direct{margin-top:var(--s7);font-size:var(--fs-small);color:var(--muted)}
.contact__direct a{
  color:var(--blue-deep);font-weight:600;
  border-bottom:1px solid rgba(27,114,172,.3);
  transition:border-color var(--t) var(--ease);
}
.contact__direct a:hover{border-bottom-color:var(--blue-deep)}

.contact__formwrap{
  position:relative;
  padding:clamp(1.5rem,3.2vw,2.6rem);
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.86);
  border:1px solid var(--line-soft);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--sh-3);
}

.form{display:flex;flex-direction:column;gap:var(--s5);position:relative}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.field{display:flex;flex-direction:column;gap:.42rem;min-width:0;border:0;padding:0;margin:0}
.field__label{
  font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:0;
}
.field__input{
  width:100%;
  padding:.85rem 1rem;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  font-size:var(--fs-body);
  color:var(--ink);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             background-color var(--t) var(--ease),transform var(--t) var(--ease-out);
  -webkit-appearance:none;appearance:none;
}
.field__input::placeholder{color:var(--muted-2)}
.field__input:hover{border-color:rgba(11,16,21,.2)}
.field__input:focus{
  outline:none;
  border-color:var(--blue);
  background:#fff;
  box-shadow:0 0 0 4px rgba(47,146,209,.14);
}
.field__input--area{resize:vertical;min-height:110px;line-height:1.6}

.field__selectwrap{position:relative}
.field__selectwrap::after{
  content:"";position:absolute;right:1rem;top:50%;
  width:8px;height:8px;
  border-right:1.7px solid var(--muted);
  border-bottom:1.7px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.field__input--select{padding-right:2.5rem;cursor:pointer}

.field.has-error .field__input{border-color:var(--coral);box-shadow:0 0 0 4px rgba(233,107,113,.13)}
.field__error{
  font-size:var(--fs-micro);color:#C0424F;
  min-height:0;opacity:0;
  transition:opacity var(--t) var(--ease);
}
.field.has-error .field__error,.consent.has-error + .field__error{opacity:1}

.field--group{gap:.6rem}
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{
  display:inline-block;
  padding:.55rem 1rem;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:rgba(255,255,255,.8);
  font-size:var(--fs-small);font-weight:500;color:var(--muted);
  transition:all var(--t) var(--ease);
}
.pill:hover span{border-color:rgba(47,146,209,.4);color:var(--ink)}
.pill input:checked + span{
  background:var(--grad-cta);border-color:transparent;color:#fff;
  box-shadow:0 6px 16px rgba(47,146,209,.26);
}
.pill input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}

.consent{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:var(--fs-small);color:var(--muted);cursor:pointer;
}
.consent input{
  flex:0 0 18px;width:18px;height:18px;margin-top:.22rem;
  accent-color:var(--blue);cursor:pointer;
}
.consent a{color:var(--blue-deep);font-weight:600;border-bottom:1px solid rgba(27,114,172,.3)}
.consent.has-error{color:#C0424F}

.form__note{font-size:var(--fs-micro);color:var(--muted-2);text-align:center}

.form__success{
  position:absolute;inset:-1px;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);padding:var(--s7);text-align:center;
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:popIn .5s var(--ease-out) both;
}
.form__success[hidden]{display:none}
.form__success img{width:56px;height:56px}
.form__success h3{font-size:1.6rem;letter-spacing:-.03em}
.form__success p{color:var(--muted);max-width:36ch}
@keyframes popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* ── 13. SUB-PAGE TEMPLATE ───────────────────────────────── */
body.is-subpage{background:var(--paper)}

.doc{
  padding-top:calc(var(--nav-h) + clamp(2.5rem,6vw,5rem));
  background:
    radial-gradient(110% 60% at 10% 0%,rgba(233,107,113,.08) 0%,rgba(233,107,113,0) 55%),
    radial-gradient(100% 62% at 92% 12%,rgba(92,201,196,.10) 0%,rgba(92,201,196,0) 58%),
    linear-gradient(180deg,#FFFDFA 0%,var(--paper) 40%,var(--paper-2) 100%);
}
.doc__inner{position:relative;z-index:1}

.doc__title{
  font-size:clamp(2.35rem,6vw,4.25rem);
  letter-spacing:-.04em;line-height:1.02;
}
.doc__meta{
  margin-top:var(--s4);
  font-size:var(--fs-small);color:var(--muted-2);
}
.doc__lead{
  margin-top:var(--s6);
  font-size:var(--fs-lead);line-height:1.6;color:var(--muted);
}
.doc__rule{
  height:1px;width:100%;
  margin-block:clamp(2rem,4vw,3rem);
  background:var(--grad-brand);
  opacity:.4;
}
.doc__inner h2{
  margin-top:clamp(2.2rem,4vw,3.2rem);
  margin-bottom:var(--s4);
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  letter-spacing:-.026em;
}
.doc__inner h3{
  margin-top:var(--s7);margin-bottom:var(--s3);
  font-size:1.1rem;letter-spacing:-.022em;
}
.doc__inner p{
  color:var(--muted);
  font-size:1.02rem;line-height:1.75;
  margin-bottom:var(--s4);
  overflow-wrap:break-word;
}
.doc__inner p:last-of-type{margin-bottom:0}
.doc__inner a:not(.link-arrow){
  color:var(--blue-deep);font-weight:500;
  border-bottom:1px solid rgba(27,114,172,.3);
  transition:border-color var(--t) var(--ease);
}
.doc__inner a:not(.link-arrow):hover{border-bottom-color:var(--blue-deep)}

.doc__callout{
  margin-top:clamp(2.2rem,4vw,3rem);
  padding:clamp(1.25rem,2.6vw,1.75rem);
  border-radius:var(--r-md);
  border:1px solid rgba(47,146,209,.22);
  background:linear-gradient(140deg,rgba(47,146,209,.08),rgba(92,201,196,.06));
  font-size:var(--fs-small);
  line-height:1.68;
}

/* ── 14. FOOTER ──────────────────────────────────────────── */
.site-foot{
  position:relative;
  overflow:hidden;
  padding-top:clamp(3.5rem,7vw,6rem);
  background:
    radial-gradient(80% 60% at 12% 0%,rgba(47,146,209,.18) 0%,rgba(47,146,209,0) 60%),
    radial-gradient(70% 60% at 88% 90%,rgba(233,107,113,.14) 0%,rgba(233,107,113,0) 60%),
    linear-gradient(180deg,var(--ink-bg-2) 0%,var(--ink-bg) 100%);
  color:var(--on-ink);
}
.site-foot__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(2.5rem,5vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.brand__logo--light{width:186px;height:auto}
.site-foot__tag{
  margin-top:var(--s5);
  font-size:var(--fs-small);
  color:var(--on-ink-muted);
  max-width:26ch;
}
.site-foot__cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s6);
}
.site-foot__col{display:flex;flex-direction:column;gap:.7rem}
.site-foot__col h4{
  font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:var(--s2);
}
.site-foot__col a{
  font-size:var(--fs-small);
  color:var(--on-ink-muted);
  transition:color var(--t) var(--ease),transform var(--t) var(--ease-out);
}
.site-foot__col a:hover{color:var(--on-ink);transform:translateX(3px)}

.site-foot__base{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s5);
  border-top:1px solid var(--on-ink-line);
}
.site-foot__base p{font-size:var(--fs-micro);color:rgba(244,241,236,.5);letter-spacing:.02em}

/* ── 15. REVEAL AND MOTION ───────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}

.cards .reveal:nth-child(2),.steps .reveal:nth-child(2),
.stats__grid .reveal:nth-child(2),.accordion .reveal:nth-child(2){transition-delay:.07s}
.cards .reveal:nth-child(3),.steps .reveal:nth-child(3),
.stats__grid .reveal:nth-child(3),.accordion .reveal:nth-child(3){transition-delay:.14s}
.cards .reveal:nth-child(4),.steps .reveal:nth-child(4),
.stats__grid .reveal:nth-child(4),.accordion .reveal:nth-child(4){transition-delay:.21s}
.cards .reveal:nth-child(5),.accordion .reveal:nth-child(5){transition-delay:.28s}
.cards .reveal:nth-child(6),.accordion .reveal:nth-child(6){transition-delay:.35s}
.accordion .reveal:nth-child(7){transition-delay:.42s}

.hero__copy .reveal:nth-child(2){transition-delay:.06s}
.hero__copy .reveal:nth-child(3){transition-delay:.12s}
.hero__copy .reveal:nth-child(4){transition-delay:.18s}
.hero__copy .reveal:nth-child(5){transition-delay:.24s}
.hero__stage.reveal{transition-delay:.14s}

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

/* ── 16. RESPONSIVE ──────────────────────────────────────── */

/* ≤ 1180px : tighten nav */
@media (max-width:1180px){
  .site-nav__links{gap:var(--s4)}
  .brand__logo{width:140px}
}

/* ≤ 1024px : two-up grids, stacked hero */
@media (max-width:1024px){
  :root{--nav-h:68px}

  .site-nav__links,.site-nav__actions{display:none}
  .nav-toggle{display:flex}

  .hero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,7vw,3.5rem)}
  .hero__copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero__lead{max-width:52ch}
  .hero__cta{justify-content:center}
  .hero__proof{justify-content:center;gap:var(--s4) var(--s5)}
  .hero__stage{order:2}
  .hero__stage{--phone-w:clamp(236px,42vh,320px)}
  .hero__arcs{width:min(900px,150vw);top:-10%;left:-30%;opacity:.26}

  .cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s5)}
  .integrate__grid,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .site-foot__inner{grid-template-columns:minmax(0,1fr)}

  .ornament{width:210px;height:640px;opacity:.5}
  .ornament--soft{opacity:.34}
}

/* ≤ 860px : single column content */
@media (max-width:860px){
  .compare__grid{grid-template-columns:minmax(0,1fr)}
  .cards--3{grid-template-columns:minmax(0,1fr)}
  .cards--tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section__head{margin-inline:0;text-align:left}
  .section__head .section__lead{margin-inline:0}
  .hero__title{letter-spacing:-.034em}
}

/* ≤ 640px : phone */
@media (max-width:640px){
  :root{--nav-h:64px;--section-y:clamp(2.75rem,10vw,4rem)}

  .brand__logo{width:126px}
  .brand__logo--light{width:150px}

  .hero{padding-top:calc(var(--nav-h) + 2.25rem)}
  .hero__title{font-size:clamp(2.5rem,11.5vw,3.4rem);line-height:1}
  .hero__lead{font-size:1.02rem}
  .hero__cta{width:100%;flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .hero__proof{
    flex-direction:column;align-items:flex-start;
    text-align:left;gap:var(--s4);width:100%;
  }
  .hero__orb--a{width:66vw;right:-16%}
  .hero__orb--b{width:60vw;left:-14%}
  .hero__grain{opacity:.22}
  .hero__stage{--phone-w:clamp(224px,40vh,288px)}
  .chip--float{font-size:.66rem;padding:.34rem .7rem}
  .chip--one{left:-4%;top:6%}
  .chip--two{right:-6%}
  .chip--three{left:-6%;bottom:10%}
  .hero__divider{height:48px;opacity:.4}

  .cards--tiles{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .stats__grid{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .stat{text-align:left}
  .stat__label{margin-inline:0;max-width:34ch}

  .form__row{grid-template-columns:minmax(0,1fr)}
  .contact__formwrap{padding:var(--s5) var(--s4) var(--s6)}
  .form__success{padding:var(--s6) var(--s4)}

  /* ornaments become soft corner washes, never a scroll cause */
  .ornament{
    width:150px;height:420px;
    opacity:.28;
    background-size:cover;
    background-position:left center;
  }
  .ornament--right{background-position:right center}

  .how__texture{background-size:220px 220px;opacity:.3}
  .stats__texture{background-size:44px 44px}
  .site-foot__texture{background-size:200px 120px;opacity:.2}
  .wave-accent{height:34px;opacity:.28}

  .site-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s4)}
  .site-foot__base{flex-direction:column;gap:var(--s2)}

  .acc__btn{font-size:.98rem;gap:var(--s4)}
  .marquee{--marquee-gap:1.75rem}
}

/* ≤ 400px : very small phones */
@media (max-width:400px){
  .site-foot__cols{grid-template-columns:minmax(0,1fr)}
  .hero__stage{--phone-w:clamp(212px,38vh,266px)}
  .chip--float{display:none}
  .pills{gap:.4rem}
  .pill span{padding:.5rem .8rem;font-size:.8rem}
}

/* hover-capable pointers only */
@media (hover:none){
  .card:hover,.tile:hover,.panel:hover,.step:hover{transform:none}
  .logo-strip li:hover{transform:none}
}

/* print */
@media print{
  .site-nav,.nav-drawer,.ornament,.hero__field,.hero__divider,
  .wave-accent,.how__texture,.stats__texture,.site-foot__texture,
  .doc__grain,.marquee,.chip--float{display:none !important}
  body{background:#fff;color:#000}
  .section{padding-block:1.5rem}
}

/* ============================================================
   17. CONTENT COMPONENTS
   Added for the multi-page build: page heroes, chains, moment
   classes, fan actions, rules, doors, tables and statements.
   Everything below reuses the tokens declared in section 0.
   ============================================================ */

/* -- 17.1 Page hero (every page except the home page) ------- */
.pagehero{
  position:relative;
  overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(2.5rem,6vw,5rem));
  padding-bottom:clamp(3rem,6vw,5rem);
  background:
    radial-gradient(120% 70% at 8% -6%,rgba(233,107,113,.11) 0%,rgba(233,107,113,0) 55%),
    radial-gradient(110% 70% at 94% 10%,rgba(92,201,196,.13) 0%,rgba(92,201,196,0) 58%),
    linear-gradient(180deg,#FFFDFA 0%,var(--paper) 54%,var(--paper-2) 100%);
}
.pagehero__grain{
  position:absolute;inset:0;pointer-events:none;
  background:url("images/pattern-grain.svg") repeat;
  background-size:220px 220px;
  opacity:.26;
  mix-blend-mode:multiply;
}
.pagehero__inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
.pagehero__inner--single{grid-template-columns:minmax(0,1fr);max-width:54rem}
.pagehero__title{
  font-size:clamp(2.4rem,5.4vw,4.4rem);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.02;
}
.pagehero__for{
  margin-top:var(--s5);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--blue-deep);
}
.pagehero__lead{
  margin-top:var(--s5);
  max-width:46ch;
  font-size:var(--fs-lead);
  line-height:1.58;
  color:var(--muted);
}
.pagehero__lead + .pagehero__lead{margin-top:var(--s4)}
.pagehero__cta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3) var(--s5);
  margin-top:var(--s7);
}
.pagehero__cta .link-arrow{margin-top:0}
.pagehero__note{
  margin-top:var(--s5);
  font-size:var(--fs-small);
  color:var(--muted-2);
  max-width:52ch;
}

/* -- 17.2 Prose blocks -------------------------------------- */
.prose{display:flex;flex-direction:column;gap:var(--s4);max-width:62ch}
.prose p{color:var(--muted);font-size:var(--fs-body);line-height:1.7}
.prose--lead p{font-size:var(--fs-lead);line-height:1.58}
.prose--wide{max-width:74ch}
.section--ink .prose p{color:var(--on-ink-muted)}

/* a single large statement line, used to close a section */
.bigline{
  margin-top:clamp(1.5rem,2.8vw,2.25rem);
  max-width:20ch;
  font-size:clamp(1.35rem,2.6vw,2rem);
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.18;
}
.bigline--wide{max-width:30ch}
.section--ink .bigline{color:var(--on-ink)}

/* a two column section body: heading left, content right */
.split{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,4.5vw,4rem);
  align-items:start;
}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split--center{align-items:center}
.split__title{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.032em}
.split__sub{margin-top:var(--s5);font-size:var(--fs-lead);color:var(--muted);line-height:1.56;max-width:34ch}
.section--ink .split__sub{color:var(--on-ink-muted)}

/* -- 17.3 The chain ----------------------------------------- */
.chain{
  display:flex;flex-wrap:wrap;align-items:stretch;
  gap:var(--s3);
}
.chain li{
  position:relative;
  display:flex;align-items:center;
  padding:.72rem 1.1rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.78);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-1);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}
.chain li + li::before{
  content:"";
  position:absolute;left:calc(var(--s3) * -1);top:50%;
  width:var(--s3);height:1px;
  background:var(--line);
}
.chain li:last-child{
  background:var(--grad-cta);
  border-color:transparent;
  color:#fff;
  box-shadow:var(--sh-brand);
}
.section--ink .chain li{
  background:rgba(244,241,236,.06);
  border-color:var(--on-ink-line);
  color:var(--on-ink);
  box-shadow:none;
}
.section--ink .chain li + li::before{background:var(--on-ink-line)}
.section--ink .chain li:last-child{background:var(--grad-cta);border-color:transparent;color:#fff}

.chain--column{flex-direction:column;align-items:stretch;gap:var(--s2);counter-reset:chainstep}
.chain--column li{border-radius:var(--r-md);justify-content:space-between}
.chain--column li + li::before{
  left:1.6rem;top:calc(var(--s2) * -1);
  width:1px;height:var(--s2);
}
.chain--column li::after{
  content:counter(chainstep);
  counter-increment:chainstep;
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted-2);
}
.chain--column li:last-child::after{color:rgba(255,255,255,.72)}

/* the chain with a description under each link */
.chainlist{display:flex;flex-direction:column;gap:var(--s5);counter-reset:cl}
.chainlist li{
  position:relative;
  padding-left:3.1rem;
  padding-bottom:var(--s5);
  border-bottom:1px solid var(--line-soft);
}
.chainlist li:last-child{border-bottom:0;padding-bottom:0}
.chainlist li::before{
  counter-increment:cl;
  content:counter(cl,decimal-leading-zero);
  position:absolute;left:0;top:.1rem;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:var(--blue-deep);
}
.chainlist h3{font-size:var(--fs-h3);letter-spacing:-.022em;line-height:1.28}
.chainlist p{margin-top:var(--s3);color:var(--muted);font-size:var(--fs-body);line-height:1.62;max-width:56ch}
.section--ink .chainlist li{border-bottom-color:var(--on-ink-line)}
.section--ink .chainlist li::before{color:var(--cyan)}
.section--ink .chainlist p{color:var(--on-ink-muted)}

/* -- 17.4 Moment classes ------------------------------------ */
.moments{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.85rem,1.6vw,1.15rem);
}

/* Editorial choices, not feature cards: fine border, almost no shadow,
   generous horizontal padding against a tighter vertical rhythm. */
.moment{
  display:flex;flex-direction:column;
  align-self:start;
  padding:clamp(.95rem,1.55vw,1.2rem) clamp(1.35rem,2.4vw,1.85rem) clamp(1rem,1.7vw,1.25rem);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.62);
  border:1px solid var(--line-soft);
  box-shadow:0 1px 1px rgba(11,16,21,.02);
  transition:transform var(--t) var(--ease-out),border-color var(--t) var(--ease),
             background-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.moment:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.9);
  border-color:rgba(11,16,21,.14);
  box-shadow:0 2px 6px rgba(11,16,21,.04);
}
.moment__btn:focus{outline:none}
.moment__btn:focus-visible{outline:none}
.moment:has(.moment__btn:focus-visible){
  border-color:rgba(47,146,209,.55);
  box-shadow:0 0 0 3px rgba(47,146,209,.16);
}
/* browsers without :has still get a clean, contained ring */
@supports not selector(:has(*)){
  .moment__btn:focus-visible{
    outline:2px solid rgba(47,146,209,.6);
    outline-offset:6px;
    border-radius:var(--r-sm);
  }
}
.moment.is-open{background:#fff;border-color:rgba(47,146,209,.28)}

.moment__btn{
  display:flex;align-items:center;gap:var(--s4);
  width:100%;padding:0;text-align:left;
}
.moment__name{
  display:flex;align-items:center;gap:.55rem;
  font-size:clamp(1.06rem,1.5vw,1.24rem);
  font-weight:600;letter-spacing:-.024em;
  color:var(--ink);
}
.moment__name::before{
  content:"";
  width:9px;height:9px;border-radius:50%;flex:0 0 9px;
  background:var(--grad-brand);
}

/* the plus stays secondary: a hairline cross, not a button */
.moment__sign{
  position:relative;
  margin-left:auto;
  width:13px;height:13px;flex:0 0 13px;
  opacity:.42;
  transition:opacity var(--t) var(--ease);
}
.moment:hover .moment__sign{opacity:.7}
.moment__sign::before,.moment__sign::after{
  content:"";position:absolute;left:0;top:50%;
  width:13px;height:1.5px;border-radius:1px;
  background:var(--ink);
  transform:translateY(-50%);
  transition:transform var(--t) var(--ease-out);
}
.moment__sign::after{transform:translateY(-50%) rotate(90deg)}
.moment.is-open .moment__sign{opacity:.75}
.moment.is-open .moment__sign::after{transform:translateY(-50%) rotate(0deg)}

/* one extra sentence, only for the card someone asked about */
.moment__panel{
  display:grid;grid-template-rows:minmax(0,0fr);
  transition:grid-template-rows var(--t) var(--ease-out);
}
.moment.is-open .moment__panel{grid-template-rows:minmax(0,1fr)}
.moment__panel > p{overflow:hidden;opacity:0;transition:opacity .2s var(--ease)}
.moment.is-open .moment__panel > p{opacity:1;transition-delay:.08s}
.moment__why{
  margin-top:var(--s3);
  min-height:3em;     /* two lines, so every card opens by the same amount */
  font-size:var(--fs-body);font-weight:500;line-height:1.5;
  color:var(--ink-2);
}

.moment__eg{
  margin-top:var(--s3);
  min-height:3.2em;   /* two lines, reserved whether the copy needs them or not */
  color:var(--muted);
  font-size:var(--fs-small);
  line-height:1.6;
}

@media (max-width:900px){
  .moments{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .moments{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .moment,.moment__panel,.moment__panel > p,
  .moment__sign::before,.moment__sign::after{transition:none}
}

/* -- 17.5 Fan actions --------------------------------------- */
.actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.85rem,1.6vw,1.15rem);
}
.action{
  display:flex;flex-direction:column;
  align-self:start;               /* an open card grows alone, not its whole row */
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.7);
  border:1px solid var(--line-soft);
  box-shadow:0 1px 1px rgba(11,16,21,.02);
  overflow:hidden;
  transition:box-shadow var(--t) var(--ease-out),background-color var(--t) var(--ease),
             border-color var(--t) var(--ease),transform var(--t) var(--ease-out);
}
.action:hover{
  background:#fff;
  border-color:rgba(11,16,21,.14);
  box-shadow:0 2px 8px rgba(11,16,21,.05);
  transform:translateY(-2px);
}
.action:focus-within{border-color:rgba(47,146,209,.34)}
.action.is-open{background:#fff;border-color:rgba(47,146,209,.30);box-shadow:0 2px 10px rgba(11,16,21,.05)}

.action__btn{
  width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding:clamp(1.1rem,1.8vw,1.4rem) clamp(1.2rem,2vw,1.55rem);
  text-align:left;
  min-height:44px;
}
.action__head{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.action__sign{position:relative;width:18px;height:18px;flex:0 0 18px;margin-top:.2rem;color:var(--muted-2)}
.action__sign::before,.action__sign::after{
  content:"";position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform var(--t) var(--ease-out),opacity var(--t) var(--ease);
}
.action__sign::before{width:13px;height:1.8px}
.action__sign::after{width:1.8px;height:13px}
.action.is-open .action__sign{color:var(--blue-deep)}
.action.is-open .action__sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

/* The panel opens to one measured height shared by all eight cards, so
   every expanded card is the same component. An explicit height also
   animates reliably, which an interpolated `fr` row does not here. */
.action__panel{
  flex:0 0 auto;      /* a flex item must not shrink its own explicit height away */
  height:0;
  overflow:hidden;
  visibility:hidden;
  transition:height .3s var(--ease-out),visibility 0s linear .3s;
}
.action.is-open .action__panel{
  height:var(--panel-h,auto);
  visibility:visible;
  transition:height .3s var(--ease-out),visibility 0s linear 0s;
}
.action__panelin{
  opacity:0;
  transition:opacity .18s var(--ease);
}
.action.is-open .action__panelin{opacity:1;transition:opacity .24s var(--ease) .08s}
.action__panel p{
  padding-inline:clamp(1.2rem,2vw,1.55rem);
  font-size:var(--fs-small);color:var(--muted);line-height:1.58;
}
.action__panel p:last-child{padding-bottom:clamp(1.1rem,1.8vw,1.4rem)}

.action__verb{
  font-size:1.38rem;font-weight:600;letter-spacing:-.03em;line-height:1;
  background-image:var(--grad-cta);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  width:max-content;max-width:100%;
}
.action:nth-child(8n+1) .action__verb{background-image:linear-gradient(135deg,var(--coral),var(--rose))}
.action:nth-child(8n+2) .action__verb{background-image:linear-gradient(135deg,var(--rose),var(--purple))}
.action:nth-child(8n+3) .action__verb{background-image:linear-gradient(135deg,var(--purple),var(--indigo))}
.action:nth-child(8n+4) .action__verb{background-image:linear-gradient(135deg,var(--indigo),var(--blue))}
.action:nth-child(8n+5) .action__verb{background-image:linear-gradient(135deg,var(--blue),var(--cyan))}
.action:nth-child(8n+6) .action__verb{background-image:linear-gradient(135deg,var(--cyan),var(--teal))}
.action:nth-child(8n+7) .action__verb{background-image:linear-gradient(135deg,var(--teal),var(--lime))}
.action:nth-child(8n+8) .action__verb{background-image:linear-gradient(135deg,var(--lime),var(--gold))}
.action__gets{
  font-size:var(--fs-body);font-weight:500;line-height:1.4;color:var(--ink);
  min-height:2.85em;  /* two lines, reserved whether the copy needs them or not */
}

/* -- 17.6 Rule pills ---------------------------------------- */
.rulepills{display:flex;flex-wrap:wrap;gap:var(--s2)}
.rulepills li{
  padding:.6rem 1.05rem;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--ink);
}
.section--ink .rulepills li{
  background:rgba(244,241,236,.06);
  border-color:var(--on-ink-line);
  color:var(--on-ink);
}

/* -- 17.7 Definition rows ----------------------------------- */
.deflist{display:grid;gap:var(--s5)}
.deflist--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s7)}
.deflist > div{border-top:1px solid var(--line);padding-top:var(--s4)}
.deflist dt{font-size:var(--fs-h3);letter-spacing:-.022em;font-weight:600;line-height:1.28}
.deflist dd{margin:var(--s3) 0 0;color:var(--muted);font-size:var(--fs-body);line-height:1.62}
.section--ink .deflist > div{border-top-color:var(--on-ink-line)}
.section--ink .deflist dt{color:var(--on-ink)}
.section--ink .deflist dd{color:var(--on-ink-muted)}

/* -- 17.8 Dictionary definition ----------------------------- */
.def{
  padding:clamp(1.6rem,3vw,2.4rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.78);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-1);
  max-width:56rem;
}
.def__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem}
.def__word{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.032em;font-weight:600}
.def__pos{font-size:var(--fs-small);color:var(--muted-2);font-style:italic}
.def__text{
  margin-top:var(--s4);
  font-size:var(--fs-lead);
  line-height:1.58;
  color:var(--muted);
}

/* -- 17.9 Numbered steps on a light surface ----------------- */
.steps--light .step{
  background:rgba(255,255,255,.74);
  border-color:var(--line-soft);
  box-shadow:var(--sh-1);
}
.steps--light .step:hover{
  background:#fff;
  border-color:rgba(47,146,209,.24);
  box-shadow:var(--sh-2);
}
.steps--light .step__num{color:var(--blue-deep)}
.steps--light .step__body{color:var(--muted)}
.steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* -- 17.10 Two doors ---------------------------------------- */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.6rem)}
.door{
  display:flex;flex-direction:column;
  padding:clamp(1.75rem,3vw,2.5rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.78);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-1);
  transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out),
             border-color var(--t) var(--ease);
}
.door:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:rgba(47,146,209,.24)}
.door__title{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.026em;line-height:1.24}
.door__body{margin-top:var(--s4);color:var(--muted);font-size:var(--fs-body);line-height:1.62}
.door .link-arrow{margin-top:auto;padding-top:var(--s6)}

/* -- 17.11 Sponsor verbs ------------------------------------ */
/* Activation prompts, not feature cards: fine border, almost no shadow,
   tighter rows, and the gradient accent that makes them feel Soundpays. */
.verbs{display:grid;gap:var(--s2);opacity:1;transform:none}
.verbs li{
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.4rem);
  padding:clamp(.85rem,1.5vw,1.1rem) clamp(1.35rem,2.6vw,2rem);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line-soft);
  box-shadow:0 1px 1px rgba(11,16,21,.02);
  font-size:clamp(1.1rem,2vw,1.5rem);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:1.15;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),
             background-color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.verbs.is-in li{opacity:1;transform:none}
.verbs.is-in li:nth-child(1){transition-delay:0s}
.verbs.is-in li:nth-child(2){transition-delay:.09s}
.verbs.is-in li:nth-child(3){transition-delay:.18s}
.verbs.is-in li:nth-child(4){transition-delay:.27s}
.verbs.is-in li:nth-child(5){transition-delay:.36s}
.verbs li:hover{background:#fff;border-color:rgba(11,16,21,.14)}
.verbs li::before{
  content:"";
  width:5px;align-self:stretch;flex:0 0 5px;
  border-radius:3px;
  background:var(--grad-brand);
}
@media (max-width:900px){
  .verbs{gap:.4rem}
}
@media (prefers-reduced-motion:reduce){
  .verbs li{opacity:1;transform:none;transition:none}
}

/* -- 17.12 Tables ------------------------------------------- */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-lg);
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.74);
  box-shadow:var(--sh-1);
}
.table{width:100%;border-collapse:collapse;min-width:44rem}
.table th,.table td{
  text-align:left;
  vertical-align:top;
  padding:clamp(.85rem,1.6vw,1.15rem) clamp(.9rem,1.8vw,1.35rem);
  border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-small);
  line-height:1.6;
}
.table thead th{
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-deep);
  white-space:nowrap;
}
.table tbody th{font-weight:600;color:var(--ink)}
.table tbody td{color:var(--muted)}
.table tbody tr:last-child th,.table tbody tr:last-child td{border-bottom:0}

/* -- 17.13 Quiet closing section ---------------------------- */
.quiet{
  max-width:60rem;
  margin-inline:auto;
  text-align:center;
}
.quiet__title{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.032em}
.quiet p{margin-top:var(--s5);color:var(--muted);font-size:var(--fs-lead);line-height:1.6}

/* -- 17.14 Utility ------------------------------------------ */
.stack-gap{margin-top:clamp(1.5rem,2.8vw,2.25rem)}
.stack-gap-sm{margin-top:var(--s6)}
.nowrap{white-space:nowrap}
.footnote{
  margin-top:var(--s5);
  font-size:var(--fs-small);
  color:var(--muted-2);
  max-width:70ch;
  line-height:1.62;
}
.footnote a{color:var(--blue-deep);font-weight:500;border-bottom:1px solid rgba(27,114,172,.3)}
.section--ink .footnote{color:rgba(244,241,236,.5)}
.section--ink .footnote a{color:var(--cyan);border-bottom-color:rgba(78,183,211,.35)}
.site-nav__links a.is-current{color:var(--blue-deep);font-weight:600}
.nav-drawer__links a.is-current{color:var(--blue-deep)}

/* footer additions */
.site-foot__contact{
  margin-top:var(--s5);
  font-size:var(--fs-small);
  color:var(--on-ink-muted);
}
.site-foot__contact a{color:var(--cyan)}
.site-foot__social{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.site-foot__social a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  border-radius:var(--r-pill);
  border:1px solid var(--on-ink-line);
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--on-ink-muted);
  padding-inline:var(--s4);
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.site-foot__social a:hover{color:var(--on-ink);border-color:rgba(78,183,211,.5)}
.site-foot__cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* -- 17.15 Responsive for the components above -------------- */
@media (max-width:1024px){
  .pagehero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,3rem)}
  .split,.split--even{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .split__sub{max-width:52ch}
  .moments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-foot__cols--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:860px){
  .doors{grid-template-columns:minmax(0,1fr)}
  .deflist--2{grid-template-columns:minmax(0,1fr)}
  .quiet{text-align:left;margin-inline:0}
}

@media (max-width:640px){
  .moments{grid-template-columns:minmax(0,1fr)}
  .actions{grid-template-columns:minmax(0,1fr)}
  .steps--5{grid-template-columns:minmax(0,1fr)}
  .pagehero__cta{width:100%;flex-direction:column;align-items:stretch}
  .pagehero__cta .btn{width:100%}
  .pagehero__cta .link-arrow{justify-content:center}
  .chain li{width:100%;justify-content:space-between}
  .chain li + li::before{left:1.6rem;top:calc(var(--s3) * -1);width:1px;height:var(--s3)}
  .table{min-width:32rem}
  .verbs li{font-size:1.15rem}
  .site-foot__cols--4{grid-template-columns:minmax(0,1fr)}
}

/* -- 17.16 Layout utilities (replacing inline styles) -------- */
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.center{text-align:center}
.center-block{margin-inline:auto}
.chain--center{justify-content:center}
.cta-row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--s3) var(--s6);
}
.cta-row .link-arrow{margin-top:0}
.section--ink .cta-row .link-arrow{color:var(--cyan);background-image:linear-gradient(var(--cyan),var(--cyan))}
.masterline{max-width:11em;font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.032em}

@media (max-width:1024px){
  .cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cards--4{grid-template-columns:minmax(0,1fr)}
  .center-block.center{text-align:left}
}

/* -- 17.17 Keep the hero chips inside the stage on narrow screens --
   The original placement hangs them past the stage edge, which reads
   as a clipped element once the layout stacks. */
@media (max-width:1024px){
  .chip--one{left:0;top:6%}
  .chip--two{right:0;top:44%}
  .chip--three{left:0;bottom:10%}
}
@media (max-width:640px){
  .chip--one{left:0;top:4%}
  .chip--two{right:0}
  .chip--three{left:0;bottom:8%}
}

/* -- 17.18 Fan action cards: one height, every width ---------
   Two things made the collapsed boxes ragged.
   1. Between 1025px and 1200px the four columns get narrow enough
      that a couple of the lines wrap to three. Hold the 2-up layout
      until there is room for four.
   2. The shortest lines fit on one line while the rest take two.
      Reserve two lines so the boxes agree regardless of wrapping. */
@media (max-width:1200px){
  .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .actions{grid-template-columns:minmax(0,1fr)}
}
.action__gets{min-height:2.8em}   /* two lines at line-height 1.4 */

/* -- 17.19 Lists and emphasis inside the legal pages ---------
   The sub-page template only styled headings and paragraphs.
   The real privacy policy uses bulleted lists and bold runs. */
.doc__inner ul{
  margin:0 0 var(--s4);
  padding-left:1.35rem;
  display:flex;flex-direction:column;gap:.45rem;
}
.doc__inner li{
  list-style:disc;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.7;
  padding-left:.25rem;
}
.doc__inner li::marker{color:var(--blue-deep)}
.doc__inner strong{color:var(--ink);font-weight:600}
.doc__inner .doc__callout strong{display:block;margin-bottom:.35rem}

/* -- 17.20 Outline buttons on ink surfaces -------------------
   The light-surface outline button renders as a pale slab on the
   dark sections. Give it the same treatment the ink cards get. */
.section--ink .btn--outline{
  color:var(--on-ink);
  border-color:var(--on-ink-line);
  background:rgba(244,241,236,.06);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.section--ink .btn--outline:hover{
  color:#fff;
  background:rgba(244,241,236,.12);
  border-color:rgba(78,183,211,.5);
}
.section--ink .btn--outline .ripple{background:rgba(244,241,236,.28)}

/* -- 17.21 The brief: a six line decision list ---------------
   Replaces a table whose min-width was wider than the split
   column it sat in, so it scrolled sideways inside its own box.
   Terms take the same brand ramp as the fan action verbs. */
.brief{display:grid}
.brief li{
  display:grid;
  grid-template-columns:minmax(6.5rem,9rem) minmax(0,1fr);
  gap:var(--s2) var(--s5);
  align-items:baseline;
  padding:var(--s4) 0;
  border-top:1px solid var(--line);
}
.brief li:last-child{border-bottom:1px solid var(--line)}
.brief__term{
  font-size:1.12rem;
  font-weight:600;
  letter-spacing:-.024em;
  line-height:1.3;
  width:max-content;
  max-width:100%;
  background-image:var(--grad-cta);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.brief li:nth-child(6n+1) .brief__term{background-image:linear-gradient(135deg,var(--coral),var(--rose))}
.brief li:nth-child(6n+2) .brief__term{background-image:linear-gradient(135deg,var(--rose),var(--purple))}
.brief li:nth-child(6n+3) .brief__term{background-image:linear-gradient(135deg,var(--purple),var(--indigo))}
.brief li:nth-child(6n+4) .brief__term{background-image:linear-gradient(135deg,var(--indigo),var(--blue))}
.brief li:nth-child(6n+5) .brief__term{background-image:linear-gradient(135deg,var(--blue),var(--cyan))}
.brief li:nth-child(6n+6) .brief__term{background-image:linear-gradient(135deg,var(--teal),var(--lime))}
.brief__q{
  color:var(--muted);
  font-size:var(--fs-body);
  line-height:1.6;
}

@media (max-width:560px){
  .brief li{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
}

/* -- 17.22 Long CTA labels on very narrow screens -------------
   .btn sets white-space:nowrap, which is right for the pill nav
   but overflows a full-width button at 320px when the label is
   long ("Bring us a partnership idea"). Let those wrap. */
@media (max-width:480px){
  .btn--lg,.btn--block{
    white-space:normal;
    text-align:center;
    line-height:1.3;
    padding-inline:1.25rem;
  }
}

/* -- 17.23 Light panel card ----------------------------------
   Replaces the dark monospace payload card inherited from the
   concept's developer section. Same surface language as the
   rest of the site: light card, soft shadow, brand ramp terms. */
.panelcard{
  padding:clamp(1.5rem,2.8vw,2.1rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.78);
  border:1px solid var(--line-soft);
  box-shadow:var(--sh-2);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.panelcard__label{
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue-deep);
  margin-bottom:var(--s4);
}
.panelcard .brief li:last-child{border-bottom:0;padding-bottom:0}
.panelcard__note{
  margin-top:var(--s5);
  padding-top:var(--s5);
  border-top:1px solid var(--line);
  font-size:var(--fs-small);
  color:var(--muted);
  line-height:1.6;
}

/* -- 17.24 Panel card: label row, title, plan variant ---------
   Extends the light panel so it can carry the sample activation
   plan: a label with an icon, a display title, and rows whose
   value is the prominent half. */
.panelcard__label{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.panelcard__label img{width:24px;height:24px;flex:0 0 24px;opacity:.85}
.panelcard__title{
  margin-top:var(--s3);
  margin-bottom:var(--s6);
  font-size:clamp(1.6rem,2.6vw,2.15rem);
  font-weight:600;
  letter-spacing:-.034em;
  line-height:1.06;
}

/* the plan reads label-then-value, so the value carries the weight */
.brief--plan li{grid-template-columns:minmax(5.5rem,7.5rem) minmax(0,1fr)}
.brief--plan .brief__q{
  color:var(--ink);
  font-weight:600;
  font-size:var(--fs-body);
}

/* two links side by side under a block of ticks */
.link-row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3) var(--s7);
  margin-top:var(--s6);
}
.link-row .link-arrow{margin-top:0}

@media (max-width:560px){
  .brief--plan li{grid-template-columns:minmax(0,1fr)}
  .link-row{flex-direction:column;align-items:flex-start;gap:var(--s4)}
}

/* ── 17. V3 ADDITIONS ────────────────────────────────────── */

/* Fan-action example line: the vivid, human half of the panel */
.action__eg{
  margin-top:var(--s3);
  padding-top:var(--s3);
  border-top:1px solid var(--line-soft);
  font-size:var(--fs-small);
  font-weight:500;
  letter-spacing:-.014em;
  color:var(--ink-2);
}
.action.is-open .action__eg{opacity:1}

.section__lead--tight{margin-top:var(--s3);color:var(--muted-2)}

.stack-gap-lg{margin-top:clamp(2.25rem,4.5vw,4rem)}

/* Panelcard on an ink surface */
.panelcard--ink{
  background:rgba(244,241,236,.045);
  border-color:var(--on-ink-line);
  box-shadow:none;
  backdrop-filter:blur(6px);
}
.panelcard--ink .panelcard__label{color:var(--on-ink-muted)}
.panelcard--ink .panelcard__title{color:var(--on-ink)}
.panelcard--ink .brief li{border-bottom-color:var(--on-ink-line)}
.panelcard--ink .brief__q{color:var(--on-ink)}
.panelcard--ink .panelcard__note{color:var(--on-ink-muted);border-top-color:var(--on-ink-line)}

/* Outcome definition grid: the fan action, and the thing we count */
.outcomes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:1px;
  margin-top:clamp(2rem,4vw,3.25rem);
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.outcome{
  background:var(--card);
  padding:clamp(1.35rem,2.4vw,1.9rem);
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  transition:background var(--t) var(--ease);
}
.outcome:hover{background:var(--paper-2)}
.outcome__verb{
  font-size:1.28rem;
  font-weight:600;
  letter-spacing:-.03em;
  background-image:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  width:max-content;
}
.outcome:nth-child(8n+1) .outcome__verb{background-image:linear-gradient(120deg,var(--coral),var(--rose))}
.outcome:nth-child(8n+2) .outcome__verb{background-image:linear-gradient(120deg,var(--rose),var(--purple))}
.outcome:nth-child(8n+3) .outcome__verb{background-image:linear-gradient(120deg,var(--purple),var(--indigo))}
.outcome:nth-child(8n+4) .outcome__verb{background-image:linear-gradient(120deg,var(--indigo),var(--blue))}
.outcome:nth-child(8n+5) .outcome__verb{background-image:linear-gradient(120deg,var(--blue),var(--cyan))}
.outcome:nth-child(8n+6) .outcome__verb{background-image:linear-gradient(120deg,var(--cyan),var(--teal))}
.outcome:nth-child(8n+7) .outcome__verb{background-image:linear-gradient(120deg,var(--teal),var(--lime))}
.outcome:nth-child(8n+8) .outcome__verb{background-image:linear-gradient(120deg,var(--lime),var(--gold))}
.outcome__counts{
  font-size:var(--fs-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted-2);
}
.outcome__def{font-size:var(--fs-body);color:var(--ink-2);line-height:1.55}
.outcome__not{
  margin-top:auto;
  padding-top:var(--s3);
  font-size:var(--fs-small);
  color:var(--muted);
  border-top:1px solid var(--line-soft);
}
.outcome__not strong{font-weight:600;color:var(--ink-2)}

/* Ledger: two rows of a report, in words */
.ledger{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:var(--s5)}
.ledger__row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.ledger__cell{background:var(--card);padding:var(--s5) var(--s5) var(--s5)}
.ledger__k{
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--muted-2);margin-bottom:var(--s2);
}
.ledger__v{font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.ledger__cell--unknown .ledger__v{color:var(--muted)}
.ledger__tell{
  font-size:var(--fs-small);color:var(--muted);
  padding-left:var(--s4);border-left:2px solid var(--blue);
}
.ledger__tell strong{color:var(--ink);font-weight:600}
@media (max-width:860px){
  .ledger__row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .ledger__row{grid-template-columns:minmax(0,1fr)}
}

/* Doors now lead with a kicker, so give the headline more presence */
.door .kicker{margin-bottom:var(--s3)}
.door__title{font-size:clamp(1.45rem,2.5vw,2rem)}

/* Hero eyebrow sits above the headline */
.hero__copy .eyebrow{margin-bottom:var(--s5)}

/* ── 18. THE BEAT ─────────────────────────────────────────── */
/* Not a section. A title card: the scroll goes dark for a moment,
   the eye travels left to right, and lands on "gone." */

/* the league strip hands over to the dark */
.leagues{padding-bottom:clamp(2.6rem,4.5vw,4rem)}
.leagues::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(40px,6vw,80px);
  background:linear-gradient(180deg,rgba(8,20,30,0) 0%,rgba(8,20,30,.05) 55%,rgba(8,20,30,.13) 100%);
  pointer-events:none;
}

.interstitial{
  position:relative;
  overflow:hidden;
  min-height:48vh;
  display:flex;align-items:center;
  padding-block:clamp(3.5rem,8vh,6rem);
  background:linear-gradient(180deg,#08141E 0%,#0A1822 48%,#07111A 100%);
  color:var(--on-ink);
  isolation:isolate;
}

.interstitial__signal{
  position:absolute;inset:-8% -2%;
  z-index:-1;pointer-events:none;
  opacity:var(--sig-o,.34);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 20%,#000 70%,rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 20%,#000 70%,rgba(0,0,0,0) 100%);
}
.momentlines{width:200%;height:100%;display:block}
.momentline{
  animation:momentDrift var(--dur,64s) linear infinite;
  animation-delay:calc(var(--i) * -7s);
  transform-box:view-box;
}
.momentline:nth-child(2n){--dur:78s}
.momentline:nth-child(3n){--dur:92s}
.momentline:nth-child(5n){--dur:70s}
@keyframes momentDrift{from{transform:translateX(0)}to{transform:translateX(-760px)}}

/* the energy leaves as "gone." arrives, and returns with the payoff —
   driven by scroll progress, so it rewinds when the reader does */

.interstitial__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  width:100%;
}

.ib-line{
  font-size:clamp(1.85rem,4.3vw,3.6rem);
  font-weight:600;letter-spacing:-.038em;line-height:1.05;
  color:#FDFBF7;
  will-change:opacity,transform;
}
.ib-line--a{
  align-self:flex-start;
  margin-left:clamp(0rem,3.5vw,3.5rem);
  opacity:var(--a-o,0);
  transform:translate3d(var(--a-x,-26px),0,0);
}
.ib-line--b{
  align-self:flex-end;
  margin-right:clamp(0rem,3.5vw,3.5rem);
  margin-top:.18em;
  opacity:var(--b-o,0);
  transform:translate3d(var(--b-x,-22px),0,0);
}

.ib-payoff{
  align-self:center;
  margin-top:clamp(2.4rem,6.5vh,4.5rem);
  font-size:clamp(2.05rem,4.9vw,4.05rem);
  font-weight:600;letter-spacing:-.04em;line-height:1.04;
  color:#FDFBF7;
  text-align:center;
  will-change:opacity,transform;
  opacity:var(--c-o,0);
  transform:scale(var(--c-s,.98));
}

@media (max-width:760px){
  /* the narrative matters, the horizontal choreography does not */
  .interstitial{min-height:56vh}
  .interstitial__inner{align-items:flex-start}
  .ib-line--a,.ib-line--b{align-self:flex-start;margin-inline:0}
  .ib-line--b{margin-top:.12em}
  .ib-payoff{align-self:flex-start;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .ib-line--a,.ib-line--b,.ib-payoff{opacity:1;transform:none}
  .momentline{animation:none}
  .interstitial__signal{opacity:.16}
}

/* ── THE ANSWER ───────────────────────────────────────────── */
.answer{padding-block:clamp(4.5rem,9vw,7.5rem) clamp(4.5rem,9vw,7.5rem)}
.answer__head{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(1.75rem,5vw,4.5rem);
  align-items:start;
  margin-bottom:clamp(2.75rem,5.5vw,4.5rem);
}
.answer__lead{
  max-width:44ch;
  margin-top:.35rem;
  font-size:var(--fs-lead);
  line-height:1.62;
  color:var(--muted);
}

/* editorial navigation panels: label, headline, way in. Nothing else. */
.answer .doors{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1rem,2vw,1.5rem);
  margin-top:0;
}
.answer .door{
  display:flex;flex-direction:column;
  padding:clamp(1.9rem,3.4vw,2.9rem);
  border-radius:var(--r-lg);
  border:1px solid rgba(11,16,21,.07);
  box-shadow:0 1px 2px rgba(11,16,21,.03);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.answer .door--teams{background:linear-gradient(158deg,#EDF3F7 0%,#E7EFF5 100%)}
.answer .door--brands{background:linear-gradient(158deg,#F3EFF6 0%,#EFE9F3 100%)}
.answer .door:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(11,16,21,.07)}
.answer .door .kicker{margin-bottom:clamp(1.5rem,3vw,2.4rem);color:var(--muted)}
.answer .door__title{
  font-size:clamp(1.35rem,2.2vw,1.85rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.22;
}
.answer .door .link-arrow{margin-top:clamp(2rem,4vw,3.25rem)}

@media (max-width:900px){
  .answer__head{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .answer__lead{margin-top:0}
}

/* ── 19. GR INTELLIGENCE PREVIEW ──────────────────────────── */
/* A homepage chapter, not the product page. Four words, one record,
   one takeaway, one way in. */
.gri{padding-block:clamp(3rem,6vw,5rem)}

/* the four records as one connected progression */
.gri__stages{
  opacity:1;transform:none;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0;
  margin-top:clamp(2rem,4vw,3.25rem);
}
.gri__stage{display:flex;align-items:center}
.gri__stage + .gri__stage::before{
  content:"";
  width:clamp(1.5rem,4vw,3.25rem);height:1px;
  background:linear-gradient(90deg,rgba(126,199,232,.18),rgba(126,199,232,.45));
  flex:0 0 auto;
}
.gri__stage span{
  display:block;
  padding:.6rem 1.15rem;
  border-radius:var(--r-pill);
  border:1px solid var(--on-ink-line);
  background:rgba(244,241,236,.05);
  font-size:var(--fs-small);font-weight:600;letter-spacing:-.01em;
  color:var(--on-ink);
  white-space:nowrap;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.gri__stages.is-in .gri__stage span{opacity:1;transform:none}
.gri__stages.is-in .gri__stage:nth-child(1) span{transition-delay:0s}
.gri__stages.is-in .gri__stage:nth-child(2) span{transition-delay:.11s}
.gri__stages.is-in .gri__stage:nth-child(3) span{transition-delay:.22s}
.gri__stages.is-in .gri__stage:nth-child(4) span{transition-delay:.33s}
.gri__stage:last-child span{
  border-color:rgba(126,199,232,.42);
  background:linear-gradient(120deg,rgba(47,146,209,.22),rgba(92,201,196,.16));
}

.gri__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  margin-top:clamp(2.25rem,4.5vw,3.5rem);
}
.gri__point{display:flex;flex-direction:column;align-items:flex-start}
.gri__line{
  font-size:clamp(1.5rem,2.8vw,2.35rem);
  font-weight:600;letter-spacing:-.034em;line-height:1.16;
  color:#FDFBF7;
}
.gri__sub{
  margin-top:var(--s4);
  font-size:var(--fs-lead);
  color:var(--on-ink-muted);
}
.gri__point .link-arrow{margin-top:clamp(1.5rem,3vw,2.25rem)}
.link-arrow--on{color:var(--cyan)}
.link-arrow--on img{filter:brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(560%) hue-rotate(150deg)}
.link-arrow--on:hover{color:#9FE4F2}

.gri__record{max-width:26rem}
.gri__record .panelcard__label{margin-bottom:var(--s4)}
.gri__record .brief li:last-child{border-bottom:0;padding-bottom:0}

@media (max-width:900px){
  .gri__body{grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,2.75rem)}
  .gri__record{max-width:none}
}
@media (max-width:560px){
  .gri__stages{gap:.5rem}
  .gri__stage + .gri__stage::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gri__stage span{opacity:1;transform:none;transition:none}
}

/* ── 20. YOUR APP, NOT OURS ───────────────────────────────── */
/* Two assurances, one sentence, one way on. Nothing to study. */
.assure{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.75rem,5vw,4.5rem);
  margin-top:clamp(2.5rem,5vw,3.75rem);
  padding-top:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--line);
}
.assure__label{
  font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);
}
.assure__point{
  margin-top:var(--s3);
  font-size:clamp(1.15rem,1.85vw,1.5rem);
  font-weight:600;letter-spacing:-.028em;line-height:1.25;
  color:var(--ink);
}
.assure__note{
  margin-top:clamp(2rem,4vw,3rem);
  max-width:46ch;
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--muted);
}
.assure__note + .link-arrow{margin-top:clamp(1.25rem,2.5vw,1.75rem)}

@media (max-width:640px){
  .assure{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
}

/* ── 21. FINAL CTA ────────────────────────────────────────── */
.closer{
  position:relative;
  overflow:hidden;
  padding-block:clamp(3.5rem,7vw,5.5rem);
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(233,107,113,.10) 0%,rgba(233,107,113,0) 58%),
    radial-gradient(110% 80% at 90% 100%,rgba(92,201,196,.12) 0%,rgba(92,201,196,0) 60%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
.closer__inner{position:relative;z-index:1;text-align:center}
.closer .section__title{margin-top:var(--s4)}
.closer__lead{
  margin:var(--s5) auto 0;
  max-width:38ch;
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--muted);
}
.closer__actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s3) var(--s6);
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
}
.closer__actions .link-arrow{margin-top:0}

/* ── 22. TEAMS OPENING ────────────────────────────────────── */
/* The audience line now leads, above the headline */
.pagehero .kicker{margin-bottom:var(--s4)}

/* one short commercial line, not another paragraph */
.pagehero__strap{
  margin-top:var(--s5);
  font-size:clamp(1.02rem,1.4vw,1.2rem);
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--ink);
}

/* a real activation, so the card reads operational rather than soft */
.panelcard--plan{
  border-radius:var(--r-md);
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,16,21,.03),0 12px 30px rgba(11,16,21,.05);
}
.panelcard--plan .brief li{
  grid-template-columns:minmax(4.5rem,6.25rem) minmax(0,1fr);
  padding-block:clamp(.85rem,1.5vw,1.05rem);
  align-items:baseline;
}
.panelcard--plan .brief__q{
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.014em;
}
.panelcard--plan .panelcard__note{
  margin-top:var(--s4);
  padding-top:var(--s4);
}

/* the opening statement gets the room to land on two lines */
.pagehero--lead .pagehero__inner{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.pagehero--lead .pagehero__title{font-size:clamp(2.2rem,4.4vw,3.25rem);line-height:1.06}
@media (max-width:1024px){
  .pagehero--lead .pagehero__inner{grid-template-columns:minmax(0,1fr)}
  .pagehero--lead .pagehero__title br{display:none}
}

/* ── 23. WHAT ONE MOMENT CAN DO ───────────────────────────── */
/* Three possibilities read as one section: fine dividers, no cards,
   no icons, no shadows. */
.jobs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,3.5vw,3rem);
  margin-top:clamp(2.25rem,4.5vw,3.5rem);
  padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--line);
}
.job{
  display:flex;flex-direction:column;
  padding-right:clamp(1rem,2vw,1.75rem);
  border-right:1px solid var(--line-soft);
}
.job:last-child{border-right:0;padding-right:0}
.job__label{
  font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-deep);
}
.job__title{
  margin-top:var(--s4);
  font-size:clamp(1.2rem,1.9vw,1.55rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.18;
  color:var(--ink);
  text-wrap:balance;
}
.job__body{
  margin-top:var(--s4);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--muted);
}
.job__eg{
  margin-top:var(--s4);
  padding-top:var(--s4);
  border-top:1px solid var(--line-soft);
  font-size:var(--fs-small);
  font-weight:500;
  line-height:1.55;
  color:var(--ink-2);
}
.job .link-arrow{margin-top:auto;padding-top:clamp(1.25rem,2.5vw,1.75rem)}

@media (max-width:900px){
  .jobs{grid-template-columns:minmax(0,1fr);gap:0}
  .job{
    border-right:0;padding-right:0;
    padding-block:clamp(1.5rem,3vw,2rem);
    border-bottom:1px solid var(--line-soft);
  }
  .job:first-child{padding-top:0}
  .job:last-child{border-bottom:0;padding-bottom:0}
  .job .link-arrow{margin-top:var(--s5)}
}

/* these two carry less copy, so they need less room around it */
.section--tight{padding-block:clamp(2.5rem,5vw,4.25rem)}
.section--tight .rulepills{margin-top:clamp(1.5rem,3vw,2.25rem)}
.section--tight .bigline{margin-top:clamp(1.5rem,3vw,2.25rem)}
.section--tight .bigline + .link-arrow{margin-top:clamp(1rem,2vw,1.5rem)}

/* ── 24. TEAMS ENDING ─────────────────────────────────────── */
/* Four operating responsibilities, not four feature descriptions */
.roles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(2rem,5vw,4.5rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.roles > div{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.35rem clamp(1rem,2vw,1.75rem);
  padding-block:clamp(1rem,1.8vw,1.35rem);
  border-top:1px solid var(--on-ink-line);
}
.roles dt{
  flex:0 0 auto;
  font-size:var(--fs-body);
  font-weight:600;letter-spacing:-.018em;
  color:var(--on-ink);
}
.roles dd{
  margin:0;
  font-size:var(--fs-body);
  color:var(--on-ink-muted);
}
@media (max-width:760px){
  .roles{grid-template-columns:minmax(0,1fr)}
  .roles > div{flex-direction:column;gap:.25rem}
}

/* the evidence, in four words */
.renewal__verbs{
  font-size:clamp(1.25rem,2.1vw,1.7rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.25;
  color:var(--ink);
}
.renewal__verbs + .link-arrow{margin-top:clamp(1.25rem,2.5vw,1.75rem)}

/* the headline leads here, and the right column only carries four words */
.split--headline{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
@media (max-width:900px){
  .split--headline{grid-template-columns:minmax(0,1fr)}
  .split--headline .split__title br{display:none}
}

/* the sponsorship reframe carries the section, so it sits above the lead */
.pagehero__strap--lead{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  font-size:clamp(1.2rem,2vw,1.65rem);
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.25;
}

/* ── 25. THE PRESSURE ─────────────────────────────────────── */
/* A cinematic beat: the old question recedes as the new one takes over. */
.shift{padding-block:clamp(2rem,4vw,3.25rem)}
.shift .section__head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}

.shift__swap{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:clamp(.75rem,2vw,1.5rem);
  text-align:center;
}
.shift__was,.shift__now{
  font-size:clamp(1.5rem,3vw,2.5rem);
  font-weight:600;letter-spacing:-.036em;line-height:1.12;
  will-change:opacity,transform;
}
.shift__was{
  color:rgba(244,241,236,.72);
  opacity:var(--was-o,0);
  transform:translate3d(0,var(--was-y,14px),0);
}
.shift__becomes{
  font-size:var(--fs-micro);
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,241,236,.38);
  opacity:var(--bec-o,0);
}
.shift__now{
  color:#FDFBF7;
  background:linear-gradient(100deg,#FDFBF7 0%,#9FE4F2 46%,#7FD6C9 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  opacity:var(--now-o,0);
  transform:translate3d(0,var(--now-y,16px),0);
}
.shift__answer{
  margin:clamp(1.5rem,3vw,2.25rem) auto 0;
  max-width:52ch;
  text-align:center;
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--on-ink-muted);
  opacity:var(--ans-o,0);
  transform:translate3d(0,var(--ans-y,12px),0);
  will-change:opacity,transform;
}

@media (max-width:760px){
  .shift__swap{flex-direction:column;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .shift__was{opacity:.72;transform:none}
  .shift__becomes{opacity:1}
  .shift__now,.shift__answer{opacity:1;transform:none}
}

/* ── 26. THE PARTNERSHIP BRIEF ────────────────────────────── */
.split--pbrief{grid-template-columns:minmax(0,.44fr) minmax(0,.56fr)}
.split--pbrief .split__title{font-size:clamp(1.85rem,3.3vw,2.7rem);line-height:1.08}

/* Something a partnerships exec could take into a meeting: a filled-in
   brief, not six floating boxes. */
.pbrief{
  padding:clamp(1.5rem,2.6vw,2.15rem) clamp(1.5rem,2.8vw,2.35rem) clamp(1.35rem,2.4vw,1.9rem);
  border-radius:var(--r-md);
  background:linear-gradient(170deg,#FFFFFF 0%,#FDFAF6 100%);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,16,21,.03),0 14px 36px rgba(11,16,21,.06);
}
.pbrief__label{
  font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);
}
.pbrief__title{
  margin-top:var(--s3);
  padding-bottom:clamp(.9rem,1.7vw,1.2rem);
  border-bottom:1px solid var(--line);
  font-size:clamp(1.15rem,1.85vw,1.45rem);
  font-weight:600;letter-spacing:-.028em;
  color:var(--ink);
}

.pbrief__rows{display:grid}
.pbrief__rows li{
  position:relative;
  display:grid;
  grid-template-columns:minmax(5.5rem,7.5rem) minmax(0,1fr);
  gap:clamp(.75rem,1.6vw,1.25rem);
  align-items:baseline;
  padding:clamp(.7rem,1.3vw,.95rem) 0 clamp(.7rem,1.3vw,.95rem) var(--s5);
  border-bottom:1px solid var(--line-soft);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.pbrief__rows li:last-child{border-bottom:0;padding-bottom:0}
.reveal.is-in .pbrief__rows li{opacity:1;transform:none}
.reveal.is-in .pbrief__rows li{transition-delay:calc(var(--r,0) * 120ms)}

/* the six steps read as one progression, not six parts */
.pbrief__rows li::before{
  content:"";
  position:absolute;left:3px;top:0;bottom:0;
  width:1px;
  background:var(--line);
}
.pbrief__rows li:first-child::before{top:50%}
.pbrief__rows li:last-child::before{bottom:50%}
.pbrief__rows li::after{
  content:"";
  position:absolute;left:0;top:50%;
  width:7px;height:7px;border-radius:50%;
  transform:translateY(-50%);
  background:var(--grad-brand);
}

.pbrief__term{
  font-size:var(--fs-small);font-weight:600;
  letter-spacing:.02em;
  color:var(--blue-deep);
}
.pbrief__rows li:nth-child(1) .pbrief__term{color:var(--coral)}
.pbrief__rows li:nth-child(2) .pbrief__term{color:var(--rose)}
.pbrief__rows li:nth-child(3) .pbrief__term{color:var(--purple)}
.pbrief__rows li:nth-child(4) .pbrief__term{color:var(--indigo)}
.pbrief__rows li:nth-child(5) .pbrief__term{color:var(--blue-deep)}
.pbrief__rows li:nth-child(6) .pbrief__term{color:#2E9E7A}
.pbrief__val{
  font-size:var(--fs-body);font-weight:500;
  letter-spacing:-.014em;
  color:var(--ink);
}
.pbrief__note{
  margin-top:clamp(1rem,2vw,1.4rem);
  padding-top:clamp(1rem,2vw,1.4rem);
  border-top:1px solid var(--line);
  font-size:var(--fs-small);
  color:var(--muted);
}

@media (max-width:900px){
  .split--pbrief{grid-template-columns:minmax(0,1fr)}
  .split--pbrief .split__title br{display:none}
}
@media (max-width:520px){
  .pbrief__rows li{grid-template-columns:minmax(0,1fr);gap:.2rem}
}
@media (prefers-reduced-motion:reduce){
  .pbrief__rows li{opacity:1;transform:none;transition:none}
}

/* ── 27. SPONSORSHIP INVENTORY ────────────────────────────── */
/* The old model, stated once and quietly, so the table reads as the
   expansion of it. */
.inv__before{
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  font-size:var(--fs-micro);
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);
}
.inv__before span{color:var(--line);margin-inline:.35em}

/* A page from a partnership deck, not a spreadsheet: hairline row rules,
   no cell borders, generous horizontal air. */
.inv{
  margin-top:clamp(.85rem,1.6vw,1.15rem);
  overflow-x:auto;
}
.inv__table{
  width:100%;
  border-collapse:collapse;
  text-align:left;
}
.inv__table th,
.inv__table td{
  padding:clamp(.9rem,1.7vw,1.25rem) clamp(.75rem,1.8vw,1.5rem);
  vertical-align:baseline;
}
.inv__table th:first-child,
.inv__table td:first-child{padding-left:0}
.inv__table th:last-child,
.inv__table td:last-child{padding-right:0}

.inv__table thead th{
  border-bottom:1px solid var(--line);
  font-size:var(--fs-micro);
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;
}
.inv__table thead th:nth-child(1){color:var(--muted-2)}
.inv__table thead th:nth-child(2){color:var(--rose)}
.inv__table thead th:nth-child(3){color:var(--indigo)}
.inv__table thead th:nth-child(4){color:var(--blue-deep)}

.inv__table tbody tr{border-bottom:1px solid var(--line-soft)}
.inv__table tbody tr:last-child{border-bottom:0}
.inv__table tbody th{
  font-size:clamp(1rem,1.5vw,1.2rem);
  font-weight:600;letter-spacing:-.022em;
  color:var(--ink);
  white-space:nowrap;
}
.inv__table tbody td{
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--ink-2);
}
.inv__table tbody td:last-child{color:var(--blue-deep);font-weight:600}

.inv__close{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  font-size:clamp(1.1rem,1.8vw,1.4rem);
  font-weight:600;letter-spacing:-.026em;
  color:var(--ink);
}

/* mobile: each row becomes a compact record, never a cramped 4-column grid */
@media (max-width:720px){
  .inv{overflow-x:visible}
  .inv__table,.inv__table tbody,.inv__table tr,.inv__table th,.inv__table td{display:block}
  .inv__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .inv__table tbody tr{
    padding-block:clamp(1rem,3vw,1.35rem);
    border-bottom:1px solid var(--line);
  }
  .inv__table tbody tr:last-child{border-bottom:0}
  .inv__table tbody th{padding:0 0 var(--s3);font-size:1.1rem}
  .inv__table tbody td{
    display:flex;justify-content:space-between;gap:var(--s4);
    padding:.3rem 0;
  }
  .inv__table tbody td::before{
    content:attr(data-col);
    font-size:var(--fs-micro);font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted-2);
  }
}

/* ── 28. THE EVIDENCE ─────────────────────────────────────── */
/* Measurement records, not feature cards: the action, and the thing
   that proves it happened. */
.actions--evidence{margin-top:clamp(2rem,4vw,3rem)}
.actions--evidence .action__head{gap:.35rem}
.actions--evidence .action__verb{font-size:1.28rem}
.actions--evidence .action__gets{
  min-height:0;              /* single-word outcomes need no reserved slot */
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink-2);
}
.ev__distinct{
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.014em;
}
.ev__distinct + p{margin-top:var(--s3)}

.ev__close{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  font-size:clamp(1.1rem,1.8vw,1.4rem);
  font-weight:600;letter-spacing:-.026em;
  color:var(--ink);
}
.ev__close + .link-arrow{margin-top:clamp(.9rem,1.8vw,1.25rem)}

/* ── 29. BRANDS CLOSING CTA ───────────────────────────────── */
/* A confident close, not another chapter: less air around it, and the
   environmental glow pulled back to atmosphere. */
.closing{
  padding-block:clamp(2.4rem,4.6vw,4.25rem);
  background:
    radial-gradient(90% 60% at 82% 6%,rgba(47,146,209,.16) 0%,rgba(47,146,209,0) 62%),
    radial-gradient(70% 55% at 8% 94%,rgba(138,89,153,.10) 0%,rgba(138,89,153,0) 58%),
    linear-gradient(180deg,var(--ink-bg) 0%,var(--ink-bg-2) 52%,var(--ink-bg) 100%);
}
.closing .section__head{margin-bottom:0}
.closing .section__lead{margin-top:var(--s4)}
/* the button belongs to the sentence above it */
.closing__cta{margin-top:clamp(1.25rem,2.4vw,1.85rem)}

/* restrained hover: a little brighter, a little higher, arrow leads */
.closing .btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(47,146,209,.28);
  filter:brightness(1.04);
}