/* ============================================================
       1. DESIGN TOKENS
    ============================================================ */
    :root {
      /* Surfaces */
      --bg-base:        #010B18;
      --bg-surface:     #021226;
      --bg-elevated:    #042940;
      --bg-inset:       #06182E;

      /* Borders & lines */
      --border-subtle:  #0E2A40;
      --border-default: #143A52;
      --border-strong:  #1E5060;

      /* Text */
      --text-primary:   #F2F7F8;
      --text-secondary: #A9C2CC;
      --text-tertiary:  #6E8B97;
      --text-on-accent: #021226;

      /* Accent */
      --accent:         #52D9D9;
      --accent-hover:   #6FE6E6;
      --accent-press:   #3FC4C4;
      --accent-muted:   rgba(82,217,217,0.12);
      --accent-border:  rgba(82,217,217,0.32);

      /* Secondary accent */
      --mint:           #A2F2D5;
      --teal:           #0F5259;

      /* Semantic */
      --success:        #A2F2D5;
      --focus-ring:     #52D9D9;

      /* Radii */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --radius-pill: 999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
      --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
      --shadow-accent: 0 8px 32px rgba(82,217,217,0.18);

      /* Type */
      --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

      /* Motion */
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --dur-fast: 160ms;
      --dur-med: 280ms;
      --dur-slow: 480ms;

      /* Layout */
      --maxw: 1200px;
      --gutter: clamp(20px, 5vw, 80px);

      /* Spacing */
      --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
      --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
      --space-9:96px; --space-10:128px;

      /* Type scale */
      --fs-display: clamp(2.75rem, 6vw, 4.5rem);
      --fs-h2: clamp(2rem, 4vw, 3rem);
      --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
      --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem);
      --fs-body: 1.0625rem;
      --fs-sm: 0.875rem;
      --fs-label: 0.8125rem;

      --nav-h: 64px;
    }

    [data-theme="light"] {
      --bg-base:        #FFFFFF;
      --bg-surface:     #F6FAFB;
      --bg-elevated:    #FFFFFF;
      --bg-inset:       #EEF4F6;
      --border-subtle:  #E2EBEE;
      --border-default: #D2E0E4;
      --border-strong:  #B4CBD2;
      --text-primary:   #021226;
      --text-secondary: #2E4651;
      --text-tertiary:  #5C7682;
      --text-on-accent: #021226;
      --accent:         #0F8A8A;
      --accent-hover:   #0B7575;
      --accent-press:   #095F5F;
      --accent-muted:   rgba(15,138,138,0.10);
      --accent-border:  rgba(15,138,138,0.30);
      --mint:           #0F5259;
      --teal:           #0F5259;
      --success:        #0F8A8A;
      --shadow-sm: 0 1px 2px rgba(2,18,38,0.06);
      --shadow-md: 0 4px 16px rgba(2,18,38,0.08);
      --shadow-lg: 0 16px 48px rgba(2,18,38,0.12);
      --shadow-accent: 0 8px 28px rgba(15,138,138,0.18);
    }

    /* ============================================================
       2. RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--nav-h) + 16px);
      -webkit-text-size-adjust: 100%;
    }
    body {
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: 1.65;
      color: var(--text-secondary);
      background: var(--bg-base);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    img, svg { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
    input, select, textarea { font: inherit; }
    ul { list-style: none; padding: 0; }

    h1, h2, h3 {
      font-family: var(--font-display);
      color: var(--text-primary);
      font-weight: 600;
    }
    h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.02em; }
    h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.015em; }
    h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }

    ::selection { background: var(--accent-muted); color: var(--text-primary); }

    :focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* ============================================================
       3. LAYOUT PRIMITIVES
    ============================================================ */
    .container {
      width: 100%;
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }
    .section { padding-block: clamp(80px, 12vh, 128px); position: relative; }
    .bg-base { background: var(--bg-base); }
    .bg-surface { background: var(--bg-surface); }
    .cv-auto { content-visibility: auto; contain-intrinsic-size: auto 760px; }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-body);
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: var(--space-4);
    }
    .eyebrow::before {
      content: ""; width: 18px; height: 1px; background: var(--accent-border);
    }
    .lead {
      font-size: var(--fs-lead);
      line-height: 1.5;
      color: var(--text-secondary);
      max-width: 60ch;
    }
    .section-head { max-width: 760px; margin-bottom: var(--space-8); }
    .section-head .lead { margin-top: var(--space-4); }
    p { max-width: 65ch; }

    /* ============================================================
       4. BUTTONS & LINKS
    ============================================================ */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 44px; padding: 14px 28px;
      font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body);
      border-radius: var(--radius-pill);
      transition: background var(--dur-fast) var(--ease-out),
                  transform var(--dur-fast) var(--ease-out),
                  border-color var(--dur-fast) var(--ease-out),
                  box-shadow var(--dur-fast) var(--ease-out);
      white-space: nowrap;
    }
    .btn-primary { background: var(--accent); color: var(--text-on-accent); }
    .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-accent); }
    .btn-primary:active { background: var(--accent-press); transform: translateY(0); }
    .btn-secondary { background: transparent; border: 1px solid var(--border-strong); color: var(--text-primary); }
    .btn-secondary:hover { border-color: var(--accent-border); background: var(--accent-muted); }
    .btn-block { width: 100%; }

    .link-arrow {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--accent); font-weight: 600;
      min-height: 44px;
    }
    .link-arrow svg { transition: transform var(--dur-fast) var(--ease-out); }
    .link-arrow:hover svg { transform: translateX(4px); }

    .icon { width: 1.25em; height: 1.25em; flex: none; }

    /* ============================================================
       5. NAV
    ============================================================ */
    .skip-link {
      position: absolute; left: 16px; top: -60px; z-index: 200;
      background: var(--accent); color: var(--text-on-accent);
      padding: 10px 18px; border-radius: var(--radius-md); font-weight: 600;
      transition: top var(--dur-fast) var(--ease-out);
    }
    .skip-link:focus { top: 12px; }

    .site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      height: var(--nav-h);
      background: rgba(2,18,38,0.72);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-subtle);
      transition: box-shadow var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
    }
    [data-theme="light"] .site-nav { background: rgba(246,250,251,0.78); }
    .site-nav.scrolled { box-shadow: var(--shadow-md); }
    .nav-inner {
      height: 100%; display: flex; align-items: center; gap: var(--space-5);
      max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
    }
    .brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
    .brand .mark { width: 32px; height: 32px; border-radius: 7px; object-fit: contain; }
    .footer-brand .brand .mark { width: 40px; height: 40px; border-radius: 9px; }
    /* Wordmark matches the logo lockup: bold, tracked, all-caps "MACH STUDIOS"
       with a lowercase aqua ".ai" (text stays mixed-case for screen readers). */
    .brand-word {
      font-family: 'Oxanium', var(--font-display); font-weight: 600; font-size: 1.02rem;
      letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-primary);
    }
    .brand-word .tld { color: var(--accent); text-transform: lowercase; letter-spacing: 0.01em; }

    .nav-links { display: none; align-items: center; gap: 4px; margin-inline: auto; }
    .nav-links a {
      position: relative; padding: 8px 14px; font-size: 0.95rem; color: var(--text-secondary);
      border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-out);
      white-space: nowrap;
    }
    .nav-links a::after {
      content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px;
      background: var(--accent); transform: scaleX(0); transform-origin: left;
      transition: transform var(--dur-med) var(--ease-out);
    }
    .nav-links a:hover { color: var(--text-primary); }
    .nav-links a:hover::after { transform: scaleX(1); }

    .nav-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
    .icon-btn {
      width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-md); color: var(--text-secondary);
      transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .icon-btn:hover { background: var(--accent-muted); color: var(--text-primary); }
    .icon-btn .icon { width: 20px; height: 20px; }
    .theme-toggle .moon { display: none; }
    [data-theme="light"] .theme-toggle .sun { display: none; }
    [data-theme="light"] .theme-toggle .moon { display: block; }

    .nav-cta { display: none; }
    /* Nav CTA, toned down to match the homepage: nav-link scale, muted aqua fill
       + hairline border, no lift on hover. Page CTAs elsewhere keep the bold fill. */
    .nav-cta.btn-primary {
      min-height: 34px;
      padding: 6px 15px;
      font-size: 0.95rem;
      font-weight: 600;
      background: var(--accent-muted);
      color: var(--accent);
      border: 1px solid var(--accent-border);
      box-shadow: none;
    }
    .nav-cta.btn-primary:hover {
      background: var(--accent-muted);
      border-color: var(--accent);
      color: var(--accent-hover);
      transform: none;
      box-shadow: none;
    }
    .nav-cta.btn-primary:active {
      background: var(--accent-muted);
      transform: none;
    }
    .hamburger { display: inline-flex; width: 44px; height: 44px; }

    /* Mobile overlay menu */
    .mobile-menu {
      position: fixed; inset: 0; z-index: 150;
      background: var(--bg-surface);
      display: flex; flex-direction: column;
      padding: var(--space-5) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom));
      transform: translateX(100%);
      transition: transform var(--dur-med) var(--ease-out);
      visibility: hidden;
    }
    .mobile-menu.open { transform: translateX(0); visibility: visible; }
    .mobile-menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
    .mobile-links { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-7); flex: 1; overflow-y: auto; min-height: 0; }
    .mobile-links a {
      font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600;
      color: var(--text-primary); padding: var(--space-4) 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .mobile-menu .btn { margin-top: var(--space-6); }
    .mobile-links a.mobile-sublink {
      font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500;
      color: var(--text-secondary); padding: var(--space-3) 0 var(--space-3) var(--space-5);
    }
    .mobile-links a.mobile-sublink::before { content: "↳"; color: var(--accent); margin-right: 10px; opacity: 0.7; }

    /* "Who We Help" nav dropdown (desktop) */
    .nav-dropdown { position: relative; display: inline-flex; align-items: center; }
    .nav-dropdown-toggle {
      position: relative;
      display: inline-flex; align-items: center; gap: 5px;
      font-family: var(--font-body); font-size: 0.95rem; line-height: 1; color: var(--text-secondary);
      background: none; border: 0; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-sm);
      transition: color var(--dur-fast) var(--ease-out); white-space: nowrap;
    }
    /* Same hover/active underline accent as the plain nav links, so the dropdown
       items (Who We Help, Resources) highlight consistently. */
    .nav-dropdown-toggle::after {
      content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px;
      background: var(--accent); transform: scaleX(0); transform-origin: left;
      transition: transform var(--dur-med) var(--ease-out);
    }
    .nav-dropdown-toggle:hover,
    .nav-dropdown:focus-within .nav-dropdown-toggle,
    .nav-dropdown.open .nav-dropdown-toggle { color: var(--text-primary); }
    .nav-dropdown-toggle:hover::after,
    .nav-dropdown:focus-within .nav-dropdown-toggle::after,
    .nav-dropdown.open .nav-dropdown-toggle::after,
    .nav-dropdown-toggle.is-active::after { transform: scaleX(1); }
    .nav-dropdown-toggle.is-active { color: var(--text-primary); }
    /* The dropdown caret is an SVG flex child; without flex:none flexbox collapses
       it to 0 width and the marker disappears. Pin its size so it always shows. */
    .nav-dropdown-toggle .caret { flex: none; width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-out); }
    .nav-dropdown:hover .caret,
    .nav-dropdown:focus-within .caret,
    .nav-dropdown.open .caret { transform: rotate(180deg); }
    .nav-dropdown-menu {
      position: absolute; top: calc(100% + 12px); left: 50%;
      transform: translateX(-50%) translateY(-6px);
      min-width: 320px; padding: 8px;
      background: var(--bg-elevated); border: 1px solid var(--border-default);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
      opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
      transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
    }
    .nav-dropdown-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu,
    .nav-dropdown.open .nav-dropdown-menu {
      opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
    }
    .nav-dropdown-item { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-out); }
    .nav-dropdown-item:hover { background: var(--accent-muted); }
    .nav-dropdown-item .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--di, var(--accent)); box-shadow: 0 0 11px -1px var(--di, var(--accent)); }
    .nav-dropdown-item .di-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
    .nav-dropdown-item .di-sub { display: block; font-size: var(--fs-label); color: var(--text-tertiary); margin-top: 1px; }
    /* compact 2-col grid listing all industries */
    .nav-dropdown-menu.is-wide { min-width: 392px; }
    .nav-dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
    .nav-dropdown-link { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--text-secondary); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
    .nav-dropdown-link:hover { background: var(--accent-muted); color: var(--text-primary); }
    .nav-dropdown-link[aria-current] { color: var(--text-primary); font-weight: 600; }
    .nav-dropdown-link .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--di, var(--accent)); box-shadow: 0 0 9px -1px var(--di, var(--accent)); }
    .nav-dropdown-all {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      margin-top: 4px; padding: 11px 12px; border-radius: var(--radius-md);
      border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
      transition: background var(--dur-fast) var(--ease-out);
    }
    .nav-dropdown-all:hover { background: var(--accent-muted); }

    /* ============================================================
       TESTIMONIAL card (shared; mirrors the homepage inline styles).
       Used on industry pages as a solo featured quote.
    ============================================================ */
    .testimonial-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
    @media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
    .testimonial-solo { max-width: 720px; margin-inline: auto; }
    .testimonial-card {
      position: relative; display: flex; flex-direction: column; gap: var(--space-4);
      background: var(--bg-elevated); border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg); padding: var(--space-6);
      box-shadow: 0 10px 28px rgba(1, 11, 24, 0.22);
    }
    .testimonial-card::before {
      content: "\201C"; position: absolute; top: 4px; right: 18px;
      font-family: var(--font-display); font-size: 4rem; line-height: 1;
      color: var(--accent); opacity: 0.16; pointer-events: none;
    }
    .t-stars { display: inline-flex; gap: 2px; color: #F6B73C; font-size: 1.05rem; letter-spacing: 2px; line-height: 1; }
    .t-body { color: var(--text-secondary); font-size: var(--fs-body, 1rem); line-height: 1.65; margin: 0; }
    .t-author { margin-top: auto; }
    .t-name { display: block; font-weight: 700; color: var(--text-primary); }
    .t-meta { display: block; font-size: var(--fs-sm); color: var(--text-tertiary); margin-top: 2px; }

    /* ============================================================
       6. HERO
    ============================================================ */
    .hero {
      position: relative;
      padding-top: clamp(140px, 20vh, 200px);
      padding-bottom: clamp(80px, 12vh, 128px);
      text-align: center;
      background:
        radial-gradient(circle at 1px 1px, rgba(82,217,217,0.05) 1px, transparent 0) 0 0 / 34px 34px,
        var(--bg-base);
      overflow: hidden;
    }
    [data-theme="light"] .hero {
      background:
        radial-gradient(circle at 1px 1px, rgba(15,138,138,0.06) 1px, transparent 0) 0 0 / 34px 34px,
        var(--bg-base);
    }
    .hero::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0.6;
    }
    .hero::after {
      content: ""; position: absolute; left: 50%; top: -10%; width: 720px; height: 420px;
      transform: translateX(-50%);
      background: radial-gradient(ellipse at center, var(--accent-muted), transparent 70%);
      opacity: 0.7; pointer-events: none;
    }
    .hero-inner { position: relative; max-width: 820px; margin-inline: auto; }
    .hero h1 { margin-block: var(--space-5) var(--space-5); }
    .hero .lead { margin-inline: auto; }
    .hero-actions {
      display: flex; align-items: center; justify-content: center; gap: var(--space-4);
      flex-wrap: wrap; margin-top: var(--space-7);
    }
    .hero-trust {
      margin-top: var(--space-6); font-size: var(--fs-sm); color: var(--text-tertiary);
      max-width: 60ch; margin-inline: auto;
    }

    /* ============================================================
       7. SOCIAL PROOF / INDUSTRY BAR
    ============================================================ */
    .proof { text-align: center; }
    .proof-label {
      font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--text-tertiary); margin-bottom: var(--space-6);
    }
    .industry-row {
      display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
      max-width: 980px; margin-inline: auto;
    }
    .pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
      color: var(--text-tertiary); font-size: var(--fs-sm); font-weight: 500;
      transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .pill:hover { border-color: var(--border-default); color: var(--text-secondary); }
    .pill .icon { width: 16px; height: 16px; opacity: 0.8; }

    .stat-strip {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
      margin-top: var(--space-8); max-width: 980px; margin-inline: auto;
    }
    .stat-strip li {
      border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
      padding: var(--space-5); text-align: center; background: var(--bg-base);
    }
    [data-theme="light"] .stat-strip li { background: var(--bg-elevated); }
    .stat-strip b { display: block; font-family: var(--font-display); color: var(--text-primary); font-size: 1.05rem; font-weight: 600; }
    .stat-strip span { font-size: var(--fs-sm); color: var(--text-tertiary); }

    /* ============================================================
       8. PROBLEM
    ============================================================ */
    .split { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
    .friction-list { display: grid; gap: var(--space-4); }
    .friction {
      display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: start;
      padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
      background: var(--bg-surface);
    }
    [data-theme="light"] .friction { background: var(--bg-elevated); }
    .friction .ico-box {
      width: 44px; height: 44px; border-radius: var(--radius-md);
      background: var(--accent-muted); color: var(--accent);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .friction .ico-box .icon { width: 22px; height: 22px; }
    .friction b { color: var(--text-primary); font-weight: 600; display: block; }
    .friction span { font-size: var(--fs-sm); color: var(--text-tertiary); }
    .friction .arrow { color: var(--accent); }

    /* ============================================================
       9. SERVICES
    ============================================================ */
    .card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
    .card {
      background: var(--bg-elevated); border: 1px solid var(--border-default);
      border-radius: var(--radius-lg); padding: var(--space-6);
      display: flex; flex-direction: column; gap: var(--space-4);
      transition: transform var(--dur-med) var(--ease-out),
                  border-color var(--dur-med) var(--ease-out),
                  box-shadow var(--dur-med) var(--ease-out);
    }
    .card:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: var(--shadow-md); }
    .card-ico {
      width: 48px; height: 48px; border-radius: var(--radius-md);
      background: var(--accent-muted); color: var(--accent);
      display: inline-flex; align-items: center; justify-content: center; flex: none;
    }
    .card-ico .icon { width: 24px; height: 24px; }
    .card h3 { color: var(--text-primary); }
    .card p { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }
    .card .link-arrow { margin-top: auto; font-size: var(--fs-sm); }

    /* ============================================================
       10. HOW IT WORKS
    ============================================================ */
    .steps { display: grid; grid-template-columns: 1fr; gap: var(--space-6); position: relative; }
    .step { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); align-items: start; position: relative; }
    .step-badge {
      width: 56px; height: 56px; border-radius: 50%;
      border: 2px solid var(--accent-border); background: var(--bg-base);
      color: var(--accent); display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; z-index: 2;
    }
    [data-theme="light"] .step-badge { background: var(--bg-elevated); }
    .step h3 { color: var(--text-primary); margin-bottom: 6px; }
    .step p { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }
    .step .tag {
      display: inline-block; margin-left: 8px; font-size: 0.7rem; font-weight: 600;
      letter-spacing: 0.04em; text-transform: uppercase; color: var(--mint);
      background: var(--accent-muted); padding: 2px 8px; border-radius: var(--radius-pill);
      vertical-align: middle;
    }
    /* vertical connector (mobile/base) */
    .steps::before {
      content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px;
      background: var(--border-default); z-index: 1;
    }
    .how-cta { margin-top: var(--space-8); }

    /* ============================================================
       11. RESULTS
    ============================================================ */
    .case-narrative p + p { margin-top: var(--space-4); }
    .results-panel {
      background: var(--bg-elevated); border: 1px solid var(--border-default);
      border-radius: var(--radius-xl); padding: var(--space-7);
    }
    .result-stats { display: grid; gap: var(--space-5); }
    .result-stat { border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-5); }
    .result-stat:last-child { border-bottom: none; padding-bottom: 0; }
    .result-stat .num {
      font-family: var(--font-display); font-weight: 700; color: var(--accent);
      font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.02em;
    }
    .result-stat .lbl { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 6px; }
    .guarantee {
      margin-top: var(--space-5); display: flex; gap: var(--space-4); align-items: flex-start;
      padding: var(--space-5); border: 1px solid var(--accent-border); border-radius: var(--radius-lg);
      background: var(--accent-muted);
    }
    .guarantee .icon { width: 24px; height: 24px; color: var(--accent); flex: none; }
    .guarantee p { color: var(--text-primary); font-weight: 500; margin: 0; font-size: var(--fs-body); }

    /* ============================================================
       12. PRICING
    ============================================================ */
    .price-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: stretch; }
    .price-card {
      position: relative; background: var(--bg-elevated); border: 1px solid var(--border-default);
      border-radius: var(--radius-lg); padding: var(--space-6);
      display: flex; flex-direction: column; gap: var(--space-4);
    }
    .price-card.featured { border-color: var(--accent); box-shadow: var(--shadow-accent); }
    .ribbon {
      position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
      background: var(--accent); color: var(--text-on-accent);
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
      padding: 5px 14px; border-radius: var(--radius-pill); white-space: nowrap;
    }
    .price-card h3 { color: var(--text-primary); }
    .price-who { font-size: var(--fs-sm); color: var(--text-tertiary); min-height: 2.6em; margin: 0; }
    .price-start {
      font-family: var(--font-display); font-weight: 600; color: var(--text-primary);
      font-size: 1.05rem; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle);
    }
    .price-start small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
    .price-feats { display: grid; gap: var(--space-3); }
    .price-feats li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: var(--fs-sm); color: var(--text-secondary); }
    .price-feats .icon { width: 18px; height: 18px; color: var(--mint); margin-top: 3px; }
    .price-card .btn { margin-top: auto; }
    .price-note { text-align: center; color: var(--text-tertiary); font-size: var(--fs-sm); margin: var(--space-7) auto 0; }

    /* ============================================================
       13. CONTACT
    ============================================================ */
    .contact-panel {
      max-width: 720px; margin-inline: auto;
      background: var(--accent-muted); border: 1px solid var(--accent-border);
      border-radius: var(--radius-xl); padding: clamp(28px, 5vw, 56px);
      text-align: center;
    }
    .contact-panel .lead { margin-inline: auto; margin-top: var(--space-4); }
    .form { margin-top: var(--space-7); text-align: left; }
    .service-chip {
      display: none; align-items: center; gap: 8px; margin-bottom: var(--space-4);
      background: var(--bg-elevated); border: 1px solid var(--accent-border);
      color: var(--text-primary); font-size: var(--fs-sm); font-weight: 500;
      padding: 8px 8px 8px 14px; border-radius: var(--radius-pill); width: fit-content;
    }
    .service-chip.show { display: inline-flex; }
    .service-chip button { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); border-radius: 50%; }
    .service-chip button:hover { color: var(--text-primary); background: var(--accent-muted); }
    .service-chip .icon { width: 14px; height: 14px; }

    .field { margin-bottom: var(--space-5); }
    .field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
    .field .req { color: var(--accent); }
    .control {
      width: 100%; font-size: 16px; color: var(--text-primary);
      background: var(--bg-inset); border: 1px solid var(--border-default);
      border-bottom-width: 2px;
      border-radius: var(--radius-md); padding: 13px 15px; min-height: 48px;
      transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
      appearance: none;
    }
    [data-theme="light"] .control { background: var(--bg-inset); }
    select.control {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236E8B97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 14px center; padding-right: 44px;
    }
    .control::placeholder { color: var(--text-tertiary); }
    .control:focus { outline: none; border-color: var(--accent); border-bottom-color: var(--accent); background: var(--bg-base); }
    [data-theme="light"] .control:focus { background: var(--bg-elevated); }
    .field.invalid .control { border-color: #FF8C8C; border-bottom-color: #FF8C8C; }
    .field-error { display: none; color: #FF9D9D; font-size: var(--fs-sm); margin-top: 6px; }
    .field.invalid .field-error { display: block; }
    [data-theme="light"] .field.invalid .control { border-color: #C2403F; }
    [data-theme="light"] .field-error { color: #C2403F; }

    .form .btn { margin-top: var(--space-2); }
    .value-ticks {
      display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center;
      margin-top: var(--space-6);
    }
    .value-ticks li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-secondary); }
    .value-ticks .icon { width: 18px; height: 18px; color: var(--mint); }

    .form-status { margin-top: var(--space-4); }
    .form-success {
      display: none; gap: var(--space-4); align-items: center; text-align: left;
      padding: var(--space-5); border: 1px solid var(--accent-border); border-radius: var(--radius-lg);
      background: var(--bg-elevated);
    }
    .form-success.show { display: flex; }
    .form-success .icon { width: 28px; height: 28px; color: var(--mint); flex: none; }
    .form-success b { color: var(--text-primary); display: block; }
    .form-success span { font-size: var(--fs-sm); color: var(--text-secondary); }

    /* ============================================================
       14. FAQ
    ============================================================ */
    .faq-wrap { max-width: 760px; margin-inline: auto; }
    .faq-item {
      border-bottom: 1px solid var(--border-subtle);
    }
    .faq-item summary {
      list-style: none; cursor: pointer;
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
      padding: var(--space-5) 0; font-family: var(--font-display); font-weight: 600;
      font-size: 1.0625rem; color: var(--text-primary);
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-chev {
      width: 22px; height: 22px; flex: none; color: var(--accent);
      transition: transform var(--dur-med) var(--ease-out);
    }
    .faq-item[open] .faq-chev { transform: rotate(180deg); }
    .faq-answer { overflow: hidden; }
    .faq-answer p { color: var(--text-secondary); font-size: var(--fs-body); padding-bottom: var(--space-5); margin: 0; max-width: none; }

    /* ============================================================
       15. FOOTER
    ============================================================ */
    .site-footer { border-top: 1px solid var(--border-subtle); padding-block: var(--space-8) var(--space-6); }
    .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
    .footer-col h3 {
      font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary);
      margin-bottom: var(--space-4);
    }
    .footer-brand .brand { margin-bottom: var(--space-4); }
    .footer-brand p { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
    .nap { font-size: var(--fs-sm); color: var(--text-tertiary); font-style: normal; line-height: 1.7; }
    .footer-nav { display: grid; gap: var(--space-3); }
    .footer-nav a { font-size: var(--fs-sm); color: var(--text-secondary); width: fit-content; }
    .footer-nav a:hover { color: var(--accent); }
    .footer-contact a { color: var(--text-secondary); font-size: var(--fs-sm); }
    .footer-contact a:hover { color: var(--accent); }
    /* The footer CTA is an <a>, so the footer-link color above would tint its
       text light. Keep it dark like the nav CTA (matches .btn-primary). */
    .site-footer a.btn-primary,
    .site-footer a.btn-primary:hover { color: var(--text-on-accent); font-size: var(--fs-body); }
    .socials { display: flex; gap: var(--space-3); margin-block: var(--space-4); }
    .socials a {
      width: 40px; height: 40px; border-radius: var(--radius-md);
      border: 1px solid var(--border-default); color: var(--text-secondary);
      display: inline-flex; align-items: center; justify-content: center;
      transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .socials a:hover { border-color: var(--accent-border); color: var(--accent); }
    .socials .icon { width: 20px; height: 20px; }
    .footer-bottom {
      display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center;
      margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
      font-size: var(--fs-sm); color: var(--text-tertiary);
    }
    .footer-bottom nav { display: flex; gap: var(--space-5); }
    .footer-bottom a:hover { color: var(--accent); }

    /* ============================================================
       16. REVEAL ANIMATION
       Hidden start-state is gated behind html.js so the site renders
       fully visible with JavaScript disabled (v2 §8 no-JS fallback).
    ============================================================ */
    html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
    html.js .reveal.is-visible { opacity: 1; transform: none; }
    /* When the v2 motion layer is active it owns the reveals (no CSS transition fighting GSAP). */
    html.motion-on .reveal { transition: none; }

    /* ============================================================
       17. RESPONSIVE
    ============================================================ */
    @media (min-width: 768px) {
      .card-grid { grid-template-columns: repeat(2, 1fr); }
      .price-grid { grid-template-columns: repeat(2, 1fr); }
      .split { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
      .results-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
      .value-ticks { gap: var(--space-6); }
      .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    }

    @media (min-width: 1024px) {
      .nav-links { display: flex; }
      .nav-cta { display: inline-flex; }
      .hamburger { display: none; }
      .card-grid { grid-template-columns: repeat(3, 1fr); }
      .price-grid { grid-template-columns: repeat(4, 1fr); }
      .stat-strip { gap: var(--space-6); }

      /* Horizontal stepper */
      .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
      .step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-4); }
      .steps::before { left: 12.5%; right: 12.5%; top: 28px; bottom: auto; width: auto; height: 2px; }
    }

    @media (max-width: 479px) {
      .hero { padding-top: clamp(120px, 18vh, 160px); }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .hero-actions .btn { width: 100%; }
      .hero-actions .link-arrow { justify-content: center; }
    }

    /* Pricing: most-popular first on mobile */
    @media (max-width: 1023px) {
      .price-card.featured { order: -1; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .reveal { opacity: 1 !important; transform: none !important; }
      .link-arrow:hover svg { transform: none; }
    }

    /* ============================================================
       18. V2 MOTION LAYER  (cinematic animation, enhancement only)
       Decorative; all hidden start-states gated behind html.motion-on
       so nothing disappears without JS or under reduced-motion.
    ============================================================ */
    /* Lenis smooth-scroll (recommended baseline) */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }
    .lenis.lenis-smooth iframe { pointer-events: none; }
    /* --- v2 integration rules --- */
    /* Hero copy paints immediately (LCP-safe); the hero-shock plays behind it. */
    html.js .hero .reveal { opacity: 1; transform: none; }
    /* ScrollTrigger needs stable measurements: drop content-visibility under motion. */
    html.motion-on .cv-auto { content-visibility: visible; contain-intrinsic-size: auto; }


/* ===================== MODULE: FOUNDATION ===================== */
/* ============================================================
   MODULE: FOUNDATION  (prefix: m-fx)
   Scroll-progress bar + chapter-dot index + scroll-spy styles.
   All hidden pre-animation states are gated behind html.motion-on
   so the page stays fully visible/usable with no JS or reduced motion.
   ============================================================ */

/* ---- 1. Scroll-progress bar (fixed just under the nav) ---- */
.m-fx-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 99; /* just under nav (z-100); above page content */
  pointer-events: none;
  background: transparent;
}
.m-fx-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--mint));
  box-shadow: 0 0 8px var(--accent-border);
  /* Smooths the value on the native-scroll fallback path; ScrollTrigger
     drives scaleX every frame so the short transition is imperceptible there. */
  transition: transform 80ms linear;
  will-change: transform;
}
/* Under reduced motion: keep the bar but drop the glow/transition flourish. */
@media (prefers-reduced-motion: reduce) {
  .m-fx-progress__bar { transition: none; box-shadow: none; }
}

