/* ============================ TOKENS ============================ */
  :root {
    --bg: #0A0A0F;
    --bg-2: #0D0D14;
    --panel: #111119;
    --panel-2: #15151F;
    --panel-3: #1C1C2A;
    --ink: #ECEDF3;
    --ink-soft: #BFC1D0;
    --ink-dim: #888B9E;
    --ink-faint: #62647A;
    --line: rgba(255,255,255,0.07);
    --line-soft: rgba(255,255,255,0.04);
    --line-strong: rgba(255,255,255,0.14);
    --violet: #08B7F7;
    --violet-2: #00C8FF;
    --violet-deep: #006FAE;
    --violet-soft: rgba(8,183,247,0.12);
    --violet-glow: rgba(8,183,247,0.32);
    --amber: #F2A93B;
    --amber-soft: rgba(242,169,59,0.12);
    --green: #4FD08A;
    --green-soft: rgba(79,208,138,0.12);
    --neg: #E16A6A;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-sm: 8px;
    --maxw: 1240px;
    --shadow-card: 0 1px 0 rgba(255,255,255,0.035) inset, 0 24px 60px -32px rgba(0,0,0,0.85);
    --shadow-float: 0 48px 100px -40px rgba(0,0,0,0.92), 0 1px 0 rgba(255,255,255,0.05) inset;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --font-display: "IBM Plex Sans", sans-serif;
    --font-body: "IBM Plex Sans", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  /* ============================ RESET ============================ */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }
  ul { margin: 0; padding: 0; list-style: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  img, svg { display: block; max-width: 100%; }
  code, .mono { font-family: var(--font-mono); }
  ::selection { background: var(--violet-soft); color: #fff; }

  /* ============================ LAYOUT ============================ */
  .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
  @media (max-width: 600px) { .wrap { padding: 0 18px; } }
  main { overflow-x: clip; }
  section { position: relative; }
  section[id] { scroll-margin-top: 84px; } /* clear the sticky nav on anchor jumps */

  /* monospace eyebrow with a leading "section index" — the dev-doc register */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--violet-2);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }
  .eyebrow .idx {
    color: var(--ink-faint);
    border: 1px solid var(--line); border-radius: 5px;
    padding: 1px 7px; font-size: 11px;
    background: rgba(255,255,255,0.02);
  }

  /* ============================ NOSCRIPT ============================ */
  .noscript-bar {
    position: relative; z-index: 200;
    margin: 0 auto; max-width: var(--maxw);
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink);
    background: var(--amber-soft); border: 1px solid rgba(242,169,59,0.4); border-radius: var(--radius);
    padding: 12px 16px;
  }
  @media (max-width: 600px) { .noscript-bar { border-radius: 0; } }

  /* ============================ FOCUS ============================ */
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
    outline: 2px solid var(--violet-2);
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* ============================ NAV ============================ */
  .nav {
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(10,10,15,0.72);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease;
  }
  .nav.scrolled { border-bottom-color: var(--line); background: rgba(10,10,15,0.9); }
  .nav-inner { height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
  .brand-mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    position: relative; flex-shrink: 0; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(8,183,247,0.2) inset, 0 4px 16px -6px var(--violet-glow);
  }
  /* equalizer bars — distinct from the reference waveform mark */
  .brand-mark::after {
    content: ""; position: absolute; left: 5px; right: 5px; top: 50%; transform: translateY(-50%);
    height: 14px;
    background:
      linear-gradient(var(--violet),var(--violet)) 0 50%/2px 8px no-repeat,
      linear-gradient(var(--violet-2),var(--violet-2)) 4px 50%/2px 14px no-repeat,
      linear-gradient(var(--violet),var(--violet)) 8px 50%/2px 5px no-repeat,
      linear-gradient(var(--violet-2),var(--violet-2)) 12px 50%/2px 11px no-repeat,
      linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)) 16px 50%/2px 7px no-repeat;
  }
  .nav-links { display: flex; align-items: center; gap: 26px; }
  .nav-links a { position: relative; color: var(--ink-dim); font-size: 14px; font-weight: 500; transition: color 0.2s ease; }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a.active { color: var(--ink); }
  .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--violet-2); box-shadow: 0 0 10px -1px var(--violet-glow); }
  .nav-right { display: flex; align-items: center; gap: 8px; }
  .nav-signin { color: var(--ink-soft); font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: color 0.2s; }
  .nav-signin:hover { color: var(--ink); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
    padding: 10px 17px; border-radius: 9px;
    transition: transform 0.18s var(--ease), background 0.2s, box-shadow 0.25s, border-color 0.2s;
    white-space: nowrap;
  }
  .btn svg { width: 15px; height: 15px; }
  .btn-primary {
    background: linear-gradient(180deg, var(--violet-2), var(--violet));
    color: #0B0916;
    box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 8px 24px -8px var(--violet-glow), 0 0 0 1px rgba(8,183,247,0.5);
  }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 14px 32px -8px var(--violet-glow), 0 0 0 1px rgba(8,183,247,0.85); }
  .btn-ghost { background: rgba(255,255,255,0.03); color: var(--ink); border: 1px solid var(--line-strong); }
  .btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.24); transform: translateY(-1px); }
  .btn-lg { padding: 13px 22px; font-size: 15px; border-radius: 10px; }

  .hamburger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-strong); align-items: center; justify-content: center; background: rgba(255,255,255,0.03); }
  .hamburger span { display: block; width: 17px; height: 1.5px; background: var(--ink); position: relative; }
  .hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink); }
  .hamburger span::before { top: -5px; } .hamburger span::after { top: 5px; }

  .mobile-menu { display: none; }
  .mobile-menu.open {
    display: block; position: fixed; inset: 66px 0 0 0; z-index: 99;
    background: rgba(10,10,15,0.98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    padding: 28px 24px; border-top: 1px solid var(--line);
  }
  .mobile-menu a { display: block; padding: 16px 4px; font-size: 18px; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
  .mobile-menu .mm-cta { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
  .mobile-menu .btn { width: 100%; padding: 14px; font-size: 16px; }

  /* ============================ ATMOSPHERE ============================ */
  .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.022; mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* reveal on scroll */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  .stagger.in > * { opacity: 1; transform: none; }
  .stagger.in > *:nth-child(2) { transition-delay: 0.07s; }
  .stagger.in > *:nth-child(3) { transition-delay: 0.14s; }
  .stagger.in > *:nth-child(4) { transition-delay: 0.21s; }
  .no-js .reveal, .no-js .stagger > * { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .reveal, .stagger > * { opacity: 1 !important; transform: none !important; } }

  /* ============================ HERO ============================ */
  .hero { padding: 60px 0 74px; position: relative; overflow: hidden; }
  .hero-glow {
    position: absolute; top: -240px; left: 50%; transform: translateX(-30%);
    width: 1100px; height: 760px; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 44% 50% at 50% 40%, var(--violet-glow), rgba(8,183,247,0.05) 46%, transparent 68%);
    filter: blur(8px); opacity: 0.8;
  }
  /* faint dotted grid — IDE / blueprint texture, not the reference's vertical rules */
  .hero-dots {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 36%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 36%, #000 30%, transparent 78%);
    opacity: 0.6;
  }
  .hero-top { position: relative; z-index: 2; text-align: center; max-width: 920px; margin: 0 auto; }
  .momentum {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-soft);
    padding: 6px 13px 6px 9px; border: 1px solid var(--line); border-radius: 100px; background: rgba(255,255,255,0.025);
  }
  .momentum .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px 1px var(--violet-glow); position: relative; flex-shrink: 0; }
  .momentum .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--violet); opacity: 0.5; animation: ping 2.4s var(--ease) infinite; }
  @keyframes ping { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }
  .momentum b { color: var(--violet-2); font-weight: 600; }
  @media (prefers-reduced-motion: reduce) { .momentum .live-dot::after { animation: none; } }

  .hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.1rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02;
    margin: 22px auto 0; max-width: 16ch;
  }
  .hero h1 .glow { color: var(--violet-2); }
  .hero-sub { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink-soft); max-width: 58ch; margin: 22px auto 0; line-height: 1.58; }
  .hero-sub strong { color: var(--ink); font-weight: 600; }
  .hero-sub code { font-family: var(--font-mono); color: var(--violet-2); font-size: 0.92em; background: var(--violet-soft); padding: 1px 6px; border-radius: 5px; }
  .hero-cta { display: flex; gap: 12px; margin-top: 28px; justify-content: center; flex-wrap: wrap; }
  .hero-trust { display: flex; gap: 18px; margin-top: 22px; flex-wrap: wrap; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
  .hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
  .hero-trust span::before {
    content: ""; width: 13px; height: 13px; flex-shrink: 0; background: var(--violet);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  /* ===== HERO DUAL VISUAL: a "request console" — SDK call (left) + live trace (right) ===== */
  .console {
    position: relative; z-index: 2; margin-top: 48px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    box-shadow: var(--shadow-float); overflow: hidden;
  }
  .console::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(ellipse 60% 36% at 28% 0%, rgba(8,183,247,0.1), transparent 60%);
  }
  .console-chrome {
    display: flex; align-items: center; gap: 12px; padding: 11px 16px;
    border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.012); position: relative; z-index: 1;
  }
  .console-dots { display: flex; gap: 7px; }
  .console-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--panel-3); border: 1px solid var(--line-strong); }
  .console-tabs { display: flex; gap: 2px; margin-left: 8px; }
  .console-tab { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); padding: 5px 12px; border-radius: 7px; border: 1px solid transparent; }
  .console-tab.on { color: var(--ink); background: var(--panel-3); border-color: var(--line); }
  .console-meth { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); display: inline-flex; gap: 7px; align-items: center; }
  .console-meth .verb { color: var(--violet-2); font-weight: 600; }

  .console-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; position: relative; z-index: 1; }
  .console-pane { min-width: 0; }
  .console-pane.left { border-right: 1px solid var(--line); }
  .pane-head {
    display: flex; align-items: center; gap: 9px; padding: 10px 18px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--ink-faint);
    border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,0.008);
  }
  .pane-head .tag { margin-left: auto; color: var(--violet-2); border: 1px solid rgba(8,183,247,0.32); background: rgba(8,183,247,0.08); border-radius: 100px; padding: 2px 9px; font-size: 10px; }
  .pane-head .tag.amber { color: var(--amber); border-color: rgba(242,169,59,0.3); background: var(--amber-soft); }

  /* code editor (left) — line-numbered, the create() call WITH policy_ir */
  .code {
    font-family: var(--font-mono); font-size: 13px; line-height: 1.85;
    padding: 14px 0; overflow-x: auto; counter-reset: ln;
  }
  .code .cl { display: grid; grid-template-columns: 38px 1fr; white-space: pre; }
  .code .cl::before {
    counter-increment: ln; content: counter(ln);
    color: var(--ink-faint); opacity: 0.5; text-align: right; padding-right: 14px; font-size: 11.5px; user-select: none;
  }
  .code .cl > span { padding-right: 18px; }
  .code .kw { color: #C792F0; }
  .code .fn { color: #79C0FF; }
  .code .str { color: var(--green); }
  .code .num { color: var(--amber); }
  .code .pr { color: var(--ink-soft); }
  .code .cm { color: var(--ink-faint); }
  .code .op2 { color: var(--violet-2); }
  .code .pn { color: var(--ink-dim); }
  .code .old { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: rgba(225,106,106,0.5); }
  /* the highlighted policy_ir block — the runtime wedge */
  .code .ir { background: rgba(8,183,247,0.08); box-shadow: inset 2px 0 0 var(--violet); }
  .code .ir > span { color: var(--ink-soft); }
  .code-foot {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 12px 18px; border-top: 1px solid var(--line-soft);
    font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim);
  }
  .code-foot .copy-btn {
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px;
    padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); color: var(--ink-soft);
    transition: all 0.18s var(--ease);
  }
  .code-foot .copy-btn:hover { border-color: rgba(8,183,247,0.5); color: var(--violet-2); }
  .code-foot .copy-btn.copied { color: var(--violet-2); border-color: rgba(8,183,247,0.5); background: var(--violet-soft); }
  .code-foot .copy-btn svg { width: 12px; height: 12px; }
  .code-foot .wedge { margin-left: auto; color: var(--violet-2); }

  /* live trace (right pane) */
  .term-state { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 7px; transition: color 0.3s; }
  .term-state .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); transition: background 0.3s, box-shadow 0.3s; }
  .pane-head .term-state { margin-left: auto; }
  .term-state[data-state="running"], .term-state[data-state="failover"] { color: var(--amber); }
  .term-state[data-state="running"] .d, .term-state[data-state="failover"] .d { background: var(--amber); box-shadow: 0 0 9px 1px rgba(242,169,59,0.6); }
  .term-state[data-state="done"] { color: var(--green); }
  .term-state[data-state="done"] .d { background: var(--green); box-shadow: 0 0 9px 1px var(--green-soft); }

  .term-body { padding: 14px 18px 16px; }
  .term-prompt { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); margin-bottom: 12px; }
  .term-prompt .str { color: var(--violet-2); }
  .cands { display: grid; gap: 6px; margin-bottom: 12px; }
  .cand {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
    padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px;
    background: rgba(255,255,255,0.016); font-family: var(--font-mono); font-size: 11.5px;
    transition: border-color 0.35s var(--ease), background 0.35s var(--ease), opacity 0.35s var(--ease), transform 0.35s var(--ease);
  }
  .cand .cn { color: var(--ink-soft); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
  .cand .cn .mdot { width: 7px; height: 7px; border-radius: 2px; background: var(--ink-faint); transition: background 0.35s, box-shadow 0.35s; flex-shrink: 0; }
  .cand .cmeta { color: var(--ink-faint); font-size: 10.5px; min-width: 0; overflow-wrap: anywhere; }
  .cand .verdict { font-size: 10.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .cand .verdict svg { width: 12px; height: 12px; }
  .cand.testing { border-color: rgba(242,169,59,0.42); background: var(--amber-soft); }
  .cand.testing .mdot { background: var(--amber); } .cand.testing .verdict { color: var(--amber); }
  .cand.rejected { opacity: 0.4; } .cand.rejected .verdict { color: var(--neg); }
  .cand.rejected .cn { text-decoration: line-through; text-decoration-color: rgba(225,106,106,0.4); }
  .cand.rejected .mdot { background: var(--neg); }
  .cand.passed { border-color: rgba(79,208,138,0.3); background: var(--green-soft); }
  .cand.passed .verdict { color: var(--green); } .cand.passed .mdot { background: var(--green); }
  .cand.winner { border-color: rgba(8,183,247,0.6); background: rgba(8,183,247,0.1); box-shadow: 0 0 0 1px rgba(8,183,247,0.28), 0 0 28px -8px var(--violet-glow); transform: translateY(-1px); }
  .cand.winner .cn { color: var(--ink); font-weight: 600; } .cand.winner .mdot { background: var(--violet-2); box-shadow: 0 0 8px 1px var(--violet-glow); } .cand.winner .verdict { color: var(--violet-2); }
  .cand.downed { border-color: rgba(242,169,59,0.5); background: var(--amber-soft); opacity: 0.7; }
  .cand.downed .verdict { color: var(--amber); } .cand.downed .cn { text-decoration: line-through; text-decoration-color: rgba(242,169,59,0.5); } .cand.downed .mdot { background: var(--amber); }
  /* hero live trace: tighter ladder so the full catalog fits beside the code pane */
  #liveTrace .cands { gap: 5px; }
  #liveTrace .cand { padding: 6px 11px; border-radius: 8px; }
  #liveTrace .cand .cmeta { font-variant-numeric: tabular-nums; }
  /* before a run, cards read as neutral "available" — the verdict appears only once evaluated */
  #liveTrace .cand .verdict { visibility: hidden; }
  #liveTrace .cand.rejected .verdict, #liveTrace .cand.passed .verdict, #liveTrace .cand.winner .verdict { visibility: visible; }

  .trace-out { border-top: 1px solid var(--line-soft); padding-top: 10px; }
  .t-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 5px 2px; font-family: var(--font-mono); font-size: 11.5px; align-items: baseline; opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
  .t-row.shown { opacity: 1; transform: none; }
  .t-key { color: var(--ink-faint); }
  .t-val { color: var(--ink-soft); }
  .t-val .hl { color: var(--ink); font-weight: 500; }
  .t-val .accent { color: var(--violet-2); font-weight: 500; }
  .t-val .green { color: var(--green); font-weight: 500; }
  .t-val .amber { color: var(--amber); font-weight: 500; }
  .t-tag { display: inline-block; padding: 1px 7px; border-radius: 5px; background: var(--violet-soft); color: var(--violet-2); font-size: 10.5px; }
  .t-reason b { color: var(--green); font-weight: 500; }
  .t-row.failover-row .t-val { color: var(--amber); }

  .term-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
  .term-run {
    display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    padding: 8px 14px; border-radius: 8px; background: linear-gradient(180deg, var(--violet-2), var(--violet)); color: #0B0916;
    box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 6px 18px -8px var(--violet-glow), 0 0 0 1px rgba(8,183,247,0.5);
    transition: transform 0.18s var(--ease), box-shadow 0.25s;
  }
  .term-run:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 10px 24px -8px var(--violet-glow), 0 0 0 1px rgba(8,183,247,0.85); }
  .term-run svg { width: 11px; height: 11px; }
  .term-run[disabled] { opacity: 0.6; cursor: default; transform: none; }
  .term-fail {
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px;
    padding: 8px 13px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--line-strong); color: var(--ink-soft);
    transition: all 0.18s var(--ease);
  }
  .term-fail:hover:not([disabled]) { border-color: rgba(242,169,59,0.5); color: var(--amber); background: var(--amber-soft); }
  .term-fail svg { width: 12px; height: 12px; } .term-fail[disabled] { opacity: 0.4; cursor: default; }
  /* cost lives in the trace row now; hide the duplicate chip */
  .term-cost { display: none; }
  .term-cost b { color: var(--violet-2); font-weight: 600; }
  /* "Force a failover" demoted to a quiet secondary action beside Replay */
  .term-fail { margin-left: 2px; background: none; border: none; box-shadow: none; border-radius: 0; padding: 6px 2px; color: var(--ink-dim); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; cursor: pointer; }
  .term-fail:hover:not([disabled]) { color: var(--ink); background: none; border: none; }

  .console-note {
    position: relative; z-index: 1; border-top: 1px solid var(--line);
    padding: 12px 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(255,255,255,0.008);
  }
  .console-note .badge-ir { color: var(--violet-2); display: inline-flex; align-items: center; gap: 6px; }
  .console-note .badge-ir svg { width: 13px; height: 13px; }

  .no-js .cands, .no-js .term-run, .no-js .term-fail { display: none; }
  .no-js .trace-out .t-row { opacity: 1 !important; transform: none !important; }
  .no-js .trace-out .t-detail { display: none; }

  @media (max-width: 880px) {
    .console-grid { grid-template-columns: 1fr; }
    .console-pane.left { border-right: 0; border-bottom: 1px solid var(--line); }
    .console-tabs { display: none; }
  }

  /* ============================ SECTION SHELL ============================ */
  .sec { padding: 96px 0; }
  .sec-head { max-width: 680px; margin: 0 0 46px; }
  .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .sec-head h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; margin-top: 15px; line-height: 1.06; text-wrap: balance; }
  .sec-head h2 .accent { color: var(--violet-2); }
  .sec-head p { color: var(--ink-soft); font-size: 1.05rem; margin-top: 15px; line-height: 1.56; text-wrap: pretty; }
  /* line-breaking polish: balance headings, avoid orphans in body copy */
  .hero h1, .final-card h2, .pcard h3, .feat-card h3, .reader h3, .pg-hero h1, .pg-sec-head h2, .roi-left h2, .meter-total .lbl { text-wrap: balance; }
  .hero-sub, .final-card p, .why-bridge, .pcard p, .reader p, .feat-card p, .pg-sec-head p, .pg-hero-sub, .why-row p, .tier-desc { text-wrap: pretty; }

  /* ============================ CATEGORY POSITIONING ============================ */
  .cat { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent); padding: 54px 0; }
  .cat-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; }
  .cat-lead { font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 2.05rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.22; }
  .cat-lead .accent { color: var(--violet-2); } .cat-lead .dim { color: var(--ink-dim); }
  .caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .cap { background: var(--panel); padding: 15px 18px; display: flex; align-items: center; gap: 11px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
  .cap svg { width: 15px; height: 15px; color: var(--violet-2); flex-shrink: 0; }
  .cap .cap-sub { color: var(--ink-dim); }
  @media (max-width: 860px) { .cat-inner { grid-template-columns: 1fr; gap: 28px; } }
  @media (max-width: 520px) { .caps { grid-template-columns: 1fr; } }

  /* ============================ POLICY_IR AS DATA (S2) ============================ */
  .ir-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 26px; align-items: stretch; }
  .ir-panel { background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); min-width: 0; }
  .ir-bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
  .ir-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--panel-3); border: 1px solid var(--line-strong); }
  .ir-bar .file { margin-left: 4px; color: var(--ink-dim); }
  .ir-bar .badge { margin-left: auto; color: var(--violet-2); border: 1px solid rgba(8,183,247,0.32); background: rgba(8,183,247,0.08); border-radius: 100px; padding: 2px 9px; font-size: 10px; }
  .ir-pre { margin: 0; padding: 16px 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85; overflow-x: auto; color: var(--ink-soft); }
  .ir-pre .ln { display: block; white-space: pre; transition: background 0.3s var(--ease), color 0.3s var(--ease); padding: 0 18px; margin: 0 -18px; }
  .ir-pre .ln.hot { background: rgba(8,183,247,0.1); box-shadow: inset 2px 0 0 var(--violet); color: var(--ink); }
  .ir-pre .op { color: var(--violet-2); } .ir-pre .st { color: var(--green); } .ir-pre .num { color: var(--amber); } .ir-pre .pn { color: var(--ink-dim); } .ir-pre .cm { color: var(--ink-faint); }

  .ir-legend { display: flex; flex-direction: column; gap: 11px; }
  .ir-verb {
    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
    border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), var(--panel-2));
    padding: 16px 18px; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); cursor: pointer; text-align: left;
  }
  .ir-verb:hover, .ir-verb.on { border-color: rgba(8,183,247,0.45); background: rgba(8,183,247,0.05); transform: translateX(2px); }
  .ir-verb .vk { font-family: var(--font-mono); font-size: 11px; color: var(--violet-2); border: 1px solid rgba(8,183,247,0.32); border-radius: 6px; padding: 4px 8px; background: rgba(8,183,247,0.08); white-space: nowrap; margin-top: 2px; }
  .ir-verb h3 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
  .ir-verb p { color: var(--ink-dim); font-size: 13px; margin-top: 4px; line-height: 1.5; }
  @media (max-width: 860px) { .ir-grid { grid-template-columns: 1fr; } }

  /* ============================ WORKFLOWS (S3) ============================ */
  .flow-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 26px; align-items: center; }
  .flow-copy h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); letter-spacing: -0.025em; line-height: 1.14; }
  .flow-copy p { color: var(--ink-dim); font-size: 14.5px; margin-top: 14px; line-height: 1.56; max-width: 46ch; }
  .flow-copy .flow-pts { margin-top: 20px; display: grid; gap: 12px; }
  .flow-copy .flow-pts li { display: flex; gap: 11px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
  .flow-copy .flow-pts li svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--violet-2); margin-top: 2px; }
  .flow-panel { background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
  .flow-steps { padding: 8px; display: grid; gap: 8px; }
  .flow-step {
    display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
    padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.014); font-family: var(--font-mono); font-size: 12px;
  }
  .flow-step .sn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--violet-2); font-size: 11px; background: rgba(8,183,247,0.06); }
  .flow-step .sl { color: var(--ink); }
  .flow-step .sl .sub { color: var(--ink-faint); font-size: 10.5px; display: block; margin-top: 2px; }
  .flow-step .sp { color: var(--ink-faint); font-size: 10.5px; }
  .flow-step .sp .accent { color: var(--violet-2); }
  .flow-arrow { display: grid; place-items: center; color: var(--ink-faint); padding: 1px 0; }
  .flow-arrow svg { width: 14px; height: 14px; }
  .flow-foot { border-top: 1px solid var(--line); padding: 11px 16px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); display: flex; align-items: center; gap: 8px; }
  .flow-foot .badge { color: var(--violet-2); border: 1px solid rgba(8,183,247,0.32); background: rgba(8,183,247,0.08); border-radius: 100px; padding: 2px 9px; font-size: 10px; }
  @media (max-width: 860px) { .flow-grid { grid-template-columns: 1fr; gap: 28px; } }

  /* ============================ WORKFLOW VISUALIZER (shared: /product + /docs) ============================ */
  .wf { margin-top: 12px; }
  .wf-tabrow { display: flex; justify-content: center; }
  .wf-tabs { display: inline-flex; flex-wrap: wrap; gap: 5px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--bg-2); box-shadow: var(--shadow-card); }
  .wf-tab { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-dim); padding: 9px 15px; border-radius: 9px; transition: color 0.2s var(--ease), background 0.2s var(--ease); white-space: nowrap; }
  .wf-tab .tn { color: var(--ink-faint); margin-right: 7px; }
  .wf-tab:hover { color: var(--ink-soft); }
  .wf-tab.on { color: #06121b; background: linear-gradient(180deg, var(--violet-2), var(--violet)); font-weight: 600; }
  .wf-tab.on .tn { color: rgba(6,18,27,0.6); }

  .wf-frame { position: relative; margin-top: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-2); box-shadow: var(--shadow-card); overflow: hidden; }
  .wf-cap { display: flex; align-items: center; gap: 10px; padding: 14px 20px 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); flex-wrap: wrap; }
  .wf-cap .shape { color: var(--violet-2); border: 1px solid rgba(8,183,247,0.32); background: rgba(8,183,247,0.07); border-radius: 100px; padding: 2px 9px; font-size: 10.5px; }
  .wf-panel { display: none; }
  .wf-panel.active { display: block; }

  .wf-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 6px 20px 18px; }
  .wf-stage { container-type: inline-size; position: relative; width: 100%; max-width: 1000px; min-width: 564px; aspect-ratio: 880 / 320; margin: 0 auto; }
  /* the DAG is wider than a phone: it scrolls horizontally. On touch the scrollbar is
     hidden, so a right-edge fade signals there is more of the flow to scroll to.
     Only shown where the stage actually overflows (measured: clips at <=640px, fits >=680px). */
  @media (max-width: 660px) {
    .wf-frame::after { content: ""; position: absolute; top: 1px; bottom: 1px; right: 1px; width: 44px; background: linear-gradient(90deg, transparent, var(--bg-2) 86%); pointer-events: none; z-index: 3; }
  }

  .wf-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
  .wf-edge { fill: none; stroke: rgba(196,214,255,0.42); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 820; stroke-dashoffset: 820; animation: wfDraw 5.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
  @keyframes wfDraw { 0%, 5% { stroke-dashoffset: 820; opacity: 0.14; } 24%, 74% { stroke-dashoffset: 0; opacity: 0.85; } 100% { stroke-dashoffset: 0; opacity: 0.26; } }
  .wf-token { fill: var(--violet-2); filter: drop-shadow(0 0 5px var(--violet-glow)); }

  .wf-node { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
  .wf-llm { width: 18cqw; border: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--panel), var(--panel-2)); border-radius: clamp(9px, 1.4cqw, 14px); padding: clamp(8px, 1.1cqw, 12px) clamp(9px, 1.2cqw, 13px); box-shadow: 0 12px 30px -16px rgba(0,0,0,0.7); }
  .wf-name { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: clamp(11px, 1.65cqw, 15px); letter-spacing: -0.01em; line-height: 1.15; }
  .wf-goal { display: block; color: var(--ink-dim); font-size: clamp(8.5px, 1.18cqw, 11.5px); line-height: 1.32; margin-top: clamp(3px, 0.5cqw, 6px); }
  .wf-pill { display: inline-block; margin-top: clamp(5px, 0.7cqw, 9px); font-family: var(--font-mono); font-size: clamp(8px, 1.06cqw, 10.5px); color: var(--violet-2); border: 1px solid rgba(8,183,247,0.3); background: rgba(8,183,247,0.07); border-radius: 100px; padding: clamp(2px, 0.32cqw, 4px) clamp(5px, 0.7cqw, 9px); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .wf-end { width: 9cqw; min-height: 9cqw; display: grid; place-items: center; gap: 4px; text-align: center; border: 1px dashed var(--line-strong); border-radius: clamp(8px, 1.2cqw, 13px); background: rgba(255,255,255,0.018); font-family: var(--font-mono); font-size: clamp(8.5px, 1.12cqw, 11px); color: var(--ink-soft); padding: clamp(6px, 0.9cqw, 11px); }
  .wf-end .wf-dot { width: clamp(5px, 0.8cqw, 7px); height: clamp(5px, 0.8cqw, 7px); border-radius: 50%; background: var(--violet); box-shadow: 0 0 7px var(--violet-glow); }

  /* critical node — a gate that can abort the run instead of shipping silently */
  .wf-crit::before { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(242,169,59,0.45); border-radius: inherit; pointer-events: none; z-index: 1; }
  .wf-flag { display: inline-block; margin-top: clamp(5px, 0.7cqw, 9px); margin-left: 6px; font-family: var(--font-mono); font-size: clamp(8px, 1.06cqw, 10.5px); color: var(--amber); border: 1px solid rgba(242,169,59,0.34); background: rgba(242,169,59,0.08); border-radius: 100px; padding: clamp(2px, 0.32cqw, 4px) clamp(5px, 0.7cqw, 9px); white-space: nowrap; }

  .wf-pulse { animation: wfPulse 5.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
  @keyframes wfPulse { 0%, 12%, 100% { box-shadow: 0 12px 30px -16px rgba(0,0,0,0.7); border-color: var(--line-strong); } 20%, 38% { box-shadow: 0 0 0 2px rgba(8,183,247,0.22), 0 16px 36px -16px rgba(0,0,0,0.8); border-color: rgba(8,183,247,0.5); } }

  /* shared points + billing under the tabs (product page) */
  .wf-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
  .wf-pt { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.014); padding: 15px 16px; }
  .wf-pt svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--violet-2); margin-top: 1px; }
  .wf-pt b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
  .wf-pt span { display: block; font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; margin-top: 3px; }
  .wf-bill { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; margin-top: 18px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
  .wf-bill .badge { color: var(--violet-2); border: 1px solid rgba(8,183,247,0.32); background: rgba(8,183,247,0.08); border-radius: 100px; padding: 3px 11px; font-size: 11px; }
  @media (max-width: 760px) { .wf-points { grid-template-columns: 1fr; } }

  /* docs: a short caption under the diagram tying it to flow_ir */
  .wf-tie { max-width: 760px; margin: 16px 0 0; font-size: 14px; color: var(--ink-dim); }
  .wf-tie code { color: var(--violet-2); }

  @media (prefers-reduced-motion: reduce) {
    .wf-edge { animation: none; stroke-dashoffset: 0; opacity: 0.5; }
    .wf-token { display: none; }
    .wf-pulse { animation: none; }
  }

  /* ============================ ROUTING MECHANICS / FEATURE CARDS ============================ */
  .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .feat-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: border-color 0.25s, transform 0.25s var(--ease); }
  .feat-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  .feat-card .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--panel-3); border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--violet-2); }
  .feat-card .ic svg { width: 21px; height: 21px; }
  .feat-card h3 { font-size: 15.5px; margin-top: 16px; letter-spacing: -0.02em; }
  .feat-card p { color: var(--ink-dim); font-size: 13.5px; margin-top: 9px; line-height: 1.55; }
  @media (max-width: 820px) { .feat-grid { grid-template-columns: 1fr; } }

  /* ============================ TRACE READERS (S6) ============================ */
  .readers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .reader { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; transition: border-color 0.25s, transform 0.25s var(--ease); }
  .reader:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  .reader .who { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--violet-2); display: inline-flex; align-items: center; gap: 9px; }
  .reader .who .ic { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--violet-2); background: rgba(8,183,247,0.06); }
  .reader .who .ic svg { width: 15px; height: 15px; }
  .reader h3 { font-size: 16px; margin-top: 15px; letter-spacing: -0.02em; }
  .reader p { color: var(--ink-dim); font-size: 13.5px; margin-top: 8px; line-height: 1.5; }
  .reader .reads { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); overflow-wrap: anywhere; }
  .reader .reads .accent { color: var(--violet-2); }
  @media (max-width: 820px) { .readers { grid-template-columns: 1fr; } }

  /* ============================ SEARCH THE POLICY SPACE (S7) ============================ */
  .search-panel { background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
  .search-top { padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .search-cmd { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 9px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding-bottom: 2px; scrollbar-width: thin; }
  .search-cmd > * { flex: 0 0 auto; white-space: nowrap; }
  .search-cmd::-webkit-scrollbar { height: 5px; }
  .search-cmd::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
  .search-cmd .pf { color: var(--violet-2); }
  .search-cmd .arg { color: var(--ink); }
  .search-cmd .opt { color: var(--amber); }
  .search-axes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .axis-grp { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
  .axis-grp .lab { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); padding: 8px 11px; border-right: 1px solid var(--line); background: rgba(255,255,255,0.02); white-space: nowrap; }
  .axis-btn { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); padding: 8px 12px; transition: all 0.15s var(--ease); border-right: 1px solid var(--line-soft); }
  .axis-btn:last-child { border-right: 0; }
  .axis-btn:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
  .axis-btn.on { color: #0B0916; background: linear-gradient(180deg, var(--violet-2), var(--violet)); font-weight: 600; }
  .search-results { padding: 10px; display: grid; gap: 7px; }
  .sr-row {
    display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center;
    padding: 11px 15px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,0.014);
    font-family: var(--font-mono); font-size: 12px; transition: border-color 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .sr-row .mdl { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 9px; }
  .sr-row .mdl .mdot { width: 8px; height: 8px; border-radius: 2px; background: var(--ink-faint); }
  .sr-row .col { color: var(--ink-dim); font-size: 11px; text-align: right; }
  .sr-row .col b { color: var(--ink-soft); font-weight: 500; }
  .sr-row.out { opacity: 0.32; }
  .sr-row.out .mdl { text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); }
  .sr-row.out .why { color: var(--neg); }
  .sr-row .why { font-size: 10.5px; color: var(--ink-faint); text-align: right; white-space: nowrap; }
  .sr-row.win { border-color: rgba(8,183,247,0.55); background: rgba(8,183,247,0.09); box-shadow: 0 0 0 1px rgba(8,183,247,0.22); }
  .sr-row.win .mdl { color: var(--ink); font-weight: 600; } .sr-row.win .mdl .mdot { background: var(--violet-2); box-shadow: 0 0 8px 1px var(--violet-glow); }
  .sr-row.win .why { color: var(--violet-2); }
  .search-foot { border-top: 1px solid var(--line); padding: 12px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); }
  .search-foot .count { color: var(--violet-2); }
  .search-foot .count b { color: var(--ink); }
  .no-js .search-axes { opacity: 0.5; pointer-events: none; }
  @media (max-width: 700px) {
    .sr-row { grid-template-columns: 1fr auto; } .sr-row .col { display: none; }
    /* touch: give the playground toggles a real tap target (~40px) without changing desktop density */
    .axis-grp .lab, .axis-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  }

  /* merged how-it-works → policy_ir: a compact, single-column term */
  .ir-intro { max-width: 620px; margin: 46px auto 0; text-align: center; }
  .ir-intro .eyebrow { justify-content: center; }
  .ir-intro h3 { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 600; letter-spacing: -0.02em; margin-top: 10px; }
  .ir-intro p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; margin-top: 12px; }
  .ir-solo { display: flex; justify-content: center; margin-top: 20px; }
  .ir-solo .ir-panel { width: 100%; max-width: 680px; }
  .ir-solo .ir-pre { font-size: 11.5px; line-height: 1.68; }

  /* secondary, collapsible policy playground */
  .search-collapse { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); overflow: hidden; }
  .search-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; }
  .search-summary::-webkit-details-marker { display: none; }
  .search-summary::after { content: "Open playground"; margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--violet-2); border: 1px solid rgba(8,183,247,0.45); border-radius: 8px; padding: 7px 14px; transition: background 0.2s var(--ease); }
  .search-summary:hover::after { background: rgba(8,183,247,0.1); }
  .search-collapse[open] .search-summary::after { content: "Close"; }
  .search-summary .sum-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-2); border: 1px solid rgba(8,183,247,0.32); background: rgba(8,183,247,0.08); border-radius: 100px; padding: 3px 10px; }
  .search-summary .sum-main { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
  .search-summary .sum-hint { color: var(--ink-dim); font-size: 13px; }
  .search-summary:hover .sum-main { color: var(--violet-2); }
  .search-collapse .search-panel { border: none; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  @media (max-width: 640px) { .search-summary .sum-hint { display: none; } }

  /* ============================ OPEN SOURCE SPLIT (S8) ============================ */
  .oss-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
  .oss-col { background: linear-gradient(180deg, var(--panel), var(--panel-2)); padding: 34px 32px; display: flex; flex-direction: column; }
  .oss-col.managed { background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(8,183,247,0.1), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
  .oss-col .badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-dim); border: 1px solid var(--line-strong); border-radius: 100px; padding: 5px 12px; align-self: flex-start; }
  .oss-col.managed .badge { color: var(--violet-2); border-color: rgba(8,183,247,0.4); background: rgba(8,183,247,0.08); }
  .oss-col h3 { font-size: 1.4rem; margin-top: 18px; letter-spacing: -0.025em; }
  .oss-col > p { color: var(--ink-soft); font-size: 14.5px; margin-top: 12px; line-height: 1.55; }
  .oss-feats { margin-top: 20px; display: grid; gap: 11px; margin-bottom: 26px; }
  .oss-feats li { display: flex; gap: 11px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
  .oss-feats li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--violet-2); margin-top: 2px; }
  .oss-col .oss-cta { margin-top: auto; align-self: flex-start; }
  .oss-repo { margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); }
  .oss-repo svg { width: 14px; height: 14px; color: var(--ink-soft); }
  .oss-repo .star { margin-left: auto; color: var(--amber); }
  @media (max-width: 760px) { .oss-split { grid-template-columns: 1fr; } }

  /* ============================ COMPARISON (S10) ============================ */
  .cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: var(--shadow-card); }
  table.cmp { width: 100%; border-collapse: collapse; min-width: 760px; }
  table.cmp th, table.cmp td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
  table.cmp thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--ink-dim); font-weight: 500; background: rgba(255,255,255,0.014); vertical-align: bottom; }
  table.cmp thead th.us { color: var(--violet-2); }
  table.cmp tbody td:first-child { font-weight: 600; color: var(--ink); }
  table.cmp td.us { background: rgba(8,183,247,0.06); }
  table.cmp tr:last-child td { border-bottom: 0; }
  .cmp-cell { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
  .cmp-cell svg { width: 15px; height: 15px; flex: none; }
  .cmp-cell.yes svg { color: var(--violet-2); } .cmp-cell.yes { color: var(--ink); }
  .cmp-cell.no svg { color: var(--neg); } .cmp-cell.no { color: var(--ink-dim); }
  .us-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 14px; letter-spacing: -0.01em; }
  .us-tag .mk { width: 18px; height: 18px; border-radius: 5px; background: var(--panel-3); border: 1px solid rgba(8,183,247,0.4); position: relative; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(8,183,247,0.18) inset; }
  .us-tag .mk::after { content:""; position:absolute; left:3px; right:3px; top:50%; transform:translateY(-50%); height:9px;
    background: linear-gradient(var(--violet),var(--violet)) 0 50%/1.5px 5px no-repeat, linear-gradient(var(--violet-2),var(--violet-2)) 3px 50%/1.5px 9px no-repeat, linear-gradient(var(--violet),var(--violet)) 6px 50%/1.5px 4px no-repeat, linear-gradient(var(--violet-2),var(--violet-2)) 9px 50%/1.5px 7px no-repeat; }

  /* ============================ ROI / CALC (S9) ============================ */
  .roi { background: radial-gradient(ellipse 60% 120% at 12% 0%, rgba(8,183,247,0.1), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; box-shadow: var(--shadow-card); }
  .roi-left h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -0.03em; line-height: 1.08; }
  .roi-left h2 .accent { color: var(--violet-2); }
  .roi-left p { color: var(--ink-soft); margin-top: 15px; font-size: 1rem; line-height: 1.56; }
  .roi-tie { margin-top: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
  .roi-tie .accent { color: var(--violet-2); } .roi-tie .amber { color: var(--amber); }
  .calc-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
  .calc-chip { font-family: var(--font-mono); font-size: 12px; padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink-soft); background: rgba(255,255,255,0.025); transition: all 0.18s var(--ease); }
  .calc-chip:hover { border-color: rgba(8,183,247,0.4); color: var(--ink); }
  .calc-chip.on { background: linear-gradient(180deg, var(--violet-2), var(--violet)); border-color: transparent; color: #0B0916; font-weight: 600; box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 6px 18px -8px var(--violet-glow); }
  .calc-chip .rt { opacity: 0.7; font-size: 11px; margin-left: 2px; }
  .calc-slider { margin-top: 18px; }
  .calc-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); margin-bottom: 11px; display: block; }
  .calc-lab .val { color: var(--violet-2); font-size: 13px; }
  .calc-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 100px; background: rgba(255,255,255,0.07); border: 1px solid var(--line); outline-offset: 4px; cursor: pointer; margin-top: 4px; }
  .calc-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, var(--violet-2), var(--violet)); border: 2px solid #fff2; box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 1px rgba(8,183,247,0.5), 0 0 16px -2px var(--violet-glow); cursor: pointer; }
  .calc-slider input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: var(--violet); box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 16px -2px var(--violet-glow); cursor: pointer; }
  .calc-range-ends { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 9px; }
  .roi-figure { text-align: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 26px; }
  .roi-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
  .roi-ld { border: 1px solid var(--line); border-radius: 11px; padding: 14px; text-align: left; min-width: 0; }
  .roi-ld .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--ink-faint); }
  .roi-ld .v { font-family: var(--font-display); font-size: clamp(17px, 5vw, 22px); font-weight: 600; letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .roi-ld.before .v { color: var(--ink-dim); } .roi-ld.after .v { color: var(--ink); }
  .roi-big { font-family: var(--font-display); font-size: clamp(50px, 9vw, 80px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.92; color: var(--violet-2); text-shadow: 0 0 44px var(--violet-glow); font-variant-numeric: tabular-nums; }
  .roi-figure .cap { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
  .roi-figure .cap b { color: var(--violet-2); font-weight: 600; }
  .roi-figure .ill { margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }
  .roi-cta { margin-top: 20px; }
  @media (max-width: 860px) { .roi { grid-template-columns: 1fr; gap: 30px; padding: 30px; } }
  @media (max-width: 480px) { .roi-ledger { grid-template-columns: 1fr; } }

  /* ============================ PRICING (S11) ============================ */
  .toggle-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; }
  .toggle-row .lbl { font-size: 14px; color: var(--ink-dim); font-weight: 600; transition: color 0.2s; }
  .toggle-row .lbl.on { color: var(--ink); }
  .toggle { width: 52px; height: 28px; border-radius: 100px; background: var(--panel-3); border: 1px solid var(--line-strong); position: relative; transition: background 0.25s; flex-shrink: 0; padding: 0; }
  .toggle.annual { background: var(--violet-soft); border-color: rgba(8,183,247,0.4); }
  .toggle .knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.28s var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
  .toggle.annual .knob { transform: translateX(24px); }
  .save-pill { font-family: var(--font-mono); font-size: 11px; color: var(--violet-2); background: rgba(8,183,247,0.1); border: 1px solid rgba(8,183,247,0.25); padding: 3px 9px; border-radius: 100px; flex-shrink: 0; }
  .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
  .tier { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; display: flex; flex-direction: column; transition: border-color 0.25s, transform 0.25s var(--ease); }
  .tier:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  .tier.featured { border-color: rgba(8,183,247,0.45); background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(8,183,247,0.14), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 0 0 1px rgba(8,183,247,0.25), 0 30px 70px -34px var(--violet-glow); position: relative; }
  .tier-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; color: #0B0916; background: linear-gradient(180deg, var(--violet-2), var(--violet)); padding: 4px 12px; border-radius: 100px; font-weight: 600; box-shadow: 0 6px 16px -6px var(--violet-glow); white-space: nowrap; }
  .tier-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
  .tier-desc { font-size: 12.5px; color: var(--ink-dim); margin-top: 6px; min-height: 34px; line-height: 1.4; }
  .tier-price { margin-top: 16px; display: flex; align-items: baseline; gap: 4px; }
  .tier-price .amt { font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: -0.03em; }
  .tier-price .per { font-size: 13px; color: var(--ink-dim); font-family: var(--font-mono); }
  .tier-rate { font-family: var(--font-mono); font-size: 11px; color: var(--violet-2); margin-top: 6px; }
  .tier-runs { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin-top: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .tier-runs b { color: var(--ink); font-weight: 500; }
  .tier-feats { display: flex; flex-direction: column; gap: 11px; margin: 18px 0 22px; flex: 1; }
  .tier-feats li { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
  .tier-feats li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--violet-2); margin-top: 1px; }
  .tier-cta { width: 100%; padding: 12px; border-radius: 10px; font-family: var(--font-body); font-size: 14px; font-weight: 600; text-align: center; transition: all 0.2s var(--ease); display: block; }
  .tier-cta.solid { background: linear-gradient(180deg, var(--violet-2), var(--violet)); color: #0B0916; box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 8px 22px -8px var(--violet-glow); }
  .tier-cta.solid:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 12px 26px -8px var(--violet-glow); }
  .tier-cta.outline { background: rgba(255,255,255,0.03); border: 1px solid var(--line-strong); color: var(--ink); }
  .tier-cta.outline:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.24); }
  .pricing-note { text-align: center; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
  @media (max-width: 960px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .pricing-grid { grid-template-columns: 1fr; } }

  /* ============================ TRUST (S12) ============================ */
  .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .trust-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; gap: 15px; align-items: flex-start; transition: border-color 0.25s, transform 0.25s var(--ease); }
  .trust-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  .trust-card .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--panel-3); border: 1px solid var(--line-strong); display: grid; place-items: center; flex: none; color: var(--violet-2); }
  .trust-card .ic svg { width: 21px; height: 21px; }
  .trust-card h3 { font-size: 15.5px; letter-spacing: -0.02em; }
  .trust-card p { margin-top: 7px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.55; }
  @media (max-width: 760px) { .trust-grid { grid-template-columns: 1fr; } }

  /* ============================ FAQ ============================ */
  .faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
  .faq details { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), var(--panel-2)); overflow: hidden; }
  .faq summary { cursor: pointer; list-style: none; padding: 20px 22px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 14px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; margin-left: auto; color: var(--violet-2); font-family: var(--font-mono); font-size: 20px; transition: transform 0.2s var(--ease); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq .ans { padding: 0 22px 20px; color: var(--ink-dim); font-size: 14px; line-height: 1.6; }
  .faq .ans code { font-family: var(--font-mono); color: var(--violet-2); font-size: 0.9em; background: var(--violet-soft); padding: 1px 5px; border-radius: 4px; }

  /* ============================ FINAL CTA ============================ */
  .final { padding: 110px 0; position: relative; overflow: hidden; }
  .final-glow { position: absolute; bottom: -360px; left: 50%; transform: translateX(-50%); width: 1000px; height: 720px; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--violet-glow), transparent 64%); opacity: 0.6; }
  .final-card { position: relative; z-index: 2; text-align: center; background: radial-gradient(ellipse 80% 140% at 50% -10%, rgba(8,183,247,0.14), transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 64px 40px; box-shadow: var(--shadow-float); }
  .final-card h2 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -0.035em; line-height: 1.04; }
  .final-card h2 .glow { color: var(--violet-2); }
  .final-card p { color: var(--ink-soft); font-size: 1.08rem; max-width: 56ch; margin: 18px auto 0; line-height: 1.56; }

  /* ============================ FOOTER ============================ */
  footer { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--bg-2); }
  .foot-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 36px; }
  .foot-brand p { color: var(--ink-dim); font-size: 13.5px; margin-top: 14px; line-height: 1.55; max-width: 34ch; }
  .foot-soc { display: flex; gap: 10px; margin-top: 18px; }
  .foot-soc a { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-dim); transition: all 0.2s; }
  .foot-soc a:hover { color: var(--ink); border-color: var(--line-strong); }
  .foot-soc svg { width: 16px; height: 16px; }
  .foot-col h3 { font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 500; }
  .foot-col a { display: block; color: var(--ink-dim); font-size: 13.5px; margin-top: 12px; transition: color 0.2s; }
  .foot-col a:hover { color: var(--ink); }
  .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-faint); }
  .foot-bottom .badges { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; }
  .foot-bottom .badge { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-dim); }
  .foot-bottom .badge svg { width: 13px; height: 13px; color: var(--violet-2); }
  .foot-bottom .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
  @media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }

  /* ---- problem / use-case card grids (homepage) ---- */
  .pcard-grid { display: grid; gap: 16px; margin-top: 36px; }
  .pcard-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
  .pcard-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
  .pcard-grid.cols5 { grid-template-columns: repeat(5, 1fr); }
  .pcard { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), var(--panel-2)); padding: 22px; transition: border-color 0.22s var(--ease), transform 0.22s var(--ease); }
  .pcard:hover { border-color: rgba(8,183,247,0.4); transform: translateY(-3px); }
  .pcard h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; }
  .pcard p { color: var(--ink-dim); font-size: 14px; line-height: 1.6; margin: 0; }
  .pcard .how-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; margin-bottom: 12px; background: rgba(8,183,247,0.1); border: 1px solid rgba(8,183,247,0.3); color: var(--violet-2); font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
  .why-bridge { margin-top: 26px; font-size: 16px; color: var(--ink-soft); }
  .why-bridge b, .why-bridge strong { color: var(--ink); }
  @media (max-width: 880px) { .pcard-grid.cols3, .pcard-grid.cols2, .pcard-grid.cols5 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .pcard-grid.cols5, .pcard-grid.cols3, .pcard-grid.cols2 { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .pcard:hover { transform: none; } }

  @media (max-width: 960px) { .nav-links { display: none; } .nav-signin { display: none; } .hamburger { display: inline-flex; } }
  /* very narrow: the nav CTA lives in the mobile menu — keep only the hamburger so the bar can't overflow */
  @media (max-width: 400px) { .nav-right .btn-primary { display: none; } }