/* ─────────────────────────────────────────────
   SEDA · Unified Site Stylesheet
   Source of truth for all pages.
   Tokens, themes, components, and page-level styles
   are consolidated here. Do not duplicate.
   ───────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════
   From: home.html
   ═══════════════════════════════════════════════════ */

  /* ─────────────────────────────────────────────
     SEDA Design Tokens v2
     ───────────────────────────────────────────── */
  :root {
    --gray-950:#0a0a0f; --gray-900:#111012; --gray-850:#131019; --gray-800:#15141a;
    --gray-700:#2a292e; --gray-550:#54525c; --gray-400:#a8a4b7; --gray-350:#b9b6c5;
    --gray-300:#cbc8d4; --gray-200:#dcdbe2; --gray-100:#eeedf1; --gray-50:#f1edff;
    --gray-0:#ffffff;

    --primary-900:#131019; --primary-700:#2f293f; --primary-500:#9582ca;
    --primary-400:#baa3fd; --primary-300:#d6c8fe; --primary-200:#f1edff;

    --success-900:#02130d; --success-500:#16ba84; --success-300:#a2e3ce;
    --success-200:#d0f1e6; --success-loud:rgba(22,186,132,0.4);

    --danger-900:#190e07; --danger-800:#221714; --danger-600:#7e4822; --danger-400:#fc8f44;
    --warning-900:#191904; --warning-500:#fbf724; --warning-on:#222211;

    --font-sans:'Satoshi', system-ui, -apple-system, sans-serif;
    --font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;
    --weight-regular:400; --weight-medium:500;

    --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-16:64px;

    --radius-xs:4px; --radius-sm:8px; --radius-md:16px; --radius-lg:20px;
    --radius-xl:48px; --radius-full:10000px;

    --size-button:32px; --size-input:32px; --size-badge:32px; --size-nav-item:48px;
    --size-topnav:72px; --size-icon:16px; --size-icon-lg:24px;

    --layout-viewport:1280px;

    --chart-primary:#baa3fd; --chart-primary-light:#d6c8fe;
    --chart-secondary:#9582ca; --chart-success:#16ba84; --chart-success-light:#a2e3ce;

    --duration-fast:50ms; --duration-normal:100ms; --duration-slow:200ms;
  }

  /* Dark theme (default) */
  [data-theme="dark"], :root {
    --bg-page:#000;
    --bg-card-default:#000;
    --bg-card-high:var(--gray-850);
    --bg-card-highest:var(--gray-800);
    --bg-input:var(--gray-900);
    --bg-nav:#000000;
    --bg-nav-fade: #000;

    --text-primary:#ffffff;
    --text-secondary:var(--gray-300);
    --text-muted:var(--gray-400);

    --border-default:var(--gray-700);
    --border-soft:rgba(255,255,255,0.06);
    --border-focus:var(--gray-550);

    --badge-primary-bg:var(--primary-900); --badge-primary-text:var(--primary-400);
    --badge-success-bg:var(--success-900); --badge-success-text:var(--success-500);
    --badge-danger-bg:var(--danger-900);   --badge-danger-text:var(--danger-400);
    --badge-warning-bg:var(--warning-900); --badge-warning-text:var(--warning-500);
    --badge-neutral-bg:var(--gray-900);    --badge-neutral-text:var(--gray-400);

    --btn-primary-bg:var(--gray-0);   --btn-primary-text:#000;
    --btn-primary-hover:var(--gray-100);
    --btn-secondary-bg:var(--gray-700); --btn-secondary-text:var(--gray-100);
    --btn-tertiary-bg:transparent;     --btn-tertiary-text:var(--gray-100);
    --btn-tertiary-border:var(--gray-700);
    --btn-ghost-text:var(--gray-400);
  }

  /* Light theme */
  [data-theme="light"] {
    --bg-page:#fff;
    --bg-card-default:#fff;
    --bg-card-high:var(--gray-100);
    --bg-card-highest:var(--gray-200);
    --bg-input:var(--gray-0);
    --bg-nav:var(--gray-0);
    --bg-nav-fade: #fff;

    --text-primary:#000;
    --text-secondary:var(--gray-700);
    --text-muted:var(--gray-550);
    --text-subtle:var(--gray-550);

    --border-default:var(--gray-200);
    --border-soft:rgba(0,0,0,0.06);
    --border-focus:var(--gray-400);

    --badge-primary-bg:var(--primary-200); --badge-primary-text:var(--primary-700);
    --badge-success-bg:var(--success-200); --badge-success-text:var(--success-500);
    --badge-danger-bg:#fff3e8;             --badge-danger-text:var(--danger-400);
    --badge-warning-bg:#fffde6;            --badge-warning-text:#8a8400;
    --badge-neutral-bg:var(--gray-100);    --badge-neutral-text:var(--gray-550);

    --btn-primary-bg:#000;             --btn-primary-text:var(--gray-0);
    --btn-primary-hover:var(--gray-800);
    --btn-secondary-bg:var(--gray-100); --btn-secondary-text:var(--gray-800);
    --btn-tertiary-bg:var(--gray-0);    --btn-tertiary-text:var(--gray-800);
    --btn-tertiary-border:var(--gray-200);
    --btn-ghost-text:var(--gray-550);
  }

  /* ─── Base ─── */
  *,*::before,*::after { box-sizing:border-box; }
  html,body { margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body {
    font-family:var(--font-sans); font-weight:var(--weight-regular);
    padding-top:var(--size-topnav);
    overflow-x:hidden;
    background:var(--bg-page); color:var(--text-primary);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    line-height:1.4;
    transition:background-color var(--duration-slow) ease, color var(--duration-slow) ease;
  }
  a { color:inherit; text-decoration:none; }
  .material-symbols-rounded {
    font-family:'Material Symbols Rounded';
    font-weight:400; font-size:var(--size-icon); line-height:1; user-select:none;
  }
  .container {
    max-width:var(--layout-viewport);
    margin:0 auto; padding:0 var(--space-8);
  }

  /* ─── TopNav ─── */
  .topnav {
    position:fixed; top:0; left:0; right:0; z-index:50;
    height:var(--size-topnav);
    background-color:var(--bg-page);
    border-bottom:1px solid var(--border-soft);
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
  }
  .topnav-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
  .topnav-left { display:flex; align-items:center; gap:var(--space-8); }
  .logo {
    display:flex; align-items:center; gap:var(--space-2);
    font-weight:var(--weight-medium); letter-spacing:-0.02em; font-size:18px;
  }
  .logo-dark, .logo-light { height:24px; width:auto; }
  [data-theme="dark"] .logo-dark  { display:inline-block; }
  [data-theme="dark"] .logo-light { display:none; }
  [data-theme="light"] .logo-dark  { display:none; }
  [data-theme="light"] .logo-light { display:inline-block; }
  .nav-links { display:flex; align-items:center; gap:var(--space-1); }
  .nav-link {
    font-size:14px; font-weight:var(--weight-medium); letter-spacing:0.7px;
    color:var(--text-muted);
    padding:var(--space-2) var(--space-3); border-radius:var(--radius-xs);
    transition:color var(--duration-normal), background-color var(--duration-normal);
    border:none; background:none; font-family:inherit; cursor:pointer;
  }
  .nav-link:hover { color:var(--text-primary); }
  .nav-link.is-active { color:var(--text-primary); background:var(--bg-card-high); }
  .topnav-right { display:flex; align-items:center; gap:var(--space-2); }

  .theme-switch {
    width:58px; height:24px; border-radius:var(--radius-full);
    background:var(--bg-card-high);
    border:1px solid var(--border-default);
    position:relative; cursor:pointer;
    display:inline-flex; align-items:center; padding:2px;
  }
  .theme-switch::before {
    content:""; width:17px; height:17px; border-radius:var(--radius-full);
    background:var(--text-primary); transform:translateX(0);
    transition:transform var(--duration-slow) ease;
  }
  [data-theme="light"] .theme-switch::before { transform:translateX(35px); }
  .theme-switch .ti{
    position:absolute;
    width:17px; height:17px;
    top:50%;
    transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; line-height:1;
    color:var(--text-muted);
    pointer-events:none;
  }
  .theme-switch .ti.left  { left:2px; }
  .theme-switch .ti.right { right:2px; }
  /* The icon under the moving thumb takes the page background color
     so it reads as a "knock-out" against the thumb's primary color. */
  [data-theme="dark"]  .theme-switch .ti.left  { color:var(--bg-page); }
  [data-theme="light"] .theme-switch .ti.right { color:var(--bg-page); }

  /* ─── Buttons ─── */
  .btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:var(--space-2);
    height:var(--size-button); min-height:var(--size-button); max-height:var(--size-button);
    padding:0 var(--space-4);
    border-radius:var(--radius-xs); border:1px solid transparent;
    font-family:var(--font-sans); font-weight:var(--weight-medium);
    font-size:12px; line-height:1; letter-spacing:0.6px;
    box-sizing:border-box;
    cursor:pointer; user-select:none; white-space:nowrap;
    vertical-align:middle;
    transition:background-color var(--duration-normal), color var(--duration-normal),
               border-color var(--duration-normal), transform var(--duration-fast);
  }
  .btn:active { transform:translateY(1px); }
  .btn-shimmer {
    position:relative; overflow:hidden;
  }
  .btn-shimmer::after {
    content:'';
    position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(
      120deg,
      transparent 0%,
      rgba(186,163,253,0) 30%,
      rgba(186,163,253,0.25) 50%,
      rgba(186,163,253,0) 70%,
      transparent 100%
    );
    animation:shimmer 3s ease-in-out infinite;
  }
  @keyframes shimmer {
    0%   { left:-100%; }
    40%  { left:140%; }
    100% { left:140%; }
  }
  .btn .material-symbols-rounded {
    font-size:14px; line-height:1;
    /* Pin to a fixed-size inline-flex box so the icon's font metrics
       can't subtly nudge the button's overall height. */
    display:inline-flex; align-items:center; justify-content:center;
    width:14px; height:14px; flex:none;
  }
  .btn-primary { background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:var(--btn-primary-bg); }
  .btn-primary:hover { background:var(--btn-primary-hover); }
  .btn-tertiary { background:var(--btn-tertiary-bg); color:var(--btn-tertiary-text); border-color:var(--btn-tertiary-border); }
  .btn-ghost { background:transparent; color:var(--btn-ghost-text); }
  .btn-ghost:hover { color:var(--text-primary); }
  .btn-lg { height:40px; padding:0 var(--space-5); font-size:13px; }

  /* ─── Badges ─── */
  .badge {
    display:inline-flex; align-items:center; gap:var(--space-2);
    height:var(--size-badge); padding:0 var(--space-3);
    border-radius:var(--radius-xs);
    font-size:12px; font-weight:var(--weight-medium);
  }
  .badge-sm { height:24px; padding:0 var(--space-2); font-size:11px; }
  .badge-primary { background:var(--badge-primary-bg); color:var(--badge-primary-text); }
  .badge-success { background:var(--badge-success-bg); color:var(--badge-success-text); }
  .badge-pill {
    height:auto; padding:var(--space-1) var(--space-3);
    border-radius:var(--radius-full);
    border:1px solid var(--border-default);
    background:transparent; color:var(--text-muted);
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
  }
  .badge-pill .dot {
    width:6px; height:6px; border-radius:var(--radius-full);
    background:var(--success-500); box-shadow:0 0 0 3px rgba(22,186,132,0.18);
  }

  /* ─── Cards ─── */
  .card {
    background:var(--bg-card-default);
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    overflow:clip;
  }

  /* ─────────────────────────────────────────────
     1. HERO
     ───────────────────────────────────────────── */
  .hero {
    position:relative; overflow:clip;
    padding:200px 0 128px;
    isolation:isolate;
  }
  /* Soft fade at the bottom of the hero so animations blend into the next section */
  .hero::after {
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:140px;
    background:linear-gradient(180deg, transparent 0%, var(--bg-page) 100%);
    pointer-events:none;
    z-index:2;
  }
  .hero-canvas {
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none;
    z-index:0;
    display:block;
  }
  .hero-inner { position:relative; z-index:3; text-align:center; }
  .hero .eyebrow { margin-bottom:var(--space-6); display:inline-flex; }
  .hero h1 {
    margin:0 auto var(--space-5);
    font-size:clamp(48px, 8vw, 96px);
    font-weight:var(--weight-regular);
    letter-spacing:-2.6px; line-height:1.0;
    max-width:18ch;
  }
  .hero h1 .accent { color:var(--primary-400); }
  .hero .subhead {
    margin:0 auto var(--space-8);
    font-size:clamp(18px, 2.2vw, 22px);
    color:var(--text-secondary); max-width:60ch;
    font-weight:var(--weight-regular); letter-spacing:-0.2px;
    line-height:1.4;
  }
  .hero-cta { display:flex; justify-content:center; gap:var(--space-3); flex-wrap:wrap; }

  /* ─── Section blocks (shared) ─── */
  section.block { padding:128px 0; position:relative; }
  .block-head { max-width:760px; margin-bottom:var(--space-10); }
  .block-eyebrow {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:#71649B; font-weight:var(--weight-medium);
    margin-bottom:var(--space-3);
  }
  .block-title {
    font-size:clamp(28px, 3.6vw, 48px);
    font-weight:var(--weight-regular); letter-spacing:-1.2px;
    line-height:1.05; margin:0 0 var(--space-4);
  }
  .block-sub { font-size:16px; color:var(--text-secondary); margin:0; max-width:60ch; }

  /* ─────────────────────────────────────────────
     2. THREE PRODUCTS
     ───────────────────────────────────────────── */
  .products-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-4);
  }
  /* Keep the 3-column layout down to tablet — the cards are content-heavy,
     and the SVG visuals stay proportional via aspect-ratio. */
  @media (max-width:1024px) and (min-width:768px) {
    .products-grid { gap:var(--space-3); }
    .product-card { padding:var(--space-5); min-height:auto; }
    .product-card h3 { font-size:20px; letter-spacing:-0.4px; }
    .product-card p.pc-line { font-size:13px; }
    .pc-stat .v { font-size:20px; }
  }
  @media (max-width:767px) {
    .products-grid { grid-template-columns:1fr; }
  }

  .product-card {
    padding:var(--space-6);
    display:flex; flex-direction:column; gap:var(--space-4);
    text-decoration:none; color:inherit;
    transition:border-color var(--duration-slow), background-color var(--duration-slow);
    cursor:pointer;
    min-height:420px;
  }
  .product-card:hover {
    border-color:var(--primary-500);
  }

  .pc-visual {
    width:100%;
    aspect-ratio: 320 / 100;
    border-radius:var(--radius-xs);
    border:1px solid var(--border-soft);
    overflow:hidden; position:relative;
  }
  .pc-visual svg { width:100%; height:100%; display:block; }

  .pc-name {
    display:flex; align-items:center; gap:var(--space-2);
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--primary-400); font-weight:var(--weight-medium);
  }
  .pc-name .pc-mark {
    width:14px; height:14px; border-radius:3px;
    background:linear-gradient(135deg, var(--primary-400), var(--primary-500));
  }

  .product-card h3 {
    margin:0;
    font-size:24px; font-weight:var(--weight-regular); letter-spacing:-0.6px;
    line-height:1.15;
  }
  .product-card p.pc-line {
    margin:0; font-size:14px; color:var(--text-secondary); line-height:1.5;
  }

  .pc-stat {
    margin-top:auto;
    padding-top:var(--space-4);
    border-top:1px solid var(--border-soft);
    display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-3);
  }
  .pc-stat .v {
    font-size:24px; font-weight:var(--weight-medium); letter-spacing:-0.4px;
    line-height:1; font-variant-numeric:tabular-nums;
  }
  .pc-stat .l {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
    margin-top:var(--space-1);
  }

  .pc-link {
    display:inline-flex; align-items:center; gap:var(--space-1);
    font-size:12px; font-weight:var(--weight-medium); letter-spacing:0.6px;
    color:var(--text-primary);
    transition:color var(--duration-slow);
  }
  .pc-link .material-symbols-rounded {
    font-size:14px;
    transition:transform var(--duration-normal);
  }
  .product-card:hover .pc-link .material-symbols-rounded { transform:translateX(2px); }

  /* Mini visuals: shared classes */
  .mini-grid { stroke:var(--border-soft); stroke-width:1; }
  .mini-line { fill:none; stroke:var(--chart-primary); stroke-width:1.8; }
  .mini-fill { fill:url(#minifill); }

  .mini-bar { fill:var(--bg-card-high); }
  .mini-bar.fill { fill:var(--chart-primary); }

  .mini-branch { fill:none; stroke:var(--border-default); stroke-width:1.5; }
  .mini-pill   { fill:var(--badge-primary-bg); }
  .mini-pill-success { fill:var(--badge-success-bg); }
  .mini-pill-text-prim    { fill:var(--badge-primary-text); }
  .mini-pill-text-success { fill:var(--badge-success-text); }
  .mini-dot { fill:var(--primary-400); }

  /* ─── Hover-triggered build animations on product card visuals ─── */
  /* Default state: elements are fully visible. On hover, animations replay. */
  .pc-anim-draw { stroke-dasharray:100; stroke-dashoffset:100; }
  .product-card.is-animated .pc-anim-draw { stroke-dashoffset:0; }
  .pc-anim-grow { transform-origin:left center; transform-box:fill-box; transform:scaleX(0); }
  .product-card.is-animated .pc-anim-grow { transform:scaleX(1); }
  .pc-anim-fade { opacity:0; }
  .product-card.is-animated .pc-anim-fade { opacity:1; }
  .pc-bench-dot { transform-origin:center; transform-box:fill-box; }

  @keyframes pc-draw  { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }
  @keyframes pc-grow  { from { transform:scaleX(0); }    to { transform:scaleX(1); } }
  @keyframes pc-fade  { from { opacity:0; }              to { opacity:1; } }
  @keyframes pc-pulse {
    0%,100% { transform:scale(1);   opacity:0.55; }
    50%     { transform:scale(1.7); opacity:0.18; }
  }

  .product-card:hover .pc-anim-draw,
  .product-card.is-visible .pc-anim-draw { animation:pc-draw 1.0s ease both; }
  .product-card:hover .pc-anim-grow,
  .product-card.is-visible .pc-anim-grow { animation:pc-grow 0.6s ease both; }
  .product-card:hover .pc-anim-fade,
  .product-card.is-visible .pc-anim-fade { animation:pc-fade 0.5s ease both; }
  .product-card:hover .pc-bench-dot,
  .product-card.is-visible .pc-bench-dot { animation:pc-pulse 1.4s ease infinite; }

  /* Stagger delays (multiples of 100ms) */
  .product-card:hover .pc-d-1,  .product-card.is-visible .pc-d-1  { animation-delay:100ms; }
  .product-card:hover .pc-d-2,  .product-card.is-visible .pc-d-2  { animation-delay:200ms; }
  .product-card:hover .pc-d-3,  .product-card.is-visible .pc-d-3  { animation-delay:300ms; }
  .product-card:hover .pc-d-4,  .product-card.is-visible .pc-d-4  { animation-delay:400ms; }
  .product-card:hover .pc-d-5,  .product-card.is-visible .pc-d-5  { animation-delay:500ms; }
  .product-card:hover .pc-d-6,  .product-card.is-visible .pc-d-6  { animation-delay:600ms; }
  .product-card:hover .pc-d-7,  .product-card.is-visible .pc-d-7  { animation-delay:700ms; }
  .product-card:hover .pc-d-8,  .product-card.is-visible .pc-d-8  { animation-delay:800ms; }
  .product-card:hover .pc-d-9,  .product-card.is-visible .pc-d-9  { animation-delay:900ms; }
  .product-card:hover .pc-d-10, .product-card.is-visible .pc-d-10 { animation-delay:1000ms; }

  @media (prefers-reduced-motion: reduce) {
    .product-card:hover .pc-anim-draw,
    .product-card:hover .pc-anim-grow,
    .product-card:hover .pc-anim-fade,
    .product-card:hover .pc-bench-dot { animation:none; }
  }

  /* ─────────────────────────────────────────────
     3. PROOF BAR
     ───────────────────────────────────────────── */
  .proof {
    border-radius:var(--radius-xs);
    padding:var(--space-8);
    background:var(--bg-card-default);
  }
  .proof-grid {
    display:flex; flex-direction:column;
    gap:var(--space-6);
  }
  .proof-stats {
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:var(--space-6);
  }
  @media (max-width:600px){
    .proof-stats { grid-template-columns:repeat(2, 1fr); justify-items:center; text-align:center; }
    .proof-stat { display:flex; flex-direction:column; align-items:center; }
  }

  .proof-stat .v {
    font-size:34px; font-weight:var(--weight-medium); letter-spacing:-0.8px;
    line-height:1; color:var(--text-primary);
    font-variant-numeric:tabular-nums;
  }
  .proof-stat .v.accent { color:var(--primary-400); }
  .proof-stat .v.success { color:var(--success-500); }
  .proof-stat .l {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
    margin-top:var(--space-2);
  }

  .proof-bottom {
    display:grid; grid-template-columns:auto 1fr; gap:var(--space-5); align-items:center;
  }
  .proof-bottom > .proof-label,
  .proof-bottom > .ticker-label {
    grid-column:1;
  }
  .proof-bottom > .proof-logos,
  .proof-bottom > .provider-ticker {
    grid-column:2;
  }
  .proof-customers-sep,
  .provider-ticker-sep {
    grid-column:1 / -1;
    border-top:1px solid var(--border-soft);
  }
  .proof-label, .ticker-label {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
    white-space:nowrap;
  }
  .proof-logos {
    display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center;
  }
  @media (max-width:900px){
    .proof-bottom { grid-template-columns:1fr; gap:var(--space-3); }
    .proof-bottom > * { grid-column:1; }
    .proof-label, .ticker-label { white-space:normal; }
  }
  .customer-logo {
    display:inline-flex; align-items:center; gap:var(--space-2);
    padding:var(--space-2) var(--space-3);
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    color:var(--text-secondary);
    font-size:13px; font-weight:var(--weight-medium); letter-spacing:-0.01em;
    transition:color var(--duration-slow), border-color var(--duration-slow), background-color var(--duration-slow);
  }
  .customer-logo:hover { color:var(--text-primary); background:var(--bg-card-high); }
  .customer-logo .clogo {
    width:20px; height:20px; border-radius:50%; flex:none;
    object-fit:cover;
    filter:saturate(0.6) opacity(0.7);
    transition:filter var(--duration-slow);
  }
  .customer-logo:hover .clogo { filter:saturate(1) opacity(1); }


  /* ── Data provider ticker ── */
  .provider-ticker {
    overflow:hidden;
    position:relative;
  }
  .provider-ticker::after {
    content:""; position:absolute; top:0; bottom:0; right:0; width:60px; z-index:2; pointer-events:none;
    background:linear-gradient(270deg, var(--bg-card-default), transparent);
  }
  .ticker-track {
    display:flex; gap:var(--space-4); align-items:center;
    width:max-content;
    animation:ticker 30s linear infinite;
  }
  .ticker-track:hover { animation-play-state:paused; }
  @keyframes ticker {
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
  }
  .ticker-item {
    display:flex; align-items:center; gap:var(--space-2);
    font-size:13px; font-weight:var(--weight-medium);
    color:var(--text-muted); white-space:nowrap;
    flex:none;
  }
  .ticker-item img {
    width:20px; height:20px; border-radius:4px; object-fit:cover;
    filter:saturate(0.6) opacity(0.7);
  }
  .ticker-item:hover img { filter:saturate(1) opacity(1); }
  .ticker-item:hover { color:var(--text-primary); }
  /* ─────────────────────────────────────────────
     4. WHY SEDA
     ───────────────────────────────────────────── */
  .why-grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4);
  }

  .why-card {
    padding:var(--space-5);
    display:flex; flex-direction:column; gap:var(--space-3);
    min-height:260px;
  }
  .why-icon {
    width:36px; height:36px; border-radius:var(--radius-xs);
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--badge-primary-bg); color:var(--badge-primary-text);
    margin-bottom:var(--space-1);
  }
  .why-card h3 {
    margin:0; font-size:18px; font-weight:var(--weight-regular); letter-spacing:-0.2px;
    line-height:1.2;
  }
  .why-card p { margin:0; font-size:14px; color:var(--text-secondary); line-height:1.5; }
  .why-card .why-foot {
    margin-top:auto; padding-top:var(--space-4);
    border-top:1px solid var(--border-soft);
    color:var(--text-muted); font-size:12px;
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  }

  /* ─────────────────────────────────────────────
     5. FINAL CTA
     ───────────────────────────────────────────── */
  .cta-block {
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    padding:var(--space-16) var(--space-8);
    text-align:center;
    background:
      radial-gradient(60% 80% at 50% 0%, rgba(186,163,253,0.10), transparent 70%),
      var(--bg-card-default);
    position:relative; overflow:clip;
  }
  .cta-block h2 {
    margin:0 0 var(--space-3);
    font-size:clamp(28px, 4vw, 56px); font-weight:var(--weight-regular);
    letter-spacing:-1.6px; line-height:1.05;
  }
  .cta-block h2 .accent { color:var(--primary-400); }
  .cta-block p { margin:0 auto var(--space-6); max-width:560px; color:var(--text-secondary); font-size:16px; }
  .cta-actions { display:inline-flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; }

  /* ─── Footer ─── */
  footer {
    padding:var(--space-10) 0 var(--space-16);
    border-top:1px solid var(--border-soft);
    color:var(--text-muted); font-size:13px;
  }
  .footer-grid {
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-8);
    margin-bottom:var(--space-10);
  }
  .footer-brand p { color:var(--text-muted); font-size:13px; max-width:320px; }
  .footer-col h5 {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-secondary); font-weight:var(--weight-medium);
    margin:0 0 var(--space-4);
  }
  .footer-col a {
    display:block; color:var(--text-muted);
    padding:var(--space-1) 0;
    transition:color var(--duration-normal);
  }
  .footer-col a:hover { color:var(--text-primary); }
  .footer-bottom {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:var(--space-3);
    padding-top:var(--space-6); border-top:1px solid var(--border-soft);
  }

  svg text { font-family:var(--font-sans); }

  /* ─────────────────────────────────────────────
     Responsive overrides
     ───────────────────────────────────────────── */

  /* Hamburger toggle (mobile-only) */
  .hamburger {
    display:none;
    width:36px; height:36px;
    background:transparent;
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    cursor:pointer;
    align-items:center; justify-content:center;
    padding:0;
    color:var(--text-primary);
    transition:background-color var(--duration-normal), border-color var(--duration-normal);
  }
  .hamburger:hover { background:var(--bg-card-default); border-color:var(--border-focus); }
  .hamburger .material-symbols-rounded { font-size:20px; }

  /* Mobile menu — only displayed on mobile */
  .mobile-menu { display:none; }

  /* Tablet (≤ 1024px): collapse the primary nav, show hamburger + mobile menu */
  @media (max-width: 1024px) {
    .nav-links { display:none; }
    .hamburger { display:inline-flex; }

    /* Mobile menu (slides down below the topnav) */
    .mobile-menu {
      display:block;
      position:fixed;
      top:var(--size-topnav);
      left:0; right:0;
      background:var(--bg-page);
      border-bottom:1px solid var(--border-soft);
      z-index:49;
      padding:var(--space-5) 0 var(--space-6);
      max-height:calc(100vh - var(--size-topnav));
      overflow-y:auto;
      transform:translateY(-12px);
      opacity:0;
      visibility:hidden;
      transition:transform var(--duration-slow) ease,
                 opacity var(--duration-slow) ease,
                 visibility 0s linear var(--duration-slow);
    }
    .mobile-menu.is-open {
      transform:translateY(0);
      opacity:1;
      visibility:visible;
      transition:transform var(--duration-slow) ease,
                 opacity var(--duration-slow) ease,
                 visibility 0s linear 0s;
    }
    .mobile-nav { display:flex; flex-direction:column; }
    .mobile-nav-link {
      font-size:18px;
      font-weight:var(--weight-medium);
      letter-spacing:0.4px;
      color:var(--text-muted);
      padding:var(--space-3) 0;
      display:block;
      border-bottom:1px solid var(--border-soft);
      transition:color var(--duration-normal);
    }
    .mobile-nav-link:last-of-type { border-bottom:none; }
    .mobile-nav-link:hover { color:var(--text-primary); }
    .mobile-nav-link.is-active { color:var(--text-primary); }
    .mobile-menu-tools {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--space-3);
      margin-top:var(--space-5);
      padding-top:var(--space-5);
      border-top:1px solid var(--border-soft);
    }
  }

  /* Tablet narrow (≤ 768px): shrink section padding, collapse topnav CTAs into the menu */
  @media (max-width: 768px) {
    .container { padding:0 var(--space-5); }

    section.block { padding:96px 0; }
    .hero { padding:var(--space-10) 0 96px; }

    .block-head { margin-bottom:var(--space-6); }

    /* Proof block padding tightens */
    .proof { padding:var(--space-6); }

    /* CTA block padding shrinks */
    .cta-block { padding:var(--space-10) var(--space-5); }

    /* Topnav: hide theme switch + Start trial (move them into the hamburger menu) */
    .topnav-right > .theme-switch,
    .topnav-right > .btn-tertiary { display:none; }
  }

  /* Mobile (≤ 600px): compact layout, stack CTAs */
  @media (max-width: 600px) {
    .container { padding:0 var(--space-4); }

    section.block { padding:72px 0; }
    .hero { padding:var(--space-8) 0 72px; }

    .topnav-inner { gap:var(--space-3); }
    .topnav-left  { gap:var(--space-3); }

    /* Hero CTA + final CTA stack full-width */
    .hero-cta {
      flex-direction:column; align-items:stretch;
      max-width:320px; margin:0 auto;
      width:100%;
    }
    .hero-cta .btn { width:100%; }
    .cta-actions {
      flex-direction:column; align-items:stretch;
      max-width:320px; margin:0 auto;
      width:100%;
    }
    .cta-actions .btn { width:100%; }

    /* Hero typography tightens */
    .hero h1 { letter-spacing:-1.4px; }

    /* Product cards: less padding */
    .product-card { padding:var(--space-5); min-height:auto; }

    /* Proof customer logos wrap better */
    .proof-logos { gap:var(--space-2); }
    .customer-logo { font-size:12px; padding:var(--space-1) var(--space-2); }

    /* Footer: 1-col + stacked bottom row */
    .footer-grid   { grid-template-columns:1fr 1fr; gap:var(--space-6); }
    .footer-bottom { flex-direction:column; align-items:flex-start; gap:var(--space-2); }
  }

  /* Small phones (≤ 380px) */
  @media (max-width: 380px) {
    .logo      { font-size:16px; }
    .logo-dark, .logo-light { height:20px; }
    .topnav-right .btn { font-size:11px; padding:0 var(--space-3); }
  }








  /* ── Products dropdown ── */
  .nav-dropdown { position:relative; }
  .nav-dropdown-trigger { display:inline-flex; align-items:center; gap:2px; }
  .nav-chevron { font-size:18px; transition:transform 0.2s ease; }
  .nav-dropdown:hover .nav-chevron { transform:rotate(180deg); }
  .nav-dropdown-menu {
    position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
    min-width:280px; padding:var(--space-2);
    background:var(--bg-page); border:1px solid var(--border-default);
    border-radius:var(--radius-sm);
    box-shadow:0 12px 40px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
    backdrop-filter:saturate(140%) blur(16px); -webkit-backdrop-filter:saturate(140%) blur(16px);
    opacity:0; visibility:hidden; transform:translateX(-50%) translateY(4px);
    transition:opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    pointer-events:none;
  }
  .nav-dropdown-menu::before {
    content:""; position:absolute; top:-12px; left:0; right:0; height:12px;
  }
  .nav-dropdown:hover .nav-dropdown-menu {
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
    pointer-events:auto;
  }
  .nav-dropdown-item {
    display:flex; align-items:flex-start; gap:var(--space-3);
    padding:var(--space-3); border-radius:var(--radius-xs);
    color:var(--text-primary); text-decoration:none;
    transition:background-color var(--duration-normal);
  }
  .nav-dropdown-item:hover { background:var(--bg-card-high); }
  .nav-dropdown-item .material-symbols-rounded { color:var(--text-muted); margin-top:2px; }
  .nav-dropdown-title { font-size:14px; font-weight:var(--weight-medium); letter-spacing:0.3px; }
  .nav-dropdown-desc { font-size:12px; color:var(--text-muted); margin-top:2px; }
  /* Mobile nav group */
  .mobile-nav-group { display:flex; flex-direction:column; }
  .mobile-nav-label {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-secondary); font-weight:var(--weight-medium);
    padding:var(--space-3) 0 var(--space-1);
  }
  .mobile-nav-group .mobile-nav-link { padding-left:var(--space-4); }


  /* ─── Responsive Enhancements (Desktop/Laptop/Tablet/Mobile) ─── */

  /* Laptop (1024-1439): slight padding increase */
  @media (min-width:1024px) and (max-width:1439px) {
    .container { padding:0 var(--space-10); }
  }

  /* Desktop (1440+): generous padding */
  @media (min-width:1440px) {
    .container { padding:0 clamp(32px, 3vw, 80px); }
  }

  /* Tablet (768-1023): nav + footer + section spacing */
  @media (max-width:1023px) {
    .footer-grid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:767px) {
    .footer-grid { grid-template-columns:1fr 1fr; gap:var(--space-6); }
    .footer-brand { margin-bottom:var(--space-4); grid-column:1 / -1; }
    .footer-grid { align-items:start; }
  }

  /* Small mobile (320-480) */
  @media (max-width:480px) {
    .container { padding:0 var(--space-4); }
    .nav-dropdown-menu { min-width:calc(100vw - 32px); left:16px; right:16px; }
  }
  @media (max-width:1023px) and (min-width:768px) {
    .why-grid { grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:767px) {
    .why-grid { grid-template-columns:1fr; }
    .why-card { min-height:auto; }
  }

  /* ───────────── Page load fade-in ───────────── */
  @keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Hero text rises and fades in (slow, staggered) */
  @keyframes heroRiseIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero .eyebrow,
  .hero h1,
  .hero .subhead,
  .hero .lede,
  .hero-cta,
  .hero .hero-ticker,
  /* Trial page hero */
  .trial-hero h1,
  .trial-hero .sub,
  /* About page mission section */
  .about-mission h1,
  .about-mission .mission-text,
  .about-mission .about-stats,
  .about-photo {
    opacity: 0;
    animation: heroRiseIn 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero .eyebrow      { animation-delay: 200ms; }
  .hero h1            { animation-delay: 330ms; }
  .hero .subhead      { animation-delay: 480ms; }
  .hero .lede         { animation-delay: 620ms; }
  .hero-cta           { animation-delay: 760ms; }
  .hero .hero-ticker  { animation-delay: 900ms; }

  /* Trial page stagger */
  .trial-hero h1      { animation-delay: 200ms; }
  .trial-hero .sub    { animation-delay: 380ms; }

  /* About page stagger */
  .about-mission h1            { animation-delay: 200ms; }
  .about-mission .mission-text { animation-delay: 380ms; }
  .about-mission .about-stats  { animation-delay: 560ms; }
  .about-photo                 { animation-delay: 460ms; }

  @media (prefers-reduced-motion: reduce) {
    .hero .eyebrow,
    .hero h1,
    .hero .subhead,
    .hero .lede,
    .hero-cta,
    .hero .hero-ticker,
    .trial-hero h1,
    .trial-hero .sub,
    .about-mission h1,
    .about-mission .mission-text,
    .about-mission .about-stats,
    .about-photo {
      opacity: 1;
      transform: none;
      animation: none;
    }
  }
/* ═══════════════════════════════════════════════════
   From: about.html
   ═══════════════════════════════════════════════════ */

  .btn-xl { height:48px; padding:0 var(--space-8); font-size:14px; border-radius:var(--radius-sm); }

  /* ─────────────────────────────────────────────
     ABOUT — Hero
     ───────────────────────────────────────────── */
  .about-hero {
    position:relative;
    padding:var(--space-16) 0 0;
    isolation:isolate;
  }
  .about-hero .container { position:relative; z-index:3; }

  /* ─────────────────────────────────────────────
     ABOUT — Mission + Photo layout
     ───────────────────────────────────────────── */
  .about-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-16);
    align-items:center;
    padding:var(--space-16) 0 128px;
  }
  .about-mission h1 {
    margin:0 0 var(--space-6);
    font-size:clamp(36px, 5vw, 56px);
    font-weight:var(--weight-regular);
    letter-spacing:-1.6px; line-height:1.05;
  }
  .about-mission .mission-text {
    font-size:16px; color:var(--text-secondary); line-height:1.7;
    max-width:50ch; margin:0 0 var(--space-10);
  }

  .about-stats {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-8);
  }
  .about-stat .stat-value {
    font-size:clamp(28px, 4vw, 40px);
    font-weight:var(--weight-medium);
    letter-spacing:-1px;
    line-height:1;
    margin-bottom:var(--space-2);
  }
  .about-stat .stat-label {
    font-size:13px;
    color:var(--text-muted);
  }

  .about-photo {
    position:relative;
  }
  .about-photo img {
    width:100%;
    height:auto;
    border-radius:var(--radius-md);
    border:1px solid var(--border-default);
    filter:grayscale(100%);
    transition:filter 0.4s ease;
  }
  .about-photo img:hover {
    filter:grayscale(0%);
  }

  /* ─────────────────────────────────────────────
     ABOUT — Backed by
     ───────────────────────────────────────────── */
  .backed-section {
    padding:var(--space-16) 0 128px;
    text-align:center;
  }
  .backed-eyebrow {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--primary-400); font-weight:var(--weight-medium);
    margin-bottom:var(--space-10);
  }
  .backed-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    align-items:center;
    justify-items:center;
    gap:var(--space-10) var(--space-16);
  }
  @media (max-width:624px) {
    .backed-grid { grid-template-columns:repeat(2, 1fr); gap:var(--space-8) var(--space-6); }
  }
  @media (max-width:420px) {
    .backed-grid { grid-template-columns:1fr; gap:var(--space-6); }
    .backed-logo img { height:20px; max-width:100%; object-fit:contain; }
    .backed-logo-text { font-size:14px; letter-spacing:0.4px; }
    .backed-logo-text.caps { font-size:12px; letter-spacing:1.5px; }
  }
  .backed-logo {
    opacity:0.5;
    transition:opacity 0.3s ease;
    display:flex;
    align-items:center;
  }
  .backed-logo:hover {
    opacity:1;
  }
  .backed-logo img {
    height:24px;
    width:auto;
  }
  /* Text-based investor logos */
  .backed-logo-text {
    font-size:16px;
    font-weight:var(--weight-medium);
    letter-spacing:0.5px;
    color:var(--text-primary);
    opacity:0.5;
    transition:opacity 0.3s ease;
  }
  .backed-logo-text:hover {

  [data-theme="light"] .backed-logo-text { color:var(--text-primary); }
    opacity:1;
  }
  .backed-logo-text.caps {
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
  }

  @media (max-width:768px) {
    .container { padding:0 var(--space-5); }
    .topnav-right > .theme-switch, .topnav-right > .btn-tertiary { display:none; }
    .about-grid { grid-template-columns:1fr; gap:var(--space-10); text-align:center; }
    .about-mission .mission-text { margin-left:auto; margin-right:auto; }
    .about-photo { order:-1; }
    .about-hero { padding:96px 0 var(--space-10); }
    .about-grid { padding:var(--space-8) 0 var(--space-16); }
  }

  /* Investor logo dark/light toggle */
  .inv-dark, .inv-light { display:inline-flex; }
  [data-theme="dark"] .inv-light { display:none; }
  [data-theme="light"] .inv-dark { display:none; }
