/* ============================================================
   PRMPT design system, extracted from index.html inline styles.
   Loaded after assets/tailwind.css so intentional overrides of
   utility classes (.mb-14, .text-lg, section.py-24 …) keep winning.
   ============================================================ */

      /* ----------------------------------------------------------------
         DESIGN TOKENS
         Flip the whole palette by changing --accent (and --accent-ink).
         Pink (default, Axis-family but distinct):  #F0356E
         PRMPT green (one-line swap):                #00C864 / ink #06251A
      ---------------------------------------------------------------- */
      :root {
        --bg:          #FBFBFA;
        --surface:     #FFFFFF;
        --ink:         #0B0B0F;
        --ink-soft:    #3B3B45;
        --muted:       #565D6B;   /* ≥6:1 on --bg, small mono labels must clear WCAG AA */
        --line:        rgba(11, 11, 15, 0.08);
        --line-strong: rgba(11, 11, 15, 0.14);

        --accent:      #F0356E;        /* the single brand accent  */
        --accent-ink:  #FFFFFF;        /* text that sits on accent */
        --accent-soft: rgba(240, 53, 110, 0.10);
        --accent-glow: rgba(240, 53, 110, 0.28);

        --night:       #07070A;        /* dark signature sections  */

        --card-hi:     rgba(255,255,255,0.60);
        --shadow:      rgba(11,11,15,0.28);
        --nav-bg:      rgba(251,251,250,0.72);
      }

      /* Dark theme, hand-tuned, not a raw invert. */
      [data-theme="dark"] {
        --bg:          #0A0A0F;
        --surface:     #141420;
        --ink:         #F5F5F8;
        --ink-soft:    #C6C6D4;
        --muted:       #8B8B9A;
        --line:        rgba(255,255,255,0.09);
        --line-strong: rgba(255,255,255,0.16);

        --accent:      #F0356E;
        --accent-ink:  #FFFFFF;
        --accent-soft: rgba(240, 53, 110, 0.16);
        --accent-glow: rgba(240, 53, 110, 0.40);

        --night:       #050508;
        --card-hi:     rgba(255,255,255,0.05);
        --shadow:      rgba(0,0,0,0.55);
        --nav-bg:      rgba(10,10,15,0.72);
      }

      html, body { background: var(--bg); color: var(--ink); }
      html { transition: background .25s ease; }
      body { transition: background .25s ease, color .25s ease; }

      /* Mobile hardening + multi-view */
      html, body { overflow-x: clip; max-width: 100%; }
      .nav { box-shadow: 0 1px 0 var(--line); }
      [hidden] { display: none !important; }
      .display, .h2, h1, h2, h3 { overflow-wrap: break-word; }
      img, iframe, video, audio, canvas, svg { max-width: 100%; }
      .wrap { width: 100%; }
      @media (max-width: 640px) {
        .btn-accent, .btn-ghost { padding: .8rem 1.2rem; font-size: .92rem; }
        section.py-24 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
      }
      /* Tighter vertical rhythm + larger body copy (headers unchanged) */
      @media (min-width: 641px) { section.py-24 { padding-top: 3.5rem; padding-bottom: 3.5rem; } }
      .hero > .wrap { padding-top: 3rem; padding-bottom: 2.25rem; }
      .mb-14 { margin-bottom: 2.25rem; }
      .mb-12 { margin-bottom: 1.9rem; }
      .mt-14 { margin-top: 2.5rem; }
      .text-lg { font-size: 1.28rem; line-height: 1.62; }
      .faq-a p { font-size: 1.08rem; line-height: 1.65; }
      .pillar p { font-size: 1.05rem; line-height: 1.55; }
      .pillar h3 { font-size: 1.24rem; }
      .diff-them p, .diff-us p { font-size: 1.14rem; }

      /* Schematic diagrams, hand-drawn inline SVG in the token palette */
      .diagram-frame { background: var(--night); border: 1px solid rgba(255,255,255,0.08);
        border-radius: 22px; padding: 10px; max-width: 1000px; margin-inline: auto;
        box-shadow: 0 30px 80px -40px var(--shadow); }
      .diagram-frame svg { width: 100%; height: auto; display: block; border-radius: 14px; }
      .dg-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; letter-spacing: -.02em; fill: #fff; }
      .dg-sub { font-family: "Plus Jakarta Sans", sans-serif; fill: #C6C6D4; }
      .dg-mono { font-family: "JetBrains Mono", monospace; fill: #8B8B9A; }
      .dg-mono-hi { font-family: "JetBrains Mono", monospace; fill: var(--accent); font-weight: 700; }
      .dg-mono-ink { font-family: "JetBrains Mono", monospace; fill: #EAEAF0; font-weight: 600; }
      .dg-hair { stroke: rgba(255,255,255,0.14); fill: none; }
      .dg-line { stroke: var(--accent); fill: none; }
      .dg-line-dim { stroke: rgba(255,255,255,0.22); fill: none; }
      body { font-family: "Plus Jakarta Sans", sans-serif; -webkit-font-smoothing: antialiased; }

      ::selection { background: var(--accent); color: var(--accent-ink); }

      .wrap { max-width: 1180px; margin-inline: auto; }

      /* Type ---------------------------------------------------------- */
      .display {
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 0.98;
        font-size: clamp(2.6rem, 6vw, 5rem);
      }
      .h2 {
        font-weight: 700;
        letter-spacing: -0.025em;
        line-height: 1.02;
        font-size: clamp(2rem, 4vw, 3.4rem);
      }
      .eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.72rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--muted);
      }

      /* Buttons ------------------------------------------------------- */
      .btn-accent {
        background: var(--accent);
        color: var(--accent-ink);
        border: 1px solid transparent;
        border-radius: 999px;
        padding: 0.85rem 1.5rem;
        font-weight: 600;
        font-size: 0.95rem;
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        box-shadow: 0 10px 30px -10px var(--accent-glow);
      }
      .btn-accent:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 16px 40px -12px var(--accent-glow); }
      /* Outlined accent (Build-a-Bot): same font/size/height as Demo, pink text + frame */
      .btn-build { background: transparent; color: var(--accent); border-color: var(--accent); box-shadow: none; }
      .btn-build:hover { background: var(--accent-soft); color: var(--accent); filter: none; box-shadow: none; }

      .btn-ghost {
        border: 1px solid var(--line-strong);
        color: var(--ink);
        border-radius: 999px;
        padding: 0.85rem 1.5rem;
        font-weight: 600;
        font-size: 0.95rem;
        background: var(--surface);
        transition: border-color .18s ease, transform .18s ease;
      }
      .btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }

      /* Nav ----------------------------------------------------------- */
      .nav {
        position: sticky; top: 0; z-index: 50;
        background: var(--nav-bg);
        backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid var(--line);
        transition: background .25s ease, border-color .25s ease;
      }
      #brand { transition: font-size .12s ease-out; }
      .theme-toggle {
        width: 40px; height: 40px; border-radius: 999px;
        border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
        display: inline-flex; align-items: center; justify-content: center;
        transition: border-color .15s ease, transform .15s ease, background .25s ease;
      }
      .theme-toggle:hover { border-color: var(--ink); transform: translateY(-1px); }
      .ic-sun { display: none; }
      [data-theme="dark"] .ic-sun { display: block; }
      [data-theme="dark"] .ic-moon { display: none; }
      #audio-toggle .ic-audio-on { display: none; }
      #audio-toggle.playing .ic-audio-on { display: block; }
      #audio-toggle.playing .ic-audio-off { display: none; }
      #audio-toggle.playing { color: var(--accent); border-color: var(--accent); }
      /* invite shimmer, pulses while music is OFF to hint it can be turned on */
      #audio-toggle.invite { animation: audio-invite 2.6s ease-in-out; }
      @keyframes audio-invite {
        0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--line-strong); color: var(--ink); }
        50%      { box-shadow: 0 0 0 5px var(--accent-soft), 0 6px 20px -6px var(--accent-glow); border-color: var(--accent); color: var(--accent); }
      }

      /* Full nav, desktop links (exact original order) + migrated PWA glyphs */
      .navlinks { display: none; }
      @media (min-width: 1024px) { .navlinks { display: flex; align-items: center; gap: 1.3rem; } }
      .navlink { color: var(--ink-soft); font-size: .85rem; font-weight: 500; white-space: nowrap; position: relative; transition: color .15s ease; }
      .navlink:hover { color: var(--ink); }
      .navlink.active { color: var(--accent); }
      .navlink.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--accent); }

      .btn-sm { padding: .55rem 1.05rem; font-size: .82rem; box-shadow: none; }

      .mobile-strip { display: flex; align-items: center; gap: .1rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
      .mobile-strip::-webkit-scrollbar { display: none; }
      @media (min-width: 1024px) { .mobile-strip { display: none; } }
      .mnav { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .35rem .5rem; border-radius: 12px; color: var(--ink-soft); white-space: nowrap; transition: color .15s ease, background .15s ease; }
      .mnav:hover { background: var(--surface); }
      .mnav.active { color: var(--accent); }
      .mnav-glyph { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
      .mnav span { font-size: .58rem; font-weight: 600; letter-spacing: .02em; }
      .nav a.link { color: var(--ink-soft); font-size: .9rem; font-weight: 500; transition: color .15s ease; }
      .nav a.link:hover { color: var(--ink); }

      /* Hero ornaments ------------------------------------------------ */
      .hero { position: relative; overflow: hidden; }
      .grid-faint {
        position:absolute; inset:0; pointer-events:none; opacity:.5;
        background-image:
          linear-gradient(var(--line) 1px, transparent 1px),
          linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 46px 46px;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
      }
      /* Living Mesh, rotating node constellation behind the hero copy */
      .hero-mesh {
        position: absolute; inset: 0; width: 100%; height: 100%;
        z-index: 1; pointer-events: none;
        opacity: 0; transition: opacity 1.2s ease;
        -webkit-mask-image: radial-gradient(92% 100% at 98% 42%, #000 44%, transparent 88%);
        mask-image: radial-gradient(92% 100% at 98% 42%, #000 44%, transparent 88%);
      }
      .hero-mesh.ready { opacity: 1; }
      /* mobile: cluster sits left-of-centre (see JS), so recentre its mask too */
      @media (max-width: 640px) {
        .hero-mesh {
          -webkit-mask-image: radial-gradient(120% 72% at 52% 40%, #000 42%, transparent 86%);
          mask-image: radial-gradient(120% 72% at 52% 40%, #000 42%, transparent 86%);
        }
      }
      .hero > .wrap { position: relative; z-index: 2; }

      .card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 22px;
        box-shadow: 0 1px 0 var(--card-hi) inset, 0 24px 60px -34px var(--shadow);
      }

      .pill-tag {
        display:inline-flex; align-items:center; gap:.5rem;
        font-family:"JetBrains Mono", monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
        color: var(--ink-soft);
        border:1px solid var(--line-strong); border-radius:999px; padding:.3rem .7rem; background:var(--surface);
      }
      .hero-kicker {
        font-size: clamp(.82rem, 1.15vw, 1rem);
        letter-spacing: .16em;
        padding: .48rem .9rem;
      }
      .dot { width:.45rem; height:.45rem; border-radius:999px; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }

      /* Showcase tabs ------------------------------------------------- */
      .tab {
        text-align:left; width:100%; padding:1.05rem 1.1rem; border-radius:16px;
        border:1px solid transparent; transition: background .2s ease, border-color .2s ease;
        cursor:pointer;
      }
      .tab:hover { background: var(--surface); }
      .tab[aria-selected="true"] { background: var(--surface); border-color: var(--line); box-shadow: 0 16px 40px -30px var(--shadow); }
      .tab .tab-title { font-weight:600; font-size:1.02rem; letter-spacing:-0.01em; }
      .tab .tab-sub { color: var(--muted); font-size:.88rem; margin-top:.15rem; }
      .tab-rail { width:3px; border-radius:999px; background:var(--line); position:relative; overflow:hidden; }
      .tab-rail i { position:absolute; inset:0 0 auto 0; height:0%; background:var(--accent); transition:height .15s linear; }
      .tab[aria-selected="true"] .tab-rail { background: var(--accent-soft); }

      .panel { display:none; }
      .panel.is-active { display:block; animation: fade .4s ease both; }
      @keyframes fade { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform:none } }

      .kv { display:flex; flex-direction:column; gap:.2rem; }
      .kv .k { font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
      .kv .v { font-weight:600; }

      .chip { display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .62rem; border-radius:999px; background:var(--bg); border:1px solid var(--line); font-size:.8rem; font-weight:500; }
      .chip.loc::before { content:""; width:.7rem; height:.7rem; border-radius:999px; background:var(--accent); opacity:.85; }

      /* Night / signature -------------------------------------------- */
      .night { background: var(--night); color: #EAEAF0; }
      .night .h2 { color:#fff; }
      [data-theme="dark"] .night { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
      .constellation {
        position:relative; height:340px; border-radius:22px; overflow:hidden;
        background:
          radial-gradient(60% 80% at 50% 30%, rgba(240,53,110,0.16), transparent 60%),
          linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
          #050507;
        background-size: auto, 30px 30px, 30px 30px, auto;
        border:1px solid rgba(255,255,255,0.08);
      }
      .node { position:absolute; width:9px; height:9px; border-radius:999px; background:var(--accent); box-shadow:0 0 18px var(--accent-glow); }
      .node.dim { background:#7c7c90; box-shadow:none; opacity:.6; }

      .marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
      .marquee-track { display:inline-flex; gap:.7rem; white-space:nowrap; will-change:transform; animation: slide 38s linear infinite; }
      @keyframes slide { from{transform:translateX(0)} to{transform:translateX(-50%)} }
      .marquee-track.rev { animation-direction: reverse; }
      .marquee-track.slow { animation-duration: 64s; }
      /* Continuous keyframes stop burning CPU while their section is scrolled
         off-screen, an IntersectionObserver toggles .anim-paused (same idea
         as the hero-stats reveal pause). */
      .anim-paused .marquee-track,
      .anim-paused .founder-map,
      .anim-paused .founder-map path,
      .anim-paused .founder-node,
      .anim-paused .founder-node.active::after,
      .anim-paused .founder-label { animation-play-state: paused; }
      .mq-item { border:1px solid var(--line-strong); border-radius:999px; padding:.5rem 1rem; font-size:.85rem; font-weight:500; color:var(--ink-soft); background:var(--surface); transition: transform .4s cubic-bezier(.34,1.56,.64,1), color .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease; }
      .mq-item.mq-pop { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); transform: scale(1.14); box-shadow: 0 10px 26px -10px var(--accent-glow); }

      .footer-cta {
        border-radius:28px; padding: clamp(2.5rem,5vw,4.5rem);
        background:
          radial-gradient(60% 120% at 80% 0%, var(--accent-glow), transparent 60%),
          var(--night);
        color:#fff;
      }

      /* ---- Overview components ---- */
      .pillar { display:flex; flex-direction:column; justify-content:space-between; min-height:260px; transition: transform .2s ease, border-color .2s ease; }
      .pillar:hover { transform: translateY(-3px); border-color: var(--line-strong); }
      .cap-id { font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
      .capx h3 { font-size:1.02rem; font-weight:700; letter-spacing:-.01em; margin-top:.75rem; }
      .capx p { color:var(--ink-soft); font-size:.88rem; line-height:1.55; margin-top:.45rem; }
      .pillar h3 { font-size:1.18rem; font-weight:700; letter-spacing:-.01em; margin-top:.9rem; }
      .pillar p { color:var(--ink-soft); font-size:.92rem; line-height:1.55; margin-top:.55rem; }
      .cap-foot { margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--line); font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.05em; color:var(--accent); }

      .founder-grid {
        display: grid;
        grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr);
        gap: clamp(2.4rem, 7vw, 6rem);
        align-items: center;
      }
      .founder-copy {
        max-width: 48rem;
        margin-left: auto;
      }
      .founder-visual {
        position: relative;
        min-height: 360px;
        overflow: hidden;
        color: var(--accent);
        -webkit-mask-image:
          linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
          linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
          linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
          linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
        mask-composite: intersect;
      }
      .founder-map {
        position: absolute;
        inset: 4% 0;
        width: 100%;
        height: 92%;
        opacity: .52;
        animation: founder-map-drift 22s ease-in-out infinite;
      }
      .founder-map path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.1;
        stroke-opacity: .22;
        stroke-linecap: round;
        stroke-dasharray: 5 10;
        animation: founder-line-pulse 7.5s ease-in-out infinite;
      }
      .founder-map path:nth-child(2n) { animation-delay: 1.4s; }
      .founder-map path:nth-child(3n) { animation-delay: 2.7s; }
      .founder-node,
      .founder-label {
        position: absolute;
        left: var(--x);
        top: var(--y);
      }
      .founder-node {
        width: var(--s, 8px);
        height: var(--s, 8px);
        border-radius: 999px;
        transform: translate(-50%, -50%);
        background: #9aa0b0;
        box-shadow: 0 0 18px rgba(154,160,176,.32);
        opacity: .48;
        animation: founder-node-float 8.5s ease-in-out infinite;
      }
      .founder-node.active {
        background: var(--accent);
        box-shadow: 0 0 28px var(--accent-glow);
        opacity: .9;
      }
      .founder-node.active::after {
        content: "";
        position: absolute;
        inset: -9px;
        border: 1px solid var(--accent);
        border-radius: inherit;
        opacity: .36;
        animation: founder-node-ring 4.8s ease-in-out infinite;
      }
      .founder-node:nth-of-type(2n) { animation-delay: 1.1s; }
      .founder-node:nth-of-type(3n) { animation-delay: 2.2s; }
      .founder-node:nth-of-type(5n) { animation-delay: 3.4s; }
      .founder-label {
        transform: translate(-50%, -50%);
        font-family: "JetBrains Mono", monospace;
        font-size: .62rem;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--ink-soft);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: .35rem .65rem;
        background: color-mix(in srgb, var(--surface) 78%, transparent);
        box-shadow: 0 18px 46px -34px var(--shadow);
        white-space: nowrap;
        animation: founder-label-breathe 10s ease-in-out infinite;
      }
      .founder-label strong {
        color: var(--accent);
        font-weight: 700;
      }
      .founder-label:nth-of-type(2n) { animation-delay: 2s; }
      .founder-label:nth-of-type(3n) { animation-delay: 4s; }
      @keyframes founder-map-drift {
        0%, 100% { transform: translate3d(0,0,0) scale(1); }
        50% { transform: translate3d(14px,-10px,0) scale(1.02); }
      }
      @keyframes founder-line-pulse {
        0%, 100% { stroke-opacity: .12; }
        50% { stroke-opacity: .36; }
      }
      @keyframes founder-node-float {
        0%, 100% { transform: translate(-50%, -50%) scale(.9); }
        50% { transform: translate(calc(-50% + 6px), calc(-50% - 7px)) scale(1.12); }
      }
      @keyframes founder-node-ring {
        0%, 100% { transform: scale(.78); opacity: .12; }
        50% { transform: scale(1.2); opacity: .38; }
      }
      @keyframes founder-label-breathe {
        0%, 100% { opacity: .62; transform: translate(-50%, -50%); }
        50% { opacity: .92; transform: translate(calc(-50% + 4px), calc(-50% - 5px)); }
      }
      @media (max-width: 900px) {
        .founder-grid { grid-template-columns: 1fr; gap: 2rem; }
        .founder-copy { order: 1; max-width: none; margin-left: 0; }
        .founder-visual { order: 2; min-height: 220px; }
      }
      @media (max-width: 640px) {
        .founder-visual {
          min-height: 180px;
          margin-inline: -1rem;
        }
        .founder-label { display: none; }
      }
      @media (prefers-reduced-motion: reduce) {
        .founder-map,
        .founder-map path,
        .founder-node,
        .founder-node.active::after,
        .founder-label {
          animation: none !important;
        }
      }

      .diff-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.6rem; padding:1.6rem 0; border-top:1px solid var(--line); }
      .diff-label { font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.35rem; }
      .diff-them p { color:var(--muted); margin:0; font-size:1rem; }
      .diff-us p { color:var(--ink); margin:0; font-size:1.04rem; }
      .diff-hi { color:var(--accent); }
      .diff-arrow { color:var(--accent); font-size:1.15rem; }
      .diff-tag { position:absolute; transform:translateY(-1.7rem); font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
      @media (max-width:640px){ .diff-row{ grid-template-columns:1fr; gap:.6rem; } .diff-arrow{ display:none; } }

      .relationship-stack {
        position: relative;
        overflow: hidden;
        border-color: var(--line);
      }
      .relationship-stack::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(70% 90% at 18% 18%, var(--accent-soft), transparent 64%),
          linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
        background-size: auto, 44px 44px, 44px 44px;
        opacity: .75;
      }
      [data-theme="dark"] .relationship-stack::before { opacity: .95; }
      .relationship-stack > .wrap { position: relative; z-index: 2; }
      .relationship-constellation {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .46;
        -webkit-mask-image: radial-gradient(88% 84% at 32% 42%, #000 28%, transparent 78%);
        mask-image: radial-gradient(88% 84% at 32% 42%, #000 28%, transparent 78%);
        animation: relationship-field-drift 24s ease-in-out infinite;
      }
      .relationship-constellation i,
      .relationship-constellation b {
        position: absolute;
        display: block;
      }
      .relationship-constellation i {
        width: 7px;
        height: 7px;
        left: var(--x);
        top: var(--y);
        border-radius: 999px;
        background: #9aa0b0;
        box-shadow: 0 0 14px rgba(154,160,176,.34);
        opacity: .48;
        animation: relationship-node-pulse 7s ease-in-out infinite;
      }
      .relationship-constellation i.active {
        width: 9px;
        height: 9px;
        background: var(--accent);
        box-shadow: 0 0 22px var(--accent-glow);
        opacity: .8;
        animation-duration: 5.2s;
      }
      .relationship-constellation i:nth-of-type(2n) { animation-delay: 1.3s; }
      .relationship-constellation i:nth-of-type(3n) { animation-delay: 2.5s; }
      .relationship-constellation i:nth-of-type(5n) { animation-delay: 3.4s; }
      .relationship-constellation b {
        width: var(--w);
        left: var(--x);
        top: var(--y);
        height: 1px;
        background: rgba(154,160,176,.2);
        transform: rotate(var(--r));
        transform-origin: left center;
        animation: relationship-line-pulse 8s ease-in-out infinite;
      }
      .relationship-constellation b:nth-of-type(2n) { animation-delay: 1.9s; }
      .relationship-constellation b:nth-of-type(3n) { animation-delay: 3.1s; }
      .relationship-stack-card {
        position: relative;
        overflow: hidden;
      }
      .relationship-stack-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        background: var(--accent);
        opacity: .62;
      }
      .relationship-stack-card h3 {
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: -.01em;
      }
      .relationship-stack-card p {
        margin-top: .45rem;
        color: var(--ink-soft);
        line-height: 1.58;
      }
      @keyframes relationship-field-drift {
        0%, 100% { transform: translate3d(0,0,0) scale(1); }
        50% { transform: translate3d(16px,-10px,0) scale(1.015); }
      }
      @keyframes relationship-node-pulse {
        0%, 100% { transform: translate(-50%,-50%) scale(.86); opacity: .35; }
        50% { transform: translate(calc(-50% + 5px), calc(-50% - 6px)) scale(1.12); opacity: .78; }
      }
      @keyframes relationship-line-pulse {
        0%, 100% { opacity: .16; }
        50% { opacity: .42; }
      }
      @media (prefers-reduced-motion: reduce) {
        .relationship-constellation,
        .relationship-constellation i,
        .relationship-constellation b {
          animation: none !important;
        }
      }

      .pipe-tab { font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:.4rem .75rem; border-radius:999px; border:1px solid var(--line-strong); color:var(--ink-soft); cursor:pointer; transition:all .15s ease; }
      .pipe-tab.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
      .console { background:var(--night); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; font-family:"JetBrains Mono",monospace; font-size:.74rem; line-height:1.75; height:300px; overflow:auto; color:#cfd0da; }
      .console .a { color:var(--accent); font-weight:600; }
      .console .d { color:#8b8b9a; }
      .console .b { color:#eaeaf0; }
      .gauge-track { height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
      .gauge-fill { height:100%; background:var(--accent); transition:width .4s ease; }
      .vbars { display:flex; align-items:center; gap:3px; height:32px; }
      .vbars i { width:4px; border-radius:2px; background:var(--accent); animation:vpulse 1s ease-in-out infinite; }
      @keyframes vpulse { 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(1) } }
      .barge { display:flex; align-items:flex-end; gap:5px; height:46px; }
      .barge i { width:4px; border-radius:999px; background:var(--accent); animation:bpulse 1.2s ease-in-out infinite; }
      @keyframes bpulse { 0%,100%{ opacity:.4 } 50%{ opacity:1 } }

      .faq-item { border-top:1px solid var(--line); }
      .faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left; padding:1.25rem 0; font-weight:600; font-size:1rem; color:var(--ink); cursor:pointer; background:none; border:none; }
      .faq-q:hover { color:var(--accent); }
      .faq-q .num { font-family:"JetBrains Mono",monospace; font-size:.7rem; color:var(--muted); margin-right:.65rem; }
      .faq-ico { color:var(--accent); font-size:1.25rem; transition:transform .2s ease; flex-shrink:0; line-height:1; }
      .faq-item.open .faq-ico { transform:rotate(45deg); }
      .faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
      .faq-a p { color:var(--ink-soft); line-height:1.65; padding:0 0 1.35rem 2.1rem; max-width:64ch; }

      .field { width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:12px; padding:.85rem 1rem; font-size:.92rem; color:var(--ink); font-family:inherit; transition:border-color .15s ease; }
      .field:focus { outline:none; border-color:var(--accent); }
      .field::placeholder { color:var(--muted); }
      .flabel { font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

      /* Mimi concierge, tracks light/dark through the theme tokens */
      elevenlabs-convai {
        --el-base: var(--surface);
        --el-base-hover: var(--accent-soft);
        --el-base-active: var(--accent-soft);
        --el-base-border: var(--line-strong);
        --el-base-subtle: var(--muted);
        --el-base-primary: var(--ink);
        --el-base-error: #ff5470;
        --el-accent: var(--accent);
        --el-accent-hover: var(--accent);
        --el-accent-active: var(--accent);
        --el-accent-border: var(--accent);
        --el-accent-subtle: var(--accent-soft);
        --el-accent-primary: var(--accent-ink);
        --el-button-radius: 999px;
        --el-input-radius: 12px;
        --el-sheet-radius: 18px;
        --el-compact-sheet-radius: 18px;
        --el-dropdown-sheet-radius: 10px;
        color-scheme: light;
      }
      [data-theme="dark"] elevenlabs-convai { color-scheme: dark; }
      /* Mimi stays hidden behind the intro gate, only appears once you're in */
      html.intro-active elevenlabs-convai,
      html.intro-active #mimi-hint { display: none !important; }
      /* language discoverability hint (revealed on first interaction) */
      .mimi-hint {
        position: fixed; right: 20px; bottom: 168px; z-index: 70; max-width: 248px;
        padding: .6rem .8rem; border-radius: 13px; font-size: .82rem; line-height: 1.35;
        background: var(--surface); color: var(--ink); border: 1px solid var(--accent);
        box-shadow: 0 16px 40px -14px var(--shadow);
        opacity: 0; transform: translateY(8px); pointer-events: none;
        transition: opacity .28s ease, transform .28s ease;
      }
      .mimi-hint.show { opacity: 1; transform: translateY(0); }
      .mimi-hint-globe { color: var(--accent); }

      /* Intro signal gate (password) + hold-music toggle */
      .intro-gate { position: fixed; inset: 0; z-index: 200; background: var(--bg);
        display: flex; align-items: center; justify-content: center; padding: 1.5rem;
        transition: opacity .55s ease, visibility .55s ease; }
      .intro-gate.dismissed { opacity: 0; visibility: hidden; pointer-events: none; }
      .intro-card { width: 100%; max-width: 760px; min-height: 56vh; border: 1px solid var(--line);
        border-radius: 24px; background: radial-gradient(60% 80% at 50% 28%, var(--accent-soft), transparent 60%), var(--surface);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
        padding: 2.5rem 1.5rem; box-shadow: 0 30px 80px -40px var(--shadow); }
      .intro-word { font-family: "JetBrains Mono", monospace; font-weight: 800; letter-spacing: -.03em;
        font-size: clamp(2.6rem, 9vw, 5rem); color: var(--ink); line-height: 1; }
      /* Reserve the finished width so the card never shifts while the
         wordmark types: "> prmpt" is 7ch of mono plus the cursor. */
      .iw-fix { display: inline-block; text-align: left; min-width: 7.7ch; }
      .intro-cursor { display: inline-block; width: 1ch; height: 1.02em; background: var(--accent);
        vertical-align: -0.16em; margin-left: 0.06em; animation: ic-blink 1.05s steps(1) infinite; }
      @keyframes ic-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
      .intro-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
      .intro-input { max-width: 260px; text-align: center; letter-spacing: .3em; text-transform: uppercase; font-family: "JetBrains Mono", monospace; }
      .intro-row { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; }
      .intro-status { min-height: 1.2rem; font-family: "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
      .intro-status.ok { color: var(--accent); }
      .intro-status.err { color: #ff5470; }

      .audio-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: .5rem;
        padding: .5rem .8rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
        font-family: "JetBrains Mono", monospace; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
        box-shadow: 0 8px 24px -14px var(--shadow); transition: color .15s ease, border-color .15s ease, background .25s ease; }
      .audio-toggle:hover, .audio-toggle.playing { color: var(--accent); border-color: var(--accent); }
      .audio-toggle svg { width: 14px; height: 14px; }
      @media (prefers-reduced-motion: reduce) { .intro-cursor { animation: none; } }

      /* Utility classes, repeated inline-style patterns promoted to the
         design system (systems pass). */
      .t-ink { color: var(--ink); }
      .t-soft { color: var(--ink-soft); }
      .t-muted { color: var(--muted); }
      .t-accent { color: var(--accent); }
      .prose-soft { color: var(--ink-soft); line-height: 1.7; }
      .hairline-b { border-bottom: 1px solid var(--line); }
      .edge-accent { border-left: 2px solid var(--accent); padding-left: 1rem; }
      .card-title { font-weight: 700; letter-spacing: -.01em; font-size: 1.1rem; }
      .card-title-lg { font-weight: 700; letter-spacing: -.01em; font-size: 1.15rem; }
      .stat-num { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--accent); line-height: 1; }
      .brand-dot { width: .5em; height: .5em; border-radius: .18em; background: var(--accent); display: inline-block; }
      .win-dot { width: 11px; height: 11px; border-radius: 999px; display: inline-block; }
      .mono-sub { font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--ink-soft); }
      .wrap-760 { max-width: 760px; margin-inline: auto; }
      .wrap-840 { max-width: 840px; margin-inline: auto; }
      .wrap-1000 { max-width: 1000px; }


/* ==== Sovereignty view (scoped) ==== */
  /* Psychological State Matrix */
  .sov-node-stage {
    height: 100%;
    min-height: 360px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  .sov-node-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
    width: 100%;
  }
  @media (min-width: 480px) { .sov-node-grid { grid-template-columns: repeat(3, 1fr); } }
  .sov-node {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: .9rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
    text-align: left;
  }
  .sov-node:hover, .sov-node:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
  .sov-node.sov-active { border-color: var(--accent); background: var(--accent-soft); }
  .sov-node--lg { grid-column: span 2; }
  @media (min-width: 480px) { .sov-node--lg { grid-column: auto; } }
  .sov-node-dot {
    width: .9rem; height: .9rem; border-radius: 999px; display: block;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
  }
  .sov-dot-accent { background: var(--accent); box-shadow: 0 0 12px 1px var(--accent); }
  .sov-dot-indigo { background: #818cf8; box-shadow: 0 0 12px 1px rgba(129,140,248,.6); }
  .sov-dot-indigo-soft { background: #a5b4fc; }
  .sov-dot-white { background: #fff; }
  .sov-dot-emerald { background: #34d399; box-shadow: 0 0 12px 1px rgba(52,211,153,.5); }
  .sov-node-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: .64rem;
    letter-spacing: .02em;
    color: #b9b9c6;
    white-space: nowrap;
  }

  /* Console readout */
  .sov-console {
    height: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    background: rgba(0,0,0,0.35);
    padding: 1.4rem;
    font-family: 'JetBrains Mono', monospace;
  }
  .sov-console-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: .65rem; margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    gap: .75rem;
  }
  .sov-console-title { color: var(--accent); font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
  .sov-console-ts { color: #8a8a98; font-size: .66rem; white-space: nowrap; }
  .sov-console-body { flex: 1; }
  .sov-console-h { color: #f4f4f5; font-weight: 700; font-size: .78rem; margin-bottom: .55rem; }
  .sov-console-p { color: #c8c8d4; font-size: .78rem; line-height: 1.6; }
  .sov-console-meta {
    color: #8a8a98; font-size: .7rem; line-height: 1.6;
    margin-top: .85rem; padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .sov-console-class { font-weight: 700; margin-bottom: .4rem; font-size: .72rem; }
  .sov-console-foot {
    display: flex; justify-content: space-between;
    color: #6b6b78; font-size: .64rem;
    padding-top: .85rem; margin-top: .85rem;
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .sov-console-trace { color: var(--accent); font-size: .7rem; margin-top: .75rem; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,0.10); }

  /* ACD sliders */
  .sov-slider-row { display: block; }
  .sov-slider-head {
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace; font-size: .76rem;
    color: var(--ink); margin-bottom: .55rem;
  }
  .sov-slider-val { color: var(--accent); font-weight: 700; }
  .sov-slider-note { font-size: .72rem; color: var(--ink-soft); margin-top: .5rem; }
  .sov-range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 999px;
    background: var(--line-strong); outline: none; cursor: pointer;
  }
  .sov-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 999px;
    background: var(--accent); border: 2px solid var(--surface);
    box-shadow: 0 2px 8px -2px var(--accent);
  }
  .sov-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 999px;
    background: var(--accent); border: 2px solid var(--surface);
  }

  /* Telemetry */
  .sov-telemetry {
    display: grid; grid-template-columns: 1fr; gap: 1.25rem;
    margin-top: 1.75rem; padding: 1.1rem 1.2rem;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg);
    font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  }
  @media (min-width: 640px) { .sov-telemetry { grid-template-columns: 1fr 1fr; } }
  .sov-telemetry-label { color: var(--muted); text-transform: uppercase; font-size: .6rem; letter-spacing: .08em; margin-bottom: .55rem; }
  .sov-telemetry-line { color: var(--ink-soft); line-height: 1.7; }
  .sov-tel-accent { color: var(--accent); font-weight: 700; }
  .sov-tel-ink { color: var(--ink); }
  .sov-tel-warn { color: #d4a000; font-weight: 700; }
  .sov-tel-alert { color: #e02447; font-weight: 700; }

  /* Spec list */
  .sov-spec-list > div { padding: .85rem 0; border-top: 1px solid var(--line); }
  .sov-spec-list > div:first-child { border-top: none; padding-top: 0; }
  .sov-spec-list dt {
    font-family: 'JetBrains Mono', monospace; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--accent); font-weight: 700; margin-bottom: .35rem;
  }
  .sov-spec-list dd { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin: 0; }

/* ==== Protos view (scoped) ==== */
  /* shimmering hint line */
  .pro-hint {
    background-image: linear-gradient(100deg, #C6C6D4 0%, #C6C6D4 42%, #ffffff 49%, var(--accent) 53%, #C6C6D4 60%, #C6C6D4 100%);
    background-size: 230% 100%; background-position: 130% 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .pro-hint.shimmer { animation: pro-hint-shimmer 2.2s ease-in-out; }
  @keyframes pro-hint-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }

  /* domain controls */
  .pro-domains { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:2.5rem 0 1.75rem; }
  .pro-domain {
    font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.04em;
    padding:.4rem .85rem; border-radius:999px; cursor:pointer;
    border:1px solid rgba(255,255,255,0.14); color:#C6C6D4;
    background:rgba(255,255,255,0.03); transition:all .15s ease;
  }
  .pro-domain:hover { border-color:var(--accent); color:#fff; }
  .pro-domain-active { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

  /* constellation panel */
  .pro-sky {
    position:relative; min-height:clamp(480px, 58vh, 640px); border-radius:22px;
    border:1px solid rgba(255,255,255,0.08); overflow:hidden;
    background:
      radial-gradient(60% 90% at 50% 18%, var(--accent-glow), transparent 62%),
      radial-gradient(45% 70% at 82% 88%, rgba(240,53,110,0.10), transparent 60%),
      linear-gradient(transparent 95%, rgba(255,255,255,0.05) 95%) 0 0 / 100% 38px,
      linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.05) 95%) 0 0 / 38px 100%,
      #0a0a0f;
  }
  .protos-mesh { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;
    opacity:0; transition:opacity 1.1s ease; }
  .protos-mesh.ready { opacity:1; }
  .protos-tip {
    position:absolute; z-index:3; pointer-events:none; max-width:248px;
    padding:.5rem .7rem; border-radius:11px; transform:translate(-50%,-122%);
    background:rgba(8,8,14,0.88); border:1px solid var(--accent); color:#fff;
    font-size:.78rem; line-height:1.32; letter-spacing:.01em;
    box-shadow:0 14px 34px -12px rgba(240,53,110,0.55);
    opacity:0; transition:opacity .14s ease; }
  .protos-tip.show { opacity:1; }
  .pro-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .pro-lines line { stroke:rgba(240,53,110,0.22); stroke-width:1; animation: pro-line-pulse 4.6s ease-in-out infinite; }
  .pro-lines line:nth-child(2n) { animation-delay: 1.1s; }
  .pro-lines line:nth-child(3n) { animation-delay: 2.3s; }
  .pro-lines line:nth-child(4n) { animation-delay: 3.0s; }
  .pro-node {
    position:absolute; width:11px; height:11px; border-radius:999px;
    transform:translate(-50%,-50%);
    background:var(--accent); box-shadow:0 0 18px var(--accent);
    animation: pro-twinkle 3.4s ease-in-out infinite, pro-drift-a 13s ease-in-out infinite;
  }
  .pro-node.pro-dim { background:#7c7c90; box-shadow:none; opacity:.55; width:8px; height:8px;
    animation: pro-twinkle 5s ease-in-out infinite, pro-drift-b 17s ease-in-out infinite; }
  .pro-node:nth-child(3n)  { animation-delay: .6s, .4s; }
  .pro-node:nth-child(4n)  { animation-delay: 1.3s, 1.6s; }
  .pro-node:nth-child(5n)  { animation-delay: 2.1s, 2.9s; }
  .pro-node:nth-child(7n)  { animation-duration: 3.4s, 19s; }
  @keyframes pro-twinkle {
    0%,100% { opacity:.55; }
    50%     { opacity:1; }
  }
  /* gentle drift so the constellation feels alive (centering offset preserved) */
  @keyframes pro-drift-a {
    0%,100% { transform: translate(-50%,-50%); }
    33%     { transform: translate(calc(-50% + 8px), calc(-50% - 10px)); }
    66%     { transform: translate(calc(-50% - 7px), calc(-50% + 7px)); }
  }
  @keyframes pro-drift-b {
    0%,100% { transform: translate(-50%,-50%); }
    50%     { transform: translate(calc(-50% - 10px), calc(-50% - 8px)); }
  }
  @keyframes pro-line-pulse {
    0%,100% { stroke: rgba(240,53,110,0.10); }
    50%     { stroke: rgba(240,53,110,0.42); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pro-node, .pro-lines line { animation: none !important; }
  }

  .pro-status {
    display:inline-flex; align-items:center; gap:.4rem;
    font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.03em;
    padding:.4rem .8rem; border-radius:999px;
    border:1px solid rgba(255,255,255,0.12); color:#C6C6D4;
    background:rgba(255,255,255,0.03);
  }
  .pro-status strong { color:var(--accent); }

  /* taxonomy themes */
  .pro-theme { margin-bottom:2.5rem; }
  .pro-theme:last-child { margin-bottom:0; }
  .pro-theme-head {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding-bottom:.9rem; margin-bottom:1.25rem;
    border-bottom:1px solid var(--line);
  }
  .pro-theme-head-feature { align-items:flex-end; }
  @media (max-width:640px) {
    .pro-theme-head-feature { flex-direction:column; align-items:flex-start; gap:.75rem; }
  }
  .pro-theme-title { font-weight:700; letter-spacing:-.01em; font-size:1.3rem; }
  .pro-theme-feature {
    border:1px solid var(--accent-soft); border-radius:18px; padding:1.5rem;
    background:var(--accent-soft);
  }
  .pro-theme-feature .pro-theme-head { border-bottom-color:var(--line-strong); }

  .pro-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }

  /* cta */
  .pro-cta { text-align:center; max-width:640px; margin-inline:auto; }

/* ==== A/V: The Shore transcript (scoped) ==== */
  .shore-caption { border:1px solid var(--line); border-radius:14px; background:var(--bg);
    padding:.85rem 1.05rem; margin-bottom:1rem; min-height:5.4rem;
    display:flex; flex-direction:column; justify-content:center; gap:.18rem;
    font-family:'JetBrains Mono', monospace; }
  .shore-cap-head { display:flex; align-items:center; gap:.45rem; font-size:.62rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; }
  .shore-cap-dot { width:.45rem; height:.45rem; border-radius:999px; background:var(--muted); transition:background .2s ease; }
  .shore-caption.live .shore-cap-dot { background:var(--accent); animation:shore-pulse 1.3s ease-in-out infinite; }
  @keyframes shore-pulse { 0%,100% { box-shadow:0 0 0 0 var(--accent-soft); } 50% { box-shadow:0 0 0 5px transparent; } }
  .shore-cap-prev, .shore-cap-next { font-size:.8rem; line-height:1.35; color:var(--muted); opacity:.5; }
  .shore-cap-now { font-size:1.02rem; line-height:1.5; color:var(--ink-soft); transition:color .25s ease; min-height:1.5rem; }
  .shore-caption.live .shore-cap-now { color:var(--ink); }
  @media (max-width:640px) { .shore-cap-prev, .shore-cap-next { display:none; } .shore-caption { min-height:3.6rem; } }

/* ==== A/V view (scoped) ==== */
  .av-frame {
    position: relative;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--line);
  }
  .av-frame iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; border-radius: 12px;
  }

  .av-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
  }
  @media (min-width: 640px) {
    .av-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .av-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  audio { color-scheme: light dark; }

/* ==== Hero stat strip (scoped) ==== */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line-strong);
    border: 1px solid var(--line-strong);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 60px -30px rgba(0,0,0,.45);
  }
  @media (min-width: 768px) {
    .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .stat-cell {
    position: relative;
    background: var(--surface);
    padding: 1.6rem 1.5rem 1.5rem;
    transition: background .25s ease;
  }
  .stat-cell::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.22,.9,.3,1);
  }
  .stat-cell:hover::before { transform: scaleX(1); }
  .stat-cell:hover { background: color-mix(in srgb, var(--surface) 92%, var(--accent)); }
  .stat-value {
    font-size: clamp(2.1rem, 3.2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .stat-value .stat-suffix { color: var(--accent); font-weight: 800; }
  .stat-cell .eyebrow { transition: color .25s ease; }
  .stat-cell:hover .eyebrow { color: var(--accent); }
  .stat-bar {
    display: block;
    margin-top: .9rem;
    height: 3px;
    border-radius: 3px;
    background: var(--accent-soft);
    overflow: hidden;
    position: relative;
  }
  .stat-bar::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
  }
  .hero-stats.stats-live .stat-bar::after {
    animation: stat-fill 1.1s cubic-bezier(.22,.9,.3,1) forwards;
    animation-delay: var(--stat-delay, 0s);
  }
  @keyframes stat-fill { to { transform: scaleX(var(--stat-fill, 1)); } }
  @media (prefers-reduced-motion: reduce) {
    .hero-stats.stats-live .stat-bar::after { animation: none; transform: scaleX(var(--stat-fill, 1)); }
    .stat-cell, .stat-cell::before, .stat-cell .eyebrow { transition: none; }
  }

/* ==== Total Perception: animated diagram (scoped) ==== */
  #total-perception .tp-fade {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--tp-delay, 0s);
  }
  #total-perception .tp-live .tp-fade { opacity: 1; transform: none; }

  #total-perception .tp-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: opacity .3s ease, stroke-width .3s ease;
  }
  #total-perception .tp-live .tp-path {
    animation: tp-draw 1.1s cubic-bezier(.4,0,.2,1) forwards;
    animation-delay: var(--tp-delay, 0s);
  }
  @keyframes tp-draw { to { stroke-dashoffset: 0; } }

  #total-perception .tp-pulse {
    fill: var(--accent);
    opacity: 0;
    transition: opacity .4s ease;
  }
  #total-perception .tp-live .tp-pulse { opacity: 1; transition-delay: 1.2s; }

  #total-perception .tp-node {
    fill: var(--accent);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .25s ease;
  }
  #total-perception .tp-live .tp-node { animation: tp-node-ring 3.2s ease-in-out infinite; animation-delay: var(--tp-delay, 0s); }
  @keyframes tp-node-ring {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(240,53,110,0)); }
    50% { filter: drop-shadow(0 0 6px rgba(240,53,110,.8)); }
  }

  #total-perception .tp-core-box {
    animation: tp-core-breathe 4s ease-in-out infinite;
  }
  @keyframes tp-core-breathe {
    0%, 100% { fill: rgba(240,53,110,0.08); stroke-opacity: .75; }
    50% { fill: rgba(240,53,110,0.17); stroke-opacity: 1; }
  }

  /* Hover: focus one input, dim the rest, energize its line */
  #total-perception .tp-input { cursor: default; }
  #total-perception .tp-input > * { transition: opacity .3s ease; }
  #total-perception .tp-live .tp-input:hover .tp-path {
    stroke-width: 3.25;
    opacity: 1 !important;
    filter: drop-shadow(0 0 5px rgba(240,53,110,.65));
  }
  #total-perception .tp-live .tp-input:hover .tp-node { transform: scale(1.5); }
  #total-perception .tp-live .tp-input:hover .tp-label { fill: var(--accent); }
  #total-perception svg:has(.tp-input:hover) .tp-input:not(:hover) > * { opacity: .25; }
  #total-perception svg:has(.tp-input:hover) .tp-core-box {
    animation-duration: 1.6s;
  }
  #total-perception .tp-label { transition: fill .25s ease; }

  @media (prefers-reduced-motion: reduce) {
    #total-perception .tp-fade { opacity: 1; transform: none; transition: none; }
    #total-perception .tp-path { stroke-dashoffset: 0; animation: none !important; }
    #total-perception .tp-pulse { display: none; }
    #total-perception .tp-node, #total-perception .tp-core-box { animation: none !important; }
  }