/* ---- 4. Right-edge chapter-dot index (desktop ≥1024, non-touch) ---- */
.m-fx-dots {
  position: fixed;
  right: clamp(12px, 1.4vw, 22px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90; /* below nav, above decorative canvas layers */
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
  /* Kept visually light: faint by default, only the active/hovered dot asserts. */
  opacity: 0.72;
}
/* Hidden entirely on touch and below 1024px, JS also guards this,
   but CSS provides a no-JS / resize-safe backstop. */
@media (max-width: 1023px), (pointer: coarse) {
  .m-fx-dots { display: none !important; }
}

.m-fx-dot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  text-decoration: none;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 4px 2px;
  border-radius: var(--radius-pill);
  outline-offset: 3px;
}
.m-fx-dot__label {
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(6px);
  color: var(--text-secondary);
  transition:
    max-width var(--dur-med) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.m-fx-dot__mark {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition:
    transform var(--dur-med) var(--ease-out),
    background-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

/* Hover / keyboard-focus: reveal the label, brighten the mark. */
.m-fx-dot:hover .m-fx-dot__mark,
.m-fx-dot:focus-visible .m-fx-dot__mark {
  background: var(--text-secondary);
  transform: scale(1.15);
}
.m-fx-dot:hover .m-fx-dot__label,
.m-fx-dot:focus-visible .m-fx-dot__label {
  max-width: 180px;
  opacity: 1;
  transform: translateX(0);
}

/* Active section: accent dot grows into a short pill, label persists. */
.m-fx-dot.is-active .m-fx-dot__mark {
  background: var(--accent);
  width: 18px;
  box-shadow: 0 0 10px var(--accent-border);
}
.m-fx-dot.is-active .m-fx-dot__label {
  max-width: 180px;
  opacity: 1;
  transform: translateX(0);
  color: var(--text-primary);
}

/* ---- 3. Scroll-spy active state on the primary nav links ----
   Reinforces the v1 underline (a::after scaleX) without changing layout. */
.nav-links a.is-active { color: var(--text-primary); }
.nav-links a.is-active::after { transform: scaleX(1); }

/* Motion-on entrance for the chapter index (gated; visible by default
   so a CDN failure or reduced motion never hides these real links). */
html.motion-on .m-fx-dots {
  opacity: 0;
  transform: translateY(-50%) translateX(8px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
html.motion-on .m-fx-dots.m-fx-dots--in {
  opacity: 0.72;
  transform: translateY(-50%) translateX(0);
}

/* ===================== MODULE: REVEALS ===================== */
/* ============================================================
   MODULE: CINEMATIC SECTION REVEALS  (prefix: m-rv)
   All hidden pre-animation states are gated under html.motion-on
   so that with NO JS / reduced-motion everything stays visible.
============================================================ */

/* Fixed full-screen crossfade background layer. Sits behind ALL
   content. Its background-color is animated (scrubbed) between
   --bg-base and --bg-surface across section boundaries so the
   bands dissolve into one another. Decorative + non-interactive. */
.m-rv-bg {
  position: fixed;
  inset: 0;
  z-index: -1;                 /* behind every content layer */
  pointer-events: none;
  background-color: var(--bg-base);
  /* default colour matches the first band; only painted when JS runs */
}
/* Only reveal/use the crossfade layer once motion is on. Without
   motion-on the real sections keep their own bg-base/bg-surface
   classes, so this layer is irrelevant and stays transparent. */
html:not(.motion-on) .m-rv-bg { display: none; }

/* When motion is on, the JS drives section background transparency
   so the fixed layer shows through and crossfades. We keep the
   section's own colour as a fallback paint underneath. */
html.motion-on .m-rv-xfade {
  background-color: transparent;
}

/* ---- EYEBROW DECODE ----
   We wrap the eyebrow's text in .m-rv-eyebrow-text (JS) so the
   .eyebrow::before accent rule stays intact. The wrapper starts
   slightly clipped/transparent only under motion-on. */
html.motion-on .m-rv-eyebrow-text {
  opacity: 0;
  /* font-variant-numeric keeps scramble glyph width stable-ish */
  font-variant-numeric: tabular-nums;
}
.m-rv-eyebrow-text { will-change: opacity; }

/* ---- HEADING CLIP WIPE ----
   Headings keep ALL their text in one element (screen-reader safe).
   We animate clip-path inset top->bottom. Initial hidden state is
   gated under motion-on so no-JS shows the full heading. */
html.motion-on .m-rv-heading {
  clip-path: inset(0 0 100% 0);   /* fully clipped from the bottom up */
  -webkit-clip-path: inset(0 0 100% 0);
  opacity: 0;
  will-change: clip-path, opacity;
}

/* ---- GENERIC CONTENT REVEAL ----
   Body copy, leads, list items, cards: start shifted down + faded.
   Gated under motion-on; GSAP animates them to y:0/opacity:1. */
html.motion-on .m-rv-item {
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}

/* ---- PARALLAX LAYER ----
   Marks a decorative element as a parallax target. Pure transform,
   compositor-friendly. JS only attaches scrub triggers on desktop. */
html.motion-on .m-rv-parallax { will-change: transform; }

/* Safety: if for any reason JS errors after adding motion-on, a
   no-JS-style fallback is impossible, but reduced-motion users are
   covered because the integrator omits motion-on for them. */
@media (prefers-reduced-motion: reduce) {
  html.motion-on .m-rv-eyebrow-text,
  html.motion-on .m-rv-heading,
  html.motion-on .m-rv-item {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  .m-rv-bg { display: none !important; }
  html.motion-on .m-rv-xfade { background-color: revert !important; }
}

/* ===================== MODULE: SPINE ===================== */
/* ============================================================
   PIPELINE SPINE  (prefix: m-spine)
   Decorative "thread of automation". Fixed, behind all content,
   never focusable, never a source of horizontal scroll.
============================================================ */

/* Host: fixed full-viewport-height layer pinned to the left gutter.
   pointer-events:none so it never intercepts clicks/hover.
   z-index sits below content (nav is 100, mobile menu 150). */
.m-spine {
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;                 /* the line itself is 1-2px; host is hairline-wide */
  height: 100vh;
  height: 100dvh;             /* progressive enhancement for mobile UI chrome */
  z-index: 0;
  pointer-events: none;
  /* Desktop: align to the left gutter, just inside the page edge.
     clamp keeps it off the very edge on wide screens, snug on narrow. */
  transform: translateX(clamp(14px, 2.6vw, 40px));
  /* Faint by default so it reads as instrumentation, not chrome. */
  opacity: 0.85;
  contain: strict;            /* isolate paint; cheap compositing */
  overflow: visible;          /* allow node rings/glows to bleed slightly */
}

/* The generated SVG fills the host. overflow:visible lets node halos show. */
.m-spine svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Base (un-drawn) line: extremely faint aqua rail the bright line draws over. */
.m-spine__rail {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.10;
  vector-effect: non-scaling-stroke;
}

/* The progress line that "draws" with scroll. Kept under ~30% opacity. */
.m-spine__line {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.28;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* dash setup is applied inline by JS (dasharray = length, dashoffset = length) */
}

/* Node dots at section boundaries. Default = dim, hollow-ish ring. */
.m-spine__node {
  fill: var(--bg-base);
  stroke: var(--accent);
  stroke-width: 1.25;
  opacity: 0.35;
  vector-effect: non-scaling-stroke;
  transition: opacity var(--dur-med) var(--ease-out);
}

/* Soft halo behind a node, invisible until its section is active. */
.m-spine__halo {
  fill: var(--accent);
  opacity: 0;
}

/* Active node: filled aqua core + brighter ring. Driven by .is-active class
   toggled from JS so it works even if GSAP tweens are skipped. */
.m-spine__node-group.is-active .m-spine__node {
  fill: var(--accent);
  opacity: 1;
}
.m-spine__node-group.is-active .m-spine__halo {
  opacity: 0.18;
}

/* Travelling data packet, a tiny bright dot riding the line. */
.m-spine__packet {
  fill: var(--accent);
  opacity: 0;                 /* JS fades it in/out per trip */
}

/* ---- Pre-draw hidden state: ONLY when motion is on. Without motion-on the
   line is simply present & static (handled by reduced-motion block below). */
html.motion-on .m-spine__line {
  /* JS sets dashoffset = full length so it starts undrawn; this just makes the
     intent explicit and avoids a flash before JS runs. */
  opacity: 0.28;
}
html.motion-on .m-spine__packet {
  will-change: transform, opacity;
}

/* ============================================================
   MOBILE / NARROW: faint centered hairline, no packets.
   The host is repositioned to centre and dimmed further.
   (JS also avoids spawning packets at this breakpoint.)
============================================================ */
@media (max-width: 1023px) {
  .m-spine {
    /* Centre the hairline; translate by half viewport minus 1px (host width). */
    left: 50%;
    transform: translateX(-1px);
    opacity: 0.5;
  }
  .m-spine__line { opacity: 0.18; }
  .m-spine__rail { opacity: 0.06; }
  .m-spine__node { opacity: 0.22; }
  .m-spine__packet { display: none; }
}

/* Very small screens: hide entirely to keep the canvas clean. */
@media (max-width: 600px) {
  .m-spine { display: none; }
}

/* ============================================================
   REDUCED MOTION: static, fully-drawn, low-opacity line.
   No packets, no tweens. The JS init also early-returns, but we
   guarantee a correct visual here in case JS is delayed/absent.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .m-spine__line {
    /* Force fully drawn regardless of any inline dashoffset JS may have set. */
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 0.22;
  }
  .m-spine__packet { display: none !important; }
  .m-spine__node { opacity: 0.3; }
}

/* ===================== MODULE: HERO ===================== */
/* ============================================================
   HERO "CHAOS -> CALM" SHOCK  (prefix: m-hero)
   Decorative canvas + overlays sit BEHIND .hero-inner.
   Any hidden/pre-animation state is gated under html.motion-on so the
   hero is fully visible with no JS and under reduced-motion.
============================================================ */

/* Lift the real hero content above the decorative canvas/overlays. */
.hero-inner { z-index: 2; }

/* Full-bleed canvas behind hero content. */
.m-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: none; /* only shown once JS opts in (motion-on) */
}
html.motion-on .m-hero-canvas { display: block; }

/* Dim layer that darkens the H1 area behind the chaos noise.
   Starts transparent; the timeline tweens its opacity. Never hides text. */
.m-hero-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse at 50% 42%,
    rgba(1, 11, 24, 0.0) 30%,
    rgba(1, 11, 24, 0.55) 100%
  );
  display: none;
}
html.motion-on .m-hero-dim { display: block; }