/* ═══════════════════════════════════════════════════
   From: pricing.html
   ═══════════════════════════════════════════════════ */


  /* ─────────────────────────────────────────────
     PRICING — Hero
     ───────────────────────────────────────────── */
  .pricing-hero {
    position:relative;
    padding:128px 0 96px;
    text-align:center;
    isolation:isolate;
  }
  .pricing-hero::after {
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:140px;
    background:linear-gradient(180deg, transparent 0%, var(--bg-page) 100%);
    pointer-events:none;
    z-index:2;
  }
  .pricing-hero .container { position:relative; z-index:3; }
  .pricing-hero h1 {
    margin:0 0 var(--space-3);
    font-size:clamp(40px, 6vw, 72px);
    font-weight:var(--weight-regular);
    letter-spacing:-2px; line-height:1.05;
  }
  .pricing-hero h1 .accent { color:var(--primary-400); }
  .pricing-hero .sub {
    margin:0 auto var(--space-8);
    font-size:16px; color:var(--text-secondary); max-width:50ch;
  }

  /* ─── Billing toggle ─── */
  .billing-toggle {
    display:inline-flex; align-items:center;
    border:1px solid var(--border-default); border-radius:var(--radius-full);
    padding:3px; gap:0; margin-bottom:var(--space-4);
  }
  .billing-toggle button {
    background:transparent; border:none; color:var(--text-muted);
    font-family:var(--font-sans); font-weight:var(--weight-medium);
    font-size:14px; padding:var(--space-2) var(--space-5);
    border-radius:var(--radius-full); cursor:pointer;
    transition:all var(--duration-normal);
  }
  .billing-toggle button.is-active {
    background:var(--bg-card-high); color:var(--text-primary);
  }
  .yearly-savings {
    display:inline-flex; align-items:center; gap:var(--space-1);
    font-size:12px; color:var(--primary-400);
    padding:var(--space-1) var(--space-3);
    border:1px solid var(--border-default); border-radius:var(--radius-full);
  }
  .yearly-savings .material-symbols-rounded { font-size:14px; }

  /* ─────────────────────────────────────────────
     PRICING — Cards
     ───────────────────────────────────────────── */
  .pricing-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-4);
    margin-bottom:128px;
  }

  .pricing-card {
    padding:var(--space-8);
    display:flex; flex-direction:column; gap:var(--space-5);
    position:relative;
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .pricing-card:hover {
    transform:translateY(-4px);
    box-shadow:0 16px 48px -12px rgba(0,0,0,0.4);
  }
  .pricing-card.featured {
    border-color:var(--primary-400);
  }
  .pricing-card.featured::before {
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--primary-400); border-radius:var(--radius-xs) var(--radius-xs) 0 0;
  }

  .plan-header { display:flex; flex-direction:column; gap:var(--space-2); }
  .plan-name {
    font-size:24px; font-weight:var(--weight-medium); letter-spacing:-0.4px;
  }
  .plan-desc {
    font-size:14px; color:var(--text-secondary); min-height:42px;
  }

  .plan-price {
    display:flex; flex-direction:column; gap:var(--space-1);
    padding:var(--space-5) 0;
    border-top:1px solid var(--border-soft);
  }
  .plan-amount {
    font-size:clamp(32px, 5vw, 42px); font-weight:var(--weight-medium);
    letter-spacing:-1.2px; line-height:1;
  }
  .plan-amount .period {
    font-size:16px; font-weight:var(--weight-regular);
    color:var(--text-muted); letter-spacing:0;
  }
  .plan-credits {
    font-size:13px; color:var(--text-muted);
  }

  .plan-features {
    display:flex; flex-direction:column; gap:var(--space-3);
    padding:var(--space-5) 0;
    border-top:1px solid var(--border-soft);
    flex:1;
  }
  .plan-feature {
    display:flex; align-items:flex-start; gap:var(--space-2);
    font-size:13px; color:var(--text-secondary);
  }
  .plan-feature .material-symbols-rounded {
    font-size:16px; color:var(--success-500); flex-shrink:0; margin-top:1px;
  }

  .plan-cta { margin-top:auto; padding-top:var(--space-5); }
  .plan-cta .btn { width:100%; justify-content:center; }

  .compare-table {
    width:100%; border-collapse:collapse;
  }
  .compare-table th, .compare-table td {
    padding:var(--space-4) var(--space-5);
    text-align:left; font-size:13px;
    border-bottom:1px solid var(--border-soft);
  }
  .compare-table thead th {
    font-size:14px; font-weight:var(--weight-medium);
    letter-spacing:-0.2px;
    color:var(--text-primary);
    border-bottom:1px solid var(--border-default);
    position:sticky; top:var(--size-topnav); background:var(--bg-page);
    z-index:5;
  }
  .compare-table thead th:first-child { color:var(--text-muted); font-weight:var(--weight-regular); }
  .compare-table tbody td:first-child {
    color:var(--text-secondary); font-weight:var(--weight-regular);
  }
  .compare-table tbody td {
    color:var(--text-primary);
  }
  .compare-table .check { color:var(--success-500); }
  .compare-table .dash { color:var(--text-muted); opacity:0.4; }
  .compare-table .cat-row td {
    font-size:12px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-primary); font-weight:var(--weight-medium);
    padding-top:var(--space-8);
    padding-bottom:var(--space-3);
    border-bottom:2px solid var(--border-default);
  }

  /* ─────────────────────────────────────────────
     PRICING — Still not sure CTA
     ───────────────────────────────────────────── */
  .trial-cta {
    text-align:center;
    padding:128px var(--space-8);
    position:relative;
    isolation:isolate;
    overflow:clip;
  }
  .trial-cta .container { position:relative; z-index:3; }
  .trial-canvas {
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none;
    z-index:0;
    display:block;
  }
  .trial-cta h2 {
    margin:0 0 var(--space-4);
    font-size:clamp(36px, 5vw, 64px);
    font-weight:var(--weight-medium);
    letter-spacing:-1.6px; line-height:1.05;
  }
  .trial-cta p {
    margin:0 auto var(--space-8);
    font-size:16px; color:var(--text-secondary); max-width:40ch;
  }

  /* Pricing: table scroll on mobile + hero font */
  .compare-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* Pricing mobile */
  @media (max-width:768px) {
    .pricing-grid {
      grid-template-columns:1fr;
      gap:var(--space-4);
      margin-bottom:64px;
    }
    .pricing-card {
      padding:var(--space-6);
    }
    .pricing-hero {
      padding:80px 0 48px;
    }
    .pricing-hero h1 {
      font-size:clamp(32px, 8vw, 48px);
    }
    .billing-toggle {
      width:100%;
    }
    .billing-toggle button {
      flex:1;
    }
    .compare-table th,
    .compare-table td {
      padding:var(--space-3) var(--space-3);
      font-size:12px;
    }
    .compare-table {
      min-width:540px;
    }
    .trial-cta {
      padding:64px var(--space-4);
    }
    .plan-desc {
      min-height:auto;
    }
  }

