@font-face{font-family:Muoto;src:url(fonts/muoto-light.woff);font-weight:300;font-style:normal}
@font-face{font-family:Muoto;src:url(fonts/muoto-regular.woff);font-weight:400;font-style:normal}
@font-face{font-family:Muoto;src:url(fonts/muoto-medium.woff);font-weight:500;font-style:normal}
@font-face{font-family:Muoto;src:url(fonts/muoto-bold.woff);font-weight:600;font-style:normal}

@font-face{font-family:'OrigamiBats';src:url(fonts/origamibats.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url(fonts/caveat.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Pencil';src:url(fonts/architects-daughter.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
.ori{font-family:'OrigamiBats',sans-serif;font-weight:400;font-style:normal;display:inline-block;opacity:.35;margin:0 .1em;vertical-align:baseline;font-size:1.1em;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
body,html{
  font-family:Muoto,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  color:#efece6;background:#000;font-size:16px;
  overflow-anchor:none;
  transition:background-color .5s ease;
}
/* SCROLL-DRIVEN THEME SWITCH — entire viewport flips when scroll enters the
   diff/speed light interlude. Sections that border it (proof above, sticky
   below) flip too via body.theme-light overrides. */
body.theme-light{background:#f1ebdc;}
body.theme-light .section-cream,
body.theme-light .sticky-section{background:#f1ebdc;transition:background-color .5s ease;}
body.theme-light .section-cream h2,
body.theme-light .sticky-section .sticky-panel h2{color:#1d1d1f;transition:color .5s ease;}
body.theme-light .section-cream p,
body.theme-light .sticky-section .sticky-panel p{color:rgba(0,0,0,.6);transition:color .5s ease;}
body.theme-light .stat-num{color:#1d1d1f;transition:color .5s ease;}
body.theme-light .stat-desc{color:rgba(0,0,0,.45);transition:color .5s ease;}
body.theme-light .feature-grid-cream .feature-info h4{color:#1d1d1f;transition:color .5s ease;}
body.theme-light .feature-grid-cream .feature-info p{color:rgba(0,0,0,.5);transition:color .5s ease;}
body.theme-light .sticky-section [data-sticky-eyebrow]{color:rgba(0,0,0,.4) !important;transition:color .5s ease;}
/* All h2 default text-color (set globally to cream) flips in light mode for the affected sections */
body.theme-light .section-cream h2,
body.theme-light .sticky-section h2{color:#1d1d1f;}

/* Results section stays dark — hard line boundary with services-cream above
   (no body theme override = solid bg, no transition) */

/* Smooth color transitions on any text inside affected sections that isn't otherwise specified */
.section-cream h2,.section-cream p,.stat-num,.stat-desc,
.feature-grid-cream .feature-info h4,.feature-grid-cream .feature-info p,
.sticky-section h2,.sticky-section .sticky-panel h2,.sticky-section .sticky-panel p,
.section-cream,.sticky-section,.section-results,
.case-quote,.case-attr,.case-stat span,.case-stat-label,
.result-card,.result-card-tag,.result-card-logo,.result-card-headline,
.result-card-body,.result-card-meta{
  transition:background-color .5s ease,color .5s ease,border-color .5s ease,filter .5s ease;
}
body,h1,h2,h3,h4,h5,h6,html,input,p,small,strong{padding:0;margin:0}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ============== TYPE SCALE (single source of truth) ==============
   Every section uses these. Don't override sizes/weights inline — if a
   section needs custom emphasis, layer color/opacity, not a different scale. */
h1{font-size:clamp(44px,6.6vw,84px);font-weight:300;line-height:1.06em;letter-spacing:-.04em;color:#efece6;}
h2{font-size:clamp(36px,5.4vw,72px);font-weight:300;line-height:1.08em;letter-spacing:-.035em;color:#efece6;}
h3{font-size:clamp(28px,3.6vw,44px);font-weight:300;line-height:1.18em;letter-spacing:-.02em;color:#efece6;}
h5{font-size:clamp(15px,1.4vw,18px);font-weight:400;line-height:1.4em;color:#efece6;}
p{color:#bfbcb7;font-weight:300;line-height:1.62em;font-size:15.5px;}

/* Universal eyebrow — every section uses this exact treatment, period. */
.eyebrow,
[data-eyebrow]{
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  display:inline-block;
}
.section-cream .eyebrow,
.section-discovery .eyebrow,
.section-services-cream .eyebrow,
.sticky-section .eyebrow,
.section-diff .eyebrow,
.section-speed .eyebrow,
body.theme-light .eyebrow{color:rgba(0,0,0,.4);}

/* Inverted (cream bg) */
[invert]{color:#1a1a1a}
h1[invert],h2[invert],h3[invert]{color:#1a1a1a}
p[invert]{color:#8e8c87}

/* ================================================================
   FLOATING FOOTER NAV
   ================================================================ */
/* FLOATING NAV — frozen dark glass, square-ish with 16px corners to match the
   mega menu's 24px geometry. Same opacity + blur as menu so they read as one
   continuous material when menu opens above the bar.
   overflow:visible so dock icons can magnify above the bar (the children that
   need clipping — radial fill, sheen — handle their own border-radius). */
.footer-nav{
  position:fixed;bottom:1rem;left:1rem;right:1rem;
  z-index:90;margin:0 auto;
  max-width:calc(1200px + 8em);
  border-radius:16px;
  background:rgba(8,8,10,.62);
  -webkit-backdrop-filter:blur(48px) saturate(1.6);
          backdrop-filter:blur(48px) saturate(1.6);
  border:1px solid rgba(255,255,255,.07);
  overflow:visible;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 -8px 50px rgba(0,0,0,.4),
    0 6px 22px rgba(0,0,0,.32);
  transition:
    border-color .4s ease,
    box-shadow .4s ease,
    background .4s ease;
}
.footer-nav:hover{
  border-color:rgba(255,255,255,.12);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 -10px 60px rgba(0,0,0,.5),
    0 8px 28px rgba(0,0,0,.35);
}
/* Three.js animated caustics layer — sits behind the nav, blurred through it.
   Whisper subtle so it doesn't break the uniform frosted-glass look. */
#nav-glass-fx{
  position:fixed;z-index:89;pointer-events:none;
  border-radius:16px;
  opacity:.12;
  mix-blend-mode:screen;
}
/* START MODAL — Mac-app-style pop from the Start button */
.start-modal{
  position:fixed;inset:0;z-index:200;
  display:none;
  pointer-events:none;
}
.start-modal.open{display:block;pointer-events:auto;}
.start-modal-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(20px) saturate(.9);
          backdrop-filter:blur(20px) saturate(.9);
  opacity:0;
  transition:opacity .4s ease;
  cursor:pointer;
}
.start-modal.open .start-modal-overlay{opacity:1;}
.start-modal.closing .start-modal-overlay{opacity:0;transition:opacity .42s ease;}
.start-modal-positioner{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(840px,92vw);
}
/* Inner is driven entirely by JS via inline transform/opacity for the
   FLIP morph from the nav bar. CSS just sets the visual chrome. */
.start-modal-inner{
  position:relative;
  background:rgba(20,22,30,.88);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 12px 32px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
  -webkit-backdrop-filter:blur(40px) saturate(1.6);
          backdrop-filter:blur(40px) saturate(1.6);
  opacity:0;
  will-change:transform,opacity,border-radius;
}
.start-modal.open .start-modal-inner{opacity:1;}
.start-modal-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;
  background:transparent;border:none;
  color:rgba(239,236,230,.55);
  cursor:pointer;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, color .2s ease;
  z-index:2;
}
.start-modal-close:hover{
  background:rgba(255,255,255,.08);
  color:#efece6;
}
.start-modal-close svg{width:16px;height:16px;}

.start-modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:460px;
}
.start-modal-quote{
  padding:48px 40px;
  background:linear-gradient(135deg,rgba(115,75,242,.16),rgba(115,75,242,.04));
  border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;justify-content:center;
}
.quote-eyebrow{
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(174,150,255,.85);
  margin-bottom:24px;
}
.start-modal-quote blockquote{
  font-family:Muoto,sans-serif;
  font-size:clamp(20px,1.9vw,26px);
  font-weight:300;
  color:#efece6;
  line-height:1.4;
  letter-spacing:-.015em;
  margin:0 0 28px;
}
.quote-attr-name{
  font-family:Muoto,sans-serif;
  font-size:14px;font-weight:500;color:#efece6;
}
.quote-attr-role{
  font-size:12px;color:rgba(239,236,230,.55);margin-top:2px;
}

.start-modal-form-wrap{
  padding:48px 40px;
  display:flex;flex-direction:column;justify-content:center;
}
.start-modal-form-wrap h3{
  font-family:Muoto,sans-serif;
  font-size:clamp(26px,2.4vw,34px);
  font-weight:400;color:#efece6;
  letter-spacing:-.025em;line-height:1.1;
  margin:0 0 8px;
}
.start-modal-form-wrap p{
  font-size:13px;
  color:rgba(239,236,230,.55);
  margin:0 0 28px;
  line-height:1.5;
}
.start-modal-form{
  display:flex;flex-direction:column;gap:14px;
}
.form-row{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.form-field{
  display:flex;flex-direction:column;gap:6px;
}
.form-field span{
  font-size:10px;font-weight:600;
  color:rgba(239,236,230,.5);
  letter-spacing:.1em;text-transform:uppercase;
}
.form-field input{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:11px 14px;
  font-size:14px;color:#efece6;
  font-family:inherit;
  transition:border-color .25s ease, background .25s ease;
}
.form-field input:focus{
  outline:none;
  border-color:rgba(147,118,255,.55);
  background:rgba(255,255,255,.06);
}
.form-submit{
  background:linear-gradient(135deg,#9376ff 0%,#734bf2 100%);
  color:#fff;border:none;
  padding:13px 22px;
  border-radius:10px;
  font-size:14px;font-weight:500;
  font-family:inherit;cursor:pointer;
  margin-top:8px;
  box-shadow:
    0 4px 16px rgba(115,75,242,.4),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .25s ease, box-shadow .25s ease;
}
.form-submit:hover{
  transform:translateY(-1px);
  box-shadow:
    0 8px 26px rgba(115,75,242,.55),
    inset 0 1px 0 rgba(255,255,255,.3);
}

@media(max-width:720px){
  .start-modal-grid{grid-template-columns:1fr;min-height:0;}
  .start-modal-quote{padding:32px 28px 28px;border-right:none;border-bottom:1px solid rgba(255,255,255,.07);}
  .start-modal-form-wrap{padding:28px;}
}

/* Backdrop dim+blur — appears when any mega menu is open */
.nav-backdrop{
  position:fixed;inset:0;
  z-index:88;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(10px) saturate(.9);
          backdrop-filter:blur(10px) saturate(.9);
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease, backdrop-filter .35s ease;
}
body.menu-open .nav-backdrop{
  opacity:1;visibility:visible;
  pointer-events:auto;
}
.footer-nav-inner{
  position:relative;display:flex;justify-content:space-between;align-items:center;
  width:100%;
  padding:8px 14px;
  /* No glass here — the outer .footer-nav has it. This is just layout */
  background:transparent;
}
/* Liquid-glass refraction sheen — soft light-catch across the surface */
.footer-nav::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 70% 100% at 25% 0%, rgba(255,255,255,.09), transparent 55%),
    radial-gradient(ellipse 50% 90% at 75% 100%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.02) 100%);
  opacity:.9;
  transition:opacity .4s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.footer-nav:hover::before{
  opacity:1;
  transform:translateX(4%);
}
/* All bar content sits above the sheen overlay */
.footer-nav-inner{position:relative;z-index:2;}

/* Clipped layer for purple charge fill + sweeping shimmer. Keeps the parent's
   overflow:visible (so dock icons can magnify above the bar) while ensuring the
   purple effects stay strictly inside the nav-bar shape. */
.nav-fx-clip{
  position:absolute;inset:0;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

/* "BATTERY CHARGE" — fill expands from right (Start button) to left like a
   battery filling, with sweeping shimmer scan. */
.nav-charge-fill{
  position:absolute;inset:0;
  background:radial-gradient(
    circle at 95% 50%,
    #ba9cff 0%,#9376ff 25%,#734bf2 65%,#5f37de 100%
  );
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:100% 50%;
  opacity:0;
  transition:
    transform .9s cubic-bezier(.16,1,.3,1),
    opacity .3s ease;
}
.footer-nav:has(.footer-start:hover) .nav-charge-fill,
.footer-nav.charging .nav-charge-fill{
  transform:scaleX(1);
  opacity:1;
}

/* Sweeping shimmer — sits inside the clipped layer so its translateX(400%)
   sweep is masked at the nav's right edge instead of bleeding into the page. */
.nav-shimmer{
  position:absolute;top:0;bottom:0;left:0;
  width:30%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.55) 50%,
    transparent 100%
  );
  filter:blur(6px);
  transform:translateX(-100%);
  pointer-events:none;
  opacity:0;
}
.footer-nav:has(.footer-start:hover) .nav-shimmer,
.footer-nav.charging .nav-shimmer{
  opacity:1;
  animation:nav-shimmer 1.6s linear .35s infinite;
}
@keyframes nav-shimmer{
  0%{transform:translateX(-30%);}
  100%{transform:translateX(400%);}
}

/* Whole nav border tightens + a tight inner glow during charge — outer glow is
   intentionally minimal so the purple light doesn't bleed into the page. */
.footer-nav:has(.footer-start:hover),
.footer-nav.charging{
  border-color:rgba(255,255,255,.32);
  animation:nav-pulse 1.6s ease-in-out infinite;
}
@keyframes nav-pulse{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.35),
      inset 0 0 24px rgba(174,150,255,.18),
      0 8px 26px rgba(0,0,0,.36);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 0 32px rgba(174,150,255,.32),
      0 12px 32px rgba(0,0,0,.44);
  }
}

.footer-nav:has(.footer-start:hover) .footer-start,
.footer-nav.charging .footer-start{
  background:transparent !important;
  color:#fff !important;
  font-weight:600;
  box-shadow:none !important;
  text-shadow:0 0 12px rgba(255,255,255,.5);
}

.footer-nav:has(.footer-start:hover) .footer-tab,
.footer-nav:has(.footer-start:hover) .footer-right a:not(.footer-start),
.footer-nav:has(.footer-start:hover) .footer-logo,
.footer-nav:has(.footer-start:hover) .footer-divider,
.footer-nav.charging .footer-tab,
.footer-nav.charging .footer-right a:not(.footer-start),
.footer-nav.charging .footer-logo,
.footer-nav.charging .footer-divider{
  opacity:.35;
  transition:opacity .5s ease;
}
.footer-left{display:flex;align-items:center;gap:8px;}
.footer-logo{display:flex;align-items:center;gap:7px;padding:8px 8px 8px 12px;}
.footer-logo-icon{position:relative;width:24px;height:24px;}
.footer-logo-icon svg{width:24px;height:24px;}
.footer-wordmark{font-size:13.75px;font-weight:500;letter-spacing:-.02em;color:#efece6;}
.footer-divider{width:0;height:20px;border:1px solid rgba(255,255,255,.18);border-radius:3px;margin:0 8px;}
/* Dock-style icons — no housing, organic magnification on cursor proximity */
.footer-tab{
  width:34px;height:34px;display:flex;justify-content:center;align-items:center;
  background:transparent;border:none;border-radius:0;
  cursor:pointer;
  color:rgba(239,236,230,.55);
  transform-origin:center bottom;
  transition:color .3s ease, transform .25s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.footer-tab:hover{color:#efece6;}
.footer-tab.selected{color:#efece6;}
/* Glowing dot under the active section's icon — like macOS dock indicator */
.footer-tab.selected::after{
  content:'';
  position:absolute;
  bottom:-6px;left:50%;
  width:4px;height:4px;
  border-radius:50%;
  background:#efece6;
  transform:translateX(-50%);
  box-shadow:0 0 8px rgba(239,236,230,.7);
}
.footer-tab{position:relative;}
a.footer-tab{text-decoration:none;display:flex;}
.footer-tab svg{width:20px;height:20px;display:block;}
.footer-right{display:flex;align-items:center;gap:24px;padding-right:4px;}
.footer-right a{font-size:14px;font-weight:400;color:rgba(239,236,230,.7);transition:color .2s;}
.footer-right a:hover{color:#efece6;}
.footer-start,.footer-right a.footer-start{
  background:#734BF2;color:#fff !important;border:none;border-radius:999px;
  padding:9px 22px;font-size:14px;font-weight:500;
  cursor:pointer;font-family:inherit;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,background .25s ease;
  position:relative;overflow:hidden;
}
.footer-start:hover{
  transform:translateY(-1px);
  background:#8158f5;
  box-shadow:0 6px 24px rgba(115,75,242,.45);
}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  min-height:100vh;
  min-height:100dvh; /* prevents mobile browser-chrome resize jumps */
  background:#000; /* matches the Kling video's pure-black surround so edges blend seamlessly */
  display:flex;flex-direction:column;align-items:center;
  padding:72px 24px 60px;text-align:center;position:relative;overflow:hidden;
  gap:8px;
}
/* Mobile/tablet: hero shrinks to its content so there's no dead space below the
   notebook video. justify-content:flex-start keeps the stack at the top, but
   removing min-height means the section ends right after the video. */
@media(max-width:1024px){
  .hero{
    min-height:0;
    padding:32px 20px 40px;
    justify-content:flex-start;
    gap:6px;
  }
}
@media(max-width:720px){
  .hero{padding:24px 18px 32px;}
}
/* Hero entrance animations */
.hero-header,.hero-pill,.hero-body,.hero-logo-carousel{
  opacity:0;transform:translateY(20px);
  animation:hero-in .8s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-header{animation-delay:.1s;}
.hero-pill{animation-delay:.2s;}
.hero-body{animation-delay:1.8s;}
.hero-logo-carousel{animation-delay:2s;}
/* Hero h1 letter-by-letter */
.hero h1{visibility:hidden;}
.hero h1.revealed{visibility:visible;}
.hero h1 .h1-word{
  display:inline-block;white-space:nowrap;
}
.hero h1 .h1-char{
  display:inline-block;
  opacity:0;transform:translateY(24px);
  animation:char-in .5s cubic-bezier(.16,1,.3,1) forwards;
}
/* Universal headline safety — never break inside a word, balance lines */
h1,h2,h3{
  text-wrap:balance;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}
/* Prevent any descendant from creating horizontal scroll on mobile.
   CRITICAL: must be `overflow-x: clip`, NOT `overflow-x: hidden`. `hidden`
   creates a scroll container which kills `position: sticky` everywhere
   on the page (including the "How we deploy" sticky-left rail). `clip`
   has the same horizontal-overflow guard without breaking sticky. */
html,body{overflow-x:clip;max-width:100%;}
@media(max-width:600px){
  /* Tighten huge desktop H1/H2 clamps on small screens so they fit comfortably */
  h1{font-size:clamp(36px,9vw,56px);}
  h2{font-size:clamp(32px,7.6vw,48px);}
  h3{font-size:clamp(26px,6vw,36px);}
}

/* ======================================================================
   MOBILE / TABLET TOP NAV — replaces the Apple-dock footer-nav on small
   screens. Hidden by default; revealed at <= 1024px. The footer-nav itself
   is hidden at the same breakpoint via the nav-mobile-active rule below.
   ====================================================================== */
.mobile-nav{
  display:none;
  position:fixed;top:0;left:0;right:0;z-index:120;
  padding:14px 20px;
  background:rgba(8,8,10,.78);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
          backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mobile-nav-bar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1200px;margin:0 auto;
}
.mobile-nav-logo img{height:20px;width:auto;filter:brightness(0) invert(1);display:block;}
.mobile-nav-cta{
  display:none;
  padding:8px 14px;border-radius:999px;
  background:#fff;color:#040503;
  font-size:13px;font-weight:500;
  text-decoration:none;
  margin-right:6px;
}
.mobile-nav-toggle{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  border-radius:10px;
  cursor:pointer;
  color:#efece6;
}
.mobile-nav-toggle svg{width:18px;height:18px;display:block;}
.mobile-nav-toggle .icon-close{display:none;}
body.mnav-open .mobile-nav-toggle .icon-open{display:none;}
body.mnav-open .mobile-nav-toggle .icon-close{display:block;}

.mobile-nav-panel{
  position:fixed;top:0;left:0;right:0;
  z-index:119;
  background:rgba(8,8,10,.96);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
          backdrop-filter:blur(24px) saturate(1.4);
  padding:80px 24px 32px;
  transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  max-height:100vh;max-height:100dvh;overflow-y:auto;
  display:none;
}
body.mnav-open .mobile-nav-panel{
  transform:translateY(0);
  display:block;
}
.mobile-nav-list{
  display:flex;flex-direction:column;gap:0;
  max-width:560px;margin:0 auto;
}
/* Top-level group (Services / Resources / Stories) — expandable accordion */
.mnav-group{
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mnav-group > summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 4px;cursor:pointer;
  font-size:18px;font-weight:500;color:#efece6;
  letter-spacing:-.01em;list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.mnav-group > summary::-webkit-details-marker{display:none;}
.mnav-summary-label{flex:1;}
.mnav-chevron{
  width:18px;height:18px;color:rgba(239,236,230,.5);flex-shrink:0;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.mnav-group[open] > summary .mnav-chevron{transform:rotate(180deg);}
.mnav-sub{
  display:flex;flex-direction:column;
  padding:0 0 16px 4px;
}
.mnav-sub a{
  display:block;
  padding:11px 8px;
  font-size:15px;font-weight:400;color:rgba(239,236,230,.7);
  letter-spacing:-.005em;
  border-radius:8px;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.mnav-sub a:active{background:rgba(255,255,255,.05);}
.mnav-sub a:first-child{
  color:#fff;font-weight:500;
}
/* Top-level direct link (Pricing) — same row treatment as the accordion summaries */
.mnav-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 4px;
  font-size:18px;font-weight:500;color:#efece6;
  letter-spacing:-.01em;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.mnav-chevron-right{transform:none;}
.mobile-nav-list a.mnav-cta{
  display:flex;align-items:center;justify-content:center;
  margin-top:24px;
  background:#fff;color:#040503;
  border-radius:12px;
  padding:18px 22px;
  border-bottom:none;
  font-size:16px;font-weight:500;letter-spacing:-.005em;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.mobile-nav-spacer{height:0;}
@media(max-width:1024px){
  .mobile-nav{display:block;}
  .mobile-nav-spacer{height:62px;}
  .footer-nav{display:none !important;}
  body{padding-bottom:0 !important;}
}
@media(min-width:520px) and (max-width:1024px){
  .mobile-nav-cta{display:inline-flex;}
}
@keyframes char-in{to{opacity:1;transform:translateY(0);}}
.hero-product{
  opacity:0;transform:translateY(60px);
  animation:hero-in 1s cubic-bezier(.16,1,.3,1) .7s forwards;
}
@keyframes hero-in{to{opacity:1;transform:translateY(0);}}
/* Nav entrance animation removed — was conflicting with .charging animation.
   The animation property gets replaced (not extended) when adding new animations,
   which killed the entrance's forwards fill keeping opacity:1. Nav now stays
   visible from page load. */
.hero-header{display:flex;align-items:center;gap:7px;margin-bottom:24px;}
/* Mobile/iPad already shows the Growigami wordmark in the top-left mobile nav,
   so the centered hero logo duplicates the brand. Hide it below the desktop
   breakpoint to keep the hero a single, focused visual. */
@media(max-width:1024px){
  .hero-header{display:none;}
}
.hero-header-icon{width:24px;height:24px;}
.hero-header-icon svg{width:24px;height:24px;}
.hero-header-text{font-size:13.75px;font-weight:500;letter-spacing:-.02em;}

.hero-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
          backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.2);
  font-size:10px;font-weight:500;
  color:rgba(255,255,255,.85);
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:40px;cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.hero-pill:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}
.hero-pill svg{width:8px;height:8px;}
.hero-pill svg path{stroke:rgba(255,255,255,.7);}

.hero h1{max-width:1100px;margin-bottom:16px;}

/* Product mockup - cropped from bottom */
.hero-product{
  width:min(1300px,94vw);position:relative;
  max-height:clamp(400px,55vw,680px);overflow:hidden;
}
/* iPad frame */
.ipad-wrap{position:relative;width:100%;max-width:1200px;margin:0 auto;}
.ipad-frame-img{width:100%;display:block;position:relative;z-index:2;pointer-events:none;}
.ipad-screen{
  position:absolute;top:3.8%;left:3.2%;right:3.2%;bottom:3.8%;
  z-index:1;overflow:hidden;border-radius:2.5%;background:#f5f5f7;
}
.ie-app-scaler{
  width:1200px;height:800px;
  transform-origin:top left;
  position:absolute;top:0;left:0;
}
/* iPad app — Apple-style light mode, clean and spacious */
.ie-app{
  width:1200px;height:100%;background:#f5f5f7;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',Muoto,sans-serif;
  display:flex;
  color:#1d1d1f;
}
/* Sidebar */
.ie-sidebar{
  width:80px;background:#ffffff;
  border-right:1px solid rgba(0,0,0,0.05);
  display:flex;flex-direction:column;align-items:center;
  padding:24px 6px 16px 18px;gap:6px;

}
.ie-sb-icon{
  width:51px;height:51px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;
}
.ie-sb-icon:hover{background:rgba(0,0,0,0.03);}
.ie-sb-icon.active{background:rgba(0,0,0,0.05);}
.ie-sb-icon svg{width:25px;height:25px;}
.ie-sb-sep{width:20px;height:1px;background:rgba(0,0,0,0.05);margin:6px 0;}

/* Main */
.ie-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#f5f5f7;}

/* Top bar */
.ie-topbar{
  height:60px;background:#f5f5f7;
  border-bottom:1px solid rgba(0,0,0,0.05);
  display:flex;align-items:flex-end;
  padding:0 24px 12px 18px;gap:10px;flex-shrink:0;
}
.ie-topbar-title{font-size:16px;font-weight:600;color:#1d1d1f;letter-spacing:-.01em;}
.ie-topbar-breadcrumb{font-size:11px;color:rgba(0,0,0,0.2);font-weight:400;}
.ie-topbar-spacer{flex:1;}
.ie-topbar-seq{display:flex;align-items:center;gap:0;}
.ie-seq-dot{width:11px;height:11px;border-radius:50%;background:rgba(0,0,0,0.06);}
.ie-seq-dot.on{background:#34c759;}
.ie-seq-line{width:30px;height:1.5px;background:rgba(0,0,0,0.04);}
.ie-seq-line.on{background:rgba(52,199,89,0.25);}
.ie-topbar-label{font-size:12px;color:rgba(0,0,0,0.2);margin-left:12px;font-weight:400;}

/* Content */
.ie-content{flex:1;display:flex;overflow:hidden;padding:12px 24px 12px 12px;gap:13px;}

/* Email panel */
.ie-email-panel{
  flex:1.3;background:#fff;border-radius:13px;
  box-shadow:0 0 0 0.5px rgba(0,0,0,0.06),0 1px 4px rgba(0,0,0,0.03);
  display:flex;flex-direction:column;overflow:hidden;
}
.ie-ep-header{padding:19px 22px 14px;border-bottom:1px solid rgba(0,0,0,0.05);}
.ie-ep-row{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.ie-ep-label{font-size:13px;color:rgba(0,0,0,0.25);width:56px;flex-shrink:0;font-weight:400;}
.ie-ep-value{font-size:14px;color:rgba(0,0,0,0.55);font-weight:400;}
.ie-ep-value.strong{color:#1d1d1f;font-weight:500;}
.ie-ep-body{
  flex:1;padding:22px;text-align:left;
  font-size:17px;font-weight:400;color:rgba(0,0,0,0.6);
  line-height:1.65;overflow:hidden;
  position:relative;
}
.ie-ep-header,.ie-ep-footer,.ie-intel,.ie-intel *{text-align:left;}
.ie-hl{
  background:rgba(52,199,89,0.08);
  border-radius:2px;padding:0 2px;
  transition:background .4s;
}
.ie-hl.glow{
  background:rgba(52,199,89,0.25);
  box-shadow:0 0 8px rgba(52,199,89,0.15);
}
/* Typing cursor */
.ie-cursor{
  display:inline-block;width:2px;height:1em;
  background:#007aff;vertical-align:text-bottom;
  animation:ie-blink 1s step-end infinite;
  margin-left:1px;
}
@keyframes ie-blink{0%,100%{opacity:1;}50%{opacity:0;}}
/* Warm path row glow */
.ie-wp-path{transition:all .4s cubic-bezier(.34,1.56,.64,1);}
.ie-wp-path.glow{
  background:rgba(52,199,89,0.1);
  border-color:rgba(52,199,89,0.3);
  box-shadow:0 0 20px rgba(52,199,89,0.12);
  transform:scale(1.02);
}
/* Inline loading spinner */
.ie-inline-load{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(0,0,0,0.06);
  border-top-color:#34c759;
  animation:ie-spin .5s linear infinite;
  vertical-align:middle;margin-left:2px;
}
@keyframes ie-spin{to{transform:rotate(360deg);}}
.ie-ep-footer{
  padding:14px 22px;
  border-top:1px solid rgba(0,0,0,0.04);
  display:flex;align-items:center;gap:14px;
  min-height:88px;
}
.ie-send{
  background:#007aff;color:#fff;border:none;
  font-size:16px;font-weight:500;padding:10px 28px;
  border-radius:16px;font-family:inherit;cursor:pointer;
  letter-spacing:-.01em;
}
.ie-send-sec{font-size:14px;color:rgba(0,0,0,0.18);font-weight:400;}

/* Contact intel panel — Apple-clean */
.ie-intel{
  flex:1;background:#fff;border-radius:13px;
  box-shadow:0 0 0 0.5px rgba(0,0,0,0.06),0 1px 4px rgba(0,0,0,0.03);
  display:flex;flex-direction:column;padding:20px 20px 0;overflow:hidden;
}
.ie-intel-label{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#007aff;margin-bottom:16px;
}
/* Profile header */
.ie-intel-header{display:flex;align-items:center;gap:16px;margin-bottom:6px;}
.ie-intel-photo{
  width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(0,0,0,0.04);
}
.ie-intel-name{font-size:18px;font-weight:600;color:#1d1d1f;letter-spacing:-.02em;}
.ie-intel-role{font-size:12px;font-weight:400;color:rgba(0,0,0,0.4);margin-top:2px;}
.ie-intel-company{font-size:11px;font-weight:400;color:rgba(0,0,0,0.2);margin-top:1px;}
/* Contact details row */
.ie-contact-details{
  display:flex;gap:14px;margin:12px 0 0;flex-wrap:wrap;
}
.ie-cd{
  font-size:11px;font-weight:400;color:rgba(0,0,0,0.35);
  display:flex;align-items:center;gap:5px;
}
.ie-cd svg{width:14px;height:14px;flex-shrink:0;}
.ie-intel-sep{height:1px;background:rgba(0,0,0,0.05);margin:14px 0;}
/* Warm paths */
.ie-wp-title{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#e8720a;margin-bottom:14px;
}
.ie-wp-path{
  display:flex;align-items:center;
  padding:12px 12px 12px 10px;margin-bottom:8px;
  background:rgba(0,0,0,0.015);border-radius:10px;
  border:1px solid rgba(0,0,0,0.03);
  gap:0;
}
.ie-wp-dot{margin-right:6px;}
.ie-wp-path:first-of-type{
  background:rgba(52,199,89,0.03);border-color:rgba(52,199,89,0.08);
}
.ie-wp-dot{
  width:8px;height:8px;border-radius:50%;
  background:#34c759;flex-shrink:0;
}
.ie-wp-path-left{
  flex:1;display:flex;flex-direction:column;min-width:0;
}
.ie-wp-text{font-size:14px;font-weight:600;color:rgba(0,0,0,0.65);}
.ie-wp-sub{font-size:11px;font-weight:400;color:rgba(0,0,0,0.3);margin-top:2px;}
/* Divider between left and intro */
.ie-wp-arrow{
  font-size:12px;color:rgba(0,0,0,0.1);flex-shrink:0;
}
/* Introducer — photo on far right */
.ie-wp-intro{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  flex-direction:row-reverse;
}
.ie-wp-intro-photo{
  width:32px;height:32px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(0,0,0,0.04);
}
.ie-wp-intro-name{font-size:12px;font-weight:500;color:rgba(0,0,0,0.55);text-align:left;}
.ie-wp-intro-role{font-size:10px;font-weight:400;color:rgba(0,0,0,0.25);margin-top:1px;text-align:left;}
/* Footer */
.ie-intel-footer{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-top:1px solid rgba(0,0,0,0.05);
  min-height:64px;
}
.ie-match-score{font-size:40px;font-weight:300;color:#34c759;letter-spacing:-.03em;line-height:1;}
.ie-match-label{font-size:10px;color:rgba(0,0,0,0.15);font-weight:400;margin-top:3px;}
.ie-paths-badge{
  font-size:13px;font-weight:500;color:rgba(0,0,0,0.2);
  background:rgba(0,0,0,0.03);
  padding:8px 16px;border-radius:10px;
}
.hero-product-bar{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.hp-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.06);}
.hp-spacer{flex:1;}
.hp-url{font-size:12px;color:rgba(255,255,255,.15);font-weight:400;}
.hp-actions-bar{display:flex;gap:8px;margin-left:auto;}
.hp-suggestions{font-size:12px;color:rgba(255,255,255,.2);cursor:pointer;}

.hero-product-body{padding:32px 40px;min-height:380px;}
.hp-nav{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
.hp-nav-logo{width:16px;height:16px;border-radius:3px;border:1px solid rgba(255,255,255,.1);}
.hp-nav-text{font-size:12px;color:rgba(255,255,255,.2);font-weight:500;letter-spacing:-.01em;}
.hp-breadcrumb{font-size:12px;color:rgba(255,255,255,.12);margin-bottom:4px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;}
.hp-welcome{font-size:14px;color:rgba(255,255,255,.4);margin-bottom:24px;}

.hp-content{display:flex;gap:40px;}
.hp-main{flex:1.2;}
.hp-sidebar{flex:1;}

.hp-label{font-size:12px;font-weight:500;color:rgba(255,255,255,.2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.hp-balance{font-size:clamp(24px,4vw,32px);font-weight:300;color:#efece6;margin-bottom:4px;}
.hp-balance span{color:rgba(255,255,255,.3);font-weight:300;}
.hp-sub-balance{font-size:14px;color:rgba(255,255,255,.15);margin-bottom:24px;}
.hp-btns{display:flex;gap:8px;}
.hp-btn{
  padding:8px 20px;border-radius:8px;font-size:13px;font-weight:500;
  border:1px solid rgba(255,255,255,.1);background:transparent;color:#efece6;
  cursor:pointer;font-family:inherit;
}
.hp-btn.primary{background:#efece6;color:#040503;border-color:#efece6;}

.hp-detail-title{font-size:14px;font-weight:500;color:#efece6;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.hp-detail-row{display:flex;justify-content:space-between;margin-bottom:8px;}
.hp-detail-key{font-size:13px;color:rgba(255,255,255,.2);font-weight:300;}
.hp-detail-val{font-size:13px;color:rgba(255,255,255,.4);font-weight:400;}

.hp-tx-title{font-size:14px;font-weight:500;color:#efece6;margin-top:32px;}

/* ================================================================
   SECTION: CREAM
   ================================================================ */
.section-cream{background:#000;padding:160px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;}
.section-cream h2{color:#efece6;max-width:900px;margin:0 auto 28px;}
.section-cream p{color:rgba(239,236,230,.55);max-width:620px;margin:0 auto 56px;font-size:clamp(16px,1vw,18px);}

/* Stats row */
.stats-row{
  display:flex;justify-content:center;gap:48px;
  margin:40px auto 48px;max-width:900px;flex-wrap:wrap;
}
.stat-col{text-align:center;}
.stat-num{font-size:clamp(32px,5vw,48px);font-weight:300;color:#efece6;letter-spacing:-.03em;line-height:1;}
.stat-desc{font-size:13px;font-weight:400;color:rgba(239,236,230,.4);margin-top:6px;}

/* Founder cards on dark */
.feature-grid-cream .feature-info h4{color:#efece6;}
.feature-grid-cream .feature-info p{color:rgba(239,236,230,.5);}

/* Sticky scroll product UI cards */
/* High-fidelity diagram cards */
.ss-card-wrap{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.ss-hf-card{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:12px;
}
.ss-hf-label{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(0,0,0,.2);margin-bottom:24px;
}
/* MAP */
.ss-hf-grid{display:flex;align-items:center;gap:24px;}
.ss-hf-sources{flex:1;display:flex;flex-direction:column;gap:14px;}
.ss-hf-src{display:flex;align-items:center;gap:10px;}
.ss-hf-src-icon{font-size:12px;font-weight:500;color:rgba(0,0,0,.35);width:56px;text-align:right;flex-shrink:0;}
.ss-hf-src-bar{height:8px;border-radius:4px;background:#34c759;opacity:.25;flex-shrink:0;}
.ss-hf-src-ct{font-size:13px;font-weight:500;color:rgba(0,0,0,.3);flex-shrink:0;}
.ss-hf-arrow{font-size:24px;color:rgba(0,0,0,.1);flex-shrink:0;}
.ss-hf-result{text-align:center;flex-shrink:0;}
.ss-hf-big{font-size:56px;font-weight:300;color:#1d1d1f;letter-spacing:-.03em;line-height:1;}
.ss-hf-big-sub{font-size:13px;font-weight:400;color:rgba(0,0,0,.25);margin-top:4px;}
.ss-hf-badge{font-size:11px;font-weight:500;color:#34c759;background:rgba(52,199,89,.06);padding:4px 12px;border-radius:8px;margin-top:12px;display:inline-block;}
/* MATCH */
.ss-hf-path{display:flex;align-items:center;gap:0;margin-bottom:20px;}
.ss-hf-node{
  width:52px;height:52px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:rgba(0,0,0,.3);
  background:#f5f2ed;flex-shrink:0;position:relative;
}
.ss-hf-you{background:rgba(0,0,0,.06);color:rgba(0,0,0,.4);}
.ss-hf-mid{background:#f2efe9;}
.ss-hf-target{background:rgba(52,199,89,.08);color:#34c759;font-size:16px;width:60px;height:60px;}
.ss-hf-target-name{font-size:9px;font-weight:400;color:rgba(0,0,0,.2);position:absolute;bottom:-18px;white-space:nowrap;}
.ss-hf-target-score{font-size:10px;font-weight:600;color:#34c759;position:absolute;bottom:-30px;}
.ss-hf-connector{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;min-width:40px;}
.ss-hf-conn-line{width:100%;height:2px;background:rgba(0,0,0,.06);}
.ss-hf-conn-pill{font-size:9px;font-weight:500;color:rgba(0,0,0,.25);background:#f5f2ed;padding:3px 8px;border-radius:6px;position:absolute;top:-20px;white-space:nowrap;}
.ss-hf-ghost-paths{margin-top:32px;}
.ss-hf-ghost{font-size:11px;color:rgba(0,0,0,.12);margin-bottom:6px;}
/* MOVE */
.ss-hf-channels{display:flex;gap:12px;}
.ss-hf-ch{flex:1;text-align:center;padding:16px 8px;border-radius:12px;background:#f7f4ef;border:1px solid rgba(0,0,0,.03);}
.ss-hf-ch-active{background:rgba(52,199,89,.03);border-color:rgba(52,199,89,.08);}
.ss-hf-ch-icon{font-size:20px;color:rgba(0,0,0,.15);margin-bottom:8px;}
.ss-hf-ch-active .ss-hf-ch-icon{color:rgba(0,0,0,.25);}
.ss-hf-ch-name{font-size:12px;font-weight:500;color:rgba(0,0,0,.35);margin-bottom:4px;}
.ss-hf-ch-detail{font-size:10px;color:rgba(0,0,0,.18);margin-bottom:6px;}
.ss-hf-ch-day{font-size:9px;color:rgba(0,0,0,.12);font-weight:500;}
.ss-card-wrap{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ss-card-wrap .clay-diagram{
  transform:scale(var(--dia-scale,1));
  transform-origin:center center;
}

/* TIMELINE — one continuous vertical timeline with a single dotted
   spine running the full height. Each milestone (the 3 diagrams) sits
   along this spine with a time label + dot marker. As the user scrolls
   the entire track translates upward, so they "walk down" the timeline
   rather than fading between separate cards. */
.ss-timeline-track{
  width:100%;
  display:flex;flex-direction:column;
  will-change:transform;
  position:relative;
  /* CRITICAL: parent .sticky-left-box uses align-items:center which would
     vertically center this 3×box-height track and break the translateY math.
     Force top-align so translateY(0) shows station 1 at the top of box. */
  align-self:flex-start;
  margin:0;
}
/* No left-rail spine — the existing .clay-flow lines through each diagram form
   the timeline visually. We hide .ss-spine and .ss-time-dot but keep the rest
   of the station layout identical to the original so the scroll-driven
   translateY math (station offsetTop + height) stays exactly correct. */
.ss-spine,
.ss-time-dot{display:none !important;}
.ss-station{
  flex-shrink:0;
  width:100%;
  display:flex;align-items:center;justify-content:center;
  /* height set by JS to match sticky-left-box's clientHeight */
  position:relative;
  padding:0;
}
/* Time label as a floating eyebrow centered above each station's diagram —
   absolutely positioned so it never affects the diagram's vertical center
   that the timing math depends on. */
.ss-time-label{
  position:absolute;
  top:24px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(0,0,0,.45);
  z-index:2;
  padding:5px 12px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.05);
  border-radius:999px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  white-space:nowrap;
}

/* Animate diagram elements into place */
.clay-diagram .clay-card,
.clay-diagram .clay-pill,
.clay-diagram .clay-output-pill,
.clay-diagram .clay-result-pill,
.clay-diagram .clay-path-pill,
.clay-diagram .clay-channel-card,
.clay-diagram .clay-source-grid,
.clay-diagram .clay-meeting-booked,
.clay-diagram .clay-conn-tag,
.clay-diagram .clay-photo-node,
.clay-diagram .clay-dotted-v,
.clay-diagram .clay-dot,
.clay-diagram .clay-flow{
  opacity:0;
  transform:translateY(12px);
  animation:clay-in .5s cubic-bezier(.16,1,.3,1) forwards;
}
.clay-diagram .clay-dotted-v,.clay-diagram .clay-dot,.clay-diagram .clay-flow{transform:scaleY(0);transform-origin:top;}
.clay-diagram .clay-dotted-v{animation:clay-line .3s ease forwards;}
.clay-diagram .clay-dot{animation:clay-dot .2s ease forwards;}
.clay-diagram .clay-flow{animation:clay-line .3s ease forwards;}
@keyframes clay-in{to{opacity:1;transform:translateY(0);}}
@keyframes clay-line{to{opacity:1;transform:scaleY(1);}}
@keyframes clay-dot{to{opacity:1;transform:scaleY(1);}}

/* Stagger delays */
.clay-diagram > :nth-child(1){animation-delay:0s;}
.clay-diagram > :nth-child(2){animation-delay:.08s;}
.clay-diagram > :nth-child(3){animation-delay:.12s;}
.clay-diagram > :nth-child(4){animation-delay:.16s;}
.clay-diagram > :nth-child(5){animation-delay:.22s;}
.clay-diagram > :nth-child(6){animation-delay:.28s;}
.clay-diagram > :nth-child(7){animation-delay:.34s;}
.clay-diagram > :nth-child(8){animation-delay:.38s;}
.clay-diagram > :nth-child(9){animation-delay:.42s;}
.clay-diagram > :nth-child(10){animation-delay:.48s;}
.clay-diagram > :nth-child(11){animation-delay:.52s;}
.clay-diagram > :nth-child(12){animation-delay:.56s;}
.clay-diagram > :nth-child(13){animation-delay:.60s;}
.clay-diagram > :nth-child(14){animation-delay:.64s;}
.clay-diagram > :nth-child(15){animation-delay:.68s;}
.clay-diagram > :nth-child(16){animation-delay:.72s;}
.clay-diagram > :nth-child(17){animation-delay:.76s;}
.clay-diagram > :nth-child(18){animation-delay:.80s;}

/* Clay-style diagram system */
.clay-diagram{
  width:100%;display:flex;flex-direction:column;align-items:center;
  gap:4px;font-family:Muoto,-apple-system,sans-serif;
}
/* Dotted vertical connector with flowing dot */
.clay-dotted-v{
  width:0;height:28px;
  border-left:2px dashed rgba(0,0,0,.15);
  position:relative;
}
/* Flowing dots that travel down continuously */
.clay-flow{
  position:relative;width:2px;height:32px;overflow:hidden;
  background:rgba(0,0,0,.04);
}
.clay-flow::before,.clay-flow::after{
  content:'';position:absolute;left:-2px;
  width:5px;height:5px;border-radius:50%;
  background:rgba(0,0,0,.2);
}
.clay-flow::before{animation:clay-flow-down 1.2s linear infinite;}
.clay-flow::after{animation:clay-flow-down 1.2s linear .6s infinite;}
@keyframes clay-flow-down{0%{top:-5px;opacity:.6;}100%{top:100%;opacity:.15;}}
/* Connector dot (static) */
.clay-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(0,0,0,.2);flex-shrink:0;
}
/* Cards */
.clay-card{
  background:#fff;transition:transform .2s,box-shadow .2s;border-radius:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.06);
  padding:18px 20px;width:100%;max-width:460px;
}
.clay-card-top{margin-bottom:0;}
.clay-card-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.clay-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.clay-card-title{font-size:16px;font-weight:600;color:#1d1d1f;}
.clay-card-sub{font-size:12px;color:rgba(0,0,0,.35);margin-top:1px;}
.clay-card-body{display:flex;flex-direction:column;gap:8px;}
.clay-row{display:flex;justify-content:space-between;padding:5px 0;}
.clay-row-label{font-size:13px;color:rgba(0,0,0,.3);}
.clay-row-value{font-size:13px;color:rgba(0,0,0,.55);font-weight:500;}
/* List inside card */
.clay-list{display:flex;flex-direction:column;gap:0;}
.clay-list-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(0,0,0,.04);
}
.clay-list-row:last-child{border-bottom:none;}
.clay-list-avatar{
  width:32px;height:32px;border-radius:8px;
  background:#f5f2ed;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:rgba(0,0,0,.25);flex-shrink:0;letter-spacing:.02em;
}
.clay-list-info{flex:1;min-width:0;}
.clay-list-name{font-size:14px;font-weight:500;color:#1d1d1f;}
.clay-list-meta{font-size:11px;color:rgba(0,0,0,.25);}

/* Photo nodes for inner circle */
.clay-photo-node{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:2.5px solid #fff;
  box-shadow:0 1px 6px rgba(0,0,0,.1);
}
/* Connector tags */
.clay-conn-tag{
  font-size:11px;font-weight:500;color:rgba(0,0,0,.45);
  background:#fff;padding:6px 14px;border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.06);
  flex-shrink:0;white-space:nowrap;
}
/* Scrolling overflow for many connection types */
.clay-conn-overflow{
  width:100%;max-width:440px;overflow:hidden;position:relative;
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
}
.clay-conn-track{
  display:flex;gap:6px;
  animation:clay-scroll 20s linear infinite;
  width:max-content;
}
@keyframes clay-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.clay-conn-track-reverse{animation-direction:reverse;}
/* Photo in list row */
.clay-list-photo{
  width:36px;height:36px;border-radius:50%;object-fit:cover;
  flex-shrink:0;border:1.5px solid rgba(0,0,0,.04);
}
/* Meeting booked glow */
.clay-meeting-booked{
  background:#34c759;color:#fff;
  font-size:13px;font-weight:600;
  padding:10px 28px;border-radius:20px;
  box-shadow:0 0 20px rgba(52,199,89,.3),0 0 6px rgba(52,199,89,.2);
  letter-spacing:.02em;
}
.clay-mini-node{
  width:32px;height:32px;border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.05);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:600;color:rgba(0,0,0,.3);
  letter-spacing:.02em;
}
.clay-badge{
  font-size:10px;font-weight:600;color:#34c759;
  background:rgba(52,199,89,.08);padding:4px 10px;border-radius:6px;
  flex-shrink:0;
}
.clay-list-more{font-size:10px;color:rgba(0,0,0,.12);text-align:center;padding-top:8px;}

/* Clay intel card — mirrors the iPad ie-intel panel */
.clay-intel-card{max-width:440px;padding:20px 20px 0;}
.clay-intel-label{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#007aff;margin-bottom:16px;
}
.clay-intel-header{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.clay-intel-photo{
  width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(0,0,0,.04);
}
.clay-intel-name{font-size:16px;font-weight:600;color:#1d1d1f;letter-spacing:-.02em;}
.clay-intel-role{font-size:12px;font-weight:400;color:rgba(0,0,0,.4);margin-top:2px;}
.clay-intel-company{font-size:11px;font-weight:400;color:rgba(0,0,0,.2);margin-top:1px;}
.clay-intel-details{display:flex;gap:14px;margin:12px 0 0;flex-wrap:wrap;}
.clay-intel-cd{
  font-size:11px;font-weight:400;color:rgba(0,0,0,.35);
  display:flex;align-items:center;gap:5px;
}
.clay-intel-cd svg{flex-shrink:0;}
.clay-intel-sep{height:1px;background:rgba(0,0,0,.05);margin:14px 0;}
.clay-intel-wp-title{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#e8720a;margin-bottom:12px;
}
.clay-intel-wp{
  display:flex;align-items:center;
  padding:10px 10px 10px 8px;margin-bottom:6px;
  background:rgba(52,199,89,.03);border-radius:10px;
  border:1px solid rgba(52,199,89,.08);gap:0;
}
.clay-intel-wp-dot{
  width:8px;height:8px;border-radius:50%;
  background:#34c759;flex-shrink:0;margin-right:6px;
}
.clay-intel-wp-left{flex:1;display:flex;flex-direction:column;min-width:0;}
.clay-intel-wp-type{font-size:13px;font-weight:600;color:rgba(0,0,0,.6);}
.clay-intel-wp-sub{font-size:10px;font-weight:400;color:rgba(0,0,0,.25);margin-top:1px;}
.clay-intel-wp-arrow{font-size:12px;color:rgba(0,0,0,.1);flex-shrink:0;margin:0 4px;}
.clay-intel-wp-intro{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-direction:row-reverse;}
.clay-intel-wp-photo{
  width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(0,0,0,.04);
}
.clay-intel-wp-iname{font-size:11px;font-weight:500;color:rgba(0,0,0,.5);text-align:left;}
.clay-intel-wp-irole{font-size:9px;font-weight:400;color:rgba(0,0,0,.2);margin-top:1px;text-align:left;}
.clay-intel-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0 14px;
}
.clay-intel-score{font-size:36px;font-weight:300;color:#34c759;letter-spacing:-.03em;line-height:1;}
.clay-intel-score-label{font-size:9px;color:rgba(0,0,0,.15);font-weight:400;margin-top:2px;}
.clay-intel-paths-badge{
  font-size:12px;font-weight:500;color:rgba(0,0,0,.2);
  background:rgba(0,0,0,.03);padding:7px 14px;border-radius:8px;
}
/* Source pill grid */
.clay-source-grid{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  max-width:380px;margin-bottom:4px;
}
.clay-pill{
  display:flex;align-items:center;gap:6px;
  background:#fff;border-radius:10px;padding:6px 14px 6px 6px;
  box-shadow:0 2px 8px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.06);
  font-size:12px;font-weight:500;color:rgba(0,0,0,.5);
}
.clay-pill-icon{
  width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;
}
.clay-converge{display:flex;justify-content:center;}
/* Engine card */
.clay-card-engine{max-width:380px;}
.clay-step-row{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:rgba(0,0,0,.45);padding:5px 0;
}
.clay-check{color:#34c759;font-size:12px;font-weight:700;flex-shrink:0;}
/* Output pill */
.clay-output-pill{
  background:rgba(52,199,89,.08);border:1.5px solid rgba(52,199,89,.25);
  border-radius:20px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.03),0 4px 20px rgba(0,0,0,.06);padding:8px 20px;
  font-size:12px;font-weight:600;color:#34c759;
}

/* Build diagram — tool chips + stack rows */
.build-tool{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:10px;
  background:#fff;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  font-size:12px;font-weight:500;color:#1d1d1f;letter-spacing:-.005em;
  line-height:1;flex-shrink:0;
}
.build-dot{
  width:8px;height:8px;border-radius:50%;display:inline-block;
}
.build-tool-favicon{
  width:14px;height:14px;border-radius:3px;flex-shrink:0;
  object-fit:contain;background:#fff;
}

/* Stack grid — chips wrap across rows. No fade — every tool is shown,
   trailing pill carries the "+ N more" claim. */
.stack-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;
  width:min(560px,92%);
  margin:0 auto;
}
.stack-grid-more{
  display:inline-flex;align-items:center;
  padding:7px 12px;border-radius:10px;
  background:rgba(115,75,242,.06);border:1px dashed rgba(115,75,242,.32);
  font-size:11px;font-weight:500;color:#5a3acc;letter-spacing:-.005em;
  line-height:1;flex-shrink:0;white-space:nowrap;
}
.build-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;
  background:rgba(0,0,0,.015);
  font-size:12px;line-height:1;
}
.build-k{
  width:16px;height:16px;border-radius:50%;
  background:rgba(52,199,89,.12);color:#34c759;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;
}
.build-l{color:#1d1d1f;font-weight:500;flex:1;}
.build-v{color:rgba(0,0,0,.4);font-size:11px;}

/* Ship diagram — KPI tiles + ship log */
.ship-tile{
  background:#fff;border:1px solid rgba(0,0,0,.05);
  border-radius:10px;padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.ship-tile-hero{
  background:linear-gradient(180deg,#fff 0%,rgba(52,199,89,.04) 100%);
  border-color:rgba(52,199,89,.15);
}
.ship-tile-label{
  font-size:10px;font-weight:500;color:rgba(0,0,0,.4);
  letter-spacing:.02em;
}
.ship-tile-num{
  font-size:22px;font-weight:400;color:#1d1d1f;
  letter-spacing:-.02em;line-height:1;
  font-family:Muoto,sans-serif;
}
.ship-tile-meta{
  font-size:10px;color:rgba(0,0,0,.35);letter-spacing:0;
}
.ship-up{color:#34c759;font-weight:500;}
.ship-down{color:#34c759;font-weight:500;}
.ship-log-row{
  display:flex;align-items:center;gap:10px;
  font-size:11px;color:rgba(0,0,0,.5);line-height:1.3;
}
.ship-log-dot{
  width:6px;height:6px;border-radius:50%;background:#34c759;flex-shrink:0;
}
.ship-log-t{
  font-size:10px;font-weight:600;color:rgba(0,0,0,.4);
  width:28px;letter-spacing:.02em;
}
.ship-log-l{color:#1d1d1f;}
/* Path pill */
.clay-path-pill{
  background:#fff;border-radius:20px;padding:6px 16px;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 0 0 1px rgba(52,199,89,.12);
  font-size:11px;font-weight:500;color:rgba(0,0,0,.35);
}
.clay-card-sm{max-width:380px;}
.clay-ai-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
.clay-ai-tag{
  font-size:9px;font-weight:500;color:rgba(0,0,0,.2);
  background:#f7f4ef;border:1px solid rgba(0,0,0,.04);
  padding:3px 8px;border-radius:6px;
}
/* Channel cards */
.clay-channels{
  display:flex;gap:8px;width:100%;max-width:420px;
}
.clay-channel-col{
  flex:1;display:flex;flex-direction:column;align-items:center;
}
.clay-ch-label{
  font-size:11px;font-weight:600;color:rgba(0,0,0,.45);
  letter-spacing:.06em;text-transform:uppercase;
  text-align:center;margin:6px 0;
}
.clay-channel-card{
  background:#fff;border-radius:10px;padding:10px;width:100%;
  box-shadow:0 2px 8px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.06);
}
.clay-ch-active{box-shadow:0 2px 10px rgba(0,0,0,.07),0 0 0 1.5px rgba(52,199,89,.2);}
.clay-ch-dim{opacity:.4;}
.clay-ch-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.clay-ch-icon{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;
}
.clay-ch-name{font-size:12px;font-weight:600;color:#1d1d1f;flex:1;}
.clay-ch-day{font-size:9px;color:rgba(0,0,0,.2);font-weight:500;}
.clay-ch-preview{font-size:11px;color:rgba(0,0,0,.35);line-height:1.4;margin-bottom:4px;}
.clay-hl{color:#34c759;font-weight:500;}
.clay-ch-status{font-size:9px;color:#34c759;font-weight:600;}
.clay-result-pill{
  background:rgba(52,199,89,.08);border:1.5px solid rgba(52,199,89,.2);
  border-radius:20px;padding:8px 20px;
  font-size:11px;font-weight:500;color:#34c759;
}
/* Vertical card layout */
.ss-hf-vertical{justify-content:space-between;padding:20px 16px;}
.ss-hf-v-arrow{font-size:20px;color:rgba(0,0,0,.1);text-align:center;margin:12px 0;}
.ss-hf-v-sources{gap:10px;}
.ss-hf-v-targets{display:flex;justify-content:center;gap:8px;}
.ss-hf-v-target{width:36px;height:36px;border-radius:50%;background:rgba(52,199,89,.06);border:1px solid rgba(52,199,89,.12);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#34c759;}
.ss-hf-v-path{display:flex;flex-direction:column;align-items:center;gap:0;flex:1;}
.ss-hf-v-conn{display:flex;flex-direction:column;align-items:center;position:relative;padding:4px 0;}
.ss-hf-v-line{width:2px;height:28px;background:rgba(0,0,0,.06);}
.ss-hf-v-pill{font-size:10px;font-weight:500;color:rgba(0,0,0,.25);background:#f5f2ed;padding:3px 10px;border-radius:6px;position:absolute;left:calc(50% + 20px);top:50%;transform:translateY(-50%);white-space:nowrap;}
.ss-hf-v-timeline{display:flex;flex-direction:column;gap:0;flex:1;}
.ss-hf-v-step{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.03);position:relative;}
.ss-hf-v-step:last-child{border-bottom:none;}
.ss-hf-v-dot{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.06);flex-shrink:0;margin-top:4px;}
.ss-hf-v-dot.on{background:#34c759;}
.ss-hf-v-step-content{flex:1;min-width:0;}
.ss-hf-v-step-ch{font-size:12px;font-weight:500;color:rgba(0,0,0,.3);}
.ss-hf-ch-active .ss-hf-v-step-ch{color:rgba(0,0,0,.5);}
.ss-hf-v-step-detail{font-size:12px;font-weight:400;color:rgba(0,0,0,.25);margin-top:2px;}
.ss-hf-ch-active .ss-hf-v-step-detail{color:rgba(0,0,0,.35);}
.ss-hf-v-step-sub{font-size:10px;font-weight:300;color:rgba(0,0,0,.12);margin-top:2px;font-style:italic;}
.ss-hf-v-step-day{font-size:10px;font-weight:500;color:rgba(0,0,0,.12);flex-shrink:0;margin-top:4px;}
.ss-label{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,0,0,.25);margin-bottom:16px;}
.ss-big{font-size:52px;font-weight:300;letter-spacing:-.03em;line-height:1;color:#1d1d1f;}
.ss-big-sub{font-size:14px;font-weight:400;color:rgba(0,0,0,.3);margin-top:4px;margin-bottom:24px;}
.ss-bars{display:flex;flex-direction:column;gap:12px;}
.ss-bar-row{display:flex;align-items:center;gap:10px;}
.ss-bar-name{font-size:12px;font-weight:500;color:rgba(0,0,0,.35);width:56px;text-align:right;flex-shrink:0;}
.ss-bar-track{flex:1;height:5px;border-radius:3px;background:rgba(0,0,0,.06);overflow:hidden;}
.ss-bar-fill{height:100%;border-radius:3px;background:#34c759;opacity:.5;}
.ss-bar-val{font-size:12px;font-weight:600;color:rgba(0,0,0,.4);width:28px;flex-shrink:0;}
.ss-badge{margin-top:20px;font-size:11px;font-weight:500;color:rgba(0,0,0,.25);background:#f5f2ed;padding:6px 12px;border-radius:8px;display:inline-block;}

/* Match card */
.ss-match-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;background:#f7f4ef;border:1px solid rgba(0,0,0,.03);}
.ss-match-hl{background:rgba(52,199,89,.06);border-color:rgba(52,199,89,.12);}
.ss-match-avatar{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:rgba(0,0,0,.3);flex-shrink:0;}
.ss-match-info{flex:1;min-width:0;}
.ss-match-name{font-size:13px;font-weight:500;color:#1d1d1f;}
.ss-match-role{font-size:10px;color:rgba(0,0,0,.3);}
.ss-match-tag{font-size:9px;font-weight:500;color:rgba(0,0,0,.3);background:#f2efe9;padding:3px 8px;border-radius:6px;white-space:nowrap;flex-shrink:0;}
.ss-match-score{font-size:14px;font-weight:500;color:#34c759;flex-shrink:0;}

/* Move card */
.ss-move-target{font-size:14px;font-weight:500;color:#1d1d1f;margin-bottom:14px;}
.ss-timeline{display:flex;align-items:center;margin-bottom:18px;}
.ss-tl-dot{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.06);flex-shrink:0;}
.ss-tl-dot.on{background:#34c759;}
.ss-tl-line{width:20px;height:1.5px;background:#f2efe9;flex-shrink:0;}
.ss-tl-line.on{background:rgba(52,199,89,.25);}
.ss-touch-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;background:#f7f4ef;border:1px solid rgba(0,0,0,.03);}
.ss-touch-done{background:rgba(52,199,89,.04);border-color:rgba(52,199,89,.08);}
.ss-touch-icon{width:28px;height:28px;border-radius:50%;background:#f2efe9;display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(0,0,0,.3);flex-shrink:0;}
.ss-touch-info{flex:1;min-width:0;}
.ss-touch-name{font-size:12px;font-weight:500;color:#1d1d1f;}
.ss-touch-sub{font-size:10px;color:rgba(0,0,0,.25);margin-top:1px;}
.ss-touch-status{font-size:10px;font-weight:500;color:#34c759;flex-shrink:0;}
.ss-pending{color:rgba(0,0,0,.2);}

/* ================================================================
   SECTION: HOW IT WORKS (Sticky scroll)
   ================================================================ */
/* Sticky scroll section */
.sticky-section{
  background:#000;position:relative;
}
.sticky-inner{
  max-width:1480px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr;gap:72px;
  padding:0 40px;
}
.sticky-left{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:48px 32px;
}
.sticky-left-box{
  background:#e8e3da;
  background-image:url('assets/paper-bg.png');
  background-size:cover;background-position:center;
  background-blend-mode:multiply;
  border-radius:20px;
  width:100%;
  /* Outer reduced by 60px and vertical padding reduced by 60px (48→18 each
     side) so clientHeight stays the same — the wraps and the diagrams that
     scaleDiagrams sizes against them keep their original dimensions. The
     visible cream frame around the graphic just gets tighter. */
  height:calc(100vh - 124px);
  max-height:840px;
  display:flex;align-items:center;justify-content:center;
  padding:32px 56px;
  overflow:hidden;
}
.sticky-right{
  display:flex;flex-direction:column;
  padding:0;
}
.sticky-panel{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 0;
}
.sticky-panel:first-child{
  min-height:100vh;
}
.sticky-panel h2{margin-bottom:24px;}
.sticky-panel p{max-width:380px;}

/* Inline mobile description — hidden on desktop, visible at <=1024px so each
   timeline station carries its own title + body without relying on the
   sticky-right scroll choreography. */
.ss-mobile-text{display:none;}
@media(max-width:1024px){
  .sticky-section .sticky-inner{
    display:block;padding:0 18px;
  }
  .sticky-section .sticky-left{
    position:static;height:auto;padding:0;
  }
  /* Strip the paper-textured rounded frame on mobile — it created an awkward
     hard-edge seam with the next section. Diagrams now sit directly on the
     cream section bg, which matches Stack Replacement seamlessly below. */
  .sticky-section .sticky-left-box{
    height:auto;max-height:none;padding:0;
    border-radius:0;
    background:none !important;
    background-image:none !important;
    box-shadow:none;
  }
  /* Force the entire cream zone (deploy → diff → speed → stack replacement) to
     a hard cream bg so the four sections read as one continuous surface. The
     body theme-light scroll trigger can race or drop on mobile, leaving black
     gaps between sections — explicit bg here prevents that. */
  .sticky-section,
  .section-diff,
  .section-speed{
    background:#f1ebdc !important;
  }
  .sticky-section{padding-bottom:40px;}
  .sticky-section h2,
  .sticky-section [data-sticky-eyebrow],
  .section-diff h2,
  .section-speed h2{color:#1d1d1f !important;}
  .section-diff p,
  .section-speed p{color:rgba(0,0,0,.55) !important;}
  .sticky-section .sticky-right{display:none;}
  .ss-mobile-text{
    display:block;text-align:left;margin:0 0 36px;
    max-width:560px;
  }
  .ss-mobile-text h3{
    font-size:clamp(24px,4.6vw,32px);font-weight:300;
    line-height:1.18;letter-spacing:-.02em;
    color:#1d1d1f;margin-bottom:12px;
  }
  .ss-mobile-text p{
    font-size:14.5px;font-weight:300;line-height:1.55;
    color:rgba(0,0,0,.6);max-width:none;
  }
  .ss-station{
    height:auto !important;padding:32px 0 56px !important;
    display:block;
  }
  .ss-station + .ss-station{border-top:1px solid rgba(0,0,0,.07);}
  .ss-station .ss-card-wrap{
    opacity:1 !important;
    position:static;
    width:100%;
    transform:none !important;
  }
  /* Let scaleDiagrams shrink diagrams to viewport width on mobile — diagrams
     have desktop-native widths (clay-cards 400-500px) that would otherwise
     spill past narrow phone screens. */
  .ss-station .ss-card-wrap .clay-diagram{
    transform-origin:top center !important;
    margin:0 auto;
  }
  /* Reset the desktop's frosted-pill treatment — on mobile the time label
     becomes a plain uppercase eyebrow above the milestone text. */
  .ss-time-label{
    position:static !important;
    transform:none !important;
    background:none !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
    -webkit-backdrop-filter:none !important;
            backdrop-filter:none !important;
    width:auto;
    display:block;
    font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;
    color:rgba(0,0,0,.45) !important;
    margin:0 0 14px;
  }
  .ss-time-dot,.ss-spine{display:none !important;}
}
/* The pre-existing @media(max-width:768px) block (a few hundred lines below)
   overrode .sticky-left back to padding:24px which fought the rule above and
   left the diagrams flush against the viewport edge. Force the mobile layout
   to win at every smaller breakpoint too. */
@media(max-width:768px){
  .sticky-section .sticky-left{padding:0 !important;}
  .sticky-section .sticky-inner{padding:0 20px !important;}
  /* Section header inline padding is 100px top / 56px bottom on desktop — way
     too much above-the-fold real estate on a phone. Compress it. */
  .sticky-section > div:first-child{padding:0 20px 32px !important;}
}

.product-card{
  background:#efece6;border-radius:12px;padding:32px;max-width:340px;
  color:#1a1a1a;
}
.pc-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8e8c87;margin-bottom:4px;font-weight:400;}
.pc-balance{font-size:clamp(24px,4vw,32px);font-weight:300;color:#1a1a1a;margin-bottom:24px;}
.pc-balance span{color:#8e8c87;font-weight:300;}
.pc-btn{
  display:block;width:100%;padding:12px;border-radius:8px;text-align:center;
  font-size:14px;font-weight:500;margin-bottom:8px;cursor:pointer;font-family:inherit;border:none;
}
.pc-btn.outline{background:transparent;border:1px solid rgba(0,0,0,.1);color:#1a1a1a;}
.pc-btn.filled{background:#1a1a1a;color:#efece6;}

.pc-tx{margin-top:24px;}
.pc-tx-title{font-size:14px;font-weight:500;color:#1a1a1a;margin-bottom:4px;}
.pc-tx-status{font-size:11px;color:#8e8c87;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;font-weight:400;}
.pc-tx-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.pc-tx-avatar{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pc-tx-avatar span{font-size:11px;font-weight:500;color:#8e8c87;}
.pc-tx-info{flex:1;}
.pc-tx-name{font-size:14px;font-weight:500;color:#1a1a1a;}
.pc-tx-type{font-size:12px;color:#8e8c87;font-weight:300;}
.pc-tx-amount{font-size:14px;font-weight:400;color:#1a1a1a;}

/* ================================================================
   SECTION: DEVICES (CREAM)
   ================================================================ */
.section-devices{background:#efece6;padding:80px 24px;min-height:100vh;display:flex;align-items:center;justify-content:center;}
.devices-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:end;}
.devices-text h2{color:#1a1a1a;margin-bottom:16px;}
.devices-text p{color:#8e8c87;margin-bottom:24px;max-width:360px;}
.app-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#1a1a1a;color:#efece6;padding:10px 20px;border-radius:9px;
  font-size:13px;font-weight:500;
}
.app-badge svg{width:20px;height:20px;fill:#efece6;}
.devices-visual{position:relative;min-height:420px;}
.device-desktop{
  position:absolute;right:0;bottom:0;width:75%;
  background:linear-gradient(270deg,#1a1a1a,#0a0a0a);
  border-radius:12px 12px 0 0;border:1px solid rgba(255,255,255,.04);border-bottom:none;
  min-height:360px;overflow:hidden;
}
.device-mobile{
  position:absolute;left:0;bottom:0;width:200px;
  background:#efece6;border-radius:24px;border:1px solid rgba(0,0,0,.06);
  min-height:400px;z-index:2;padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.1);
}

/* ================================================================
   SECTION: FOUNDERS (BLACK)
   ================================================================ */
.section-founders{background:#000;padding:160px 24px;text-align:center;}
.founders-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  font-size:12px;font-weight:500;color:#8e8c87;
  letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:32px;
}
.founders-pill svg{width:10px;height:10px;}
.section-founders h2{
  font-style:italic;max-width:900px;margin:0 auto 48px;
}
.founders-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:0 auto;}
.founder-card{
  border-radius:12px;overflow:hidden;aspect-ratio:3/4;
  background:rgba(255,255,255,.03);position:relative;
}
.founder-info{
  position:absolute;bottom:0;left:0;right:0;padding:16px;text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
}
.founder-name{font-size:14px;font-weight:400;color:#efece6;}
.founder-role{font-size:13px;color:rgba(255,255,255,.4);font-weight:300;}

/* ================================================================
   BIG CTA
   ================================================================ */
.section-cta{
  background:transparent;
  padding:0;margin:0;
  display:block;
  position:relative;overflow:hidden;
  width:100%;
  font-size:0;line-height:0; /* eliminates any inline-level whitespace gaps */
}
/* Mega footer */
.mega-footer{
  background:#000;padding:64px 24px 0;
  position:relative;overflow:hidden;
}
.mega-footer-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 2fr;gap:64px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mega-footer-logo{display:flex;flex-direction:column;align-items:flex-start;}
.mega-footer-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.mega-footer-col{display:flex;flex-direction:column;gap:10px;}
.mega-footer-col-title{font-size:12px;font-weight:500;color:#efece6;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.mega-footer-col a{font-size:13px;font-weight:300;color:#8e8c87;transition:color .2s;}
.mega-footer-col a:hover{color:#efece6;}
.mega-footer-wordmark{
  max-width:1200px;margin:0 auto;
  overflow:hidden;
  line-height:0;
}
.mega-footer-img{
  width:100%;display:block;opacity:.4;
  margin-bottom:-8%;
  margin-top:-20px;
}
/* CTA — edge-to-edge Unicorn scene with breakpoint-matched aspect ratios.
   Design sizes from the Unicorn editor:
   Desktop 1440x900 → 16:10
   Tablet  768x1024 → 3:4 portrait
   Mobile  390x844  → 9:19.5 portrait
*/
.cta-unicorn-wrap{
  position:relative;display:block;
  width:100%;margin:0;padding:0;
  aspect-ratio:1440/900;
  font-size:0;line-height:0;
}
.cta-unicorn{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;
}
.cta-unicorn canvas{
  display:block;width:100%!important;height:100%!important;
  margin:0!important;padding:0!important;
}
/* Click target — sized as % of scene so it scales with the card */
.cta-unicorn-hit{
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:38%;height:48%;
  min-width:160px;min-height:90px;
  z-index:2;cursor:pointer;
  text-decoration:none;
  border-radius:8px;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  -webkit-tap-highlight-color:transparent;
}
.cta-unicorn-hit:hover{
  transform:translate(-50%,-52%);
}

/* Tablet — design canvas is 768x1024 (3:4 portrait) */
@media(max-width:1024px) and (min-width:768px){
  .cta-unicorn-wrap{aspect-ratio:768/1024;}
  .cta-unicorn-hit{
    width:62%;height:24%;
    min-width:240px;min-height:120px;
  }
}

/* Mobile — design canvas is 390x844 (tall portrait) */
@media(max-width:767px){
  .cta-unicorn-wrap{aspect-ratio:390/844;}
  .cta-unicorn-hit{
    width:72%;height:18%;
    min-width:200px;min-height:110px;
  }
}
.cta-links{display:flex;gap:16px;align-items:center;margin-bottom:16px;}
.cta-links a{font-size:13px;color:#8e8c87;font-weight:300;}
.cta-links a:hover{color:#efece6;}
.cta-links .sep{color:rgba(255,255,255,.1);font-weight:300;}
.cta-legal{font-size:12px;color:rgba(255,255,255,.12);max-width:400px;text-align:center;line-height:1.6;font-weight:300;}

/* ================================================================
   RESPONSIVE
   ================================================================ */
/* Feature expanding cards (from POC v3) */
.feature-section{background:#efece6;padding:80px 24px;}
.feature-section .tagline{
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:#8e8c87;margin-bottom:clamp(32px,4vw,48px);display:block;
}
.feature-grid{display:flex;gap:16px;max-width:1200px;margin:0 auto;}
.feature-card{overflow:hidden;cursor:pointer;flex-shrink:0;will-change:width;}
.feature-visual{
  background:#e8e2d8;height:clamp(22rem,28vw,28rem);border-radius:8px;overflow:hidden;position:relative;
}
.feature-info{padding:1.25rem 0 .25rem;max-width:18rem;text-align:left;}
.feature-info h4{font-size:1.125rem;font-weight:500;margin-bottom:.25rem;color:#1a1a1a;font-family:Muoto,sans-serif;}
.feature-info p{color:#8e8c87;font-size:.9rem;font-weight:300;line-height:1.5;margin-bottom:.75rem;}
.feature-grid-dark .feature-info p{color:rgba(255,255,255,.4);}
/* Founder photo cards */
.founder-photo-card{
  background-size:cover;
  background-position:center 20%;
  background-repeat:no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.founder-play{
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,transform .2s;
}
.founder-play:hover{background:rgba(255,255,255,.25);transform:scale(1.06);}
.founder-play svg{width:18px;height:18px;fill:#fff;margin-left:2px;}

/* FOUNDER VIDEO MODAL */
.founder-testimonial{cursor:pointer;}
.founder-testimonial:focus-visible{outline:2px solid rgba(165,239,217,.6);outline-offset:4px;border-radius:10px;}
.founder-modal{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;transition:opacity .25s ease;
}
.founder-modal.open{display:flex;opacity:1;}
.founder-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  cursor:pointer;
}
.founder-modal-frame{
  position:relative;
  width:min(960px,100%);
  background:#0a0a0a;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:translateY(8px) scale(.985);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.founder-modal.open .founder-modal-frame{transform:translateY(0) scale(1);}
.founder-modal-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s;
}
.founder-modal-close:hover{background:rgba(0,0,0,.85);}
.founder-modal-video-wrap{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
}
.founder-modal-video{width:100%;height:100%;display:block;background:#000;}
.founder-modal-meta{
  padding:16px 22px 18px;
  background:#0a0a0a;color:#efece6;
  border-top:1px solid rgba(255,255,255,.06);
}
.founder-modal-name{font-size:15px;font-weight:500;letter-spacing:-.01em;}
.founder-modal-title{font-size:12px;color:rgba(239,236,230,.5);margin-top:3px;}
body.modal-open{overflow:hidden;}

/* Sticky scroll fade-in panels */
.sticky-panel{opacity:0;transition:opacity .3s ease;}
.sticky-panel.visible{opacity:1;}
.sticky-panel:last-child{opacity:1;}

/* Tablet: founder cards stay 3-up but get safe horizontal padding so the
   leftmost (Anthony) and rightmost (Jon) don't crash into the screen edge. */
@media(max-width:1024px){
  .feature-grid{padding-left:20px;padding-right:20px;gap:14px;}
  .section-cream{padding-left:20px;padding-right:20px;}
}
@media(max-width:768px){
  .product-split,.devices-grid{grid-template-columns:1fr;}
  .founders-grid{grid-template-columns:1fr 1fr;}
  .hp-content{flex-direction:column;gap:24px;}
  .footer-right a{display:none;}
  .footer-right a:last-of-type{display:block;}
  .feature-grid{flex-direction:column;padding-left:18px;padding-right:18px;gap:18px;}
  .feature-grid .feature-card{width:100%!important;}
  .sticky-inner{grid-template-columns:1fr;}
  .sticky-left{position:relative;height:auto;padding:24px;}
  .sticky-left-box{height:auto;padding:24px;}
  .sticky-right{padding:0 24px;}
  .mega-footer-inner{grid-template-columns:1fr;}
  .mega-footer-nav{grid-template-columns:1fr 1fr;}
  .section-devices{min-height:auto;padding:80px 24px;}
}
/* Stack comparison — asymmetric layout */
.section-stack{background:#efece6;padding:160px 24px;}
.stack-layout{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.1fr;gap:80px;
  align-items:center;
}
.stack-left{text-align:left;}
.stack-left h2{text-align:left;max-width:100%;color:#1d1d1f;}
.stack-left-sub{
  font-size:16px;font-weight:300;color:rgba(0,0,0,.35);
  line-height:1.7;margin-top:20px;max-width:400px;
}
.stack-card{
  background:#fff;border-radius:14px;
  padding:36px 32px 28px;
  box-shadow:0 4px 24px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.03);
}
.stack-card-label{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(0,0,0,.35);margin-bottom:24px;
}
.stack-tool{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.stack-tool:last-child{border-bottom:none;}
.stack-name{font-size:15px;font-weight:400;color:rgba(0,0,0,.5);}
.stack-price{font-size:14px;font-weight:400;color:rgba(0,0,0,.35);}
.stack-price s{text-decoration-color:rgba(237,81,69,.45);}
.stack-total-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:20px 0 0;margin-top:8px;
  border-top:1px solid rgba(0,0,0,.08);
}
.stack-total-label{font-size:12px;font-weight:600;color:rgba(0,0,0,.4);text-transform:uppercase;letter-spacing:.06em;}
.stack-total-price{font-size:28px;font-weight:300;color:rgba(0,0,0,.3);letter-spacing:-.02em;}
.stack-total-price s{text-decoration-color:rgba(237,81,69,.5);text-decoration-thickness:2px;}
.stack-total-price span{font-size:14px;}
.stack-answer-card{
  background:#000;color:#efece6;
  border-radius:14px;
  padding:28px 32px;margin-top:-12px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  display:flex;align-items:center;gap:20px;
}
.stack-answer-logo{height:18px;filter:brightness(0) invert(1);opacity:.9;flex-shrink:0;}
.stack-answer-text{font-size:15px;font-weight:300;color:rgba(255,255,255,.65);line-height:1.6;}

/* Discovery / Intelligence section */
.section-discovery{background:#f1ebdc;padding:160px 24px;}
.disc-split{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:start;margin-bottom:0;}

/* LEFT SIDE: Apollo (boring) */
.disc-left-label{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(0,0,0,.2);margin-bottom:12px;
}
.disc-left-card{
  background:#1B1B3A;border:1px solid rgba(108,92,231,.15);
  border-radius:14px;padding:0 0 24px;overflow:hidden;
}
.disc-apollo-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 20px;
  background:rgba(108,92,231,.1);
  border-bottom:1px solid rgba(108,92,231,.1);
  font-size:11px;font-weight:500;color:rgba(255,255,255,.3);letter-spacing:-.01em;
}
.disc-left-profile{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;}
.disc-left-avatar{
  width:40px;height:40px;border-radius:50%;
  background:rgba(108,92,231,.25);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.5);
}
.disc-left-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:7px 20px;border-bottom:1px solid rgba(255,255,255,.04);
  font-size:12px;color:rgba(255,255,255,.2);
}
.disc-left-val{color:rgba(255,255,255,.35);font-weight:400;text-decoration:line-through;text-decoration-color:rgba(237,81,69,.4);}
.disc-left-verdict{
  font-size:12px;color:rgba(255,255,255,.55);font-style:italic;
  margin:16px 20px 0;text-align:center;padding:12px 0 4px;
  border-top:1px dashed rgba(255,255,255,.08);
}

/* Stack replacement — vendor pills + capability checklist */
.sr-vendor{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px 7px 8px;border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.78);
  font-size:12px;font-weight:500;letter-spacing:-.005em;
  line-height:1;white-space:nowrap;
}
.sr-vendor img{
  width:14px;height:14px;border-radius:3px;flex-shrink:0;
  object-fit:contain;background:#fff;
}
.sr-vendor-svc{
  color:rgba(255,255,255,.55);
  font-weight:400;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:7px 12px 7px 8px;
}
.sr-vendor-svc-icon{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;
  color:#1a1a1a;
}
.sr-vendor-svc-icon svg{width:9px;height:9px;display:block;}

.sr-section-label{
  width:100%;font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.32);
  margin-top:4px;margin-bottom:2px;
}
.sr-section-label:first-of-type{margin-top:0;}

/* Each capability is a link → its own /capabilities/X page. The right-edge
   arrow + hover background lift make it clear the row is clickable. */
.sr-cap{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px 10px 9px;border-radius:10px;
  background:rgba(0,0,0,.025);
  font-size:13px;color:#1d1d1f;font-weight:400;
  letter-spacing:-.005em;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease;
}
.sr-cap:hover{
  background:rgba(115,75,242,.06);
  border-color:rgba(115,75,242,.18);
}
.sr-cap-icon{
  width:22px;height:22px;border-radius:6px;flex-shrink:0;
  background:rgba(115,75,242,.1);color:#5a35d6;
  display:inline-flex;align-items:center;justify-content:center;
}
.sr-cap-icon svg{width:13px;height:13px;display:block;}
.sr-cap-label{flex:1;min-width:0;}
/* Replaces the static green check — a chevron arrow that nudges right on hover
   is the universal "this links somewhere" cue. */
.sr-cap-arrow{
  width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.05);color:rgba(0,0,0,.4);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .2s ease, color .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.sr-cap-arrow svg{width:10px;height:10px;display:block;}
.sr-cap:hover .sr-cap-arrow{
  background:#734BF2;color:#fff;transform:translateX(2px);
}

/* Throat-to-choke summary card — focused on the operating model, not a dollar saved */
.sr-throat{
  margin-top:20px;padding:18px 20px;
  border-radius:12px;
  background:#0a0a0a;
  color:#efece6;
}
.sr-throat-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;text-align:center;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);
}
.sr-throat-stat{display:flex;flex-direction:column;gap:4px;}
.sr-throat-num{
  font-size:28px;font-weight:400;color:#efece6;letter-spacing:-.02em;line-height:1;
  font-family:Muoto,sans-serif;
}
.sr-throat-label{
  font-size:10.5px;color:rgba(239,236,230,.55);
  letter-spacing:0;line-height:1.3;
}
.sr-throat-tag{
  margin-top:14px;text-align:center;
  font-size:11px;font-weight:500;color:rgba(239,236,230,.7);
  letter-spacing:.04em;
}

/* RIGHT SIDE: Growigami (alive) */
.disc-right-label{
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#34c759;margin-bottom:12px;
}
.disc-right-card{
  background:#fff;border-radius:16px;
  padding:32px 28px;
  box-shadow:0 4px 32px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
}
.disc-profile{display:flex;align-items:center;gap:14px;margin-bottom:0;}
.disc-photo{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,0,0,.04);}
.disc-name{font-size:17px;font-weight:600;color:#1d1d1f;letter-spacing:-.02em;}
.disc-role{font-size:12px;color:rgba(0,0,0,.45);margin-top:2px;}
.disc-company{font-size:11px;color:rgba(0,0,0,.2);margin-top:1px;}
.disc-match-badge{
  margin-left:auto;font-size:28px;font-weight:300;color:#34c759;letter-spacing:-.03em;
}
.disc-sep{height:1px;background:rgba(0,0,0,.05);margin:18px 0;}

/* Warm path cards */
.disc-path{
  background:rgba(52,199,89,.015);border:1px solid rgba(52,199,89,.07);
  border-radius:12px;padding:16px 18px;margin-bottom:10px;
}
.disc-path-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.disc-path-dot{width:8px;height:8px;border-radius:50%;background:#34c759;flex-shrink:0;}
.disc-path-type{font-size:13px;font-weight:600;color:rgba(0,0,0,.5);}

/* Connection chain */
.disc-path-chain{display:flex;align-items:center;gap:0;overflow-x:auto;}
.disc-chain-node{
  font-size:10px;font-weight:500;color:rgba(0,0,0,.45);text-align:center;
  background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:8px;padding:8px 12px;flex-shrink:0;line-height:1.4;
}
.disc-chain-node span{font-size:9px;color:rgba(0,0,0,.2);font-weight:400;}
.disc-chain-you{background:rgba(0,0,0,.03);color:rgba(0,0,0,.3);font-weight:600;}
.disc-chain-target{background:rgba(52,199,89,.06);border-color:rgba(52,199,89,.15);color:#22863a;}
.disc-chain-line{
  width:20px;height:0;flex-shrink:0;
  border-top:1.5px dashed rgba(0,0,0,.1);
}
.disc-chain-line-green{border-color:rgba(52,199,89,.3);}

/* Extra intel row */
.disc-intel-row{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;}
.disc-intel-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;background:#f9f7f3;border-radius:10px;
}
.disc-intel-icon{font-size:18px;flex-shrink:0;line-height:1;}
.disc-intel-title{font-size:11px;font-weight:600;color:rgba(0,0,0,.45);}
.disc-intel-val{font-size:11px;color:rgba(0,0,0,.3);margin-top:1px;}
.disc-intel-tag{
  font-size:9px;font-weight:600;padding:4px 10px;border-radius:5px;
  margin-left:auto;flex-shrink:0;
}

/* Result badge */
.disc-result{
  font-size:12px;font-weight:600;color:#fff;
  background:#34c759;border-radius:20px;
  padding:10px 24px;display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 0 20px rgba(52,199,89,.25);
}
.disc-result-wrap{text-align:center;margin-top:18px;}

/* Discovery reveal animation */
.disc-reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
.disc-reveal.visible{opacity:1;transform:translateY(0);}

/* Services (orbit layout) */
.section-services-cream{
  background:linear-gradient(to bottom,#f1ebdc 0%,#e8e1cd 30%,#e8e1cd 100%);
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:80px 24px;
  position:relative;
}
.section-services-cream::before{
  content:'';position:absolute;inset:0;
  background-image:url('assets/paper-bg.png');
  background-size:cover;background-position:center;
  background-blend-mode:multiply;
  mask-image:linear-gradient(to bottom,transparent 0%,black 40%,black 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 40%,black 100%);
  opacity:.6;pointer-events:none;
}
.section-services-cream > div{margin:0 auto;max-width:1100px;width:100%;}
.orbit-wrap{
  position:relative;width:600px;height:600px;margin:0 auto;
  transform:scale(var(--orbit-scale,1));transform-origin:center center;
}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
/* Rings */
.orbit-ring{
  position:absolute;border-radius:50%;border:1px solid rgba(0,0,0,.04);
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.orbit-ring-1{width:320px;height:320px;}
.orbit-ring-2{width:500px;height:500px;}
/* Center prospect */
.orbit-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;z-index:2;
  background:#fff;border-radius:16px;padding:24px 28px;
  box-shadow:0 4px 24px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
}
.orbit-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,0,0,.04);margin-bottom:10px;}
.orbit-center-name{font-size:15px;font-weight:600;color:#1d1d1f;}
.orbit-center-role{font-size:11px;color:rgba(0,0,0,.4);margin-top:2px;}
.orbit-center-company{font-size:10px;color:rgba(0,0,0,.2);margin-top:1px;}
.orbit-hub{display:flex;align-items:center;justify-content:center;}
/* Logo SVG paths are fill="white" by default — force black on the cream section bg. */
.orbit-hub-logo{height:34px;width:auto;display:block;filter:brightness(0);}
/* Orbiting nodes - positioned around circle (r=250px from center) */
.orbit-node{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;
  transform:translate(-50%,-50%);z-index:2;cursor:pointer;
}
.orbit-node-icon{
  width:56px;height:56px;border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
  position:relative;
}
.orbit-node:hover .orbit-node-icon{transform:scale(1.15);box-shadow:0 6px 20px rgba(0,0,0,.1);}
.orbit-node-label{
  font-size:10px;font-weight:500;color:rgba(0,0,0,.45);text-align:center;line-height:1.3;white-space:nowrap;
}
/* Positions: 6 nodes evenly around a circle, r=250, center at 300,300 */
.orbit-n1{left:300px;top:50px;}
.orbit-n2{left:425px;top:83px;}
.orbit-n3{left:517px;top:175px;}
.orbit-n4{left:550px;top:300px;}
.orbit-n5{left:517px;top:425px;}
.orbit-n6{left:425px;top:517px;}
.orbit-n7{left:300px;top:550px;}
.orbit-n8{left:175px;top:517px;}
.orbit-n9{left:83px;top:425px;}
.orbit-n10{left:50px;top:300px;}
.orbit-n11{left:83px;top:175px;}
.orbit-n12{left:175px;top:83px;}
/* Rotating container wraps all nodes + lines */
.orbit-nodes{
  position:absolute;inset:0;width:600px;height:600px;
  transform-origin:300px 300px;
}
.orbit-node-inner{
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.orbit-lines-inner{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* === Everything hidden by default === */
.orbit-center{opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.orbit-ring{opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .6s ease,transform .6s ease;}
.orbit-lines-inner{opacity:0;transition:opacity .5s ease;}
.orbit-node-inner{opacity:0;transform:scale(.4);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);}

/* === When entered: everything becomes visible with staggered delays === */
.orbit-entered .orbit-center{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.1s;}
.orbit-entered .orbit-ring-1{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.3s;}
.orbit-entered .orbit-ring-2{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.5s;}
.orbit-entered .orbit-lines-inner{opacity:1;transition-delay:.6s;}
.orbit-entered .orbit-n1 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:.7s;}
.orbit-entered .orbit-n2 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:.8s;}
.orbit-entered .orbit-n3 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:.9s;}
.orbit-entered .orbit-n4 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:1s;}
.orbit-entered .orbit-n5 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:1.1s;}
.orbit-entered .orbit-n6 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:1.2s;}
.orbit-entered .orbit-n7 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:1.3s;}
.orbit-entered .orbit-n8 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:1.4s;}
.orbit-entered .orbit-n9 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:1.5s;}
.orbit-entered .orbit-n10 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:1.6s;}
.orbit-entered .orbit-n11 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:1.7s;}
.orbit-entered .orbit-n12 .orbit-node-inner{opacity:1;transform:scale(1);transition-delay:1.8s;}

/* === Rotation starts via JS after entrance completes === */
@keyframes orbit-rotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes orbit-counter{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}

/* Mobile/iPad: orbit collapses to a clean static grid of capability cards.
   No animation, no magnetic effect, no rotation — the same 12 capabilities
   stay readable and tappable. */
@media(max-width:1024px){
  .section-services-cream{min-height:0;padding:80px 24px;}
  .orbit-wrap{
    position:static;width:100%;max-width:760px;height:auto;margin:0 auto;
    transform:none !important;
  }
  .orbit-ring,.orbit-lines,.orbit-lines-inner,.orbit-center{display:none !important;}
  .orbit-nodes{
    position:static;width:100%;height:auto;
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
    transform:none !important;animation:none !important;
  }
  .orbit-node{
    position:static;transform:none;cursor:default;
  }
  .orbit-node-inner{
    flex-direction:row;align-items:center;gap:12px;
    opacity:1 !important;transform:none !important;
    animation:none !important;transition:none !important;
    padding:14px;background:#fff;border-radius:12px;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
    text-align:left;width:100%;
  }
  .orbit-node-icon{
    width:36px;height:36px;border-radius:9px;flex-shrink:0;
    box-shadow:none;
  }
  .orbit-node-icon svg{width:18px;height:18px;}
  .orbit-node-label{
    font-size:12.5px;line-height:1.3;text-align:left;
    white-space:normal;color:rgba(0,0,0,.8);
  }
  .orbit-node-label br{display:none;}
}
@media(max-width:680px){
  .orbit-nodes{grid-template-columns:repeat(2,1fr);gap:10px;}
  .orbit-node-inner{padding:12px;}
}
@media(max-width:380px){
  .orbit-nodes{grid-template-columns:1fr;}
}

/* Case study — dark, full-width, impactful */
.section-results{background:#000;padding:160px 24px;}

/* DIFFERENTIATION TABLE — light interlude, transparent so body theme drives bg */
.section-diff{background:transparent;position:relative;overflow:hidden;}

/* Origami decorative accents — bigger, no shadow, spread across both light sections.
   Initial opacity 0; JS slides + fades them in on scroll-enter. */
.origami-decor{
  position:absolute;
  pointer-events:none;
  opacity:0;
  z-index:0;
  user-select:none;
  will-change:transform,opacity;
}
/* Differentiation section: rocket top-right (replaced crane), plant bottom-left */
.origami-rocket{
  width:clamp(200px,20vw,300px);
  top:6%;right:-2%;
  transform:rotate(18deg);
}
.origami-plant{
  width:clamp(180px,18vw,280px);
  bottom:6%;left:-3%;
  transform:rotate(-6deg);
}

/* Speed section — one origami per group, spread vertically. Pulled in from
   the edge so each piece is more visible. */
.origami-airplane{
  width:clamp(190px,20vw,300px);
  top:10%;right:1%;
  transform:rotate(-8deg);
}
.origami-piggy{
  width:clamp(170px,17vw,250px);
  top:46%;left:1%;
  transform:rotate(-4deg);
}
.origami-award{
  width:clamp(150px,15vw,220px);
  bottom:8%;right:0;
  transform:rotate(6deg);
}

.section-speed{overflow:hidden;}
.section-diff > div,
.section-speed > div{position:relative;z-index:1;}

@media(max-width:900px){
  .origami-rocket{width:140px;top:4%;right:-3%;}
  .origami-plant{width:130px;bottom:3%;left:-6%;}
  .origami-airplane{width:140px;top:5%;right:0;}
  .origami-piggy{width:120px;top:45%;left:0;}
  .origami-award{width:110px;bottom:4%;right:-2%;}
}
@media(max-width:600px){
  .origami-decor{opacity:.32;}
}

.diff-wrap{
  position:relative;
  font-family:Muoto,sans-serif;
}
/* The dark column block sits behind the table aligned to the Growigami column.
   Computed width 22% matches the .diff-th-us column allotment. */
.diff-us-column{
  position:absolute;
  top:-22px;bottom:-22px;
  /* col-row = 30%, col-us = 22% — dark panel sits in column 2, right after the row labels */
  left:30%;
  width:22%;
  background:linear-gradient(180deg,#1d1d1f 0%,#0e0e10 100%);
  border-radius:18px;
  box-shadow:0 28px 60px rgba(0,0,0,.18),0 6px 16px rgba(0,0,0,.1);
  pointer-events:none;
  z-index:0;
}
.diff-th-logo{
  display:block;height:18px;width:auto;margin:0 auto;
  filter:brightness(0) invert(1);
  opacity:.95;
}
/* Each alternative column header is a link → its own /compare/X comparison page.
   Arrow + underline-on-hover make the affordance obvious. */
.diff-th-link{
  display:inline-flex;align-items:center;gap:6px;
  color:inherit;text-decoration:none;
  padding:4px 8px;border-radius:6px;
  transition:color .2s ease, background .2s ease;
  font-size:11px;letter-spacing:.12em;
}
.diff-th-link svg{
  width:11px;height:11px;
  opacity:.4;
  transition:opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.diff-th-link:hover{
  color:#1d1d1f;
  background:rgba(0,0,0,.04);
}
.diff-th-link:hover svg{opacity:1;transform:translateX(2px);}

.diff-table{
  position:relative;z-index:1;
  width:100%;border-collapse:collapse;border-spacing:0;
  font-family:Muoto,sans-serif;
  table-layout:fixed;
}
.diff-table colgroup col.col-row{width:30%;}
.diff-table colgroup col.col-alt{width:16%;}
.diff-table colgroup col.col-us{width:22%;}

.diff-table thead th{
  font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(0,0,0,.4);
  text-align:center;padding:0 0 22px;
  border-bottom:1px solid rgba(0,0,0,.08);
  vertical-align:bottom;
}
.diff-table thead th:first-child{text-align:left;}
.diff-th-empty{}
.diff-th-us{
  color:#efece6 !important;font-weight:600;
  border-bottom-color:transparent !important;
  padding-top:32px !important;
}

.diff-table tbody th{
  font-size:15px;font-weight:500;
  color:#1d1d1f;letter-spacing:-.01em;
  text-align:left;padding:22px 16px 22px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
  vertical-align:middle;
}
.diff-table tbody td{
  font-size:12px;font-weight:400;line-height:1.4;
  color:rgba(0,0,0,.55);
  padding:22px 10px;
  border-bottom:1px solid rgba(0,0,0,.06);
  vertical-align:middle;
  text-align:center;
}
.diff-table tbody td em{
  font-style:normal;
  display:block;
  font-size:11px;
  color:rgba(0,0,0,.42);
  margin-top:6px;
  line-height:1.35;
}
.diff-table tbody tr:last-child th,
.diff-table tbody tr:last-child td{border-bottom:none;}

/* Iconographic markers replace text dashes. Cell can have .diff-yes, .diff-no, .diff-partial.
   Solid fills, no borders — the symbol carries the meaning, the chrome shouldn't compete. */
.diff-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  font-size:13px;font-weight:600;line-height:1;
  flex-shrink:0;color:#fff;
}
.diff-no .diff-mark{
  background:#d4d2cd;color:#fff;
}
.diff-partial .diff-mark{
  background:#f59e0b;color:#fff;
}

/* Growigami column — dark cells with green checks. Text is cream. */
.diff-td-us{
  color:#efece6 !important;
  border-bottom-color:rgba(255,255,255,.06) !important;
  background:transparent;
  position:relative;
}
.diff-table tbody tr:last-child .diff-td-us{border-bottom:none !important;}
.diff-td-us strong{
  display:block;
  font-weight:500;color:#efece6;
  font-size:13px;letter-spacing:-.005em;
  margin-top:8px;
}
.diff-td-us .diff-mark{
  background:#734BF2;color:#fff;
}

.diff-footnote{
  margin-top:64px;text-align:center;
  font-size:13px;color:rgba(0,0,0,.5);
  font-weight:300;font-style:italic;
  max-width:680px;margin-left:auto;margin-right:auto;line-height:1.55;
}

/* Mobile: each row collapses to a self-contained card. The 4 alternatives stack
   inside as labeled rows; Growigami sits in its own dark inset at the bottom of
   each card so it visually wins on every comparison without horizontal scroll. */
@media(max-width:920px){
  .diff-wrap{overflow:visible;}
  .diff-us-column{display:none;}
  .diff-table,.diff-table thead,.diff-table tbody,.diff-table tr,
  .diff-table th,.diff-table td,.diff-table colgroup,.diff-table col{
    display:block;width:100%;
  }
  .diff-table colgroup{display:none;}
  .diff-table thead{display:none;}
  .diff-table tbody tr{
    background:#fff;border-radius:14px;
    padding:18px 18px 14px;margin-bottom:14px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    border:1px solid rgba(0,0,0,.06);
  }
  .diff-table tbody tr:last-child{margin-bottom:0;}
  .diff-table tbody th{
    font-size:15px;font-weight:600;color:#1d1d1f;
    padding:0 0 12px;
    border-bottom:1px solid rgba(0,0,0,.07);
    margin-bottom:10px;text-align:left;letter-spacing:-.005em;
  }
  .diff-table tbody td{
    display:flex;align-items:center;gap:12px;
    padding:8px 0;border-bottom:none;font-size:12.5px;
    text-align:left;color:rgba(0,0,0,.55);
  }
  .diff-table tbody td::before{
    content:attr(data-label);
    flex:0 0 38%;
    font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:rgba(0,0,0,.45);
  }
  .diff-table tbody td .diff-mark{flex-shrink:0;}
  .diff-table tbody td em{
    display:inline;margin:0;font-size:12px;color:rgba(0,0,0,.55);line-height:1.4;
    flex:1;min-width:0;
  }
  .diff-table tbody td.diff-no::after,
  .diff-table tbody td.diff-no:not(:has(em))::after{
    content:'Doesn\'t have it';
    font-size:11px;color:rgba(0,0,0,.35);font-style:italic;
  }
  /* Growigami row — promoted to a dark inset card at the bottom */
  .diff-table tbody td.diff-td-us{
    background:#1d1d1f;border-radius:10px;
    padding:14px 14px !important;
    margin-top:10px;
    color:#efece6 !important;
    border-bottom:none !important;
  }
  .diff-table tbody td.diff-td-us::before{color:rgba(239,236,230,.5);}
  .diff-table tbody td.diff-td-us strong{
    margin-top:0;display:inline;color:#efece6;font-size:13px;flex:1;
  }
}

/* SPEED · COST · QUALITY — light interlude, transparent so body theme drives bg */
.section-speed{background:transparent;position:relative;}

/* Triangle teaser — the big equation */
.triangle-teaser{
  display:flex;align-items:baseline;justify-content:center;
  flex-wrap:wrap;gap:clamp(10px,1.5vw,18px);
  margin:0 auto 80px;padding:32px 24px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  max-width:1000px;
}
.tt-word{
  font-family:Muoto,sans-serif;
  font-size:clamp(24px,3.2vw,44px);
  font-weight:300;letter-spacing:-.025em;
  color:rgba(239,236,230,.55);line-height:1;
}
.tt-word-hero{
  color:#efece6;font-weight:400;
}
.tt-plus{
  font-size:clamp(22px,2.6vw,36px);
  color:rgba(165,239,217,.5);
  opacity:.6;line-height:1;
}
.tt-eq{
  font-family:Muoto,sans-serif;
  font-size:clamp(22px,2.6vw,36px);
  color:rgba(239,236,230,.3);
  font-weight:300;line-height:1;
  margin:0 clamp(4px,.5vw,10px);
}

/* Group header — tagline only, no dimension label or number */
.speed-group{margin-bottom:72px;}
.speed-group:last-of-type{margin-bottom:0;}
.speed-group-header{
  padding-bottom:20px;margin-bottom:8px;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.speed-group-title{
  font-family:Muoto,sans-serif;
  font-size:clamp(22px,2.4vw,32px);font-weight:400;
  letter-spacing:-.02em;color:#1d1d1f;line-height:1.15;
}

.speed-grid{
  display:flex;flex-direction:column;
}
.speed-row{
  display:grid;
  grid-template-columns:minmax(180px,240px) 1fr minmax(120px,160px);
  gap:28px;align-items:center;
  padding:28px 0;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.speed-row:last-child{border-bottom:none;}
.speed-label-name{
  font-family:Muoto,sans-serif;font-size:clamp(17px,1.5vw,22px);
  font-weight:400;color:#1d1d1f;letter-spacing:-.015em;line-height:1.2;
}
.speed-label-unit{
  font-size:11px;color:rgba(0,0,0,.4);
  letter-spacing:.06em;text-transform:uppercase;margin-top:4px;
}
.speed-bars{
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.speed-bar-row{
  display:grid;
  grid-template-columns:minmax(120px,140px) 1fr minmax(70px,100px);
  gap:14px;align-items:center;
}
.speed-bar-caption{
  font-size:11px;color:rgba(0,0,0,.45);
  letter-spacing:.02em;white-space:nowrap;
}
.speed-bar-track{
  position:relative;height:18px;
  background:rgba(0,0,0,.05);border-radius:4px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
  overflow:hidden;
}
.speed-bar{
  height:100%;border-radius:4px;
  width:var(--w);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.speed-row.in-view .speed-bar{transform:scaleX(1);}

/* Agency (slow) — flat muted gray, no 3D treatment so the Growigami bar
   reads as the premium one */
.speed-bar-slow{
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.18) 100%);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.05);
  transition-delay:.1s;
}

/* Growigami (fast) — Apple-style 3D purple bar:
   - vertical gradient peaking bright upper-third (creates the "tube" feel)
   - bright inset highlight on top edge
   - inset bottom shadow for depth
   - outer purple glow halo
   - subtle drop shadow */
.speed-bar-fast{
  background:linear-gradient(
    180deg,
    #b69aff 0%,
    #9376ff 28%,
    #734bf2 65%,
    #5a35d6 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 2px 4px rgba(255,255,255,.18),
    inset 0 -2px 3px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 2px 10px rgba(115,75,242,.45),
    0 1px 3px rgba(0,0,0,.18);
  transition-delay:.3s;
}
.speed-bar-time{
  font-family:Muoto,sans-serif;font-size:13px;
  color:rgba(0,0,0,.55);font-weight:400;letter-spacing:-.005em;
  text-align:right;white-space:nowrap;
}
.speed-bar-row:last-child .speed-bar-time{color:#1d1d1f;font-weight:500;}
.speed-mult{
  text-align:right;
  padding:6px 0 6px 20px;
  border-left:1px solid rgba(0,0,0,.1);
}
.speed-mult-num{
  font-family:Muoto,sans-serif;font-size:clamp(32px,3.6vw,52px);
  font-weight:300;color:#1d1d1f;letter-spacing:-.035em;line-height:1;
  white-space:nowrap;
}
.speed-mult-label{
  font-size:11px;color:rgba(0,0,0,.4);
  letter-spacing:.08em;text-transform:uppercase;margin-top:4px;
}
.speed-footnote{
  margin-top:40px;text-align:center;
  font-size:12px;color:rgba(0,0,0,.4);
  font-weight:300;letter-spacing:0;max-width:640px;
  margin-left:auto;margin-right:auto;line-height:1.6;
}
@media(max-width:820px){
  .speed-row{
    grid-template-columns:1fr;gap:16px;padding:24px 0;
  }
  .speed-bar-row{
    grid-template-columns:minmax(96px,116px) 1fr minmax(56px,80px);
    gap:10px;
  }
  .speed-bar-caption{font-size:10.5px;}
  .speed-mult{
    border-left:none;
    border-top:1px solid rgba(0,0,0,.08); /* was white — invisible on cream bg */
    padding:14px 0 0;text-align:left;
    display:flex;align-items:baseline;gap:10px;
  }
  .speed-mult-label{margin-top:0;}
  .section-speed > div{padding-left:20px;padding-right:20px;}
}
.case-quote{
  font-size:clamp(24px,4vw,44px);font-weight:300;font-style:italic;
  color:#efece6;line-height:1.35;max-width:800px;margin:0 auto 48px;
  text-align:center;letter-spacing:-.02em;
}
.case-attr{font-size:14px;font-weight:400;color:rgba(255,255,255,.25);text-align:center;margin-bottom:56px;}
.case-stats{display:flex;justify-content:center;gap:64px;flex-wrap:wrap;}
.case-stat{text-align:center;}
.case-stat span{display:block;font-size:clamp(36px,5vw,56px);font-weight:300;color:#efece6;letter-spacing:-.03em;line-height:1;margin-bottom:6px;}
.case-stat-label{font-size:13px;color:rgba(255,255,255,.2);font-weight:400;}
.case-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.85);
  padding:10px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  transition:background .2s,border-color .2s,color .2s;
}
.case-link:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;text-decoration:none;}

/* Featured case study card — image-led, two-column on desktop.
   The exec portrait carries the emotional weight; copy carries the proof. */
.case-feature{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  margin:0 auto 32px;
  max-width:1200px;
  display:grid;grid-template-columns:1.05fr 1fr;
  overflow:hidden;
  text-decoration:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1),
             border-color .25s ease,
             box-shadow .35s ease;
}
.case-feature:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.case-feature-image{
  position:relative;
  min-height:520px;
  background:#0e0e10;
  overflow:hidden;
}
.case-feature-image img{
  width:100%;height:100%;
  object-fit:cover;object-position:30% center;
  display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.case-feature:hover .case-feature-image img{transform:scale(1.04);}
.case-feature-image-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    transparent 0%,
    transparent 55%,
    rgba(10,10,12,.55) 85%,
    rgba(10,10,12,.85) 100%);
  pointer-events:none;
}
.case-feature-image-credit{
  position:absolute;left:24px;bottom:22px;right:24px;
  z-index:2;color:#efece6;
}
.case-feature-image-credit-name{font-size:16px;font-weight:500;letter-spacing:-.01em;}
.case-feature-image-credit-title{font-size:12px;color:rgba(239,236,230,.65);margin-top:2px;}
.case-feature-content{
  padding:40px 44px;
  display:flex;flex-direction:column;
}
/* Meta row: logo on the far left, tags pushed to the far right via auto margin */
.case-feature-meta{
  display:flex;align-items:center;
  gap:16px;
  margin-bottom:32px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.case-feature-meta-tags{
  margin-left:auto;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.case-feature-meta-tag{
  padding:5px 11px;border-radius:999px;
  background:rgba(115,75,242,.16);color:#c4b3ff;
  letter-spacing:.08em;line-height:1;
}
.case-feature-meta-tag.muted{
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.08);
}
.case-feature-logo{
  height:28px;width:auto;
  filter:brightness(0) invert(1);opacity:.95;
  flex-shrink:0;
}
.case-feature-body{display:flex;flex-direction:column;gap:32px;}
/* Quote IS the hero of this card. Hanging brand-purple curly mark in the left
   gutter (negative margin), generous line-height for breathing, slightly larger
   so it earns the visual weight, and text-wrap:balance for tidy line breaks. */
.case-feature-quote{
  position:relative;
  margin:0;padding:0;
  padding-left:22px;
  font-size:clamp(20px,2.1vw,26px);
  font-weight:300;line-height:1.5;letter-spacing:-.005em;
  color:rgba(239,236,230,.95);
  text-wrap:balance;
  quotes:"\201C" "\201D" "\2018" "\2019";
}
.case-feature-quote::before{
  content:open-quote;
  position:absolute;left:-2px;top:.06em;
  color:rgba(115,75,242,.7);
  font-size:1.5em;line-height:1;
  font-family:Georgia, "Times New Roman", serif;
  font-weight:400;
}
.case-feature-quote::after{content:close-quote;}
@media(max-width:560px){
  .case-feature-quote{padding-left:18px;font-size:18px;line-height:1.55;}
  .case-feature-quote::before{font-size:1.35em;}
  .case-feature-body{gap:26px;}
}
@media(max-width:560px){
  .case-feature-meta{flex-direction:column;align-items:flex-start;gap:14px;}
  .case-feature-meta-tags{margin-left:0;justify-content:flex-start;}
}
.case-feature-attribution{
  display:flex;align-items:center;gap:14px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.06);
}
.case-feature-headshot{
  width:48px;height:48px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.case-feature-headshot.placeholder{
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.3);
}
.case-feature-headshot.placeholder svg{width:22px;height:22px;}
.case-feature-attr-name{font-size:14px;font-weight:500;color:#efece6;letter-spacing:-.005em;}
.case-feature-attr-title{font-size:12px;color:rgba(239,236,230,.45);margin-top:2px;}

/* Right column — stats inline below quote, CTA pinned to bottom */
.case-feature-stats{
  margin-top:28px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.07);
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.case-feature-stat{display:flex;flex-direction:column;gap:4px;}
.case-feature-stat-num{
  font-size:30px;font-weight:300;letter-spacing:-.025em;line-height:1;
  color:#efece6;font-family:Muoto,sans-serif;
}
.case-feature-stat-label{
  font-size:11.5px;color:rgba(239,236,230,.5);line-height:1.35;
}
.case-feature-cta{
  margin-top:auto;padding-top:28px;
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:#c4b3ff;
  letter-spacing:-.005em;
  align-self:flex-start;
}
.case-feature-cta svg{
  width:14px;height:14px;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.case-feature:hover .case-feature-cta svg{transform:translateX(4px);}

@media(max-width:880px){
  .case-feature{grid-template-columns:1fr;}
  .case-feature-image{min-height:280px;aspect-ratio:16/10;}
  .case-feature-content{padding:32px 28px;}
}

/* Results grid - supporting case cards */
.results-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  padding:0 24px;
}
.result-card{
  display:flex;flex-direction:column;gap:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;padding:28px 24px;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  min-height:340px;
}
.result-card:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-2px);
}
.result-card-tag{
  font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.35);
}
.result-card-logo{
  height:22px;width:auto;opacity:.85;align-self:flex-start;
  filter:brightness(0) invert(1);max-width:140px;object-fit:contain;
}
.result-card-headline{
  font-family:Muoto,sans-serif;font-size:22px;font-weight:400;
  line-height:1.2;color:#efece6;letter-spacing:-.02em;margin-top:8px;
}
.result-card-body{
  font-size:14px;line-height:1.55;color:rgba(255,255,255,.45);
  font-weight:300;flex:1;
}
.result-card-meta{
  font-size:11px;color:rgba(255,255,255,.3);
  letter-spacing:.02em;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}
/* iPad landscape (901–1100): 2 columns so cards don't get cramped at 312px each */
@media(max-width:1100px) and (min-width:901px){
  .results-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .results-grid{grid-template-columns:1fr;}
  .result-card{min-height:0;}
}

/* CTA section */
/* .section-cta padding is set in the main rule above */

/* Tablet: stack-replacement two-column collapses to single column with each
   column getting full breathing room. Faqs + blog also stack. */
@media(max-width:1024px){
  .disc-split{grid-template-columns:1fr;gap:24px;}
  .section-discovery{padding-left:20px;padding-right:20px;}
  .stats-row{gap:24px;}
  .case-stats{gap:24px;flex-wrap:wrap;}
}
@media(max-width:768px){
  .blog-editorial{grid-template-columns:1fr;}
  .blog-card{flex-direction:column;}
  .blog-card-img{width:100%;min-height:120px;}
  .mega-menu-grid{grid-template-columns:1fr;gap:24px;}
}

/* Mega menus */
/* MEGA MENU — typography-driven, OpenAI-style. Darker, heavy glass blur */
.mega-menu{
  position:fixed;bottom:80px;left:3.5%;right:3.5%;
  max-width:calc((1200px + 8em) * 0.95);margin:0 auto;
  background:rgba(8,8,10,.62);
  -webkit-backdrop-filter:blur(48px) saturate(1.6);
          backdrop-filter:blur(48px) saturate(1.6);
  border:1px solid rgba(255,255,255,.07);
  border-radius:24px;
  z-index:89;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 -10px 60px rgba(0,0,0,.5),
    0 4px 20px rgba(0,0,0,.3);
  overflow:hidden;
  /* Apple-style bounce reveal: kept in DOM, hidden via opacity/visibility,
     pops up from where it sits attached to the nav (transform-origin bottom).
     Same iOS spring curve as the modal: .34, 1.56, .64, 1 */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(32px) scale(.96);
  transform-origin:50% 100%;
  transition:
    opacity .28s cubic-bezier(.4,0,.4,1),
    transform .6s cubic-bezier(.34,1.56,.64,1),
    visibility 0s linear .6s;
}
.mega-menu.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:
    opacity .22s cubic-bezier(.4,0,.4,1),
    transform .62s cubic-bezier(.34,1.56,.64,1),
    visibility 0s linear 0s;
}
.mega-menu-inner{padding:48px 56px;}
.mega-menu-items{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 64px;
}
.mega-menu-col-title{
  font-size:11px;font-weight:500;
  color:rgba(255,255,255,.32);
  letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:28px;
  grid-column:1/-1;
}
.mega-menu-item{
  display:block;cursor:pointer;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:transform .3s cubic-bezier(.16,1,.3,1),padding .3s ease;
}
.mega-menu-item:hover{
  transform:translateX(6px);
}
/* Drop the icons + face images for a clean typography-only look */
.mega-menu-icon,.mega-menu-face{display:none;}
.mega-menu-item > div:not(.mega-menu-icon):not(.mega-menu-face){display:block;}
.mega-menu-item-title{
  font-family:Muoto,sans-serif;
  font-size:clamp(28px,2.6vw,40px);
  font-weight:400;
  color:rgba(239,236,230,.9);
  letter-spacing:-.025em;line-height:1.1;
  transition:color .25s ease;
}
.mega-menu-item:hover .mega-menu-item-title{
  color:#fff;
}
.mega-menu-item-sub{
  font-size:12px;
  color:rgba(255,255,255,.32);
  margin-top:6px;
  letter-spacing:0;line-height:1.4;
  font-weight:300;
}

/* FAQ section */
.section-faq{background:#000;padding:160px 24px;}
.faq-grid{max-width:800px;margin:40px auto 0;}
.faq-item{border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden;}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;cursor:pointer;
  font-size:16px;font-weight:500;color:#efece6;
  transition:color .2s;
}
.faq-q:hover{color:rgba(255,255,255,.6);}
.faq-q span{font-size:20px;color:rgba(255,255,255,.2);transition:transform .3s;font-weight:300;}
.faq-item.open .faq-q span{transform:rotate(45deg);}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s;
  font-size:14px;color:rgba(255,255,255,.4);line-height:1.7;
}
.faq-item.open .faq-a{max-height:400px;padding-bottom:20px;}

/* Blog section */
.section-blog{background:#000;padding:160px 24px;}
.blog-head{
  max-width:1200px;margin:0 auto 32px;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:16px;flex-wrap:wrap;
}
.blog-head-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:10px;
}
.blog-head-title{
  color:#efece6;font-size:clamp(24px,3vw,36px);font-weight:300;
  letter-spacing:-.02em;line-height:1.1;margin:0;
}
.blog-head-link{
  font-size:13px;color:rgba(255,255,255,.55);font-weight:500;
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;
  transition:color .2s ease;
}
.blog-head-link:hover{color:#fff;}
.blog-head-link svg{width:13px;height:13px;transition:transform .25s ease;}
.blog-head-link:hover svg{transform:translateX(3px);}

/* Editorial layout — text-first cards. Featured spans 2× the side cards on
   desktop; on mobile everything stacks full-width with comfortable padding. */
.blog-editorial{
  display:grid;grid-template-columns:1.4fr 1fr;gap:18px;
  max-width:1200px;margin:0 auto;
}
.blog-feature,
.blog-card{
  display:flex;flex-direction:column;
  text-decoration:none;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
  transition:transform .25s ease,
             border-color .25s ease,
             background .25s ease;
  cursor:pointer;
}
.blog-feature:hover,
.blog-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
}
.blog-feature{padding:32px 32px 28px;min-height:100%;}
.blog-card{padding:24px 26px;flex:1;}
.blog-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:18px;align-self:flex-start;line-height:1;
}
.blog-tag-featured{background:rgba(115,75,242,.18);color:#c4b3ff;}
.blog-tag-default{background:rgba(255,255,255,.06);color:rgba(239,236,230,.65);}
.blog-feature-title{
  font-size:clamp(22px,2.4vw,30px);font-weight:300;
  color:#efece6;line-height:1.2;letter-spacing:-.025em;
  margin:0 0 14px;
}
.blog-feature-excerpt{
  font-size:14.5px;font-weight:300;line-height:1.6;
  color:rgba(239,236,230,.55);margin:0 0 22px;flex:1;
}
.blog-feature-meta{
  font-size:11.5px;color:rgba(239,236,230,.4);
  display:flex;gap:10px;align-items:center;margin-top:auto;
}
.blog-feature-meta .dot{
  width:3px;height:3px;border-radius:50%;background:rgba(239,236,230,.25);
}
.blog-side{display:flex;flex-direction:column;gap:18px;}
.blog-card-title{
  font-size:16.5px;font-weight:400;color:#efece6;line-height:1.4;
  letter-spacing:-.01em;margin:0 0 14px;flex:1;
}
.blog-card-meta{
  font-size:11.5px;color:rgba(239,236,230,.4);
  display:flex;gap:10px;align-items:center;margin-top:auto;
}
.blog-card-meta .dot{
  width:3px;height:3px;border-radius:50%;background:rgba(239,236,230,.25);
}

@media(max-width:880px){
  .blog-editorial{grid-template-columns:1fr;gap:14px;}
  .blog-feature{padding:28px 24px 26px;}
  .blog-card{padding:22px 22px;}
}
body{padding-bottom:72px;}

/* Hero logo carousel */
.hero-logo-carousel{
  width:100%;max-width:1200px;overflow:hidden;margin:0 0 8px;
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.hero-logo-track{
  display:flex;align-items:center;
  animation:hero-logos 60s linear infinite;
  width:max-content;
}
.hero-logo-track img{
  flex-shrink:0;height:1.1rem;width:auto;
  padding-right:3rem;opacity:.3;
  filter:brightness(0) invert(1);
}
@keyframes hero-logos{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.hero-body{
  font-size:clamp(14px,1vw,16px);font-weight:300;
  color:rgba(255,255,255,.4);max-width:760px;
  text-align:center;line-height:1.6;margin-bottom:56px;margin-top:8px;
  display:flex;flex-direction:column;align-items:center;
  text-wrap:balance;
}
.hb-line{display:block;}
@media(max-width:560px){
  .hero-body{max-width:90vw;}
}

/* HERO NOTEBOOK — animated 16:9 video, black bg blends with hero */
.hero-notebook{
  position:relative;
  width:min(1200px,92vw);
  margin:20px auto 40px;
  aspect-ratio:16/9;
  perspective:1500px;
  opacity:0;transform:translateY(30px);
  animation:hero-in 1.2s cubic-bezier(.16,1,.3,1) .8s forwards;
}
.hero-notebook-video,
.hero-notebook-img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  border-radius:6px;
  background:#000;
  /* paper less yellow: drop saturation, push hue cooler, lift brightness */
  filter:saturate(.78) hue-rotate(-6deg) brightness(1.08);
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    0 12px 30px rgba(0,0,0,.38),
    0 4px 12px rgba(0,0,0,.28);
  transform-origin:center;
  will-change:transform;
}

/* Large desktop (1600+) */
@media(min-width:1600px){
  .hero-notebook{width:min(1280px,90vw);margin:24px auto 56px;}
}

/* Small laptop / iPad landscape (~900-1200px) */
@media(max-width:1200px){
  .hero-notebook{width:min(1000px,92vw);margin:18px auto 36px;}
}

/* iPad portrait (~720-900px) */
@media(max-width:900px){
  .hero-notebook{width:92vw;margin:16px auto 32px;}
  .hero-notebook-video,
  .hero-notebook-img{
    box-shadow:
      0 22px 50px rgba(0,0,0,.45),
      0 8px 18px rgba(0,0,0,.32);
  }
}

/* Mobile landscape / large phone (~480-720px) */
@media(max-width:720px){
  .hero-notebook{width:94vw;margin:14px auto 24px;}
}

/* Mobile portrait (≤480px) */
@media(max-width:480px){
  .hero-notebook{width:96vw;margin:12px auto 20px;}
  .hero-notebook-video,
  .hero-notebook-img{
    box-shadow:
      0 14px 32px rgba(0,0,0,.4),
      0 4px 10px rgba(0,0,0,.28);
  }
}

/* Unified vertical rhythm. Every full-width section uses the same padding
   scale at every breakpoint so the page reads as one publication, not a
   stack of cards with random spacing. */
@media(max-width:900px){
  .section-cream,.section-founders,.section-stack,.section-discovery,
  .section-results,.section-faq,.section-blog{
    padding-top:104px;padding-bottom:104px;
  }
  .section-cta{padding-top:0;padding-bottom:0;}
}
@media(max-width:600px){
  .section-cream,.section-founders,.section-stack,.section-discovery,
  .section-results,.section-faq,.section-blog{
    padding-top:72px;padding-bottom:72px;
  }
}

/* LIVE OPS COUNTER — editorial real-time hero */
.live-counter{
  position:relative;width:min(760px,94vw);
  margin:48px auto 0;padding:32px 0 28px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(30px);
  animation:hero-in 1.2s cubic-bezier(.16,1,.3,1) .8s forwards;
}
.lc-frame{display:flex;flex-direction:column;gap:6px;padding:0 8px;}
.lc-header{
  display:flex;align-items:center;gap:8px;
  font-family:Muoto,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(165,239,217,.7);
  margin-bottom:4px;
}
.lc-live-dot{
  width:7px;height:7px;border-radius:50%;background:#a5efd9;
  box-shadow:0 0 8px rgba(165,239,217,.6);
  animation:lc-pulse 1.8s ease-in-out infinite;
}
@keyframes lc-pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.5;transform:scale(.85);}
}
.lc-live-label{color:rgba(165,239,217,.7);}
.lc-time{
  margin-left:auto;color:rgba(255,255,255,.4);
  font-weight:400;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.lc-eyebrow{
  font-family:Muoto,sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.32);margin-bottom:14px;
}
.lc-row{
  display:grid;grid-template-columns:160px 1fr;
  gap:24px;align-items:baseline;
  padding:8px 12px;
  border-radius:6px;
  transition:background .6s ease;
}
.lc-num{
  font-family:Muoto,sans-serif;
  font-size:clamp(28px,3.2vw,46px);
  font-weight:300;letter-spacing:-.025em;line-height:1;
  color:#efece6;text-align:right;
  font-variant-numeric:tabular-nums;
  transition:color .35s ease,transform .25s cubic-bezier(.16,1,.3,1);
  display:inline-block;
}
.lc-label{
  font-size:14px;color:rgba(255,255,255,.55);
  font-weight:300;letter-spacing:0;line-height:1.4;
}
.lc-row.lc-tick{
  background:rgba(165,239,217,.05);
}
.lc-row.lc-tick .lc-num{
  color:#a5efd9;transform:scale(1.04);
}
.lc-foot{
  font-size:12px;color:rgba(255,255,255,.28);
  font-style:italic;text-align:right;margin-top:14px;
  letter-spacing:.01em;
}
@media(max-width:720px){
  .live-counter{padding:24px 0 22px;}
  .lc-frame{padding:0 4px;}
  .lc-row{grid-template-columns:100px 1fr;gap:16px;padding:6px 8px;}
  .lc-num{font-size:clamp(24px,7vw,34px);}
  .lc-label{font-size:13px;}
}

/* CHIP HERO — paper-craft die-shot of the "Growigami G1" growth engine */
.chip-hero{
  position:relative;width:min(1280px,94vw);
  height:clamp(440px,46vw,580px);
  margin:48px auto 0;
  opacity:0;transform:translateY(30px);
  animation:hero-in 1.2s cubic-bezier(.16,1,.3,1) .8s forwards;
}
.chip-stage{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}

/* THE CHIP */
.chip-body{
  position:relative;
  width:clamp(340px,40vw,500px);
  aspect-ratio:5/4;
  border-radius:22px;
  background:
    linear-gradient(145deg,#f5f0e8 0%,#d8cdbc 55%,#b6aa97 100%);
  box-shadow:
    0 50px 100px rgba(0,0,0,.55),
    0 20px 50px rgba(0,0,0,.4),
    0 6px 16px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.12);
  padding:10px;
  z-index:2;
}
.chip-body::before{
  content:'';position:absolute;inset:4px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  pointer-events:none;
}
.chip-body::after{
  /* Subtle paper grain overlay */
  content:'';position:absolute;inset:10px;
  border-radius:16px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.5;
}

.chip-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  gap:2px;
  height:100%;
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.08);
}
.chip-section{
  background:linear-gradient(145deg,#f7f3eb 0%,#e5dbc8 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;position:relative;padding:14px 12px;
}
.chip-section:nth-child(odd){
  background:linear-gradient(145deg,#f0ead9 0%,#dcd1bb 100%);
}
.cs-icon{
  width:clamp(26px,2.6vw,38px);
  height:clamp(26px,2.6vw,38px);
  opacity:.78;
}
.cs-tag{
  font-family:Muoto,sans-serif;
  font-size:9px;font-weight:600;letter-spacing:.16em;
  color:rgba(29,29,31,.45);text-transform:uppercase;
}

/* Center die — dark, Growigami branded */
.chip-center{
  background:linear-gradient(145deg,#1d1d1f 0%,#050507 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.4);
  gap:6px;
}
.chip-center-mark{
  width:30px;height:30px;border-radius:6px;
  filter:brightness(0) invert(1);
  opacity:.95;
}
.chip-center-name{
  font-family:Muoto,sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.22em;
  color:#efece6;text-transform:uppercase;margin-top:2px;
}
.chip-center-model{
  font-family:Muoto,sans-serif;
  font-size:8px;font-weight:400;letter-spacing:.14em;
  color:rgba(239,236,230,.4);text-transform:uppercase;
}

/* Wordmark under chip */
.chip-wordmark{
  position:absolute;bottom:-32px;left:50%;
  transform:translateX(-50%);
  font-family:Muoto,sans-serif;
  font-size:10px;font-weight:500;letter-spacing:.2em;
  color:rgba(239,236,230,.35);text-transform:uppercase;
  white-space:nowrap;
}
.chip-wordmark span{color:rgba(239,236,230,.7);font-weight:600;}

/* CALLOUTS */
.chip-callout{
  position:absolute;
  font-family:Muoto,sans-serif;
  color:#efece6;
  z-index:3;
  opacity:0;
  animation:chip-fade 1s ease 1.3s forwards;
  max-width:180px;
}
.cc-meta{
  font-size:10px;font-weight:500;letter-spacing:.08em;
  color:rgba(239,236,230,.35);text-transform:uppercase;
  margin-bottom:3px;
}
.cc-label{
  font-size:clamp(15px,1.3vw,20px);font-weight:400;
  letter-spacing:-.015em;color:#efece6;line-height:1.1;
}
.cc-sub{
  font-size:11px;color:rgba(239,236,230,.45);
  font-weight:300;margin-top:2px;line-height:1.3;
}

/* Callout positions */
.cc-tl{top:6%;left:3%;}
.cc-tc{top:0;left:50%;transform:translateX(-50%);text-align:center;}
.cc-tr{top:6%;right:3%;text-align:right;}
.cc-ml{top:50%;left:1%;transform:translateY(-50%);}
.cc-mr{top:50%;right:1%;transform:translateY(-50%);text-align:right;}
.cc-bl{bottom:12%;left:3%;}
.cc-bc{bottom:2%;left:50%;transform:translateX(-50%);text-align:center;}
.cc-br{bottom:12%;right:3%;text-align:right;}

/* Connecting hairlines (subtle) */
.chip-lines{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.chip-lines line{
  stroke:rgba(239,236,230,.14);
  stroke-width:.6;
  stroke-dasharray:2 3;
  fill:none;
}

@keyframes chip-fade{from{opacity:0;} to{opacity:1;}}

@media(max-width:1100px){
  .chip-callout{font-size:10px;max-width:130px;}
  .cc-label{font-size:14px;}
  .cc-sub{font-size:10px;}
}
@media(max-width:820px){
  .chip-hero{height:auto;padding:40px 0 60px;}
  .chip-stage{flex-direction:column;}
  .chip-body{width:min(88vw,360px);}
  .chip-callout{position:static;transform:none;max-width:none;
    text-align:center !important;margin:10px auto;}
  .chip-lines{display:none;}
}