/* Mach mark that flickers to life at centre during Activation.
   DOM <img> overlay we fade/scale via GSAP. Hidden only under motion-on. */
.m-hero-mark {
  position: absolute;
  left: 50%;
  top: 42%;
  width: clamp(72px, 9vw, 116px);
  height: auto;
  z-index: 1;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(82, 217, 217, 0.45));
  display: none;
}
html.motion-on .m-hero-mark { display: block; }

/* Micro-copy overlays: small, uppercase, mono, aqua-dim, absolutely positioned. */
.m-hero-micro {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(82, 217, 217, 0.35);
  display: none;
}
html.motion-on .m-hero-micro { display: block; }
.m-hero-micro--in  { top: clamp(96px, 16vh, 150px); }
.m-hero-micro--out { bottom: clamp(96px, 14vh, 140px); }

/* Skip button: unobtrusive, bottom-right, real focusable control during intro. */
.m-hero-skip {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(20px, 4vh, 40px);
  z-index: 3;
  display: none; /* shown by JS during phases 1-3 */
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: var(--accent-muted);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
html.motion-on .m-hero-skip { display: inline-flex; }
.m-hero-skip:hover { color: var(--text-primary); border-color: var(--accent); }
.m-hero-skip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  opacity: 1;
}
.m-hero-skip[hidden] { display: none !important; }

