/* ============================================================
   HUMN minds — design system v2 (light)
   Machine speaks in blue sans. Humans speak in warm serif.
   Cool-white page; the hero OS panel stays dark on purpose.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600&f[]=switzer@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root{
  color-scheme: light;
  --bg:#F7F9FC;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#EEF3FA;
  --line:rgba(16,42,80,.14);
  --line-soft:rgba(16,42,80,.09);
  --ink:#0B1526;
  --muted:rgba(18,34,60,.68);
  --faint:rgba(18,34,60,.45);
  --sky:#1D7FD1;
  --cobalt:#2176D4;
  --indigo:#5A60E0;
  --human:#C97B4A;               /* the warm human counterpoint: burnished copper */
  --gold-grad:linear-gradient(120deg,#A9603A 0%,#C97B4A 38%,#D9A05B 52%,#C9812F 68%,#A9603A 100%);
  --gold-glow:0 0 22px rgba(201,123,74,.45);
  --grad:linear-gradient(115deg,#4DB8F0 0%,#2176D4 100%);
  --glow:0 12px 44px rgba(33,118,212,.14);
  --card-shadow:0 1px 2px rgba(16,42,80,.04), 0 14px 34px rgba(16,42,80,.06);
  --r:20px;
  --r-sm:14px;
  --display:'Clash Display',-apple-system,sans-serif;
  --body:'Switzer',-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --wrap:1160px;
  --ease:cubic-bezier(.22,.9,.28,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(77,184,240,.3)}
a{color:var(--sky); text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
section{padding:104px 0; position:relative}
@media(min-width:800px){section{padding:148px 0}}
section.tight{padding-top:0}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,6.6vw,4.6rem); line-height:1.02}
h2{font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.08; max-width:24ch}
h3{font-size:1.3rem; line-height:1.3; font-weight:500}
.grad-text{background:linear-gradient(115deg,#2E9BE0 0%,#1B62B8 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.human-voice{
  font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(201,123,74,.5));
}
/* Small screens: the gradient text reads pale; switch to solid copper for legibility */
@media(max-width:640px){.human-voice{filter:none; background:none; -webkit-text-fill-color:currentColor; color:#B36A35}}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sky); margin-bottom:22px;
}
.kicker::before{content:""; width:26px; height:1px; background:var(--grad)}
.lede{margin-top:18px; color:var(--muted); font-size:1.13rem; max-width:58ch}
.lede strong{color:var(--ink); font-weight:600}

/* ---------- Ambient glow field ---------- */
/* Legacy ambient .field/.orb rules removed July 4: all ambient markup now uses
   .fiber-field, and the fixed-position .field rule collided with the form's
   .field wrappers (pinning them offscreen and killing pointer events). */
.orb{display:none}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(16,42,80,.03) 1px,transparent 1px); background-size:3px 3px}

.fiber-field{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(60vw 40vw at 72% 8%, rgba(217,160,91,.125), transparent 65%),
    radial-gradient(50vw 36vw at 12% 88%, rgba(201,123,74,.085), transparent 60%),
    radial-gradient(70vw 50vw at 50% 45%, rgba(77,184,240,.07), transparent 70%);
}
/* July 4 founder pass: the SVG squiggle layer is gone ("it looks messy");
   the soft radial gradients above are the whole ambient field now. */

/* ---------- Nav ---------- */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  border-bottom:1px solid transparent;
}
header.site-nav.scrolled{
  background:rgba(247,249,252,.82);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line-soft);
  box-shadow:0 4px 24px rgba(16,42,80,.05);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0}
.wordmark{display:inline-flex; align-items:baseline; font-family:var(--display); font-size:1.3rem; color:var(--ink); white-space:nowrap}
.wordmark img{height:36px; width:auto; margin-right:6px; align-self:center; filter:drop-shadow(0 2px 10px rgba(33,118,212,.4))}
.wordmark b{font-weight:600; background:linear-gradient(115deg,#2E9BE0 0%,#1B62B8 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.wordmark span{font-weight:400; margin-left:.3em; color:var(--muted)}
.nav-links{display:flex; align-items:center; gap:30px; font-size:.94rem; font-weight:500}
.nav-links > a:not(.btn){color:var(--muted); position:relative; padding:4px 0; transition:color .2s}
.nav-links > a:not(.btn):hover, .nav-links > a:not(.btn).active{color:var(--ink)}
.nav-links > a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background:var(--grad); transition:right .28s var(--ease);
}
.nav-links > a:not(.btn):hover::after, .nav-links > a:not(.btn).active::after{right:0}
@media(max-width:840px){.nav-links > a:not(.btn){display:none}}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; background:var(--surface); border:1px solid var(--line); border-radius:12px; cursor:pointer;
}
.nav-toggle span{width:18px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s}
header.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
header.menu-open .nav-toggle span:nth-child(2){opacity:0}
header.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
@media(max-width:840px){.nav-toggle{display:flex}}
/* Below ~520px the nav CTA pill wraps to two lines and collides with the wordmark;
   the mobile menu and hero carry the same CTA, so drop the pill on true phone widths */
@media(max-width:520px){.nav-links .btn{display:none}}
.mobile-nav{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:rgba(255,255,255,.98); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line); padding:10px 24px 26px;
  box-shadow:0 20px 40px rgba(16,42,80,.08);
}
header.menu-open .mobile-nav{display:block}
.mobile-nav a{display:block; padding:15px 2px; font-size:1.08rem; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line-soft)}
.mobile-nav a.active{color:var(--sky)}
.mobile-nav a:last-child{border-bottom:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--grad); color:#fff; font-weight:600; font-size:1rem; font-family:var(--body);
  padding:15px 30px; border-radius:999px; border:none; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 6px 22px rgba(33,118,212,.3);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,#2E9BE0 0%,#1B62B8 100%); opacity:0; transition:opacity .25s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(33,118,212,.38)}