/* ==== Resilient Delivery: animated diagram (scoped) ==== */
  #flow .rd-fade {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--rd-delay, 0s);
  }
  #flow .rd-live .rd-fade { opacity: 1; transform: none; }

  #flow .rd-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  #flow .rd-live .rd-path {
    animation: rd-draw 1s cubic-bezier(.4,0,.2,1) forwards;
    animation-delay: var(--rd-delay, 0s);
  }
  /* degraded segment keeps its dash pattern, it fades in instead of drawing */
  #flow .rd-path-degraded { stroke-dashoffset: 0; stroke-dasharray: 4 7; opacity: 0; }
  #flow .rd-live .rd-path-degraded {
    animation: rd-appear .6s ease forwards;
    animation-delay: var(--rd-delay, 0s);
  }
  @keyframes rd-draw { to { stroke-dashoffset: 0; } }
  @keyframes rd-appear { to { opacity: 1; } }

  #flow .rd-x { opacity: 0; transform-box: fill-box; transform-origin: center; }
  #flow .rd-live .rd-x {
    animation: rd-x-flash .9s cubic-bezier(.22,.9,.3,1) forwards, rd-x-throb 3.4s ease-in-out 2s infinite;
    animation-delay: var(--rd-delay, 0s);
  }
  @keyframes rd-x-flash {
    0% { opacity: 0; transform: scale(.2); }
    35% { opacity: 1; transform: scale(1.7); }
    55% { opacity: .4; transform: scale(1.1); }
    72% { opacity: 1; transform: scale(1.35); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes rd-x-throb { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

  #flow .rd-pulse { fill: var(--accent); opacity: 0; transition: opacity .4s ease; }
  #flow .rd-live .rd-pulse { opacity: 1; transition-delay: 2s; }

  #flow .rd-node { transform-box: fill-box; transform-origin: center; }
  #flow .rd-live .rd-node { animation: tp-node-ring 3.2s ease-in-out infinite; animation-delay: var(--rd-delay, 0s); }

  @media (prefers-reduced-motion: reduce) {
    #flow .rd-fade { opacity: 1; transform: none; transition: none; }
    #flow .rd-path { stroke-dashoffset: 0; animation: none !important; }
    #flow .rd-path-degraded { opacity: 1; animation: none !important; }
    #flow .rd-x { opacity: 1; animation: none !important; }
    #flow .rd-pulse { display: none; }
    #flow .rd-node { animation: none !important; }
  }

/* ==== Barge-in band (scoped) ==== */
  .barge-band {
    position: relative;
    height: 130px;
    border: 1px solid var(--line-strong);
    border-radius: 1rem;
    background:
      linear-gradient(to right, transparent 0 calc(var(--barge-at, 38%) - .5px), var(--accent-soft) calc(var(--barge-at, 38%) - .5px) calc(var(--barge-at, 38%) + 14%), transparent calc(var(--barge-at, 38%) + 14%)),
      var(--surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 1.1rem 1.25rem;
  }
  .barge-band i {
    flex: 1 1 0;
    min-width: 2px;
    height: calc(var(--h, .4) * 100%);
    border-radius: 2px;
    background: var(--ink-soft);
    opacity: .38;
    transform: scaleY(0);
    transform-origin: center;
  }
  .barge-band i.hot { background: var(--accent); opacity: .95; }
  .barge-band.barge-live i {
    animation:
      barge-grow .5s cubic-bezier(.22,.9,.3,1) forwards,
      barge-sway 2.6s ease-in-out calc(.6s + var(--d, 0s)) infinite;
    animation-delay: var(--d, 0s), calc(.6s + var(--d, 0s));
  }
  @keyframes barge-grow { to { transform: scaleY(1); } }
  @keyframes barge-sway { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(var(--sway, .72)); } }
  .barge-marker {
    position: absolute;
    left: var(--bx, 38%);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--accent);
    opacity: 0;
    transition: opacity .5s ease .9s;
  }
  .barge-band.barge-live .barge-marker { opacity: .9; }
  .barge-marker span {
    position: absolute;
    top: 6px;
    left: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
  }
  .barge-marker.barge-marker-dim { background: var(--line-strong); }
  .barge-marker.barge-marker-dim span { color: var(--ink-soft); }
  @media (max-width: 640px) {
    .barge-band { height: 96px; padding: .8rem .9rem; }
    .barge-marker span { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .barge-band i { transform: scaleY(1); animation: none !important; }
    .barge-marker { opacity: .9; transition: none; }
  }

/* ==== Founder memory-graph: draw-in + density (scoped) ==== */
  .founder-map .fg-edge {
    stroke: currentColor;
    stroke-opacity: .3;
    stroke-width: 1;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: none;
  }
  .founder-map .fg-edge.fg-edge-hot { stroke: var(--accent); stroke-opacity: .5; }
  .fg-live .founder-map .fg-edge {
    animation: fg-draw .9s cubic-bezier(.4,0,.2,1) forwards;
    animation-delay: var(--fg-delay, 0s);
  }
  @keyframes fg-draw { to { stroke-dashoffset: 0; } }
  .founder-visual .founder-node { opacity: 0; }
  .fg-live .founder-node {
    animation:
      fg-pop .55s cubic-bezier(.22,1.2,.36,1) forwards,
      founder-node-float 8.5s ease-in-out calc(var(--fg-delay, 0s) + .55s) infinite;
    animation-delay: var(--fg-delay, 0s), calc(var(--fg-delay, 0s) + .55s);
  }
  .fg-live .founder-node.active { animation-name: fg-pop-active, founder-node-float; }
  @keyframes fg-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    70% { opacity: .48; transform: translate(-50%, -50%) scale(1.25); }
    100% { opacity: .48; transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes fg-pop-active {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    70% { opacity: .9; transform: translate(-50%, -50%) scale(1.3); }
    100% { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  }
  .founder-visual .founder-label {
    opacity: 0;
    animation: none;
    transition: opacity .8s ease;
    transition-delay: var(--fg-delay, 1.2s);
  }
  .fg-live .founder-label {
    opacity: .62;
    animation: founder-label-breathe 10s ease-in-out infinite;
    animation-delay: calc(var(--fg-delay, 1.2s) + .8s);
  }
  @media (prefers-reduced-motion: reduce) {
    .founder-map .fg-edge { stroke-dashoffset: 0; animation: none !important; }
    .founder-visual .founder-node { opacity: .48; animation: none !important; }
    .founder-visual .founder-node.active { opacity: .9; }
    .founder-visual .founder-label { opacity: 1; transition: none; }
  }

/* ==== A/V video poster (scoped) ==== */
  .av-poster-btn {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; padding: 0; cursor: pointer;
    background:
      radial-gradient(120% 90% at 70% 15%, rgba(240,53,110,.16), transparent 55%),
      linear-gradient(180deg, #0B0B12 0%, #050508 100%);
    color: #EAEAF0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.1rem;
  }
  .av-poster-btn::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 100%);
  }
  .av-play {
    position: relative;
    width: 74px; height: 74px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 18px 50px -12px var(--accent-glow);
    display: grid; place-items: center;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .av-play::after {
    content: "";
    width: 0; height: 0;
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent var(--accent-ink);
    margin-left: 5px;
  }
  .av-poster-btn:hover .av-play,
  .av-poster-btn:focus-visible .av-play { transform: scale(1.08); box-shadow: 0 22px 60px -12px var(--accent-glow); }
  .av-poster-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .av-poster-meta {
    position: relative;
    font-family: "JetBrains Mono", monospace;
    font-size: .68rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #8B8B9A;
  }
  @media (prefers-reduced-motion: reduce) { .av-play { transition: none; } }

/* ==== The Shore: custom audio player (scoped) ==== */
  .shore-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: .9rem;
    background: var(--surface);
  }
  .sp-btn {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 999px;
    border: 0; cursor: pointer;
    background: var(--accent);
    color: var(--accent-ink);
    display: grid; place-items: center;
    box-shadow: 0 10px 30px -10px var(--accent-glow);
    transition: transform .2s ease, filter .2s ease;
  }
  .sp-btn:hover { transform: scale(1.06); filter: brightness(1.05); }
  .sp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sp-btn svg { width: 18px; height: 18px; display: block; }
  .sp-btn .sp-ic-pause { display: none; }
  .shore-player.playing .sp-ic-play { display: none; }
  .shore-player.playing .sp-ic-pause { display: block; }
  .sp-time {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    min-width: 3.2rem;
    text-align: center;
  }
  .sp-seek {
    flex: 1 1 auto;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 7px;
    border-radius: 7px;
    background: linear-gradient(to right, var(--accent) calc(var(--p, 0) * 1%), var(--line-strong) calc(var(--p, 0) * 1%));
    cursor: pointer;
  }
  .sp-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 999px;
    background: var(--accent);
    border: 2px solid var(--accent-ink);
    box-shadow: 0 2px 10px -2px var(--accent-glow);
  }
  .sp-seek::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 999px;
    background: var(--accent);
    border: 2px solid var(--accent-ink);
    box-shadow: 0 2px 10px -2px var(--accent-glow);
  }
  .sp-seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  @media (max-width: 640px) {
    .shore-player { gap: .6rem; padding: .7rem .8rem; }
    .sp-time { min-width: 2.6rem; font-size: .7rem; }
  }
  @media (prefers-reduced-motion: reduce) { .sp-btn { transition: none; } }

/* ==== Grid repairs (scoped) ==== */
  /* Featured capabilities: 10 cards in a 4-col grid left a 2-card hole 
     the last two span wider so every row is full. */
  @media (min-width: 1024px) {
    .cap-featured-grid > .capx:nth-last-child(-n+2) { grid-column: span 2; }
  }
  /* Fleet taxonomy: rows with fewer cards than columns re-flow instead of
     leaving holes, 2-card themes get a 2-col row, single cards go full width. */
  @media (min-width: 1024px) {
    .pro-theme .grid:has(> .card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pro-theme .grid > .card:only-child {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
      column-gap: 2.5rem;
      align-items: start;
    }
    .pro-theme .grid > .card:only-child .card-body { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
    .pro-theme .grid > .card:only-child .pro-tags { grid-column: 1; align-self: end; }
  }

/* ==== Sovereignty visual anchors (scoped) ==== */
  .sov-anchor-quote {
    margin-top: 2rem;
    border-left: 3px solid var(--accent);
    padding: 1.25rem 1.5rem;
    background: var(--accent-soft);
    border-radius: 0 14px 14px 0;
    font-size: 1.05rem;
    line-height: 1.6;
  }
  .sov-anchor-diagram {
    margin-top: 2rem;
    border: 1px solid var(--line-strong);
    border-radius: 1rem;
    background: var(--surface);
    padding: 1rem;
  }
  .sov-anchor-diagram svg { width: 100%; height: auto; display: block; }

/* ==== Floating concierge clearance ==== */
  /* The Mimi widget floats fixed at bottom-right; extra footer depth lets the
     end of every page scroll clear so links and cards are never covered. */
  footer { padding-bottom: clamp(8rem, 14vh, 10.5rem) !important; }

/* ==== Psychological State Matrix: living constellation (scoped) ==== */
  .sov-matrix { position: relative; min-height: 460px; padding: 0; }
  .sov-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
  .sov-edge {
    stroke: rgba(255,255,255,.18);
    stroke-width: 1.2;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) var(--d, 0s), stroke .3s ease, stroke-width .3s ease;
  }
  .sov-live .sov-edge {
    stroke-dashoffset: 0;
    animation: sov-edge-breathe 5.5s ease-in-out infinite calc(var(--d, 0s) + 1.2s);
  }
  @keyframes sov-edge-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
  .sov-live .sov-edge.sov-edge-hot {
    animation: none;
    opacity: 1;
    stroke: var(--accent);
    stroke-width: 2;
  }
  .sov-matrix .sov-node {
    position: absolute;
    left: var(--nx); top: var(--ny);
    translate: -50% -50%;
    transform: none;
    display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
    padding: .8rem .95rem;
    border-radius: .8rem;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10,10,15,.74);
    backdrop-filter: blur(4px);
    cursor: pointer;
    z-index: 2;
    opacity: 0; scale: .6;
    transition:
      opacity .5s ease var(--pop, 0s),
      scale .5s cubic-bezier(.22,1.2,.36,1) var(--pop, 0s),
      border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .sov-live .sov-node { opacity: 1; scale: 1; }
  .sov-matrix .sov-node:hover,
  .sov-matrix .sov-node:focus-visible {
    border-color: var(--sov-c);
    box-shadow: 0 0 30px -6px var(--sov-c);
    scale: 1.07;
    z-index: 3;
    outline: none;
    transition-delay: 0s;
  }
  .sov-matrix .sov-node.sov-active {
    border-color: var(--sov-c);
    background: color-mix(in srgb, var(--sov-c) 14%, rgba(10,10,15,.8));
    box-shadow: 0 0 34px -6px var(--sov-c);
  }
  .sov-matrix:has(.sov-node:hover) .sov-node:not(:hover) { opacity: .5; }
  .sov-matrix .sov-node-dot {
    width: 10px; height: 10px; border-radius: 999px;
    background: var(--sov-c);
    animation: sov-dot-pulse var(--spd, 3s) ease-in-out infinite;
  }
  @keyframes sov-dot-pulse {
    0%, 100% { box-shadow: 0 0 5px var(--sov-c); }
    50% { box-shadow: 0 0 16px var(--sov-c); }
  }
  .sov-matrix .sov-node-id { color: #cfd0dc; }
  .sov-node-bar {
    width: 108px; height: 4px; border-radius: 4px;
    background: rgba(255,255,255,.1);
    overflow: hidden;
  }
  .sov-node-bar i {
    display: block; height: 100%; border-radius: 4px;
    background: var(--sov-c);
    transform-origin: left;
    transform: scaleX(var(--lv, .5));
    animation: sov-lv var(--spd, 3s) ease-in-out infinite alternate;
  }
  @keyframes sov-lv {
    from { transform: scaleX(calc(var(--lv, .5) * .72)); }
    to { transform: scaleX(min(calc(var(--lv, .5) * 1.25), 1)); }
  }
  @media (max-width: 640px) {
    .sov-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; min-height: 0; padding: 1rem; }
    .sov-matrix .sov-node { position: static; translate: 0 0; width: 100%; }
    .sov-node-bar { width: 100%; }
    .sov-edges { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sov-edge { stroke-dashoffset: 0; transition: none; animation: none !important; opacity: .7; }
    .sov-matrix .sov-node { opacity: 1; scale: 1; transition: none; }
    .sov-matrix .sov-node-dot, .sov-node-bar i { animation: none !important; }
  }

/* ==== Fleet Taxonomy: reveal + hover life (scoped) ==== */
  #protos-taxonomy .pro-theme-head {
    opacity: 0; translate: -16px 0;
    transition: opacity .55s ease, translate .55s cubic-bezier(.22,.9,.3,1);
  }
  #protos-taxonomy .pro-theme.in-view .pro-theme-head { opacity: 1; translate: 0 0; }
  #protos-taxonomy .pro-theme .grid > .card { opacity: 0; }
  #protos-taxonomy .pro-theme.in-view .grid > .card {
    animation: tax-in .6s cubic-bezier(.22,.9,.3,1) both;
    animation-delay: calc(var(--ti, 0) * .12s + .1s);
  }
  #protos-taxonomy .pro-theme .grid > .card:nth-child(1) { --ti: 0; }
  #protos-taxonomy .pro-theme .grid > .card:nth-child(2) { --ti: 1; }
  #protos-taxonomy .pro-theme .grid > .card:nth-child(3) { --ti: 2; }
  @keyframes tax-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
  }
  #protos-taxonomy .card {
    position: relative;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .3s ease, translate .25s ease;
  }
  #protos-taxonomy .card::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s cubic-bezier(.22,.9,.3,1);
  }
  #protos-taxonomy .card:hover::before { transform: scaleY(1); }
  #protos-taxonomy .card:hover {
    translate: 0 -4px;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
    box-shadow: 0 18px 44px -18px var(--accent-glow);
  }
  #protos-taxonomy .card .card-title { transition: color .25s ease; }
  #protos-taxonomy .card:hover .card-title { color: var(--accent); }
  #protos-taxonomy .card .pro-tags .chip { transition: border-color .25s ease; }
  #protos-taxonomy .card:hover .pro-tags .chip { border-color: var(--accent); }
  @media (prefers-reduced-motion: reduce) {
    #protos-taxonomy .pro-theme-head { opacity: 1; translate: 0 0; transition: none; }
    #protos-taxonomy .pro-theme .grid > .card { opacity: 1; animation: none !important; }
    #protos-taxonomy .card, #protos-taxonomy .card::before { transition: none; }
  }