/* Telemetry readout near hero bottom: monospace status line with blinking caret. */
.m-hero-telemetry {
  margin-top: var(--space-6);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  max-width: none;
}
.m-hero-telemetry .m-hero-tele-val { color: var(--accent); }
.m-hero-caret {
  display: inline-block;
  width: 8px;
  height: 1em;
  margin-left: 6px;
  vertical-align: -0.12em;
  background: var(--accent);
  opacity: 0.9;
}
html.motion-on .m-hero-caret { animation: m-hero-blink 1.1s steps(1, end) infinite; }
@keyframes m-hero-blink {
  0%, 50%   { opacity: 0.9; }
  51%, 100% { opacity: 0; }
}

/* Safety: under reduced-motion nothing decorative should paint or move. */
@media (prefers-reduced-motion: reduce) {
  .m-hero-canvas,
  .m-hero-dim,
  .m-hero-mark,
  .m-hero-micro,
  .m-hero-skip { display: none !important; }
  .m-hero-caret { animation: none !important; }
}

/* ===================== MODULE: ASSEMBLY ===================== */
/* ============================================================
   SERVICE GRID, "SYSTEM ASSEMBLY"  (module prefix: m-svc)
   All hidden/pre-animation states gated behind html.motion-on.
   Without motion-on (no-JS / reduced-motion) everything is in
   its final, visible, interactive state.
   ============================================================ */