.btn:hover::after{opacity:1}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn.small{padding:11px 22px; font-size:.9rem}
.btn-ghost{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--ink); font-weight:600; font-size:1rem; padding:14px 28px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  transition:border-color .25s, background .25s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-ghost:hover{border-color:rgba(33,118,212,.45); transform:translateY(-2px); box-shadow:0 8px 24px rgba(16,42,80,.08)}
.cta-note{display:block; margin-top:14px; color:var(--faint); font-size:.92rem}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* ---------- Hero ---------- */
.hero{padding:168px 0 96px; position:relative; overflow-x:clip}
/* overflow-x:clip kept from the SVG era: it guarantees the hero never contributes
   horizontal scrollable overflow on small viewports, whatever visual sits inside. */
@media(min-width:900px){.hero{padding:196px 0 120px}}
/* minmax(0,...) tracks: the hero photo's large intrinsic width must never
   inflate the column (grid blowout on small viewports) */
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:64px; align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px}}
.hero .sub{margin-top:24px; font-size:1.16rem; color:var(--muted); max-width:54ch}
.hero .cta-row{margin-top:38px}

/* Hero load-in choreography */
.rise{opacity:0; transform:translateY(26px); animation:rise .9s var(--ease) forwards}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.2s}.rise.d3{animation-delay:.34s}.rise.d4{animation-delay:.5s}.rise.d5{animation-delay:.68s}
@keyframes rise{to{opacity:1; transform:none}}

/* ---------- The hero portrait (signature): human intelligence + AI, fused ----------
   A photograph now, not line art. The photo carries its own soft blue field, so it is
   feathered into the page with a radial alpha mask (no hard rectangle edges) and a
   whisper of copper life is layered over the circuit brain with a tiny inline SVG. */
.neuro{position:relative; display:flex; align-items:center; justify-content:center; min-height:320px}
/* Crossed feather: the wrapper masks vertically, the photo masks horizontally.
   Nested masks multiply, so all four edges (and corners doubly so) dissolve into
   the page. No border-radius: there is no card edge left to round. */