/* ==== Founder graph: live simulation layer (scoped) ==== */
  .fg-js { cursor: crosshair; }
  .fg-js .founder-node { animation: none !important; opacity: .48; transition: box-shadow .3s ease; }
  .fg-js .founder-node.active { opacity: .9; }
  .fg-js .founder-map .fg-edge { display: none; }
  .fg-dynamic { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
  .fg-dynamic line { stroke: #8b8fa3; stroke-opacity: .26; }
  .fg-dynamic line.hot { stroke: var(--accent); stroke-opacity: .48; }
  .fg-dynamic circle { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); }
  .founder-node { z-index: 2; }
  .founder-node.fg-flash {
    box-shadow: 0 0 24px var(--accent-glow), 0 0 58px var(--accent-glow) !important;
  }
  .founder-node.fg-user {
    background: var(--accent);
    box-shadow: 0 0 22px var(--accent-glow);
  }
  .founder-label { pointer-events: none; z-index: 3; }
  .fg-hint {
    position: absolute; left: 5%; bottom: 3%;
    font-family: "JetBrains Mono", monospace;
    font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-soft); opacity: 0;
    transition: opacity 1s ease 1.6s;
    pointer-events: none; z-index: 3;
  }
  .fg-live .fg-hint { opacity: .75; }
  @media (max-width: 640px) { .fg-hint { display: none; } }