/* The grid is the positioning context for the connector overlay. */
.card-grid { position: relative; }

/* --- Connector overlay (decorative, inert) ----------------- */
/* Spans the whole grid, sits BEHIND the cards (cards have their
   own bg + border so the lines read as snapping between them).
   Never receives pointer or focus. */
.m-svc-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;            /* behind cards; cards are static-flow > 0 paint order */
  overflow: visible;
  opacity: 0;            /* revealed by JS during the snap, then faded out */
}
/* Cards must paint above the overlay. They are position:static in v1;
   give them a stacking context only when motion is on so the overlay
   (z-index:0) stays beneath without altering the v1 visual. */
html.motion-on .card-grid > .card { position: relative; z-index: 1; }

.m-svc-connectors line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  /* dash values are set per-line by JS to the segment length so the
     draw-in is exact; opacity animated by JS. */
  opacity: 0;
}

/* Soft node dots at the connection points add the "interlock" read. */
.m-svc-connectors circle {
  fill: var(--accent);
  opacity: 0;
}

/* --- Pre-assembly hidden state for cards (gated) ----------- */
/* Only hidden when motion is on AND the grid is flagged not-yet-played.
   Once JS clears the flag (after assembly) GSAP owns inline styles. */
html.motion-on .card-grid[data-m-svc-pending] > .card {
  opacity: 0;
  /* transform handled by GSAP; keep a CSS fallback transform so a
     mid-load paint doesn't flash full-size. GSAP overrides immediately. */
  transform: translateY(24px) scale(0.96);
  will-change: transform, opacity;
}

/* --- Hover sheen + icon line-draw (desktop, non-touch) ----- */
/* Additive: v1 already does the translateY(-4px) lift + border/shadow.
   We add a specular sheen sweep and an icon stroke line-draw.
   Everything here is opt-in via the .m-svc-hoverable class that JS
   adds only on (min-width:1024px) AND non-touch pointers. */

/* The sheen is a pseudo-element overlay on the card. It is a narrow
   diagonal highlight that sweeps across once per hover-enter. */
html.motion-on .card.m-svc-hoverable { overflow: hidden; } /* clip the sheen */
html.motion-on .card.m-svc-hoverable::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: 2;                 /* above card content, below nothing focusable */
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(82, 217, 217, 0.10) 48%,
    rgba(162, 242, 213, 0.16) 50%,
    rgba(82, 217, 217, 0.10) 52%,
    transparent 62%
  );
  opacity: 0;
  transform: translateX(-120%);
  /* animation applied via .m-svc-sheen toggle so it can re-fire */
}
html.motion-on .card.m-svc-hoverable.m-svc-sheen::after {
  animation: m-svc-sheen-sweep var(--dur-slow) var(--ease-out) forwards;
}
@keyframes m-svc-sheen-sweep {
  0%   { opacity: 0;   transform: translateX(-120%); }
  12%  { opacity: 1; }
  100% { opacity: 0;   transform: translateX(120%); }
}

/* Icon stroke line-draw. stroke-dasharray / stroke-dashoffset are
   inherited SVG presentation properties, so setting them on the
   <svg class="icon"> cascades into the cloned <use> shadow paths.
   We set a generous dash length (icon viewBox is 24, paths are short)
   and animate the offset to 0 to "draw" the icon. */
html.motion-on .card.m-svc-hoverable .card-ico .icon {
  /* establish a strokeable baseline; harmless when not drawing */
  stroke-dasharray: 64;
  stroke-dashoffset: 0;   /* fully drawn at rest */
}
html.motion-on .card.m-svc-hoverable.m-svc-draw .card-ico .icon {
  animation: m-svc-icon-draw 620ms var(--ease-out) forwards;
}
@keyframes m-svc-icon-draw {
  0%   { stroke-dashoffset: 64; }
  100% { stroke-dashoffset: 0; }
}

/* Respect reduced motion at the CSS layer too (belt + suspenders):
   if the user flips the OS setting after load, kill our extras. */
