/* ============================================================
         SpiralWave — shared design system
         Industrial sage palette + heavy italic uppercase display
         ============================================================ */

      :root {
        /* Surfaces — sampled from the deck */
        --bg: #E8E8E0;            /* pale neutral sage-tinted page */
        --bg-card: #DEDED5;       /* card surface — slightly darker than bg */
        --bg-warm: #D2D2C9;       /* deeper recessed surface */
        --bg-dark: #1A1A1A;

        /* Type */
        --text-primary: #1A1A1A;
        --text-secondary: #5C5C53;
        --text-tertiary: #8A8A80;
        --text-inverted: #E8E8E0;

        --border: #B8B8AE;
        --border-strong: #1A1A1A;

        /* Monochrome accent — the deck's emphasis is weight + inversion, not color */
        --accent-fg: #1A1A1A;       /* dark — used as text on light pill bg, and as dot bg */
        --accent-bg: #D2D2C9;       /* soft sage surface for pill tags + toggle-btn active */
        --accent-strong: #1A1A1A;   /* near-black — for borders, dots, em accents */
        --accent-strong-bg: #D2D2C9;/* soft sage (currently unused but kept consistent) */

        /* Hero accent — also monochrome */
        --hero-orange: #1A1A1A;

        /* Fonts */
        --font-display: 'Archivo Black', 'Inter', sans-serif;
        --font-body: 'DM Sans', -apple-system, system-ui, sans-serif;
        --font-mono: 'JetBrains Mono', ui-monospace, monospace;
      }

      /* C4 page — drops the dual-product color split entirely. The two product
         pages now share the same monochrome palette; differentiation comes from
         copy and content, not color. */
      body.theme-c4 {
        --accent-fg: #1A1A1A;
        --accent-bg: #D2D2C9;
        --accent-strong: #1A1A1A;
        --accent-strong-bg: #D2D2C9;
        --hero-orange: #1A1A1A;
      }

      * { box-sizing: border-box; margin: 0; padding: 0; }

      html { scroll-behavior: smooth; }

      body {
        font-family: var(--font-body);
        background: var(--bg);
        color: var(--text-primary);
        line-height: 1.55;
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

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

      a { color: inherit; text-decoration: none; }

      /* ============================================================
         HEADER / NAV
         ============================================================ */

      header.site {
        position: sticky; top: 0; z-index: 100;
        padding: 18px 32px;
        display: flex; justify-content: space-between; align-items: center;
        background: rgba(242, 238, 230, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 0.5px solid var(--border);
      }

      .logo {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 18px;
        font-variation-settings: "SOFT" 50, "opsz" 14;
        letter-spacing: -0.01em;
      }
      .logo .dot { color: var(--accent-strong); }

      nav.main { display: flex; gap: 24px; align-items: center; }
      nav.main a {
        color: var(--text-secondary); font-size: 13px; font-weight: 500;
        transition: color 0.2s; padding: 6px 0;
      }
      nav.main a:hover { color: var(--text-primary); }
      nav.main a.current { color: var(--text-primary); border-bottom: 1px solid var(--accent-strong); }

      nav.main a.coming {
        color: var(--text-tertiary);
        cursor: default;
        pointer-events: none;
        display: inline-flex; align-items: center; gap: 6px;
      }
      nav.main a.coming::after {
        content: "soon";
        font-family: var(--font-mono); font-size: 9px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.08em;
        padding: 2px 6px;
        background: var(--bg-warm);
        border-radius: 2px;
        color: var(--text-tertiary);
      }

      nav.main .cta-link {
        background: var(--text-primary); color: var(--bg);
        padding: 8px 16px; border-radius: 2px;
        transition: background 0.2s;
      }
      nav.main .cta-link:hover { background: var(--accent-strong); }

      /* ============================================================
         LAYOUT
         ============================================================ */

      section.hero {
        padding: 100px 32px 80px;
        max-width: 1280px; margin: 0 auto;
        position: relative;
      }
      section.hero.compact {
        padding: 70px 32px 50px;
      }

      section.content {
        padding: 80px 32px;
        max-width: 1280px; margin: 0 auto;
      }

      .section-header {
        margin-bottom: 56px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 48px;
        align-items: end;
      }
      .section-eyebrow {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--text-tertiary);
        margin-bottom: 16px;
      }
      .section-title {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 80, "opsz" 60;
        font-size: clamp(36px, 5vw, 56px);
        line-height: 1.0;
        letter-spacing: -0.025em;
      }
      .section-title em {
        font-style: italic;
        color: var(--accent-strong);
      }
      .section-intro {
        font-size: 16px; color: var(--text-secondary);
        line-height: 1.55; max-width: 460px;
      }

      /* ============================================================
         HERO TYPOGRAPHY
         ============================================================ */

      .hero-eyebrow {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--accent-fg);
        margin-bottom: 24px;
        display: flex; align-items: center; gap: 10px;
      }
      .hero-eyebrow::before {
        content: ""; display: inline-block;
        width: 8px; height: 8px; background: var(--accent-fg);
        border-radius: 50%;
      }

      .hero-title {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 100, "opsz" 144;
        font-size: clamp(48px, 8vw, 110px);
        line-height: 0.92;
        letter-spacing: -0.04em;
        margin-bottom: 32px;
        max-width: 1100px;
      }
      .hero-title em {
        font-style: italic;
        color: var(--accent-strong);
        font-variation-settings: "SOFT" 100, "opsz" 144;
      }

      .hero-title.compact {
        font-size: clamp(40px, 6vw, 76px);
        margin-bottom: 24px;
      }

      .hero-lede {
        font-size: clamp(17px, 1.6vw, 22px);
        color: var(--text-secondary);
        max-width: 620px;
        line-height: 1.45;
        margin-bottom: 48px;
      }

      .hero-meta {
        display: flex; gap: 48px;
        padding-top: 32px;
        border-top: 0.5px solid var(--border);
        max-width: 800px;
        flex-wrap: wrap;
      }
      .hero-meta-item .key {
        font-family: var(--font-mono); font-size: 10px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--text-tertiary); margin-bottom: 6px;
      }
      .hero-meta-item .val {
        font-family: var(--font-display); font-weight: 400;
        font-variation-settings: "SOFT" 80, "opsz" 24;
        font-size: 24px;
        letter-spacing: -0.02em;
      }

      .trust-strip {
        margin-top: 32px;
        padding: 14px 0 0;
        font-family: var(--font-mono); font-size: 12px; font-weight: 500;
        color: var(--text-secondary);
        letter-spacing: 0.02em;
        display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
      }
      .trust-strip strong {
        color: var(--text-primary);
        font-weight: 600;
      }
      .trust-strip .sep {
        color: var(--text-tertiary);
        font-weight: 400;
      }

      .thesis-section {
        padding: 80px 32px;
        max-width: 1280px; margin: 0 auto;
      }
      .thesis-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 48px;
        align-items: start;
      }
      .thesis-eyebrow {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--text-tertiary);
        margin-bottom: 16px;
      }
      .thesis-title {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 80, "opsz" 60;
        font-size: clamp(36px, 4.5vw, 52px);
        line-height: 1.0;
        letter-spacing: -0.025em;
      }
      .thesis-title em {
        font-style: italic;
        color: var(--accent-strong);
      }
      .thesis-body {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 80, "opsz" 24;
        font-size: clamp(20px, 2vw, 26px);
        line-height: 1.45;
        color: var(--text-primary);
        letter-spacing: -0.015em;
      }
      .thesis-body em {
        font-style: italic;
        color: var(--accent-strong);
      }

      /* ============================================================
         MONACO-STYLE TIGHTER PAGE COMPONENTS
         ============================================================ */

      .hero-trust-above {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--text-secondary);
        margin-bottom: 32px;
        display: flex; align-items: center; gap: 8px;
      }
      .hero-trust-above::before {
        content: ""; display: inline-block;
        width: 6px; height: 6px; background: var(--accent-strong);
        border-radius: 50%;
      }
      .hero-trust-above strong { color: var(--text-primary); font-weight: 600; }

      .hero-cta-row {
        margin-top: 40px;
        display: flex; gap: 12px;
      }
      .btn-hero {
        display: inline-flex; align-items: center; gap: 10px;
        padding: 16px 32px;
        background: var(--text-primary); color: var(--bg);
        font-family: var(--font-body); font-size: 15px; font-weight: 500;
        text-decoration: none; border-radius: 2px;
        transition: background 0.2s;
      }
      .btn-hero:hover { background: var(--accent-strong); }
      .btn-hero-ghost {
        background: transparent; color: var(--text-primary);
        border: 0.5px solid var(--border-strong);
      }
      .btn-hero-ghost:hover { background: var(--text-primary); color: var(--bg); }

      /* Centered thesis section — quieter Monaco-style */
      .thesis-centered {
        padding: 120px 32px;
        max-width: 880px; margin: 0 auto;
        text-align: center;
      }
      .thesis-centered .eyebrow {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--text-tertiary);
        margin-bottom: 28px;
      }
      .thesis-centered h2 {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 100, "opsz" 96;
        font-size: clamp(40px, 5vw, 64px);
        line-height: 1.0;
        letter-spacing: -0.025em;
        margin-bottom: 40px;
      }
      .thesis-centered h2 em { font-style: italic; color: var(--accent-strong); }
      .thesis-centered .body p {
        font-size: clamp(16px, 1.4vw, 19px);
        line-height: 1.6;
        color: var(--text-secondary);
        max-width: 720px; margin: 0 auto 18px;
      }
      .thesis-centered .body p:last-child { margin-bottom: 0; }
      .thesis-centered .body p strong { color: var(--text-primary); font-weight: 500; }

      /* Tighter section header (Monaco-style: short intro, 3 short bullets) */
      .section-header-tight {
        margin-bottom: 56px;
        max-width: 760px;
      }
      .section-header-tight .eyebrow {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--text-tertiary);
        margin-bottom: 16px;
      }
      .section-header-tight h2 {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 80, "opsz" 60;
        font-size: clamp(36px, 4.5vw, 56px);
        line-height: 1.0;
        letter-spacing: -0.025em;
        margin-bottom: 24px;
      }
      .section-header-tight h2 em { font-style: italic; color: var(--accent-strong); }
      .section-header-tight .intro {
        font-size: 16px; color: var(--text-secondary); line-height: 1.55;
      }

      /* Refined product cards */
      .product-cards-tight {
        display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
      }
      .product-card-tight {
        padding: 40px 36px 32px;
        border-radius: 6px;
        border: 0.5px solid var(--border);
        position: relative;
        overflow: hidden;
        transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
        display: flex; flex-direction: column;
        min-height: 420px;
      }
      .product-card-tight::before {
        content: "";
        position: absolute; top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(26,26,26,0.18), transparent);
      }
      .product-card-tight:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 50px -20px rgba(26, 23, 20, 0.18);
        border-color: rgba(26,26,26,0.25);
      }
      .product-card-tight.warm {
        background: linear-gradient(155deg, #DDE2D4 0%, #D8DDCF 50%, #E4E8DC 100%);
      }
      .product-card-tight.cool {
        background: linear-gradient(155deg, #D4D4CB 0%, #CFCFC5 50%, #E8E8E0 100%);
      }

      .product-card-tight .pcard-eyebrow {
        display: inline-flex; align-items: center; gap: 10px;
        font-family: var(--font-body);
        font-size: 11px; font-weight: 600;
        letter-spacing: 0.18em; text-transform: uppercase;
        color: #1A1A1A;
        margin-bottom: 20px;
      }
      .product-card-tight .pcard-eyebrow::before {
        content: ""; width: 24px; height: 1px; background: #1A1A1A;
      }

      .product-card-tight .pcard-name {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 80, "opsz" 60;
        font-size: 40px;
        line-height: 1;
        letter-spacing: -0.025em;
        margin-bottom: 14px;
        color: #1A1A1A;
      }
      .product-card-tight .pcard-name em {
        font-style: italic;
        color: #1A1A1A;
      }

      .product-card-tight .pcard-prop {
        font-size: 16px;
        color: var(--text-primary);
        font-weight: 400;
        line-height: 1.5;
        margin-bottom: 28px;
        padding-bottom: 24px;
        border-bottom: 0.5px solid rgba(26,26,26,0.12);
      }

      .product-card-tight ul {
        list-style: none; padding: 0; margin: 0 0 28px;
        display: flex; flex-direction: column; gap: 14px;
        flex: 1;
      }
      .product-card-tight ul li {
        font-size: 14px; color: var(--text-secondary); line-height: 1.5;
        padding-left: 22px; position: relative;
      }
      .product-card-tight ul li::before {
        content: ""; position: absolute; left: 0; top: 9px;
        width: 12px; height: 1px; background: var(--text-tertiary);
      }
      .product-card-tight ul li:last-child {
        margin-top: 4px;
        padding-top: 14px;
        border-top: 0.5px dashed rgba(26,26,26,0.15);
        font-size: 13px;
        color: #1A1A1A;
        font-weight: 500;
        letter-spacing: 0.01em;
      }
      .product-card-tight ul li:last-child::before {
        top: 23px;
        background: #1A1A1A;
      }

      .product-card-tight .pcard-arrow {
        display: inline-flex; align-items: center; gap: 8px;
        font-family: var(--font-body); font-size: 13px; font-weight: 500;
        letter-spacing: 0.04em;
        align-self: flex-start;
        padding-bottom: 4px;
        border-bottom: 1px solid currentColor;
        transition: transform 0.25s ease;
        color: #1A1A1A;
      }
      .product-card-tight:hover .pcard-arrow { transform: translateX(4px); }


      /* Tighter segment cards: title + one short line, no paragraph */
      .segment-grid-tight {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
      }
      .segment-card-tight {
        padding: 28px 24px;
        background: var(--bg-card);
        border: 0.5px solid var(--border);
        border-radius: 4px;
        display: flex; flex-direction: column;
        min-height: 180px;
      }
      .segment-card-tight .num {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        color: var(--accent-strong);
        letter-spacing: 0.06em;
        margin-bottom: 24px;
      }
      .segment-card-tight .name {
        font-family: var(--font-display);
        font-weight: 400;
        font-variation-settings: "SOFT" 60, "opsz" 24;
        font-size: 22px;
        line-height: 1.15; letter-spacing: -0.015em;
        margin-bottom: 10px;
      }
      .segment-card-tight .one-liner {
        font-size: 13px; color: var(--text-secondary); line-height: 1.5;
      }

      /* Closing CTA — Monaco-tight */
      .closing-cta {
        padding: 140px 32px;
        background: var(--bg-dark);
        color: var(--text-inverted);
        text-align: center;
      }
      .closing-cta h2 {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 100, "opsz" 96;
        font-size: clamp(44px, 6vw, 80px);
        line-height: 0.95; letter-spacing: -0.03em;
        margin-bottom: 48px;
      }
      .closing-cta h2 em { font-style: italic; color: var(--text-inverted); opacity: 0.85; }
      .closing-cta .btn-hero {
        background: var(--text-inverted); color: var(--bg-dark);
        font-size: 16px; padding: 18px 36px;
      }
      .closing-cta .btn-hero:hover { background: var(--hero-orange); color: var(--text-inverted); }

      /* ============================================================
         CYCLE DIAGRAM SECTION (PRODUCT PAGES)
         ============================================================ */

      .cycle-section {
        padding: 100px 32px 80px;
        max-width: 1280px; margin: 0 auto;
      }
      .cycle-header {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 48px;
        align-items: end;
        margin-bottom: 40px;
      }
      .cycle-eyebrow {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--text-tertiary);
        margin-bottom: 16px;
      }
      .cycle-title {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 80, "opsz" 60;
        font-size: clamp(36px, 4.5vw, 52px);
        line-height: 1.0;
        letter-spacing: -0.025em;
      }
      .cycle-title em {
        font-style: italic;
        color: var(--accent-strong);
      }
      .cycle-intro {
        font-size: 16px; color: var(--text-secondary);
        line-height: 1.55; max-width: 520px;
      }

      .cycle-frame {
        background: var(--bg-card);
        border: 0.5px solid var(--border);
        border-radius: 4px;
        padding: 8px;
        position: relative;
      }
      .cycle-frame iframe {
        display: block;
        width: 100%;
        height: 620px;
        border: none;
        border-radius: 2px;
        background: var(--bg);
      }
      .cycle-bullets {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 32px;
      }
      .cycle-bullet {
        padding: 24px 24px 20px;
        background: var(--bg-card);
        border: 0.5px solid var(--border);
        border-radius: 4px;
      }
      .cycle-bullet-num {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        color: var(--accent-strong);
        letter-spacing: 0.06em;
        margin-bottom: 14px;
      }
      .cycle-bullet-title {
        font-family: var(--font-display);
        font-weight: 400;
        font-variation-settings: "SOFT" 60, "opsz" 24;
        font-size: 19px;
        line-height: 1.2; letter-spacing: -0.015em;
        margin-bottom: 8px;
      }
      .cycle-bullet-text {
        font-size: 13px; color: var(--text-secondary); line-height: 1.55;
      }

      /* ============================================================
         PRODUCT CARDS (HOME)
         ============================================================ */

      .product-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .product-card {
        display: block;
        padding: 40px 36px 32px;
        border-radius: 4px;
        border: 0.5px solid var(--border);
        background: var(--bg-card);
        position: relative;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        min-height: 460px;
        display: flex; flex-direction: column;
      }

      .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px -16px rgba(26, 23, 20, 0.15);
      }

      .product-card.warm {
        background: linear-gradient(160deg, #D2D2C9 0%, #D2D2C9 60%, #DEDED5 100%);
      }
      .product-card.cool {
        background: linear-gradient(160deg, #D2D2C9 0%, #D2D2C9 60%, #E8E8E0 100%);
      }

      .card-eyebrow {
        font-family: var(--font-mono); font-size: 10px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--text-secondary);
        margin-bottom: 12px;
        display: flex; align-items: center; gap: 8px;
      }
      .card-eyebrow::before {
        content: ""; display: inline-block;
        width: 6px; height: 6px; border-radius: 50%;
      }
      .warm .card-eyebrow::before { background: #1A1A1A; }
      .cool .card-eyebrow::before { background: #1A1A1A; }
      .warm .card-eyebrow { color: #1A1A1A; }
      .cool .card-eyebrow { color: #1A1A1A; }

      .card-name {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 80, "opsz" 60;
        font-size: 44px;
        line-height: 0.95;
        letter-spacing: -0.02em;
        margin-bottom: 8px;
      }
      .card-name em {
        font-style: italic;
      }
      .warm .card-name em { color: #1A1A1A; }
      .cool .card-name em { color: #1A1A1A; }

      .card-tag {
        font-size: 14px; color: var(--text-secondary);
        margin-bottom: 28px;
      }

      .card-stats {
        display: flex; gap: 24px;
        padding: 18px 0;
        border-top: 0.5px solid rgba(26, 23, 20, 0.12);
        border-bottom: 0.5px solid rgba(26, 23, 20, 0.12);
        margin-bottom: 20px;
        flex-wrap: wrap;
      }
      .card-stat .stat-num {
        font-family: var(--font-display);
        font-weight: 400;
        font-variation-settings: "SOFT" 60, "opsz" 24;
        font-size: 22px;
        line-height: 1;
        letter-spacing: -0.01em;
        margin-bottom: 4px;
      }
      .card-stat .stat-label {
        font-family: var(--font-mono); font-size: 10px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--text-secondary);
      }

      .card-for {
        font-size: 13px; color: var(--text-secondary);
        line-height: 1.55;
        margin-bottom: 24px;
        flex: 1;
      }
      .card-for strong { color: var(--text-primary); font-weight: 500; }

      .card-arrow {
        display: inline-flex; align-items: center; gap: 8px;
        font-family: var(--font-body); font-size: 14px; font-weight: 500;
        align-self: flex-start;
        padding-bottom: 4px;
        border-bottom: 1px solid currentColor;
        transition: transform 0.2s;
      }
      .warm .card-arrow { color: #1A1A1A; }
      .cool .card-arrow { color: #1A1A1A; }
      .product-card:hover .card-arrow { transform: translateX(4px); }

      /* ============================================================
         HOW IT WORKS (HOME)
         ============================================================ */

      .how-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      .how-step {
        padding: 32px 24px;
        background: var(--bg-card);
        border: 0.5px solid var(--border);
        border-radius: 4px;
        position: relative;
        min-height: 360px;
        display: flex;
        flex-direction: column;
      }
      .how-step-num {
        font-family: var(--font-display);
        font-weight: 300;
        font-variation-settings: "SOFT" 100, "opsz" 144;
        font-size: 88px;
        line-height: 0.85;
        color: var(--accent-strong);
        letter-spacing: -0.04em;
        margin-bottom: 32px;
        font-style: italic;
      }
      .how-step-title {
        font-family: var(--font-display);
        font-weight: 400;
        font-variation-settings: "SOFT" 60, "opsz" 24;
        font-size: 22px;
        line-height: 1.15; letter-spacing: -0.015em;
        margin-bottom: 12px;
      }
      .how-step-text {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.6;
        flex: 1;
      }
      .how-step-tag {
        font-family: var(--font-mono); font-size: 10px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.1em;
        margin-top: 20px;
        padding: 6px 10px;
        border-radius: 2px;
        align-self: flex-start;
      }
      .tag-green { background: #D2D2C9; color: #1A1A1A; }
      .tag-amber { background: #D2D2C9; color: #1A1A1A; }
      .tag-blue { background: #D2D2C9; color: #1A1A1A; }

      /* ============================================================
         CUSTOMER LANDSCAPE (HOME) — 4-up grid
         ============================================================ */

      .segment-grid {
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      .segment-card {
        padding: 28px 24px 24px;
        background: var(--bg-card);
        border: 0.5px solid var(--border);
        border-radius: 4px;
        display: flex; flex-direction: column;
        min-height: 240px;
      }
      .segment-num {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        color: var(--accent-strong);
        letter-spacing: 0.06em;
        margin-bottom: 18px;
      }
      .segment-title {
        font-family: var(--font-display);
        font-weight: 400;
        font-variation-settings: "SOFT" 60, "opsz" 24;
        font-size: 22px;
        line-height: 1.15; letter-spacing: -0.015em;
        margin-bottom: 12px;
      }
      .segment-text { font-size: 13px; color: var(--text-secondary); line-height: 1.55; flex: 1; }
      .segment-foot {
        font-family: var(--font-mono); font-size: 10px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--text-tertiary);
        margin-top: 18px;
        padding-top: 14px;
        border-top: 0.5px solid var(--border);
      }

      /* ============================================================
         "WHEN TO CHOOSE" PANEL (PRODUCT PAGES)
         ============================================================ */

      .choose-panel {
        margin-top: 16px;
        padding: 28px 32px;
        background: var(--bg-card);
        border: 0.5px solid var(--border);
        border-radius: 4px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 40px;
        align-items: start;
      }
      .choose-title {
        font-family: var(--font-display);
        font-weight: 400;
        font-variation-settings: "SOFT" 60, "opsz" 32;
        font-size: 26px;
        line-height: 1.05; letter-spacing: -0.02em;
      }
      .choose-title em { font-style: italic; color: var(--accent-strong); }
      .choose-list {
        display: flex; flex-direction: column; gap: 14px;
        margin: 0; padding: 0; list-style: none;
      }
      .choose-list li {
        display: grid; grid-template-columns: 16px 1fr; gap: 14px;
        align-items: baseline;
        font-size: 14px; color: var(--text-secondary);
        line-height: 1.55;
      }
      .choose-list li::before {
        content: "→";
        color: var(--accent-strong);
        font-family: var(--font-mono);
        font-size: 13px;
      }
      .choose-list li strong { color: var(--text-primary); font-weight: 500; }

      /* ============================================================
         SPEC SHEET (PRODUCT PAGES)
         ============================================================ */

      .spec-hero {
        padding: 32px;
        background: var(--bg-card);
        border: 0.5px solid var(--border);
        border-radius: 4px;
        margin-bottom: 16px;
      }
      .spec-hero-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
      .spec-hero-name {
        font-family: var(--font-display);
        font-size: 38px; font-weight: 400;
        font-variation-settings: "SOFT" 60, "opsz" 36;
        letter-spacing: -0.02em; line-height: 1;
        margin-bottom: 4px;
      }
      .spec-hero-tag { font-size: 14px; color: var(--text-secondary); }
      .spec-hero-badge {
        font-family: var(--font-mono); font-size: 10px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--accent-fg);
        padding: 6px 10px;
        background: var(--accent-bg);
        border-radius: 2px;
      }

      .headline-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-top: 0.5px solid var(--border);
        padding-top: 24px;
      }
      .headline-item {
        padding: 0 20px;
        border-right: 0.5px solid var(--border);
      }
      .headline-item:first-child { padding-left: 0; }
      .headline-item:last-child { border-right: none; padding-right: 0; }
      .headline-num {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 50, "opsz" 36;
        font-size: 26px;
        line-height: 1.1; letter-spacing: -0.02em;
        color: var(--text-primary);
        margin-bottom: 4px;
      }
      .headline-num.hero {
        color: var(--accent-strong);
        font-variation-settings: "SOFT" 80, "opsz" 36;
        font-style: italic;
        font-weight: 400;
      }
      .headline-unit { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
      .headline-sub {
        font-family: var(--font-mono); font-size: 10px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--text-tertiary);
      }

      /* Config card (toggles + capture rate) */
      .config-card {
        padding: 24px 32px;
        background: var(--bg-card);
        border: 0.5px solid var(--border);
        border-radius: 4px;
        margin-bottom: 16px;
      }
      .config-row {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 32px;
        align-items: end;
      }
      .config-section { }
      .config-label {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--text-secondary);
        margin-bottom: 10px;
      }
      .toggle-group {
        display: inline-flex;
        border: 0.5px solid var(--border); border-radius: 2px; overflow: hidden;
      }
      .toggle-btn {
        padding: 9px 22px; background: transparent;
        border: none; cursor: pointer;
        font-size: 13px; color: var(--text-secondary);
        font-family: inherit; transition: background 0.15s, color 0.15s;
      }
      .toggle-btn:not(:last-child) { border-right: 0.5px solid var(--border); }
      .toggle-btn.active { background: var(--accent-bg); color: var(--accent-fg); font-weight: 500; }
      .toggle-btn:hover:not(.active) { background: var(--bg-warm); }

      .capture-input-row { display: flex; align-items: center; gap: 10px; }
      .capture-input {
        background: var(--bg); border: 0.5px solid var(--border);
        border-radius: 2px; padding: 8px 12px;
        font-size: 14px; font-weight: 500; color: var(--text-primary);
        width: 130px; text-align: right; font-variant-numeric: tabular-nums; font-family: inherit;
      }
      .capture-input:focus { outline: none; border-color: var(--accent-fg); }
      .capture-input-unit { font-size: 13px; color: var(--text-secondary); }

      /* Spec blocks grid */
      .spec-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .spec-block {
        padding: 24px 28px;
        background: var(--bg-card);
        border: 0.5px solid var(--border);
        border-radius: 4px;
      }
      .spec-block.hero {
        background: var(--accent-bg);
        border: 1px solid var(--accent-fg);
      }

      .spec-block-title {
        font-family: var(--font-mono); font-size: 10px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--text-tertiary);
        margin-bottom: 18px;
      }
      .spec-block.hero .spec-block-title { color: var(--accent-fg); }

      .spec-row {
        display: flex; justify-content: space-between; align-items: baseline;
        padding: 10px 0;
        border-bottom: 0.5px solid var(--border);
      }
      .spec-row:last-child { border-bottom: none; }
      .spec-key { font-size: 13px; color: var(--text-secondary); }
      .spec-key-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
      .spec-val {
        font-family: var(--font-mono); font-size: 13px; font-weight: 500;
        color: var(--text-primary);
      }

      .spec-row-total {
        padding: 13px 0 10px;
        border-top: 0.5px solid var(--text-tertiary);
        margin-top: 6px;
      }
      .spec-row-total .spec-key { color: var(--text-primary); font-weight: 500; }
      .spec-row-total .spec-val { font-size: 14px; }

      .spec-row-result {
        padding: 14px 0 4px;
        border-top: 1px solid var(--accent-fg);
        margin-top: 8px;
      }
      .spec-row-result .spec-key {
        color: var(--accent-fg); font-weight: 500; font-size: 14px;
        font-family: var(--font-body);
      }
      .spec-row-result .spec-val { font-size: 16px; color: var(--accent-fg); }

      .spec-row-grand {
        padding: 18px 0 4px;
        border-top: 2px solid var(--accent-fg);
        margin-top: 12px;
      }
      .spec-row-grand .spec-key { font-size: 15px; color: var(--text-primary); font-weight: 500; }
      .spec-row-grand .spec-val {
        font-family: var(--font-display);
        font-style: italic; font-weight: 400;
        font-variation-settings: "SOFT" 80, "opsz" 28;
        font-size: 32px;
        color: var(--accent-fg);
        letter-spacing: -0.02em;
      }

      .spec-block-note {
        font-size: 11px; color: var(--text-secondary);
        margin-top: 18px; line-height: 1.5;
        padding-top: 14px;
        border-top: 0.5px dashed var(--border);
      }

      .opex-note {
        font-size: 11px; color: var(--text-tertiary);
        padding: 10px 0 0; line-height: 1.5; font-style: italic;
      }

      /* Collapsible assumptions toggle */
      .assumptions-details {
        margin-top: 16px;
        border-top: 0.5px dashed var(--border);
        padding-top: 12px;
      }
      .assumptions-summary {
        font-family: var(--font-mono); font-size: 11px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--text-secondary);
        cursor: pointer;
        list-style: none;
        display: flex; align-items: center; gap: 8px;
        user-select: none;
        padding: 4px 0;
        transition: color 0.15s;
      }
      .assumptions-summary:hover { color: var(--text-primary); }
      .assumptions-summary::-webkit-details-marker { display: none; }
      .assumptions-summary::before {
        content: "+";
        font-family: var(--font-mono); font-size: 14px; font-weight: 400;
        width: 12px; text-align: center;
        transition: transform 0.2s;
      }
      .assumptions-details[open] .assumptions-summary::before {
        content: "−";
      }
      .assumptions-body {
        margin-top: 10px;
        padding-top: 4px;
      }

      /* ============================================================
         PROJECT ECONOMICS (PRODUCT PAGES)
         ============================================================ */

      .economics-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1.4fr;
        gap: 16px;
        margin-top: 8px;
      }
      .econ-card {
        padding: 24px 28px;
        background: var(--bg-card);
        border: 0.5px solid var(--border);
        border-radius: 4px;
      }
      .econ-card.hero {
        background: var(--accent-bg);
        border: 1px solid var(--accent-fg);
      }
      .profit-positive { color: var(--accent-fg); }
      .profit-negative { color: #B23A1F; }
      body.theme-c4 .profit-positive { color: var(--accent-fg); }
      body.theme-c4 .profit-negative { color: #B23A1F; }

      .input-num {
        background: transparent; border: 0.5px solid var(--border);
        border-radius: 2px; padding: 3px 6px;
        font-family: var(--font-mono); font-size: 13px; font-weight: 500;
        color: var(--text-primary);
        width: 80px; text-align: right;
      }
      .input-num-sm { width: 65px; }
      .input-num:focus { outline: none; border-color: var(--accent-fg); background: var(--bg); }

      /* Callout */
      .callout {
        margin-top: 16px;
        padding: 24px 32px;
        background: var(--bg-card);
        border-left: 2px solid var(--accent-strong);
        border-radius: 0 4px 4px 0;
      }
      .callout-title {
        font-family: var(--font-mono); font-size: 10px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--accent-strong);
        margin-bottom: 10px;
      }
      .callout-formula {
        font-family: var(--font-display); font-size: 22px;
        font-style: italic; font-weight: 400;
        font-variation-settings: "SOFT" 80, "opsz" 24;
        color: var(--text-primary);
        margin-bottom: 10px;
        letter-spacing: -0.01em;
      }
      .callout-explain { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

      /* ============================================================
         CTA / LEAD FORM (BOTTOM)
         ============================================================ */

      section.lead {
        padding: 100px 32px;
        background: var(--bg-dark);
        color: var(--text-inverted);
      }
      .lead-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
      .lead-title {
        font-family: var(--font-display);
        font-weight: 350;
        font-variation-settings: "SOFT" 100, "opsz" 96;
        font-size: clamp(36px, 5vw, 64px);
        line-height: 0.95; letter-spacing: -0.03em;
        margin-bottom: 24px;
      }
      .lead-title em {
        font-style: italic;
        color: var(--hero-orange);
      }
      body.theme-c4 .lead-title em { color: #1A1A1A; }
      .lead-text {
        font-size: 16px;
        color: rgba(242, 238, 230, 0.7);
        line-height: 1.55;
        margin-bottom: 36px;
      }
      .lead-meta {
        font-family: var(--font-mono); font-size: 12px;
        color: rgba(242, 238, 230, 0.5);
        line-height: 1.8;
      }
      .lead-meta strong { color: var(--text-inverted); font-weight: 500; }

      .lead-form {
        display: flex; flex-direction: column; gap: 16px;
      }
      .lead-form-row {
        display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
      }
      .lead-form label {
        display: block;
        font-family: var(--font-mono); font-size: 10px; font-weight: 500;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: rgba(242, 238, 230, 0.6);
        margin-bottom: 6px;
      }
      .lead-form input,
      .lead-form select,
      .lead-form textarea {
        width: 100%;
        background: rgba(242, 238, 230, 0.05);
        border: 0.5px solid rgba(242, 238, 230, 0.2);
        border-radius: 2px;
        padding: 12px 14px;
        color: var(--text-inverted);
        font-family: var(--font-body); font-size: 14px;
        transition: border-color 0.2s, background 0.2s;
      }
      .lead-form input:focus,
      .lead-form select:focus,
      .lead-form textarea:focus {
        outline: none;
        border-color: var(--text-inverted);
        background: rgba(242, 238, 230, 0.08);
      }
      .lead-form textarea { resize: vertical; min-height: 80px; }

      .btn {
        display: inline-flex; align-items: center; gap: 10px; justify-content: center;
        padding: 14px 28px;
        font-family: var(--font-body); font-size: 14px; font-weight: 500;
        text-decoration: none; border-radius: 2px;
        transition: all 0.2s; cursor: pointer; border: none;
      }
      .btn.primary {
        background: var(--text-inverted); color: var(--bg-dark);
      }
      .btn.primary:hover { background: var(--hero-orange); color: var(--text-inverted); }
      body.theme-c4 .btn.primary:hover { background: #1A1A1A; color: var(--bg-dark); }

      .lead-success {
        padding: 16px 18px;
        background: rgba(159, 225, 203, 0.12);
        border: 0.5px solid rgba(159, 225, 203, 0.4);
        border-radius: 2px;
        color: #D2D2C9;
        font-size: 14px;
        display: none;
      }
      .lead-success.shown { display: block; }

      /* ============================================================
         FOOTER
         ============================================================ */

      footer.site {
        padding: 36px 32px 28px;
        background: var(--bg-dark);
        color: rgba(242, 238, 230, 0.5);
        border-top: 0.5px solid rgba(242, 238, 230, 0.1);
      }
      .footer-inner {
        max-width: 1280px; margin: 0 auto;
        display: flex; justify-content: space-between; align-items: center;
        flex-wrap: wrap; gap: 16px;
      }
      .footer-inner .logo { color: var(--text-inverted); }
      .footer-meta {
        font-family: var(--font-mono); font-size: 11px;
      }

      /* ============================================================
         RESPONSIVE
         ============================================================ */

      @media (max-width: 980px) {
        .lead-inner { grid-template-columns: 1fr; gap: 40px; }
      }

      @media (max-width: 880px) {
        .section-header { grid-template-columns: 1fr; gap: 16px; }
        .spec-grid { grid-template-columns: 1fr; }
        .product-cards { grid-template-columns: 1fr; }
        .headline-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
        .headline-item {
          padding: 12px 8px; border: none;
          border-bottom: 0.5px solid var(--border);
        }
        .headline-item:nth-child(odd) { border-right: 0.5px solid var(--border); }
        .how-grid { grid-template-columns: 1fr; }
        .segment-grid { grid-template-columns: 1fr 1fr; }
        .segment-grid-tight { grid-template-columns: 1fr 1fr; }
        .product-cards-tight { grid-template-columns: 1fr; }
        .choose-panel { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
        .economics-grid { grid-template-columns: 1fr; }
        .thesis-grid { grid-template-columns: 1fr; gap: 24px; }
        .thesis-section { padding: 60px 24px; }
        .thesis-centered { padding: 80px 24px; }
        .closing-cta { padding: 100px 24px; }
        .cycle-header { grid-template-columns: 1fr; gap: 16px; align-items: start; }
        .cycle-section { padding: 60px 24px; }
        .cycle-bullets { grid-template-columns: 1fr; }
        .cycle-frame iframe { height: 480px; }
        .how-step { min-height: auto; }
        .hero-meta { gap: 24px; }
        nav.main { display: none; }
        section.hero { padding: 60px 24px 50px; }
        section.content { padding: 60px 24px; }
        section.lead { padding: 80px 24px; }
        header.site { padding: 14px 24px; }
        .config-row { grid-template-columns: 1fr; gap: 18px; }
      }

      @media (max-width: 600px) {
        .spec-row { flex-direction: column; align-items: flex-start; gap: 4px; }
        .spec-hero { padding: 24px; }
        .spec-block { padding: 20px; }
        .product-card { padding: 28px 24px; min-height: auto; }
        .product-card-tight { padding: 28px 24px; min-height: auto; }
        .lead-form-row { grid-template-columns: 1fr; }
        .segment-grid { grid-template-columns: 1fr; }
        .segment-grid-tight { grid-template-columns: 1fr; }
      }

      /* ============================================================
         INTRO ANIMATIONS
         ============================================================ */

      @media (prefers-reduced-motion: no-preference) {
        .hero-eyebrow, .hero-title, .hero-lede, .hero-meta,
        .product-card, .how-step {
          opacity: 0; animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .hero-eyebrow { animation-delay: 0.05s; }
        .hero-title { animation-delay: 0.15s; }
        .hero-lede { animation-delay: 0.35s; }
        .hero-meta { animation-delay: 0.5s; }
        .product-card:nth-child(1) { animation-delay: 0.65s; }
        .product-card:nth-child(2) { animation-delay: 0.78s; }
        .how-step:nth-child(1) { animation-delay: 0.2s; }
        .how-step:nth-child(2) { animation-delay: 0.32s; }
        .how-step:nth-child(3) { animation-delay: 0.44s; }
        .how-step:nth-child(4) { animation-delay: 0.56s; }
        @keyframes rise {
          from { opacity: 0; transform: translateY(16px); }
          to { opacity: 1; transform: translateY(0); }
        }
      }

      /* ============================================================
         PLATFORM OVERVIEW — interactive widget shown on the home page
         between the "What's changed" and "The products" sections.
         All styles scoped under .platform-overview so they don't leak.
         ============================================================ */

      .platform-overview {
        max-width: 960px;
        margin: 0 auto;
        padding-top: 8px;
      }

      .platform-overview svg {
        display: block;
        width: 100%;
        height: auto;
        max-height: 580px;
      }

      .platform-overview .el {
        transition: opacity 0.7s ease;
        opacity: 0;
      }
      .platform-overview .el.visible   { opacity: 1; }
      .platform-overview .el.dim       { opacity: 0.18 !important; }
      .platform-overview .el.highlight { opacity: 1 !important; }

      /* Closed-loop frame: continuously flowing dashes + breathing amber halo */
      .platform-overview .frame-flow {
        animation: po-frame-dash 9s linear infinite;
      }
      @keyframes po-frame-dash {
        to { stroke-dashoffset: -64; }
      }
      .platform-overview .frame-glow {
        filter: blur(7px);
        animation: po-frame-pulse 3.6s ease-in-out infinite;
      }
      @keyframes po-frame-pulse {
        0%, 100% { opacity: 0; }
        50%      { opacity: 0.5; }
      }
      .platform-overview .frame-spark {
        transform-box: fill-box;
        transform-origin: center;
        animation: po-spark 1.6s ease-out infinite;
        opacity: 0;
      }
      @keyframes po-spark {
        0%   { opacity: 0;    transform: scale(0.4); }
        20%  { opacity: 0.85; transform: scale(1);   }
        60%  { opacity: 0;    transform: scale(2.4); }
        100% { opacity: 0;    transform: scale(2.4); }
      }

      /* Mode prompt + toggle buttons */
      .platform-overview .mode-prompt {
        text-align: center;
        font-family: var(--font-mono);
        font-size: 11px; font-weight: 500;
        color: var(--text-tertiary);
        letter-spacing: 0.16em;
        margin-top: 24px;
        margin-bottom: 14px;
        transition: opacity 0.7s ease;
        opacity: 0;
      }
      .platform-overview .mode-prompt.visible { opacity: 1; }

      .platform-overview .mode-toggle {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 8px;
        transition: opacity 0.7s ease, transform 0.7s ease;
        opacity: 0;
        transform: translateY(8px);
      }
      .platform-overview .mode-toggle.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .platform-overview .mode-btn {
        padding: 10px 20px;
        border: 1px solid var(--border);
        border-radius: 22px;
        background: var(--bg-card);
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: 11px; font-weight: 500;
        letter-spacing: 0.12em;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .platform-overview .mode-btn:hover:not(.active) {
        border-color: var(--accent);
        color: var(--accent);
      }
      .platform-overview .mode-btn.active {
        background: var(--accent-soft);
        color: var(--accent);
        border-color: var(--accent);
      }

      /* Step-walkthrough panel (revealed after a mode is picked) */
      .platform-overview .panel {
        margin-top: 18px;
        transition: opacity 0.7s ease, max-height 0.8s ease;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
      }
      .platform-overview .panel.visible {
        opacity: 1;
        max-height: 500px;
      }

      .platform-overview .step-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 14px;
      }
      .platform-overview .step-btn {
        padding: 7px 14px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--bg-card);
        color: var(--text-secondary);
        font-family: var(--font-body);
        font-size: 12px;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .platform-overview .step-btn:hover:not(.active) {
        border-color: var(--accent);
        color: var(--accent);
      }
      .platform-overview .step-btn.active {
        background: var(--accent);
        color: var(--bg-card);
        border-color: var(--accent);
      }

      .platform-overview .caption-card {
        background: var(--bg-card);
        border-left: 3px solid var(--accent);
        border-radius: 6px;
        padding: 16px 20px;
        font-size: 14px;
        line-height: 1.65;
        color: var(--text-secondary);
        min-height: 80px;
      }
      .platform-overview .caption-title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 17px;
        color: var(--text-primary);
        margin-bottom: 6px;
      }

      .platform-overview .replay-link {
        display: inline-block;
        margin-top: 14px;
        font-family: var(--font-body);
        font-size: 12px;
        color: var(--text-tertiary);
        cursor: pointer;
        text-decoration: underline;
        transition: color 0.15s ease;
      }
      .platform-overview .replay-link:hover { color: var(--accent); }

      /* Mobile tightening — fit diagram to screen, no horizontal scroll */
      @media (max-width: 700px) {
        .platform-overview { overflow-x: hidden; }
        .platform-overview svg { width: 100%; min-width: 0; max-height: none; }
        .platform-overview .mode-btn { padding: 9px 14px; font-size: 10px; }
        .platform-overview .step-btn { font-size: 11px; padding: 6px 11px; }
      }

      /* ============================================================
         THEME: SpiralWave display typography
         All major headings rendered in heavy italic uppercase to match
         the deck. Appended at the end so it overrides anything above.
         font-variation-settings rules elsewhere are no-ops against
         Archivo Black (not a variable font) so they're safely ignored.
         ============================================================ */

      .hero-title,
      .section-title,
      .thesis-title,
      .thesis-centered h2,
      .section-header-tight h2,
      .closing-cta h2,
      .lead-title,
      .cycle-title,
      .product-card-tight .pcard-name,
      .product-intro-name,
      .spec-hero-name,
      .section-header h2,
      h1, h2, h3 {
        text-transform: uppercase;
        font-style: italic;
        letter-spacing: -0.005em;       /* slight optical tightening */
        font-feature-settings: "ss01";  /* archivo's stylistic alternates if available */
      }

      /* Inline em accent inside headings — drop the redundant italic (parent is
         already italic) and lean on the mint accent color for emphasis. */
      .hero-title em,
      .section-title em,
      .thesis-title em,
      .thesis-centered h2 em,
      .section-header-tight h2 em,
      .lead-title em,
      .cycle-title em,
      .product-card-tight .pcard-name em,
      .product-intro-name em,
      .section-header h2 em {
        font-style: italic;
        color: var(--accent-strong);
      }

      .closing-cta h2 em {
        font-style: italic;
        color: inherit;
        opacity: 1;
      }

      /* The intro/lede paragraph sits below headings in many sections — keep it
         in body sans, NOT all-caps, so the contrast against the heading is clear. */
      .hero-lede,
      .thesis-centered .body p,
      .section-header-tight .intro,
      .section-header .section-intro,
      .cycle-intro {
        text-transform: none;
        font-style: normal;
        font-family: var(--font-body);
      }
    
/* Ensure spiralwave page background applies even with Tailwind preflight */
body:has(#spiralwave-root) { background: #E8E8E0 !important; color: #1A1A1A !important; font-family: var(--font-body); }