/* ═══════════════════════════════════════════════════
   From: trial.html
   ═══════════════════════════════════════════════════ */


  /* ─────────────────────────────────────────────
     TRIAL — Hero
     ───────────────────────────────────────────── */
  .trial-hero {
    position:relative;
    padding:128px 0 96px;
    text-align:center;
    isolation:isolate;
  }
  .trial-hero::after {
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:140px;
    background:linear-gradient(180deg, transparent 0%, var(--bg-page) 100%);
    pointer-events:none;
    z-index:2;
  }
  .trial-hero .container { position:relative; z-index:3; }
  .trial-hero h1 {
    margin:0 0 var(--space-3);
    font-size:clamp(40px, 6vw, 72px);
    font-weight:var(--weight-regular);
    letter-spacing:-2px; line-height:1.05;
  }
  .trial-hero h1 .accent { color:var(--primary-400); }
  .trial-hero .sub {
    margin:0 auto;
    font-size:16px; color:var(--text-secondary); max-width:50ch;
  }

  /* ─────────────────────────────────────────────
     TRIAL — Two-column cards
     ───────────────────────────────────────────── */
  .trial-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-6);
    padding:var(--space-16) 0 128px;
    align-items:stretch;
  }
  @media (max-width:650px) {
    .trial-grid { grid-template-columns:1fr; }
  }

  .trial-card {
    padding:var(--space-8);
    display:flex; flex-direction:column; gap:var(--space-5);
    position:relative;
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .trial-card:hover {
    transform:translateY(-4px);
    box-shadow:0 16px 48px -12px rgba(0,0,0,0.4);
  }
  .trial-card-DISABLED {
    border-color:var(--success-500);
  }
  .trial-card-DISABLED2::before {
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--success-500); border-radius:var(--radius-xs) var(--radius-xs) 0 0;
  }

  /* Right card — upgrade prompt */
  .upgrade-card {
    padding:var(--space-8);
    display:flex; flex-direction:column; gap:var(--space-5);
    background:var(--bg-card-default);
    position:relative;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .upgrade-card.featured-purple {
    border-color:var(--primary-400);
  }
  .upgrade-card.featured-purple::before {
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--primary-400); border-radius:var(--radius-xs) var(--radius-xs) 0 0;
  }
  .upgrade-card:hover {
    transform:translateY(-4px);
    box-shadow:0 16px 48px -12px rgba(0,0,0,0.4);
  }
  .upgrade-title {
    font-size:24px; font-weight:var(--weight-medium); letter-spacing:-0.3px;
    color:var(--text-primary);
  }
  .upgrade-desc {
    font-size:14px; color:var(--text-secondary); line-height:1.6;
  }
  .upgrade-price {
    display:flex; flex-direction:column; gap:var(--space-1);
    padding:var(--space-5) 0;
    border-top:1px solid var(--border-soft);
  }
  .upgrade-amount {
    font-size:36px; font-weight:var(--weight-medium);
    letter-spacing:-1px; line-height:1;
  }
  .upgrade-credits {
    font-size:13px; color:var(--text-muted);
  }