@media (prefers-reduced-motion: reduce) {
  .m-svc-connectors { display: none !important; }
  html.motion-on .card-grid[data-m-svc-pending] > .card { opacity: 1 !important; transform: none !important; }
  html.motion-on .card.m-svc-hoverable::after { display: none !important; }
  html.motion-on .card.m-svc-hoverable .card-ico .icon { animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ===================== MODULE: MICRO ===================== */

/* ============================================================
   MICRO-INTERACTIONS (prefix: m-mi)
   All hidden/pre-animation states gated behind html.motion-on.
   Without motion-on (no-JS, CDN fail, reduced-motion) everything
   stays in its final, visible, static v1 state.
   Animate transform / opacity / clip-path only.
   ============================================================ */

/* ---- 1. Stat counters --------------------------------------
   The number to animate is wrapped by JS in span.m-mi-count.
   It must NEVER be hidden without motion-on (real content). */
.m-mi-count { font-variant-numeric: tabular-nums; }
/* Non-numeric result figures get a tiny scale-in; gated so the
   text is fully visible as the fallback. */
html.motion-on .m-mi-fig-soft { will-change: transform, opacity; }

/* ---- 2. How-It-Works stepper -------------------------------
   Decorative spine overlay drawn on top of .steps::before path.
   Sits behind the badges (badge z-index:2 in v1). */
.m-mi-spine {
  position: absolute;
  background: var(--accent);
  z-index: 1;               /* same band as ::before, under badges */
  pointer-events: none;
  border-radius: 2px;
  opacity: 0.9;
}
html.motion-on .m-mi-spine { transform: scaleY(0); transform-origin: top center; }
/* Desktop: horizontal spine grows left->right */
@media (min-width: 1024px) {
  html.motion-on .m-mi-spine { transform: scaleX(0); transform-origin: left center; }
}
/* Aqua ring that "fills" each badge as it activates */
.step-badge { position: relative; }   /* anchor for the ring (v1 already inline-flex) */
.m-mi-badge-ring {
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 0 var(--accent-muted), 0 0 18px rgba(82,217,217,0.0);
  pointer-events: none;
}
html.motion-on .m-mi-badge-ring { opacity: 0; transform: scale(0.78); will-change: transform, opacity; }
/* Activated state (set by GSAP via class toggle is not used; GSAP
   tweens inline styles). This rule only describes the lit look for
   the persistent glow after activation. */
.m-mi-badge-lit { box-shadow: 0 0 22px rgba(82,217,217,0.28); }

/* ---- 3. Magnetic primary buttons ---------------------------
   We translate the .btn-primary element itself via GSAP. To stop
   the v1 hover translateY(-1px) from fighting the magnet, we
   neutralize it under motion-on on non-touch and let GSAP own y.
   Layout never shifts (transform only). Focus ring untouched. */
@media (hover: hover) and (pointer: fine) {
  html.motion-on .btn-primary { will-change: transform; }
  html.motion-on .btn-primary:hover { transform: none; } /* GSAP owns transform */
  html.motion-on .btn-primary:active { transform: none; }
}
/* Inner wrapper created by JS so the sweep/ripple clip to the pill
   without affecting the button's own transform. */
.m-mi-btn-fx {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.btn-primary { position: relative; } /* ensure fx layer & label stack correctly */
.btn-primary > *:not(.m-mi-btn-fx) { position: relative; z-index: 1; }
/* Specular diagonal sweep */
.m-mi-sweep {
  position: absolute; top: -60%; bottom: -60%; left: -40%; width: 45%;
  background: linear-gradient(100deg,
              rgba(242,247,248,0) 0%,
              rgba(242,247,248,0.45) 50%,
              rgba(242,247,248,0) 100%);
  transform: translateX(-260%) skewX(-18deg);
  opacity: 0;
  mix-blend-mode: screen;
}
/* Click ripple */
.m-mi-ripple {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(2,18,38,0.55) 0%, rgba(2,18,38,0) 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.6;
  pointer-events: none;
}

/* ---- 4. Industry-pill marquee ------------------------------
   Wrapper clips overflow so the duplicated track never causes
   horizontal page scroll. Without motion-on the wrapper is a
   passive container and .industry-row keeps its v1 wrap layout. */
.m-mi-marquee {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* Only switch to single-line scrolling layout when motion is on. */
html.motion-on .m-mi-marquee .industry-row {
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: none;
  width: max-content;
  will-change: transform;
}
html.motion-on .m-mi-marquee .industry-row .pill { flex: none; }
/* Pause handled by GSAP timeline on hover; class kept for clarity */
.m-mi-marquee.m-mi-paused .industry-row { /* GSAP pauses the tween */ }

/* ---- 5. Featured price-card rotating conic border ----------
   @property lets us animate the gradient angle. Fallback (no
   @property support) = subtle static aqua glow already provided
   by v1 box-shadow; we add a faint static conic as enhancement. */
@property --m-mi-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.m-mi-conic {
  position: absolute; inset: -1px;          /* sit just outside the 1px border */
  border-radius: inherit;
  padding: 1px;                              /* ring thickness */
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(from var(--m-mi-angle, 0deg),
              rgba(82,217,217,0)   0deg,
              var(--accent)        70deg,
              var(--mint)          130deg,
              rgba(82,217,217,0)   200deg,
              rgba(82,217,217,0)   360deg);
  /* mask so only the 1px ring shows, not the fill */
  -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0.85;
}
.price-card.featured { position: relative; }            /* v1 already relative */
.price-card.featured > *:not(.m-mi-conic) { position: relative; z-index: 1; }
/* Fallback static glow if @property / conic angle anim unsupported */
@supports not (background: conic-gradient(from var(--m-mi-angle))) {
  .m-mi-conic {
    background: radial-gradient(120% 90% at 50% 0%,
                rgba(82,217,217,0.30), rgba(82,217,217,0) 60%);
    -webkit-mask: none; mask: none; padding: 0; opacity: 1;
  }
}

/* ---- 6. Faint cursor glow (desktop only) -------------------
   Behind all content, very low alpha, follows pointer via GSAP.
   Hidden on touch / reduced (never injected in those cases). */
.m-mi-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;         /* center on translate origin */
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;                         /* behind nav (z-100) and content */
  opacity: 0;
  background: radial-gradient(circle,
              rgba(82,217,217,0.10) 0%,
              rgba(82,217,217,0.05) 35%,
              rgba(82,217,217,0) 70%);
  will-change: transform, opacity;
  transform: translate3d(-50vw, -50vh, 0);
  mix-blend-mode: screen;
}
@media (hover: none), (pointer: coarse) { .m-mi-cursor-glow { display: none; } }

/* Hard stop: under reduced-motion nothing animates and static
   layouts are guaranteed. */
@media (prefers-reduced-motion: reduce) {
  .m-mi-marquee { overflow: visible; -webkit-mask: none; mask: none; }
  html.motion-on .m-mi-marquee .industry-row {
    flex-wrap: wrap; justify-content: center; max-width: 980px;
    width: auto; transform: none !important;
  }
  .m-mi-spine, .m-mi-badge-ring, .m-mi-conic, .m-mi-cursor-glow,
  .m-mi-sweep, .m-mi-ripple { display: none !important; }
}

/* ===================== MODULE: DEMO ===================== */
/* ============================================================
   LIVE AUTOMATION DEMO  (motion.js: initLiveDemo), prefix .m-demo
   Tokens only. Decorative stage is hidden until html.motion-on,
   so the static timeline is the no-JS / reduced-motion fallback.
============================================================ */

/* ---- Static baseline timeline (always visible) ---- */
.m-demo-timeline {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-6);
  position: relative;
  max-width: 760px;
}
.m-demo-timeline::before {
  content: ""; position: absolute;
  left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: var(--border-default);
  border-radius: var(--radius-pill);
}
.m-demo-beat {
  position: relative;
  display: grid; grid-template-columns: 16px 1fr; gap: var(--space-5);
  align-items: start;
}
.m-demo-beat-dot {
  width: 16px; height: 16px; margin-top: 4px; border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--accent-border);
  box-shadow: 0 0 0 4px var(--bg-base);
  position: relative; z-index: 1;
}
.m-demo-beat-kicker {
  font-family: var(--font-body);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 4px;
}
.m-demo-beat-title {
  font-size: var(--fs-h3); color: var(--text-primary); margin: 0;
}
.m-demo-beat-text {
  font-size: var(--fs-sm); color: var(--text-secondary);
  margin: 6px 0 0; max-width: 60ch;
}
.m-demo-beat-svc {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 10px 0 0; padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-muted); border: 1px solid var(--accent-border);
  color: var(--accent);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.02em;
}
.m-demo-beat--payoff .m-demo-beat-dot {
  border-color: var(--accent); background: var(--accent);
}
.m-demo-beat--payoff .m-demo-beat-title { color: var(--accent); }
.m-demo-beat--payoff .link-arrow { margin-top: var(--space-4); }

/* ---- JS operations canvas: hidden by default (display:none) so it
   never reserves space or appears under no-JS / reduced-motion.
   Only revealed once motion-on is set AND init runs. ---- */
.m-demo-stage { display: none; }

html.motion-on .m-demo-stage.is-live { display: block; margin-top: var(--space-2); }
/* When the live stage is shown on desktop we collapse the static
   timeline (the canvas becomes the visual). It is restored if the
   stage is not live (small screens still keep it if JS chose so). */
html.motion-on .m-demo-timeline.is-superseded {
  /* Visually hidden but kept in the accessibility tree: the live stage
     is aria-hidden, so this timeline stays the screen-reader source of truth. */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* Progress rail */
.m-demo-progress {
  height: 3px; border-radius: var(--radius-pill);
  background: var(--border-subtle);
  overflow: hidden; margin-bottom: var(--space-6);
}
.m-demo-progress-fill {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--mint));
  border-radius: var(--radius-pill);
}

/* Canvas grid, mobile: single column stack; desktop redefined below */
.m-demo-canvas {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  align-items: stretch;
}

/* Flow SVG sits behind the nodes */
.m-demo-flow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: visible;
}
.m-demo-flow-track,
.m-demo-flow-line {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.m-demo-flow-track { stroke: var(--border-subtle); stroke-width: 1.5; }
.m-demo-flow-line {
  stroke: var(--accent); stroke-width: 1.5;
  stroke-dasharray: 1; stroke-dashoffset: 1; /* drawn via JS */
  filter: drop-shadow(0 0 4px var(--accent-muted));
}

/* Shared node card look */
.m-demo-source,
.m-demo-node,
.m-demo-outcome {
  position: relative; z-index: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.m-demo-node-head-row {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-primary); font-weight: 600;
  font-family: var(--font-display);
}
.m-demo-node-state {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-tertiary); flex: none;
}
.m-demo-node.is-online .m-demo-node-state {
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-border);
}
.m-demo-node.is-online {
  border-color: var(--accent-border);
}
.m-demo-node-svc {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-label); color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.m-demo-node-stat {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm); color: var(--accent); font-weight: 600;
}
.m-demo-node-stat--email {
  display: inline-flex; align-items: center; gap: 6px;
}
.m-demo-node-stat--email .icon { width: 14px; height: 14px; }

/* Source card */
.m-demo-node-time {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  color: var(--accent); font-size: 1.05rem;
}
.m-demo-node-head {
  margin: 6px 0 0; color: var(--text-primary); font-weight: 600;
}
.m-demo-node-quote {
  margin: 8px 0 0; color: var(--text-secondary);
  font-size: var(--fs-sm); font-style: italic;
}

/* Respond: typing dots */
.m-demo-typing {
  display: inline-flex; gap: 5px; align-items: center;
  margin-top: var(--space-3); min-height: 14px;
}
.m-demo-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-tertiary);
}

/* Qualify: checks + badge */
.m-demo-checks {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.m-demo-checks li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary); font-size: var(--fs-label);
}
.m-demo-checks li::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--border-default); flex: none;
}
.m-demo-checks li.is-checked {
  color: var(--text-secondary); border-color: var(--accent-border);
}
.m-demo-checks li.is-checked::before {
  border-color: var(--accent); background: var(--accent);
}
.m-demo-badge {
  display: inline-block; margin-top: var(--space-3);
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--text-on-accent);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Book: mini calendar */
.m-demo-cal {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-top: var(--space-3);
}
.m-demo-cal span {
  height: 22px; border-radius: var(--radius-sm);
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
}
.m-demo-cal-slot.is-booked {
  background: var(--accent); border-color: var(--accent);
  position: relative;
}

/* Draft: document lines */
.m-demo-doc {
  display: grid; gap: 7px; margin-top: var(--space-3);
}
.m-demo-doc span {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--bg-inset); transform-origin: left center;
}
.m-demo-doc span:nth-child(1) { width: 90%; }
.m-demo-doc span:nth-child(2) { width: 100%; }
.m-demo-doc span:nth-child(3) { width: 80%; }
.m-demo-doc span:nth-child(4) { width: 60%; }
.m-demo-doc span.is-filled { background: var(--accent); opacity: 0.85; }

/* Sync & send: CRM row */
.m-demo-crm {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--space-3);
}
.m-demo-crm-cell {
  height: 12px; flex: 1; border-radius: var(--radius-pill);
  background: var(--bg-inset);
}
.m-demo-crm-cell.is-written { background: var(--border-strong); }
.m-demo-crm-pill {
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  color: var(--text-tertiary); font-size: var(--fs-label); font-weight: 600;
  flex: none;
}
.m-demo-crm-pill.is-won {
  background: var(--accent-muted); border-color: var(--accent-border);
  color: var(--accent);
}

