/* ============================================================
   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;
  /* 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" 60,"WONK" 0;}
.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}
.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}
.hero-inner{position:relative;z-index:2;max-width:1360px;margin:0 auto;
  padding:200px 40px 220px}
.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 */
.ticker-panel{position:relative;z-index:3;max-width:var(--w-panel);margin:-120px auto 0;
  background:#fff;border-radius:20px;padding:32px;display:flex;gap:48px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.ticker-item{flex:1;display:flex;flex-direction:column;gap:24px;position:relative}
.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}
.ticker-name{font-size:16px;font-weight:500;letter-spacing:-.32px}
.ticker-role{font-size:14px;color:var(--grey);margin-top:2px}

/* ---------- 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}

/* 3-quote row */
.quotes-3{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;
  padding-top:64px;margin-top:80px;border-top:1px solid rgba(0,0,0,.08)}
.q3-quote{font-size:18px;line-height:1.55}
.q3-person{margin-top:40px;display:flex;flex-direction:column;gap:12px}
.q3-badge{width:44px;height:44px;border-radius:10px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:11px;letter-spacing:.04em}
.q3-name{font-size:16px;font-weight:500}
.q3-link{font-size:14px;color:#8B8AF0}

/* ---------- use-case ---------- */
.usecase-head{text-align:left;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}
.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)}

.feature-card{max-width:var(--w-panel);margin:0 auto;border-radius:var(--r-card);
  background:var(--dark-card);padding:64px 48px;display:grid;grid-template-columns:1fr 1.25fr;gap:48px;
  position:relative}
/* rainbow hairline ring around the card */
.feature-card::before{content:"";position:absolute;inset:0;border-radius:var(--r-card);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.25;margin-bottom:40px}
.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:22px;font-weight:500;line-height:1.3}
.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}
.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}

/* ---------- 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 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 */
.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 */
.book-widget.book-live{height:780px;overflow:hidden;background:#fff;padding:0}
@media(max-width:640px){.book-widget.book-live{height:86dvh;margin:28px auto 64px}}
.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 — cinematic sub-splash: drifting ambient rainbow +
   the wave mark drawing itself. Once per session.
   ============================================================ */
html.sp-lock{overflow:hidden}
/* LIGHT rainbow ambient (Jayden 2026-07-23: the dark "pixel terminal" look is
   out — this is the site's light aurora, soft and airy) */
.splash{position:fixed;inset:0;z-index:99999;overflow:hidden;display:grid;place-items:center;background:#fff}
.sp-amb{position:absolute;inset:-35%;filter:blur(80px);opacity:.55;
  background:
    radial-gradient(32% 40% at 22% 30%, rgba(255,176,98,.7), transparent 62%),
    radial-gradient(34% 44% at 74% 24%, rgba(236,72,153,.55), transparent 62%),
    radial-gradient(38% 48% at 80% 76%, rgba(0,102,255,.55), transparent 62%),
    radial-gradient(32% 42% at 28% 80%, rgba(52,211,153,.5), transparent 62%),
    radial-gradient(30% 40% at 52% 52%, rgba(139,92,246,.45), transparent 62%);
  animation:spDrift 7s ease-in-out infinite alternate, spHue 9s linear infinite}
@keyframes spDrift{from{transform:translate(-2%,-2%) scale(1)}to{transform:translate(2.5%,2.5%) scale(1.12)}}
@keyframes spHue{from{filter:blur(80px) hue-rotate(0)}to{filter:blur(80px) hue-rotate(360deg)}}
/* soft white veil keeps the center calm for the lockup — no dot matrix */
.sp-dots{position:absolute;inset:0;
  background:radial-gradient(55% 55% at 50% 46%, rgba(255,255,255,.75), transparent 78%)}
.sp-lockup{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.sp-glow{position:absolute;left:50%;top:38%;width:260px;height:260px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle, rgba(0,102,255,.28), transparent 70%);
  filter:blur(30px);animation:spGlow 2.6s ease-in-out infinite alternate}
@keyframes spGlow{from{opacity:.5;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
/* the mark draws itself */
.sp-mark{position:relative}
.sp-mark path{stroke-dasharray:620;stroke-dashoffset:620;
  animation:spDraw 1.5s cubic-bezier(.55,0,.25,1) .2s forwards}
.sp-mark path:nth-child(2){animation-delay:.5s}
@keyframes spDraw{to{stroke-dashoffset:0}}
.sp-word{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:24px;color:var(--ink);
  letter-spacing:.6em;opacity:0;animation:spWord 1.1s cubic-bezier(.19,1,.28,1) 1.35s forwards;
  padding-left:.6em /* optical centering vs tracking */}
@keyframes spWord{from{opacity:0;letter-spacing:.6em;filter:blur(6px)}to{opacity:1;letter-spacing:.16em;filter:blur(0)}}
.sp-tag{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(10,15,30,.4);
  opacity:0;animation:spTag .8s ease 1.9s forwards}
@keyframes spTag{to{opacity:1}}
.splash.done{animation:spReveal .85s cubic-bezier(.7,0,.2,1) forwards}
@keyframes spReveal{40%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.08);visibility:hidden}}
@media(prefers-reduced-motion:reduce){.sp-amb,.sp-glow,.sp-mark path,.sp-word,.sp-tag{animation:none}
  .sp-mark path{stroke-dashoffset:0}.sp-word,.sp-tag{opacity:1;letter-spacing:.16em}
  .splash.done{animation:none;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)}
.rb-chip img{max-width:82%;max-height:82%}
.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}}

/* ---------- generated artifact images (OpenArt set 2026-07-24) ---------- */
.loop-visual .art-img{display:block;width:100%;height:auto;border-radius:18px;
  box-shadow:0 20px 54px rgba(10,20,60,.16)}
.fc-scene .art-img{display:block;max-height:460px;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){.fc-scene .art-img{max-height:340px}}

/* ---------- 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-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 20px;border-radius:999px;display:inline-flex;align-items:center;
  font-size:15px;font-weight:500;color:rgba(255,255,255,.55);transition:all .18s}
.ptabs .on{background:#fff;color:var(--ink);font-weight:600}
/* 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}
.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)}
@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}
.ag-sup-nav{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:18px}
.ag-sup-nav .it{display:flex;align-items:center;gap:12px;font-size:16.5px;font-weight:500;color:var(--grey-2)}
.ag-sup-nav .it b{width:26px;height:26px;flex:none;border-radius:50%;background:#EDEDF0;color:var(--ink);
  display:grid;place-items:center;font-size:13px;font-weight:600}
.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 190px}
  .nav-links{display:none}
  .ticker-panel{flex-wrap:wrap;margin-left:16px;margin-right:16px}
  .ticker-item{flex:1 1 40%}
  .ticker-item + .ticker-item::before{display:none}
  .roi,.feature-card,.bw-body{grid-template-columns:1fr}
  .quotes-3{grid-template-columns:1fr;gap:40px}
  .uc-grid{grid-template-columns:1fr}
  .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}
  .hero-pre{font-size:30px}
  .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 zoom lock (Jayden's call): pan allowed, pinch-zoom suppressed —
   pairs with maximum-scale=1 in the viewport meta + gesture guard in brand.js */
html{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 4px!important}
  .feature-card{padding:26px 18px;gap:22px}
  .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}

  .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 → iOS bottom sheet */
  .gw-panel{left:0;right:0!important;bottom:0;top:auto;width:100%;max-width:100%;height:88dvh;
    border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}

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

/* ---- 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}
}