/* ==== Differentia facelift (scoped) ==== */
  #diff-rows .diff-row {
    position: relative;
    border-radius: .6rem;
    transition: background .3s ease;
  }
  #diff-rows .diff-row:hover {
    background: linear-gradient(90deg, transparent, var(--accent-soft) 52%, transparent);
  }
  #diff-rows .diff-them, #diff-rows .diff-us, #diff-rows .diff-arrow { opacity: 0; }
  #diff-rows .diff-row:nth-child(1) { --ri: 0; }
  #diff-rows .diff-row:nth-child(2) { --ri: 1; }
  #diff-rows .diff-row:nth-child(3) { --ri: 2; }
  #diff-rows .diff-row:nth-child(4) { --ri: 3; }
  #diff-rows .diff-row:nth-child(5) { --ri: 4; }
  #diff-rows .diff-row:nth-child(6) { --ri: 5; }
  #diff-rows.diff-live .diff-them {
    animation: diff-in-l .55s cubic-bezier(.22,.9,.3,1) both;
    animation-delay: calc(var(--ri, 0) * .12s);
  }
  #diff-rows.diff-live .diff-us {
    animation: diff-in-r .55s cubic-bezier(.22,.9,.3,1) both;
    animation-delay: calc(var(--ri, 0) * .12s + .1s);
  }
  #diff-rows.diff-live .diff-arrow {
    animation: diff-in-a .5s cubic-bezier(.22,1.4,.36,1) both;
    animation-delay: calc(var(--ri, 0) * .12s + .18s);
    transition: color .25s ease, translate .25s ease;
  }
  @keyframes diff-in-l { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
  @keyframes diff-in-r { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
  @keyframes diff-in-a { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
  /* hover interplay, filter/translate/color only, so entry animations never fight it */
  #diff-rows .diff-them { transition: filter .3s ease; }
  #diff-rows .diff-row:hover .diff-them { filter: brightness(.55); }
  #diff-rows .diff-row:hover .diff-arrow { color: var(--accent); translate: 5px 0; }
  #diff-rows .diff-hi { transition: text-shadow .3s ease; }
  #diff-rows .diff-row:hover .diff-hi { text-shadow: 0 0 18px var(--accent-glow); }

  /* relationship stack: cascade + spine pulse */
  #stack-cards { position: relative; }
  #stack-cards::before {
    content: "";
    position: absolute; left: -1.35rem; top: 8px; bottom: 8px; width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--line-strong), var(--accent), var(--line-strong));
    opacity: 0;
    transition: opacity .8s ease .5s;
  }
  #stack-cards.stack-live::before { opacity: .5; }
  #stack-cards::after {
    content: "";
    position: absolute; left: calc(-1.35rem - 3px); top: 0;
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
    opacity: 0;
  }
  #stack-cards.stack-live::after { animation: stack-pulse 6s linear infinite 1.4s; }
  @keyframes stack-pulse {
    0% { top: 1%; opacity: 0; }
    7% { opacity: 1; }
    92% { opacity: 1; }
    100% { top: 97%; opacity: 0; }
  }
  #stack-cards .relationship-stack-card { opacity: 0; }
  #stack-cards .relationship-stack-card:nth-child(1) { --si: 0; }
  #stack-cards .relationship-stack-card:nth-child(2) { --si: 1; }
  #stack-cards .relationship-stack-card:nth-child(3) { --si: 2; }
  #stack-cards .relationship-stack-card:nth-child(4) { --si: 3; }
  #stack-cards .relationship-stack-card:nth-child(5) { --si: 4; }
  #stack-cards .relationship-stack-card:nth-child(6) { --si: 5; }
  #stack-cards.stack-live .relationship-stack-card {
    animation: stack-in .55s cubic-bezier(.22,.9,.3,1) both;
    animation-delay: calc(var(--si, 0) * .11s);
  }
  @keyframes stack-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
  #stack-cards .relationship-stack-card { transition: translate .25s ease, border-color .25s ease, box-shadow .3s ease; }
  #stack-cards .relationship-stack-card h3 { transition: color .25s ease; }
  #stack-cards .relationship-stack-card:hover {
    translate: 8px 0;
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong));
    box-shadow: 0 14px 40px -18px var(--accent-glow);
  }
  #stack-cards .relationship-stack-card:hover h3 { color: var(--accent); }
  @media (prefers-reduced-motion: reduce) {
    #diff-rows .diff-them, #diff-rows .diff-us, #diff-rows .diff-arrow,
    #stack-cards .relationship-stack-card { opacity: 1; animation: none !important; }
    #diff-rows .diff-row, #diff-rows .diff-them, #diff-rows .diff-arrow, #diff-rows .diff-hi,
    #stack-cards .relationship-stack-card, #stack-cards .relationship-stack-card h3 { transition: none; }
    #stack-cards::before { opacity: .5; transition: none; }
    #stack-cards.stack-live::after { animation: none; }
  }