/* Outcome / payoff card */
.m-demo-outcome {
  border-color: var(--accent-border);
  background: linear-gradient(180deg, var(--accent-muted), transparent), var(--bg-elevated);
}
.m-demo-outcome-kicker {
  margin: 0; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.m-demo-outcome-head {
  margin: 8px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15;
  color: var(--text-primary); max-width: 22ch;
}
.m-demo-outcome-sub {
  margin: 8px 0 0; color: var(--accent); font-weight: 600;
}
.m-demo-outcome-cta { margin-top: var(--space-4); }

/* ---- Pre-animation hidden states, GATED behind motion-on so the
   stage is invisible only when JS will animate it ---- */
html.motion-on .m-demo-stage.is-live .m-demo-node,
html.motion-on .m-demo-stage.is-live .m-demo-source,
html.motion-on .m-demo-stage.is-live .m-demo-outcome {
  opacity: 0;
}
html.motion-on .m-demo-stage.is-live .m-demo-badge,
html.motion-on .m-demo-stage.is-live .m-demo-node-stat,
html.motion-on .m-demo-stage.is-live .m-demo-cal-slot.is-booked,
html.motion-on .m-demo-stage.is-live .m-demo-crm-pill.is-won {
  opacity: 0;
}

/* Replay button */
.m-demo-replay {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-5);
  min-height: 40px; padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface); color: var(--text-secondary);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.m-demo-replay:hover {
  border-color: var(--accent-border); color: var(--text-primary);
  background: var(--accent-muted);
}
.m-demo-replay .icon { width: 16px; height: 16px; color: var(--accent); }

/* ---- Desktop operations-canvas layout (>=1024) ----
   Source | branching nodes | outcome.  3 columns:
   col 1 = source (top) + outcome (bottom); cols 2-3 = the 5 nodes. */
@media (min-width: 1024px) {
  html.motion-on .m-demo-stage.is-live .m-demo-canvas {
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--space-5);
    min-height: 460px;
  }
  html.motion-on .m-demo-stage.is-live .m-demo-source {
    grid-column: 1; grid-row: 1;
    align-self: start;
  }
  html.motion-on .m-demo-stage.is-live .m-demo-outcome {
    grid-column: 1; grid-row: 2 / span 2;
    align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  }
  html.motion-on .m-demo-stage.is-live [data-node="2"] { grid-column: 2; grid-row: 1; }
  html.motion-on .m-demo-stage.is-live [data-node="3"] { grid-column: 3; grid-row: 1; }
  html.motion-on .m-demo-stage.is-live [data-node="4"] { grid-column: 2; grid-row: 2; }
  html.motion-on .m-demo-stage.is-live [data-node="5"] { grid-column: 3; grid-row: 2; }
  html.motion-on .m-demo-stage.is-live [data-node="6"] { grid-column: 2 / span 2; grid-row: 3; }
}


    /* ============================================================
       19. V2.1 SIGNATURE HERO  (Mach Core + Agent + instruments)
    ============================================================ */

/* ---- v2.1 module: shell ---- */
/* ============================================================
   HERO SIGNATURE STAGE, SHELL + GATES  (prefix: hc)
   Layout glue for the v2.1 hero. Token-only. Decorative layers are
   aria-hidden + pointer-events:none. Every hidden / pre-animation /
   animated state gates behind html.motion-on, so with NO JS (and the
   integrator never adds .motion-on) the hero shows the static SVG
   Core fallback, fully visible. Colours inherit the dark hero via the
   existing tokens; [data-theme="light"] overrides flow through them.
   Stack (back→front): hc-core 0 < hc-field 1 < content 3.
============================================================ */

/* Optional stage wrapper. If the integrator wraps the canvases in
   .hc-stage it gets a clean stacking context; if not, .hero
   (position:relative, already set) is the containing block. Either
   way the canvases use inset:0 against the nearest positioned ancestor. */
.hc-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* New stacking context so canvas z-indices stay local to the hero. */
  isolation: isolate;
}

/* Lift real hero content above every decorative layer.
   (index.html already sets .hero-inner{z-index:2}; we bump it to 3 so
   it clears the decorative canvases. Higher specificity-safe single class.) */
.hero-inner { position: relative; z-index: 3; }

/* --- The three decorative canvases: absolutely fill the hero -------------- */
.hc-core,
.hc-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Hidden until the integrator opts into motion; no-JS shows the SVG core. */
  display: none;
}
html.motion-on .hc-core,
html.motion-on .hc-field { display: block; }

.hc-core  { z-index: 0; }  /* WebGL Three.js Core (back)                */
.hc-field { z-index: 1; }  /* 2D chips + Agent + resolved nodes + glow  */

/* --- Static SVG Core fallback: the no-3D hero centerpiece ----------------- */
/* Visible by DEFAULT (no-JS, reduced-motion, low-power, no-WebGL,
   Three.js-failed). Hidden only when the integrator confirms the live
   WebGL Core by adding html.hero-3d. */
.hc-core-fallback {
  position: absolute;
  left: 50%;
  top: 42%;                 /* matches the Core's optical centre in the hero */
  transform: translate(-50%, -50%);
  width: clamp(220px, 32vw, 360px);
  height: auto;
  z-index: 0;               /* sits in the Core's slot, below content */
  pointer-events: none;
  /* Soft aqua bloom around the silhouette. Token-driven so it adapts
     if the accent ever changes; rgba mirrors --accent (#52D9D9). */
  filter:
    drop-shadow(0 0 22px rgba(82, 217, 217, 0.32))
    drop-shadow(0 0 60px rgba(82, 217, 217, 0.14));
}
.hc-core-fallback svg { display: block; width: 100%; height: auto; }

/* Hide the still Core the instant the live WebGL Core is running. */
html.hero-3d .hc-core-fallback { display: none; }

/* Very slow "breathing", ONLY when motion is on AND not reduced.
   Static (no animation) otherwise, so the still image stays crisp. */
html.motion-on .hc-core-fallback {
  animation: hc-breathe 7s var(--ease-out) infinite;
  transform-origin: 50% 50%;
}
@keyframes hc-breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    filter:
      drop-shadow(0 0 22px rgba(82, 217, 217, 0.30))
      drop-shadow(0 0 60px rgba(82, 217, 217, 0.12));
  }
  50% {
    transform: translate(-50%, -50%) scale(1.018);
    filter:
      drop-shadow(0 0 30px rgba(82, 217, 217, 0.42))
      drop-shadow(0 0 78px rgba(82, 217, 217, 0.18));
  }
}

/* --- Micro-labels: small uppercase mono punctuation, never over the H1 ---- */
/* Decorative; positioned in upper/lower bands away from centre so they
   can't collide with the H1. Default hidden (the integrator fades them
   in via GSAP). They only become animatable under motion-on. */
.hc-micro {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;                 /* dim aqua; toned down from full accent */
  text-shadow: 0 0 12px rgba(82, 217, 217, 0.30);
  pointer-events: none;
  display: none;                 /* no stray labels without JS */
}
html.motion-on .hc-micro {
  display: block;
  opacity: 0;                    /* start invisible; timeline tweens up */
}
/* Upper / lower placement bands (default = upper). The integrator picks
   the band per label via a modifier; both stay clear of the centred H1. */
.hc-micro { top: clamp(92px, 15vh, 140px); }
.hc-micro--bottom { top: auto; bottom: clamp(92px, 13vh, 132px); }

/* --- Counter: ticking number near the chip pile (upper-centre) ------------ */
.hc-counter {
  position: absolute;
  left: 50%;
  top: clamp(86px, 13vh, 124px);
  transform: translateX(-50%);
  z-index: 2;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;  /* no width jitter while ticking */
  color: var(--accent);
  text-shadow: 0 0 14px rgba(82, 217, 217, 0.35);
  pointer-events: none;
  white-space: nowrap;
  display: none;                       /* decorative; JS reveals it */
}
html.motion-on .hc-counter { display: block; opacity: 0; }

/* --- Skip button: unobtrusive, focusable, bottom-right -------------------- */
.hc-skip {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(20px, 4vh, 40px);
  z-index: 4;                          /* above content so it stays clickable */
  display: none;                       /* only meaningful during the intro */
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: var(--accent-muted);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--dur-med) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
html.motion-on .hc-skip { display: inline-flex; }
.hc-skip:hover { color: var(--text-primary); border-color: var(--accent); opacity: 1; }
.hc-skip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  opacity: 1;
}
.hc-skip[hidden] { display: none !important; }

/* Replay control, appears once the intro settles (takes the Skip slot) so a
   visitor can re-watch the story without reloading the page. */
.hc-replay {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(20px, 4vh, 40px);
  z-index: 4;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--accent-muted);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
html.motion-on .hc-replay { display: inline-flex; }
.hc-replay svg { opacity: 0.9; }
.hc-replay:hover { color: var(--text-primary); border-color: var(--accent); opacity: 1 !important; }
.hc-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1 !important; }
.hc-replay[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .hc-replay { transition: none !important; } }

