/* ============================================================
   GRIFFAIN funnel — Hyros-skeleton design system
   Tokens measured from live capture (see capture/SPEC.md)
   ============================================================ */
:root{
  --serif:"Fraunces","P22 Mackinac",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --accent:#0066FF;            /* GRIFFAIN cobalt (Spectrum) */
  --accent-hover:#0052D4;
  --cobalt-deep:#1E3FD0;
  --teal:#0AA2D8;
  --cyan:#3AD0E6;
  --indigo:#2A1A6E;
  --grad-brand:linear-gradient(108deg,#2A1A6E 0%,#1E3FD0 26%,#0066FF 50%,#0AA2D8 77%,#3AD0E6 100%);
  --grad-text:linear-gradient(135deg,#3AD0E6 0%,#0066FF 50%,#1E3FD0 100%);
  --hero-base:#5150F7;
  --paper:#fff;
  --soft:#F9F9F9;
  --ink:#000;
  --ink-2:#333;
  --grey:#949494;
  --grey-2:#666;
  --dark:#000;
  --dark-card:#121212;
  --green:#6CB14D;
  --green-text:#4EA321;
  --ring:rgba(0,0,0,.08);
  --r-card:16px;
  --r-mega:24px;
  --r-pill:999px;
  --w-content:1160px;
  --w-panel:1224px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5;overflow-x:hidden;
  /* Mackinac match: the reference's serif is P22 Mackinac (commercial). Fraunces
     with SOFT maxed + optical size capped at ~34 is the closest match — without
     the opsz cap, browsers auto-pick opsz 144 at display sizes, giving hairline
     high-contrast strokes that Mackinac does not have. Inherits everywhere;
     fonts without these axes (Inter, Plex) ignore them. */
  font-variation-settings:"SOFT" 80,"WONK" 0,"opsz" 34;
  /* ambient brand washes — color breathing through the white, viewport-anchored */
  background:
    radial-gradient(700px 500px at 8% 12%, rgba(0,102,255,.055), transparent 62%),
    radial-gradient(620px 480px at 94% 26%, rgba(236,72,153,.05), transparent 62%),
    radial-gradient(700px 540px at 12% 80%, rgba(34,197,94,.045), transparent 62%),
    radial-gradient(660px 500px at 90% 90%, rgba(249,115,22,.05), transparent 62%),
    var(--paper);
  background-attachment:fixed}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- type ---------- */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:.1px;font-variation-settings:"SOFT" 80,"WONK" 0,"opsz" 34;}
.h-hero-pre{font-family:var(--serif);font-size:42px;line-height:1.2;letter-spacing:.1px}
.h-hero{font-family:var(--serif);font-size:110px;line-height:1.2;letter-spacing:.5px}
.h-section{font-family:var(--serif);font-size:42px;line-height:1.2;letter-spacing:.1px}
.h-block{font-family:var(--serif);font-size:36px;line-height:1.2;letter-spacing:.1px}
.h-card{font-family:var(--serif);font-size:32px;line-height:1.2;letter-spacing:.1px}
/* Mackinac-Book weight — the reference's serif headings are BOOK (400), never bold.
   Heading elements default to 700, and the loaded Fraunces carries no 700, so the
   browser was SYNTHESIZING a faux-bold on every serif heading (the chunky look).
   Every class that sets font-family:var(--serif) is pinned to 400 here. */
.hero-pre,.hero-word,.h-hero-pre,.h-hero,.h-section,.h-block,.h-card,.roi-head,.usecase-head,
.uc-title,.mega-title,.results-head,.fc-title,.period-title,.cta-title,.book-title,.svc-h1,
.cs-pitch h3,.cs-done h4,.svc-close h2,.words-sticky h2,.stmt h2,.chapter h2,.hiw-card h3,
.price-mega h1,.pcard-title,.pincl h2,.pwhy h2,.ag-hero h1,.ag-how-left h2,.gpop h3,
.diag-title,.diag-q,.air-hero .giant,.air-hero .sub-serif,.qw-feat .qw-quote,.bcard .stat,
.rb-stat,.ptotal .amt{font-weight:400}
/* headings styled serif INLINE (style="font-family:var(--serif)…") get Book too —
   the class list above can't see them */
[style*="--serif"]{font-weight:400}
.sub-20{font-size:20px;line-height:1.5;font-weight:400}
.sub-20-med{font-size:20px;line-height:1.5;font-weight:500}

/* ---------- layout ---------- */
.container{max-width:var(--w-content);margin:0 auto;padding:0 24px}
.section{padding:96px 0}

/* ---------- pills / buttons ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 24px;border-radius:var(--r-pill);
  font-size:16px;font-weight:500;line-height:1;transition:transform .18s ease,opacity .18s ease,background .18s ease}
.pill:hover{transform:translateY(-1px)}
.pill:active{transform:translateY(0) scale(.98)}
.pill-white{background:#fff;color:var(--ink)}
.pill-glass{background:rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(6px)}
.pill-glass:hover{background:rgba(255,255,255,.25)}
.pill-dark{background:var(--ink);color:#fff}
.pill-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.pill-ghost:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.34)}
.pill-sm{height:38px;padding:0 18px;font-size:14px}

/* ---------- nav ---------- */
.nav-wrap{position:absolute;top:0;left:0;right:0;z-index:50;padding:28px 40px}
.nav-wrap.nav-solid{position:static;background:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:1360px;margin:0 auto}
.nav-logo{display:flex;align-items:center;gap:11px;color:#fff}
.nav-logo .gf-word{font-size:17px;color:#fff}
.nav-solid .nav-logo .gf-word{color:var(--ink)}
.nav-logo svg{display:block;filter:none}
/* on dark hero the mark is SOLID WHITE (crisp), on light pages cobalt gradient */
.nav-logo .mark-stroke{stroke:#fff}
.nav-solid .nav-logo .mark-stroke{stroke:url(#gfnavg)}
.nav-links{display:flex;gap:32px;font-size:15px;font-weight:500;color:#fff;align-items:center}
.nav-solid .nav-links{color:var(--ink)}
.nav-links a{transition:color .16s ease}
.nav-links>a:hover{color:#9BE8F5}
.nav-solid .nav-links>a:hover{color:var(--accent)}
/* Systems dropdown (reference nav pattern) */
.nav-drop{position:relative}
.nav-drop-btn{display:flex;align-items:center;gap:6px;font:inherit;color:inherit;font-weight:500;
  font-size:15px;cursor:pointer;transition:color .16s ease}
.nav-drop:hover .nav-drop-btn{color:#9BE8F5}
.nav-solid .nav-drop:hover .nav-drop-btn{color:var(--accent)}
.nav-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.nav-menu{position:absolute;top:calc(100% + 12px);left:-16px;background:#fff;border-radius:16px;width:322px;
  box-shadow:0 18px 54px rgba(20,16,40,.18),0 0 0 1px rgba(0,0,0,.05);padding:8px;min-width:238px;
  display:none;z-index:90}
.nav-drop:hover .nav-menu{display:block}
/* rich menu rows — emoji chip + label + sub, rainbow gradient label on hover
   (the reference nav's hover text-fill gradient, our stops) */
.nav-menu a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px}
.nm-ico{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:17px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.nm-txt{display:flex;flex-direction:column;min-width:0}
.nm-txt b{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3;white-space:nowrap}
.nm-txt i{font-style:normal;font-size:12.5px;color:var(--grey);line-height:1.35;white-space:nowrap}
.nav-menu a:hover{background:#F7F8FB}
.nav-menu a:hover .nm-txt b{background:linear-gradient(90deg,#F7265B -10%,#F632D0 28%,#0066FF 62%,#36F486 105%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nav-cta{display:flex;gap:10px}
.nav-login{height:38px;padding:0 20px;border-radius:var(--r-pill);display:inline-flex;align-items:center;
  background:rgba(255,255,255,.15);color:#fff;font-size:14px;font-weight:500;backdrop-filter:blur(6px)}
.nav-solid .nav-login{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.nav-signup{height:38px;padding:0 20px;border-radius:var(--r-pill);display:inline-flex;align-items:center;
  background:#fff;color:var(--ink);font-size:14px;font-weight:600}
.nav-solid .nav-signup{background:var(--ink);color:#fff}
/* ambient-gradient nav CTAs */
.nav-signup.grad-blue,.nav-solid .nav-signup.grad-blue{color:#fff;
  background:linear-gradient(180deg,#4D9AFF 0%,#0066FF 55%,#0052D4 100%);
  box-shadow:0 6px 18px rgba(0,102,255,.35), inset 0 1px 0 rgba(255,255,255,.4)}
.nav-signup.grad-warm,.nav-solid .nav-signup.grad-warm{color:#fff;
  background:linear-gradient(120deg,#8B5CF6 0%,#EC4899 55%,#F97316 100%);
  box-shadow:0 6px 18px rgba(236,72,153,.32), inset 0 1px 0 rgba(255,255,255,.35)}
.nav-signup.grad-blue:hover,.nav-signup.grad-warm:hover{filter:brightness(1.08)}

/* dark diagnostic card (pricing-card aesthetic) */
.diag-dark .diag-card{background:#131313;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 80px rgba(0,0,0,.5)}
.diag-dark .diag-q{color:#fff}
.diag-dark .diag-step{color:rgba(255,255,255,.5)}
.diag-dark .diag-hint{color:rgba(255,255,255,.55)}
.diag-dark .diag-card textarea,.diag-dark .diag-card input{background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);color:#fff}
.diag-dark .diag-card textarea:focus,.diag-dark .diag-card input:focus{border-color:#fff;background:rgba(255,255,255,.1)}
.diag-dark .diag-card textarea::placeholder,.diag-dark .diag-card input::placeholder{color:rgba(255,255,255,.35)}
.diag-dark .diag-back{color:rgba(255,255,255,.6)}
.diag-dark .diag-bar{background:rgba(255,255,255,.12)}
.diag-dark .rx{border-left-color:#3AD0E6}
.diag-dark .rx p{color:rgba(255,255,255,.75)}
.diag-dark .pill-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.diag-dark .pill-dark{background:#fff;color:var(--ink)}
.diag-side h3{font-size:17px;font-weight:700;margin-bottom:14px}
.diag-side .row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.7)}
.diag-side .row svg{flex:none;margin-top:2px;color:#3AD0E6}
.diag-side .row b{color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--hero-base);color:#fff;overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the Earth orb — the reference's hero sphere: big sphere, MODEST visible arc
   rising from the hero bottom BELOW the text, ticker panel overlapping it */
/* canvas is K=1.28x the sphere (see globe.js) so the halo fades out INSIDE the
   canvas — sizing below keeps the sphere at its previous 1200px/-0.72 geometry */
.globe-canvas{position:absolute;left:50%;transform:translateX(-50%);z-index:1;pointer-events:none;
  width:min(1536px,179vw);max-width:none;aspect-ratio:1/1;bottom:calc(min(1536px,179vw) * -0.672)}
.hero-inner{position:relative;z-index:2;max-width:1360px;margin:0 auto;
  padding:200px 40px 340px}
.hero-pre{font-family:var(--serif);font-size:42px;line-height:1.2}
.hero-word{font-family:var(--serif);font-size:110px;line-height:1.2;letter-spacing:1px}
.hero-sub{margin-top:20px;font-size:20px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.92);max-width:460px}
.hero-ctas{margin-top:36px;display:flex;gap:14px}
.hero .pill-white{color:var(--ink)}

/* ticker panel overlapping hero bottom — wears the site's rainbow ambient:
   spinning conic ring + soft multicolor glow bleeding out behind the card
   (same @property --gpa spin the promo popup uses) */
.ticker-panel{position:relative;z-index:3;max-width:var(--w-panel);margin:-120px auto 0;
  border-radius:22px;padding:2.5px;
  background:conic-gradient(from var(--gpa,210deg),#3AD0E6,#0066FF,#8B5CF6,#EC4899,#FFB062,#3AD0E6);
  animation:ringspin 12s linear infinite}
/* (blurred glow behind the panel REMOVED 2026-07-31 — it read as a boxy shadow
   over the globe; the ring border alone carries the rainbow now) */
@keyframes ringspin{to{--gpa:570deg}}
.ticker-inner{background:#fff;border-radius:19.5px;padding:32px;overflow:hidden;position:relative}
.ticker-track{display:flex;gap:48px}
.ticker-item{flex:1;display:flex;flex-direction:column;gap:24px;position:relative}
/* duplicate marquee set: hidden everywhere except the ≤640 marquee.
   Must outrank .ticker-item's display:flex, hence the compound selector. */
.ticker-item.tk-dupe{display:none}
.ticker-item + .ticker-item::before{content:"";position:absolute;left:-24px;top:4px;bottom:4px;width:1px;background:rgba(0,0,0,.08)}
.ticker-quote{font-size:18px;line-height:1.5;color:var(--ink)}
.ticker-person{margin-top:auto;display:flex;align-items:center;gap:12px}
.ticker-mark{width:38px;height:38px;flex:none;border-radius:9px;object-fit:contain;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ticker-name{font-size:16px;font-weight:500;letter-spacing:-.32px}
.ticker-role{font-size:14px;color:var(--grey);margin-top:2px}
/* items cascade in once the panel reveals */
.ticker-panel:not(.in) .ticker-item{opacity:0}
.ticker-panel.in .ticker-item{animation:riseIn .7s cubic-bezier(.16,1,.3,1) backwards}
.ticker-panel.in .ticker-item:nth-child(2){animation-delay:.08s}
.ticker-panel.in .ticker-item:nth-child(3){animation-delay:.16s}
.ticker-panel.in .ticker-item:nth-child(4){animation-delay:.24s}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- rainbow border card ---------- */
.rainbow{position:relative;border-radius:var(--r-card);padding:4px;
  background:conic-gradient(from 180deg at 50% 50%,#5150F7,#C026D3,#F43F5E,#F97316,#FACC15,#22C55E,#06B6D4,#5150F7)}
.rainbow-inner{background:#fff;border-radius:12px;padding:40px}
.rainbow-mega{border-radius:var(--r-mega);padding:8px;
  background:conic-gradient(from 140deg at 50% 50%,#5150F7,#C026D3,#F43F5E,#F97316,#FACC15,#22C55E,#06B6D4,#5150F7)}

/* ROI section */
.roi{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.roi-head{font-family:var(--serif);font-size:36px;line-height:1.2}
.roi-sub{margin-top:24px;font-size:20px;color:var(--grey-2);white-space:pre-line}
.check-row{display:flex;align-items:center;gap:16px;font-size:18px;font-weight:500;padding:10px 0}
.check-ico{width:26px;height:26px;flex:none;display:grid;place-items:center;color:var(--accent)}
.roi-note{display:flex;align-items:center;gap:20px;margin-top:24px;padding-top:24px;border-top:1px solid rgba(0,0,0,.08)}
.roi-note-ico{width:64px;height:64px;flex:none;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);display:grid;place-items:center;font-size:26px}
.roi-note p{font-size:16px;line-height:1.55}

/* review wall — featured story + 2×2 supporting, ambient rainbow drifting behind
   (asymmetric per taste-verdicts: featured card + supporting grid for 5+ stories) */
.quotes-wall{position:relative;display:grid;grid-template-columns:1.14fr 1fr 1fr;gap:16px;
  padding-top:64px;margin-top:80px;border-top:1px solid rgba(0,0,0,.08)}
.qw-glow{position:absolute;left:-3%;right:-3%;top:16%;bottom:-4%;z-index:0;pointer-events:none;
  filter:blur(64px);opacity:.16;border-radius:60px;
  background:conic-gradient(from 140deg at 50% 50%,#5150F7,#C026D3,#F43F5E,#F97316,#FACC15,#22C55E,#06B6D4,#5150F7);
  animation:qwDrift 18s ease-in-out infinite alternate}
@keyframes qwDrift{from{transform:translate(-1.5%,0) scale(1)}to{transform:translate(1.5%,2.5%) scale(1.05)}}
.qw-card{position:relative;z-index:1;border-radius:var(--r-card);background:#fff;
  box-shadow:0 0 0 1px var(--ring),0 2px 10px rgba(0,0,0,.04);padding:28px;
  display:flex;flex-direction:column;min-width:0;
  transition:transform .35s cubic-bezier(.19,1,.28,1),box-shadow .35s cubic-bezier(.19,1,.28,1)}
.qw-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--ring),0 16px 40px rgba(0,0,0,.1)}
.qw-quote{font-size:17px;line-height:1.55}
.qw-person{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:12px}
.qw-mark{width:44px;height:44px;flex:none;border-radius:10px;object-fit:contain;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.qw-badge{width:44px;height:44px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,#1E3FD0,#0066FF)}
.qw-name{font-size:15.5px;font-weight:500;letter-spacing:-.2px}
.qw-link{font-size:13.5px;color:#8B8AF0;margin-top:1px}
/* featured card — dark stage inside a spinning rainbow ring, aurora breathing */
.qw-feat{grid-row:span 2;padding:3px;
  background:conic-gradient(from var(--gpa,140deg),#3AD0E6,#0066FF,#8B5CF6,#EC4899,#FFB062,#3AD0E6);
  box-shadow:none}
.qw-feat:hover{transform:none;box-shadow:none}
.qw-feat-in{position:relative;overflow:clip;height:100%;border-radius:13px;background:var(--dark);color:#fff;
  padding:40px 34px;display:flex;flex-direction:column}
.qw-feat-in::before{content:"";position:absolute;inset:-30%;pointer-events:none;filter:blur(42px);
  background:
    radial-gradient(40% 48% at 14% 16%, rgba(81,80,247,.42), transparent 62%),
    radial-gradient(44% 54% at 86% 10%, rgba(236,72,153,.3), transparent 62%),
    radial-gradient(46% 56% at 80% 90%, rgba(10,162,216,.34), transparent 62%),
    radial-gradient(40% 52% at 14% 92%, rgba(249,115,22,.26), transparent 62%);
  animation:megaDrift 14s ease-in-out infinite alternate}
.qw-feat-in>*{position:relative;z-index:1}
.qw-feat .qw-quote{font-family:var(--serif);font-size:26px;line-height:1.4;letter-spacing:.1px}
.qw-feat .qw-name{color:#fff}
.qw-feat .qw-link{color:#A5B4FF}
/* the track is invisible on desktop (display:contents = grid sees the cards);
   on mobile it becomes the animated marquee strip. Dupes desktop-hidden. */
.qw-track{display:contents}
.qw-card.qw-dupe{display:none}
/* cards cascade in once the wall reveals */
.quotes-wall:not(.in) .qw-card{opacity:0}
.quotes-wall.in .qw-card{animation:riseIn .7s cubic-bezier(.16,1,.3,1) backwards}
.quotes-wall.in .qw-feat{animation:ringspin 11s linear infinite,riseIn .7s cubic-bezier(.16,1,.3,1) backwards}
.quotes-wall.in .qw-card:nth-child(2){animation-delay:.07s}
.quotes-wall.in .qw-card:nth-child(3){animation-delay:.14s}
.quotes-wall.in .qw-card:nth-child(4){animation-delay:.21s}
.quotes-wall.in .qw-card:nth-child(5){animation-delay:.28s}

/* ---------- use-case ---------- */
.usecase-head{text-align:center;font-family:var(--serif);font-size:42px;line-height:1.25;margin-bottom:48px}
.uc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* per-card client review (reference pattern: italic serif quote + mark + name) */
.uc-review{margin-top:24px;padding-top:18px;border-top:1px solid rgba(0,0,0,.07)}
.uc-review-q{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;color:var(--ink-2)}
.uc-review-p{display:flex;align-items:center;gap:10px;margin-top:14px}
.uc-review-p img{width:32px;height:32px;flex:none;border-radius:8px;object-fit:contain;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.uc-review-mark{width:32px;height:32px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,#1E3FD0,#0066FF)}
.uc-review-n{font-size:13.5px;font-weight:600;line-height:1.3}
.uc-review-r{font-size:12.5px;color:var(--grey);margin-top:1px}
/* wide card (e-commerce) spans the grid, content left + review right */
.uc-card.uc-wide{grid-column:span 2;flex-direction:row;align-items:center;gap:48px;min-height:0}
.uc-wide .uc-main{flex:1.15;min-width:0}
.uc-wide .uc-review{flex:1;min-width:0;margin-top:0;padding-top:0;border-top:none;
  border-left:1px solid rgba(0,0,0,.07);padding-left:40px}
.uc-card{background:#fff;border-radius:var(--r-card);padding:40px;min-height:270px;
  display:flex;flex-direction:column;position:relative;transition:transform .25s ease}
.uc-card:hover{transform:translateY(-3px)}
.uc-ico{width:40px;height:40px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;margin-bottom:40px}
.uc-title{font-family:var(--serif);font-size:32px;line-height:1.2}
.uc-you{margin-top:16px;font-size:18px;font-weight:500}
.uc-track{margin-top:8px;font-size:16px;color:var(--grey-2)}
.uc-cta{margin-top:24px;display:flex;gap:10px}
.uc-badge{position:absolute;top:32px;right:32px;display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 14px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
  color:var(--green-text);font-size:14px;font-weight:600}
.pill-green{background:var(--green);color:#fff}

/* ---------- founder quote ---------- */
.founder{text-align:center;max-width:620px;margin:0 auto;position:relative}
/* the orbit rig — every channel orbiting one system. Rings are conic rainbow
   gradients masked to hairlines, spinning at different speeds; nodes counter-
   rotate to stay upright; the wave-mark core pulses. */
.orbitrig{position:relative;width:460px;max-width:92%;height:250px;margin:0 auto 30px;overflow:hidden}
.orbit-glow{position:absolute;left:50%;top:84px;width:290px;height:290px;transform:translateX(-50%);
  border-radius:50%;filter:blur(42px);opacity:.24;
  background:conic-gradient(#F97316,#EC4899,#8B5CF6,#0066FF,#0AA2D8,#22C55E,#F97316);
  -webkit-mask:radial-gradient(circle,#000 35%,transparent 72%);
  mask:radial-gradient(circle,#000 35%,transparent 72%);
  animation:orbitspin 24s linear infinite}
.orbit-ring{position:absolute;left:50%;border-radius:50%;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}
.orbit-ring.r1{width:200px;height:200px;top:130px;margin-left:-100px;
  background:conic-gradient(#0066FF,#0AA2D8,#3AD0E6,#0066FF);animation:orbitspin 14s linear infinite}
.orbit-ring.r2{width:330px;height:330px;top:66px;margin-left:-165px;
  background:conic-gradient(#EC4899,#F97316,#FACC15,#EC4899);animation:orbitspin 22s linear infinite reverse}
.orbit-ring.r3{width:456px;height:456px;top:4px;margin-left:-228px;
  background:conic-gradient(#22C55E,#0AA2D8,#8B5CF6,#22C55E);animation:orbitspin 32s linear infinite}
/* carriers spin with their ring; the visible node counter-spins to stay upright */
.orbit-carrier{position:absolute;inset:0;animation:orbitspin linear infinite}
.orbit-ring-wrap{position:absolute;left:50%}
.oc1{animation-duration:14s}.oc2{animation-duration:22s;animation-direction:reverse}
.oc3{animation-duration:32s}.oc2b{animation-duration:22s;animation-direction:reverse;animation-delay:-11s}
.orbit-node{position:absolute;left:50%;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.14),inset 0 0 0 1px rgba(0,0,0,.06);
  display:grid;place-items:center}
.oc1 .orbit-node{animation:counterspin 14s linear infinite}
.oc2 .orbit-node,.oc2b .orbit-node{animation:counterspin 22s linear infinite reverse}
.oc3 .orbit-node{animation:counterspin 32s linear infinite}
.orbit-core{position:absolute;left:50%;top:230px;width:76px;height:76px;transform:translate(-50%,-50%);
  border-radius:50%;background:linear-gradient(135deg,#1E3FD0,#0066FF,#0AA2D8);
  display:grid;place-items:center;box-shadow:0 14px 40px rgba(0,102,255,.4);animation:corepulse 3.2s ease-in-out infinite}
@keyframes orbitspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes counterspin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes corepulse{0%,100%{box-shadow:0 14px 40px rgba(0,102,255,.4),0 0 0 0 rgba(0,102,255,.35)}
  55%{box-shadow:0 14px 40px rgba(0,102,255,.4),0 0 0 22px rgba(0,102,255,0)}}
@media(prefers-reduced-motion:reduce){.orbit-ring,.orbit-carrier,.orbit-node,.orbit-glow,.orbit-core{animation:none}}
.founder-quote{font-size:20px;line-height:1.5;color:var(--ink-2)}
.founder-avatar{width:26px;height:26px;border-radius:50%;background:var(--ink);margin:28px auto 10px}
.founder-name{font-size:15px;font-weight:500}
.founder-name .fn-accent{color:#8B8AF0}
.founder-title{font-size:14px;color:var(--ink-2);margin-top:2px}
.founder-sig{margin:28px auto 0;padding-top:28px;border-top:1px solid rgba(0,0,0,.08);width:100%;display:flex;justify-content:center}

/* ---------- results wall ---------- */
.results-head{text-align:center;font-family:var(--serif);font-size:42px;line-height:1.25}
.results-sub{text-align:center;font-size:18px;color:var(--grey-2);margin-top:20px}
.bento{margin-top:64px;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bcard{background:#fff;border-radius:var(--r-card);box-shadow:0 0 0 1px rgba(0,0,0,.07);padding:32px;
  display:flex;flex-direction:column;gap:20px}
.bcard .stat{font-family:var(--serif);font-size:44px;line-height:1.1}
.bcard .stat-label{font-size:15px;color:var(--grey);margin-top:4px}
.bcard .bquote{font-size:16px;line-height:1.55;color:var(--ink-2);padding-top:20px;border-top:1px solid rgba(0,0,0,.08)}
.bcard .bquote.no-line{border-top:none;padding-top:0}
.bperson{margin-top:auto;display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08)}
.bperson.no-line{border-top:none;padding-top:0}
.bperson-badge{width:48px;height:48px;flex:none;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.bperson-name{font-size:16px;font-weight:500;letter-spacing:-.32px}
.bperson-link{font-size:14px;color:#8B8AF0;margin-top:2px}
.bphoto{border-radius:12px;background:#EDEDF2;min-height:180px;object-fit:cover}
.span-5{grid-column:span 5}.span-4{grid-column:span 4}.span-3{grid-column:span 3}
.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}

/* ---------- dark mega section — living aurora, not flat black ---------- */
/* overflow:clip (NOT hidden) — hidden creates a clip context that KILLS
   position:sticky for the pinned feature cards inside; clip keeps the
   rounded-corner clipping without breaking sticky */
.mega{border-radius:var(--r-mega);margin:0 12px;padding:96px 0 28px;color:#fff;background:var(--dark);
  position:relative;overflow:clip}
.mega::before{content:"";position:absolute;inset:-25%;pointer-events:none;filter:blur(46px);
  background:
    radial-gradient(38% 46% at 12% 18%, rgba(81,80,247,.34), transparent 62%),
    radial-gradient(42% 52% at 88% 12%, rgba(236,72,153,.22), transparent 62%),
    radial-gradient(46% 56% at 78% 88%, rgba(10,162,216,.26), transparent 62%),
    radial-gradient(38% 50% at 18% 92%, rgba(249,115,22,.2), transparent 62%);
  animation:megaDrift 16s ease-in-out infinite alternate}
@keyframes megaDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(3%,2.5%) scale(1.07)}}
.mega>*{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.mega::before{animation:none}}
.mega-head{text-align:center;max-width:760px;margin:0 auto 72px;padding:0 24px}
.tag-pill{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:#8B8AF0;font-size:14px;font-weight:500;margin-bottom:28px}
.tag-pill.on-light{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tag-grad{background:linear-gradient(90deg,#F97316,#EC4899,#5150F7,#22C55E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mega-title{font-family:var(--serif);font-size:42px;line-height:1.25}
.mega-sub{margin-top:20px;font-size:18px;font-weight:500;color:rgba(255,255,255,.85)}
.mega .mega-sub{color:rgba(255,255,255,.7)}

/* the pinned card's wrapper — was an inline style, which no stylesheet rule
   could override on mobile */
.pin-wrap{position:sticky;top:6vh;padding:0 24px}
.pin-wrap-last{padding-bottom:40px}
@media (max-width:600px){
  /* 16px gutters => card lands at 91% of the viewport, matching the reference */
  .pin-wrap{padding-left:16px;padding-right:16px}
}

/* Measured 1:1 against hyros.com at 2133x955 (2026-08-04).
   Reference: card 1160w x 768h = 80% of viewport height, radius 20-24.
   Ours was:  card 1224w x 832h = 88% of viewport height, radius 16 — eight
   points of viewport taller than the reference, which is what read as oversized.
   The cap is on HEIGHT as well as width; width alone would not have fixed it. */
.feature-card{max-width:1160px;margin:0 auto;border-radius:20px;
  background:var(--dark-card);padding:56px 44px;display:grid;grid-template-columns:1fr 1.25fr;gap:44px;
  position:relative;max-height:80vh}
/* rainbow hairline ring around the card */
.feature-card::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1.5px;
  background:linear-gradient(120deg,rgba(249,115,22,.55),rgba(236,72,153,.45),rgba(139,92,246,.4),rgba(0,102,255,.55),rgba(10,162,216,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.feature-card.on-light{background:linear-gradient(160deg,#FDFDFF,#F4F8FF)}
/* active accordion bar = gradient */
.acc-item.active .acc-bar{background:linear-gradient(180deg,#F97316,#EC4899,#0066FF)!important}
/* visual panel gets ambient color + floating cards */
.fc-visual{background:
  radial-gradient(60% 70% at 72% 26%, rgba(81,80,247,.22), transparent 64%),
  radial-gradient(50% 62% at 22% 82%, rgba(236,72,153,.16), transparent 62%),
  radial-gradient(45% 55% at 85% 85%, rgba(10,162,216,.16), transparent 62%),
  rgba(255,255,255,.03)}
.on-light .fc-visual{background:
  radial-gradient(60% 70% at 72% 26%, rgba(0,102,255,.1), transparent 64%),
  radial-gradient(50% 62% at 22% 82%, rgba(236,72,153,.08), transparent 62%),#fff}
.fc-scene .scene-card,.fc-scene .chipgrid{animation:mockFloat 6s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.fc-scene .scene-card,.fc-scene .chipgrid{animation:none}}
.fc-title{font-family:var(--serif);font-size:36px;line-height:1.2;margin-bottom:34px}
.acc-item{padding:10px 0}
.acc-btn{display:flex;align-items:stretch;gap:16px;width:100%;text-align:left;color:inherit}
.acc-bar{width:3px;border-radius:2px;background:rgba(255,255,255,.25);flex:none;align-self:stretch;min-height:26px;transition:background .3s}
.on-light .acc-bar{background:rgba(0,0,0,.15)}
.acc-item.active .acc-bar{background:#fff}
.on-light .acc-item.active .acc-bar{background:var(--ink)}
.acc-title{font-size:20px;font-weight:500;line-height:1.5}
.acc-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s ease,opacity .45s ease;
  font-size:16px;line-height:1.55;color:rgba(255,255,255,.55);padding-left:19px}
.on-light .acc-body{color:var(--grey-2)}
.acc-item.active .acc-body{max-height:120px;opacity:1;margin-top:8px}
.fc-cta{margin-top:40px}
.fc-note{margin-top:20px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.55);max-width:240px}
.on-light .fc-note{color:var(--grey-2)}
.fc-visual{border-radius:var(--r-card);background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);min-height:480px;position:relative;overflow:hidden}
.on-light .fc-visual{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.fc-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;padding:32px}
/* website artifacts fill their frame edge-to-edge (no baked-in margin like the
   dark systems' art) — extra padding equalizes their visual weight on desktop */
.on-light .fc-scene{padding:44px}
.fc-scene.active{opacity:1;transform:translateY(0)}

/* scene bits */
.chipgrid{display:grid;grid-template-columns:repeat(3,110px);gap:22px}
.mchip{background:#1D1D1F;border-radius:14px;padding:18px 14px;text-align:center;color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.45)}
.mchip b{display:block;font-size:16px}
.mchip span{font-size:13px;color:rgba(255,255,255,.5)}
.mchip:nth-child(2){transform:rotate(6deg) translateY(-14px)}
.mchip:nth-child(4){transform:rotate(-8deg) translateY(10px)}
.scene-card{background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:22px;width:min(420px,90%);color:var(--ink)}
.scene-card .sc-row{display:flex;align-items:center;gap:12px}
.sc-dot{width:8px;height:8px;border-radius:50%}
.sc-title{font-weight:600;font-size:15px}
.sc-sub{font-size:13px;color:var(--grey)}
.sc-chart{margin-top:16px;height:120px;border-radius:10px;background:linear-gradient(180deg,#EDF2FF, #fff);position:relative;overflow:hidden}
.sc-chart svg{position:absolute;inset:0}
.sc-badge{position:absolute;left:14px;bottom:14px;background:#111;color:#fff;border-radius:10px;padding:8px 12px;font-size:12px;transform:rotate(-6deg)}
.sc-badge b{display:block;font-size:15px}
.aurora-bg{position:absolute;inset:0;background:
  radial-gradient(60% 70% at 15% 85%,#F43F5E 0%,transparent 60%),
  radial-gradient(55% 65% at 85% 20%,#22C55E 0%,transparent 60%),
  radial-gradient(70% 80% at 70% 80%,#8B5CF6 0%,transparent 65%),
  radial-gradient(60% 60% at 40% 30%,#06B6D4 0%,transparent 60%),
  linear-gradient(160deg,#3B82F6,#8B5CF6)}
.bubble-scene{position:relative;z-index:1}

/* ---------- results page — proof layer (reference-mirrored, GRIFFAIN ambient) ---------- */
.pr-step{text-align:center;padding:84px 24px 64px;position:relative;overflow:clip}
.pr-step::before{content:"";position:absolute;left:50%;top:46%;width:760px;height:420px;transform:translate(-50%,-50%);
  filter:blur(70px);opacity:.14;pointer-events:none;border-radius:50%;
  background:conic-gradient(from 140deg,#5150F7,#C026D3,#F43F5E,#F97316,#FACC15,#22C55E,#06B6D4,#5150F7);
  animation:qwDrift 18s ease-in-out infinite alternate}
.pr-step>*{position:relative}
.pr-verified{font-size:15px;font-weight:600;color:var(--accent);margin-bottom:18px}
.pr-step-h{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,48px);line-height:1.3}
.pr-guar-kick{margin-top:18px;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--grey-2)}
.pr-step .pill{margin-top:26px}

/* Why / How-do-I-know — LITERAL one-to-one with the reference (Jayden 2026-07-31):
   soft grey panel, compact white mini-cards, grey icon chips, black brand tile.
   No rainbow here — the color lives in the hiw frame above. */
.pr-why{padding:0 24px 84px}
.pr-why-head{text-align:center;font-family:var(--serif);font-weight:400;font-size:34px;margin-bottom:32px}
.pr-why-panel{max-width:720px;margin:0 auto;border-radius:22px;background:#F6F6F8;padding:38px 34px}
.pr-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pr-wcard{border-radius:12px;padding:16px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.pr-wico{width:28px;height:28px;border-radius:8px;background:#EFEFF2;color:var(--ink);
  display:grid;place-items:center;margin-bottom:12px}
.pr-wcard h4{font-size:13.5px;font-weight:700;line-height:1.35;margin-bottom:5px}
.pr-wcard p{font-size:12.5px;line-height:1.5;color:var(--grey)}
.pr-why-result{text-align:center;font-family:var(--serif);font-size:20px;line-height:1.4;max-width:230px;margin:28px auto 2px}

.pr-know{padding:0 24px 96px;text-align:center}
.pr-know-head{font-family:var(--serif);font-weight:400;font-size:34px;margin-bottom:40px}
.pr-know-cards{display:flex;justify-content:center;align-items:flex-start;gap:14px;max-width:620px;margin:0 auto}
.pr-kcard{flex:1;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 8px 22px rgba(0,0,0,.04);
  padding:16px;text-align:left}
.pr-kcard h4{font-size:13.5px;font-weight:700;line-height:1.35;margin-bottom:5px}
.pr-kcard p{font-size:12.5px;line-height:1.5;color:var(--grey)}
.pr-kcard:nth-child(1){margin-top:32px}
.pr-kcard:nth-child(3){margin-top:52px}
.pr-know-arrow{margin:34px auto 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.pr-arrow-dot{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.pr-mark{width:48px;height:48px;border-radius:12px;background:var(--ink);display:grid;place-items:center}
.pr-blunt{font-size:13px;line-height:1.5;color:var(--grey);max-width:200px}
.pr-q{margin:56px auto 16px;font-size:14px;font-weight:600;color:var(--accent)}
.pr-guar-big{font-family:var(--serif);font-size:clamp(24px,3.4vw,36px);line-height:1.35;max-width:740px;margin:0 auto}

/* ---------- period strip ---------- */
.period{text-align:center}
.period-title{font-family:var(--serif);font-size:42px;line-height:1.25}
.period-sub{margin-top:16px;font-size:18px;color:var(--grey-2)}
.logo-strip{margin-top:56px;display:flex;flex-wrap:wrap;justify-content:center;gap:24px 56px;align-items:center}
.logo-item{font-weight:700;font-size:15px;letter-spacing:.12em;color:#111;opacity:.85;text-transform:uppercase}
.logo-item.serif-mark{font-family:var(--serif);text-transform:none;letter-spacing:.02em;font-weight:400;font-size:20px}

/* ---------- closing CTA ---------- */
.cta-panel{position:relative;max-width:1360px;margin:0 auto;border-radius:var(--r-mega);overflow:hidden;
  padding:120px 24px;text-align:center;color:#fff;background:#5150F7}
.cta-panel .cta-bg{position:absolute;inset:-20%;filter:blur(60px);opacity:.95;background:
  radial-gradient(45% 55% at 18% 60%,#F97316 0%,transparent 60%),
  radial-gradient(40% 50% at 38% 45%,#F43F5E 0%,transparent 60%),
  radial-gradient(45% 55% at 55% 60%,#EC4899 0%,transparent 62%),
  radial-gradient(50% 60% at 82% 35%,#22C55E 0%,transparent 60%),
  radial-gradient(60% 70% at 90% 80%,#5150F7 0%,transparent 70%)}
.cta-inner{position:relative;z-index:1}
.cta-title{font-family:var(--serif);font-size:46px;line-height:1.2}
.cta-sub{margin-top:16px;font-size:18px;font-weight:500;color:rgba(255,255,255,.92)}
.cta-btns{margin-top:32px;display:flex;gap:14px;justify-content:center}
.cta-panel .pill-white{color:var(--ink)}

/* ---------- footer — light rainbow-ambient, enterprise ---------- */
.gfoot{color:var(--ink);padding:72px 40px 0;margin-top:96px;position:relative;
  border-top:1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(560px 420px at 8% 0%, rgba(0,102,255,.08), transparent 62%),
    radial-gradient(540px 420px at 92% 8%, rgba(236,72,153,.07), transparent 62%),
    radial-gradient(520px 400px at 28% 100%, rgba(34,197,94,.065), transparent 62%),
    radial-gradient(560px 400px at 84% 96%, rgba(249,115,22,.07), transparent 62%),
    #FDFDFF}
.gfoot-band{height:6px;margin:34px -40px 0;
  background:linear-gradient(90deg,#F97316,#F43F5E,#EC4899,#8B5CF6,#0066FF,#0AA2D8,#22C55E,#FACC15);
  background-size:200% 100%;animation:bandSlide 16s linear infinite}
@keyframes bandSlide{from{background-position:0% 0}to{background-position:200% 0}}
.gfoot a{transition:color .15s}
.gfoot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;max-width:1100px;margin:0 auto}
.gfoot h4{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:18px}
.gfoot-col a{display:block;font-size:14.5px;color:var(--ink-2);padding:5px 0}
.gfoot-col a:hover{color:var(--accent)}
/* the business line reads as contact info, not another nav link (NAP surface) */
.gfoot-col a.gfoot-tel{margin-top:6px;font-weight:600;color:var(--ink);letter-spacing:.01em}
/* the centered brand block: divider — social icons — divider */
.gfoot-socialrow{display:flex;align-items:center;gap:22px;max-width:1100px;margin:60px auto 0}
.gfoot-socialrow::before,.gfoot-socialrow::after{content:"";flex:1;height:1px;background:rgba(0,0,0,.1)}
.gfoot-soc{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.gfoot-soc:hover{color:var(--accent);box-shadow:inset 0 0 0 1px rgba(0,102,255,.5)}
.gfoot-brandline{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:32px}
.gfoot-brandline .gf-word{color:var(--ink);font-size:20px}
.gfoot-copy{text-align:center;font-size:13px;color:var(--grey);margin-top:16px}
.gfoot-legal{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 0;margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.gfoot-legal a{text-decoration:underline;text-underline-offset:3px;padding:0 14px;border-right:1px solid rgba(0,0,0,.16)}
.gfoot-legal a:last-child{border-right:none}
.gfoot-legal a:hover{color:var(--accent)}
@media(max-width:1023px){.gfoot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gfoot-grid{grid-template-columns:1fr}}

/* ---------- reveal animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.65,.3,1),transform .7s cubic-bezier(.2,.65,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}

/* ============================================================
   BOOKING PAGE
   ============================================================ */
/* aurora stage for the booking flow */
/* booking stage: cobalt colorway, FULL lighting (Jayden 2026-07-27: the dark
   veil read as a shadow — the colorway change was the ask, not dimming) */
.book-aurora>*:not(canvas){position:relative;z-index:2}
.book-aurora{position:relative;margin:12px;border-radius:var(--r-mega);overflow:hidden;
  background:var(--hero-base);padding:40px 0 90px}
.book-aurora .hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.book-aurora>*:not(canvas){position:relative;z-index:1}
.book-aurora .book-title{color:#fff}
.book-aurora .book-agency{color:rgba(255,255,255,.85)}
.book-aurora .book-agency a{color:#9BE8F5}
.book-aurora .book-widget{box-shadow:0 30px 90px rgba(10,8,30,.45)}
.book-trust{text-align:center;padding:70px 24px 30px}
.book-trust p{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.book-head{max-width:760px;margin:64px auto 0;text-align:center;padding:0 24px}
.book-title{font-family:var(--serif);font-size:44px;line-height:1.3}
.book-agency{margin-top:28px;font-size:15px;color:var(--ink-2)}
.book-agency a{font-weight:600;text-decoration:underline;margin-left:6px}
/* the LIVE iClosed booking frame */
/* 780px left ~340px of dead white under the iClosed content. 620px still
   clears the tallest step (the month grid) without the empty apron. */
.book-widget.book-live{height:620px;overflow:hidden;background:#fff;padding:0;margin-bottom:64px}
@media(max-width:640px){.book-widget.book-live{height:78dvh;margin:28px auto 48px}}
.book-widget{max-width:900px;margin:48px auto 96px;border-radius:12px;
  box-shadow:0 0 0 1px rgba(0,0,0,.09),0 8px 30px rgba(0,0,0,.05);overflow:hidden;background:#fff}
.bw-stepper{display:flex;justify-content:center;gap:28px;padding:16px;border-bottom:1px solid rgba(0,0,0,.07);
  font-size:13px;color:var(--grey)}
.bw-step{display:flex;align-items:center;gap:7px}
.bw-step .dot{width:7px;height:7px;border-radius:50%;background:#D5D5D5}
.bw-step.on{color:var(--ink)}
.bw-step.on .dot{background:var(--ink)}
.bw-body{display:grid;grid-template-columns:1fr 1.1fr}
.bw-form{padding:36px;border-right:1px solid rgba(0,0,0,.07)}
.bw-logo{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.13em;font-size:14px;margin-bottom:22px}
.bw-logo .mark{width:22px;height:22px;border-radius:6px;background:var(--ink);display:grid;place-items:center}
.bw-title{font-size:19px;font-weight:700;margin-bottom:12px}
.bw-desc{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-bottom:24px}
.bw-input{width:100%;height:44px;border:1px solid rgba(0,0,0,.16);border-radius:8px;background:#FAFAFA;
  padding:0 14px;font-size:14px;font-family:inherit;margin-bottom:12px;outline:none;transition:border .15s}
.bw-input:focus{border-color:var(--ink);background:#fff}
.bw-names{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bw-consent{font-size:11.5px;color:var(--grey-2);line-height:1.5;margin:10px 0 18px}
.bw-consent a{text-decoration:underline;font-weight:600}
.bw-continue{width:100%;height:46px;border-radius:8px;background:var(--ink);color:#fff;
  font-size:14.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s}
.bw-continue:hover{opacity:.85}
.bw-cal{padding:36px;position:relative}
.bw-cal.locked .bw-cal-content{opacity:.35;pointer-events:none;filter:grayscale(.4)}
.bw-lock-tip{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);z-index:5;
  background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.16);padding:14px 18px;
  font-size:13.5px;text-align:center;line-height:1.5;width:230px}
.bw-cal:not(.locked) .bw-lock-tip{display:none}
.bw-month{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;margin-bottom:18px}
.bw-month .chev{width:30px;height:30px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);display:grid;place-items:center;color:var(--ink)}
.bw-days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:18px}
.bw-day{border-radius:10px;padding:10px 0;text-align:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);font-size:13px;color:var(--grey-2)}
.bw-day b{display:block;font-size:15px;color:var(--ink);margin-top:2px}
.bw-day.sel{background:var(--ink);color:rgba(255,255,255,.7)}
.bw-day.sel b{color:#fff}
.bw-tzrow{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--grey-2);margin-bottom:14px}
.bw-fmt{display:flex;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.bw-fmt button{padding:5px 10px;font-size:12.5px;color:var(--grey-2)}
.bw-fmt button.on{background:var(--ink);color:#fff}
.bw-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bw-slot{border-radius:9px;padding:12px 0;text-align:center;font-size:13.5px;font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:all .15s;color:var(--ink)}
.bw-slot:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.bw-slot.sel{background:var(--ink);color:#fff}
.bw-confirm{padding:36px;text-align:center;display:none}
.bw-confirm.show{display:block}
.bw-confirm h3{font-size:20px;font-weight:700;margin-bottom:8px}
.bw-confirm p{font-size:14px;color:var(--ink-2);line-height:1.6}
.bw-confirm .slotline{margin:18px auto;padding:14px 18px;border-radius:10px;background:#F5F5F7;
  font-size:14.5px;font-weight:600;display:inline-block}
.bw-success-ico{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:#E8F7EC;color:#229A44;
  display:grid;place-items:center;font-size:26px}

/* ============================================================
   CHAT WIDGET (GRIFFAIN assistant — Intercom-pattern)
   ============================================================ */
.gw-launcher{position:fixed;right:20px;bottom:20px;z-index:900;width:48px;height:48px;border-radius:50%;
  background:#1A1A1A;color:#fff;display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.25);
  transition:transform .2s ease}
.gw-launcher:hover{transform:scale(1.06)}
.gw-panel{position:fixed;right:20px;bottom:84px;z-index:899;width:400px;max-width:calc(100vw - 32px);
  height:min(640px,calc(100vh - 120px));border-radius:16px;background:#fff;
  box-shadow:0 12px 48px rgba(0,0,0,.22);overflow:hidden;display:none;flex-direction:column;
  opacity:0;transform:translateY(16px) scale(.98);transition:opacity .25s ease,transform .25s ease}
.gw-panel.open{display:flex}
.gw-panel.in{opacity:1;transform:none}
.gw-view{display:none;flex-direction:column;flex:1;min-height:0}
.gw-view.on{display:flex}
/* home view */
.gw-home-head{padding:22px 22px 8px;display:flex;align-items:center;justify-content:space-between}
.gw-home-brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.12em;font-size:15px}
.gw-home-brand .mark{width:24px;height:24px;border-radius:7px;background:var(--ink);display:grid;place-items:center}
.gw-avatars{display:flex}
.gw-avatars .av{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-8px;
  background:linear-gradient(135deg,#5150F7,#EC4899);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
.gw-close{color:var(--grey);font-size:18px;padding:4px 8px}
.gw-greet{padding:26px 22px 8px;font-size:26px;line-height:1.3;font-weight:700;color:#B9B9C1}
.gw-greet .dark{color:#8E8E96}
.gw-cards{padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.gw-card{border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.05);
  padding:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;width:100%}
.gw-card:hover{box-shadow:0 0 0 1px rgba(0,0,0,.16),0 2px 10px rgba(0,0,0,.07)}
.gw-card-title{font-size:14.5px;font-weight:600}
.gw-card-sub{font-size:13px;color:var(--grey);margin-top:2px}
.gw-search{border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.05);padding:6px}
.gw-search-row{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:14px;color:var(--grey)}
.gw-search-row input{flex:1;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent}
.gw-article{display:flex;align-items:center;justify-content:space-between;padding:10px;font-size:13.5px;border-radius:8px;width:100%;text-align:left}
.gw-article:hover{background:#F6F6F8}
.gw-tabs{margin-top:auto;display:flex;border-top:1px solid rgba(0,0,0,.07)}
.gw-tab{flex:1;padding:10px 0 12px;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11px;color:var(--grey)}
.gw-tab.on{color:var(--ink)}
/* thread view */
.gw-thread-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.06)}
.gw-back{padding:6px;color:var(--grey-2)}
.gw-thread-title{font-size:14px;font-weight:600;line-height:1.2}
.gw-thread-sub{font-size:12px;color:var(--grey)}
.gw-msgs{flex:1;overflow:auto;padding:18px 14px;display:flex;flex-direction:column;gap:10px}
.gw-msg{max-width:78%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;white-space:pre-line}
.gw-msg.bot{background:#F2F2F5;color:var(--ink);border-bottom-left-radius:5px;align-self:flex-start}
.gw-msg.me{background:#1A1A1A;color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.gw-typing{align-self:flex-start;background:#F2F2F5;border-radius:16px;border-bottom-left-radius:5px;padding:12px 16px;display:flex;gap:4px}
.gw-typing i{width:6px;height:6px;border-radius:50%;background:#A5A5AE;animation:gwty 1s infinite}
.gw-typing i:nth-child(2){animation-delay:.15s}.gw-typing i:nth-child(3){animation-delay:.3s}
@keyframes gwty{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.gw-composer{margin:10px 14px 14px;border-radius:12px;box-shadow:0 0 0 1.5px rgba(0,0,0,.75);padding:10px 12px}
.gw-composer input,.gw-composer textarea{width:100%;border:none;outline:none;font-family:inherit;font-size:13.5px;resize:none;background:transparent}
.gw-composer input{border-bottom:1px solid rgba(0,0,0,.08);padding-bottom:8px;margin-bottom:8px}
.gw-comp-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px}
.gw-send{width:30px;height:30px;border-radius:50%;background:#E8E8EC;color:#fff;display:grid;place-items:center;transition:background .2s}
.gw-send.ready{background:var(--ink)}
.gw-consent{margin:0 14px 14px;border-radius:10px;background:#F6F6F8;padding:10px 12px;font-size:11px;color:var(--grey-2);line-height:1.5}

/* ============================================================
   BRAND — wave mark + wordmark
   ============================================================ */
/* wordmark = the real GRIFFAIN logotype: serif caps, tracked (griffain.io) */
.gf-word{font-family:"Source Serif 4",Georgia,serif;font-weight:600;letter-spacing:.14em;font-size:18px}
.wave-mark{display:block}

/* ============================================================
   SPLASH — the cobalt wash. Was the checkout-only sub-splash; Jayden picked it
   over the old white "mark draws itself" screen (2026-07-31), so it is now THE
   splash site-wide and the old sp-amb/sp-draw version is retired.
   Flowing cobalt gradient + scale-in lockup, held ~1.4s, then wiped upward.
   Once per session.
   ============================================================ */
html.sp-lock{overflow:hidden}
.splash{position:fixed;inset:0;z-index:99999;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(115deg,#3AD0E6,#0066FF,#5150F7,#1E3FD0,#3AD0E6);background-size:340% 340%;
  animation:ckWash 2.6s ease-in-out infinite}
.sp-lockup{position:relative;display:flex;align-items:center;gap:14px;
  animation:ckLockup .9s cubic-bezier(.2,.8,.2,1) both}
.splash .gf-word,.sp-word{color:#fff;font-size:26px;font-family:"Source Serif 4",Georgia,serif;
  font-weight:600;letter-spacing:.14em}
.splash.done{animation:ckWash 2.6s ease-in-out infinite,ckWipe .62s cubic-bezier(.7,0,.2,1) .02s forwards}
@keyframes ckWash{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes ckLockup{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes ckWipe{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@media(prefers-reduced-motion:reduce){.splash{display:none}}

/* ============================================================
   SERVICE PAGE (AIR template)
   ============================================================ */
.svc-hero{position:relative;background:var(--hero-base);color:#fff;overflow:hidden;text-align:center}
.svc-hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:190px 24px 150px}
.svc-eyebrow{display:inline-flex;height:32px;padding:0 16px;border-radius:999px;align-items:center;
  background:rgba(255,255,255,.14);font-size:14px;font-weight:500;margin-bottom:26px;backdrop-filter:blur(6px)}
.svc-h1{font-family:var(--serif);font-size:clamp(38px,5vw,58px);line-height:1.18;letter-spacing:.1px}
.svc-sub{margin:22px auto 0;font-size:19px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.92);max-width:560px}
.svc-ctas{margin-top:34px;display:flex;gap:14px;justify-content:center}
.svc-proofline{margin-top:26px;font-size:14px;color:rgba(255,255,255,.75)}
/* numbered step cards */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step-card{background:#fff;border-radius:var(--r-card);box-shadow:0 0 0 1px var(--ring);padding:28px;position:relative}
.step-num{position:absolute;top:24px;right:24px;font-family:var(--serif);font-size:34px;color:rgba(0,0,0,.14)}
.step-title{font-size:20px;font-weight:600;margin-bottom:10px}
.step-card p{font-size:15px;line-height:1.55;color:var(--grey-2)}
/* tab selector */
.tabsel{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:28px 0 40px}
.tabsel button{height:42px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);transition:all .18s}
.tabsel button.on{background:var(--ink);color:#fff;box-shadow:none}
.tabpane{display:none}
.tabpane.on{display:block}
/* walkthrough rows */
.walk{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.walk-row{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:14px;
  box-shadow:0 0 0 1px var(--ring);padding:18px 20px;
  transition:transform .25s cubic-bezier(.19,1,.28,1),box-shadow .25s ease}
.walk-row:hover{transform:translateX(6px);box-shadow:0 0 0 1px rgba(0,102,255,.35),0 10px 26px rgba(20,16,40,.08)}
.walk-num{flex:none;width:30px;height:30px;border-radius:50%;color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:600}
.walk-row:nth-child(6n+1) .walk-num{background:linear-gradient(135deg,#1E3FD0,#0066FF)}
.walk-row:nth-child(6n+2) .walk-num{background:linear-gradient(135deg,#EC4899,#F97316)}
.walk-row:nth-child(6n+3) .walk-num{background:linear-gradient(135deg,#0AA2D8,#22C55E)}
.walk-row:nth-child(6n+4) .walk-num{background:linear-gradient(135deg,#8B5CF6,#EC4899)}
.walk-row:nth-child(6n+5) .walk-num{background:linear-gradient(135deg,#F97316,#FACC15)}
.walk-row:nth-child(6n+6) .walk-num{background:linear-gradient(135deg,#0066FF,#3AD0E6)}
.walk-row b{display:block;font-size:15.5px;margin-bottom:3px}
.walk-row p{font-size:14px;color:var(--grey-2);line-height:1.5}
/* brain section */
.brain{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.brain-visual{border-radius:var(--r-card);min-height:360px;position:relative;overflow:hidden;background:var(--grad-brand)}
/* results wall (service pages) */
/* ---------- contained review-proof panel (replaces the old full-bleed rwall
   on speed-to-lead): rainbow-border card on an ambient wash, glass tiles ---------- */
.rvwrap{position:relative;max-width:1268px;margin:52px auto 0;text-align:left}
.rvwrap::before{content:"";position:absolute;inset:-60px -80px;pointer-events:none;filter:blur(46px);opacity:.5;
  background:
    radial-gradient(34% 44% at 12% 22%, rgba(58,208,230,.35), transparent 62%),
    radial-gradient(38% 48% at 88% 16%, rgba(236,72,153,.28), transparent 62%),
    radial-gradient(40% 50% at 82% 88%, rgba(139,92,246,.3), transparent 62%),
    radial-gradient(34% 44% at 14% 88%, rgba(255,176,98,.3), transparent 62%)}
.rvborder{position:relative;padding:1.5px;border-radius:26px;
  background:conic-gradient(from 210deg,#3AD0E6,#0066FF,#8B5CF6,#EC4899,#FFB062,#3AD0E6)}
.rvproof{border-radius:24.5px;background:#fff;padding:18px}
.rvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rvcard{background:#FAFAFC;border-radius:16px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:11px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.rvcard.feat{grid-column:span 2;flex-direction:row;gap:28px;align-items:center;color:#fff;
  background:radial-gradient(58% 84% at 86% 14%, rgba(139,92,246,.32), transparent 64%),
             radial-gradient(48% 74% at 12% 92%, rgba(10,162,216,.28), transparent 64%),
             radial-gradient(40% 60% at 55% 110%, rgba(236,72,153,.2), transparent 64%),#0D0D15}
.rvcard.feat p{color:rgba(255,255,255,.88)}
.rvcard.feat .rvrole{color:rgba(255,255,255,.55)}
.rvstars{font-size:14px;letter-spacing:3px;line-height:1;
  background:linear-gradient(90deg,#0066FF,#8B5CF6,#EC4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.rvcard h4{font-size:16.5px;font-weight:600;line-height:1.35}
.rvcard p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.rvfoot{margin-top:auto;padding-top:4px}
.rvwho{font-size:13.5px;font-weight:600}
.rvrole{font-size:12.5px;color:var(--grey);margin-top:1px}
.rvlink{font-size:13px;color:var(--accent);font-weight:600;margin-top:6px}
.rvphoto{flex:0 0 132px;width:132px;height:152px;border-radius:14px;object-fit:cover}
@media(max-width:960px){.rvgrid{grid-template-columns:1fr}.rvcard.feat{grid-column:span 1;flex-direction:column;align-items:flex-start}}

/* ---------- results board (homepage) — the rvproof treatment turned up:
   rainbow-border panel on ambient washes, gradient serif stats, gradient
   stars, dark featured card w/ glows, LIVE animated artifacts in-card ---------- */
.rb{border-radius:24.5px;background:#fff;padding:18px}
.rb-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.rb-grid>*{min-width:0}
.rb-card{background:#FAFAFC;border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:14px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);position:relative;overflow:clip;
  transition:transform .25s ease,box-shadow .25s ease}
.rb-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 18px 44px rgba(10,20,60,.1)}
.rb-card.dark{color:#fff;
  background:radial-gradient(58% 84% at 86% 12%, rgba(139,92,246,.34), transparent 64%),
             radial-gradient(48% 74% at 10% 92%, rgba(10,162,216,.3), transparent 64%),
             radial-gradient(40% 60% at 58% 112%, rgba(236,72,153,.22), transparent 64%),#0C0C14}
.rb-card.dark:hover{box-shadow:0 22px 54px rgba(10,10,30,.4)}
.rb-stat{font-family:var(--serif);font-size:clamp(38px,4vw,50px);line-height:1.05;
  background:linear-gradient(92deg,#0066FF 5%,#8B5CF6 48%,#EC4899 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.rb-label{font-size:13.5px;color:var(--grey);margin-top:2px}
.rb-quote{font-size:15px;line-height:1.62;color:var(--ink-2)}
.rb-card.dark .rb-quote{color:rgba(255,255,255,.86)}
.rb-who{margin-top:auto;display:flex;align-items:center;gap:13px;padding-top:14px}
.rb-chip{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
/* Percentage max-height does not reliably resolve for a grid item, so a TALL logo
   escaped the 46px chip and pushed its card past the row height (found 2026-07-29:
   checkmate-mark.png is 151x348 and rendered 71px tall inside a 46px chip, clipping
   the card because .rb-card is overflow:clip). Absolute px + contain is deterministic
   and works for any aspect ratio we're handed in future. */
.rb-chip img{max-width:38px;max-height:38px;width:auto;height:auto;object-fit:contain}
.rb-name{font-size:14.5px;font-weight:600}
.rb-link{font-size:13px;color:var(--accent);font-weight:600;margin-top:1px}
.rb-card.dark .rb-link{color:#9BE8F5}
.rb-split{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:end}
.rb-art{position:relative;height:150px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#F2F4FB,#EAF1FE)}
.rb-card .rvstars{margin-bottom:2px}
.rb-guar{grid-column:span 12;display:grid;grid-template-columns:200px 1fr 220px;gap:28px;align-items:center}
@media(max-width:1023px){
  .rb-grid .span-7,.rb-grid .span-5{grid-column:span 12}
  .rb-split{grid-template-columns:1fr}
  .rb-guar{grid-template-columns:1fr;gap:14px}
}
@media(max-width:640px){.rb{padding:10px}.rb-card{padding:22px 18px}}

/* art panes show the WHOLE image — no cover-cropping (Jayden 2026-07-26:
   crops were cutting the content out of the artifacts) */
.hiw-art{height:auto!important;overflow:visible}
.rb-art{height:auto!important;overflow:visible;display:flex;align-items:center;justify-content:center}
.hiw-art .art-fill{display:block;position:static;width:100%;height:auto;
  border-radius:14px;box-shadow:0 14px 36px rgba(10,20,60,.12)}
/* board side-panes: whole image, but CAPPED so a tall portrait never
   stretches the card row into dead whitespace */
.rb-art .art-fill{display:block;position:static;width:auto;max-width:100%;height:auto;max-height:290px;
  margin:0 auto;border-radius:14px;box-shadow:0 14px 36px rgba(10,20,60,.12)}

/* ---------- generated artifact images (OpenArt set 2026-07-24) ----------
   BIGGER per Jayden 2026-07-25: loop images bleed to the card edges; scene
   images grow to fill the visual stage */
/* loop images: whole image, centered, capped — never edge-bled or oversized
   (Jayden 2026-07-26: the full-bleed portrait read stretched/too big) */
.loop-visual:has(.art-img){padding-top:22px;margin:0}
.loop-visual .art-img{display:block;width:auto;max-width:100%;height:auto;max-height:460px;
  margin:0 auto;border-radius:18px;box-shadow:0 20px 54px rgba(10,20,60,.16)}
/* safety net: ANY generated artifact outside a known container can never
   exceed a sane stage height */
.art-img{max-height:640px}
/* the ACTIVE scene sizes its container (relative), so tall portrait images are
   never clipped by the absolutely-stacked scene deck; inactive scenes stay
   absolute underneath. Desktop unclamped to 640px, whole image always shown. */
.fc-scene.active{position:relative;inset:auto}
.fc-scene .art-img{display:block;max-height:min(560px,62vh);width:auto;max-width:100%;margin:0 auto;
  border-radius:18px;box-shadow:0 22px 56px rgba(10,20,60,.22)}
.ag-panel .art-img{display:block;width:100%;height:auto;border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,.2)}
@media(max-width:640px){
  /* phones: whole image, centered, phone-sane caps */
  .fc-scene .art-img{max-height:440px;width:auto;max-width:100%}
  .fc-scene{padding:16px}
  .loop-visual .art-img{max-height:420px}
  .airbar-panel .art-img{max-height:420px;width:auto!important}
}

/* ---------- logo marquee: every trust strip becomes a moving band (Jayden
   2026-07-24: logos BIGGER, always drifting left→right, never static).
   brand.js wraps .logo-strip/.brandwall children into a doubled .lgm-track. ---------- */
.lgm{display:block!important;overflow:hidden;position:relative;padding:6px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.lgm-track{display:flex;align-items:center;gap:64px;width:max-content;
  animation:lgmMove 30s linear infinite}
@keyframes lgmMove{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.lgm-track img{height:68px!important;width:auto!important;max-width:none;flex:none}
.lgm-track img[src*="workforce"]{height:42px!important}
.lgm-track img[src*="routed"]{height:36px!important}
.lgm-track img[src*="offduty"]{height:56px!important}
@media(max-width:640px){
  .lgm-track{gap:40px;animation-duration:22s}
  .lgm-track img{height:50px!important}
  .lgm-track img[src*="workforce"]{height:32px!important}
  .lgm-track img[src*="routed"]{height:27px!important}
  .lgm-track img[src*="offduty"]{height:42px!important}
}
@media(prefers-reduced-motion:reduce){.lgm-track{animation:none}}

/* ---------- contact-sales fast lane (book-a-call): rainbow-border two-panel,
   dark ambient pitch left, form right — the form IS the product demo ---------- */
.cs-grid{display:grid;grid-template-columns:1fr 1.15fr;border-radius:24.5px;overflow:hidden;background:#fff}
/* light ambient pitch (Jayden 2026-07-24: no dark panel here — the site's
   light aurora, contact-sales framing) */
.cs-pitch{color:var(--ink);padding:44px 38px;display:flex;flex-direction:column;gap:16px;
  background:radial-gradient(58% 70% at 88% 6%, rgba(139,92,246,.14), transparent 62%),
             radial-gradient(52% 66% at 6% 96%, rgba(58,208,230,.16), transparent 62%),
             radial-gradient(44% 56% at 64% 112%, rgba(236,72,153,.1), transparent 62%),
             linear-gradient(180deg,#FBFCFF,#F4F7FE)}
.cs-pitch h3{font-family:var(--serif);font-size:30px;line-height:1.2}
.cs-pitch p{font-size:15px;line-height:1.65;color:var(--ink-2)}
.cs-li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.cs-li b{color:var(--ink)}
.cs-li .tick{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  background:linear-gradient(135deg,#0AA2D8,#0066FF);color:#fff;margin-top:2px}
.cs-form{padding:40px 38px}
.cs-form h4{font-size:17px;font-weight:700;margin-bottom:18px}
.cs-form input,.cs-form textarea,.cs-form select{width:100%;border:1px solid rgba(0,0,0,.14);border-radius:11px;padding:13px 14px;
  font-size:15px;font-family:inherit;outline:none;transition:border-color .15s;background:#fff;color:var(--ink)}
.cs-form input:focus,.cs-form textarea:focus,.cs-form select:focus{border-color:var(--accent)}
.cs-form select{margin-bottom:10px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23949494' stroke-width='2.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.cs-form select:invalid,.cs-form select option[value=""]{color:var(--grey)}
.cs-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.cs-form textarea{resize:none;margin-bottom:12px}
.cs-note{margin-top:12px;font-size:11.5px;color:var(--grey);line-height:1.5}
.cs-done{text-align:center;padding:48px 20px;display:none}
.cs-done .ico{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;font-size:25px;
  color:#fff;background:linear-gradient(135deg,#0AA2D8,#0066FF)}
.cs-done h4{font-family:var(--serif);font-weight:400;font-size:26px;margin-bottom:8px}
.cs-done p{font-size:15px;color:var(--ink-2);line-height:1.6}
@media(max-width:860px){.cs-grid{grid-template-columns:1fr}.cs-pitch{padding:34px 24px}.cs-form{padding:30px 22px}}

.rwall{columns:3;column-gap:16px}
.rcard{break-inside:avoid;background:#fff;border-radius:var(--r-card);box-shadow:0 0 0 1px var(--ring);
  padding:26px;margin-bottom:16px}
.rcard h4{font-size:17px;font-weight:600;line-height:1.4;margin-bottom:10px}
.rcard p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.rcard .rwho{margin-top:16px;font-size:14px;font-weight:500}
.rcard .rlink{font-size:13px;color:var(--accent)}
/* CTA line — full ambient colorful close, never flat grey */
.svc-close{text-align:center;padding:110px 24px;position:relative;overflow:hidden;
  border-radius:var(--r-mega);margin:0 12px 12px;
  background:
    radial-gradient(46% 70% at 10% 18%, rgba(0,102,255,.12), transparent 62%),
    radial-gradient(44% 66% at 90% 14%, rgba(236,72,153,.12), transparent 62%),
    radial-gradient(46% 68% at 20% 94%, rgba(34,197,94,.11), transparent 62%),
    radial-gradient(44% 66% at 86% 90%, rgba(249,115,22,.12), transparent 62%),
    #FBFBFE}
.svc-close::before{content:"";position:absolute;inset:-30%;pointer-events:none;filter:blur(52px);opacity:.5;
  background:
    radial-gradient(34% 42% at 22% 30%, rgba(58,208,230,.35), transparent 62%),
    radial-gradient(36% 46% at 80% 70%, rgba(139,92,246,.28), transparent 62%);
  animation:megaDrift 14s ease-in-out infinite alternate}
.svc-close>*{position:relative;z-index:1}
.svc-close h2{font-family:var(--serif);font-size:clamp(32px,4vw,46px);line-height:1.2}
@media(prefers-reduced-motion:reduce){.svc-close::before{animation:none}}
/* aurora variant — the full living background, mouse-reactive (WebGL) */
.svc-close.aurora{background:var(--hero-base);color:#fff;padding:130px 24px}
.svc-close.aurora::before{display:none}
.svc-close.aurora .hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.svc-close.aurora h2{color:#fff}
.svc-close.aurora p{color:rgba(255,255,255,.9)!important}
.svc-close.aurora .pill-white{color:var(--ink)}

/* ============================================================
   AIR TEMPLATE — light hero, giant wordmark, loop cards, chapters
   ============================================================ */
.air-shell{background:#fff}
.air-hero{max-width:none;margin:12px 12px 0;border-radius:var(--r-mega);background:var(--soft);
  padding:110px 24px 0;text-align:center;overflow:hidden;position:relative}
.air-hero .giant{font-family:var(--serif);font-size:clamp(64px,9.5vw,132px);line-height:1.05;letter-spacing:.5px}
.air-hero .rule{width:min(560px,70%);height:1px;background:rgba(0,0,0,.14);margin:26px auto}
.air-hero .sub-serif{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.35;max-width:640px;margin:0 auto}
.air-hero .svc-ctas{margin:36px 0 40px}
.air-burst{position:relative;height:clamp(180px,26vw,360px);margin-top:8px}
/* the burst is a full-circle conic color wheel, clipped to its top half by the
   hero — it visibly ROTATES (colors sweep through the bloom) and the whole
   assembly parallaxes with the mouse (set by motion.js on .air-burst) */
.air-burst{transition:transform .4s cubic-bezier(.19,1,.28,1)}
.air-burst .burst{position:absolute;left:50%;top:0;margin-left:calc(min(1100px,94vw)/-2);
  width:min(1100px,94vw);aspect-ratio:1/1;border-radius:50%;
  background:conic-gradient(#F97316,#F43F5E,#EC4899,#8B5CF6,#0066FF,#0AA2D8,#22C55E,#FACC15,#F97316);
  filter:blur(38px);opacity:.9;animation:burstSpin 22s linear infinite}
.air-burst .burst.b2{filter:blur(70px);opacity:.55;animation:burstSpin 34s linear infinite reverse}
@keyframes burstSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.air-burst .burst-word{z-index:2}
@media(prefers-reduced-motion:reduce){.air-burst .burst{animation:none}}

/* scroll-pinned word reveal (MINDS statement pattern): the section pins while
   the words light grey → ink as you scroll through it */
.words-pin{position:relative;height:240vh}
.words-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:0 24px}
.words-sticky h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);line-height:1.35;
  max-width:760px;letter-spacing:.1px;font-weight:400}
.scrollwords .w{color:#C8C8CF;transition:color .3s ease}
.scrollwords .w.lit{color:var(--ink)}
.air-burst .burst-word{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);
  font-family:var(--serif);font-size:clamp(90px,17vw,240px);line-height:1;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.12)}
.stmt{padding:120px 24px;text-align:center}
.stmt h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);line-height:1.3;max-width:720px;margin:0 auto}
.grad-line{margin-top:22px;font-size:clamp(17px,1.8vw,22px);font-weight:600;line-height:1.5;
  background:linear-gradient(90deg,#38BDF8,#818CF8,#EC4899,#F97316,#FACC15,#C084FC);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* loop cards — tall 2x2, first dark */
.loop-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1440px;margin:0 auto;padding:0 12px}
/* artifact life: mockups float gently, like the reference's living cards */
.loop-visual>*{animation:mockFloat 6s ease-in-out infinite alternate}
.loop-card:nth-child(2) .loop-visual>*{animation-delay:1.2s}
.loop-card:nth-child(3) .loop-visual>*{animation-delay:2.1s}
.loop-card:nth-child(4) .loop-visual>*{animation-delay:.6s}
@keyframes mockFloat{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.airbar{animation:mockFloat 5s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.loop-visual>*,.airbar{animation:none}}
.loop-card{border-radius:20px;background:var(--soft);padding:36px 36px 0;min-height:480px;
  display:flex;flex-direction:column;overflow:hidden;position:relative}
.loop-card.dark{background:#131313;color:#fff}
.loop-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.loop-title{font-size:24px;font-weight:600}
.loop-num{font-family:var(--serif);font-size:30px;opacity:.28}
.loop-card>p{font-size:15.5px;line-height:1.6;color:var(--grey-2);max-width:420px}
.loop-card.dark>p{color:rgba(255,255,255,.6)}
.loop-visual{margin-top:auto;padding-top:26px;display:flex;justify-content:center}
/* artifact: phone/message mock */
.mock-msgcard{width:min(360px,100%);background:#fff;border-radius:16px 16px 0 0;
  box-shadow:0 -14px 44px rgba(0,0,0,.16);padding:20px 20px 26px;color:var(--ink)}
.loop-card.dark .mock-msgcard{box-shadow:0 -18px 54px rgba(0,0,0,.5)}
.mock-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mock-dotpulse{width:9px;height:9px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.mock-name{font-size:13.5px;font-weight:600}
.mock-sub{font-size:11.5px;color:var(--grey)}
.mock-bubbles{display:flex;flex-direction:column;gap:7px;font-size:12.5px;line-height:1.45}
.mb-in{background:#F2F2F5;border-radius:11px;border-bottom-left-radius:4px;padding:8px 11px;max-width:88%}
.mb-out{background:#111;color:#fff;border-radius:11px;border-bottom-right-radius:4px;padding:8px 11px;align-self:flex-end;max-width:80%}
/* artifact: email mock (SleepWell pattern, ours) */
.mock-email{width:min(380px,100%);background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.14);
  padding:22px;color:var(--ink);text-align:left}
.me-from{font-size:12.5px;color:var(--grey-2)}
.me-from b{color:#2563EB;font-weight:500}
.me-subject{font-size:14px;font-weight:700;margin:6px 0 12px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.08)}
.me-body{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.me-cta-row{display:flex;gap:8px;margin-top:14px}
.me-cta{border-radius:8px;padding:7px 12px;font-size:11.5px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.me-cta.primary{background:#111;color:#fff;box-shadow:none}
/* artifact: the GRIFFAIN gradient bar (assistant identity chip) */
.airbar-panel{width:100%;border-radius:16px;background:#EFEFF2;padding:44px 26px;display:flex;justify-content:center}
.airbar{display:flex;align-items:center;gap:0;height:74px;padding:0 26px;border-radius:999px;
  background:linear-gradient(100deg,#F97316 0%,#EC4899 30%,#0066FF 68%,#0AA2D8 100%);
  box-shadow:0 18px 50px rgba(30,63,208,.35)}
.airbar .ab-mark{width:52px;height:52px;border-radius:50%;background:#0B0B0F;display:grid;place-items:center;border:3px solid #fff}
.airbar .ab-face{width:52px;height:52px;border-radius:50%;margin-left:-14px;border:3px solid #fff;
  background:linear-gradient(135deg,#CFD8E3,#8A97A8);display:grid;place-items:center;font-weight:700;color:#fff;font-size:17px}
.airbar .ab-text{margin-left:18px;color:#fff}
.airbar .ab-text b{display:block;font-size:15px}
.airbar .ab-text span{font-size:12px;opacity:.85}
/* artifact: report card */
.mock-report{width:min(360px,100%);background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.14);padding:20px;color:var(--ink);text-align:left}
.mr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;text-align:center}
.mr-cell{background:#F7F7F9;border-radius:10px;padding:12px 4px}
.mr-cell b{font-size:18px}
.mr-cell span{display:block;font-size:10.5px;color:var(--grey);margin-top:2px}
/* chapter (MINDS template) — motion grade */
.chapter{padding:110px 24px 40px;text-align:center;position:relative}
.chapter::before{content:"";position:absolute;left:50%;top:30px;width:640px;height:340px;
  transform:translateX(-50%);pointer-events:none;filter:blur(58px);opacity:.5;
  background:
    radial-gradient(40% 55% at 30% 40%, rgba(0,102,255,.16), transparent 62%),
    radial-gradient(42% 55% at 72% 55%, rgba(236,72,153,.13), transparent 62%),
    radial-gradient(38% 50% at 50% 80%, rgba(34,197,94,.11), transparent 62%);
  animation:megaDrift 13s ease-in-out infinite alternate}
.chapter>*{position:relative;z-index:1}
.chapter .ch-tag{display:inline-flex;height:34px;padding:0 18px;border-radius:999px;align-items:center;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);font-size:14px;font-weight:600;margin-bottom:26px;
  position:relative}
.chapter .ch-tag::before{content:"";position:absolute;inset:0;border-radius:999px;padding:1.5px;
  background:linear-gradient(100deg,rgba(249,115,22,.6),rgba(236,72,153,.55),rgba(0,102,255,.6),rgba(10,162,216,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@media(prefers-reduced-motion:reduce){.chapter::before{animation:none}}
.chapter h2{font-family:var(--serif);font-size:clamp(30px,4vw,48px);line-height:1.25;max-width:760px;margin:0 auto}
.chapter .ch-sub{margin:18px auto 0;max-width:640px;font-size:16.5px;line-height:1.6;color:var(--grey-2)}
.ch-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1160px;margin:48px auto 0;text-align:left}
.ch-card{border-radius:20px;padding:30px;min-height:210px;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.19,1,.28,1),box-shadow .3s ease}
.ch-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(20,16,40,.12)}
/* animated gradient bar */
.ch-card::before{content:"";display:block;width:34px;height:6px;border-radius:3px;margin-bottom:18px;
  background-size:220% 100%!important;animation:bandSlide 5s linear infinite}
/* drifting color orb in the corner — the card breathes */
.ch-card::after{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%;
  filter:blur(34px);opacity:.55;pointer-events:none;animation:orbDrift 9s ease-in-out infinite alternate}
@keyframes orbDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-22px,20px) scale(1.25)}}
.ch-cards .ch-card:nth-child(1){background:linear-gradient(160deg,#EAF1FE,#F4F8FF)}
.ch-cards .ch-card:nth-child(1)::before{background:linear-gradient(90deg,#0066FF,#3AD0E6,#0066FF)}
.ch-cards .ch-card:nth-child(1)::after{background:radial-gradient(circle,#7FB4FF,transparent 70%)}
.ch-cards .ch-card:nth-child(2){background:linear-gradient(160deg,#FDEFF6,#FFF6FB)}
.ch-cards .ch-card:nth-child(2)::before{background:linear-gradient(90deg,#EC4899,#F97316,#EC4899)}
.ch-cards .ch-card:nth-child(2)::after{background:radial-gradient(circle,#FBA6D0,transparent 70%);animation-delay:1.4s}
.ch-cards .ch-card:nth-child(3){background:linear-gradient(160deg,#EAF8F0,#F5FCF8)}
.ch-cards .ch-card:nth-child(3)::before{background:linear-gradient(90deg,#22C55E,#0AA2D8,#22C55E)}
.ch-cards .ch-card:nth-child(3)::after{background:radial-gradient(circle,#8CE6B4,transparent 70%);animation-delay:2.6s}
.ch-card b{display:block;font-size:17px;margin-bottom:10px;position:relative;z-index:1}
.ch-card p{font-size:14.5px;line-height:1.6;color:var(--grey-2);position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.ch-card::before,.ch-card::after{animation:none}}
/* rainbow display heading */
.grad-head{background:linear-gradient(90deg,#F97316,#EC4899,#8B5CF6,#0066FF,#0AA2D8,#22C55E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* ---------- HOW IT WORKS — 4-step rainbow row (reference pattern) ---------- */
.hiw{max-width:1240px;margin:48px auto 0}
.hiw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hiw-card{background:#fff;border-radius:14px;padding:26px 24px 0;min-height:480px;
  display:flex;flex-direction:column;position:relative;text-align:left;overflow:visible}
.hiw-num{width:36px;height:36px;border-radius:9px;background:#F4F4F6;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  display:grid;place-items:center;font-family:var(--serif);font-size:16px;margin-bottom:20px}
.hiw-card h3{font-family:var(--serif);font-size:23px;line-height:1.25;font-weight:400;letter-spacing:.1px}
.hiw-card>p{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--grey-2)}
.hiw-card:not(:last-child)::after{content:"→";position:absolute;right:-23px;top:44%;width:40px;height:40px;
  background:#fff;border-radius:50%;box-shadow:0 4px 16px rgba(0,0,0,.16);display:grid;place-items:center;
  z-index:3;font-size:16px}
.hiw-art{margin-top:auto;height:160px;position:relative;overflow:hidden;border-radius:0 0 14px 14px}
/* artifact: rising bar chart */
.art-bars{position:absolute;inset:auto 10px 0;height:120px;display:flex;align-items:flex-end;gap:4px}
.art-bars i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#5150F7,#8B8AF0);
  transform-origin:bottom;animation:barGrow 3.2s ease-in-out infinite alternate}
.art-bars i:nth-child(odd){animation-delay:.4s}
.art-bars i:nth-child(3n){animation-delay:.9s}
@keyframes barGrow{from{transform:scaleY(.75)}to{transform:scaleY(1.05)}}
/* artifact: gauge with pulsing check */
.art-gauge{position:absolute;left:50%;bottom:-46px;width:170px;height:170px;transform:translateX(-50%);
  border-radius:50%;background:#F1F1F5;box-shadow:inset 0 10px 24px rgba(0,0,0,.05)}
.art-gauge .pill{position:absolute;left:50%;top:-24px;transform:translateX(-50%);width:56px;height:84px;
  border-radius:999px;background:linear-gradient(180deg,#6D6CFA,#5150F7);display:grid;place-items:center;
  color:#fff;box-shadow:0 12px 28px rgba(81,80,247,.45);animation:corepulse 3s ease-in-out infinite}
.art-gauge .tick{position:absolute;width:30px;height:30px;border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.1);display:grid;place-items:center;color:#B9B9C4;font-size:12px}
/* artifact: scatter of wins */
.art-scatter{position:absolute;inset:0}
.art-scatter b{position:absolute;border-radius:999px;background:#5150F7;color:#fff;font-size:11.5px;
  font-weight:600;padding:5px 9px;animation:mockFloat 5s ease-in-out infinite alternate}
.art-scatter i{position:absolute;border-radius:50%;background:#5150F7;opacity:.85;
  animation:mockFloat 6s ease-in-out infinite alternate}
.art-scatter i.g{background:#D8D8DE}
/* artifact: big arrow stat */
.art-arrow{position:absolute;inset:0;text-align:center}
.art-arrow .arr{position:relative;margin:6px auto 0;width:74px;height:96px;animation:arrRise 2.6s ease-in-out infinite alternate}
.art-arrow .arr::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  border-left:37px solid transparent;border-right:37px solid transparent;border-bottom:44px solid #5150F7}
.art-arrow .arr::after{content:"";position:absolute;left:50%;top:42px;transform:translateX(-50%);
  width:36px;height:54px;background:#5150F7}
.art-arrow .val{position:absolute;top:38px;left:0;right:0;color:#fff;font-weight:700;font-size:15px;z-index:1}
.art-arrow .lbl{margin-top:8px;font-family:var(--serif);font-size:16px;color:#5150F7;line-height:1.3}
@keyframes arrRise{from{transform:translateY(6px)}to{transform:translateY(-6px)}}
@media(max-width:1023px){.hiw-grid{grid-template-columns:1fr 1fr}.hiw-card:not(:last-child)::after{display:none}}
@media(max-width:600px){.hiw-grid{grid-template-columns:1fr}}

/* quote pair (between chapters) */
/* qpair 10x (the rb-board language, component-wide): ambient washes behind,
   conic rainbow borders, gradient stars, first card = dark featured */
.qpair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1180px;margin:64px auto;padding:0 24px}
.qpair::before{content:"";position:absolute;inset:-50px -40px;pointer-events:none;filter:blur(46px);opacity:.45;
  background:
    radial-gradient(34% 44% at 14% 24%, rgba(58,208,230,.35), transparent 62%),
    radial-gradient(38% 48% at 86% 20%, rgba(236,72,153,.28), transparent 62%),
    radial-gradient(38% 48% at 80% 86%, rgba(139,92,246,.3), transparent 62%),
    radial-gradient(32% 42% at 16% 86%, rgba(255,176,98,.3), transparent 62%)}
.qpair-card{position:relative;border-radius:20px;padding:34px;border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             conic-gradient(from 210deg,#3AD0E6,#0066FF,#8B5CF6,#EC4899,#FFB062,#3AD0E6) border-box;
  box-shadow:0 16px 48px rgba(10,20,60,.1);transition:transform .25s ease,box-shadow .25s ease}
.qpair-card:hover{transform:translateY(-3px);box-shadow:0 24px 60px rgba(10,20,60,.16)}
.qpair-card::before{content:"★★★★★";display:block;font-size:14px;letter-spacing:3px;line-height:1;margin-bottom:14px;
  background:linear-gradient(90deg,#0066FF,#8B5CF6,#EC4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.qpair-card:first-child{color:#fff;
  background:
    radial-gradient(58% 84% at 86% 12%, rgba(139,92,246,.34), transparent 64%) padding-box,
    radial-gradient(48% 74% at 10% 92%, rgba(10,162,216,.3), transparent 64%) padding-box,
    linear-gradient(#0C0C14,#0C0C14) padding-box,
    conic-gradient(from 210deg,#3AD0E6,#0066FF,#8B5CF6,#EC4899,#FFB062,#3AD0E6) border-box}
.qpair-card:first-child p{color:rgba(255,255,255,.88)}
.qpair-card p{font-size:16px;line-height:1.62}
.qpair-who{margin-top:22px;display:flex;align-items:center;gap:12px}
.qpair-who img{width:46px;height:46px;border-radius:11px;object-fit:contain;background:#fff;padding:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.qpair-name{font-size:15px;font-weight:600}
.qpair-card:first-child .qpair-name{color:#fff}
.qpair-link{font-size:13px;color:var(--accent);font-weight:600}
.qpair-card:first-child .qpair-link{color:#9BE8F5}
.qpair:has(> :nth-child(3)){grid-template-columns:repeat(3,1fr)}
/* Labs product-proof cards: labeled as OURS, never dressed as a customer rating */
.qpair-card.labs::before{content:"GRIFFAIN LABS · IN-HOUSE BUILD";font-size:10.5px;letter-spacing:.16em;font-weight:700;
  background:linear-gradient(90deg,#0AA2D8,#0066FF,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:1023px){.qpair:has(> :nth-child(3)){grid-template-columns:1fr 1fr}}
@media(max-width:860px){.qpair,.qpair:has(> :nth-child(3)){grid-template-columns:1fr}}
/* brand strip — image logos, 2 rows, greyscale */
.brandwall{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 44px;max-width:980px;margin:40px auto 0}
.brandwall img{height:40px;width:auto}
.brandwall .bw-name{font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#111}
.brandwall .bw-name.serif{font-family:var(--serif);text-transform:none;letter-spacing:.02em;font-size:21px;font-weight:400}

/* ============================================================
   PRICING PAGE — 1:1 dark-mega layout (measured from reference)
   ============================================================ */
.price-mega{margin:12px;border-radius:var(--r-mega);background:#050505;color:#fff;
  padding:80px 24px 90px;position:relative;overflow:hidden;text-align:center}
.price-mega::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-40%;height:70%;
  background:radial-gradient(45% 80% at 25% 100%,rgba(249,115,22,.5),transparent 65%),
             radial-gradient(45% 80% at 55% 100%,rgba(34,197,94,.35),transparent 65%),
             radial-gradient(50% 85% at 80% 100%,rgba(10,162,216,.45),transparent 65%);
  filter:blur(46px);pointer-events:none}
.price-mega>*{position:relative;z-index:1}
/* product toggle */
.ptoggle{display:inline-flex;align-items:center;gap:14px;font-size:16px;font-weight:600;margin-bottom:26px}
.ptoggle .off{color:rgba(255,255,255,.45)}
.ptoggle-pill{width:46px;height:26px;border-radius:999px;background:linear-gradient(100deg,#F97316,#EC4899,#0066FF);
  position:relative;cursor:pointer;flex:none}
.ptoggle-pill i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  transition:transform .25s cubic-bezier(.19,1,.28,1)}
.ptoggle-pill.right i{transform:translateX(20px)}
.price-mega h1{font-family:var(--serif);font-size:clamp(36px,4.6vw,52px);line-height:1.2}
.price-mega .psub{margin-top:16px;font-size:18px;color:rgba(255,255,255,.65)}
.ptabs{display:flex;gap:8px;justify-content:center;margin:34px 0 40px;flex-wrap:wrap}
.ptabs a,.ptabs button{height:40px;padding:0 18px;border-radius:999px;display:inline-flex;align-items:center;
  font-size:15px;font-weight:500;color:rgba(255,255,255,.88);transition:all .18s;
  background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ptabs a:hover,.ptabs button:hover{background:rgba(255,255,255,.2);color:#fff}
.ptabs .on{background:#fff;color:var(--ink);font-weight:600}
/* seven systems in one selector — a hairline separates the monthly plans from the
   scoped/quoted ones so the row still reads as two ideas (Jayden, 2026-08-04) */
.ptabs-div{width:1px;height:22px;align-self:center;background:rgba(255,255,255,.22);margin:0 6px}
/* `hidden` alone loses to the display rules above it */
.pcard-flag[hidden],.pcard-right[hidden],.ptabs button[hidden]{display:none}
/* scope panel — same frame as the ROI estimator, for systems that are quoted */
.pscope{text-align:left}
.pscope h3{text-align:left}
.pscope ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.pscope li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.pscope li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;border-radius:50%;
  background:linear-gradient(135deg,#3AD0E6,#0066FF);box-shadow:0 0 0 3px rgba(0,102,255,.12)}
.pscope .proi-note{margin-top:auto;padding-top:22px}
/* Breakpoint is 900px to MATCH .pcard-inner's collapse (below). They used to
   disagree — tabs reflowed at 640 while the card went single-column at 900,
   leaving a 260px band where the layout was half-broken. */
@media (max-width:900px){
  /* THE MOBILE FIX (Jayden, 2026-08-07: "the pricing engine is not even laid out
     properly for mobile"). Eight tabs × ~120px wrapped into 3-4 stacked rows of
     pills at 375px — a wall of chips before you reach the actual card. A
     horizontal scroll strip keeps it to ONE row, which is the standard pattern
     for a tab set that outgrows the viewport. Edge-to-edge bleed + scroll padding
     so the first and last tabs aren't clipped against the card's rounded corner. */
  .ptabs{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    margin:28px -22px 32px;
    padding:2px 22px;
    /* fade the right edge so it reads as scrollable rather than cut off */
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  }
  .ptabs::-webkit-scrollbar{display:none}
  .ptabs a,.ptabs button{flex:0 0 auto;scroll-snap-align:start}
  .ptabs-div{display:none}
}
@media (max-width:640px){
  .ptabs{gap:7px}
  /* 44px, not 36 — these tabs ARE the interaction on this page, and 36px
     is under the Apple HIG minimum target (Jayden mobile pass 2026-08-04) */
  .ptabs a,.ptabs button{height:44px;padding:0 15px;font-size:13.5px}
  .pcard-ctas .pill{min-height:44px}
  .proi-input input{align-self:stretch}
}
/* the dark two-panel pricing card — self-contained white text, ALWAYS legible
   regardless of the page background it sits on */
.pcard{max-width:980px;margin:0 auto;border-radius:18px;background:#131313;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 80px rgba(0,0,0,.5);
  display:grid;grid-template-columns:1.05fr 1fr;text-align:left}
.pcard .pcard-title,.pcard .pcard-label,.pcard h3{color:#fff}

/* ---------- cinematic dark stage (reference: dark scene, glowing light
   streak behind the heading, vignette keeps text crisp) ---------- */
.cine{position:relative;margin:12px;border-radius:var(--r-mega);overflow:hidden;
  background:#050507;color:#fff;padding:96px 24px;text-align:center}
.cine::before{content:"";position:absolute;left:50%;top:4%;width:140%;height:64%;
  transform:translateX(-50%);pointer-events:none;filter:blur(36px);opacity:.85;
  background:
    radial-gradient(40% 30% at 50% 44%, rgba(255,176,98,.5), transparent 62%),
    radial-gradient(54% 26% at 36% 50%, rgba(58,208,230,.42), transparent 62%),
    radial-gradient(48% 24% at 66% 46%, rgba(139,92,246,.46), transparent 62%),
    radial-gradient(66% 20% at 52% 54%, rgba(236,72,153,.3), transparent 66%),
    radial-gradient(30% 18% at 58% 40%, rgba(34,197,94,.28), transparent 62%);
  animation:megaDrift 18s ease-in-out infinite alternate}
.cine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%, transparent 38%, rgba(2,2,4,.55) 74%, rgba(2,2,4,.92) 100%)}
.cine>*{position:relative;z-index:1}
.cine .mega-title{color:#fff}
.cine .mega-sub{color:rgba(255,255,255,.7)}
.cine .tag-pill{background:rgba(255,255,255,.1);color:#9BE8F5}
@media(prefers-reduced-motion:reduce){.cine::before{animation:none}}
.pcard-left{padding:44px 42px;border-right:1px solid rgba(255,255,255,.08)}
.pcard-title{font-family:var(--serif);font-size:34px;line-height:1.2;padding-bottom:26px;margin-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.pcard-label{font-size:15px;font-weight:600;margin-bottom:16px}
.vol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vol-pill{height:40px;border-radius:999px;display:grid;place-items:center;font-size:14.5px;font-weight:600;
  color:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);cursor:pointer;transition:all .15s}
.vol-pill.on{color:#fff;box-shadow:inset 0 0 0 2px #fff}
.pcard-has{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  font-size:14.5px;color:rgba(255,255,255,.6)}
.pcard-has b{color:#fff;font-weight:600}
.pcard-right{padding:44px 42px;display:flex;flex-direction:column}
.pcard-right h3{font-size:17px;font-weight:700;margin-bottom:14px}
.pcard-right .pdesc{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.65)}
.ptotal-label{margin-top:auto;padding-top:26px;font-size:14px;color:rgba(255,255,255,.55)}
.ptotal{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.ptotal .amt{font-family:var(--serif);font-size:46px;line-height:1}
.ptotal .per{font-size:13.5px;color:rgba(255,255,255,.6)}
.pleak{margin-top:10px;font-size:13px;color:rgba(255,255,255,.5);line-height:1.5}
.pcard-ctas{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
/* light "everything included" */
.pincl{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;max-width:1080px;margin:0 auto;padding:110px 24px;align-items:start}
.pincl h2{font-family:var(--serif);font-size:clamp(32px,3.8vw,46px);line-height:1.25}
.pincl .pi-sub{margin-top:22px;font-size:18px;font-weight:500}
.pincl .pi-note{margin-top:44px;font-size:15px;line-height:1.6;color:var(--grey-2)}
.pi-feats{padding-top:6px}
.pi-feats h3{font-size:16px;font-weight:700;margin-bottom:16px}
.pi-feats li{list-style:disc;margin-left:20px;font-size:15.5px;line-height:1.5;padding:5px 0;color:var(--ink-2)}
/* dark aurora callout card (why-a-call) */
.pwhy{max-width:680px;margin:0 auto 40px;border-radius:20px;background:#050505;color:#fff;
  padding:80px 56px;text-align:center;position:relative;overflow:hidden}

/* ---- the ambient rainbow variant (Jayden 2026-08-04) --------------------
   A live shader canvas carries the field, and a slow counter-rotating orb sits
   BEHIND the copy so the section has motion at its centre rather than two
   static blurs pinned to the bottom edge. The canvas is the same hero-shader
   the rest of the site runs, so it is already off-screen-gated and
   render-scale capped — this does not add a second always-on GPU loop. */
.pwhy-aurora{max-width:880px;padding:64px 56px;background:#07060D;
  box-shadow:0 30px 90px rgba(20,10,60,.28)}
.pwhy-aurora canvas.hero-canvas{position:absolute;inset:0;width:100%;height:100%;
  z-index:0;opacity:.9}
.pwhy-aurora::after{display:none}          /* the old static blur pair */
/* `.pwhy>*{position:relative}` above is (0,1,1) and BEAT a bare `.pwhy-orb`
   (0,1,0) — the orb fell back into flow as a 620px-tall block and pushed the
   copy to the bottom of a mostly-empty card. Scoped selector wins it back. */
.pwhy .pwhy-orb{position:absolute;left:50%;top:46%;width:min(560px,86%);aspect-ratio:1;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  filter:blur(46px);opacity:.62}
.pwhy-orb i{position:absolute;inset:0;border-radius:50%;display:block;
  mix-blend-mode:screen;transform-origin:50% 50%}
.pwhy-orb i:nth-child(1){background:radial-gradient(45% 45% at 34% 36%,rgba(58,208,230,.95),transparent 70%);
  animation:pwo1 17s linear infinite}
.pwhy-orb i:nth-child(2){background:radial-gradient(44% 44% at 68% 40%,rgba(0,102,255,.9),transparent 70%);
  animation:pwo2 23s linear infinite}
.pwhy-orb i:nth-child(3){background:radial-gradient(46% 46% at 50% 70%,rgba(236,72,153,.85),transparent 70%);
  animation:pwo3 29s linear infinite}
@keyframes pwo1{to{transform:rotate(360deg) scale(1.06)}}
@keyframes pwo2{to{transform:rotate(-360deg) scale(1.1)}}
@keyframes pwo3{to{transform:rotate(360deg) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.pwhy-orb i{animation:none}}
@media (max-width:640px){.pwhy-aurora{padding:48px 22px}.pwhy .pwhy-orb{filter:blur(34px)}}

/* the Bundle has to LOOK like the default choice, not just be it */
.ptabs .ptab-star{padding-right:11px}
.ptabs .ptab-star i{margin-left:9px;padding:3px 8px;border-radius:99px;font-style:normal;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:linear-gradient(120deg,#0066FF,#8B5CF6);white-space:nowrap}
.ptabs .ptab-star.on i{background:linear-gradient(120deg,#0066FF,#8B5CF6);color:#fff}
@media (max-width:640px){.ptabs .ptab-star i{font-size:9.5px;padding:2px 6px;margin-left:6px}}
.pwhy::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-50%;height:80%;
  background:radial-gradient(50% 80% at 30% 100%,rgba(249,115,22,.45),transparent 65%),
             radial-gradient(50% 80% at 75% 100%,rgba(10,162,216,.4),transparent 65%);
  filter:blur(40px);pointer-events:none}
.pwhy>*{position:relative;z-index:1}
.pwhy h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);line-height:1.25}
.pwhy p{margin:18px auto 26px;max-width:440px;font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.75)}
/* the shader underneath swings through orange and violet, so a flat 75% white
   disappears on half the frames. Light blue reads on both, and the shadow keeps
   it legible over the brightest part of the sweep. */
.pwhy-aurora h2{text-shadow:0 2px 22px rgba(4,2,16,.55)}
.pwhy-aurora p{color:#CFEBFF;font-weight:500;text-shadow:0 1px 14px rgba(4,2,16,.75)}
@media(max-width:1023px){.pcard{grid-template-columns:1fr}.pcard-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .pincl{grid-template-columns:1fr;gap:40px}}

/* ============================================================
   AGENCY PAGE (measured from reference)
   ============================================================ */
/* full aurora hero variant — the living background wrapped around the hero */
.ag-aurora{position:relative;margin:12px;border-radius:var(--r-mega);overflow:hidden;background:var(--hero-base)}
.ag-aurora .hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.ag-aurora .ag-hero{position:relative;z-index:1;color:#fff;padding-bottom:110px}
.ag-aurora .ag-hero h1{color:#fff}
.ag-aurora .ag-eyebrow{color:rgba(255,255,255,.92)}
.ag-aurora .ag-eyebrow .b{color:#9BE8F5}
.ag-aurora .ag-perks{color:rgba(255,255,255,.88)}
.ag-aurora .ag-right p{color:rgba(255,255,255,.92)}
.ag-hero{max-width:1160px;margin:0 auto;padding:150px 24px 90px;display:grid;
  grid-template-columns:1.15fr 1fr;gap:64px;align-items:start}
.ag-eyebrow{font-size:17px;font-weight:600;margin-bottom:22px}
.ag-eyebrow .b{color:var(--accent)}
.ag-hero h1{font-family:var(--serif);font-size:clamp(36px,4.4vw,52px);line-height:1.22}
.ag-perks{margin-top:30px;font-size:16.5px;line-height:2.1;color:var(--ink-2)}
.ag-perks li{list-style:none}
.ag-perks li::before{content:"- "}
.ag-right{padding-top:64px}
.ag-right p{font-size:17px;line-height:1.65;color:var(--ink-2)}
/* cobalt CTA — lit gradient + ambient glow (reference treatment, not flat) */
.pill-blue{color:#fff;
  background:linear-gradient(180deg,#4D9AFF 0%,#0066FF 55%,#0052D4 100%);
  box-shadow:0 10px 26px rgba(0,102,255,.38), inset 0 1px 0 rgba(255,255,255,.4);
  transition:box-shadow .2s ease,filter .2s ease,transform .18s ease}
.pill-blue:hover{filter:brightness(1.08);box-shadow:0 14px 32px rgba(0,102,255,.48), inset 0 1px 0 rgba(255,255,255,.4)}
/* how-it-works outlined card */
.ag-how{max-width:1160px;margin:0 auto 110px;border:2.5px solid #0B0B0F;border-radius:26px;
  box-shadow:6px 8px 0 rgba(11,11,15,.9);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:#fff}
.ag-how-left{padding:56px 48px}
.ag-how-left h2{font-family:var(--serif);font-size:clamp(30px,3.4vw,42px);margin-bottom:24px}
.ag-how-left p{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin-bottom:16px}
.ag-how-right{padding:40px 48px;border-left:1px solid rgba(0,0,0,.08)}
.ag-step{display:flex;align-items:center;gap:22px;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.ag-step:last-of-type{border-bottom:none}
.ag-step .n{font-family:var(--serif);font-size:34px;color:#0B0B0F;flex:none;width:58px}
.ag-step span{font-size:16px;font-weight:500}
/* supports-you section */
.ag-sup{max-width:1160px;margin:0 auto;padding:0 24px 100px;display:grid;grid-template-columns:300px 1fr;gap:56px}
/* 10x enterprise rail (Jayden 2026-07-26): scroll-synced, clickable, with a
   living progress spine — numbers light up as their panel crosses center */
.ag-sup-nav{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:6px;
  padding-left:18px;border-left:2px solid rgba(0,0,0,.07)}
.ag-sup-nav .it{position:relative;display:flex;align-items:center;gap:13px;font-size:15.5px;font-weight:500;
  color:var(--grey);padding:11px 12px;border-radius:12px;cursor:pointer;transition:color .2s,background .2s;
  -webkit-tap-highlight-color:transparent}
.ag-sup-nav .it::before{content:"";position:absolute;left:-20px;top:12px;bottom:12px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#3AD0E6,#0066FF,#8B5CF6);opacity:0;transition:opacity .25s}
.ag-sup-nav .it:hover{color:var(--ink);background:#F7F8FB}
.ag-sup-nav .it.on{color:var(--ink);font-weight:600;background:#F4F7FE}
.ag-sup-nav .it.on::before{opacity:1}
.ag-sup-nav .it.on b{background:linear-gradient(135deg,#0AA2D8,#0066FF);color:#fff;box-shadow:0 6px 16px rgba(0,102,255,.3)}
.ag-sup-nav .it b{width:28px;height:28px;flex:none;border-radius:50%;background:#EDEDF0;color:var(--ink);
  transition:background .25s,color .25s,box-shadow .25s;
  display:grid;place-items:center;font-size:13px;font-weight:600}
@media(max-width:1023px){
  .ag-sup{grid-template-columns:1fr;gap:20px}
  /* the rail becomes a sticky horizontal chip strip on small screens */
  .ag-sup-nav{position:sticky;top:76px;z-index:30;flex-direction:row;gap:8px;overflow-x:auto;
    padding:10px 12px;border-left:none;border-radius:999px;background:rgba(255,255,255,.9);
    backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(10,20,60,.1),inset 0 0 0 1px rgba(0,0,0,.05);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  .ag-sup-nav::-webkit-scrollbar{display:none}
  .ag-sup-nav .it{flex:none;padding:8px 12px;font-size:13.5px}
  .ag-sup-nav .it::before{display:none}
}
.ag-panels{display:flex;flex-direction:column;gap:22px}
.ag-panel{border-radius:20px;padding:52px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;overflow:hidden}
.ag-panel.dark{background:#0B0B0F;color:#fff}
.ag-panel.light{background:var(--soft)}
.ag-panel h3{font-size:22px;font-weight:700;line-height:1.35;margin-bottom:14px}
.ag-panel p{font-size:15px;line-height:1.65;color:var(--grey-2)}
.ag-panel.dark p{color:rgba(255,255,255,.65)}
.ag-chipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ag-chip{border-radius:14px;background:#17171C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  padding:20px 10px;text-align:center}
.ag-chip .ic{width:40px;height:40px;margin:0 auto 10px;border-radius:50%;background:#0B0B0F;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);display:grid;place-items:center}
.ag-chip b{font-size:15px}
.ag-chip span{display:block;font-size:11.5px;color:rgba(255,255,255,.5);margin-top:3px}
@media(max-width:1023px){.ag-hero{grid-template-columns:1fr;gap:28px}.ag-right{padding-top:0}
  .ag-how{grid-template-columns:1fr}.ag-how-right{border-left:none;border-top:1px solid rgba(0,0,0,.08)}
  .ag-sup{grid-template-columns:1fr}.ag-sup-nav{position:static;flex-direction:row;flex-wrap:wrap}
  .ag-panel{grid-template-columns:1fr;padding:32px}}

/* ============================================================
   PROMO LAYER — exit-intent + timed slide-in
   ============================================================ */
.gpop-overlay{position:fixed;inset:0;z-index:950;background:rgba(10,8,20,.55);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px}
.gpop-overlay.show{display:flex}
/* the inquiry popup wears the site's rainbow ambient: spinning conic border +
   soft multicolor glow bleeding out behind the card */
.gpop{position:relative;width:min(540px,94vw);border-radius:22px;padding:2px;overflow:visible;
  background:conic-gradient(from var(--gpa,210deg),#3AD0E6,#0066FF,#8B5CF6,#EC4899,#FFB062,#3AD0E6);
  box-shadow:0 30px 90px rgba(10,20,60,.4);animation:gpopIn .45s cubic-bezier(.19,1,.28,1),gpopSpin 9s linear infinite}
@property --gpa{syntax:"<angle>";initial-value:210deg;inherits:false}
@keyframes gpopSpin{to{--gpa:570deg}}
.gpop::before{content:"";position:absolute;inset:-34px;z-index:-1;border-radius:40px;filter:blur(38px);opacity:.5;
  background:conic-gradient(from 210deg,#3AD0E6,#0066FF,#8B5CF6,#EC4899,#FFB062,#3AD0E6)}
@keyframes gpopIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.gpop-band{display:none}
.gpop-body{background:#fff;border-radius:20px}
@media(prefers-reduced-motion:reduce){.gpop{animation:gpopIn .45s ease}}
.gpop-body{padding:36px 40px 40px;position:relative}
.gpop-x{position:absolute;top:14px;right:16px;color:var(--grey);font-size:18px;padding:6px}
.gpop h3{font-family:var(--serif);font-size:30px;line-height:1.2;margin-bottom:12px}
.gpop p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-bottom:22px}
.gpop-row{display:flex;gap:10px}
.gpop-row input{flex:1;height:46px;border:1px solid rgba(0,0,0,.16);border-radius:10px;padding:0 14px;
  font-size:14.5px;font-family:inherit;outline:none}
.gpop-row input:focus{border-color:var(--ink)}
.gpop-note{margin-top:14px;font-size:11.5px;color:var(--grey);line-height:1.5}
.gslide{position:fixed;left:20px;bottom:20px;z-index:940;width:330px;border-radius:16px;background:#fff;
  box-shadow:0 16px 50px rgba(0,0,0,.22),0 0 0 1px var(--ring);padding:22px;display:none;
  animation:gpopIn .45s cubic-bezier(.19,1,.28,1)}
.gslide.show{display:block}
.gslide h4{font-size:16px;font-weight:600;line-height:1.35;margin-bottom:8px}
.gslide p{font-size:13.5px;color:var(--grey-2);line-height:1.5;margin-bottom:14px}
.gslide-x{position:absolute;top:10px;right:12px;color:var(--grey);padding:4px}

/* ============================================================
   DIAGNOSTIC PAGE
   ============================================================ */
.diag-wrap{max-width:720px;margin:0 auto;padding:170px 24px 120px}
.diag-eyebrow{font-family:"IBM Plex Sans",var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.diag-title{font-family:var(--serif);font-size:clamp(36px,5vw,54px);line-height:1.15}
.diag-sub{margin-top:18px;font-size:18px;color:var(--grey-2);line-height:1.6;max-width:560px}
.diag-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.diag-chip{height:32px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);font-size:13px;color:var(--ink-2)}
.diag-card{margin-top:48px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--ring),0 16px 50px rgba(0,0,0,.05);padding:40px}
.diag-step{font-size:13px;color:var(--grey);letter-spacing:.06em;margin-bottom:8px}
.diag-q{font-family:var(--serif);font-size:26px;line-height:1.3;margin-bottom:8px}
.diag-hint{font-size:14px;color:var(--grey);margin-bottom:20px}
.diag-card textarea,.diag-card input{width:100%;border:1px solid rgba(0,0,0,.16);border-radius:10px;background:#FAFAFA;
  padding:14px;font-size:15px;font-family:inherit;outline:none;resize:vertical}
.diag-card textarea:focus,.diag-card input:focus{border-color:var(--ink);background:#fff}
.diag-nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.diag-back{font-size:14px;color:var(--grey-2)}
.diag-bar{height:3px;border-radius:2px;background:rgba(0,0,0,.07);margin-bottom:34px;overflow:hidden}
.diag-bar i{display:block;height:100%;background:var(--grad-brand);transition:width .45s cubic-bezier(.19,1,.28,1)}
.diag-reading{text-align:center;padding:40px 0}
.diag-reading .scan{width:220px;height:3px;margin:26px auto 0;border-radius:2px;background:rgba(0,0,0,.08);overflow:hidden;position:relative}
.diag-reading .scan i{position:absolute;left:-40%;width:40%;height:100%;background:var(--grad-brand);animation:scan 1.1s linear infinite}
@keyframes scan{to{left:100%}}
.rx{border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin:22px 0}
.rx h4{font-size:17px;font-weight:600;margin-bottom:6px}
.rx p{font-size:15px;color:var(--ink-2);line-height:1.6}

/* sticky mobile CTA */
.mcta{display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:930}
.mcta a{display:flex;align-items:center;justify-content:center;height:52px;border-radius:14px;
  background:var(--ink);color:#fff;font-size:15.5px;font-weight:600;box-shadow:0 12px 34px rgba(0,0,0,.3)}
/* sticky mobile CTA RETIRED (Jayden 2026-07-23): mobile keeps only the
   chat launcher + review toasts — no bottom bar. Markup removed site-wide. */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1023px){
  .hero-word{font-size:72px}
  .hero-inner{padding:150px 24px 260px}
  .nav-links{display:none}
  .ticker-panel{margin-left:16px;margin-right:16px}
  .ticker-track{flex-wrap:wrap}
  .ticker-item{flex:1 1 40%}
  .ticker-item + .ticker-item::before{display:none}
  .roi,.feature-card,.bw-body{grid-template-columns:1fr}
  .quotes-wall{grid-template-columns:1fr 1fr}
  .qw-feat{grid-row:auto;grid-column:span 2}
  .qw-feat .qw-quote{font-size:22px}
  .uc-grid{grid-template-columns:1fr}
  .uc-card.uc-wide{grid-column:auto;flex-direction:column;align-items:stretch;gap:0}
  .uc-wide .uc-review{border-left:none;border-top:1px solid rgba(0,0,0,.07);
    padding-left:0;padding-top:18px;margin-top:24px}
  .bento{grid-template-columns:1fr 1fr}
  .bento>[class*=span-]{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .bw-form{border-right:none;border-bottom:1px solid rgba(0,0,0,.07)}
  .fc-visual{min-height:380px}
}
@media (max-width:600px){
  .h-section,.mega-title,.results-head,.cta-title{font-size:32px}
  .hero-word{font-size:56px}
  /* stack the hero actions: no nowrap squeeze, no clipped labels */
  .hero-ctas{flex-direction:column;align-items:stretch;gap:10px;width:100%;margin-top:28px}
  .hero-ctas .pill{width:100%;justify-content:center;text-align:center;min-height:48px}
  .hero-watch{width:100%;justify-content:flex-start}
  .hero-watch .hw-txt{min-width:0;flex:1}
  .hero-watch .hw-txt b,.hero-watch .hw-txt i{overflow-wrap:anywhere}
  .hero-pre{font-size:30px}
  /* mobile globe — the reference gives its orb a TALL prominent arc on phones
     (243vw canvas = 190vw sphere at K=1.28) */
  .globe-canvas{width:243vw;bottom:calc(243vw * -0.625)}
  .hero-inner{padding-bottom:300px}
  .book-title{font-size:30px}
  .bento{grid-template-columns:1fr}
  .section{padding:64px 0}
  .gw-panel{right:8px}
}

/* ============================================================
   MOBILE LAYER — iOS-grade (desktop-safe, every rule gated)
   Protocol: 08_prompts/01_websites/mobile-optimization/SKILL.md
   ============================================================ */

/* ---- global guards (safe at all widths) ---- */
img,svg,canvas,video{max-width:100%}
.bento>*,.hiw-grid>*,.loop-grid>*,.rvgrid>*,.uc-grid>*,.mr-grid>*{min-width:0}
.bcard{min-width:0}
.cta-panel,.gfoot{overflow:clip}
.gfoot-band{max-width:100%}

/* app-like lock (Jayden's call): vertical-only page gestures — pan-y ignores
   horizontal swipes AND pinch at the gesture level, which is what stops the
   iOS side-wiggle. NO overflow clip on html: empirically (2026-07-27, real
   Chrome) overflow-x:clip on the root breaks position:sticky site-wide
   (words-pin + pinned systems scroll away leaving blank runways). */
html,body{touch-action:pan-y}
.hiw-grid,.lgm,.ticker-inner,.quotes-wall{touch-action:pan-x pan-y}

/* ---- touch: no zoom-on-focus, 44pt targets, native press feedback ---- */
@media (pointer:coarse){
  input,select,textarea{font-size:16px!important}
  .gw-tab,.nav-login,.vol-pill,.gw-article,.nm-ico{min-height:44px}
  .vol-pill{height:auto;min-height:44px;padding:10px 6px}
  .pill,.nav-signup,.bw-continue,.gw-send,.mcta a{-webkit-tap-highlight-color:transparent}
  .pill:active,.nav-signup:active,.mcta a:active,.bw-continue:active{transform:scale(.965);transition:transform .12s ease}
  .rvcard:active,.gw-convo:active,.nav-menu a:active{background:#F1F2F6}
}

/* ---- reduced motion: honor the OS switch everywhere ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- ≤820: nav becomes hamburger + iOS sheet (built by brand.js) ---- */
.mnav-btn{display:none}
@media (max-width:820px){
  .nav-wrap{padding:12px 16px!important}
  .nav-cta .nav-login,.nav-cta .grad-warm{display:none}
  .nav-cta .grad-blue{height:40px;padding:0 16px;font-size:14px}
  .mnav-btn{display:grid;place-items:center;width:44px;height:44px;border:none;background:none;
    color:var(--ink);cursor:pointer;margin-left:2px}
  .nav-wrap:not(.nav-solid) .mnav-btn{color:#fff}
}
.mnav-sheet{position:fixed;inset:0;z-index:990;background:#fff;display:none;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 14px) 20px calc(env(safe-area-inset-bottom) + 20px);
  overflow:auto;-webkit-overflow-scrolling:touch}
.mnav-sheet.open{display:flex;animation:mnavIn .32s cubic-bezier(.2,.9,.3,1)}
@keyframes mnavIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mnav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mnav-x{width:44px;height:44px;border:none;border-radius:50%;background:#F2F2F5;font-size:17px;
  display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.mnav-label{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin:16px 0 6px}
.mnav-sheet .nav-menu-m a{display:flex;align-items:center;gap:14px;padding:12px 4px;border-radius:14px;min-height:56px}
.mnav-sheet .nav-menu-m .nm-ico{width:42px;height:42px;font-size:19px}
.mnav-sheet .nav-menu-m b{font-size:16.5px;font-weight:600;color:var(--ink);display:block}
.mnav-sheet .nav-menu-m i{font-style:normal;font-size:13px;color:var(--grey);display:block}
.mnav-links a{display:flex;align-items:center;justify-content:space-between;min-height:52px;
  font-size:17px;font-weight:600;color:var(--ink);border-bottom:1px solid rgba(0,0,0,.06)}
.mnav-ctas{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:26px}
.mnav-ctas .pill{width:100%;height:52px;display:flex;align-items:center;justify-content:center}
.mnav-login{text-align:center;font-size:15px;font-weight:600;color:var(--grey-2);padding:12px}

/* ---- ≤640: the layout pass ---- */
@media (max-width:640px){
  /* heroes + dark stages breathe, never shout */
  .air-hero{margin:8px 8px 0;padding-left:16px;padding-right:16px}
  .air-hero .giant{font-size:clamp(44px,13vw,58px)}
  .sub-serif{font-size:clamp(19px,5.4vw,24px)}
  .burst-word{font-size:clamp(52px,17vw,80px)!important}
  .svc-h1{font-size:clamp(30px,8.6vw,38px)}
  .mega,.price-mega,.cine,.book-aurora{margin:8px;padding-left:16px;padding-right:16px}
  .mega{padding-top:64px}
  .price-mega,.cine{padding-top:56px;padding-bottom:56px}
  .mega-head{margin-bottom:40px;padding:0 4px}
  .words-pin{height:170vh}
  .scrollwords{font-size:clamp(21px,5.9vw,26px)}

  /* pinned scroll-jack → natural tappable accordion (no dead runway on phones) */
  .pin-section{height:auto!important}
  .pin-section>div{position:static!important;padding:0 16px!important}
  /* full-bleed on phones so every card gets the same 16px gutter */
  .mega{margin-left:0;margin-right:0;border-radius:0}
  /* .mega already supplies that 16px, so inside it the wrapper must not add a
     second one — that double gutter is why the two cards in .mega sat at 83% of
     the viewport while the one outside it sat at the reference's 91%. */
  .mega .pin-section>div{padding-left:0!important;padding-right:0!important}
  /* matched to hyros at 375px: 91% wide with 16px gutters, roomier vertical
     padding, softer corner, and a heading that is not larger than the reference */
  .feature-card{padding:40px 16px;gap:22px;max-width:none;width:100%;
    border-radius:24px;max-height:none}
  .fc-title{font-size:32px;line-height:1.2;margin-bottom:26px}
  .acc-title{font-size:20px;line-height:1.45}
  .fc-scene .art-img{max-height:none}
  .fc-visual{min-height:300px}
  .chipgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
  .mchip{width:auto}

  /* HOW IT WORKS → native swipe carousel with snap */
  .hiw-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:12px;padding:4px 4px 14px;scrollbar-width:none}
  .hiw-grid::-webkit-scrollbar{display:none}
  .hiw-card{scroll-snap-align:center}
  .hiw-card:not(:last-child)::after{display:none}

  /* HERO REVIEWS → auto-rotating horizontal marquee (no swiping needed),
     rainbow shell intact, white fade masks on both edges */
  .ticker-panel{margin:-72px 12px 0}
  .ticker-inner{padding:22px 0}
  .ticker-inner::before,.ticker-inner::after{content:"";position:absolute;top:0;bottom:0;width:36px;
    z-index:2;pointer-events:none}
  .ticker-inner::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
  .ticker-inner::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
  .ticker-track{flex-wrap:nowrap;width:max-content;gap:0;animation:tickMove 36s linear infinite}
  .ticker-track:active{animation-play-state:paused}
  .ticker-item.tk-dupe{display:flex}
  .ticker-item{flex:0 0 290px;margin-right:20px;padding-left:22px;gap:14px}
  .ticker-item::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
    background:rgba(0,0,0,.08);display:block}
  .ticker-quote{font-size:16px}
  .ticker-role{font-size:13px}

  /* pinned systems → the reference's mobile flow (built by motion.js .m-flow):
     every step visible — heading, body, that step's visual inline — natural scroll */
  .m-flow{display:flex;flex-direction:column}
  .m-flow .acc-item{padding:16px 0 4px}
  .m-flow .acc-bar{display:none}
  .m-flow .acc-btn{pointer-events:none;gap:0}
  .m-flow .acc-title{font-size:20px;line-height:1.45;font-weight:600}
  .m-flow .acc-body{max-height:none!important;opacity:1!important;margin-top:10px;padding-left:0;font-size:16.5px}
  .m-flow .m-scene{position:static;opacity:1;transform:none;padding:0;margin:16px 0 6px;
    display:grid;place-items:center;border-radius:16px;overflow:hidden;
    background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .on-light.m-flow .m-scene{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
  .m-flow .m-scene .art-img{width:100%;height:auto;display:block}
  /* website (light) artifacts run edge-to-edge inside the frame while the dark
     systems' artifacts carry baked-in margins — inset the light ones so every
     system's visual reads the same size */
  .on-light.m-flow .m-scene{padding:14px}
  .m-flow .fc-cta{margin-top:28px}
  .m-flow .fc-cta .pill{width:100%;height:52px;display:flex;align-items:center;justify-content:center;border-radius:999px}
  .m-flow .fc-note{max-width:none}

  /* results proof layer: reference keeps its compact card clusters on mobile —
     3-up shrinks to fit, know-cluster keeps its stagger (cards are small) */
  .pr-why-head,.pr-know-head{font-size:28px}
  .pr-why-panel{padding:18px 14px}
  .pr-why-grid,.pr-know-cards{gap:8px}
  .pr-wcard,.pr-kcard{padding:12px}
  .pr-wcard h4,.pr-kcard h4{font-size:12px}
  .pr-wcard p,.pr-kcard p{font-size:11px}

  /* featured enterprise story (Shakir): stack, keep the photo visible and modest */
  .rb-card.dark[style]{flex-direction:column!important;align-items:stretch!important;gap:16px!important}
  .rb-card.dark .rvphoto{width:112px!important;height:128px!important;flex:none!important;
    max-height:none;border-radius:14px;object-fit:cover;object-position:top}

  /* REVIEW WALL → auto-cycling marquee, same treatment as the hero ticker */
  .quotes-wall{display:block;overflow:hidden;position:relative;
    padding:40px 0 16px;margin-top:56px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .qw-track{display:flex;width:max-content;animation:tickMove 44s linear infinite}
  .qw-track:active{animation-play-state:paused}
  .qw-card.qw-dupe{display:flex}
  .qw-card{flex:0 0 300px;margin-right:12px;padding:24px 20px}
  .qw-feat{grid-row:auto;grid-column:auto;padding:2.5px;display:flex}
  .qw-feat-in{padding:28px 24px}
  .qw-feat .qw-quote{font-size:21px}
  .qw-glow{left:0;right:0;top:20%;bottom:0;opacity:.14;border-radius:40px}

  .loop-grid{grid-template-columns:1fr;padding:0 8px}
  .orbitrig{transform:scale(.72);transform-origin:top center;margin-bottom:-30px}

  /* cards & panels stack clean */
  .bcard{flex-direction:column!important;gap:16px!important}
  .bcard>img,.rvphoto{width:100%!important;flex:none!important;height:auto!important;max-height:280px;object-fit:cover}
  .bcard .bquote[style*=border-left]{border-left:none!important;padding-left:0!important}
  .rvwrap{margin-left:8px;margin-right:8px}
  .rvproof{padding:10px}
  .rvcard{padding:20px 18px}
  .rvcard.feat{gap:16px}
  .pcard-left,.pcard-right{padding:26px 20px}
  .airbar{height:auto;padding:14px 18px;flex-wrap:wrap;row-gap:10px;border-radius:24px}
  .gfoot{padding:56px 20px 0}

  /* chat panel → FULL-SCREEN takeover on phones (reference behavior:
     open fills the screen, ✕ is the way back) */
  .gw-panel{left:0;right:0!important;bottom:0;top:0;width:100%;max-width:100%;height:100dvh;
    border-radius:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}

  /* checkout + booking shells */
  .bw-stepper{gap:16px;flex-wrap:wrap}
  .book-head{padding:0 8px}
}

/* mobile review marquee — one full set width per loop (defined outside the
   media query; only the mobile track animates with it) */
@keyframes tickMove{to{transform:translateX(-50%)}}
/* reduced motion: marquee parks — let it be scrolled by hand instead */
@media (prefers-reduced-motion:reduce) and (max-width:640px){
  .ticker-inner{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ticker-track{animation:none}
}

/* ---- fixed layers: safe-area (launcher + toasts only — no bottom CTA bar) ---- */
@media (max-width:760px){
  .gw-launcher{bottom:max(14px, env(safe-area-inset-bottom));right:14px}
}

/* ---------- pricing card v2 (interview 2026-08-04): LIGHT card lifting off the
   rainbow field, spinning conic ring on the selected tier, ROI estimator built
   from the visitor's own numbers ---------- */
.pcard-light{position:relative;max-width:1040px;margin:0 auto;padding:3px;border-radius:26px;
  background:conic-gradient(from var(--gpa,140deg),#3AD0E6,#0066FF,#8B5CF6,#EC4899,#FFB062,#3AD0E6);
  animation:ringspin 14s linear infinite;box-shadow:0 40px 100px rgba(10,20,60,.45)}
.pcard-light::before{content:"";position:absolute;inset:-30px;z-index:-1;border-radius:44px;
  filter:blur(46px);opacity:.45;pointer-events:none;
  background:conic-gradient(from 200deg,#3AD0E6,#0066FF,#8B5CF6,#EC4899,#FFB062,#3AD0E6)}
.pcard-light .pcard-inner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:0;
  background:#fff;border-radius:23px;overflow:hidden;color:var(--ink)}
.pcard-light .pcard-left{padding:44px 44px 40px;min-width:0}
.pcard-light .pcard-right{padding:44px 40px 40px;min-width:0;background:linear-gradient(170deg,#F7F9FF,#EEF3FF);
  border-left:1px solid rgba(0,0,0,.07)}
.pcard-flag{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;
  background:linear-gradient(135deg,#1E3FD0,#0066FF);color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.pcard-light .pcard-title{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.15;
  color:var(--ink);border:none;padding:0;margin:0 0 14px}
.pcard-light .ptotal{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.pcard-light .ptotal .amt{font-family:var(--serif);font-weight:400;font-size:60px;line-height:1;color:var(--ink)}
.pcard-light .ptotal .per{font-size:14px;color:var(--grey-2);max-width:230px;line-height:1.45}
.pcard-light .pdesc{font-size:15.5px;line-height:1.6;color:var(--grey-2);margin-bottom:22px}
.pcard-light .pcard-has{font-size:13.5px;color:var(--grey-2);padding-top:18px;
  border-top:1px solid rgba(0,0,0,.08);margin-bottom:24px}
.pcard-light .pcard-has b{color:var(--ink)}
.pcard-light .pcard-ctas{display:flex;gap:10px;flex-wrap:wrap}
.pcard-light .pill-ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.pcard-light .pill-ghost:hover{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
/* ROI estimator */
.proi h3{font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--ink);margin-bottom:20px}
.proi label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey);margin-bottom:9px}
.proi .vol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.proi .vol-pill{display:flex;align-items:center;justify-content:center;height:38px;min-width:0;border-radius:9px;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);font-size:14px;color:var(--ink-2);cursor:pointer;
  transition:box-shadow .18s,color .18s}
.proi .vol-pill:hover{box-shadow:inset 0 0 0 1px rgba(0,102,255,.5)}
.proi .vol-pill.on{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);font-weight:600}
/* The ambient glows are ::before/::after layers deliberately bled past their
   boxes (.rvwrap::before sits at -80px, .pwhy::after at -37.5px). On a 375px
   phone that bleed became 48px of real horizontal page scroll.
   DO NOT "fix" this with overflow-x:clip on html — it silently kills
   position:sticky, which unpins every .pin-section card on the home page and
   leaves ~1200px of dead black scroll behind it. Verified by A/B on prod
   2026-08-04: clip → card bottom -291px (unpinned); visible → 862px (pinned).
   The bleed only overflows on narrow screens, where there is no room for it —
   so pull the glows back to their own box there and keep the effect on desktop. */
@media (max-width:640px){
  .price-mega::after,.pcard-light::before,.pwhy::after,.rvwrap::before,
  .svc-close::before,.gpop::before{left:0;right:0;width:auto}
}.proi-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:20px}
.proi-field{min-width:0}
@media (max-width:400px){.proi-two{grid-template-columns:minmax(0,1fr)}}
.proi-input{display:flex;align-items:center;gap:4px;height:42px;padding:0 12px;border-radius:9px;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);color:var(--grey)}
.proi-input:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.proi-input input{flex:1;min-width:0;border:none;outline:none;background:none;font:inherit;font-size:15px;
  font-weight:600;color:var(--ink);-moz-appearance:textfield}
.proi-input input::-webkit-outer-spin-button,.proi-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.proi-out{margin-top:24px;padding-top:22px;border-top:1px solid rgba(0,0,0,.08)}
.proi-num{font-family:var(--serif);font-weight:400;font-size:52px;line-height:1;color:var(--ink)}
.proi-cap{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--grey-2)}
.proi-note{margin-top:18px;font-size:11.5px;line-height:1.55;color:var(--grey)}
.proi-note b{color:var(--ink-2)}
@media (max-width:900px){
  .pcard-light .pcard-inner{grid-template-columns:minmax(0,1fr)}
  .pcard-light .pcard-right{border-left:none;border-top:1px solid rgba(0,0,0,.07)}
  .pcard-light .pcard-left,.pcard-light .pcard-right{padding:30px 22px}
  .pcard-light .ptotal .amt{font-size:48px}
  .pcard-light .pcard-title{font-size:30px}
  .proi-num{font-size:40px}
  .pcard-light .pcard-ctas .pill{width:100%;justify-content:center}
}
/* touch minimum wins over the compact desktop pill height */
@media (pointer:coarse){.proi .vol-pill{height:44px}.proi-input{height:46px}}

/* ---------- per-tier matrix + the other systems (2026-08-04) ---------- */
.pmatrix,.pmore{max-width:1040px;margin:0 auto;padding:76px 24px 84px}
.pmx-head{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.2;text-align:center}
.pmx-sub{margin:14px auto 34px;max-width:560px;text-align:center;font-size:15.5px;line-height:1.6;color:var(--grey-2)}
.pmx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;
  box-shadow:0 0 0 1px var(--ring),0 20px 60px rgba(0,0,0,.06);background:#fff}
.pmx{width:100%;min-width:660px;border-collapse:collapse;text-align:left}
.pmx thead th{padding:22px 16px;font-size:14.5px;font-weight:600;color:var(--ink);vertical-align:top;
  border-bottom:1px solid rgba(0,0,0,.1);text-align:center}
.pmx thead th span{display:block;margin-top:5px;font-size:12.5px;font-weight:400;color:var(--grey)}
.pmx thead th.pmx-feat{text-align:left;color:var(--grey);font-weight:500}
.pmx thead th.pmx-flag{background:linear-gradient(180deg,rgba(0,102,255,.09),rgba(0,102,255,.02));
  color:var(--accent);border-radius:14px 14px 0 0}
.pmx tbody th{padding:14px 16px;font-size:14px;font-weight:400;line-height:1.45;color:var(--ink-2);
  border-bottom:1px solid rgba(0,0,0,.06);position:sticky;left:0;background:#fff;min-width:250px}
.pmx tbody td{padding:14px 16px;text-align:center;font-size:15px;color:var(--accent);
  border-bottom:1px solid rgba(0,0,0,.06)}
.pmx tbody td.no{color:rgba(0,0,0,.24)}
.pmx tbody tr:nth-child(odd) th,.pmx tbody tr:nth-child(odd) td{background:#FBFCFF}
.pmx tbody tr:nth-child(odd) th{background:#FBFCFF}
.pmx-cta{margin-top:30px;text-align:center}
/* switching includes list — replaced the static 3-column matrix, which could only
   ever describe three of the seven things on the selector above it
   (Jayden, 2026-08-06: "it should be switching based off of what service they click") */
.pmx-inc{background:#fff;border-radius:18px;padding:34px 30px;
  box-shadow:0 0 0 1px var(--ring),0 20px 60px rgba(0,0,0,.06)}
.pmx-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 34px;list-style:none;margin:0;padding:0}
.pmx-list li{position:relative;padding:13px 0 13px 30px;font-size:15px;line-height:1.5;
  color:var(--ink-2);border-bottom:1px solid rgba(0,0,0,.06)}
.pmx-list li::before{content:"";position:absolute;left:2px;top:19px;width:13px;height:7px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);border-radius:1px}
@media (max-width:760px){
  .pmx-inc{padding:24px 20px}
  .pmx-list{grid-template-columns:1fr;gap:0}
  .pmx-list li{font-size:14.5px;padding-left:28px}
}
/* the other systems */
.pmore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pmore-card{background:#fff;border-radius:18px;padding:28px 24px;
  box-shadow:0 0 0 1px var(--ring),0 14px 40px rgba(0,0,0,.05);display:flex;flex-direction:column}
.pmore-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px}
.pmore-card h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;margin-bottom:10px}
.pmore-price{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;color:var(--ink);margin-bottom:12px}
.pmore-price span{font-family:var(--sans);font-size:13px;color:var(--grey);margin-left:6px}
.pmore-price.pmore-custom{font-size:26px;color:var(--grey-2)}
.pmore-card p{font-size:14.5px;line-height:1.6;color:var(--grey-2);margin-bottom:20px}
.pmore-card .pill{margin-top:auto;align-self:flex-start}
@media (max-width:860px){
  .pmore-grid{grid-template-columns:1fr}
  .pmatrix,.pmore{padding-bottom:60px}
  .pmx tbody th{min-width:210px;font-size:13.5px}
  .pmx thead th{padding:18px 12px;font-size:13.5px}
}
/* ---------- footer wordmark: frosted-glass giant type ----------
   v2 (Jayden 2026-08-04): capital G, the FULL word visible (was cropped), and the
   glow/fill are the brand rainbow rather than a violet wash. Three stacked copies:
   rainbow bloom behind, rainbow glass fill, light edge on top. */
.gf-bigmark{position:relative;overflow:hidden;isolation:isolate;
  height:clamp(96px,16vw,210px);margin-top:54px;padding:0 16px;
  display:grid;place-items:end center;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF7FF 34%,#F0EAFF 70%,#E4DCFF 100%)}
.gf-bigmark span{grid-area:1/1;display:block;width:100%;text-align:center;
  font-family:"Poppins",-apple-system,"Segoe UI",sans-serif;font-weight:900;
  font-size:min(16vw,196px);line-height:.98;letter-spacing:-.035em;
  white-space:nowrap;user-select:none;pointer-events:none}
/* 1. rainbow bloom */
.gf-bigmark .bm-glow{
  background:linear-gradient(100deg,#3AD0E6,#0066FF,#8B5CF6,#EC4899,#FFB062);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:blur(26px);opacity:.85}
/* 2. the glass body — brand rainbow, brighter at the top so it reads as lit glass */
.gf-bigmark .bm-fill{
  background:linear-gradient(172deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.72) 14%,
    rgba(58,208,230,.62) 32%,rgba(0,102,255,.7) 52%,rgba(139,92,246,.74) 70%,rgba(236,72,153,.7) 87%,rgba(255,176,98,.72) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* 3. lit edge */
.gf-bigmark .bm-edge{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.72);filter:blur(.4px)}
@media (max-width:640px){
  .gf-bigmark{height:clamp(58px,15vw,110px);margin-top:38px;padding:0 12px}
  .gf-bigmark span{font-size:min(14.5vw,88px)}
  .gf-bigmark .bm-glow{filter:blur(13px)}
  .gf-bigmark .bm-edge{-webkit-text-stroke-width:1px}
}

/* the AI inside GRIFF-AI-N: brands the mark as an AI company (parent-brand magenta) */
.gf-ai{color:#EC4899}
/* on the dark rainbow hero, flat magenta muddies into the field — lift it */
.hero-word .gf-ai{color:#FF74BC;text-shadow:0 0 30px rgba(236,72,153,.55)}
.gf-bigmark .gf-ai{color:inherit}   /* the wordmark is already a rainbow — don't fight it */

/* the live-demo row in the Systems dropdown: separated and warmer than the
   product rows above it, because it is a "do this now", not a "read about it" */
.nav-menu .nm-demo{margin-top:6px;padding-top:12px;border-top:1px solid rgba(20,16,40,.09)}
.nav-menu .nm-demo .nm-txt b{color:var(--accent)}
.nav-menu-m .nm-demo{margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}

/* ================= THE LIVE DEMO =================================
   Jayden 2026-08-04: "build it 10x and into a simulated chatbot ... they can do
   the website scan, paste their info ... AI trains on the spot ... they can demo
   what it would look like for their clients."

   Three states in one card, never a page reload: INPUT → TRAINING → LIVE.
   The conversation deliberately looks like a real phone thread rather than a
   web chat, because the product being demoed is SMS. */
.dm-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
  font-family:"IBM Plex Sans",var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.dm-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#3AD0E6,#0066FF)}
.dm-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 18px;
  margin:26px 0 40px;font-size:13.5px;color:rgba(255,255,255,.72)}
.dm-meta span{display:inline-flex;align-items:center;gap:8px}
.dm-meta span::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#3AD0E6,#0066FF)}
.dm-meta b{color:#fff;font-weight:600}

.dm-card{max-width:1080px}
.dm-card .pcard-inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.dm-left{padding:38px 38px 34px}
.dm-right{padding:0;background:linear-gradient(180deg,#F7F5FE 0%,#EFEBFC 100%);
  display:flex;flex-direction:column;min-height:560px}

/* ---- state 1: what business is this ---- */
.dm-h{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2;color:var(--ink);letter-spacing:-.01em}
.dm-p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.dm-label{margin:24px 0 9px;font-family:"IBM Plex Sans",var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.dm-field{display:flex;align-items:center;gap:0;height:52px;padding:0 6px 0 16px;background:#fff;
  border:1px solid rgba(20,16,40,.16);border-radius:13px;transition:border-color .16s,box-shadow .16s}
.dm-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,102,255,.12)}
.dm-field span{font-size:15px;color:rgba(20,16,40,.36);flex:none}
.dm-field input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:15.5px;color:var(--ink)}
.dm-or{display:flex;align-items:center;gap:14px;margin:20px 0;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(20,16,40,.4)}
.dm-or::before,.dm-or::after{content:"";flex:1;height:1px;background:rgba(20,16,40,.1)}
.dm-card textarea{width:100%;padding:14px 16px;border:1px solid rgba(20,16,40,.16);border-radius:13px;
  background:#fff;color:var(--ink);font:inherit;font-size:15px;line-height:1.6;outline:none;resize:vertical;
  transition:border-color .16s,box-shadow .16s}
.dm-card textarea::placeholder{color:rgba(20,16,40,.36)}
.dm-card textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,102,255,.12)}
.dm-go{width:100%;height:52px;margin-top:22px;border:0;border-radius:13px;cursor:pointer;
  font:inherit;font-size:15.5px;font-weight:600;color:#fff;
  background:linear-gradient(120deg,#0066FF,#8B5CF6);transition:transform .14s,filter .14s}
.dm-go:hover{filter:brightness(1.07)}
.dm-go:active{transform:translateY(1px)}
.dm-go[disabled]{opacity:.55;cursor:default;filter:none;transform:none}
.dm-err{margin-top:14px;font-size:13.5px;line-height:1.55;color:#C2185B}
.dm-fine{margin-top:16px;font-size:12px;line-height:1.55;color:rgba(20,16,40,.45)}

/* ---- state 2: training ---- */
.dm-train{display:none;padding:6px 0}
.dm-train.on{display:block}
.dm-steps{margin:22px 0 0;padding:0;list-style:none}
.dm-steps li{position:relative;padding-left:30px;margin-bottom:15px;font-size:14.5px;
  line-height:1.5;color:rgba(20,16,40,.38);transition:color .3s}
.dm-steps li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:rgba(20,16,40,.1);transition:background .3s,box-shadow .3s}
.dm-steps li.done{color:var(--ink-2)}
.dm-steps li.done::before{background:linear-gradient(135deg,#3AD0E6,#0066FF);box-shadow:0 0 0 3px rgba(0,102,255,.13)}
.dm-steps li.now{color:var(--ink)}
.dm-steps li.now::before{background:linear-gradient(135deg,#3AD0E6,#0066FF);
  animation:dmpulse 1.1s ease-in-out infinite}
@keyframes dmpulse{0%,100%{box-shadow:0 0 0 0 rgba(0,102,255,.4)}50%{box-shadow:0 0 0 7px rgba(0,102,255,0)}}

/* ---- state 3: what it learned ---- */
.dm-learned{display:none}
.dm-learned.on{display:block}
.dm-prof{margin-top:20px;border-radius:15px;padding:20px 22px;
  background:linear-gradient(135deg,rgba(58,208,230,.09),rgba(0,102,255,.06),rgba(139,92,246,.08));
  box-shadow:inset 0 0 0 1px rgba(0,102,255,.15)}
.dm-prof dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:11px 16px}
.dm-prof dt{font-family:"IBM Plex Sans",var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(20,16,40,.5);padding-top:3px;white-space:nowrap}
.dm-prof dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.dm-unknown{margin-top:14px;font-size:12.5px;line-height:1.55;color:rgba(20,16,40,.5)}
.dm-unknown b{color:var(--ink-2);font-weight:600}
.dm-again{margin-top:18px;background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:13.5px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---- the phone thread ---- */
.dm-phone{flex:1;display:flex;flex-direction:column;min-height:0}
.dm-phone-top{display:flex;align-items:center;gap:11px;padding:18px 22px;
  border-bottom:1px solid rgba(20,16,40,.08);background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dm-avatar{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:14px;background:linear-gradient(135deg,#0066FF,#8B5CF6)}
.dm-who{min-width:0;flex:1}
.dm-who b{display:block;font-size:14.5px;color:var(--ink);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-who i{display:block;font-style:normal;font-size:12px;color:var(--ink-2);line-height:1.3}
.dm-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:#16A34A;flex:none}
.dm-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#22C55E;
  box-shadow:0 0 0 3px rgba(34,197,94,.18)}

.dm-thread{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:12px;
  scroll-behavior:smooth;max-height:430px}
.dm-msg{max-width:82%;padding:11px 15px;border-radius:19px;font-size:14.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;animation:dmin .32s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes dmin{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
.dm-msg.them{align-self:flex-start;background:#fff;color:var(--ink);
  border-bottom-left-radius:6px;box-shadow:0 2px 10px rgba(20,16,40,.07)}
.dm-msg.you{align-self:flex-end;color:#fff;border-bottom-right-radius:6px;
  background:linear-gradient(135deg,#0066FF,#6D5CF6)}
.dm-stamp{align-self:center;font-size:11.5px;color:rgba(20,16,40,.42);margin:2px 0}
.dm-typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:#fff;
  border-radius:19px;border-bottom-left-radius:6px;box-shadow:0 2px 10px rgba(20,16,40,.07)}
.dm-typing i{width:7px;height:7px;border-radius:50%;background:rgba(20,16,40,.3);
  animation:dmdot 1.3s infinite}
.dm-typing i:nth-child(2){animation-delay:.18s}
.dm-typing i:nth-child(3){animation-delay:.36s}
@keyframes dmdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.dm-compose{display:flex;align-items:flex-end;gap:9px;padding:14px 16px;
  border-top:1px solid rgba(20,16,40,.08);background:rgba(255,255,255,.8)}
.dm-compose textarea{flex:1;min-height:44px;max-height:110px;padding:11px 15px;border-radius:22px;font-size:15px}
.dm-send{width:44px;height:44px;flex:none;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,#0066FF,#8B5CF6);transition:filter .14s}
.dm-send:hover{filter:brightness(1.08)}
.dm-send[disabled]{opacity:.45;cursor:default}
.dm-hint{padding:0 22px 16px;font-size:12px;line-height:1.5;color:rgba(20,16,40,.48);text-align:center}

.dm-idle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:40px 30px;text-align:center}
.dm-idle svg{opacity:.32}
.dm-idle p{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:270px}

.dm-close{margin-top:26px;padding-top:24px;border-top:1px solid rgba(20,16,40,.08);display:none}
.dm-close.on{display:block}
.dm-close h4{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.3;color:var(--ink)}
.dm-close p{margin-top:9px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.dm-close .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

@media (max-width:900px){
  .dm-card .pcard-inner{grid-template-columns:minmax(0,1fr)}
  .dm-left{padding:30px 22px 26px}
  .dm-right{min-height:0;border-top:1px solid rgba(20,16,40,.08)}
  .dm-thread{max-height:340px;padding:18px}
  .dm-h{font-size:24px}
  .dm-meta{gap:0 14px;font-size:12.5px;margin:22px 0 30px}
  .dm-prof dl{grid-template-columns:1fr;gap:4px 0}
  .dm-prof dd{margin-bottom:9px}
}
@media (pointer:coarse){
  .dm-go,.dm-field,.dm-send{min-height:48px}
}

/* the demo embedded mid-page rather than on the aurora hero */
.dm-inline .dm-eyebrow{color:var(--accent)}
.dm-inline .dm-eyebrow::before{background:linear-gradient(90deg,#3AD0E6,#0066FF)}
.dm-inline .dm-lede{margin-top:16px;max-width:660px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.dm-inline .dm-card{margin:0;max-width:none}

/* Websites sub-tiers, inside the card. Deliberately a different shape from the
   dark .ptabs above so it reads as "which website", not "which system". */
.wtabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:18px;border-radius:12px;
  background:rgba(20,16,40,.055);box-shadow:inset 0 0 0 1px rgba(20,16,40,.07)}
.wtabs button{height:34px;padding:0 15px;border:0;border-radius:9px;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);background:none;
  transition:background .16s,color .16s,box-shadow .16s}
.wtabs button:hover{color:var(--ink)}
.wtabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(20,16,40,.13)}
.wtabs[hidden]{display:none}
@media (max-width:640px){
  .wtabs{width:100%;justify-content:stretch}
  .wtabs button{flex:1;padding:0 6px;font-size:12.5px;min-height:40px}
}

/* Popup form fields. Was a 2-column inline grid with hardcoded inline styles —
   at 390px that cut "Business name" and "Email" clean off the right edge
   (Jayden, mobile screenshot 2026-08-04). One column on phones, two only where
   there is genuinely room, and 16px text so iOS does not zoom on focus. */
.gpop-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:12px}
.gpop-fields input{width:100%;min-width:0;height:50px;padding:0 15px;font:inherit;font-size:16px;
  color:var(--ink);background:#fff;border:1px solid rgba(0,0,0,.16);border-radius:11px;outline:none;
  transition:border-color .16s,box-shadow .16s}
.gpop-fields input::placeholder{color:rgba(20,16,40,.4)}
.gpop-fields input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,102,255,.12)}
.gpop-bad{margin:-4px 0 12px;font-size:13.5px;line-height:1.5;color:#C2185B}
@media (min-width:560px){
  .gpop-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* Hero "watch the VSL" CTA. Replaces the inline master VSL, which sat in the
   band where the ticker panel deliberately overlaps the globe and was therefore
   covered by the reviews. Reads as a play affordance, not a third pill — the
   two pills above it are the actions, this is the soft option. */
.hero-watch{display:inline-flex;align-items:center;gap:13px;margin-top:26px;padding:11px 20px 11px 12px;
  border:0;border-radius:999px;cursor:pointer;text-align:left;font:inherit;
  color:#fff;background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .18s,box-shadow .18s,transform .12s}
.hero-watch:hover{background:rgba(255,255,255,.17);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.hero-watch:active{transform:translateY(1px)}
.hero-watch .hw-play{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,#0066FF,#8B5CF6);
  box-shadow:0 4px 16px rgba(0,102,255,.42)}
.hero-watch .hw-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.hero-watch .hw-txt b{font-size:14.5px;font-weight:600;line-height:1.25}
.hero-watch .hw-txt i{font-style:normal;font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.72)}
@media (max-width:600px){
  .hero-watch{margin-top:20px;padding:10px 16px 10px 10px;gap:11px;min-height:52px}
  .hero-watch .hw-play{width:30px;height:30px}
  .hero-watch .hw-txt b{font-size:13.5px}
  .hero-watch .hw-txt i{font-size:11.5px}
}

/* ============================================================
   LEGAL PAGES (privacy, terms)
   One definition for both. These pages deliberately do NOT load brand.js —
   the splash screen has no business on a legal page — so the AI tint in the
   wordmark is written into their markup instead.
   ============================================================ */
.lgl-shell{max-width:820px;margin:0 auto;padding:0 24px 96px}
.lgl-top{border-bottom:1px solid rgba(20,16,40,.09);position:sticky;top:0;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);z-index:20}
.lgl-top .in{max-width:1120px;margin:0 auto;padding:16px 24px;display:flex;
  align-items:center;justify-content:space-between}
.lgl-top .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.lgl-top .brand-word{font-family:var(--sans);font-weight:700;letter-spacing:.14em;
  font-size:15px;color:var(--ink)}
.lgl-back{font-family:"IBM Plex Sans",var(--sans);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;font-weight:600}
.lgl-back:hover{color:var(--accent-hover)}
.lgl-hero{padding:64px 0 30px;border-bottom:1px solid rgba(20,16,40,.08);margin-bottom:40px}
/* typographic eyebrow with a leading bar — the workspace verdict is no pill chips */
.lgl-eyebrow{display:inline-flex;align-items:center;gap:10px;
  font-family:"IBM Plex Sans",var(--sans);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 16px}
.lgl-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#3AD0E6,#0066FF)}
.lgl-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,52px);
  line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin:0 0 16px}
.lgl-meta{font-size:14px;color:var(--grey-2);margin:0}
.lgl-body{color:var(--ink-2);font-size:16.5px;line-height:1.72}
.lgl-body h2{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.2;
  color:var(--ink);margin:44px 0 14px;scroll-margin-top:90px}
.lgl-body h3{font-weight:650;font-size:17.5px;color:var(--ink);margin:26px 0 8px}
.lgl-body p{margin:0 0 16px}
.lgl-body ul{margin:0 0 16px;padding-left:22px}
.lgl-body li{margin:0 0 8px}
.lgl-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.lgl-body a:hover{color:var(--accent-hover)}
.lgl-body strong{color:var(--ink);font-weight:650}
.lgl-callout{border:1px solid rgba(0,102,255,.22);
  background:linear-gradient(135deg,rgba(58,208,230,.07),rgba(0,102,255,.05),rgba(139,92,246,.06));
  border-radius:14px;padding:22px 24px;margin:22px 0}
.lgl-callout p{margin:0 0 10px}
.lgl-callout p:last-child{margin:0}
.lgl-toc{border:1px solid rgba(20,16,40,.1);border-radius:14px;padding:20px 24px;
  margin:0 0 34px;background:var(--soft)}
.lgl-toc h4{font-family:"IBM Plex Sans",var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px;font-weight:700}
.lgl-toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:14.5px}
.lgl-toc li{margin:0 0 7px;break-inside:avoid}
.lgl-toc a{color:var(--ink-2);text-decoration:none}
.lgl-toc a:hover{color:var(--accent)}
@media(max-width:640px){.lgl-toc ol{columns:1}.lgl-shell{padding:0 20px 72px}}

/* ══════════════════════════════════════════════════════════════════════════
   CLIENT VIDEO PROOF — added 2026-08-10.
   Client reviews arrive as phone-recorded 9:16 vertical video. The slot is
   therefore ALWAYS 9:16 and the media fills it edge to edge: a landscape slot
   would letterbox, and letterboxed media is a standing REJECTED verdict
   (taste-verdicts 2026-06-18 — measure the slot, fill it, zero bars).
   Rules baked in: no autoplay, no sound until asked, poster always, and one
   video plays at a time. The receipt below the video carries what the client
   BOUGHT — never a metric we have not verified.
   ══════════════════════════════════════════════════════════════════════════ */
.pv{position:relative;border-radius:14px;overflow:hidden;background:#0C0C14;aspect-ratio:9/16}
.pv video,.pv img{width:100%;height:100%;object-fit:cover;display:block}
.pv-play{position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;padding:0;
  background:linear-gradient(180deg,rgba(6,6,14,.12),rgba(6,6,14,.62));transition:background .25s ease,opacity .25s ease}
.pv-play:hover{background:linear-gradient(180deg,rgba(6,6,14,.04),rgba(6,6,14,.5))}
.pv-play i{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.95);
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .2s ease}
.pv-play:hover i{transform:scale(1.07)}
.pv-play i::after{content:"";border-left:16px solid #0C0C14;border-top:10.5px solid transparent;
  border-bottom:10.5px solid transparent;margin-left:5px}
.pv-play:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pv.is-playing .pv-play{opacity:0;pointer-events:none}
.pv-cap{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;font-size:12.5px;
  text-shadow:0 1px 12px rgba(0,0,0,.9);pointer-events:none}

/* the receipt — what they bought, never an unverified number */
.rcpt{list-style:none;margin:0;padding:0}
.rcpt li{display:flex;justify-content:space-between;gap:18px;padding:9px 0;
  border-bottom:1px solid rgba(0,0,0,.07);font-size:14px}
.rcpt li:last-child{border-bottom:0}
.rcpt .l{color:var(--grey);flex:none}
.rcpt .v{text-align:right;font-weight:600;color:var(--ink-2)}
.dark .rcpt li,.rb-card.dark .rcpt li{border-bottom-color:rgba(255,255,255,.13)}
.dark .rcpt .l,.rb-card.dark .rcpt .l{color:rgba(255,255,255,.55)}
.dark .rcpt .v,.rb-card.dark .rcpt .v{color:#fff}
.rcpt .v a{color:var(--accent);text-decoration:none}
.rb-card.dark .rcpt .v a,.pvband .rcpt .v a{color:#9BE8F5}
.rcpt .v a:hover{text-decoration:underline}

/* the split band — service pages, sits after "How it works" */
.pvband{background:radial-gradient(58% 84% at 86% 10%,rgba(139,92,246,.3),transparent 62%),
        radial-gradient(48% 74% at 10% 94%,rgba(10,162,216,.28),transparent 62%),#0A0A12;color:#fff}
.pvband-in{display:grid;grid-template-columns:290px 1fr;gap:42px;align-items:center;padding:52px 0}
.pvband .kick{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#3AD0E6;font-weight:700}
.pvband h3{font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1.12;margin:14px 0 6px;font-weight:400}
.pvband .sub{color:rgba(255,255,255,.6);font-size:14.5px;margin:0 0 22px}
@media(max-width:860px){.pvband-in{grid-template-columns:1fr;gap:26px;padding:40px 0}
  .pvband .pv{max-width:300px}}

/* Video inside the .rb-grid bento — replaces that client's text card in place.
   HORIZONTAL split on purpose: these cards are span-5/span-7 (470-660px wide),
   and a full-width 9:16 video in one would render ~1170px tall and blow the row
   apart. A fixed 132px column keeps the video at its native aspect (235px tall)
   and leaves the card the same height as its text siblings, so no grid surgery
   is needed and any client's card can become a video card. */
.rb-card.pvcard{flex-direction:row;gap:22px;align-items:stretch}
/* Video column. Sized so the 9:16 frame stays roughly as tall as the text
   beside it (176px wide -> 313px tall). A wide card gets a wider frame; the
   clamp stops a narrow card from squeezing the quote into a ribbon. */
.rb-card.pvcard .pv{flex:0 0 clamp(160px,30%,208px);align-self:center}
.rb-card.pvcard .pv-play i{width:50px;height:50px}
.rb-card.pvcard .pv-play i::after{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
.rb-card.pvcard .pv-cap{display:none}
.rb-card.pvcard .pvcard-body{display:flex;flex-direction:column;gap:12px;min-width:0;flex:1}
.rb-card.pvcard .rb-quote{margin:0}
.rb-card.pvcard .rcpt{margin-top:auto}
.rb-card.pvcard .rb-who{padding-top:0;margin-top:0}
/* Bare link under her name — no "Live at" label; the URL says what it is. */
.pv-link{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
.pv-link:hover{text-decoration:underline}
.rb-card.dark .pv-link{color:#9BE8F5}

/* ── Mobile. Stack, centre the frame, and give the receipt its own lines:
   forcing a label and a long value onto one 300px row wraps into a ragged
   two-column block that reads worse than nothing. ── */
@media(max-width:620px){
  .rb-card.pvcard{flex-direction:column;gap:18px}
  .rb-card.pvcard .pv{flex:none;width:100%;max-width:260px;margin:0 auto;align-self:auto}
  .rb-card.pvcard .pv-play i{width:58px;height:58px}
  .rb-card.pvcard .rb-quote{font-size:15.5px;text-align:center}
  .rb-card.pvcard .rcpt li{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 0}
  .rb-card.pvcard .rcpt .v{text-align:left;font-size:14.5px}
  .rb-card.pvcard .rb-who{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.pv-play,.pv-play i{transition:none}}