/* ==== State Matrix v2: instrument dials, signal traffic, radar sweep ==== */
  .sov-matrix { overflow: hidden; }
  .sov-matrix::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.035) 0 1px, transparent 1px 72px);
    pointer-events: none;
  }
  .sov-matrix::after {
    content: "";
    position: absolute; inset: -45%;
    background: conic-gradient(from 0deg, transparent 0 82%, rgba(240,53,110,.07) 93%, transparent 100%);
    opacity: 0;
    pointer-events: none;
  }
  .sov-matrix.sov-live::after { opacity: 1; animation: sov-sweep 16s linear infinite; }
  @keyframes sov-sweep { to { transform: rotate(1turn); } }
  .sov-edges { z-index: 1; }

  .sov-matrix .sov-node {
    flex-direction: row;
    align-items: center;
    gap: .7rem;
    padding: .6rem .9rem .6rem .6rem;
  }
  .sov-ring {
    position: relative;
    width: 42px; height: 42px; border-radius: 999px;
    flex: 0 0 auto;
    background: conic-gradient(var(--sov-c) calc(var(--val, var(--lv, .5)) * 360deg), rgba(255,255,255,.09) 0);
    transition: filter .25s ease;
  }
  .sov-ring i {
    position: absolute; inset: 5px;
    border-radius: 999px;
    background: #0d0d15;
    display: grid; place-items: center;
  }
  .sov-ring i::after {
    content: "";
    width: 10px; height: 10px; border-radius: 999px;
    background: var(--sov-c);
    box-shadow: 0 0 10px var(--sov-c);
    animation: sov-dot-pulse var(--spd, 3s) ease-in-out infinite;
  }
  .sov-matrix .sov-node:hover .sov-ring,
  .sov-matrix .sov-node.sov-active .sov-ring { filter: drop-shadow(0 0 10px var(--sov-c)); }
  .sov-meta { display: flex; flex-direction: column; align-items: flex-start; gap: .18rem; }
  .sov-val {
    font-family: "JetBrains Mono", monospace;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    color: var(--sov-c);
    font-variant-numeric: tabular-nums;
  }
  .sov-node.sov-flash .sov-ring { filter: drop-shadow(0 0 16px var(--sov-c)) brightness(1.3); }

  /* selected connections: marching signal toward the probed variable */
  .sov-live .sov-edge.sov-edge-hot {
    animation: sov-march 1.1s linear infinite;
    stroke-dasharray: .08 .06;
  }
  @keyframes sov-march { to { stroke-dashoffset: -.42; } }
  .sov-pulse-dot { fill: var(--accent); filter: drop-shadow(0 0 5px var(--accent-glow)); }

  /* console typewriter cursor */
  .sov-typing::after { content: "▌"; color: var(--accent); animation: ic-blink 1s step-end infinite; }

  @media (max-width: 640px) {
    .sov-matrix::before, .sov-matrix::after { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sov-matrix.sov-live::after { animation: none; opacity: 0; }
    .sov-ring i::after { animation: none !important; }
    .sov-live .sov-edge.sov-edge-hot { animation: none; stroke-dasharray: none; }
  }

/* ==== Shimmer line: bold gradient ink with a periodic sheen sweep ==== */
  .shimmer-line { font-weight: 700; color: var(--ink); }
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .shimmer-line {
      background: linear-gradient(105deg,
        var(--ink) 0%, var(--ink) 28%,
        var(--accent) 41%,
        color-mix(in srgb, var(--accent) 52%, #fff) 50%,
        var(--accent) 59%,
        var(--ink) 72%, var(--ink) 100%);
      background-size: 240% 100%;
      background-position: 120% 0;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: shimmer-sweep 7s cubic-bezier(.45,0,.2,1) infinite;
    }
  }
  @keyframes shimmer-sweep {
    0%, 42% { background-position: 135% 0; }
    82%, 100% { background-position: -75% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .shimmer-line { animation: none; background-position: 120% 0; }
  }

  /* ---- Capability surface (/capabilities) -------------------------------
     Generated list of every publishable capability, grouped by domain.
     Reuses the existing card, eyebrow and stat-num language; no new visual
     vocabulary. */
  .cap-surface-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) { .cap-surface-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1280px) { .cap-surface-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .cap-domain { align-self: start; }
  .cap-domain-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--line);
  }
  .cap-domain-name { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
  .cap-domain-count { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--accent); line-height: 1; }
  .cap-domain-list { margin-top: .9rem; display: flex; flex-direction: column; gap: .5rem; }
  .cap-line {
    color: var(--ink-soft);
    font-size: .86rem;
    line-height: 1.5;
    padding-left: .95rem;
    position: relative;
  }
  .cap-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--accent);
    opacity: .55;
  }

  /* ==== Protos taxonomy v2: domain-head language + drawn glyphs ========= */
  .pro2-head { display:flex; align-items:center; gap:.85rem; }
  .pro2-glyph { width:26px; height:26px; flex:none; fill:none; stroke:var(--accent);
    stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
  .pro2-kicker { font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--muted); margin-top:.15rem; }
  .pro2-count { margin-left:auto; font-size:1.6rem; font-weight:800; letter-spacing:-.02em;
    color:var(--accent); line-height:1; text-align:right; }
  .pro2-count small { font-size:.6rem; font-weight:600; letter-spacing:.14em; color:var(--muted);
    font-family:'JetBrains Mono',monospace; display:block; margin-top:.25rem; text-transform:uppercase; }
  .pro2-card .cap-id { margin-bottom:.55rem; }
  .pro2-card h4 { font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }
  .pro2-card p { color:var(--ink-soft); font-size:.88rem; line-height:1.55; margin-top:.45rem; }
  .chip2 { display:inline-flex; align-items:center; gap:.45rem; padding:.32rem .62rem;
    border-radius:8px; background:var(--bg); border:1px solid var(--line);
    font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.06em;
    transition:border-color .25s ease; }
  .chip2::before { content:""; width:5px; height:5px; border-radius:1px; background:var(--accent); opacity:.55; }
  #protos-taxonomy .card:hover .chip2 { border-color:var(--accent); }
  /* glyph draws itself in when its theme head reveals */
  #protos-taxonomy .pro2-glyph .gs { stroke-dasharray:1; stroke-dashoffset:1; }
  #protos-taxonomy .pro-theme.in-view .pro2-glyph .gs {
    animation: pro2-draw 1.1s cubic-bezier(.4,0,.2,1) forwards; animation-delay:.15s; }
  @keyframes pro2-draw { to { stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce) {
    #protos-taxonomy .pro2-glyph .gs { stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  }

  /* ==== Canvas view: live three-pane product sketch ====================== */
  .cv-frame { border:1px solid var(--line); border-radius:18px; background:var(--surface);
    padding:1rem; display:grid; grid-template-columns:1.15fr 1.5fr .9fr; gap:.8rem; min-height:320px; }
  @media (max-width:820px){ .cv-frame { grid-template-columns:1fr; min-height:0; } }
  .cv-pane { border:1px solid var(--line); border-radius:12px; background:var(--bg);
    padding:.85rem; display:flex; flex-direction:column; gap:.55rem;
    opacity:0; translate:0 14px; }
  .cv-live .cv-pane { animation: cv-rise .7s cubic-bezier(.22,.7,.3,1) forwards; }
  .cv-live .cv-p1 { animation-delay:.05s } .cv-live .cv-p2 { animation-delay:.2s } .cv-live .cv-p3 { animation-delay:.35s }
  @keyframes cv-rise { to { opacity:1; translate:0 0; } }
  .cv-pane-label { font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
  .cv-pane-label::before { content:""; width:5px; height:5px; border-radius:1px; background:var(--accent); }
  .cv-line { height:8px; border-radius:4px; background:var(--line); }
  .cv-line.w60{width:60%} .cv-line.w80{width:80%} .cv-line.w45{width:45%} .cv-line.w70{width:70%}
  .cv-bubble { border:1px solid var(--line); border-radius:10px; padding:.5rem .6rem;
    display:flex; flex-direction:column; gap:.35rem; opacity:0; translate:0 8px; }
  .cv-bubble.me { border-color:var(--accent-soft); background:var(--accent-soft); align-self:flex-end; width:78%; }
  .cv-live .cv-bubble { animation: cv-rise .5s ease forwards; }
  .cv-live .cv-b1 { animation-delay:.5s } .cv-live .cv-b2 { animation-delay:.9s } .cv-live .cv-b3 { animation-delay:1.3s }
  /* typing indicator swaps to settled lines */
  .cv-typing { display:flex; gap:.28rem; padding:.1rem 0; }
  .cv-typing span { width:6px; height:6px; border-radius:999px; background:var(--muted); opacity:.4; }
  .cv-live .cv-typing span { animation: cv-blink 1s ease-in-out infinite; }
  .cv-live .cv-typing span:nth-child(2){ animation-delay:.18s } .cv-live .cv-typing span:nth-child(3){ animation-delay:.36s }
  @keyframes cv-blink { 0%,100%{opacity:.25; translate:0 0} 50%{opacity:.9; translate:0 -2px} }
  .cv-b3 .cv-swap { display:none; }
  .cv-live .cv-b3 .cv-typing { animation: cv-hide 0s linear 2.6s forwards; }
  .cv-live .cv-b3 .cv-swap { display:block; opacity:0; animation: cv-rise .45s ease forwards; animation-delay:2.65s; }
  @keyframes cv-hide { to { display:none; opacity:0; height:0; padding:0; } }
  .cv-doc { flex:1; border:1px dashed var(--line-strong); border-radius:10px; padding:.7rem;
    display:flex; flex-direction:column; gap:.45rem; position:relative; }
  .cv-doc .cv-line { background:var(--line-strong); opacity:.55; }
  .cv-doc .cv-write { width:0; }
  .cv-live .cv-doc .cv-write { animation: cv-writein .8s cubic-bezier(.3,.6,.3,1) forwards; animation-delay:var(--wd,.3s); }
  @keyframes cv-writein { to { width:var(--w,70%); } }
  .cv-caret { position:absolute; bottom:.7rem; right:.8rem; width:2px; height:14px; background:var(--accent); opacity:0; }
  .cv-live .cv-caret { animation: cv-caret-blink 1.05s steps(1) infinite; animation-delay:2.7s; }
  @keyframes cv-caret-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
  .cv-graph { flex:1; position:relative; min-height:120px; }
  .cv-node { position:absolute; width:9px; height:9px; border-radius:999px; background:var(--accent);
    box-shadow:0 0 0 4px var(--accent-soft); scale:0; }
  .cv-live .cv-node { animation: cv-pop .5s cubic-bezier(.3,1.4,.4,1) forwards, cv-breathe 3.4s ease-in-out infinite;
    animation-delay:var(--nd,.5s), calc(var(--nd,.5s) + .5s); }
  @keyframes cv-pop { to { scale:1; } }
  @keyframes cv-breathe { 0%,100%{ box-shadow:0 0 0 4px var(--accent-soft);} 50%{ box-shadow:0 0 0 7px var(--accent-soft);} }
  .cv-edge { position:absolute; height:1.5px; background:var(--line-strong); transform-origin:0 50%; scale:0 1; }
  .cv-live .cv-edge { animation: cv-edge-draw .6s cubic-bezier(.4,0,.2,1) forwards; animation-delay:var(--ed,1s); }
  @keyframes cv-edge-draw { to { scale:1 1; } }
  .cv-voice { display:flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:999px;
    padding:.4rem .8rem; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-soft); align-self:flex-start; opacity:0; }
  .cv-live .cv-voice { animation: cv-rise .5s ease forwards; animation-delay:1.7s; }
  .cv-voice svg { width:14px; height:14px; fill:none; stroke:var(--accent); stroke-width:1.75; stroke-linecap:round; }
  .cv-live .cv-voice svg path { animation: cv-eq 1.6s ease-in-out infinite; transform-origin:center; animation-delay:2s; }
  @keyframes cv-eq { 0%,100%{ scale:1 1 } 50%{ scale:1 .55 } }
  /* feature cards: staggered rise + glyph draw */
  #cv-cards .cvc { opacity:0; translate:0 16px; }
  #cv-cards.cvc-live .cvc { animation: cv-rise .65s cubic-bezier(.22,.7,.3,1) forwards; }
  #cv-cards.cvc-live .cvc:nth-child(1){animation-delay:.05s} #cv-cards.cvc-live .cvc:nth-child(2){animation-delay:.15s}
  #cv-cards.cvc-live .cvc:nth-child(3){animation-delay:.25s} #cv-cards.cvc-live .cvc:nth-child(4){animation-delay:.35s}
  #cv-cards.cvc-live .cvc:nth-child(5){animation-delay:.45s} #cv-cards.cvc-live .cvc:nth-child(6){animation-delay:.55s}
  #cv-cards .pro2-glyph .gs { stroke-dasharray:1; stroke-dashoffset:1; }
  #cv-cards.cvc-live .pro2-glyph .gs { animation: pro2-draw 1s cubic-bezier(.4,0,.2,1) forwards; animation-delay:.4s; }
  @media (prefers-reduced-motion: reduce) {
    .cv-pane,.cv-bubble,.cv-voice,#cv-cards .cvc { opacity:1; translate:0 0; animation:none !important; }
    .cv-doc .cv-write { width:var(--w,70%); animation:none !important; }
    .cv-node { scale:1; animation:none !important; } .cv-edge { scale:1 1; animation:none !important; }
    .cv-typing { display:none; } .cv-b3 .cv-swap { display:block; opacity:1; animation:none !important; }
    .cv-caret { display:none; } .cv-typing span { animation:none; }
    #cv-cards .pro2-glyph .gs { stroke-dasharray:none; stroke-dashoffset:0; animation:none !important; }
  }

  /* ==== Basics: narrative measure + embedded moments ===================== */
  .story { max-width:44rem; margin-inline:auto; }
  .story p { font-size:1.06rem; line-height:1.75; color:var(--ink-soft); margin-top:1.15rem; }
  .story p.lede { font-size:1.22rem; line-height:1.7; color:var(--ink); }
  .story .eyebrow { margin-top:3rem; margin-bottom:.2rem; }
  .story h2 { font-size:1.45rem; font-weight:700; letter-spacing:-.02em; margin-top:.4rem; }
  .story .pull { border-left:3px solid var(--accent); padding:.4rem 0 .4rem 1.2rem; margin-top:2rem;
    font-size:1.28rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); line-height:1.5; position:relative; }
  .story .pull::before { content:""; position:absolute; left:-3px; top:0; width:3px; height:100%;
    background:var(--accent); transform-origin:top; scale:1 0; }
  .story .pull.st-live::before { animation: st-grow .7s cubic-bezier(.4,0,.2,1) forwards; }
  @keyframes st-grow { to { scale:1 1; } }
  .story .aside { border:1px solid var(--line); border-radius:14px; background:var(--surface);
    padding:1.1rem 1.25rem; margin-top:1.4rem; }
  .story .aside .cap-id { margin-bottom:.35rem; }
  .story .aside p { margin-top:.2rem; font-size:.95rem; }
  .st-embed { margin-top:1.6rem; }
  .st-compare { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
  @media (max-width:640px){ .st-compare { grid-template-columns:1fr; } }
  .st-chat { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:.9rem; }
  .st-chat-label { font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; display:flex; align-items:center; gap:.4rem; }
  .st-chat-label::before { content:""; width:5px; height:5px; border-radius:1px; background:var(--muted); }
  .st-chat.good .st-chat-label { color:var(--accent); }
  .st-chat.good .st-chat-label::before { background:var(--accent); }
  .st-msg { border:1px solid var(--line); border-radius:10px; padding:.5rem .7rem; font-size:.84rem;
    line-height:1.45; color:var(--ink-soft); margin-top:.5rem; max-width:92%; }
  .st-msg.you { border-color:var(--accent-soft); background:var(--accent-soft); color:var(--ink); margin-left:auto; }
  .st-timeline { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:1.1rem 1.2rem;
    display:flex; align-items:stretch; gap:0; }
  @media (max-width:640px){ .st-timeline { flex-direction:column; } }
  .st-step { flex:1; position:relative; padding:0 1rem; }
  .st-step + .st-step { border-left:1px solid var(--line); }
  @media (max-width:640px){ .st-step + .st-step { border-left:none; border-top:1px solid var(--line); padding-top:.8rem; margin-top:.8rem; } }
  .st-step-k { font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--accent); margin-bottom:.35rem; }
  .st-step p { margin-top:0; font-size:.86rem; line-height:1.5; }
  .st-doors { display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:center; }
  @media (max-width:640px){ .st-doors { grid-template-columns:1fr; } .st-doors .st-door-mid { justify-self:center; } }
  .st-door { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:1rem 1.1rem;
    display:flex; gap:.8rem; align-items:flex-start; }
  .st-door svg { width:26px; height:26px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.75;
    stroke-linecap:round; stroke-linejoin:round; }
  .st-door h5 { font-size:.95rem; font-weight:700; letter-spacing:-.01em; }
  .st-door p { margin-top:.25rem; font-size:.84rem; line-height:1.5; }
  .st-door-mid { font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); white-space:nowrap; }
  .st-diff { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
  @media (max-width:820px){ .st-diff { grid-template-columns:1fr; } }
  .st-diff-card { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:1rem 1.1rem; }
  .st-diff-card svg { width:24px; height:24px; fill:none; stroke:var(--accent); stroke-width:1.75;
    stroke-linecap:round; stroke-linejoin:round; margin-bottom:.55rem; }
  .st-diff-card h5 { font-size:.95rem; font-weight:700; letter-spacing:-.01em; }
  .st-diff-card p { margin-top:.3rem; font-size:.84rem; line-height:1.5; }
  /* story embeds play in as they enter the viewport */
  .st-reveal .st-msg, .st-reveal .st-step, .st-reveal .st-door, .st-reveal .st-door-mid,
  .st-reveal .st-diff-card, .st-reveal.aside { opacity:0; translate:0 12px; }
  .st-reveal .st-door.st-d1 { translate:-18px 0; } .st-reveal .st-door.st-d2 { translate:18px 0; }
  .st-reveal.st-live .st-msg, .st-reveal.st-live .st-step, .st-reveal.st-live .st-door,
  .st-reveal.st-live .st-door-mid, .st-reveal.st-live .st-diff-card, .st-reveal.aside.st-live {
    animation: cv-rise .6s cubic-bezier(.22,.7,.3,1) forwards; }
  .st-reveal.st-live .st-m1 { animation-delay:.1s } .st-reveal.st-live .st-m2 { animation-delay:.55s }
  .st-reveal.st-live .st-m3 { animation-delay:1s } .st-reveal.st-live .st-m4 { animation-delay:1.45s }
  .st-reveal.st-live .st-s1 { animation-delay:.1s } .st-reveal.st-live .st-s2 { animation-delay:.4s }
  .st-reveal.st-live .st-s3 { animation-delay:.7s }
  .st-reveal.st-live .st-d1 { animation-delay:.1s } .st-reveal.st-live .st-d2 { animation-delay:.3s }
  .st-reveal.st-live .st-door-mid { animation-delay:.65s }
  .st-reveal.st-live .st-c1 { animation-delay:.1s } .st-reveal.st-live .st-c2 { animation-delay:.3s }
  .st-reveal.st-live .st-c3 { animation-delay:.5s }
  @media (prefers-reduced-motion: reduce) {
    .st-reveal .st-msg, .st-reveal .st-step, .st-reveal .st-door, .st-reveal .st-door-mid,
    .st-reveal .st-diff-card, .st-reveal.aside { opacity:1; translate:0 0; animation:none !important; }
    .story .pull::before { scale:1 1; animation:none !important; }
  }

  /* ==== Capabilities surface: scroll reveal + fast item cascade ========== */
  #capability-surface .cap-domain { opacity:0; translate:0 18px;
    transition: opacity .5s cubic-bezier(.22,.7,.3,1), translate .5s cubic-bezier(.22,.7,.3,1); }
  #capability-surface .cap-domain.in-view { opacity:1; translate:0 0; }
  #capability-surface .cap-line { opacity:0; translate:0 8px;
    transition: opacity .32s ease, translate .32s ease; }
  #capability-surface .cap-domain.in-view .cap-line { opacity:1; translate:0 0; }
  @media (prefers-reduced-motion: reduce) {
    #capability-surface .cap-domain, #capability-surface .cap-line {
      opacity:1; translate:0 0; transition:none; }
  }

  /* ==== Gate audio button: Matrix rain homage (scoped to the intro gate) == */
  /* Dark chip in both themes so the rain reads; rim and label in house
     accent. The green lives in the rain's occasional wink, not the chrome. */
  .intro-audio { position:relative; overflow:hidden; isolation:isolate;
    background:#0c0a0e; border-color:rgba(240,53,110,.38); color:#ffe4ec; }
  .intro-audio:hover { background:#120d12; border-color:rgba(240,53,110,.7); color:#fff; }
  .intro-audio canvas { position:absolute; inset:0; width:100%; height:100%;
    z-index:-1; opacity:.5; pointer-events:none; }
  .intro-audio span { position:relative; text-shadow:0 1px 6px rgba(0,0,0,.55); }
  @media (prefers-reduced-motion: reduce) { .intro-audio canvas { display:none; } }