/* ═══════════════════════════════════════════════════
   From: benchmark.html
   ═══════════════════════════════════════════════════ */

  .logo-mark {
    width:24px; height:24px; border-radius:6px;
    background:linear-gradient(135deg, var(--primary-400), var(--primary-500));
    position:relative; overflow:hidden;
  }
  .logo-mark::after{ content:""; position:absolute; inset:6px; border-radius:2px; background:var(--bg-nav); }
  .badge-neutral { background:var(--badge-neutral-bg); color:var(--badge-neutral-text); }
  .hero-stat {
    display:inline-flex; align-items:center; gap:var(--space-3);
    padding:var(--space-3) var(--space-5);
    border:1px solid var(--border-default);
    border-radius:var(--radius-full);
    background:var(--bg-card-default);
    margin-bottom:var(--space-8);
  }
  .hero-stat .v {
    font-family:var(--font-sans); font-weight:var(--weight-medium);
    font-size:18px; letter-spacing:-0.4px; color:var(--primary-400);
    font-variant-numeric:tabular-nums;
  }
  .hero-stat .l {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
  }

  /* Hero ticker */
  .hero-ticker {
    margin-top:var(--space-16);
    border-top:1px solid var(--border-soft);
    border-bottom:1px solid var(--border-soft);
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  @keyframes tickerScroll {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); }
  }
  .hero-ticker .ticker-track {
    display:flex; gap:var(--space-5); align-items:center;
    width:max-content; padding:var(--space-3) 0;
    animation:tickerScroll 30s linear infinite;
  }
  .ticker-item .sym { font-weight:var(--weight-medium); color:var(--text-primary); }
  .ticker-item .px  { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }
  .ticker-item .delta-up   { color:var(--success-500); font-size:12px; }
  .ticker-item .delta-down { color:var(--danger-400); font-size:12px; }
  .ticker-item .live-dot {
    width:6px; height:6px; border-radius:var(--radius-full);
    background:var(--success-500); flex:none;
    box-shadow:0 0 0 3px rgba(22,186,132,0.18);
  }

  /* ─────────────────────────────────────────────
     2. ULTRA-LOW LATENCY (4 cards)
     ───────────────────────────────────────────── */
  .latency-grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4);
  }
  @media (max-width:1100px) {
    .latency-grid { grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:600px) {
    .latency-grid { grid-template-columns:1fr; }
    .lat-card { min-height:auto; }
    .lat-num { font-size:44px; letter-spacing:-1.4px; }
  }

  .lat-card {
    padding:var(--space-5);
    display:flex; flex-direction:column; gap:var(--space-3);
    min-height:240px;
    position:relative;
    overflow:hidden;
  }
  /* ULTRA card: full inverse of the others.
     In dark theme  -> white fill, black text/animation.
     In light theme -> black fill, white text/animation. */
  .lat-card.is-ultra {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: none;
  }

  .lat-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
  .lat-tier {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
  }
  .lat-card.is-ultra .lat-tier { color: var(--btn-primary-text); }

  /* Pulse wave (heartbeat-style) */
  .lat-pulse { width:54px; height:18px; }
  .lat-pulse path { fill:none; stroke:var(--text-muted); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
  .lat-card.is-ultra   .lat-pulse path { stroke: var(--btn-primary-text); animation:pulseSweep 0.9s linear infinite; }
  .lat-card.is-fast    .lat-pulse path { stroke:var(--text-secondary); animation:pulseSweep 1.4s linear infinite; }
  .lat-card.is-standard .lat-pulse path { stroke:var(--text-muted); animation:pulseSweep 2.0s linear infinite; }
  .lat-card.is-core    .lat-pulse path { stroke:var(--text-muted); animation:pulseSweep 2.8s linear infinite; }
  @keyframes pulseSweep {
    0%   { stroke-dasharray:8 80; stroke-dashoffset:80; opacity:0.4; }
    20%  { opacity:1; }
    100% { stroke-dasharray:8 80; stroke-dashoffset:-12; opacity:0.4; }
  }

  .lat-value {
    display:flex; align-items:baseline; gap:var(--space-2);
    margin-top:var(--space-2);
  }
  .lat-num {
    font-size:56px; font-weight:var(--weight-regular); letter-spacing:-2px; line-height:1;
    color:var(--text-primary);
    font-variant-numeric:tabular-nums;
  }
  .lat-card.is-ultra .lat-num  { color: var(--btn-primary-text); }
  .lat-card.is-ultra .lat-unit { color: color-mix(in srgb, var(--btn-primary-text) 55%, transparent); }
  .lat-card.is-ultra .lat-use  {
    color: color-mix(in srgb, var(--btn-primary-text) 70%, transparent);
    border-top-color: color-mix(in srgb, var(--btn-primary-text) 14%, transparent);
  }
  .lat-unit { font-size:18px; color:var(--text-muted); letter-spacing:-0.2px; }
  .lat-prefix { font-size:14px; color:var(--text-muted); font-weight:var(--weight-regular); letter-spacing:0; }
  .lat-card.is-ultra .lat-prefix { color: color-mix(in srgb, var(--btn-primary-text) 55%, transparent); }

  .lat-use {
    font-size:13px; color:var(--text-secondary);
    margin-top:auto; padding-top:var(--space-4);
    border-top:1px solid var(--border-soft);
    line-height:1.45;
  }

  .lat-flow {
    position:absolute; left:0; right:0; bottom:0;
    height:1px; pointer-events:none;
    background:linear-gradient(90deg, transparent 0%, var(--primary-400) 50%, transparent 100%);
    background-size:200% 100%;
    opacity:0;
  }
  .lat-card.is-ultra .lat-flow { display: none; }
  @keyframes flowSlide {
    from { background-position:-100% 0; }
    to   { background-position: 200% 0; }
  }

  /* ─────────────────────────────────────────────
     3. VOLUME POWERED
     ───────────────────────────────────────────── */
  .volume-block {
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    overflow:clip;
    background:
      radial-gradient(60% 80% at 0% 0%, rgba(186,163,253,0.10), transparent 60%),
      radial-gradient(40% 80% at 100% 100%, rgba(22,186,132,0.06), transparent 60%),
      var(--bg-card-default);
  }
  .vol-grid {
    display:grid; grid-template-columns:1.2fr 1fr;
    gap:var(--space-10);
    padding:var(--space-10);
    align-items:center;
  }
  @media (max-width:960px) {
    .vol-grid { grid-template-columns:1fr; gap:var(--space-8); padding:var(--space-8); }
  }
  @media (max-width:600px) {
    .vol-grid { padding:var(--space-6); gap:var(--space-6); }
    .vol-stat .v { font-size:clamp(56px, 14vw, 88px); letter-spacing:-2px; }
    .vol-stat .v .plus { font-size:clamp(28px, 7vw, 40px); }
    .vol-stat .desc { font-size:14px; }
    .vol-meta { grid-template-columns:repeat(2, 1fr); }
    .vol-tile { padding:var(--space-3); }
    .vol-tile .v { font-size:22px; }
  }

  .vol-stat .stat-label {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--primary-400); font-weight:var(--weight-medium);
    margin-bottom:var(--space-3);
    display:inline-flex; align-items:center; gap:var(--space-2);
  }
  .vol-stat .v {
    font-size:clamp(80px, 10vw, 140px);
    font-weight:var(--weight-regular); letter-spacing:-4px;
    line-height:0.9; color:var(--text-primary);
    font-variant-numeric:tabular-nums;
    display:flex; align-items:baseline; gap:var(--space-2);
  }
  .vol-stat .v .plus {
    font-size:clamp(40px, 5vw, 64px); color:var(--primary-400); letter-spacing:-2px;
  }
  .vol-stat .desc {
    margin-top:var(--space-4);
    color:var(--text-secondary); font-size:16px; max-width:42ch; line-height:1.55;
  }
  .vol-stat .desc strong { color:var(--text-primary); font-weight:var(--weight-medium); }

  .vol-meta {
    display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-3);
  }
  .vol-tile {
    padding:var(--space-4);
    border:1px solid var(--border-default); border-radius:var(--radius-xs);
    background:var(--bg-card-default);
  }
  .vol-tile .v {
    font-size:28px; font-weight:var(--weight-medium); letter-spacing:-0.6px;
    line-height:1; color:var(--text-primary); font-variant-numeric:tabular-nums;
  }
  .vol-tile .l {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
    margin-top:var(--space-2);
  }
  .vol-tile.live .v { color:var(--success-500); }

  /* ─────────────────────────────────────────────
     4. TWO FEED TYPES
     ───────────────────────────────────────────── */
  .feeds-grid {
    max-width:100%; overflow:hidden;
    display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);
    align-items:start;
  }
  @media (max-width:900px) {
    .feeds-grid {
    max-width:100%; overflow:hidden; grid-template-columns:1fr; }
  }

  .feed-card {
    max-width:100%; overflow:hidden; box-sizing:border-box;
    padding:var(--space-8);
    display:flex; flex-direction:column; gap:var(--space-5);
  }
  @media (max-width:600px) {
    .feeds-grid { gap:var(--space-3); }
    .feed-card {
    max-width:100%; overflow:visible; box-sizing:border-box; padding:var(--space-4); gap:var(--space-3); }
    .feed-card h3 { font-size:22px; letter-spacing:-0.6px; }
    .feed-card .ft-sub { font-size:14px; }
    .feed-card .ft-desc { font-size:13px; }
    .feed-points li { font-size:13px; padding:var(--space-1) 0; }
    .feed-bottom { padding-top:var(--space-3); }
    .feed-bottom-label { margin-bottom:var(--space-2); }
  }
  @media (max-width:380px) {
    .feed-card { padding:var(--space-3); }
  }
  .feed-card .ft-tag {
    align-self:flex-start;
  }
  .feed-card h3 {
    margin:0; font-size:28px; font-weight:var(--weight-regular); letter-spacing:-0.8px;
    line-height:1.1;
  }
  .feed-card .ft-sub { font-size:15px; color:var(--text-secondary); margin:0; }
  .feed-card .ft-desc { font-size:14px; color:var(--text-secondary); line-height:1.55; margin:0; }
  .feed-points { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-2); }
  .feed-points li {
    display:flex; gap:var(--space-3); align-items:flex-start;
    padding:var(--space-2) 0; border-top:1px solid var(--border-soft);
    font-size:14px; color:var(--text-secondary);
  }
  .feed-points li:first-child { border-top:none; }
  .feed-points li .check { color:var(--success-500); font-size:18px; line-height:1; margin-top:2px; }

  /* Feed bottom (visual) area */
  .feed-bottom {
    padding-top:var(--space-4);
    border-top:1px solid var(--border-soft);
  }
  .feed-bottom-label {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
    margin-bottom:var(--space-3);
  }

  /* Provider grid (3x3) */
  .provider-grid {
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-2);
  }
  .provider-cell {
    display:flex; align-items:center; gap:var(--space-2);
    padding:var(--space-3) var(--space-3);
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    background:var(--bg-card-default);
    color:var(--text-muted);
    font-size:13px; font-weight:var(--weight-medium); letter-spacing:-0.01em;
    transition:color var(--duration-slow) ease, border-color var(--duration-slow) ease, background-color var(--duration-slow) ease;
    cursor:default;
    min-width:0;
  }
  .provider-cell:hover {
    color:var(--text-primary);
    border-color:var(--border-default);
    background:var(--bg-card-default);
  }
  .provider-cell .plogo {
    width:20px; height:20px; border-radius:4px; flex:none;
    object-fit:cover;
    filter:saturate(0.6) opacity(0.7);
    transition:filter var(--duration-slow) ease;
  }
  .provider-cell:hover .plogo { filter:saturate(1) opacity(1); }

  @media (max-width:600px) {
    .provider-grid { gap:6px; }
    .provider-cell { padding:6px; font-size:11px; gap:6px; }
    .provider-cell .plogo { width:16px; height:16px; }
  }
  @media (max-width:480px) {
    .provider-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width:380px) {
    .provider-grid { gap:4px; }
    .provider-cell { padding:5px; font-size:10px; gap:4px; }
    .provider-cell .plogo { width:14px; height:14px; }
  }

  /* Before/After mini chart */
  .ba-chart { width:100%; height:130px; display:block; }
  .ba-legend {
    display:flex; gap:var(--space-4); margin-top:var(--space-3);
    font-size:12px; color:var(--text-muted);
  }
  .ba-legend .item { display:inline-flex; align-items:center; gap:var(--space-2); }
  .ba-legend .swatch { width:16px; height:2px; border-radius:1px; }
  .ba-legend .swatch.trad { background:var(--text-muted); }
  .ba-legend .swatch.seda { background:var(--chart-primary); }

  /* ─────────────────────────────────────────────
     5. LIVE PRICE CHART
     ───────────────────────────────────────────── */
  .tv-card { padding:var(--space-5); }
  .tv-head {
    display:flex; flex-direction:column; gap:var(--space-3);
    padding-bottom:var(--space-3); border-bottom:1px solid var(--border-soft);
  }
  .tv-row-top {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-3); flex-wrap:wrap;
  }
  .tv-left { display:flex; align-items:center; gap:var(--space-3); flex:1; min-width:0; }
  .tv-pair { display:flex; flex-direction:column; gap:2px; }
  .tv-symbol { font-size:18px; font-weight:var(--weight-medium); letter-spacing:-0.2px; white-space:nowrap; }
  .tv-meta { font-size:12px; color:var(--text-muted); }
  .tv-right { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }
  .tv-price { font-size:28px; font-weight:var(--weight-medium); letter-spacing:-0.6px; font-variant-numeric:tabular-nums; }
  .tv-delta {
    font-size:13px; font-weight:var(--weight-medium); color:var(--success-500);
    display:inline-flex; align-items:center; gap:var(--space-1);
  }

  .tv-tabs {
    display:inline-flex; align-self:flex-start;
    border:1px solid var(--border-default); border-radius:var(--radius-xs); overflow:clip;
  }
  .tv-tabs button {
    background:transparent; border:none; color:var(--text-muted);
    padding:6px 14px; font-size:11px; letter-spacing:0.8px;
    font-family:var(--font-sans); font-weight:var(--weight-medium);
    cursor:pointer;
  }
  .tv-tabs button + button { border-left:1px solid var(--border-default); }
  .tv-tabs button.is-active { background:var(--bg-card-high); color:var(--text-primary); }

  .tv-tools { display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; }
  .tv-tools .seg {
    display:inline-flex;
    border:1px solid var(--border-default); border-radius:var(--radius-xs); overflow:clip;
  }
  .tv-tools .seg button {
    background:transparent; border:none; color:var(--text-muted);
    padding:6px 10px; font-size:11px; letter-spacing:0.8px;
    font-family:var(--font-sans); font-weight:var(--weight-medium);
    cursor:pointer;
  }
  .tv-tools .seg button + button { border-left:1px solid var(--border-default); }
  .tv-tools .seg button.is-active { background:var(--bg-card-high); color:var(--text-primary); }

  .tv-chart-wrap { position:relative; padding-top:var(--space-3); }
  .tv-chart {
    width:100%; height:440px;
    background:transparent;
    border-radius:var(--radius-xs);
    display:none;
  }
  .tv-chart.is-active { display:block; }

  .tv-foot {
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
    padding-top:var(--space-3); border-top:1px solid var(--border-soft);
    color:var(--text-muted); font-size:12px;
  }

  /* ─────────────────────────────────────────────
     RESPONSIVE: Stack TV header badges above label (≤650px)
     ───────────────────────────────────────────── */
  @media (max-width:650px) {
    .tv-row-top {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
    }
    .tv-left {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2);
      width: 100%;
    }
    .tv-right {
      align-items: flex-start;
      width: 100%;
    }
    .tv-price { font-size: 28px; }
    .tv-tools {
      flex-wrap: wrap;
      gap: 6px;
    }
    .tv-symbol { font-size: 18px; }
    .tv-meta { font-size: 11px; }
    #hl-chart { height: 280px !important; }
  }

  /* ─────────────────────────────────────────────
     RESPONSIVE: Small mobile (≤380px)
     ───────────────────────────────────────────── */
  @media (max-width:380px) {
    .hero h1 { font-size:26px; }
    .vol-stat .v { font-size:44px; }
    .vol-meta { grid-template-columns:1fr; }
    .tv-tabs button { padding:6px 10px; font-size:10px; }
    #hl-chart { height:220px !important; }
  }