.brain-wrap{
  position:relative; width:100%; max-width:600px;
  -webkit-mask-image:linear-gradient(180deg, transparent 1%, #000 24%, #000 76%, transparent 99%);
          mask-image:linear-gradient(180deg, transparent 1%, #000 24%, #000 76%, transparent 99%);
}
.brain-photo{
  display:block; width:100%; height:auto;
  -webkit-mask-image:linear-gradient(90deg, transparent 1%, #000 26%, #000 82%, transparent 99%);
          mask-image:linear-gradient(90deg, transparent 1%, #000 26%, #000 82%, transparent 99%);
}
.brain-live{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.brain-live .bl-glow{animation:blBreathe 8s ease-in-out infinite}
.brain-live .bl-spark{opacity:.15; animation:blPulse var(--dur,5s) ease-in-out infinite; animation-delay:var(--del,0s)}
@keyframes blBreathe{0%,100%{opacity:.3}50%{opacity:.62}}
@keyframes blPulse{0%,100%{opacity:.12}50%{opacity:.9}}
/* Reduced motion: the global animation kill-switch freezes both keyframes at their
   0% frame, which leaves the overlay static at low opacity — exactly the fallback. */

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Metrics ---------- */
.metrics{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:52px 0; background:var(--bg-2)}
.metrics-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:36px 20px}
@media(min-width:800px){.metrics-grid{grid-template-columns:repeat(5,1fr)}}
.metric b{display:block; font-family:var(--display); font-size:clamp(1.9rem,3.6vw,2.6rem); font-weight:600; letter-spacing:-.02em;
  background:linear-gradient(115deg,#2E9BE0 0%,#1B62B8 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.metric span{display:block; margin-top:6px; font-size:.88rem; color:var(--muted); line-height:1.45; max-width:20ch}

/* ---------- Cards / bento ---------- */
.grid{display:grid; gap:20px; margin-top:52px}
@media(min-width:800px){
  .grid.cols2{grid-template-columns:1fr 1fr}
  .grid.cols3{grid-template-columns:repeat(3,1fr)}
  .grid.cols4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1060px){.grid.cols4{grid-template-columns:repeat(4,1fr)}}
.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:32px 28px; position:relative; box-shadow:var(--card-shadow);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s var(--ease);
}
.card:hover{transform:translateY(-4px); border-color:var(--line); box-shadow:0 2px 4px rgba(16,42,80,.05), 0 22px 44px rgba(16,42,80,.09)}
.card h3{margin-bottom:12px}
.card p{color:var(--muted); font-size:.98rem}
.card ul{margin-top:16px; list-style:none}
.card li{color:var(--muted); font-size:.95rem; padding:6px 0 6px 24px; position:relative}
.card li::before{content:""; position:absolute; left:0; top:15px; width:12px; height:2px; background:var(--grad); border-radius:2px}

/* ---------- Lanes ---------- */
.lane{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:38px 32px; position:relative; overflow:hidden; box-shadow:var(--card-shadow);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s var(--ease);
}
.lane:hover{transform:translateY(-5px); box-shadow:0 2px 4px rgba(16,42,80,.05), 0 24px 48px rgba(16,42,80,.1)}
.lane::before{content:""; position:absolute; top:0; left:32px; right:32px; height:2px; border-radius:2px}
.lane .who{font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; margin-bottom:16px}
.lane h3{font-size:1.55rem; font-weight:600}
.lane .path{margin-top:14px; color:var(--muted); font-size:.98rem}
.lane .path b{color:var(--ink); font-weight:600}
.lane ul{margin:20px 0 26px; list-style:none}
.lane li{color:var(--muted); font-size:.95rem; padding:6px 0 6px 24px; position:relative}
.lane li::before{content:""; position:absolute; left:0; top:15px; width:12px; height:2px; border-radius:2px}
.lane .go{margin-top:auto; font-weight:600; display:inline-flex; align-items:center; gap:8px}
.lane .go .arrow{transition:transform .25s var(--ease)}
.lane:hover .go .arrow{transform:translateX(4px)}
.lane.coaches::before, .lane.coaches li::before{background:linear-gradient(90deg,#4DB8F0,#2176D4)}
.lane.coaches .who, .lane.coaches .go{color:#1D7FD1}
.lane.communities::before, .lane.communities li::before{background:linear-gradient(90deg,#8B93F8,#5F63E8)}
.lane.communities .who, .lane.communities .go{color:#5A60E0}
.lane.sellers::before, .lane.sellers li::before{background:linear-gradient(90deg,#39D0D8,#1FA8C9)}
.lane.sellers .who, .lane.sellers .go{color:#0E96A8}
.lane:hover.coaches{border-color:rgba(33,118,212,.4)}
.lane:hover.communities{border-color:rgba(95,99,232,.4)}
.lane:hover.sellers{border-color:rgba(31,168,201,.4)}

/* ---------- Case study ---------- */
.case-hero{
  display:grid; gap:36px; margin-top:52px;
  background:linear-gradient(160deg,#FFFFFF 0%,#EDF4FC 100%);
  border:1px solid var(--line-soft); border-radius:calc(var(--r) + 6px); padding:44px 36px;
  position:relative; overflow:hidden; box-shadow:var(--card-shadow);
}
@media(min-width:900px){.case-hero{grid-template-columns:1.1fr .9fr; padding:56px 52px}}
.case-hero::after{
  content:""; position:absolute; top:-40%; right:-20%; width:60%; height:120%;
  background:radial-gradient(circle,rgba(201,123,74,.07),transparent 60%); pointer-events:none;
}
.case-hero .story p{color:var(--muted); font-size:1.04rem; max-width:54ch}
.case-hero .story p + p{margin-top:14px}
.case-hero .story p strong{color:var(--ink)}
.case-figures{display:grid; gap:14px; align-content:center; grid-auto-rows:1fr}
.case-figures .fig{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(255,255,255,.75); border:1px solid var(--line-soft); border-radius:var(--r); padding:22px 26px;
}
.case-figures .fig b{
  font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2rem); font-weight:600; white-space:nowrap; line-height:1.15;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(201,123,74,.4));
}
/* The counting span inside <b> must render at the same size as its unit text;
   an unscoped ".fig span" rule was shrinking the number and leaving "hrs"/"emails" huge. */
.case-figures .fig b span{font-size:inherit; font-family:inherit; font-weight:inherit; letter-spacing:inherit}
.case-figures .fig > span{color:var(--muted); font-size:.92rem; text-align:right}
.verified{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#0F8A55;
}
.verified svg{width:15px; height:15px; stroke:#0F8A55; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- Quotes ---------- */
.quote{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:30px 28px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--card-shadow);
}
.quote p{font-family:var(--serif); font-style:italic; font-size:1.22rem; line-height:1.5; color:var(--ink)}
.quote p::before{content:"\201C"; color:var(--human); margin-right:2px; text-shadow:var(--gold-glow)}
.quote p::after{content:"\201D"; color:var(--human); margin-left:2px; text-shadow:var(--gold-glow)}
.quote footer{color:var(--faint); font-size:.88rem; font-family:var(--body); font-style:normal}
.quote .stats{color:var(--sky); font-size:.86rem; font-weight:600; font-family:var(--body); font-style:normal}

/* Marquee rail */
.marquee{overflow:hidden; margin-top:52px; position:relative; padding:6px 0 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .rail{display:flex; gap:20px; width:max-content; animation:rail 64s linear infinite}
.marquee:hover .rail{animation-play-state:paused}
.marquee .quote{flex:0 0 380px; max-width:86vw}
.marquee .quote p{font-size:1.06rem}
@keyframes rail{to{transform:translateX(-50%)}}

/* Attribution with photo */
footer.attrib, .attrib{display:flex; align-items:center; gap:13px}
.attrib img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--line); flex:0 0 auto}
.pullquote footer.attrib img{width:54px; height:54px}
.case-hero .attrib{margin-top:26px}
.case-hero .attrib img{width:56px; height:56px}
.case-hero .attrib b{display:block; color:var(--ink); font-weight:600}
.case-hero .attrib small{display:block; color:var(--faint); font-size:.86rem}

/* Pull quote */
.pullquote{margin-top:52px; padding:12px 0}
.pullquote p{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.3; color:var(--ink); max-width:30ch;
}
.pullquote p::before{content:"\201C"; color:var(--human); text-shadow:var(--gold-glow)}
.pullquote p::after{content:"\201D"; color:var(--human); text-shadow:var(--gold-glow)}
.pullquote footer{margin-top:20px; color:var(--muted); font-size:.98rem}
.pullquote footer b{color:var(--ink); font-weight:600}

/* ---------- Calculator ---------- */
.calc{
  margin-top:52px; border-radius:calc(var(--r) + 6px); overflow:hidden;
  border:1px solid var(--line-soft);
  background:linear-gradient(165deg,#FFFFFF 0%,#EDF4FC 100%);
  display:grid; box-shadow:var(--card-shadow);
}
@media(min-width:900px){.calc{grid-template-columns:1fr 1fr}}
.calc .inputs{padding:44px 36px}
@media(min-width:900px){.calc .inputs{padding:52px 48px}}
.calc .inputs h3{font-size:1.5rem; margin-bottom:8px}
.calc .inputs > p{color:var(--muted); font-size:.96rem; margin-bottom:34px}
.calc .row{margin-bottom:32px}
.calc label{display:flex; justify-content:space-between; align-items:baseline; font-weight:500; font-size:.98rem; margin-bottom:14px}
.calc output{font-family:var(--display); font-weight:600; font-size:1.3rem; color:var(--sky); font-variant-numeric:tabular-nums}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:36px; background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:4px; background:linear-gradient(90deg,#2E9BE0 var(--fill,50%),rgba(16,42,80,.14) var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%; margin-top:-9px;
  background:#FFFFFF; border:2px solid #2E9BE0; box-shadow:0 2px 10px rgba(33,118,212,.35);
}
input[type=range]::-moz-range-track{height:4px; border-radius:4px; background:rgba(16,42,80,.14)}
input[type=range]::-moz-range-progress{height:4px; border-radius:4px; background:#2E9BE0}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#FFFFFF; border:2px solid #2E9BE0}
.calc .result{
  padding:44px 36px; display:flex; flex-direction:column; justify-content:center; gap:8px;
  background:rgba(16,42,80,.025); border-top:1px solid var(--line-soft);
}
@media(min-width:900px){.calc .result{border-top:none; border-left:1px solid var(--line-soft); padding:52px 48px}}
.calc .result .label{font-size:.8rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
.calc .result .big{
  font-family:var(--display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2.6rem,6vw,4rem); line-height:1.05; font-variant-numeric:tabular-nums;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(201,123,74,.4));
}
.calc .result .sub-line{color:var(--muted); font-size:.98rem; margin-top:6px}
.calc .result .sub-line b{color:var(--ink); font-variant-numeric:tabular-nums}
.calc .result .compare{margin-top:26px; padding-top:24px; border-top:1px solid var(--line-soft); color:var(--muted); font-size:.94rem}
.calc .result .compare strong{color:var(--ink)}
.calc .result .cta-row{margin-top:26px}

/* ---------- Steps ---------- */
.steps{margin-top:52px; display:grid; gap:0; counter-reset:step}
.step{
  counter-increment:step; display:grid; grid-template-columns:64px 1fr; gap:22px;
  padding:30px 0; border-bottom:1px solid var(--line-soft);
}
.step:last-child{border-bottom:none}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--display); font-size:1.5rem; font-weight:500;
  background:linear-gradient(115deg,#2E9BE0 0%,#1B62B8 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step h3{font-size:1.2rem}
.step p{color:var(--muted); font-size:.98rem; margin-top:8px; max-width:62ch}

/* ---------- Pricing / offers ---------- */
.offer{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:calc(var(--r) + 4px);
  padding:46px 38px; margin-top:52px; position:relative; overflow:hidden; box-shadow:var(--card-shadow);
}
.offer.flagship{
  border-color:rgba(33,118,212,.35);
  background:linear-gradient(160deg,#FFFFFF 0%,#E9F2FC 100%);
  box-shadow:var(--glow);
}
.offer .tier{font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sky)}
.offer h3{font-size:clamp(1.6rem,3.2vw,2.2rem); font-weight:600; margin:10px 0 4px}
.offer .price{font-family:var(--display); font-size:1.5rem; font-weight:600; margin-top:6px}
.offer .price small{color:var(--faint); font-weight:400; font-size:.95rem; font-family:var(--body)}
.offer p.desc{color:var(--muted); margin-top:16px; max-width:60ch; font-size:1.02rem}
.offer p.desc + p.desc{margin-top:10px}
.offer ul{margin-top:22px; list-style:none}
.offer li{color:var(--muted); font-size:.98rem; padding:7px 0 7px 26px; position:relative}
.offer li::before{content:""; position:absolute; left:0; top:17px; width:13px; height:2px; background:var(--grad); border-radius:2px}
.offer .list-label{margin-top:24px; font-weight:600; color:var(--ink)}
.offer .cta-row{margin-top:30px}

.price-card{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); padding:34px 28px;
  box-shadow:var(--card-shadow);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s var(--ease);
}
.price-card:hover{transform:translateY(-4px); border-color:var(--line); box-shadow:0 2px 4px rgba(16,42,80,.05), 0 22px 44px rgba(16,42,80,.09)}
.price-card.flagship{border-color:rgba(33,118,212,.4); box-shadow:var(--glow)}
.price-card .tier{font-size:.76rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--sky)}
.price-card .price{font-family:var(--display); font-size:1.9rem; font-weight:600; margin:12px 0 2px; letter-spacing:-.02em}
.price-card .per{color:var(--faint); font-size:.88rem}
.price-card p.desc{color:var(--muted); font-size:.95rem; margin-top:14px; flex:1}
.price-card a{margin-top:20px; font-weight:600}
.own-line{margin-top:36px; text-align:center; font-size:1.05rem; font-weight:500}
.own-line small{display:block; color:var(--faint); font-weight:400; margin-top:6px}

/* ---------- FAQ ---------- */
.faq{margin-top:44px}
details{border-bottom:1px solid var(--line-soft); padding:8px 0}
summary{
  cursor:pointer; font-weight:500; font-size:1.1rem; padding:20px 0; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:18px; transition:color .2s;
}
summary:hover{color:var(--sky)}
summary::-webkit-details-marker{display:none}
summary .plus{flex:0 0 auto; width:14px; height:14px; position:relative}
summary .plus::before, summary .plus::after{content:""; position:absolute; background:var(--sky); border-radius:2px; transition:transform .3s var(--ease)}
summary .plus::before{left:0; right:0; top:6px; height:2px}
summary .plus::after{top:0; bottom:0; left:6px; width:2px}
details[open] summary .plus::after{transform:scaleY(0)}
details p{color:var(--muted); padding:0 32px 22px 0; max-width:64ch}

/* ---------- Lead magnet / capture ---------- */
.capture{
  margin-top:0; border-radius:calc(var(--r) + 6px); border:1px solid var(--line-soft);
  background:linear-gradient(150deg,#FFFFFF 0%,#E9F2FC 100%);
  padding:52px 40px; position:relative; overflow:hidden; box-shadow:var(--card-shadow);
}
@media(min-width:900px){.capture{padding:64px 56px}}
.capture::after{
  content:""; position:absolute; top:-60%; right:-10%; width:50%; height:200%;
  background:radial-gradient(circle,rgba(77,184,240,.1),transparent 60%); pointer-events:none;
}
.capture-grid{display:grid; gap:40px; position:relative; z-index:1}
@media(min-width:900px){.capture-grid{grid-template-columns:1.1fr .9fr; align-items:center}}
.capture h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.capture .preview{list-style:none; margin-top:26px}
.capture .preview li{
  color:var(--muted); padding:10px 0 10px 32px; position:relative; font-size:.98rem;
  border-bottom:1px solid var(--line-soft);
}
.capture .preview li:last-child{border-bottom:none}
.capture .preview li::before{
  content:""; position:absolute; left:0; top:14px; width:16px; height:16px; border-radius:5px;
  background:rgba(77,184,240,.14); border:1px solid rgba(33,118,212,.45);
}
.capture .preview li::after{
  content:""; position:absolute; left:5px; top:19px; width:6px; height:3px;
  border-left:1.6px solid var(--sky); border-bottom:1.6px solid var(--sky); transform:rotate(-45deg);
}
.capture-form{display:grid; gap:12px}
.capture-form input{
  font:inherit; color:var(--ink); background:#FFFFFF;
  border:1px solid var(--line); border-radius:14px; padding:15px 18px; width:100%;
  transition:border-color .25s;
}
.capture-form input::placeholder{color:var(--faint)}
.capture-form input:focus-visible{outline:none; border-color:var(--sky)}
.capture-form .btn{justify-content:center; width:100%}
.capture-form .fine{color:var(--faint); font-size:.84rem; text-align:center}

/* ---------- Forms ---------- */
.form{margin-top:44px; display:grid; gap:24px}
.field label{display:block; font-weight:500; font-size:.97rem; margin-bottom:9px}
.field .hint{font-weight:400; color:var(--faint); font-size:.85rem}
input[type=text],input[type=email],input[type=number],select,textarea{
  width:100%; font:inherit; color:var(--ink); background:#FFFFFF;
  border:1px solid var(--line); border-radius:12px; padding:13px 15px; transition:border-color .25s;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none; border-color:var(--sky)}
textarea{resize:vertical; min-height:100px}
select{
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--sky) 50%),linear-gradient(135deg,var(--sky) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px; background-repeat:no-repeat;
}
select option{background:#FFFFFF}
.two{display:grid; gap:24px}
@media(min-width:640px){.two{grid-template-columns:1fr 1fr}}
.form-note{color:var(--faint); font-size:.88rem}
fieldset{border:none; margin:0; padding:0}
fieldset legend{font-weight:500; font-size:.97rem; margin-bottom:12px; padding:0}
.checks{display:grid; gap:10px}
@media(min-width:640px){.checks{grid-template-columns:1fr 1fr}}
.checks label{
  display:flex; gap:11px; align-items:flex-start; font-weight:400; font-size:.95rem; color:var(--muted);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:12px 14px;
  cursor:pointer; transition:border-color .2s, background .2s;
}
.checks label:hover{border-color:var(--line)}
.checks input[type=checkbox]{width:17px; height:17px; margin-top:2px; flex:0 0 auto; accent-color:var(--cobalt); cursor:pointer}
.checks label:has(input:checked){border-color:rgba(33,118,212,.5); background:#EEF5FC; color:var(--ink)}
.form-done{
  display:none; margin-top:44px; max-width:760px;
  border:1px solid rgba(33,118,212,.35); border-radius:calc(var(--r) + 4px);
  background:linear-gradient(155deg,#FFFFFF,#E9F2FC); box-shadow:var(--glow);
  padding:44px 38px;
}
.form-done.show{display:block}
.form-done h3{font-size:1.5rem; margin-bottom:14px}
.form-done p{color:var(--muted); max-width:56ch}
.form-done p + p{margin-top:10px}
.form-done .fallback-note{display:none; margin-top:14px; font-weight:600; color:var(--ink)}
.form-done.fallback .fallback-note{display:block}

/* ---------- Bios / photos ---------- */
.bio-grid{display:grid; gap:24px; margin-top:52px}
@media(min-width:860px){.bio-grid{grid-template-columns:1fr 1fr}}
.bio{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:calc(var(--r) + 4px);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--card-shadow);
}
.bio .photo{position:relative; aspect-ratio:4/3.4; overflow:hidden; background:linear-gradient(160deg,#E5EDF7,#F2F6FB)}
.bio .photo img{width:100%; height:100%; object-fit:cover; object-position:center 22%; filter:saturate(.96); transition:transform .8s var(--ease)}
.bio:hover .photo img{transform:scale(1.035)}
.bio .photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 72%,rgba(16,42,80,.14))}
.bio .body{padding:34px 32px 38px}
.bio .role{color:var(--sky); font-weight:600; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase}
.bio h3{font-size:1.7rem; margin:10px 0 16px}
.bio p{color:var(--muted); font-size:1rem}
.bio p + p{margin-top:12px}
.bio .bignum{font-weight:600; color:var(--ink)}

/* ---------- Final CTA ---------- */
.final{text-align:center; position:relative; overflow:hidden}
.final::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(760px,90vw); height:min(760px,90vw); border-radius:50%;
  background:radial-gradient(circle,rgba(77,184,240,.12),transparent 62%); pointer-events:none;
}
.final h2{margin:0 auto; max-width:22ch}
.final .lede{margin-left:auto; margin-right:auto}
.final .cta-row{margin-top:38px; justify-content:center}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line-soft); padding:64px 0 72px; font-size:.92rem; color:var(--faint); background:var(--bg-2)}
/* Extra end-of-document clearance so a max-scrolled .final heading clears the fixed header (QA July 4) */
@media(min-width:760px){footer.site{padding-bottom:168px}}
/* Anchor jumps (#context, #your-ai-clone, ...) clear the fixed header */
section[id], div[id]{scroll-margin-top:96px}
footer.site .cols{display:grid; gap:36px}
@media(min-width:800px){footer.site .cols{grid-template-columns:1.3fr 1fr 1fr 1fr}}
footer.site h4{color:var(--ink); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; font-weight:600}
footer.site ul{list-style:none}
footer.site li{padding:4px 0}
footer.site a{color:var(--muted); transition:color .2s}
footer.site a:hover{color:var(--ink)}
.tagline{color:var(--muted); margin-top:12px; font-family:var(--serif); font-style:italic; font-size:1.05rem}
.legal{margin-top:44px; padding-top:24px; border-top:1px solid var(--line-soft); font-size:.82rem; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}

/* ---------- Video embeds ---------- */
.video-block{margin-top:40px}
.video-block .vid-title{font-weight:600; font-size:1.08rem; color:var(--ink)}
.video-block .vid-context{color:var(--muted); font-size:.93rem; margin-top:4px; margin-bottom:16px}
.video{position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-soft); box-shadow:var(--card-shadow); background:#0B1322}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- Featured strip ---------- */
.featured{padding:24px 0; border-bottom:1px solid var(--line-soft); background:var(--bg-2)}
.featured .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 36px}
.featured .label{font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--faint)}
.featured .name{font-family:var(--display); font-size:1.02rem; font-weight:500; color:var(--muted); white-space:nowrap}

/* ---------- Build portfolio (before / after) ---------- */
.build-card .who-line{font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sky); margin-bottom:4px}
.ba-label{font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-top:24px; margin-bottom:8px}
.ba-label.after{color:#0F8A55}
.build-card p{line-height:1.6}
.build-card .ba-quote{font-family:var(--serif); font-style:italic; color:var(--muted)}
.build-card .ba-quote:last-child{margin-top:24px}

/* ---------- Demo showcase rail (swipeable workspace mocks) ---------- */
.rail-note{margin-top:14px; color:var(--faint); font-size:.9rem}
.demo-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(86vw,700px); gap:20px;
  margin-top:40px; padding:4px 4px 22px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(16,42,80,.25) transparent;
}
.demo-rail::-webkit-scrollbar{height:8px}
.demo-rail::-webkit-scrollbar-track{background:transparent}
.demo-rail::-webkit-scrollbar-thumb{background:rgba(16,42,80,.2); border-radius:999px}
.demo-rail > .ws-mock{scroll-snap-align:start; min-width:0}
@media(min-width:920px){
  /* two flagship builds side by side; no horizontal scroll on desktop */
  .demo-rail{
    grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;
    overflow-x:visible; scroll-snap-type:none; padding-bottom:4px;
  }
  .demo-rail > .ws-mock{display:flex; flex-direction:column}
  .demo-rail > .ws-mock .ws-body{flex:1}
  .rail-note{display:none}
}

/* ---------- Story card (the human moment) ---------- */
.story-card{
  margin-top:52px; border-radius:calc(var(--r) + 6px); border:1px solid rgba(201,123,74,.3);
  background:linear-gradient(150deg,#FFFFFF 0%,#FBEEE3 100%);
  padding:48px 40px; box-shadow:var(--card-shadow); position:relative; overflow:hidden;
}
@media(min-width:900px){.story-card{padding:60px 56px}}
.story-card::after{content:""; position:absolute; top:-50%; right:-15%; width:55%; height:200%;
  background:radial-gradient(circle,rgba(201,123,74,.1),transparent 60%); pointer-events:none}
.story-card .tale{font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,2.5vw,1.65rem); line-height:1.55; color:var(--ink); max-width:46ch; position:relative; z-index:1}
.story-card .point{margin-top:20px; font-weight:600; color:var(--ink); position:relative; z-index:1}

/* ---------- Revenue math figs ---------- */
.rev-figs{display:grid; gap:14px; margin-top:36px}
@media(min-width:800px){.rev-figs{grid-template-columns:repeat(3,1fr)}}
.rev-figs .fig{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:22px 24px;
  box-shadow:var(--card-shadow);
}
.rev-figs .fig b{
  display:block; font-family:var(--display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:600;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(201,123,74,.4));
}
.rev-figs .fig span{color:var(--muted); font-size:.92rem}
/* The animated-counter span nested in <b> must match its parent, not the
   description-span rule above: same size, same copper gradient. */
.rev-figs .fig b span{
  font-size:inherit; font-family:inherit; font-weight:inherit; letter-spacing:inherit;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Inline artwork ---------- */
.art-block{text-align:center}
.art-block img{margin:0 auto; height:auto}
/* Treated photographs (founder's images): rounded, with a feathered radial vignette
   so the soft-focus photos read as intentional atmosphere, not pasted rectangles. */
.art-photo{
  border-radius:var(--r);
  /* interior (incl. in-image captions) stays near full opacity; only the outer
     ~15% feathers away so the photo melts into the page instead of sitting on it */
  -webkit-mask-image:radial-gradient(64% 64% at 50% 50%, #000 48%, rgba(0,0,0,.92) 66%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.12) 94%, transparent 100%);
          mask-image:radial-gradient(64% 64% at 50% 50%, #000 48%, rgba(0,0,0,.92) 66%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.12) 94%, transparent 100%);
}
/* A single workspace mock placed inside a product page section */
.ws-solo{margin:56px auto 0; max-width:880px}
.art-caption{
  display:block; margin-top:18px;
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--human);
}
.origin-grid{display:grid; gap:52px; align-items:center}
@media(min-width:920px){.origin-grid{grid-template-columns:minmax(0,1fr) 380px; gap:72px}}

/* ---------- A11y & motion ---------- */
:focus-visible{outline:2px solid var(--sky); outline-offset:3px; border-radius:4px}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100; background:var(--bg); color:var(--ink);
  padding:12px 18px; border-radius:0 0 12px 0;
}
.skip:focus{left:0}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
  .rise,.reveal{opacity:1 !important; transform:none !important}
  .marquee .rail{animation:none !important; flex-wrap:wrap; width:auto}
}

/* ---------- Cinematic scroll stages (engine: scrollscrub.js) ----------
   Full-screen, scroll-driven sequences, Apple-product-page style. A stage is
   a tall wrapper (data-scrub="pin", height from data-pin in vh); its sticky
   child fills the viewport while the visitor scrolls through, and every rule
   below reads var(--scrub, 1): 0 = resting, 1 = fully arrived. The default
   of 1 means no-JS, reduced motion, data-saver, and print all rest on the
   finished artwork with the final copy visible. */
.scrub-stage{position:relative; padding:0}
.hero-stage{height:200vh}
.hands-stage{height:200vh}
/* Still stages: the same full-bleed hero, no pin and no frames - the page
   scrolls straight through. No [data-scrub] means --scrub rests at 1. */
.still-stage{height:100vh; height:100svh}
/* A stage whose animation is unavailable collapses to one viewport: no dead pin. */
.scrub-stage.no-anim{height:100vh; height:100svh}
.stage-sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.stage-media{
  position:absolute; inset:0;
  /* top + bottom feather so the artwork melts into the nav above and the section below */
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 86%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 86%, transparent 100%);
}
.stage-media img, .stage-media .frames-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--stage-pos, 50% 50%);
}
.frames-canvas{opacity:0; transition:opacity .45s var(--ease)}
.frames-ready .frames-canvas{opacity:1}

/* The layer is a flex column with nav-clearing padding, so stage content can
   never ride up under the fixed nav, even in short windows. */
.stage-layer{
  position:relative; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(88px,12vh,140px); padding-bottom:clamp(24px,5vh,56px);
}

/* Copy beats: each fades in and out inside its own window of the scroll
   (--in / --out as scrub fractions). At --scrub 1 the windows have closed,
   so fallback states show only the final block. */
.stage-beat{
  position:absolute; top:50%; transform:translateY(-50%);
  max-width:15ch;
  font-family:var(--display); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(2.1rem,4.8vw,3.7rem); line-height:1.08; color:var(--ink);
  pointer-events:none;
  opacity:clamp(0, min(calc((var(--scrub,1) - var(--in,0))*7), calc((var(--out,9) - var(--scrub,1))*7)), 1);
}
/* The headline block: present from the first pixel and stays put while the
   artwork ignites beside it. Sits in flex flow, so on short screens the type
   scale below shrinks it instead of letting it slide under the nav. */
.stage-static{max-width:620px}
.stage-static h1{font-size:clamp(2rem, min(6.2vw, 7.4vh), 4.6rem)}
.stage-static .sub{margin-top:24px; font-size:1.16rem; color:var(--muted); max-width:54ch}
.stage-static .cta-row{margin-top:38px}
@media(max-height:760px){
  .stage-static .sub{margin-top:14px}
  .stage-static .cta-row{margin-top:20px}
  .stage-static .cta-note{margin-top:8px}
}

/* Two Hands stage: the line lands centered beneath the starburst. */
.hands-stage .stage-beat{
  left:0; right:0; top:auto; bottom:12%; transform:none;
  margin:0 auto; max-width:24ch; text-align:center;
  font-size:clamp(1.7rem,3.6vw,2.9rem);
}
.hands-stage .stage-beat .human-voice{display:block}

@media(max-width:700px){
  .stage-beat{max-width:13ch}
  .stage-layer{justify-content:flex-end}
  .stage-static h1{font-size:clamp(2rem,8.4vw,2.6rem)}
  .hands-stage .stage-beat{bottom:16%}
}

/* Busy-hero helper: a soft light sweep behind the text side so headlines stay
   legible over photographic crowds. Applied per-page via .stage-scrim-left. */
.stage-media.stage-scrim-left::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(247,249,252,.94) 0%, rgba(247,249,252,.82) 34%, rgba(247,249,252,.35) 52%, transparent 68%);
}
/* Mobile art direction: a per-page small-screen crop (--stage-pos-sm) plus an
   optional bottom fade (.stage-fade-b) so bottom-anchored copy stays legible
   over photographic heroes on phones. */
@media(max-width:700px){
  .stage-media img, .stage-media .frames-canvas{object-position:var(--stage-pos-sm, var(--stage-pos, 50% 50%))}
  .stage-media.stage-fade-b::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, transparent 30%, rgba(247,249,252,.5) 56%, rgba(247,249,252,.94) 80%, #F7F9FC 100%);
  }
}

/* ---------- Platform-agnostic strip (site-wide, above footer) ---------- */
.platform-strip{border-top:1px solid var(--line-soft); background:var(--surface); padding:30px 0}
.platform-strip .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 26px; text-align:center}
.platform-strip .label{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--faint); white-space:nowrap}
.platform-strip p{margin:0; color:var(--muted); font-size:.94rem; line-height:1.6; max-width:62ch}
.platform-strip .pf{font-weight:700; color:var(--ink); white-space:nowrap}
.platform-strip .pf svg{vertical-align:-1px; margin-right:5px}
.platform-strip .pf-claude{color:#C6613F}

/* ---------- Buy box (shared: operator + coaches) ---------- */
.buy{
  margin-top:52px; text-align:center; padding:56px 36px; border-radius:calc(var(--r) + 6px);
  border:1px solid rgba(33,118,212,.35); box-shadow:var(--glow);
  background:linear-gradient(160deg,#FFFFFF 0%,#E9F2FC 100%);
}
.buy .price-big{font-family:var(--display); font-size:clamp(2.6rem,6vw,3.6rem); font-weight:600; margin:8px 0 4px}
.buy .vip-note{color:var(--sky); font-weight:600; font-size:.95rem; margin-top:10px}
.buy .sub{color:var(--muted); margin-top:12px}
.buy .cta-row{justify-content:center; margin-top:30px}
.buy .offer-stack{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-top:18px}
.buy .offer-stack span{font-size:.9rem; font-weight:600; color:var(--ink)}
.buy .offer-stack span::before{content:"\2713\00a0"; color:var(--cobalt); font-weight:700}
.buy .cap-note{margin-top:14px; font-size:.9rem; color:var(--human); font-weight:600}

/* Anchor targets clear the fixed nav */
#buy, #book, #demos, #monday, #one-day, #inside, #calculator{scroll-margin-top:92px}

/* Pricing pillars: product names are the headline of each card (Daniel 7/8) */
#plans .price-card h3{
  font-size:clamp(1.7rem, 2.8vw, 2.2rem); font-weight:600; line-height:1.12;
  color:var(--human); margin-top:8px;
}

/* ---------- Process flow: the canonical how-it-works visual (7/8) ----------
   Numbered copper nodes on a connecting line, one short line per step, a time
   chip where time is the point. Same component on index, operator, coaches,
   partnerships, and apply so the process reads identically everywhere. */
.process-flow{margin-top:44px; display:grid; gap:22px; counter-reset:pstep}
@media(min-width:860px){.process-flow{grid-template-columns:repeat(4,1fr); gap:20px}
  .process-flow.cols3{grid-template-columns:repeat(3,1fr)}}
.pstep{position:relative; padding:0 4px}
.pstep .pnum{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; font-size:1.2rem; color:#fff;
  background:var(--gold-grad); box-shadow:0 4px 14px rgba(201,123,74,.35);
  position:relative; z-index:1;
}
@media(min-width:860px){
  .pstep:not(:last-child)::before{
    content:""; position:absolute; top:23px; left:56px; right:-14px; height:2px;
    background:linear-gradient(90deg, rgba(201,123,74,.45), rgba(201,123,74,.12));
  }
}
@media(max-width:859px){
  .pstep{display:grid; grid-template-columns:46px 1fr; column-gap:16px}
  .pstep .pnum{grid-row:1 / span 3}
  .pstep h3, .pstep .ptime, .pstep p{grid-column:2}
  .pstep:not(:last-child)::before{
    content:""; position:absolute; top:50px; bottom:-22px; left:22px; width:2px;
    background:linear-gradient(180deg, rgba(201,123,74,.4), rgba(201,123,74,.1));
  }
}
.pstep h3{margin-top:14px; font-size:1.18rem; color:var(--ink)}
@media(max-width:859px){.pstep h3{margin-top:2px}}
.pstep .ptime{
  display:inline-block; justify-self:start; margin-top:7px; font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--human);
  background:rgba(201,123,74,.09); border-radius:999px; padding:3px 10px;
}
.pstep p{margin-top:9px; font-size:.92rem; color:var(--muted); line-height:1.55}
.process-note{
  margin-top:38px; max-width:820px; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--human);
  border-radius:var(--r-sm); padding:20px 24px; box-shadow:var(--card-shadow);
}
.process-note p{color:var(--muted); line-height:1.6}
.process-note strong{color:var(--ink)}
.process-alt{margin-top:56px; padding-top:36px; border-top:1px dashed var(--line)}
.process-alt .alt-label{font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--indigo); margin-bottom:4px; display:inline-block}