:root {
    --gold: #f1c75b;
    --gold-2: #d99a3c;
    --gold-bright: #ffe6a3;
    --ink: #f4efe2;
    --muted: rgba(244,239,226,.55);
    --faint: rgba(244,239,226,.33);
    --line: rgba(255,255,255,.10);
    --gold-line: var(--wash-4);
    --glass: rgba(0,0,0,.3);
    --glass-2: rgba(255,255,255,.02);
    --btn-ink: #1c1404;
    --r1: 8px; --r2: 11px; --r3: 14px;
    --ease: cubic-bezier(.2,.7,.2,1);
  }

  /* accent washes — bucketed so both themes can retint them in one place */
  :root {
    --wash-1: rgba(241,199,91,.045);
    --wash-2: rgba(241,199,91,.07);
    --wash-3: rgba(241,199,91,.11);
    --wash-4: rgba(241,199,91,.20);
    --wash-5: rgba(241,199,91,.60);
    --page: #050505;
    --panel: #0a0a0a;
    --panel-2: rgba(9,9,9,.92);
    --cop-off: rgba(255,255,255,.02);
    --brand-ink: #FFFFFF;               /* the navy is 1.43:1 on #050505 */
  }

  /* Page material. Two tiles: a running-bond brick lattice (the brand, and the
     masonry read) and a sparse blueprint crosshair over it (the technical one).
     They are used as MASKS over a var()-driven colour rather than as images
     with the colour baked in, so a single tile serves both themes — only
     --tex-line / --tex-mark change. */
  :root {
    /* authored at final size — no viewBox, so mask-size must match the tile or
       the 1px strokes scale and blur */
    --tex-bricks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='56'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 .5h160M0 28.5h160'/%3E%3Cpath d='M.5 0v28M80.5 0v28'/%3E%3Cpath d='M40.5 28v28M120.5 28v28'/%3E%3C/g%3E%3C/svg%3E");
    --tex-marks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='280'%3E%3Cpath d='M160 133v14M153 140h14' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
    --tex-line: rgba(255,255,255,.05);
    --tex-mark: rgba(241,199,91,.15);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { margin: 0; padding: 0; background: #050505; }
  body {
    font-family: 'Manrope', system-ui, sans-serif; color: var(--ink);
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  ::selection { background: var(--wash-4); color: #fff; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4 { font-family: 'Manrope', sans-serif; }

  /* ambient */
  .orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; will-change: transform; }
  .orb { position: absolute; border-radius: 50%; filter: blur(60px); }
  .orb.a { top: -200px; left: -100px; width: 600px; height: 600px; background: radial-gradient(circle, var(--gold) 0%, transparent 60%); opacity: .08; animation: float1 20s ease-in-out infinite; }
  .orb.b { top: 40%; right: -200px; width: 800px; height: 800px; background: radial-gradient(circle, var(--gold-2) 0%, transparent 60%); opacity: .06; animation: float2 25s ease-in-out infinite; }
  /* Photo backdrop removed for contrast — a faint gold vignette gives depth for the glass to sit on. */
  .grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(90% 60% at 50% -8%, var(--wash-2) 0%, transparent 60%),
      radial-gradient(70% 50% at 100% 100%, rgba(217,154,60,.05) 0%, transparent 55%); }
  /* the brick + blueprint material rides on this same fixed ambient layer, so
     it costs no markup and stays below every section (the dark problem band
     paints over it, as do all the opaque cards) */
  .grid-bg::before, .grid-bg::after { content: ''; position: absolute; inset: 0; }
  .grid-bg::before {
    background-color: var(--tex-line);
    -webkit-mask-image: var(--tex-bricks); mask-image: var(--tex-bricks);
    -webkit-mask-size: 160px 56px; mask-size: 160px 56px; }
  .grid-bg::after {
    background-color: var(--tex-mark);
    -webkit-mask-image: var(--tex-marks); mask-image: var(--tex-marks);
    -webkit-mask-size: 320px 280px; mask-size: 320px 280px; }
    
  .mouse-glow {
    position: fixed;
    top: 0; left: 0;
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--wash-2) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1; /* Below the main .wrap which is z-index: 2 */
    will-change: transform;
    display: none;
  }
  @media (min-width: 980px) {
    .mouse-glow { display: block; }
  }
  @keyframes float1 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(3%,-4%) scale(1.05);} }
  @keyframes float2 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-3%,3%) scale(1.05);} }

  /* Wider screen layout */
  .wrap { position: relative; z-index: 2; width: 92%; max-width: 1600px; margin: 0 auto; padding: 0 32px; }
  section[id] { scroll-margin-top: 96px; }

  /* header */
  header { position: sticky; top: 14px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    margin-top: 18px; padding: 11px 13px 11px 20px; background: rgba(5,5,5,.7);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--gold-line); border-radius: var(--r3);
    transition: padding .35s var(--ease), background .35s var(--ease), border-color .3s; }
  header.scrolled { padding-top: 8px; padding-bottom: 8px; background: rgba(0,0,0,.85); border-color: var(--wash-5); box-shadow: 0 10px 36px rgba(0,0,0,.8); }
  .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
  /* The wordmark is set in the site's own heading face — Manrope 700 at the same
     -.03em tracking as h1/h2 — with the BOLT lifted from the supplied artwork so
     the one shape a font cannot provide stays exact. Measured from the original:
     the bolt is 1.625x the "b" ascender and sits 72 above it and 175 below the
     baseline, which is what the size and offset below reproduce. Colour comes
     from --brand-ink, so both parts are navy on light and white on dark. */
  .brand-word { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 30px;
    letter-spacing: -.03em; line-height: 1; color: var(--brand-ink); }
  .brand-bolt { display: block; width: 15px; height: 37px; flex-shrink: 0;
    background-color: var(--brand-ink);
    -webkit-mask: url(briq-bolt.png) no-repeat center / contain;
    mask: url(briq-bolt.png) no-repeat center / contain; }
  .brand { gap: 3px; }
  .brand:hover { opacity: .78; }
  nav.main { display: flex; align-items: center; gap: 30px; font-size: 14.5px; color: var(--muted); font-weight: 500; }
  nav.main a { position: relative; transition: color .2s; }
  nav.main a:hover { color: var(--gold); }
  .head-cta { display: flex; align-items: center; gap: 12px; }
  .signin { font-size: 14.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .2s; }
  .signin:hover { color: var(--gold); }

  /* buttons */
  .btn { font-family: 'Manrope'; font-weight: 700; border: none; cursor: pointer; border-radius: var(--r1);
    transition: all .2s var(--ease); display: inline-flex; align-items: center; gap: 8px; }
  .btn.primary { color: var(--btn-ink); background: var(--gold); }
  .btn.primary:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 8px 24px var(--wash-5); }
  .btn.ghost { color: var(--gold); background: transparent; border: 1px solid var(--gold); }
  .btn.ghost:hover { background: var(--wash-3); transform: translateY(-2px); }
  .btn.sm { font-size: 14.5px; padding: 10px 18px; }
  .btn.md { font-size: 15.5px; padding: 15px 27px; }
  .btn.lg { font-size: 16px; padding: 16px 32px; }

  /* hero */
  .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 78px 0 56px; }
  .chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; background: var(--wash-1); border: 1px solid var(--gold-line); border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--gold); margin-bottom: 26px; }
  .hero h1 { font-weight: 700; font-size: 52px; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 22px; text-wrap: balance; }
  .grad { color: var(--gold-bright); }
  .lead { font-size: 18.5px; line-height: 1.62; color: var(--muted); margin: 0 0 32px; max-width: 510px; }
  .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

  /* Power Hub Hero Creative */
  .hero-creative { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; min-height: 540px; }
  .power-hub { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1/1; margin: 0 auto; display: flex; align-items: center; justify-content: center; }

  .hub-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 220px; height: 220px; background: var(--gold); filter: blur(80px); opacity: 0.12; border-radius: 50%; animation: pulse-glow 4s ease-in-out infinite; }
  @keyframes pulse-glow { 0%, 100% { opacity: 0.12; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 0.22; transform: translate(-50%,-50%) scale(1.15); } }

  .hub-rings { position: absolute; inset: 0; pointer-events: none; }
  .ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed var(--gold-line); }
  .ring-1 { width: 280px; height: 280px; animation: spin 20s linear infinite; }
  .ring-2 { width: 380px; height: 380px; animation: spin-reverse 30s linear infinite; opacity: 0.5; }
  .ring-3 { width: 480px; height: 480px; animation: spin 40s linear infinite; border-style: dotted; opacity: 0.3; }
  @keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
  @keyframes spin-reverse { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }

  .hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .hub-line { stroke: var(--gold-line); stroke-width: 1.5; fill: none; transition: all 0.3s; stroke-dasharray: 4 6; }
  .hub-line.on { stroke: var(--gold); stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--gold)); animation: line-flow 1s linear infinite; stroke-dasharray: 6 8; }
  @keyframes line-flow { to { stroke-dashoffset: -14; } }

  .hub-core { position: relative; z-index: 10; width: 130px; height: 130px; background: #050505; border: 2px solid var(--gold); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 40px var(--wash-4), inset 0 0 20px var(--wash-2); }
  .hub-core svg { width: 32px; height: 32px; color: var(--gold-bright); margin-bottom: 8px; }
  .hub-core b { font-size: 15px; color: var(--gold-bright); letter-spacing: -0.02em; line-height: 1; }
  .hub-core small { font-size: 10px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.1em; }

  .hub-node { position: absolute; z-index: 5; display: flex; align-items: center; gap: 14px; background: rgba(10,10,10,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 16px 10px 10px; border: 1px solid var(--line); border-radius: 100px; cursor: pointer; transition: all 0.35s var(--ease); box-shadow: 0 10px 20px rgba(0,0,0,.5); }
  .hub-node.active { border-color: var(--gold); background: #080808; transform: scale(1.05) translateY(-5px); box-shadow: 0 12px 30px var(--wash-4); z-index: 20; }
  .hub-node:hover:not(.active) { border-color: var(--wash-5); transform: translateY(-3px); }

  .n-attr { top: 12%; left: -2%; animation: float-n 6s ease-in-out infinite; }
  .n-crm { top: 12%; right: -2%; animation: float-n 6s ease-in-out infinite 1.5s; flex-direction: row-reverse; text-align: right; padding: 10px 10px 10px 16px; }
  .n-exp { bottom: 12%; left: -2%; animation: float-n 6s ease-in-out infinite 3s; }
  .n-close { bottom: 12%; right: -2%; animation: float-n 6s ease-in-out infinite 4.5s; flex-direction: row-reverse; text-align: right; padding: 10px 10px 10px 16px; }

  @keyframes float-n { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }

  .hub-node .node-icon { width: 38px; height: 38px; background: var(--wash-1); border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--wash-4); color: var(--gold); flex-shrink: 0; transition: all 0.3s; }
  .hub-node.active .node-icon { background: var(--gold); color: var(--btn-ink); box-shadow: 0 0 20px var(--wash-5); border-color: var(--gold); }
  .hub-node .node-icon svg { width: 18px; height: 18px; }

  .hub-node .node-info { display: flex; flex-direction: column; }
  .hub-node b { font-size: 14px; color: var(--ink); line-height: 1.2; font-weight: 700; }
  .hub-node span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; font-weight: 600; }

  .orbit-cap { text-align: center; margin-top: 30px; font-size: 15px; font-weight: 600; color: var(--gold-bright); transition: opacity .25s; height: 24px; letter-spacing: -0.01em; }

  /* Marquee (Integrations) */
  .clients { padding: 40px 0 60px; text-align: center; border-bottom: 1px solid var(--gold-line); }
  .clients .cap { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 30px; }
  .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
  .track { display: flex; gap: 80px; width: max-content; animation: scroll 20s linear infinite; }
  .marquee:hover .track { animation-play-state: paused; }
  .track span { font-family: 'Manrope'; font-weight: 700; font-size: 24px; letter-spacing: -.02em; color: var(--muted); white-space: nowrap; transition: color .25s; display: inline-flex; align-items: center; gap: 12px; }
  .track span:hover { color: var(--gold); }
  .track span svg { width: 28px; height: 28px; }
  @keyframes scroll { to { transform: translateX(-50%); } }

  /* Pain Points / Sales Leakage */
  .sec-head { text-align: center; padding: 100px 0 40px; }
  .sec-head .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
  .sec-head h2 { font-weight: 700; font-size: 42px; letter-spacing: -.03em; margin: 0 auto 16px; color: var(--gold-bright); max-width: 800px; line-height: 1.15; }
  .sec-head p { font-size: 18px; color: var(--muted); max-width: 600px; margin: 0 auto; line-height: 1.6; }

  .leak-info { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 40px; }
  .leak-box { text-align: center; padding: 20px; border: 1px dashed var(--gold-line); border-radius: var(--r2); position: relative; width: 180px; background: rgba(255,255,255,0.01); }
  .leak-box svg { width: 32px; height: 32px; color: var(--muted); margin-bottom: 12px; }
  .leak-box b { display: block; font-size: 14px; color: var(--ink); }
  .leak-box.bad { border-color: rgba(255, 60, 60, 0.3); }
  .leak-box.bad svg { color: rgba(255, 60, 60, 0.6); }
  .leak-box.good { border-color: var(--gold); border-style: solid; background: var(--wash-1); box-shadow: 0 0 30px var(--wash-3); }
  .leak-box.good svg { color: var(--gold-bright); }
  .leak-arrow { color: var(--gold-line); display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .leak-arrow svg { width: 24px; height: 24px; }

  /* Moving Stats with Icons */
  .stats-section { padding: 60px 0 20px; }
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .stat { padding: 32px 24px; background: var(--wash-1); border: 1px solid var(--gold-line); border-radius: var(--r2); text-align: center; transition: all .3s; }
  .stat:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 10px 30px var(--wash-2); }
  .stat-icon { width: 44px; height: 44px; margin: 0 auto 16px; color: var(--gold); background: var(--wash-3); border-radius: var(--r1); display: grid; place-items: center; border: 1px solid var(--wash-4); }
  .stat-icon svg { width: 22px; height: 22px; }
  .stat .v { font-family: 'Manrope'; font-weight: 700; font-size: 42px; letter-spacing: -.02em; color: var(--gold-bright); line-height: 1; }
  .stat .k { font-size: 14.5px; color: var(--muted); margin-top: 12px; font-weight: 500; }

  /* Minimal Integrated Sections */
  .integrated-flow { padding: 40px 0 60px; display: flex; flex-direction: column; gap: 80px; }
  .flow-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .flow-row.alt { grid-template-columns: 1fr 1fr; }
  .flow-row.alt .flow-text { order: 2; }
  .flow-row.alt .flow-diagram { order: 1; }
  
  .flow-text h2 { font-size: 38px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 20px; color: var(--gold-bright); }
  .flow-text p { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 30px; }
  .flow-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .flow-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink); }
  .flow-features li svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }

  /* Wireframe Diagrams */
  .diagram-box { padding: 40px; border: 1px solid var(--gold-line); border-radius: var(--r3); background: rgba(255,255,255,.01); position: relative; }
  .d-node { padding: 12px 18px; border: 1px solid var(--gold); border-radius: var(--r1); background: #050505; color: var(--gold-bright); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; position: absolute; }
  .d-node svg { width: 16px; height: 16px; }
  .d-path { stroke: var(--gold-line); stroke-width: 1.5; fill: none; stroke-dasharray: 4; }
  .d-path.anim { stroke: var(--gold); animation: march 2s linear infinite; }
  @keyframes march { to { stroke-dashoffset: -16; } }
  
  /* Diagram 1: Attribution to CRM */
  .diag1 { height: 320px; }
  .diag1 .n-meta { top: 40px; left: 40px; }
  .diag1 .n-google { top: 120px; left: 40px; }
  .diag1 .n-99 { top: 200px; left: 40px; }
  .diag1 .n-crm { top: 120px; right: 40px; background: var(--wash-3); border-color: var(--gold); }
  .diag1 .n-assign { top: 220px; right: 40px; font-size: 11px; border-style: dashed; }
  
  /* Diagram 2: Experience to Closure */
  .diag2 { height: 340px; }
  .diag2 .n-tour { top: 40px; left: 50%; transform: translateX(-50%); }
  .diag2 .n-ai { top: 140px; left: 20px; border-color: var(--gold-2); }
  .diag2 .n-quote { top: 140px; right: 20px; }
  .diag2 .n-book { top: 240px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--btn-ink); }

  /* Why Not Others */
  .moat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .moat-card { padding: 32px; border: 1px solid var(--gold-line); border-radius: var(--r2); background: #050505; transition: all .3s var(--ease); }
  .moat-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 12px 30px var(--wash-2); }
  .moat-card .icon { width: 34px; height: 34px; display: block; color: var(--gold); margin-bottom: 24px; }
  .moat-card .icon svg { width: 100%; height: 100%; }
  .moat-card h3 { font-size: 20px; color: var(--gold-bright); margin: 0 0 12px; }
  .moat-card p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; }

  /* Testimonials */
  .tcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .tcard { padding: 32px; border: 1px solid var(--gold-line); border-radius: var(--r2); background: transparent; }
  .tcard .stars svg { width: 16px; height: 16px; color: var(--gold); margin-right: 4px; }
  .tcard p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 20px 0; }
  .tperson b { display: block; font-size: 14.5px; color: var(--gold-bright); }
  .tperson small { color: var(--muted); font-size: 12.5px; }

  /* CTA */
  .cta { margin: 80px 0; padding: 80px 40px; text-align: center; border: 1px solid var(--gold); border-radius: var(--r3); background: var(--wash-1); }
  .cta h2 { font-size: 42px; margin: 0 0 20px; color: var(--gold-bright); }
  .cta p { font-size: 18px; color: var(--muted); margin: 0 auto 30px; max-width: 500px; }

  /* Footer */
  footer { padding: 40px 0; border-top: 1px solid var(--gold-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
  .fcol { display: flex; flex-direction: column; gap: 12px; }
  .fcol b { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
  .fcol a { font-size: 14px; color: var(--muted); transition: color .2s; }
  .fcol a:hover { color: var(--gold-bright); }

  [data-reveal] { opacity: 0; transform: translateY(20px); transition: all .8s var(--ease); transition-delay: var(--d, 0ms); }
  [data-reveal].in { opacity: 1; transform: none; }

  @media (max-width: 980px) {
    .hero, .flow-row, .flow-row.alt { grid-template-columns: 1fr; gap: 40px; }
    .flow-row.alt .flow-text { order: 1; }
    .flow-row.alt .flow-diagram { order: 2; }
    .moat-grid, .tcards, .stats, .leak-info { grid-template-columns: 1fr; flex-direction: column; }
    .leak-arrow svg { transform: rotate(90deg); }
    nav.main { display: none; }
    
    /* Mobile Power Hub Adjustments */
    .hero-creative { min-height: 400px; margin-top: 20px; }
    .power-hub { 
      width: 100%; 
      max-width: 500px; 
      margin: 0 auto;
      transform: scale(0.9); 
      transform-origin: center; 
    }
  }
  @media (max-width: 480px) {
    .wrap { width: 95%; padding: 0 16px; }
    .hero-creative { min-height: 360px; margin-top: 0px; }
    .power-hub { 
      width: 100%; 
      max-width: 440px; 
      margin: 0 auto;
      transform: scale(0.85); 
      transform-origin: center; 
    }
    .hub-node { padding: 8px 12px 8px 8px; }
    .hub-node .node-icon { width: 32px; height: 32px; }
    .hub-node .node-icon svg { width: 16px; height: 16px; }
    .hub-node b { font-size: 13px; }
    .hub-node span { font-size: 9px; }
    
    /* Push nodes outward to prevent overlap on small screens */
    .n-attr { left: -10%; }
    .n-crm { right: -10%; }
    .n-exp { left: -10%; }
    .n-close { right: -10%; }
  }

  /* Shine Animations for Titles */
  .shine-title {
    background: linear-gradient(110deg, var(--ink) 0%, var(--ink) 40%, var(--gold-bright) 50%, var(--ink) 60%, var(--ink) 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-position: 200% center;
    display: inline-block;
  }
  .shine-title-gold {
    background: linear-gradient(110deg, var(--gold-bright) 0%, var(--gold-bright) 40%, #ffffff 50%, var(--gold-bright) 60%, var(--gold-bright) 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-position: 200% center;
    display: inline-block;
  }
  .in .shine-title, .shine-title.in {
    animation: shine-sweep 1.5s var(--ease) forwards;
    animation-delay: var(--d, 0ms);
  }
  .in .shine-title-gold, .shine-title-gold.in {
    animation: shine-sweep 1.5s var(--ease) forwards;
    animation-delay: var(--d, 0ms);
  }
  @keyframes shine-sweep {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
  }

  /* ===================== Marketing mega-nav ===================== */
  nav.main { gap: 4px; }
  nav.main > a { padding: 8px 13px; border-radius: 9px; transition: color .2s, background .2s; }
  nav.main > a:hover, nav.main > a.on { color: var(--gold); background: var(--wash-2); }
  .nav-dd { position: relative; }
  .dd-trigger { background: none; border: none; font-family: 'Manrope'; font-size: 14.5px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 9px; cursor: pointer; transition: color .2s, background .2s; }
  .dd-trigger.on { color: var(--gold); }
  .nav-dd:hover .dd-trigger, .nav-dd:focus-within .dd-trigger { color: var(--gold); background: var(--wash-2); }
  .dd-caret { width: 11px; height: 11px; transition: transform .25s var(--ease); }
  .nav-dd:hover .dd-caret { transform: rotate(180deg); }
  .dd-panel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); background: rgba(7,7,7,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--gold-line); border-radius: var(--r3); padding: 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; box-shadow: 0 30px 70px rgba(0,0,0,.65); z-index: 70; }
  /* Transparent bridge across the 12px gap so moving from the trigger into the
     panel keeps :hover continuous (otherwise the menu closes mid-reach). */
  .dd-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .dd-panel.mega { width: min(760px, calc(100vw - 48px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 20px; }
  .dd-panel.slim { width: 300px; display: flex; flex-direction: column; gap: 2px; }
  .dd-col { display: flex; flex-direction: column; gap: 2px; }
  .dd-group-title { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin: 4px 0 8px 8px; }
  .dd-item { display: flex; gap: 11px; padding: 8px; border-radius: 10px; align-items: flex-start; transition: background .18s; }
  .dd-item:hover { background: var(--wash-2); }
  .dd-item .di { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--wash-2); border: 1px solid var(--wash-4); display: grid; place-items: center; color: var(--gold); }
  .dd-item .di svg { width: 15px; height: 15px; }
  .dd-item .dt b { display: block; font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.25; }
  .dd-item .dt span { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
  .dd-foot { grid-column: 1 / -1; margin-top: 10px; padding: 12px 8px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); }
  .dd-foot a { color: var(--gold-bright); font-weight: 700; font-size: 13px; }
  .dd-foot a:hover { text-decoration: underline; }
  .head-cta .signin { text-decoration: none; }

  /* burger + mobile nav */
  .nav-burger { display: none; background: transparent; border: 1px solid var(--gold-line); border-radius: 9px; width: 38px; height: 38px; place-items: center; color: var(--ink); cursor: pointer; }
  .nav-burger svg { width: 18px; height: 18px; }
  .mobile-nav { position: fixed; inset: 0; z-index: 95; background: rgba(4,4,4,.98); padding: 86px 28px 48px; overflow-y: auto; display: none; }
  body.nav-open .mobile-nav { display: block; }
  body.nav-open { overflow: hidden; }
  .mobile-nav .mn-close { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border: 1px solid var(--gold-line); border-radius: 10px; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
  .mobile-nav .mn-close svg { width: 18px; height: 18px; }
  .mobile-nav .mn-group { border-bottom: 1px solid var(--line); padding: 16px 0; }
  .mobile-nav .mn-title { font-size: 11px; text-transform: uppercase; letter-spacing: .13em; color: var(--gold); font-weight: 800; margin-bottom: 8px; }
  .mobile-nav a.mn-link { display: block; padding: 8px 0; color: var(--ink); font-size: 15.5px; font-weight: 600; }
  .mobile-nav .mn-cta { display: flex; gap: 12px; margin-top: 22px; }
  @media (max-width: 980px) {
    .nav-burger { display: grid; }
    .head-cta .signin { display: none; }
  }
  @media (max-width: 560px) { .head-cta .btn { display: none; } }

  /* ===================== Sub-page hero ===================== */
  .sub-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 78px 0 34px; }
  .sub-hero h1 { font-weight: 700; font-size: 46px; line-height: 1.12; letter-spacing: -.03em; margin: 0 0 20px; text-wrap: balance; }
  .sub-hero .hero-side { display: flex; justify-content: center; }
  @media (max-width: 980px) { .sub-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 54px; } .sub-hero h1 { font-size: 36px; } }

  /* ===================== Product mocks ===================== */
  .mk { border: 1px solid var(--gold-line); border-radius: var(--r3); background: rgba(5,5,5,.6); backdrop-filter: blur(10px); padding: 26px; width: 100%; max-width: 480px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
  .mk-head { font-size: 12px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mk-live { font-size: 10px; color: #7ddb8a; display: inline-flex; align-items: center; gap: 6px; letter-spacing: .06em; }
  .mk-live:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #38c96b; box-shadow: 0 0 8px #38c96b; animation: mk-blink 1.8s ease-in-out infinite; }
  @keyframes mk-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
  .mk-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r1); background: rgba(255,255,255,.015); margin-bottom: 9px; }
  .mk-row:last-child { margin-bottom: 0; }
  .mk-row.hl { border-color: var(--gold); background: var(--wash-1); box-shadow: 0 0 18px var(--wash-2); }
  .mk-row .mr-t b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.3; }
  .mk-row .mr-t small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .mk-row.hl .mr-t b { color: var(--gold-bright); }
  .mk-pill { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 100px; background: var(--wash-3); color: var(--gold-bright); white-space: nowrap; flex-shrink: 0; }
  .mk-pill.ok { background: rgba(56,201,107,.13); color: #7ddb8a; }
  .mk-pill.warn { background: rgba(255,120,60,.13); color: #ff9c6b; }
  .mk-pill.dim { background: rgba(255,255,255,.07); color: var(--muted); }
  .mk-bubble { max-width: 86%; padding: 10px 14px; border-radius: 13px; font-size: 12.5px; line-height: 1.45; margin-bottom: 9px; color: var(--ink); }
  .mk-bubble.in { background: rgba(255,255,255,.05); border-top-left-radius: 4px; }
  .mk-bubble.out { background: var(--wash-3); color: var(--gold-bright); margin-left: auto; border-top-right-radius: 4px; }
  .mk-bubble small { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; }
  .mk-bars { display: flex; align-items: flex-end; gap: 7px; height: 84px; margin-top: 8px; }
  .mk-bars i { flex: 1; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%); border-radius: 3px 3px 0 0; opacity: .85; }
  .mk-doc { padding: 18px; border: 1px solid var(--line); border-radius: var(--r1); background: rgba(255,255,255,.015); }
  .mk-doc-line { height: 9px; border-radius: 4px; background: rgba(255,255,255,.07); margin-bottom: 10px; }
  .mk-doc-line.g { background: var(--wash-4); }
  .mk-doc-line.w40 { width: 40%; } .mk-doc-line.w60 { width: 60%; } .mk-doc-line.w80 { width: 80%; }
  .mk-units { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 12px; }
  .mk-units i { aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,.06); }
  .mk-units i.s { background: var(--gold); opacity: .8; }
  .mk-units i.h { background: transparent; border: 1px solid var(--gold); }
  .mk-legend { display: flex; gap: 16px; font-size: 11px; color: var(--muted); }
  .mk-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .mk-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; background: rgba(255,255,255,.09); }
  .mk-legend i.s { background: var(--gold); opacity: .8; } .mk-legend i.h { background: transparent; border: 1px solid var(--gold); }
  .mk-ring-wrap { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
  .mk-ring { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold) calc(var(--v) * 1%), rgba(255,255,255,.07) 0); flex-shrink: 0; }
  .mk-ring i { width: 68px; height: 68px; border-radius: 50%; background: #0a0a0a; display: grid; place-items: center; font: 800 19px 'Manrope'; font-style: normal; color: var(--gold-bright); }
  .mk-ring-cap b { display: block; font-size: 14px; color: var(--gold-bright); }
  .mk-ring-cap small { font-size: 11.5px; color: var(--muted); line-height: 1.4; display: block; margin-top: 3px; }

  /* ===================== How-it-works strip ===================== */
  .hiw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1020px; margin: 34px auto 0; }
  .hiw-step { padding: 24px 22px; border: 1px solid var(--gold-line); border-radius: var(--r2); background: rgba(255,255,255,.008); position: relative; }
  .hiw-step .n { font-family: 'Manrope'; font-size: 12.5px; color: var(--btn-ink); background: var(--gold); width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; margin-bottom: 14px; }
  .hiw-step b { font-size: 15.5px; color: var(--gold-bright); display: block; margin-bottom: 6px; letter-spacing: -.01em; }
  .hiw-step p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
  @media (max-width: 980px) { .hiw { grid-template-columns: 1fr; } }

  /* ===================== Related chips ===================== */
  .related { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; margin: 40px auto 0; }
  .related .rel-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
  .related a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; border: 1px solid var(--gold-line); border-radius: 100px; font-size: 13px; color: var(--muted); font-weight: 600; transition: all .2s var(--ease); }
  .related a:hover { color: var(--gold-bright); border-color: var(--gold); transform: translateY(-1px); }
  .related a svg { width: 13px; height: 13px; color: var(--gold); }

  /* ===================== Checklist grid ===================== */
  .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; max-width: 880px; margin: 36px auto 0; }
  .check-grid .ck { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r1); font-size: 14px; color: var(--ink); line-height: 1.5; background: rgba(255,255,255,.008); }
  .check-grid .ck svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
  @media (max-width: 720px) { .check-grid { grid-template-columns: 1fr; } }

  /* ===================== Compare table (shared) ===================== */
  .compare-wrap { overflow-x: auto; margin: 36px auto 0; max-width: 1000px; }
  table.compare { width: 100%; border-collapse: collapse; min-width: 620px; }
  table.compare th, table.compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
  table.compare th { font-family: 'Manrope'; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  table.compare th.hl { color: var(--gold-bright); }
  table.compare td.hl-col { background: var(--wash-1); }
  table.compare td:first-child { color: var(--ink); font-weight: 500; }
  table.compare .yes { color: var(--gold-bright); font-weight: 700; }
  table.compare .no { color: var(--muted); }
  table.compare .partial { color: var(--muted); font-style: italic; }

  /* ===================== FAQ (shared) ===================== */
  .faq-list { max-width: 760px; margin: 38px auto 0; }
  .faq-item { border: 1px solid var(--gold-line); border-radius: var(--r1); margin-bottom: 12px; overflow: hidden; background: rgba(255,255,255,.005); }
  .faq-item summary { padding: 18px 22px; cursor: pointer; font-family: 'Manrope'; font-size: 15px; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:after { content: '+'; font-size: 20px; color: var(--gold); font-weight: 400; flex-shrink: 0; }
  .faq-item[open] summary:after { content: '\2212'; }
  .faq-item .faq-a { padding: 0 22px 20px; font-size: 14.5px; color: var(--muted); line-height: 1.65; }

  /* ===================== Page-hero stat band ===================== */
  .mini-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
  .mini-stats .ms { padding: 12px 20px; border: 1px solid var(--gold-line); border-radius: var(--r1); background: var(--wash-1); }
  .mini-stats .ms b { display: block; font-family: 'Manrope'; font-size: 22px; color: var(--gold-bright); letter-spacing: -.02em; }
  .mini-stats .ms span { font-size: 12px; color: var(--muted); }

  /* skip link + reduced motion (ui-ux-pro-max checklist) */
  .skip { position: fixed; top: -64px; left: 20px; z-index: 200; background: var(--gold); color: var(--btn-ink); padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 14px; transition: top .2s; }
  .skip:focus { top: 18px; }
  a, button, summary, .signin { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
  @media (prefers-reduced-motion: reduce) {
    .orb, .ring, .track, .mk-live:before, .hub-node, .hub-line.on,
    .hub-orbit, .hub-slot { animation: none !important; }
    [data-reveal] { transition: none; opacity: 1; transform: none; }
    .in .shine-title, .shine-title.in, .in .shine-title-gold, .shine-title-gold.in { animation: none; color: var(--ink); -webkit-text-fill-color: var(--ink); }
  }

  /* ===================== Capture diagram (site.html flow 01) ===================== */
  .diag-cap { height: auto; padding: 28px 24px 24px; max-width: 500px; margin: 0 auto; width: 100%; }
  .cap-stage { position: relative; height: 340px; }
  .cap-timer { position: absolute; top: 14px; right: 16px; z-index: 6; display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-bright); background: var(--wash-2); border: 1px solid var(--gold-line); border-radius: 100px; padding: 6px 12px; }
  .cap-timer i { width: 6px; height: 6px; border-radius: 50%; background: #38c96b; box-shadow: 0 0 8px #38c96b; animation: mk-blink 1.8s ease-in-out infinite; }
  .pkt { fill: var(--gold-bright); filter: drop-shadow(0 0 7px var(--wash-5)); opacity: 0; }
  .cap-src { position: absolute; left: 2%; width: 30%; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid var(--gold-line); border-radius: 100px; background: rgba(8,8,8,.85); color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; z-index: 4; }
  .cap-src svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; }
  .cap-hub { position: absolute; right: 2%; width: 32%; top: 116px; height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--gold); border-radius: var(--r2); background: var(--wash-2); color: var(--gold-bright); font-size: 13.5px; font-weight: 700; z-index: 4; box-shadow: 0 0 24px var(--wash-3); }
  .cap-hub svg { width: 16px; height: 16px; flex-shrink: 0; }
  .cap-hub::after { content: ''; position: absolute; inset: -7px; border: 1px solid var(--wash-5); border-radius: 14px; animation: cap-ring 2.1s ease-out infinite; pointer-events: none; }
  @keyframes cap-ring { 0% { opacity: 0; transform: scale(.94); } 45% { opacity: .9; } 100% { opacity: 0; transform: scale(1.1); } }
  .cap-feed { position: absolute; right: 2%; width: 56%; top: 246px; z-index: 4; border: 1px solid var(--line); border-radius: var(--r2); background: rgba(8,8,8,.85); padding: 10px 13px 12px; }
  .cap-feed-head { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .cap-live { color: #7ddb8a; display: inline-flex; align-items: center; gap: 5px; }
  .cap-live:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #38c96b; box-shadow: 0 0 6px #38c96b; animation: mk-blink 1.8s ease-in-out infinite; }
  .cap-feed-stack { position: relative; height: 40px; }
  .cap-card { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; opacity: 0; animation: cap-cycle 6.3s ease-in-out infinite; }
  .cap-card .cc-t b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 700; line-height: 1.25; }
  .cap-card .cc-t small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
  .cc-pill { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; flex-shrink: 0; }
  .cc-pill.ok { background: rgba(56,201,107,.13); color: #7ddb8a; }
  .cc-pill.dim { background: rgba(255,255,255,.07); color: var(--muted); }
  @keyframes cap-cycle {
    0% { opacity: 0; transform: translateY(9px); }
    5%, 28% { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; transform: translateY(-9px); }
  }
  @media (max-width: 480px) {
    .cap-src { width: 32%; font-size: 11px; padding: 0 10px; gap: 6px; }
    .cap-hub { font-size: 12px; }
    .cap-feed { width: 62%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pkt { display: none; }
    .cap-hub::after, .cap-timer i, .cap-live:before { animation: none; }
    .cap-card { animation: none; }
    .cap-card:first-child { opacity: 1; }
  }

  /* ===================== Glassmorphism pass ===================== */
  /* Frosted, translucent surfaces with a light hairline edge + depth shadow.
     Replaces the near-invisible card fills so content reads clearly without the
     photo backdrop. Single-class selectors so these override earlier defaults. */
  :root {
    --glass-bg: rgba(255,255,255,.05);
    --glass-bg-2: rgba(255,255,255,.035);
    --glass-brd: rgba(255,255,255,.14);
    --glass-shadow: 0 12px 40px rgba(0,0,0,.36);
    --glass-blur: blur(20px) saturate(135%);
  }
  .diagram-box, .moat-card, .stat, .tcard, .mk, .bucket-card, .reality-card,
  .audience-card, .hiw-step, .dash-tile, .cap-src, .cap-feed, .check-grid .ck,
  .faq-item, .price-card, .int-card, .cmp-card, .feat-item, .mini-stats .ms,
  .related a, .dd-panel, .mk-row {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .diagram-box, .moat-card, .stat, .tcard, .mk, .bucket-card, .reality-card,
  .audience-card, .hiw-step, .price-card, .int-card, .cmp-card, .faq-item {
    background: var(--glass-bg);
    border-color: var(--glass-brd);
    box-shadow: var(--glass-shadow);
  }
  .dash-tile, .feat-item, .check-grid .ck, .mini-stats .ms, .cap-src, .cap-feed, .mk-row {
    background: var(--glass-bg-2);
    border-color: var(--glass-brd);
  }
  /* Accent surfaces keep their gold identity but gain the frost + depth. */
  .cta, .cap-hub {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
  }
  .cta { background: var(--wash-2); }
  .price-card.hl { background: var(--wash-2); border-color: var(--gold); }
  /* Hover: warm the edge, lift, brighten the frost. */
  .moat-card:hover, .stat:hover, .bucket-card:hover, .int-card:hover,
  .cmp-card:hover, .feat-item:hover, .related a:hover {
    background: rgba(255,255,255,.075);
    border-color: var(--gold);
  }
  /* Blur is GPU-cheap enough here, but disable on reduced-motion / low-power hints. */
  @media (prefers-reduced-motion: reduce) {
    * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .diagram-box, .moat-card, .stat, .tcard, .mk, .bucket-card, .reality-card,
    .audience-card, .hiw-step, .price-card, .int-card, .cmp-card, .faq-item { background: rgba(20,18,14,.72); }
  }

  /* ===================== Homepage story sections ===================== */
  .story { padding: 96px 0 0; }
  .chapter { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
  .chapter .cnum { font-family: 'Manrope'; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--btn-ink); background: var(--gold); padding: 5px 11px; border-radius: 100px; flex-shrink: 0; }
  .chapter .clabel { font-size: 11.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
  .chapter .crule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
  .story-head { max-width: 780px; }
  .story-head h2 { font-family: 'Manrope'; font-weight: 700; font-size: 40px; line-height: 1.14; letter-spacing: -.03em; margin: 0 0 18px; color: var(--gold-bright); text-wrap: balance; }
  .story-head p { font-size: 17.5px; line-height: 1.65; color: var(--muted); margin: 0 0 14px; }
  .story-head p:last-child { margin-bottom: 0; }
  .story-head p b { color: var(--ink); font-weight: 700; }
  @media (max-width: 980px) { .story { padding-top: 68px; } .story-head h2 { font-size: 29px; } .story-head p { font-size: 16px; } }

  /* Chapter 01 — the fragmented funnel */
  .frag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
  .frag-card { padding: 20px 18px; border: 1px dashed rgba(255,255,255,.17); border-radius: var(--r2); background: rgba(255,255,255,.018); }
  .frag-card .fh { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
  .frag-card .fh svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
  .frag-card .fh b { font-size: 13.5px; color: var(--ink); font-weight: 700; }
  .frag-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
  .frag-card .fx { margin-top: 11px; font-size: 11px; color: #ff8a6b; font-weight: 700; display: flex; align-items: center; gap: 6px; }
  .frag-card .fx svg { width: 12px; height: 12px; }
  .frag-note { text-align: center; margin-top: 26px; font-size: 15px; color: var(--gold-bright); font-weight: 600; }
  @media (max-width: 900px) { .frag-grid { grid-template-columns: 1fr; } }

  /* Chapter 02 — the stitched record */
  .stitch { border: 1px solid var(--gold); border-radius: var(--r3); background: var(--wash-1); padding: 24px; max-width: 660px; margin: 40px auto 0; box-shadow: 0 24px 64px rgba(0,0,0,.45); }
  .stitch-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; padding-bottom: 15px; border-bottom: 1px solid var(--gold-line); }
  .stitch-head b { font-family: 'Manrope'; font-size: 15.5px; color: var(--gold-bright); }
  .srow { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
  .srow:last-of-type { border-bottom: 0; }
  .srow .sst { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; color: var(--gold); background: var(--wash-3); border: 1px solid var(--gold-line); border-radius: 100px; padding: 4px 10px; flex-shrink: 0; white-space: nowrap; margin-top: 1px; }
  .srow .sbody b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.35; }
  .srow .sbody small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
  .stitch-foot { margin-top: 6px; padding-top: 15px; border-top: 1px solid var(--gold-line); font-size: 13px; color: var(--gold-bright); font-weight: 600; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
  .stitch-foot svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
  @media (max-width: 560px) { .srow { flex-direction: column; gap: 7px; } }

  /* "the record now knows" callout under each stage */
  .knows { margin-top: 24px; padding: 14px 17px; border-left: 2px solid var(--gold); background: var(--wash-2); border-radius: 0 var(--r1) var(--r1) 0; }
  .knows b { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
  .knows p { margin: 0; font-size: 13.5px; color: var(--ink); line-height: 1.55; }

  /* 5-node hub (adds Channel Partners) — centred via translate, overrides the 4-corner set */
  /* The ring revolves around the core. The spokes and the nodes share one
     rotating wrapper so they can never drift apart; each node then sits in a
     slot that counter-rotates at the same rate, which keeps the pills upright
     while they travel. The counter-rotation has to live on the SLOT, not the
     node: an animation overrides the transform property outright, and the node
     needs its own transform free for the hover lift and the active scale. */
  .hub-orbit { position: absolute; inset: 0; animation: hub-orbit-spin 72s linear infinite; }
  .hub-slot { position: absolute; z-index: 5;
    animation: hub-orbit-rev 72s linear infinite; }
  /* the node must take part in its slot's layout: .hub-node is absolutely
     positioned, which left the slot 0x0, and translate(-50%,-50%) on a zero-size
     box centres nothing — the pills hung off their vertices by half their size */
  .hub-slot .hub-node { position: relative; }
  /* the active pill has to clear its neighbours, and stacking is decided between
     slots now, not between nodes */
  .hub-slot:has(.hub-node.active) { z-index: 20; }
  @keyframes hub-orbit-spin { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
  /* the slot's own centring has to be repeated in the keyframes, or the
     animation would drop it */
  @keyframes hub-orbit-rev {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
  }
  /* stop the ring while a visitor is reading it — chasing a moving pill is
     no fun, and the JS already pauses its auto-cycle on hover */
  .power-hub:hover .hub-orbit, .power-hub:hover .hub-slot { animation-play-state: paused; }

  .hub-node.hn { padding: 9px 15px 9px 9px; }
  .hub-node.hn.active { transform: scale(1.06); }
  /* Regular hexagon: every vertex at R=38% from centre, so all six sides are
     equal (38.0). The earlier values used +-44 vertically but only +-30/+-22 on
     the diagonals, which made the AI->Channel Partners side 44 against 37.2
     elsewhere. R=38 is the largest radius that still keeps the pills inside. */
  .hub-slot.hn-cap { left: 50%;    top: 10%; }
  .hub-slot.hn-eng { left: 84.64%; top: 30%; }
  .hub-slot.hn-exp { left: 84.64%; top: 70%; }
  .hub-slot.hn-cls { left: 50%;    top: 90%; }
  .hub-slot.hn-cp  { left: 15.36%; top: 70%; }
  .hub-slot.hn-ai  { left: 15.36%; top: 30%; }

  /* Compact fragment cards (Ch01) */
  .frag-card .fk { font-size: 12.5px; color: var(--ink); font-weight: 600; margin: 0 0 9px; }

  /* Ch03 — five stages assemble into one recommendation */
  .asm { max-width: 900px; margin: 42px auto 0; }
  .asm-src { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .asm-chip { padding: 13px 14px; border: 1px solid var(--gold-line); border-radius: var(--r2); background: rgba(255,255,255,.03); text-align: center; }
  .asm-chip em { font-style: normal; display: block; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
  .asm-chip b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 600; line-height: 1.35; }
  .asm-arrow { display: flex; justify-content: center; padding: 18px 0; }
  .asm-arrow svg { width: 24px; height: 24px; color: var(--gold); animation: asm-bob 2s ease-in-out infinite; }
  @keyframes asm-bob { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: 1; } }
  .asm-out { border: 1px solid var(--gold); border-radius: var(--r3); background: var(--wash-2); padding: 22px 26px; text-align: center; box-shadow: 0 0 46px var(--wash-3); }
  .asm-out em { font-style: normal; display: block; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
  .asm-out b { font-family: 'Manrope'; display: block; font-size: 20px; color: var(--gold-bright); font-weight: 700; line-height: 1.4; }
  .asm-out small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
  @media (max-width: 900px) { .asm-src { grid-template-columns: repeat(2, 1fr); } .asm-out b { font-size: 16.5px; } }

  /* ============ Ch02: the spine — one unbroken thread ============ */
  /* Opaque base + the tint on top, rather than the tint alone: these stages were
     translucent, so the page material showed straight through and washed them
     out. --panel is theme-aware (#0a0a0a dark, #FFFFFF light), so the surface
     lifts off the page in both. */
  .spine { border: 1px solid var(--gold); border-radius: var(--r3);
    background-color: var(--panel); background-image: linear-gradient(var(--wash-1), var(--wash-1));
    padding: 24px 20px 20px; margin-top: 38px; box-shadow: 0 24px 64px rgba(0,0,0,.4); }
  .sp-stage { position: relative; height: 250px; }
  .sp-stage svg.sp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .sp-chip { position: absolute; transform: translateX(-50%); width: 18%; min-width: 118px; padding: 9px 10px; border: 1px solid var(--gold-line); border-radius: var(--r1); background: rgba(9,9,9,.92); text-align: center; z-index: 3; }
  .sp-chip em { font-style: normal; display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
  .sp-chip b { display: block; font-size: 11.5px; color: var(--ink); font-weight: 600; line-height: 1.35; }
  .sp-node { position: absolute; transform: translate(-50%,-50%); width: 30px; height: 30px; border-radius: 50%; background: #0a0a0a; border: 2px solid var(--gold); display: grid; place-items: center; z-index: 4; box-shadow: 0 0 16px var(--wash-5); }
  .sp-node svg { width: 13px; height: 13px; color: var(--gold-bright); }
  .sp-line { stroke: var(--gold-line); stroke-width: 2; fill: none; }
  .sp-pkt { fill: var(--gold-bright); filter: drop-shadow(0 0 8px var(--wash-5)); }
  .sp-foot { margin-top: 4px; text-align: center; font-size: 12.5px; color: var(--gold-bright); font-weight: 600; }
  @media (max-width: 760px) { .sp-chip { min-width: 84px; font-size: 10px; padding: 6px 5px; } .sp-chip b { font-size: 10px; } }

  /* ============ Stage 04: one record, two workspaces ============ */
  .split { display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center; }
  .sw-pane { border: 1px solid var(--glass-brd); border-radius: var(--r2); padding: 14px;
    background-color: var(--panel);
    background-image: linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)); }
  .sw-pane.gold { border-color: var(--gold-line);
    background-image: linear-gradient(var(--wash-1), var(--wash-1)); }
  .sw-h { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
  .sw-row { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.055); font-size: 11.5px; color: var(--muted); }
  .sw-row:last-child { border-bottom: 0; }
  .sw-row b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; }
  .sw-sync { display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .sw-sync .swl { width: 1px; flex: 1; min-height: 26px; background: linear-gradient(180deg, transparent, var(--gold-line), transparent); }
  .sw-sync svg { width: 17px; height: 17px; color: var(--gold); animation: sw-pull 2.2s ease-in-out infinite; }
  @keyframes sw-pull { 0%,100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.1); opacity: 1; } }
  .sw-cap { text-align: center; font-size: 11px; color: var(--gold-bright); font-weight: 600; margin-top: 13px; }
  @media (max-width: 620px) { .split { grid-template-columns: 1fr; gap: 12px; } .sw-sync { flex-direction: row; } .sw-sync .swl { height: 1px; width: 40px; min-height: 0; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); } }

  /* ============ Stage 05: payment milestone track ============ */
  .mile { border: 1px solid var(--glass-brd); border-radius: var(--r3); padding: 22px 24px; }
  .mile-head { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; justify-content: space-between; }
  .mile-track { position: relative; height: 6px; background: rgba(255,255,255,.09); border-radius: 4px; margin: 46px 6px 44px; }
  .mile-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 42%; background: linear-gradient(90deg, var(--gold-2), var(--gold)); border-radius: 4px; }
  .mp { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 15px; height: 15px; border-radius: 50%; background: #0b0b0b; border: 2px solid rgba(255,255,255,.28); }
  .mp.done { background: var(--gold); border-color: var(--gold); }
  .mp.due { border-color: var(--gold); box-shadow: 0 0 0 4px var(--wash-4); animation: mk-blink 1.7s ease-in-out infinite; }
  .mp em { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; color: var(--muted); white-space: nowrap; }
  .mp i { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 700; color: var(--gold-bright); white-space: nowrap; }
  .mp.due i { color: #ff9c6b; }
  .mile-doc { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--gold); border-radius: var(--r1); background: var(--wash-2); }
  .mile-doc svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; }
  .mile-doc b { font-size: 12.5px; color: var(--gold-bright); display: block; }
  .mile-doc span { font-size: 11px; color: var(--muted); }

  /* ============ Ch03: the AI copilot walking the agent through ============ */
  .cop { border: 1px solid var(--gold-line); border-radius: var(--r3); background: rgba(255,255,255,.02); padding: 26px; margin-top: 38px; }
  .cop-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-bottom: 22px; }
  .cop-step { text-align: center; padding: 13px 6px; border: 1px solid var(--line); border-radius: var(--r1); background: var(--cop-off); animation: cop-on 17.5s linear infinite; }
  .cop-step svg { width: 16px; height: 16px; color: var(--muted); margin-bottom: 6px; transition: color .3s; }
  .cop-step b { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; transition: color .3s; }
  @keyframes cop-on {
    0%, 1.5% { border-color: var(--line); background: var(--cop-off); }
    3%, 17% { border-color: var(--gold); background: var(--wash-3); }
    18.5%, 100% { border-color: var(--line); background: var(--cop-off); }
  }
  .cop-step:nth-child(1) { animation-delay: 0s; }
  .cop-step:nth-child(2) { animation-delay: -14s; }
  .cop-step:nth-child(3) { animation-delay: -10.5s; }
  .cop-step:nth-child(4) { animation-delay: -7s; }
  .cop-step:nth-child(5) { animation-delay: -3.5s; }
  .cop-say { position: relative; height: 96px; }
  .cop-card { position: absolute; inset: 0; display: flex; gap: 13px; align-items: flex-start; padding: 15px 17px; border: 1px solid var(--gold); border-radius: var(--r2); background: var(--wash-2); opacity: 0; animation: cop-say 17.5s linear infinite; box-shadow: 0 0 34px var(--wash-2); }
  @keyframes cop-say { 0%,1.5% { opacity: 0; transform: translateY(7px); } 3%,17% { opacity: 1; transform: translateY(0); } 18.5%,100% { opacity: 0; transform: translateY(-7px); } }
  .cop-card:nth-child(1) { animation-delay: 0s; }
  .cop-card:nth-child(2) { animation-delay: -14s; }
  .cop-card:nth-child(3) { animation-delay: -10.5s; }
  .cop-card:nth-child(4) { animation-delay: -7s; }
  .cop-card:nth-child(5) { animation-delay: -3.5s; }
  .cop-ai { width: 30px; height: 30px; border-radius: 8px; background: var(--gold); color: var(--btn-ink); display: grid; place-items: center; flex-shrink: 0; }
  .cop-ai svg { width: 16px; height: 16px; }
  .cop-txt em { font-style: normal; display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
  .cop-txt b { display: block; font-size: 14.5px; color: var(--gold-bright); font-weight: 700; line-height: 1.45; }
  .cop-txt small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 5px; }
  @media (max-width: 760px) { .cop-track { grid-template-columns: repeat(5, 1fr); gap: 5px; } .cop-step b { font-size: 9px; } .cop-step svg { width: 13px; height: 13px; } .cop-say { height: 132px; } .cop-txt b { font-size: 13px; } }

  /* ============ Ch01: the fractured rail ============ */
  /* No toggle — the section states the problem and Ch02 answers it. */
  .gapviz { max-width: 900px; margin: var(--gap-inner) auto 0; }

  /* the anchor stat. NOTE: caption is targeted as a DIRECT child; a descendant
     "span" selector previously also hit the span inside the number and shrank it. */
  .gv-hero { text-align: center; margin-bottom: 34px; }
  .gv-hero .gv-num { display: block; font-family: 'Manrope'; font-size: 64px; font-weight: 800;
    letter-spacing: -.04em; line-height: 1; color: #ff5f3d; text-shadow: 0 0 46px rgba(255,95,61,.32); }
  .gv-hero > span { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); }

  .gv-stage { position: relative; height: 262px; }
  .gv-stage svg.gv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

  /* tool cards with big icons */
  /* Centred with a negative margin, NOT translateX(-50%): these cards carry
     data-reveal, and `[data-reveal].in { transform: none }` outranks a single
     class selector — so the reveal was cancelling the centring and every card
     sat with its LEFT edge on the rail stub. margin-left keeps the two apart. */
  .gv-sys { position: absolute; top: 0; width: 142px; margin-left: -71px; text-align: center;
    z-index: 3; cursor: pointer; padding: 18px 10px 15px; border-radius: var(--r2);
    border: 1px solid var(--glass-brd); background: var(--panel);
    box-shadow: 0 6px 22px rgba(0,0,0,.15);
    transition: border-color .28s var(--ease), box-shadow .28s var(--ease); }
  /* Matches the page's icon language (cf. .stat-icon, .feat-item .fi, .dd-item .di):
     a gold-washed rounded tile with a GOLD glyph at ~half the tile size and the
     default stroke. The earlier version had no tile and a muted grey glyph, which
     is why it looked foreign; the version before that had a *neutral* tile, which
     is why it read as a redundant box rather than an accent. */
  .gv-ico { width: 44px; height: 44px; margin: 0 auto 14px; color: var(--gold);
    background: var(--wash-3); border-radius: var(--r1); display: grid; place-items: center;
    border: 1px solid var(--wash-4);
    transition: background .28s var(--ease), border-color .28s var(--ease); }
  .gv-ico svg { width: 22px; height: 22px; }
  .gv-sys b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 700; line-height: 1.25; }
  .gv-sys:hover, .gv-sys.sel { border-color: var(--gold); box-shadow: 0 12px 34px var(--wash-3); }
  .gv-sys:hover .gv-ico, .gv-sys.sel .gv-ico { background: var(--wash-4); border-color: var(--gold); }

  /* the severed rail */
  .gv-rail { stroke: var(--glass-brd); stroke-width: 4; fill: none; stroke-linecap: round; }
  .gv-stub { stroke: var(--glass-brd); stroke-width: 2; fill: none; stroke-dasharray: 4 4; }

  /* glowing crosses mark each break */
  .gv-x { stroke: #ff5f3d; stroke-width: 4; fill: none; stroke-linecap: round;
    filter: drop-shadow(0 0 9px rgba(255,95,61,.85)); animation: gv-xglow 2.4s ease-in-out infinite; }
  @keyframes gv-xglow {
    0%,100% { opacity: .72; filter: drop-shadow(0 0 6px rgba(255,95,61,.55)); }
    50%     { opacity: 1;   filter: drop-shadow(0 0 15px rgba(255,95,61,.95)); }
  }

  /* chips spilling out of each break */
  .gv-drop { fill: #ff5f3d; opacity: 0; filter: drop-shadow(0 0 8px rgba(255,95,61,.8)); }

  /* the void they fall into */
  .gv-void { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; border-radius: var(--r2);
    background: linear-gradient(180deg, transparent, rgba(255,95,61,.12));
    border-bottom: 2px solid rgba(255,95,61,.42);
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; }
  .gv-void b { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: #ff7a52; }

  .gv-read { margin-top: 28px; text-align: center; }
  .gv-read .gvr-c { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 13px; }
  .gv-read .gvr-c span { font-size: 12px; padding: 6px 15px; border-radius: 100px; border: 1px solid var(--line);
    color: var(--muted); transition: all .25s var(--ease); }
  .gv-read .gvr-c span.has { border-color: var(--gold); color: var(--gold); background: var(--wash-2);
    font-weight: 600; }
  .gv-read .gvr-c span.miss { border-color: rgba(255,95,61,.36); color: #ff7a52; text-decoration: line-through; }
  .gv-read .gvr-l { font-size: 12.5px; color: var(--faint); min-height: 17px; }
  .gv-read .gvr-l b { color: var(--gold); font-weight: 700; }
  @media (prefers-reduced-motion: reduce) { .gv-x { animation: none; } }

  /* ============ Stage 03: VR + theatre feeding the record ============ */
  /* Grid, not a fixed-height stage with absolutely-positioned children — the
     record card grows with its rows, so a fixed height guaranteed overflow. */
  .xstage { display: grid; grid-template-columns: 1fr 58px 1.05fr; align-items: center;
    border: 1px solid var(--glass-brd); border-radius: var(--r3); padding: 20px; }
  .xcol { display: flex; flex-direction: column; gap: 14px; }
  .xdev { border: 1px solid var(--gold-line); border-radius: var(--r2); background: var(--panel-2); padding: 12px; }
  .xd-t b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 700; line-height: 1.25; }
  .xd-t span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
  .xd-live { margin-top: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #2E9E52; display: inline-flex; align-items: center; gap: 5px; }
  .xd-live i { width: 5px; height: 5px; border-radius: 50%; background: #38c96b; box-shadow: 0 0 7px #38c96b;
    animation: mk-blink 1.7s ease-in-out infinite; }

  /* VR headset */
  .xd-goggles { height: 58px; margin-bottom: 10px; border-radius: var(--r1); background: var(--wash-1);
    border: 1px solid var(--gold-line); display: grid; place-items: center; }
  .xd-goggles svg { width: 74px; height: 36px; color: var(--gold); }
  .xd-goggles .lens { fill: var(--wash-4); stroke: var(--gold); animation: lens-glow 2.8s ease-in-out infinite; }
  .xd-goggles .lens.b { animation-delay: .35s; }
  @keyframes lens-glow { 0%,100% { fill: var(--wash-3); } 50% { fill: var(--wash-5); } }

  /* Theatre screen: a panning room + the agent's pointer */
  .xd-screen { position: relative; height: 58px; margin-bottom: 10px; border-radius: var(--r1); overflow: hidden;
    border: 1px solid var(--gold-line); background: var(--wash-1); }
  .xs-scene { position: absolute; inset: 0;
    background-image:
      linear-gradient(180deg, transparent 60%, var(--wash-4) 60%, var(--wash-4) 60.6%, transparent 60.6%),
      repeating-linear-gradient(90deg, transparent 0 54px, var(--wash-3) 54px 54.8px);
    background-size: 100% 100%, 210px 100%;
    animation: xs-pan 10s linear infinite; }
  @keyframes xs-pan { to { background-position: 0 0, -210px 0; } }
  .xs-cursor { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
    box-shadow: 0 0 0 3px var(--wash-3); animation: xs-cur 6s ease-in-out infinite; }
  @keyframes xs-cur {
    0%   { left: 18%; top: 54%; } 30%  { left: 62%; top: 32%; }
    58%  { left: 40%; top: 62%; } 100% { left: 18%; top: 54%; }
  }
  .xs-tag { position: absolute; right: 6px; bottom: 5px; font-size: 8px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--btn-ink); background: var(--gold); padding: 3px 8px; border-radius: 100px; }

  /* connector: CSS lines + travelling dots (no SVG, so nothing can distort) */
  .xlink { position: relative; align-self: stretch; min-height: 96px; }
  .xl-line { position: absolute; left: -2px; right: -2px; border-top: 1px dashed var(--gold-line); }
  .xl-line.a { top: 32%; } .xl-line.b { top: 68%; }
  .xl-line i { position: absolute; top: -3.5px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold); animation: xl-run 2.6s cubic-bezier(.45,0,.3,1) infinite; }
  .xl-line.b i { animation-delay: 1.3s; }
  @keyframes xl-run {
    0%   { left: 0; opacity: 0; } 12% { opacity: 1; }
    85%  { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; }
  }

  /* the record both feeds write to */
  .xrec { border: 1px solid var(--gold); border-radius: var(--r2); background: var(--wash-1); padding: 13px 14px;
    box-shadow: 0 0 30px var(--wash-2); }
  .xr-h { font-size: 9.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--gold);
    margin-bottom: 9px; display: flex; justify-content: space-between; align-items: center; }
  .xr-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .xr-row:last-child { border-bottom: 0; }
  .xr-row b { display: block; font-size: 12px; color: var(--ink); font-weight: 600; line-height: 1.3; margin-top: 4px; }
  .xr-row span.d { font-size: 10.5px; color: var(--muted); }
  .xr-src { font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px;
    border-radius: 100px; border: 1px solid var(--gold-line); color: var(--gold); background: var(--wash-1); }
  .xr-row.ai { background: var(--wash-2); margin: 8px -14px -13px; padding: 10px 14px;
    border-radius: 0 0 var(--r2) var(--r2); border-bottom: 0; }
  @media (max-width: 900px) {
    .xstage { grid-template-columns: 1fr; gap: 16px; }
    .xlink { min-height: 44px; }
    .xl-line.a { top: 34%; } .xl-line.b { top: 66%; }
  }

  /* ===================== Rhythm & restraint =====================
     One vertical scale for the whole page so every chapter gets the same
     breathing room, plus lighter borders and fewer shadows for a calmer,
     more minimal read. Appended last so it wins over the earlier blocks. */
  :root { --gap-section: 168px; --gap-inner: 44px; }

  .hero { padding: 92px 0 76px; }
  .clients { padding: 64px 0 76px; }
  .story { padding: var(--gap-section) 0 0; }
  .sec-head { padding: var(--gap-section) 0 var(--gap-inner); }
  .stats-section { padding: 0 0 8px; }
  .integrated-flow { padding: var(--gap-section) 0 0; gap: 150px; }
  .moat-grid { margin-top: 52px; gap: 26px; }
  .tcards { gap: 26px; }
  .cta { margin: var(--gap-section) 0 96px; padding: 92px 40px; }
  footer { padding: 64px 0 48px; }

  /* headings and chapter marks get a little more air around them */
  .chapter { margin-bottom: 26px; }
  .story-head h2 { margin-bottom: 22px; }
  .story-head p { max-width: 620px; }
  .sec-head h2 { margin-bottom: 0; }
  .flow-text h2 { margin-bottom: 22px; }
  .flow-text p { margin-bottom: 26px; }
  .flow-features { gap: 15px; }

  /* the diagrams themselves get interior room */
  .spine { padding: 30px 26px 24px; margin-top: var(--gap-inner); }
  .cop { padding: 30px; margin-top: var(--gap-inner); }
  .diagram-box, .mk, .xstage, .mile, .plan { padding: 22px; }

  /* restraint: lighter hairlines, fewer heavy shadows */
  :root { --glass-brd: rgba(255,255,255,.11); --glass-shadow: 0 10px 34px rgba(0,0,0,.28); }
  .moat-card, .stat, .tcard { box-shadow: none; }
  .moat-card:hover, .stat:hover { box-shadow: 0 10px 30px rgba(0,0,0,.3); }
  .stat { padding: 34px 24px; }
  .moat-card { padding: 34px; }
  .tcard { padding: 34px; }

  @media (max-width: 980px) {
    :root { --gap-section: 96px; --gap-inner: 32px; }
    .integrated-flow { gap: 92px; }
    .cta { padding: 64px 26px; }
    .hero { padding: 60px 0 52px; }
  }

  /* ===================== Brand colours (both themes) =====================
     Real product colours so the mocks read as native, not gold-on-gold. */
  :root {
    --wa: #25D366;                    /* WhatsApp green */
    --wa-in: #202C33;   --wa-in-tx: #E9EDEF;
    --wa-out: #005C4B;  --wa-out-tx: #E9EDEF;
    --meta: #0866FF;
    --g-blue: #4285F4; --g-red: #EA4335; --g-yellow: #FBBC04; --g-green: #34A853;
    --mb: #D8232A;                    /* MagicBricks */
    --acres: #C8102E;                 /* 99acres */
  }
  /* WhatsApp thread reads like WhatsApp */
  .mk-bubble.in  { background: var(--wa-in);  color: var(--wa-in-tx); }
  .mk-bubble.out { background: var(--wa-out); color: var(--wa-out-tx); }
  .mk-bubble small { color: rgba(233,237,239,.55); }
  .brand-wa    { color: var(--wa) !important; }
  .brand-meta  { color: var(--meta) !important; }
  .brand-goog  { color: var(--g-blue) !important; }
  .brand-mb    { color: var(--mb) !important; }
  .brand-acres { color: var(--acres) !important; }
  .track span:hover .brand-wa, .track span:hover .brand-meta { filter: brightness(1.15); }

  /* ===================== Light theme =====================
     Layered on top: every token is redefined, plus the handful of rules that
     hardcode a dark surface. The dark theme above is left byte-for-byte alone. */
  :root[data-theme="light"] {
    /* Professional light: white surfaces, near-black text. Amber is demoted to
       an accent only (buttons, eyebrows, icons, active states) — it is no longer
       the colour of headings or of every border. */
    --page: #FFFFFF;
    --panel: #FFFFFF;
    --ink: #0E1116;                      /* near-black body + headings */
    --muted: #59606E;                    /* neutral slate, not warm brown */
    --faint: #8A919F;
    --line: rgba(14,17,22,.10);
    --gold-line: rgba(14,17,22,.11);     /* neutral hairlines — this killed the "coffee" */
    --gold-bright: #0E1116;              /* headings render near-black */
    --gold: #96690C;                     /* the accent — AA on white both ways */
    --gold-2: #C08F22;
    --btn-ink: #FFFFFF;
    --wash-1: rgba(14,17,22,.022);       /* neutral fills */
    --wash-2: rgba(14,17,22,.038);
    --wash-3: rgba(150,105,12,.10);      /* amber kept only for active/selected */
    --wash-4: rgba(150,105,12,.20);
    --wash-5: rgba(150,105,12,.55);
    --glass-bg: #FFFFFF;
    --glass-bg-2: #FCFCFD;
    --glass-brd: rgba(14,17,22,.10);
    --glass-shadow: 0 1px 2px rgba(14,17,22,.04), 0 8px 24px rgba(14,17,22,.06);
    --wa-in: #FFFFFF;   --wa-in-tx: #111B21;
    --wa-out: #D9FDD3;  --wa-out-tx: #111B21;
    /* the material, inverted: dark lines on the white page. Kept low enough to
       read as texture rather than as a grid you have to look past. */
    --tex-line: rgba(14,17,22,.042);
    --tex-mark: rgba(150,105,12,.18);
    --cop-off: rgba(14,17,22,.03);
    /* the four platform pages build their hero mock on --panel-2; without a light
       value it stayed a near-black slab on the white page */
    --panel-2: #FFFFFF;
    --brand-ink: #172b49;               /* the brand navy, 14.2:1 on white */
  }
  /* :root IS <html> — a descendant "html" selector never matches, which left the
     root painted #050505 and showed a dark strip above the (margin-collapsed) body. */
  :root[data-theme="light"],
  :root[data-theme="light"] body { background: var(--page); }
  :root[data-theme="light"] .mk-bubble small { color: rgba(17,27,33,.5); }
  :root[data-theme="light"] ::selection { background: rgba(138,100,16,.22); color: #000; }

  /* ambient: barely-there on white */
  :root[data-theme="light"] .orb.a { opacity: .1; }
  :root[data-theme="light"] .orb.b { opacity: .08; }
  :root[data-theme="light"] .grid-bg { background:
      radial-gradient(90% 60% at 50% -8%, rgba(138,100,16,.08) 0%, transparent 60%),
      radial-gradient(70% 50% at 100% 100%, rgba(212,166,42,.06) 0%, transparent 55%); }
  :root[data-theme="light"] .mouse-glow { background: radial-gradient(circle, rgba(138,100,16,.08) 0%, transparent 60%); }

  /* every surface that hardcoded a dark fill */
  :root[data-theme="light"] header { background: rgba(255,255,255,.82); }
  :root[data-theme="light"] header.scrolled { background: rgba(255,255,255,.94); box-shadow: 0 8px 28px rgba(27,24,19,.09); }
  :root[data-theme="light"] .hub-core,
  :root[data-theme="light"] .d-node,
  :root[data-theme="light"] .moat-card,
  :root[data-theme="light"] .sp-node,
  :root[data-theme="light"] .mk-ring i,
  :root[data-theme="light"] .mp { background: var(--panel); }
  :root[data-theme="light"] .hub-node,
  :root[data-theme="light"] .cap-src,
  :root[data-theme="light"] .cap-feed,
  :root[data-theme="light"] .sp-chip,
  :root[data-theme="light"] .gv-ico,
  :root[data-theme="light"] .xdev,
  :root[data-theme="light"] .mk { background: #FFFFFF; }
  :root[data-theme="light"] .dd-panel { background: rgba(255,255,255,.97); box-shadow: 0 24px 56px rgba(27,24,19,.14); }
  :root[data-theme="light"] .mobile-nav { background: rgba(250,248,243,.98); }
  :root[data-theme="light"] .xd-screen { background: linear-gradient(165deg, #FFF6DF 0%, #FFFFFF 70%); }
  :root[data-theme="light"] .diagram-box, :root[data-theme="light"] .xstage,
  :root[data-theme="light"] .mile, :root[data-theme="light"] .cop { background: #FFFFFF; }
  :root[data-theme="light"] .stat, :root[data-theme="light"] .tcard,
  :root[data-theme="light"] .bucket-card, :root[data-theme="light"] .price-card,
  :root[data-theme="light"] .int-card, :root[data-theme="light"] .cmp-card,
  :root[data-theme="light"] .faq-item, :root[data-theme="light"] .audience-card,
  :root[data-theme="light"] .reality-card, :root[data-theme="light"] .hiw-step { background: var(--glass-bg); }
  :root[data-theme="light"] .hub-line { stroke: rgba(138,100,16,.38); }
  :root[data-theme="light"] .cop-ai { color: #fff; }
  /* restored: these were collateral in a grouped rule when the toggle CSS was stripped */
  :root[data-theme="light"] .d-path { stroke: rgba(27,24,19,.22); }
  :root[data-theme="light"] .pkt,
  :root[data-theme="light"] .sp-pkt,
  :root[data-theme="light"] .x-pkt { fill: var(--gold); filter: none; }
  :root[data-theme="light"] .spine,
  :root[data-theme="light"] .cta,
  :root[data-theme="light"] .xrec,
  :root[data-theme="light"] .cop-card,
  :root[data-theme="light"] .price-card.hl,
  :root[data-theme="light"] .mk-row.hl,
  :root[data-theme="light"] .cap-hub { border-color: var(--gold); }
  :root[data-theme="light"] .shine-title { background: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
  :root[data-theme="light"] .shine-title-gold { background: none; -webkit-text-fill-color: var(--gold-bright); color: var(--gold-bright); }

  /* theme toggle button */
  .theme-tog { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
    border: 1px solid var(--gold-line); background: transparent; color: var(--muted); cursor: pointer;
    transition: color .2s, border-color .2s, background .2s; flex-shrink: 0; }
  .theme-tog:hover { color: var(--gold); border-color: var(--gold); background: var(--wash-1); }
  .theme-tog svg { width: 16px; height: 16px; }
  .theme-tog .i-sun { display: none; }
  :root[data-theme="light"] .theme-tog .i-sun { display: block; }
  :root[data-theme="light"] .theme-tog .i-moon { display: none; }

  /* --- light theme: put the amber back only where it is a real accent --- */
  :root[data-theme="light"] .shine-title-gold,
  :root[data-theme="light"] .grad { color: var(--gold); -webkit-text-fill-color: var(--gold); }
  :root[data-theme="light"] .stat .v,
  :root[data-theme="light"] .mini-stats .ms b,
  :root[data-theme="light"] .hiw-step b { color: var(--ink); }
  :root[data-theme="light"] .sp-node,
  :root[data-theme="light"] .hub-core { border-color: var(--gold); }
  :root[data-theme="light"] .hub-core b,
  :root[data-theme="light"] .orbit-cap,
  :root[data-theme="light"] .sp-foot,
  :root[data-theme="light"] .knows p { color: var(--ink); }
  /* flatter, cleaner surfaces */
  :root[data-theme="light"] .diagram-box, :root[data-theme="light"] .xstage,
  :root[data-theme="light"] .mile, :root[data-theme="light"] .cop,
  :root[data-theme="light"] .mk { background: #FFFFFF; }
  :root[data-theme="light"] .hub-glow { opacity: .05; }
  :root[data-theme="light"] .ring { border-color: rgba(14,17,22,.09); }
  :root[data-theme="light"] .cta { background: #FCFBF7; }

  /* ===================== Chapter markers & the marquee seam =====================
     The marquee's 76px bottom plus the first chapter's 168px top left a 244px
     void before "The problem"; the marquee reads as part of the hero, so the
     first chapter should follow it closely. */
  .clients { padding-bottom: 44px; }
  .clients + .story { padding-top: 30px; }

  /* Pre-headers carry the story's structure — give them real presence. */
  .chapter { gap: 15px; margin-bottom: 30px; }
  .chapter .cnum { font-size: 12.5px; font-weight: 800; letter-spacing: .09em;
    padding: 7px 15px; border-radius: 100px; }
  .chapter .clabel { font-size: 15px; font-weight: 800; letter-spacing: .15em; }
  .chapter .crule { height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
  @media (max-width: 720px) {
    .chapter { gap: 11px; margin-bottom: 22px; }
    .chapter .cnum { font-size: 11px; padding: 6px 12px; }
    .chapter .clabel { font-size: 12.5px; letter-spacing: .12em; }
    .clients + .story { padding-top: 18px; }
  }

  /* ===================== Mega-menu focus scrim =====================
     Opening a nav dropdown dims and blurs the page behind it. The scrim lives
     INSIDE .wrap (which is its own z-index:2 stacking context) at z-index 40,
     so it sits above the page content but below the sticky header's z-index:50
     — putting it in <body> would have covered the header too. Purely visual:
     pointer-events stay off so the nav never becomes a click trap. */
  .nav-scrim { position: fixed; inset: 0; z-index: 40; pointer-events: none;
    opacity: 0; visibility: hidden;
    background: rgba(4,4,4,.5);
    -webkit-backdrop-filter: blur(5px) saturate(.9); backdrop-filter: blur(5px) saturate(.9);
    transition: opacity .3s var(--ease) 70ms, visibility .3s 70ms; }
  :root[data-theme="light"] .nav-scrim { background: rgba(22,20,17,.28); }
  /* :has() keeps this pure CSS — no JS needed, and it degrades to no scrim */
  body:has(.nav-dd:hover) .nav-scrim,
  body:has(.nav-dd:focus-within) .nav-scrim { opacity: 1; visibility: visible; }
  /* lift the open menu and its trigger clear of the scrim */
  body:has(.nav-dd:hover) header,
  body:has(.nav-dd:focus-within) header { box-shadow: 0 18px 50px rgba(0,0,0,.4); }
  @media (prefers-reduced-motion: reduce) { .nav-scrim { transition: none; } }

  /* ===================== Mobile: reflow every diagram =====================
     The horizontal diagrams position their parts absolutely inside a fixed-height
     stage, with inline left/top values — so they cannot reflow and simply overlap
     on a phone. Below 760px each one becomes a vertical list: SVG connectors are
     hidden and the chain/track is redrawn with CSS borders and dots. The inline
     styles need !important to be overridden. */
  @media (max-width: 760px) {

    /* --- Hero hub: radial on mobile, WITH labels --- */
    /* Stacking it destroyed the "five stages converge on one record" idea, and
       icon-only left the nodes unidentified. Keep the ring, keep the names:
       the icon sits on the ring point with its label centred underneath in a
       76px box — verified collision-free at a 310px content width. */
    .hero-creative { min-height: 0; margin-top: 6px; }
    .power-hub { aspect-ratio: 1/1; max-width: 340px; margin: 0 auto;
      display: flex; align-items: center; justify-content: center; transform: none; }
    .hub-rings, .hub-lines, .hub-glow { display: block; }
    .ring-1 { width: 176px; height: 176px; }
    .ring-2 { width: 236px; height: 236px; }
    .ring-3 { width: 296px; height: 296px; }
    .hub-core { width: 92px; height: 92px; border-radius: 50%; flex-direction: column;
      align-items: center; justify-content: center; padding: 0; gap: 0; border-width: 2px; }
    .hub-core svg { width: 19px; height: 19px; margin: 0 0 4px; }
    .hub-core b { font-size: 12px; }
    .hub-core small { font-size: 7px; margin-top: 2px; letter-spacing: .07em; }
    /* node = icon on the ring point, name centred beneath it */
    .hub-node.hn { width: 76px; padding: 0; background: none; border: 0; box-shadow: none;
      backdrop-filter: none; -webkit-backdrop-filter: none; animation: none;
      flex-direction: column; align-items: center; gap: 6px; text-align: center; }
    /* The node's surface is the icon's CIRCLE here, not a pill behind icon+label.
       The light theme paints .hub-node at (0,3,0), which outranks the (0,2,0)
       reset above and put the pill back, so it has to be undone explicitly. */
    :root[data-theme="light"] .hub-node.hn { background: none; }
    .hub-node.hn.active { transform: scale(1.06); }
    .hub-node.hn .node-icon { width: 46px; height: 46px; border-radius: 50%;
      border: 1.5px solid var(--gold-line); background: var(--panel);
      box-shadow: 0 6px 16px rgba(0,0,0,.12); }
    .hub-node.hn .node-icon svg { width: 19px; height: 19px; }
    /* the circle rule above sits later than .hub-node.active .node-icon at equal
       specificity, so it swallowed the active fill and left a white icon on a
       white disc — restate the active state at a higher weight */
    .hub-node.hn.active .node-icon { background: var(--gold); border-color: var(--gold);
      color: var(--btn-ink); box-shadow: 0 0 18px var(--wash-5); }
    .hub-node.hn .node-info { display: block; text-align: center; }
    .hub-node.hn .node-info b { font-size: 9.5px; line-height: 1.2; letter-spacing: -.01em;
      display: block; color: var(--muted); transition: color .3s; }
    .hub-node.hn.active .node-info b { color: var(--gold-bright); }
    .hub-node.hn .node-info span { display: none; }   /* sub-label would not fit */
    /* bottom node: label above the icon, or it runs past the hub's lower edge */
    .hub-slot.hn-cls .hub-node.hn { flex-direction: column-reverse; }
    .orbit-cap { margin-top: 16px; height: auto; min-height: 34px; font-size: 13px;
      line-height: 1.4; padding: 0 6px; }
    .orbit-cap b { color: var(--gold-bright); }

    /* --- Ch01 problem: horizontal chain -> vertical chain with the seams kept --- */
    .gapviz { max-width: 100%; }
    .gv-stage { height: auto; }
    .gv-stage svg.gv-svg { display: none; }
    .gv-sys { position: relative; left: auto !important; top: auto; transform: none !important;
      width: 100%; margin-left: 0; display: flex; align-items: center; gap: 13px;
      text-align: left; padding: 14px 2px; }
    .gv-sys:hover, .gv-sys.sel { transform: none !important; }
    .gv-ico { margin: 0; width: 40px; height: 40px; flex-shrink: 0; }
    .gv-sys b { font-size: 13.5px; }
    .gv-sys + .gv-sys { border-top: 1px dashed var(--gold-line); }
    /* .gv-void is the last child of .gv-stage, so :not(:last-child) matched the
       fifth card too and left a cross dangling below the chain. Hang the cross
       off the FOLLOWING card instead: one per adjacent pair, exactly four. */
    .gv-sys + .gv-sys::after { content: '\2715'; position: absolute; left: 18px; top: -8px;
      font-size: 11px; line-height: 1; color: #ff6040; background: var(--page); padding: 0 5px;
      text-shadow: 0 0 9px rgba(255,95,61,.85); }
    /* the new card chrome and the absolute void do not belong in the vertical list */
    .gv-sys { border: 0; background: none; box-shadow: none; border-radius: 0; }
    .gv-sys:hover, .gv-sys.sel { box-shadow: none; border: 0; }
    .gv-void { position: static; height: auto; margin-top: 18px; padding: 12px 10px;
      border-radius: var(--r2); justify-content: center; }
    .gv-hero { margin-bottom: 22px; }
    .gv-hero .gv-num { font-size: 44px; }

    /* --- Ch02 the fix: spine -> vertical thread --- */
    .spine { padding: 22px 18px; }
    .sp-stage { height: auto; padding-left: 6px; }
    .sp-stage svg.sp-svg { display: none; }
    .sp-node { display: none; }
    .sp-chip { position: relative; left: auto !important; top: auto !important; transform: none;
      width: 100%; min-width: 0; text-align: left; border: 0; background: none; border-radius: 0;
      border-left: 2px solid var(--gold); padding: 12px 0 12px 20px; margin-left: 5px; }
    .sp-chip::before { content: ''; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px;
      border-radius: 50%; background: var(--gold); }
    .sp-chip em { font-size: 9px; }
    .sp-chip b { font-size: 12.5px; }
    .sp-foot { margin-top: 14px; }

    /* --- Stage 01 capture: converging paths -> stacked sources -> hub -> feed --- */
    .diag-cap { max-width: 100%; padding: 18px; }
    .cap-timer { position: static; display: inline-flex; margin-bottom: 14px; }
    .cap-stage { height: auto; display: flex; flex-direction: column; gap: 9px; }
    .cap-stage > svg { display: none; }
    .cap-src { position: relative; top: auto !important; left: auto; width: 100%; height: auto;
      padding: 11px 14px; }
    .cap-hub { position: relative; top: auto; right: auto; width: 100%; height: auto; padding: 13px;
      margin-top: 4px; }
    .cap-feed { position: relative; top: auto; right: auto; width: 100%; margin-top: 4px; }

    /* --- Stage 03 experience: already grid; tighten the connector --- */
    .xstage { padding: 16px; }
    .xlink { min-height: 38px; }

    /* --- Stage 05 collect: horizontal track -> vertical milestones --- */
    .mile { padding: 18px; }
    .mile-track { height: auto; background: none; border-radius: 0; margin: 16px 0 18px;
      display: flex; flex-direction: column; }
    .mile-fill { display: none; }
    .mp { position: relative; left: auto !important; top: auto; transform: none; width: 100%;
      height: auto; border: 0; border-left: 2px solid var(--line); border-radius: 0; background: none;
      padding: 0 0 15px 17px; box-shadow: none; animation: none; }
    .mp:last-child { padding-bottom: 0; }
    .mp.done { border-left-color: var(--gold); }
    .mp::before { content: ''; position: absolute; left: -6px; top: 1px; width: 10px; height: 10px;
      border-radius: 50%; background: var(--line); }
    .mp.done::before { background: var(--gold); }
    .mp.due::before { background: var(--gold); box-shadow: 0 0 0 4px var(--wash-3); }
    .mp em { position: static; transform: none; display: block; font-size: 11.5px; color: var(--ink);
      font-weight: 600; }
    .mp i { position: static; transform: none; display: block; font-size: 11px; margin-top: 2px; }

    /* --- Ch03 copilot: keep 5 steps but let labels breathe --- */
    .cop { padding: 20px 16px; }
    .cop-track { gap: 5px; }
    .cop-step { padding: 10px 3px; }
    .cop-step svg { width: 14px; height: 14px; margin-bottom: 4px; }
    .cop-step b { font-size: 8.5px; line-height: 1.15; letter-spacing: -.01em; }
    .cop-say { height: 156px; }
    .cop-card { padding: 13px 14px; gap: 10px; }
    .cop-txt b { font-size: 13px; }

    /* --- shared: nothing may exceed the viewport --- */
    .compare-wrap { -webkit-overflow-scrolling: touch; }
    .mk, .diagram-box, .xstage, .mile, .cop, .spine, .gapviz { max-width: 100%; }
  }
  @media (max-width: 400px) {
    .gv-sys b { font-size: 12.5px; }
    .cop-step b { font-size: 7.5px; }
    .cop-say { height: 172px; }
    .hub-node.hn b { font-size: 13px; }
  }

  /* ===================== Problem vs Solution: distinct treatments =====================
     Both get centred headings and no number capsule. The problem sits in a
     full-bleed dark, intense band (in BOTH themes, so it reads as a deliberate
     drop into the dark); the solution rises out of it on scroll. */

  /* --- shared: centred heading, no rule --- */
  .story.is-problem .chapter, .story.is-solution .chapter, .story.is-copilot .chapter {
    justify-content: center; }
  .story.is-problem .crule, .story.is-solution .crule, .story.is-copilot .crule { display: none; }
  .story.is-problem .story-head, .story.is-solution .story-head, .story.is-copilot .story-head {
    max-width: 760px; margin: 0 auto; text-align: center; }
  .story.is-problem .story-head p, .story.is-solution .story-head p,
  .story.is-copilot .story-head p { margin-left: auto; margin-right: auto; }

  /* --- highlighted labels: the two payoff chapters carry a filled pill rather
     than plain eyebrow text. They inherit the .cnum treatment, and --btn-ink is
     theme-aware (#1c1404 on the dark gold, #FFFFFF on the light one) so the
     pill stays AA in both directions. The problem label stays plain on purpose
     — that contrast is what separates the two sections. */
  .story.is-solution .clabel,
  .story.is-copilot .clabel {
    color: var(--btn-ink); background: var(--gold);
    padding: 8px 18px; border-radius: 100px; letter-spacing: .16em;
    box-shadow: 0 10px 26px var(--wash-4); }

  /* --- PROBLEM: full-bleed dark + intense --- */
  /* --band-in / --band-out are the two feather depths. They are deliberately
     asymmetric: a quick drop into the dark, a slow climb back out into the
     solution. Both fades live entirely inside the section padding, so no
     inverted text ever lands on a half-faded background. */
  .story.is-problem { position: relative; isolation: isolate;
    --band-in: 24px; --band-out: 34px;
    padding: calc(var(--band-in) + 88px) 0 calc(var(--band-out) + 70px);
    margin-top: var(--gap-section);
    /* Feather end colours. On the DARK theme the page and the band are both
       near-black, so there is nothing to merge — the ends sit at the band's own
       colour and the fade is invisible. Anything warmer shows up as a bright
       stripe here, because the warmth is the only thing the fade can reveal. */
    --band-e1: #17100c; --band-e2: #140d0a; --band-e3: #120c08; }
  /* On the LIGHT theme the ends must be saturated warm: fading a near-neutral
     dark to transparent over white composites through desaturated grey, which
     reads as a smudge, where a saturated warm composites through terracotta,
     which reads as depth. These stops are only ever painted at partial alpha —
     by --band-in the mask is opaque and the band's own colour has taken over. */
  :root[data-theme="light"] .story.is-problem {
    --band-e1: #a04418; --band-e2: #5a2a14; --band-e3: #22140d; }
  /* the top feather is the breathing space now, so the margin can come off —
     and the hairline above it has to go, or it reads as the hard seam the
     feather exists to remove */
  .clients + .story.is-problem { margin-top: 0; }
  .clients:has(+ .story.is-problem) { border-bottom: 0; }
  .story.is-problem::before {
    content: ''; position: absolute; z-index: -1; inset: 0 auto; top: 0; bottom: 0;
    left: 50%; transform: translateX(-50%); width: 100vw;
    background:
      /* the top glow peaks below the feather, or the fade would eat it */
      radial-gradient(64% 84% at 50% 9%, rgba(255,95,61,.15), transparent 68%),
      radial-gradient(40% 60% at 50% 100%, rgba(255,95,61,.07), transparent 70%),
      /* the feathered ends are theme-scoped — see --band-e1..e3 above */
      linear-gradient(180deg,
        var(--band-e1) 0,
        var(--band-e2) calc(var(--band-in) * .45),
        var(--band-e3) calc(var(--band-in) * .8),
        #150d09 var(--band-in),
        #100a08 52%,
        #180f0b calc(100% - var(--band-out)),
        var(--band-e3) calc(100% - var(--band-out) * .78),
        var(--band-e2) calc(100% - var(--band-out) * .4),
        var(--band-e1) 100%);
    /* Eased stops rather than one linear ramp, so the falloff reads as depth
       rather than as a flat wash. */
    --band-feather: linear-gradient(180deg,
      rgba(0,0,0,0)    0,
      rgba(0,0,0,.13)  calc(var(--band-in) * .24),
      rgba(0,0,0,.46)  calc(var(--band-in) * .5),
      rgba(0,0,0,.83)  calc(var(--band-in) * .75),
      #000             var(--band-in),
      #000             calc(100% - var(--band-out)),
      rgba(0,0,0,.87)  calc(100% - var(--band-out) * .74),
      rgba(0,0,0,.5)   calc(100% - var(--band-out) * .46),
      rgba(0,0,0,.13)  calc(100% - var(--band-out) * .2),
      rgba(0,0,0,0)    100%);
    -webkit-mask-image: var(--band-feather); mask-image: var(--band-feather); }
  /* invert everything inside the band, in both themes */
  .story.is-problem .clabel { color: #ff8a6b; }
  .story.is-problem .story-head h2 { color: #FFF1EA; -webkit-text-fill-color: #FFF1EA;
    background: none; animation: none; }
  .story.is-problem .story-head p { color: rgba(255,241,234,.6); }
  .story.is-problem .gv-hero > span { color: rgba(255,241,234,.55); }
  .story.is-problem .gv-sys { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1);
    box-shadow: 0 8px 26px rgba(0,0,0,.4); }
  .story.is-problem .gv-sys b { color: #FFF1EA; }
  .story.is-problem .gv-sys:hover, .story.is-problem .gv-sys.sel {
    border-color: #ff7a52; box-shadow: 0 14px 36px rgba(255,95,61,.18); }
  .story.is-problem .gv-ico { background: rgba(255,95,61,.12); border-color: rgba(255,95,61,.3);
    color: #ff9678; }
  .story.is-problem .gv-sys:hover .gv-ico, .story.is-problem .gv-sys.sel .gv-ico {
    background: rgba(255,95,61,.2); border-color: #ff7a52; }
  .story.is-problem .gv-rail, .story.is-problem .gv-stub { stroke: rgba(255,255,255,.16); }
  /* the mobile vertical chain: seam + cross must read against the dark band, not
     against --page (which is white in the light theme) */
  .story.is-problem .gv-sys + .gv-sys { border-top-color: rgba(255,255,255,.12); }
  .story.is-problem .gv-sys + .gv-sys::after { background: #100a08; }
  .story.is-problem .gv-read .gvr-c span { border-color: rgba(255,255,255,.15); color: rgba(255,241,234,.58); }
  .story.is-problem .gv-read .gvr-c span.miss { border-color: rgba(255,95,61,.45); color: #ff8a6b; }
  .story.is-problem .gv-read .gvr-c span.has { border-color: #ff9678; color: #ffb59e;
    background: rgba(255,95,61,.12); }
  .story.is-problem .gv-read .gvr-l { color: rgba(255,241,234,.4); }
  .story.is-problem .gv-read .gvr-l b { color: #ffb59e; }

  /* the crosses snap in when the band scrolls into view, then keep pulsing.
     Both animations are listed together: gv-xglow is delayed past the snap, so
     it takes over opacity/filter only once the cross has landed (the last
     animation in the list wins on a shared property while it is active), while
     gv-xsnap's `forwards` fill holds the settled transform. Each cross carries
     its own stagger as --xd (see the generator: a single animation-delay would
     have applied to both animations at once). */
  .gv-x { transform-box: fill-box; transform-origin: center; opacity: 0; animation: none; }
  /* longhands, not the shorthand: a var() inside the `animation` shorthand makes
     the whole declaration invalid at computed-value time if any one part does not
     fit the grammar, which silently dropped both animations. */
  .gapviz.in .gv-x {
    animation-name: gv-xsnap, gv-xglow;
    animation-duration: .6s, 2.4s;
    animation-timing-function: var(--ease), ease-in-out;
    animation-delay: var(--xd, 0s), calc(var(--xd, 0s) + .6s);
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite; }
  @keyframes gv-xsnap {
    0%   { opacity: 0; transform: scale(.25) rotate(-35deg); }
    55%  { opacity: 1; transform: scale(1.3) rotate(0deg); }
    /* lands on gv-xglow's 0% opacity so the handoff is seamless */
    100% { opacity: .72; transform: scale(1) rotate(0deg); }
  }

  /* --- SOLUTION: rises dramatically out of the dark --- */
  .story.is-solution { padding-top: 104px; }
  .story.is-solution [data-reveal] { transform: translateY(58px) scale(.985);
    transition-duration: .95s; }
  .story.is-solution [data-reveal].in { transform: none; }
  /* the thread draws itself left to right */
  #spinepath { stroke-dasharray: 720; stroke-dashoffset: 720; }
  .spine.in #spinepath { animation: sp-draw 1.5s .28s var(--ease) forwards; }
  @keyframes sp-draw { to { stroke-dashoffset: 0; } }
  /* nodes land after the thread reaches them */
  .spine .sp-node { opacity: 0; }
  .spine.in .sp-node { animation: sol-pop .55s var(--ease) forwards; }
  @keyframes sol-pop {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
    60%  { opacity: 1; transform: translate(-50%,-50%) scale(1.18); }
    100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .gapviz.in .gv-x, .spine.in #spinepath, .spine.in .sp-node { animation: none; }
    .gv-x, .spine .sp-node { opacity: 1; }
    #spinepath { stroke-dashoffset: 0; }
    .story.is-solution [data-reveal] { transform: none; }
  }
  @media (max-width: 760px) {
    /* shorter feathers on a short viewport, so the band still has a solid core */
    .story.is-problem { --band-in: 16px; --band-out: 22px;
      padding: calc(var(--band-in) + 52px) 0 calc(var(--band-out) + 44px); }
    .story.is-solution { padding-top: 46px; }
    .story.is-solution [data-reveal] { transform: translateY(28px); }
    /* the vertical chain is a list, not five cards — five stacked backgrounds
       merge into one slab. Let the band show through and keep only the seams. */
    .story.is-problem .gv-sys,
    .story.is-problem .gv-sys:hover, .story.is-problem .gv-sys.sel {
      background: none; border: 0; box-shadow: none; }
    .story.is-problem .gv-sys + .gv-sys { border-top: 1px dashed rgba(255,255,255,.12); }
  }

  /* ============ Engage mock: a real WhatsApp thread in the light theme ============
     In the light theme the incoming bubbles are #FFFFFF on a #FFFFFF card, so the
     only colour in the whole diagram was the one green outgoing bubble. Giving the
     card WhatsApp's own chat wallpaper makes the white bubbles read as bubbles and
     the thread read as native. Scoped with :has(.mk-bubble) because .mk is a shared
     mock shell — the bars and document mocks must stay on a plain surface.
     The dark theme already reads correctly and is left alone. */
  :root[data-theme="light"] .mk:has(.mk-bubble) {
    background: #EFEAE2; border-color: rgba(11,20,26,.12); }
  /* WhatsApp's own bubble shadow — this is what separates a bubble from the
     wallpaper, since both are light */
  :root[data-theme="light"] .mk:has(.mk-bubble) .mk-bubble {
    box-shadow: 0 1px .5px rgba(11,20,26,.13); }
  /* the captured-objection row is a card sitting ON the wallpaper, so it needs its
     own opaque surface */
  :root[data-theme="light"] .mk:has(.mk-bubble) .mk-row,
  :root[data-theme="light"] .mk:has(.mk-bubble) .mk-row.hl {
    background: #FFFFFF; }
  /* AA on the wallpaper: the default gold is 4.02 and the mint green 1.9 against
     #EFEAE2, both under 4.5 for text this size. These are 5.6 and 5.4. */
  :root[data-theme="light"] .mk:has(.mk-bubble) .mk-head { color: #7A5409; }
  :root[data-theme="light"] .mk:has(.mk-bubble) .mk-live { color: #0B6B45; }
  :root[data-theme="light"] .mk:has(.mk-bubble) .brand-wa { color: #0B6B45 !important; }

  /* ============ Light theme: surfaces that only existed for the dark page ============
     These all painted a near-transparent WHITE (rgba(255,255,255,.0x)) — a fill
     that reads as a soft lift on #050505 and as literally nothing on #FFFFFF.
     On the light theme they were invisible: the document mock rendered as an
     empty box, the floor plate lost every "available" unit, the progress track
     had no track, and the "dim" chips lost their chip. Each is restated as an
     ink wash of the equivalent weight. Found by auditing every background
     declaration in this file for a dark literal with no light-theme rule. */
  :root[data-theme="light"] .mk-doc-line { background: rgba(14,17,22,.10); }
  /* only the BASE (available) state — .s/.h are modifiers at lower specificity
     than this override, so matching every <i> here repainted sold units grey */
  :root[data-theme="light"] .mk-units i:not(.s):not(.h)  { background: rgba(14,17,22,.07); }
  :root[data-theme="light"] .mk-legend i:not(.s):not(.h) { background: rgba(14,17,22,.10); }
  :root[data-theme="light"] .mile-track  { background: rgba(14,17,22,.10); }
  :root[data-theme="light"] .mk-pill.dim,
  :root[data-theme="light"] .cc-pill.dim { background: rgba(14,17,22,.06); }
  /* container surfaces: opaque, so the page material does not read through them */
  :root[data-theme="light"] .mk-doc,
  :root[data-theme="light"] .check-grid .ck,
  :root[data-theme="light"] .frag-card,
  :root[data-theme="light"] .asm-chip { background: var(--panel); }
  /* row hairlines were rgba(255,255,255,.055) — nothing at all on a white page */
  :root[data-theme="light"] .srow,
  :root[data-theme="light"] .sw-row { border-bottom-color: rgba(14,17,22,.08); }