/* ═══════════════════════════════════════════════════
   From: indices.html
   ═══════════════════════════════════════════════════ */

  .hero .lede {
    margin:0 auto var(--space-8);
    font-size:16px; color:var(--text-secondary);
    max-width:60ch;
  }

  /* Combine animation stage */
  .combine-stage {
    position:relative;
    margin-top:var(--space-16);
    display:grid; grid-template-columns:1fr auto 1fr;
    gap:var(--space-8); align-items:center;
    min-height:380px;
  }

  /* Asset columns (marquees) */
  .combine-col {
    position:relative;
    height:380px; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
  .combine-col .track {
    display:flex; flex-direction:column; gap:var(--space-3);
    will-change:transform;
  }
  .combine-col.left .track  { animation:scrollUp   28s linear infinite; }
  .combine-col.right .track { animation:scrollDown 32s linear infinite; }
  .combine-col.left  { justify-self:end; max-width:240px; width:100%; }
  .combine-col.right { justify-self:start; max-width:240px; width:100%; }

  @keyframes scrollUp   { from { transform:translateY(0); } to { transform:translateY(-50%); } }
  @keyframes scrollDown { from { transform:translateY(-50%); } to { transform:translateY(0); } }

  .asset-tag {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    background:var(--bg-card-default);
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    font-size:14px; font-weight:var(--weight-medium);
    color:var(--text-primary);
    backdrop-filter:blur(6px);
  }
  .asset-tag .ic {
    width:24px; height:24px; border-radius:var(--radius-xs);
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--badge-primary-bg); color:var(--badge-primary-text);
    flex:none;
  }
  .asset-tag .ic .material-symbols-rounded { font-size:14px; }
  .asset-tag .px {
    font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
  }

  /* Center merge */
  .combine-merge {
    position:relative;
    width:340px; max-width:100%;
    padding:var(--space-5);
    background:var(--bg-card-default);
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    box-shadow:0 30px 80px -20px rgba(0,0,0,0.45);
  }
  .combine-merge .pulse {
    position:absolute; inset:-1px; border-radius:var(--radius-xs);
    box-shadow:0 0 0 1px var(--primary-400);
    opacity:0; animation:pulse 4s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes pulse {
    0%,100%   { opacity:0; transform:scale(1); }
    25%       { opacity:0.8; transform:scale(1.02); }
    50%       { opacity:0; transform:scale(1.05); }
  }

  .combine-merge .label {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
  }
  .combine-merge .name {
    font-size:24px; font-weight:var(--weight-medium); letter-spacing:-0.4px;
    margin-top:var(--space-1);
  }
  .combine-merge .desc {
    font-size:12px; color:var(--text-muted);
    margin-top:var(--space-1);
  }

  .merge-arrow-from-left, .merge-arrow-from-right {
    position:absolute; top:50%; transform:translateY(-50%);
    color:var(--text-muted); font-size:14px;
  }
  .merge-arrow-from-left  { left:-28px; }
  .merge-arrow-from-right { right:-28px; }

  /* Combine stage responsive: hide decorative side tracks + arrows on small screens,
     let the central card use full available width. */
  @media (max-width:900px) {
    .combine-stage {
      grid-template-columns:1fr;
      justify-items:center;
      min-height:auto;
      gap:var(--space-6);
      margin-top:var(--space-10);
    }
    .combine-col,
    .merge-arrow-from-left,
    .merge-arrow-from-right { display:none; }
    .combine-merge { width:100%; max-width:420px; }
  }
  @media (max-width:480px) {
    .combine-merge { padding:var(--space-4); }
    .comp-name { font-size:16px; }
    .comp-row .lbl { width:auto; flex:1; min-width:0; font-size:12px; }
    .comp-row .bar { max-width:none; }
  }

  /* Composition rotator */
  .comp-stack {
    position:relative; height:140px; margin-top:var(--space-3);
  }
  .comp-frame {
    position:absolute; inset:0;
    display:flex; flex-direction:column; gap:var(--space-2);
    opacity:0;
    animation:rotate 12s ease-in-out infinite;
  }
  .comp-frame:nth-child(1) { animation-delay:0s; }
  .comp-frame:nth-child(2) { animation-delay:4s; }
  .comp-frame:nth-child(3) { animation-delay:8s; }
  @keyframes rotate {
    0%,2%   { opacity:0; transform:translateY(8px); }
    8%,30%  { opacity:1; transform:translateY(0); }
    36%,100%{ opacity:0; transform:translateY(-8px); }
  }
  .comp-name {
    font-size:18px; font-weight:var(--weight-medium); letter-spacing:-0.2px;
  }
  .comp-row {
    display:flex; align-items:center;
    gap:var(--space-3);
  }
  .comp-row .lbl { font-size:13px; color:var(--text-secondary); width:120px; flex-shrink:0; }
  .comp-row .bar {
    flex:1; max-width:130px; height:4px;
    background:var(--bg-card-high);
    border-radius:var(--radius-full); overflow:clip;
  }
  .comp-row .bar > span {
    display:block; height:100%;
    background:var(--primary-400); border-radius:inherit;
  }
  .comp-row .pct {
    font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
    min-width:40px; text-align:right;
  }

  .example-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-4);
  }
  /* Three cards: stay 3-across as long as it fits, then drop straight to 1-column.
     Never go to 2 + 1 (orphaned card on its own row). */
  @media (max-width:762px) {
    .example-grid { grid-template-columns:1fr; }
    .example { min-height:auto; }
  }
  .example {
    padding:var(--space-5);
    display:flex; flex-direction:column; gap:var(--space-3);
    min-height:260px;
  }
  .example-head {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-2);
  }
  .example-name { font-size:18px; font-weight:var(--weight-medium); letter-spacing:-0.2px; }
  .example-tagline { font-size:13px; color:var(--text-muted); margin-top:var(--space-1); }
  .example-mini { display:flex; flex-direction:column; gap:var(--space-2); margin-top:auto; padding-top:var(--space-3); border-top:1px solid var(--border-soft); }
  .example-mini .row {
    display:flex; align-items:center; gap:var(--space-2);
    font-size:12px; color:var(--text-secondary);
  }
  .example-mini .row > span:first-child { width:110px; flex-shrink:0; }
  .example-mini .row .pct { font-family:var(--font-mono); color:var(--text-muted); min-width:32px; text-align:right; }
  .example-mini .row .bar {
    flex:1; height:4px;
    background:var(--bg-card-high);
    border-radius:var(--radius-full); overflow:clip;
  }
  .example-mini .row .bar > span {
    display:block; height:100%;
    background:var(--primary-400); border-radius:inherit;
  }

  /* Illustration visual at top of each card */
  .example-visual {
    height:120px; width:100%;
    border-radius:var(--radius-xs);
    background:transparent;
    position:relative; overflow:hidden;
    border:1px solid var(--border-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .example-visual svg { width:100%; height:100%; display:block; }

  /* Donut chart animations */
  .donut-segment {
    transition:opacity 0.3s ease;
  }
  .donut-label { font-family:var(--font-mono); }

  /* Orbit animation for MUSK card */
  /* orbit animations now handled by SVG animateMotion */
  
  @keyframes orbitSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

  /* Donut slow rotation */
  .donut-ring { animation:donutSpin 20s linear infinite; transform-origin:0px 0px; }
  @keyframes donutSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

  /* Donut segment subtle pulse */
  .donut-segment-pulse { animation:donutPulse 3s ease-in-out infinite; }
  .donut-segment-pulse:nth-child(2) { animation-delay:1s; }
  .donut-segment-pulse:nth-child(3) { animation-delay:2s; }
  @keyframes donutPulse {
    0%,100% { stroke-width:14; }
    50% { stroke-width:17; }
  }

  /* Stacked bar rebalance */
  .stack-segment { transition:width 1.2s cubic-bezier(0.25, 1, 0.5, 1), x 1.2s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease; }
  .stack-label { transition:x 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
  .example .ticker-pill {
    display:inline-flex; align-items:center; gap:6px;
    padding:2px 8px; border-radius:var(--radius-full);
    font-size:11px; letter-spacing:0.8px; font-weight:500;
    background:var(--badge-primary-bg); color:var(--badge-primary-text);
  }

  /* ─────────────────────────────────────────────
     Section 3 — Capabilities
     ───────────────────────────────────────────── */
  .features { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4); }
  .feature {
    padding:var(--space-5);
    display:flex; flex-direction:column; gap:var(--space-3);
    min-height:240px;
  }
  .feature-icon {
    width:36px; height:36px; border-radius:var(--radius-xs);
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--badge-primary-bg); color:var(--badge-primary-text);
    margin-bottom:var(--space-1);
  }
  .feature h3 { margin:0; font-size:18px; font-weight:var(--weight-regular); letter-spacing:-0.2px; }
  .feature p { margin:0; font-size:14px; color:var(--text-secondary); }
  @media (max-width:800px) {
    .features { grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:520px) {
    .features { grid-template-columns:1fr; }
    .feature { min-height:auto; }
  }

  /* ─────────────────────────────────────────────
     Section 4 — USA500 Spotlight
     ───────────────────────────────────────────── */
  .spotlight {
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    overflow:clip;
    background:
      radial-gradient(60% 80% at 100% 0%, rgba(186,163,253,0.10), transparent 60%),
      radial-gradient(40% 80% at 0% 100%, rgba(22,186,132,0.06), transparent 60%),
      var(--bg-card-default);
  }
  .spotlight-grid {
    display:grid; grid-template-columns:1fr 1.4fr;
  }

  .spotlight-meta { padding:var(--space-10); display:flex; flex-direction:column; gap:var(--space-5); }
  .spot-tag {
    display:inline-flex; align-items:center; gap:var(--space-2);
    align-self:flex-start;
  }
  .spot-name { font-size:clamp(28px, 5.4vw, 42px); font-weight:var(--weight-regular); letter-spacing:-1.2px; line-height:1; }
  .spot-desc { font-size:14px; color:var(--text-secondary); max-width:48ch; }

  .spot-stat {
    display:flex; flex-direction:column; gap:var(--space-1);
    padding:var(--space-4) 0;
    border-top:1px solid var(--border-soft);
    border-bottom:1px solid var(--border-soft);
  }
  .spot-stat .v {
    font-size:clamp(40px, 8vw, 64px); font-weight:var(--weight-regular); letter-spacing:-2.4px; line-height:1;
    color:var(--primary-400);
  }
  .spot-stat .l { font-size:12px; letter-spacing:1.1px; text-transform:uppercase; color:var(--text-muted); margin-top:var(--space-2); }

  .powered-by {
    display:flex; align-items:center; gap:var(--space-4);
    flex-wrap:wrap;
  }
  .powered-by .pb-label {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted);
  }
  .partner-logo {
    display:inline-flex; align-items:center; gap:var(--space-2);
    padding:var(--space-2) var(--space-3);
    border:1px solid var(--border-default); border-radius:var(--radius-xs);
    font-size:13px; font-weight:var(--weight-medium); color:var(--text-primary);
  }
  .partner-logo .plogo {
    width:20px; height:20px; border-radius:50%; object-fit:cover;
  }
  /* Partner badges live in their own row so they always stack together
     (instead of one wrapping next to the label and the other on its own line). */
  .powered-partners {
    display:flex; align-items:center; gap:var(--space-2);
    flex-wrap:wrap;
  }

  .spotlight-chart {
    border-left:1px solid var(--border-default);
    padding:var(--space-6);
    display:flex; flex-direction:column; gap:var(--space-3);
  }
  .tv-chart.lg { height:420px; }

  /* Spotlight responsive: stack USA500 info above the chart on smaller screens. */
  @media (max-width:800px) {
    .spotlight-grid { grid-template-columns:1fr; }
    .spotlight-meta { padding:var(--space-6); }
    .spotlight-chart {
      border-left:none;
      border-top:1px solid var(--border-default);
      padding:var(--space-5);
    }
    .tv-chart.lg { height:320px; }
  }
  @media (max-width:480px) {
    .spotlight-meta  { padding:var(--space-4); gap:var(--space-4); }
    .spotlight-chart { padding:var(--space-3); }
    .tv-chart.lg { height:240px; }
  }
/* ═══════════════════════════════════════════════════
   From: outcome.html
   ═══════════════════════════════════════════════════ */

  .badge-danger  { background:var(--badge-danger-bg);  color:var(--badge-danger-text); }

  /* Resolver stage (hero centerpiece) */
  .resolver-stage {
    position:relative;
    margin-top:var(--space-16);
    display:grid; grid-template-columns:1fr auto 1fr;
    gap:var(--space-8); align-items:center;
    min-height:380px;
  }

  .resolver-col {
    position:relative;
    height:380px; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
  .resolver-col .track { display:flex; flex-direction:column; gap:var(--space-3); will-change:transform; }
  .resolver-col.left  .track { animation:scrollUp   30s linear infinite; }
  .resolver-col.right .track { animation:scrollDown 34s linear infinite; }
  .resolver-col.left  { justify-self:end;   max-width:260px; width:100%; }
  .resolver-col.right { justify-self:start; max-width:260px; width:100%; }

  .feed-tag {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    background:var(--bg-card-default);
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    font-size:14px; font-weight:var(--weight-medium); color:var(--text-primary);
  }
  .feed-tag .ic {
    width:24px; height:24px; border-radius:var(--radius-xs);
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--badge-primary-bg); color:var(--badge-primary-text);
    flex:none;
  }
  .feed-tag .ic .material-symbols-rounded { font-size:14px; }
  .feed-tag .px { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
  .feed-tag .badge-sm { flex:none; }

  /* Resolver core card */
  .resolver-core {
    position:relative;
    width:380px; max-width:100%;
    padding:var(--space-5);
    background:var(--bg-card-default);
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    box-shadow:0 30px 80px -20px rgba(0,0,0,0.45);
  }

  /* Stage responsive: hide the decorative side feeds on small screens, let the core card use full width. */
  @media (max-width:900px) {
    .resolver-stage {
      grid-template-columns:1fr;
      justify-items:center;
      min-height:auto;
      gap:var(--space-6);
      margin-top:var(--space-10);
    }
    .resolver-col,
    .resolver-arrow-left,
    .resolver-arrow-right { display:none; }
    .resolver-core { width:100%; max-width:420px; }
  }
  @media (max-width:480px) {
    .resolver-core { padding:var(--space-4); }
    .resolve-question { font-size:16px; }
  }
  .resolver-core .pulse {
    position:absolute; inset:-1px; border-radius:var(--radius-xs);
    box-shadow:0 0 0 1px var(--primary-400);
    opacity:0; animation:pulse 4s ease-in-out infinite;
    pointer-events:none;
  }
  .resolver-core .label {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
    display:flex; justify-content:space-between; align-items:center;
  }
  .resolver-core .label .live {
    display:inline-flex; align-items:center; gap:var(--space-2);
    color:var(--success-500);
  }
  .resolver-core .label .live .dot {
    width:6px; height:6px; border-radius:var(--radius-full);
    background:var(--success-500);
    box-shadow:0 0 0 3px rgba(22,186,132,0.18);
  }

  .resolve-stack { position:relative; height:200px; margin-top:var(--space-3); }
  .resolve-frame {
    position:absolute; inset:0;
    display:flex; flex-direction:column; gap:var(--space-3);
    justify-content:space-between;
    opacity:0;
    animation:rotate 12s ease-in-out infinite;
  }
  .resolve-frame:nth-child(1){ animation-delay:0s; }
  .resolve-frame:nth-child(2){ animation-delay:4s; }
  .resolve-frame:nth-child(3){ animation-delay:8s; }
  .resolve-question {
    font-size:18px; font-weight:var(--weight-medium); letter-spacing:-0.2px;
    line-height:1.25;
  }
  .resolve-tree { position:relative; padding:var(--space-2) 0; }
  .resolve-row {
    display:flex; align-items:center; gap:var(--space-3);
    padding:var(--space-2) 0;
  }
  .resolve-row + .resolve-row { border-top:1px solid var(--border-soft); }
  .resolve-row .branch {
    width:36px; height:18px;
    flex:none;
    border-left:1px solid var(--border-default);
    border-bottom:1px solid var(--border-default);
    border-bottom-left-radius:var(--radius-sm);
    margin-left:8px;
  }
  .resolve-row.up .branch {
    border-bottom:none;
    border-top:1px solid var(--border-default);
    border-top-left-radius:var(--radius-sm);
    border-bottom-left-radius:0;
    align-self:flex-start;
  }
  .resolve-row .label { font-size:13px; color:var(--text-secondary); flex:1; }
  .resolve-row .pct { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); min-width:38px; text-align:right; }
  .resolve-foot {
    margin-top:auto;
    padding-top:var(--space-3);
    border-top:1px solid var(--border-soft);
    display:flex; align-items:center; justify-content:space-between;
    font-size:12px; color:var(--text-muted);
  }

  /* arrows on either side of the core */
  .resolver-arrow-left, .resolver-arrow-right {
    position:absolute; top:50%; transform:translateY(-50%);
    color:var(--text-muted); font-size:14px;
  }
  .resolver-arrow-left  { left:-28px; }
  .resolver-arrow-right { right:-28px; }

  /* ─────────────────────────────────────────────
     2. WHAT IS OUTCOME
     ───────────────────────────────────────────── */
  .what-grid {
    display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
    gap:var(--space-10);
    align-items:flex-start;
  }
  @media (max-width:900px) {
    .what-grid { grid-template-columns:1fr; gap:var(--space-6); }
  }

  .what-copy p {
    font-size:18px; line-height:1.55; color:var(--text-secondary);
    margin:0 0 var(--space-4);
    max-width:60ch;
  }
  .what-copy p strong { color:var(--text-primary); font-weight:var(--weight-medium); }

  .differentiator {
    padding:var(--space-6);
    background:var(--bg-card-default);
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    position:relative; overflow:clip;
    background-image:
      radial-gradient(50% 80% at 100% 0%, rgba(186,163,253,0.08), transparent 65%),
      radial-gradient(40% 80% at 0% 100%, rgba(22,186,132,0.05), transparent 65%);
  }
  .differentiator .lbl {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--primary-400); font-weight:var(--weight-medium);
    margin-bottom:var(--space-3);
    display:inline-flex; align-items:center; gap:var(--space-2);
  }
  .differentiator h3 {
    margin:0 0 var(--space-3);
    font-size:22px; font-weight:var(--weight-regular); letter-spacing:-0.4px;
    line-height:1.2;
  }
  .differentiator p {
    margin:0; color:var(--text-secondary); font-size:14px; line-height:1.55;
  }

  /* ─────────────────────────────────────────────
     3. PRODUCT EXAMPLES (3x2)
     ───────────────────────────────────────────── */
  .examples-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-4);
  }
  @media (max-width:960px) {
    .examples-grid { grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:600px) {
    .examples-grid { grid-template-columns:1fr; }
  }

  .ex-card {
    padding:var(--space-5);
    display:flex; flex-direction:column; gap:var(--space-4);
    min-height:280px;
  }
  .ex-visual {
    height:96px; width:100%;
    border-radius:var(--radius-xs);
    background:transparent;
    position:relative; overflow:hidden;
    border:1px solid var(--border-soft);
  }
  .ex-visual svg { width:100%; height:100%; display:block; }

  .ex-meta { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
  .ex-cat {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
  }
  .ex-pill { padding:2px 8px; border-radius:var(--radius-full); border:1px solid var(--border-default); font-size:10px; letter-spacing:0.6px; color:var(--text-muted); }
  .ex-card h3 {
    margin:0;
    font-size:18px; font-weight:var(--weight-regular); letter-spacing:-0.2px;
  }
  .ex-card p {
    margin:0;
    font-size:13px; color:var(--text-secondary); line-height:1.5;
  }

  /* Visual: up/down arrows */
  .ud-line { stroke:var(--border-default); stroke-width:1; stroke-dasharray:3 3; }
  .ud-up   { fill:var(--success-500); }
  .ud-dn   { fill:var(--danger-400); }
  .ud-bar  { fill:var(--bg-card-high); }
  .ud-bar.fill-up { fill:var(--success-loud); animation:barPulse 3s ease-in-out infinite; }
  @keyframes barPulse { 0%,100% { opacity:0.7; } 50% { opacity:1; } }

  .ex-up-down .arrow-up   { animation:bobUp   2.4s ease-in-out infinite; }
  .ex-up-down .arrow-down { animation:bobDown 2.4s ease-in-out infinite; }
  @keyframes bobUp {
    0%,100% { transform:translateY(0);    opacity:0.7; }
    50%     { transform:translateY(-6px); opacity:1; }
  }
  @keyframes bobDown {
    0%,100% { transform:translateY(0);   opacity:0.7; }
    50%     { transform:translateY(6px); opacity:1; }
  }

  /* Probability bar visual */
  .prob-bar { fill:var(--bg-card-high); }
  .prob-fill { fill:var(--success-500); animation:probFill 5s ease-in-out infinite; }
  @keyframes probFill {
    0%   { width:42%; }
    50%  { width:64%; }
    100% { width:42%; }
  }

  /* Payoff curve visual */
  .payoff-curve {
    fill:none; stroke:var(--chart-primary); stroke-width:2;
    stroke-dasharray:600; stroke-dashoffset:600;
    animation:dashIn 5s linear infinite;
  }
  @keyframes dashIn {
    0%   { stroke-dashoffset:600; }
    50%  { stroke-dashoffset:0; }
    100% { stroke-dashoffset:0; }
  }

  /* Scoreboard */
  .sb-team { font-family:var(--font-sans); font-size:11px; fill:var(--text-muted); }
  .sb-score { font-family:var(--font-sans); font-weight:500; font-size:22px; fill:var(--text-primary); letter-spacing:-0.4px; }
  .sb-bar.lead { animation:leadPulse 2s ease-in-out infinite; }
  .sb-bar  { fill:var(--bg-card-high); }
  .sb-bar.lead { fill:var(--primary-400); animation:leadPulse 3s ease-in-out infinite; }
  @keyframes leadPulse { 0%,100% { opacity:0.6; } 50% { opacity:1; } }

  /* Thermometer */
  .therm-track { fill:var(--bg-card-high); }
  .therm-fill  { fill:var(--danger-400); transform-origin:bottom; animation:thermRise 4s ease-in-out infinite; }
  @keyframes thermRise {
    0%,100% { transform:scaleY(0.45); }
    55%     { transform:scaleY(0.92); }
  }
  .therm-thresh { stroke:var(--text-muted); stroke-dasharray:3 3; }

  /* Range / barrier visual */
  .rng-band { fill:var(--badge-primary-bg); }
  .rng-line { fill:none; stroke:var(--chart-primary); stroke-width:2; stroke-linejoin:round; }
  .rng-bound { stroke:var(--text-muted); stroke-dasharray:3 3; }

  /* ─────────────────────────────────────────────
     4. HYPERLIQUID HIP4
     ───────────────────────────────────────────── */
  .hip {
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    overflow:clip;
    background:
      radial-gradient(60% 80% at 100% 0%, rgba(186,163,253,0.10), transparent 60%),
      radial-gradient(40% 80% at 0% 100%, rgba(22,186,132,0.06), transparent 60%),
      var(--bg-card-default);
    display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .hip-meta { padding:var(--space-10); display:flex; flex-direction:column; gap:var(--space-5); }
  .hip-tag { display:inline-flex; align-items:center; gap:var(--space-2); align-self:flex-start; }
  .hip-title {
    font-size:38px; font-weight:var(--weight-regular); letter-spacing:-1.0px; line-height:1.05;
    margin:0;
  }
  .hip-desc { color:var(--text-secondary); font-size:15px; max-width:48ch; line-height:1.55; }

  .hip-points {
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap:var(--space-2);
  }
  .hip-points li {
    display:flex; gap:var(--space-3); align-items:flex-start;
    padding:var(--space-2) 0;
    font-size:14px; color:var(--text-secondary);
    border-top:1px solid var(--border-soft);
  }
  .hip-points li:first-child { border-top:none; }
  .hip-points li .check { color:var(--success-500); font-size:18px; line-height:1; margin-top:2px; }

  .hip-partner { padding:var(--space-10); border-left:1px solid var(--border-default); display:flex; flex-direction:column; gap:var(--space-4); justify-content:center; }

  /* HIP4 section — responsive overrides (placed AFTER the base rules so they win the cascade) */
  @media (max-width:960px) {
    .hip { grid-template-columns:1fr; }
    .hip-meta, .hip-partner { padding:var(--space-6); }
    .hip-partner { border-left:none; border-top:1px solid var(--border-default); }
    .hip-title { font-size:30px; letter-spacing:-0.6px; }
  }
  @media (max-width:600px) {
    .hip-meta, .hip-partner { padding:var(--space-5); }
    .hip-title { font-size:24px; letter-spacing:-0.4px; }
    .hip-desc { font-size:14px; }
    /* Force the (inline-styled) button row to wrap so the buttons don't push the card past the viewport. */
    .hip-meta > div[style*="display:flex"] { flex-wrap:wrap; }
    .hip-meta > div[style*="display:flex"] .btn { flex:1 1 auto; }
    /* "Also live on" + EVM/SVM/Cosmos/Move — stack label above the pill row and let the pills wrap. */
    .hip-partner > div[style*="display:flex"] { flex-direction:column; gap:var(--space-2) !important; }
    .hip-partner > div[style*="display:flex"] > span:last-child { flex-wrap:wrap; justify-content:center; row-gap:var(--space-2); }
  }

  .partner-card {
    padding:var(--space-6);
    border:1px solid var(--border-default);
    border-radius:var(--radius-xs);
    background:var(--bg-card-default);
    display:flex; flex-direction:column; gap:var(--space-3);
  }
  .partner-card .pc-row {
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  }
  .partner-card .pc-name {
    font-size:18px; font-weight:var(--weight-medium); letter-spacing:-0.2px;
    display:flex; align-items:center; gap:var(--space-2);
  }
  .partner-card .pc-name .pc-mark {
    width:24px; height:24px; border-radius:6px;
    background:linear-gradient(135deg, #16ba84, #a2e3ce);
    flex:none;
  }
  .partner-card .pc-meta { font-size:12px; color:var(--text-muted); }
  .partner-card .pc-stat {
    font-family:var(--font-mono); font-size:11px;
    color:var(--text-muted); padding:var(--space-1) var(--space-2);
    border:1px solid var(--border-default); border-radius:var(--radius-xs);
  }
  .partner-card .pc-bar { height:4px; background:var(--bg-card-high); border-radius:var(--radius-full); overflow:clip; }
  .partner-card .pc-bar > span { display:block; height:100%; width:78%; background:var(--success-500); border-radius:inherit; }
  @media (max-width:600px) {
    .partner-card { padding:var(--space-4); gap:var(--space-2); }
    .partner-card .pc-name { font-size:16px; }
    .partner-card .pc-name .pc-mark { width:20px; height:20px; }
  }

  /* ─────────────────────────────────────────────
     5. DATA SOURCE FLEXIBILITY
     ───────────────────────────────────────────── */
  .sources-grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4);
  }
  @media (max-width:760px) {
    .sources-grid { grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:420px) {
    .sources-grid { grid-template-columns:1fr; }
    .src-card { min-height:auto; }
  }

  .src-card {
    padding:var(--space-5);
    display:flex; flex-direction:column; gap:var(--space-3);
    min-height:240px;
  }
  .src-icon {
    width:36px; height:36px; border-radius:var(--radius-xs);
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--badge-primary-bg); color:var(--badge-primary-text);
  }
  .src-card h3 {
    margin:0; font-size:16px; font-weight:var(--weight-medium); letter-spacing:-0.1px;
  }
  .src-card p {
    margin:0; font-size:13px; color:var(--text-secondary); line-height:1.5;
  }
  .src-list { list-style:none; padding:0; margin:auto 0 0; display:flex; flex-direction:column; gap:var(--space-2); padding-top:var(--space-3); border-top:1px solid var(--border-soft); }
  .src-list li {
    font-size:12px; color:var(--text-muted);
    display:flex; align-items:center; gap:var(--space-2);
  }
  .src-list li::before {
    content:""; width:4px; height:4px; border-radius:var(--radius-full);
    background:var(--text-muted); flex:none;
  }
/* ═══════════════════════════════════════════════════
   From: 404.html
   ═══════════════════════════════════════════════════ */


  .proof-customers {
    border-left:1px solid var(--border-soft);
    padding-left:var(--space-6);
    display:flex; flex-direction:column; gap:var(--space-3);
  }
  .proof-label {
    font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--text-muted); font-weight:var(--weight-medium);
  }
  .customer-logo .cmark {
    width:14px; height:14px; border-radius:3px; flex:none;
    filter:saturate(0.6) opacity(0.7);
    transition:filter var(--duration-slow);
  }
  .customer-logo:hover .cmark { filter:saturate(1) opacity(1); }
  .cmark.injective { background:linear-gradient(135deg, #00b3ff, #5ad1ff); }
  .cmark.dreamcash { background:linear-gradient(135deg, #baa3fd, #f1edff); }
  .cmark.hl-c      { background:linear-gradient(135deg, #16ba84, #50e3c2); }
  .cmark.lotech-c  { background:linear-gradient(135deg, #fc8f44, #ffb380); }
  .cmark.derive    { background:linear-gradient(135deg, #fbf724, #fff8a0); }
  .cmark.ondo      { background:linear-gradient(135deg, #2a5ada, #5b8def); }


  /* ─── 404 Content ─── */
  .four-oh-four {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:calc(100vh - var(--size-topnav) - 200px);
    padding:var(--space-16) var(--space-8);
  }
  .four-oh-four h1 {
    font-size:clamp(80px, 15vw, 160px);
    font-weight:var(--weight-medium);
    letter-spacing:-4px;
    line-height:1;
    margin:0 0 var(--space-4);
    color:var(--primary-400);
  }
  .four-oh-four p {
    font-size:clamp(16px, 2.5vw, 20px);
    color:var(--text-muted);
    margin:0 0 var(--space-8);
    line-height:1.5;
  }
/* ═══════════════════════════════════════════════════
   From: content-disclaimer.html
   ═══════════════════════════════════════════════════ */



  
  /* ─── Legal Pages ─── */
  .legal {
    max-width:800px;
    margin:0 auto;
    padding:var(--space-16) var(--space-8) 96px;
  }
  .legal-header {
    margin-bottom:var(--space-10);
    padding-bottom:var(--space-6);
    border-bottom:1px solid var(--border-soft);
  }
  .legal-header h1 {
    font-size:clamp(28px, 4vw, 40px);
    font-weight:var(--weight-medium);
    letter-spacing:-1px;
    line-height:1.1;
    margin:0 0 var(--space-4);
  }
  .legal-meta {
    display:flex;
    gap:var(--space-4);
    font-size:13px;
    color:var(--text-muted);
  }
  .legal h2 {
    font-size:18px;
    font-weight:var(--weight-medium);
    letter-spacing:-0.2px;
    margin:var(--space-10) 0 var(--space-4);
    color:var(--text-primary);
  }
  .legal p {
    font-size:15px;
    line-height:1.7;
    color:var(--text-secondary);
    margin:0 0 var(--space-4);
  }
  .legal a {
    color:var(--primary-400);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .legal a:hover { color:var(--primary-300); }
  .legal ul {
    padding-left:var(--space-5);
    margin:0 0 var(--space-4);
  }
  .legal ul li {
    font-size:15px;
    line-height:1.7;
    color:var(--text-secondary);
    margin-bottom:var(--space-2);
  }

  /* Disclaimer references */
  .disc-ref {
    font-size: 9px;
    color: var(--text-muted);
    margin-left: 2px;
    vertical-align: super;
    font-weight: var(--weight-regular);
  }
  .disclaimers {
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border-soft);
  }
  .disc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    counter-reset: disc;
  }
  .disc-list li {
    counter-increment: disc;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
  }
  .disc-list li::before {
    content: counter(disc) ". ";
    font-weight: var(--weight-medium);
    color: var(--text-muted);
  }