/* ============================================================
   v2.1 hero side-gutter "Agent at work" demo (desktop only).
   Left gutter = incoming work, right gutter = handled outcomes;
   a glowing Agent ferries each ticket through the Core. Purely
   decorative (aria-hidden), the real, accessible walkthrough is
   the #demo section and the H1 is untouched. The columns occupy
   the side margins (reserving an 880px center) so they never
   overlap the headline, and they only appear ≥1200px with a fine
   pointer + motion, so phone/tablet keep today's centered layout.
============================================================ */
.hc-gutter {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;                                /* behind .hero-inner (z-3) */
  display: none;
  flex-direction: column;
  gap: 10px;
  width: calc((100% - 880px) / 2);           /* the side margin only */
  max-width: 240px;
  pointer-events: none;
}
.hc-gutter--in  { left: 0;  padding-left: clamp(12px, 2.4vw, 40px); }
.hc-gutter--out { right: 0; padding-right: clamp(12px, 2.4vw, 40px); }
.hc-gutter-head {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary); opacity: 0.85; margin-bottom: 1px;
}
.hc-gutter--out .hc-gutter-head { text-align: right; }
.hc-ticket {
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 0.76rem; line-height: 1.3;
  background: var(--bg-elevated);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  display: flex; align-items: center; gap: 8px;
  text-align: left;                 /* the hero is centred; tickets must not inherit that */
  will-change: transform, opacity;
  /* Colour props only, transform/opacity stay owned by GSAP. */
  transition: border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
}
@supports (backdrop-filter: blur(4px)) {
  .hc-ticket { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
}
/* Per-industry accent: defaults to the brand aqua, overridden by --world-accent
   (set on .hero by the selector) so the demo glows in the chosen colour. */
.hc-ticket--in { border-left: 2px solid color-mix(in srgb, var(--world-accent, var(--accent)) 60%, transparent); }
.hc-ticket--out {
  border: 1px solid color-mix(in srgb, var(--world-accent, var(--accent)) 45%, transparent);
  background: var(--bg-elevated);
  background: color-mix(in srgb, var(--world-accent, var(--accent)) 13%, var(--bg-elevated));
  color: var(--text-primary);
}
.hc-ticket-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-tertiary); transition: background 0.45s ease, box-shadow 0.45s ease; }
.hc-ticket--in .hc-ticket-dot {
  background: var(--world-accent, var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--world-accent, var(--accent)) 75%, transparent);
  animation: hc-tick-pulse 2.4s ease-in-out infinite;
}
.hc-ticket-check { flex: none; color: var(--world-accent, var(--mint)); display: inline-flex; transition: color 0.45s ease; }
.hc-ticket-text { min-width: 0; flex: 1 1 auto; }
@keyframes hc-tick-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.hc-agent {
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  z-index: 2; pointer-events: none; opacity: 0; display: none;
  background: radial-gradient(circle at 50% 50%,
              color-mix(in srgb, var(--world-accent, var(--accent)) 25%, #ffffff),
              var(--world-accent, var(--accent)) 62%,
              color-mix(in srgb, var(--world-accent, var(--accent)) 6%, transparent) 78%);
  box-shadow: 0 0 16px 4px color-mix(in srgb, var(--world-accent, var(--accent)) 55%, transparent);
  will-change: transform, opacity;
}
.hc-agent--carry { box-shadow: 0 0 22px 7px color-mix(in srgb, var(--world-accent, var(--accent)) 68%, transparent); }

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  html.motion-on .hc-gutter { display: flex; }
  html.motion-on .hc-agent { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-gutter, .hc-agent { display: none !important; }
}

/* --- Reduced-motion: freeze everything decorative ------------------------- */
/* The integrator won't create the canvas contexts under reduced-motion,
   but belt-and-braces: no decorative animation, and the still Core +
   any final instrument state stay visible (canvases simply stay display
   per their gates; the SVG fallback remains the centerpiece). */
@media (prefers-reduced-motion: reduce) {
  .hc-core-fallback,
  html.motion-on .hc-core-fallback {
    animation: none !important;
    transform: translate(-50%, -50%) !important;
  }
  .hc-core,
  .hc-field { animation: none !important; }
  .hc-skip { transition: none !important; }
}

/* ---- v2.1 module: core3d ---- */
/* =========================================================================
   THE MACH CORE, canvas layer styling (decorative, token-only)
   The integrator owns z-index/stacking of the hero canvases; these rules
   only size + position the hc-core target and keep its pre-animation hidden
   state gated behind html.motion-on so no-JS / no-motion users see nothing
   half-built. Uses only transform/opacity. No colors invented.
   ========================================================================= */

/* The WebGL Core target. Centered behind the hero content. CSS owns the
   element's box size; the renderer reads clientWidth/clientHeight. */
.hero .hc-core {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Square-ish stage; clamps keep the instrument from dominating small screens. */
  width: clamp(320px, 46vw, 620px);
  height: clamp(320px, 46vw, 620px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Decorative only. */
  will-change: transform, opacity;
}

/* Nudge the Core slightly above true-center so the H1/lead read over its
   lower half (content sits above per the integrator's z-index). */
.hero .hc-core {
  top: clamp(38%, 42%, 46%);
}

/* Pre-animation hidden state, ONLY when motion is on (JS will animate it
   in). Without motion-on the Core simply renders at full opacity or the
   SVG fallback is used, so nothing appears broken with JS/motion disabled. */
html.motion-on .hero .hc-core {
  opacity: 0;
}

/* Respect reduced motion at the CSS layer too: the integrator swaps to the
   SVG fallback, but if the canvas is present, keep it static & visible
   (no pre-hidden flash). */
@media (prefers-reduced-motion: reduce) {
  html.motion-on .hero .hc-core {
    opacity: 1;
  }
}

/* On short/mobile viewports, ease the Core back so it never crowds copy. */
@media (max-width: 720px) {
  .hero .hc-core {
    width: clamp(260px, 78vw, 420px);
    height: clamp(260px, 78vw, 420px);
    top: clamp(34%, 38%, 42%);
    opacity: 0.92; /* slightly recessed behind text on small screens */
  }
  html.motion-on .hero .hc-core { opacity: 0; }
}

/* ---- v2.1 module: field ---- */
/* ============================================================
   .hc-field, CHIPS + AGENT canvas (decorative, token-only)
   The canvas covers the hero; the integrator owns z-index stacking
   (back->front: .hc-core, .hc-field, then real content).
   All draw colours are applied in JS from brand tokens; this block
   only positions the layer and gates its pre-animation hidden state
   behind html.motion-on so the no-JS / no-motion page is unaffected.
============================================================ */
.hero .hc-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;          /* purely decorative; never steals input   */
  will-change: opacity;          /* only transform/opacity are animated      */
}

/* Pre-animation hidden state ONLY when motion is on. Without motion-on
   (no-JS, CDN blocked, reduced-motion path) the canvas simply isn't drawn
   to, so leaving it visible is harmless and avoids any flash of an empty box. */
html.motion-on .hero .hc-field {
  opacity: 0;                    /* integrator fades it in as phase 1 begins */
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);  /* --ease-out */
}

/* The integrator adds .is-live (or tweens opacity via GSAP) to reveal it. */
html.motion-on .hero .hc-field.is-live {
  opacity: 1;
}

/* Belt-and-braces: under reduced motion never hide the layer behind the
   motion-on gate, the JS renders a static calm constellation that should
   be visible immediately. */
@media (prefers-reduced-motion: reduce) {
  html.motion-on .hero .hc-field {
    opacity: 1;
    transition: none;
  }
}

    /* ---- v2.1 integration rules ---- */
    /* Micro-labels + counter sit above the (dimmed-during-intro) hero content. */
    .hc-micro { z-index: 5; top: clamp(118px, 26vh, 230px); }
    .hc-counter { z-index: 5; }
    /* Ignition scanline sweep (the "Mach powering on" pulse). */
    .hc-scan {
      position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
      z-index: 2; pointer-events: none; opacity: 0;
      background: linear-gradient(90deg, rgba(82,217,217,0) 0%, rgba(111,230,230,0.5) 50%, rgba(82,217,217,0) 100%);
      mix-blend-mode: screen; will-change: transform, opacity;
    }
    html:not(.motion-on) .hc-scan { display: none; }

    /* ---- v2.1.1 persistent Growth Meter (cross-site) ---- */
    .hc-growth {
      position: fixed; left: clamp(16px, 3vw, 44px); bottom: clamp(16px, 3vh, 34px);
      z-index: 80; width: clamp(126px, 13vw, 158px);
      pointer-events: none; opacity: 0; will-change: opacity, transform;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .hc-growth svg { display: block; width: 100%; height: auto; overflow: visible; }
    .hc-growth-track { fill: none; stroke: var(--border-strong); stroke-width: 3; opacity: 0.55; stroke-linecap: round; }
    .hc-growth-fill {
      fill: none; stroke: #B9876F; stroke-width: 3.5; stroke-linecap: round;
      stroke-dasharray: 1; stroke-dashoffset: 1;
      transition: stroke var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out);
    }
    .hc-growth-needle { stroke: #B9876F; stroke-width: 2.5; stroke-linecap: round; transition: stroke var(--dur-med) var(--ease-out); }
    .hc-growth-hub { fill: var(--text-secondary); transition: fill var(--dur-med) var(--ease-out); }
    .hc-growth.is-growing .hc-growth-fill { stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(82,217,217,0.5)); }
    .hc-growth.is-growing .hc-growth-needle { stroke: var(--accent); }
    .hc-growth.is-growing .hc-growth-hub { fill: var(--accent); }
    .hc-growth.is-surge .hc-growth-fill { stroke: var(--mint); filter: drop-shadow(0 0 10px rgba(162,242,213,0.75)); }
    .hc-growth.is-surge .hc-growth-needle { stroke: var(--mint); }
    .hc-growth.is-surge .hc-growth-hub { fill: var(--mint); }
    .hc-growth-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: -18px; padding: 0 10px; }
    .hc-growth-label { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--text-tertiary); }
    .hc-growth-state { font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 600; color: #B9876F; transition: color var(--dur-med) var(--ease-out); }
    .hc-growth.is-growing .hc-growth-state { color: var(--accent); }
    .hc-growth.is-surge .hc-growth-state { color: var(--mint); }
    html:not(.motion-on) .hc-growth { display: none; }
    @media (prefers-reduced-motion: reduce) { .hc-growth { display: none !important; } }
    @media (max-width: 600px) { .hc-growth { width: 112px; left: 12px; bottom: 12px; } }

    /* ---- v2.1.2 "Pick your world" industry selector ---- */
    .hc-world { margin-top: var(--space-6); display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .hc-world-tag {
      margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--world-accent, var(--accent)); opacity: 0; max-height: 0; overflow: hidden;
      transition: opacity var(--dur-med) var(--ease-out), max-height var(--dur-med) var(--ease-out), color 0.45s var(--ease-out);
    }
    .hc-world-tag.is-on { opacity: 0.9; max-height: 2em; }
    .hc-world-pick { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-tertiary); }
    .hc-world-pick label { font-size: var(--fs-sm); color: var(--text-tertiary); }
    .hc-world-pick select {
      appearance: none; -webkit-appearance: none;
      font: inherit; font-size: var(--fs-sm); color: var(--text-primary);
      background: var(--bg-inset); border: 1px solid var(--border-default);
      border-radius: var(--radius-pill); padding: 7px 34px 7px 14px; min-height: 38px; cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2352D9D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 12px center;
      transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    }
    .hc-world-pick select:hover { border-color: var(--accent-border); }
    .hc-world-pick select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--accent); }

    /* ---- v2.1.2 docked Core (persistent page guide, desktop) ---- */
    .hero .hc-core--docked {
      position: fixed; top: auto; left: auto;
      right: clamp(16px, 2.4vw, 34px);
      bottom: clamp(78px, 11vh, 118px);
      width: clamp(62px, 6.5vw, 82px);
      height: clamp(62px, 6.5vw, 82px);
      transform: none; z-index: 60;
      filter: drop-shadow(0 0 14px rgba(82,217,217,0.22));
    }