/* ==========================================================================
   pages.css — the content pages (about, how it works, pricing, case studies,
   the five product pages, privacy, terms).
   --------------------------------------------------------------------------
   The layout and components are carried over from the previous site, which was
   already dark and entirely token-driven. Only the tokens are re-pointed here,
   at the end of the file, so the whole thing speaks in the homepage's palette
   and typefaces instead of forking a second design system.
   Do not edit the imported blocks by hand: re-point a token instead.
   ========================================================================== */

/* ===== app/globals.css ===== */
@import "./site.css";
@import "./sub.css";



:root {
  color-scheme: dark;

  /* Neutrals — Deep Space Navy family
     --bg is the canvas; --bg-alt/--bg-warm are one and two steps brighter
     for alternating sections; --ink-card is the very-dark panel used on
     hero spotlight, calculator output, CTA block. */
  --bg:           #0A0F1D;  /* Deep Space Navy — canvas */
  --bg-alt:       #0F1628;  /* +1 step brighter for banded sections */
  --bg-warm:      #141C31;  /* +2 step brighter for nested surfaces */
  --ink-card:     #070B16;  /* Pure-depth panel, darker than canvas */

  /* "ink" tokens now mean foreground TEXT on dark (Titanium White → dim) */
  --ink:          #FBFBFD;  /* Titanium White — highest-contrast copy */
  --ink-2:        #D9DCE4;  /* body copy */
  --ink-3:        #8A93A6;  /* secondary / mono labels */
  --ink-4:        #5A6377;  /* tertiary / fine print */

  /* Lines — hairlines on dark */
  --rule:         rgba(255,255,255,0.12);
  --rule-soft:    rgba(255,255,255,0.06);

  /* Brand — Emerald
     --teal = brand emerald, --teal-deep = emerald used for emphasis text
     (same hue, kept legible on dark), --teal-soft = low-alpha emerald wash. */
  --teal:         var(--teal);  /* MemoLogs Emerald */
  --teal-deep:    var(--teal);  /* Same on dark — no darker variant needed */
  --teal-soft:    rgba(0,255,194,0.12);

  /* Accents — retuned for dark bg */
  --amber:        #FFB347;
  --amber-soft:   rgba(255,179,71,0.18);
  --coral:        #FF6B5B;
  --coral-soft:   rgba(255,107,91,0.18);

  /* Type — Inter only, per brand guide */
  --serif:  'Inter', system-ui, -apple-system, sans-serif;
  --sans:   'Inter', system-ui, -apple-system, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Scale */
  --radius:       10px;
  --radius-lg:    16px;
  --radius-sm:    6px;

  --shadow-sm:    0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-md:    0 4px 20px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:    0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (max-width: 767px) {
  body {
    font-size: 15px;
  }
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; color: inherit; }
/* Creative IQ — 1a "Bone & Ink" hero responsive */
@media (max-width: 1280px) {
  .cq-hero-1a-inner { padding: 56px 32px 72px !important; }
  .cq-hero-1a-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 720px) {
  .cq-hero-1a h1 { font-size: 40px !important; }
  .cq-hero-1a-stats { grid-template-columns: 1fr !important; }
  .cq-hero-1a-stats > .cq-1a-stat + .cq-1a-stat { border-left: none !important; padding-left: 8px; border-top: 1px solid rgba(22,24,28,0.10); padding-top: 18px; }
}

/* Creative IQ — 1a stat container: frosted rounded panel with color vibrancy + blur */
.cq-hero-1a-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 22px 26px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(11,123,90,0.08), transparent 55%),
    rgba(255,255,255,0.55);
  border: 1px solid rgba(22,24,28,0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px -22px rgba(22,24,28,0.22);
}
.cq-hero-1a-stats::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(11,123,90,0.05) 30%,
    rgba(74,111,165,0.05) 60%,
    rgba(168,122,31,0.06) 100%);
  pointer-events: none;
}
.cq-1a-stat {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 10px;
}
.cq-1a-stat > .cq-1a-ico { margin-top: 2px; }
.cq-hero-1a-stats > .cq-1a-stat + .cq-1a-stat {
  border-left: 1px solid rgba(22,24,28,0.10);
  padding-left: 24px;
}

/* Creative IQ — 1a stat-band icons (light theme, original layout) */
.cq-1a-ico {
  width: 52px; height: 52px; flex: none;
  border-radius: 14px;
  display: grid; place-items: center;
  position: relative;
  background: rgba(11,123,90,0.08);
  border: 1px solid rgba(11,123,90,0.28);
  color: #0B7B5A;
}
.cq-1a-ico svg { width: 26px; height: 26px; }
.cq-hero-1a-stats > div:nth-child(2) .cq-1a-ico {
  background: rgba(74,111,165,0.10);
  border-color: rgba(74,111,165,0.32);
  color: #4A6FA5;
}
.cq-hero-1a-stats > div:nth-child(3) .cq-1a-ico {
  background: rgba(168,122,31,0.10);
  border-color: rgba(168,122,31,0.32);
  color: #A87A1F;
}
/* Container animations — one per tile */
.cq-hero-1a-stats > div:nth-child(1) .cq-1a-ico { animation: cq1aPulse 2.6s ease-in-out infinite; }
.cq-hero-1a-stats > div:nth-child(2) .cq-1a-ico { animation: cq-stat-tilt 3.2s ease-in-out infinite; }
.cq-hero-1a-stats > div:nth-child(3) .cq-1a-ico { animation: cq1aGlow 2.8s ease-in-out infinite; }
@keyframes cq1aPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11,123,90,0.22); }
  50%      { box-shadow: 0 0 0 9px rgba(11,123,90,0);   }
}
@keyframes cq1aGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(168,122,31,0.10); }
  50%      { box-shadow: 0 0 20px rgba(168,122,31,0.40); }
}
/* Inner animated elements (reuse original keyframes) */
.cq-1a-ico .anim-ring { animation: cq-stat-ring-rot 8s linear infinite; transform-origin: center; }
.cq-1a-ico .anim-count { animation: cq-stat-count-tick 1.6s ease-in-out infinite; }
.cq-1a-ico .anim-bar { transform-origin: bottom; animation: cq-stat-bar-grow 2.6s ease-in-out infinite; }
@media (max-width: 720px) {
  .cq-1a-stat { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .cq-1a-ico, .cq-1a-ico * { animation: none !important; }
}

/* Creative IQ page — heading consistency: match section titles to the 1a hero title style
   (same family/weight/tracking as "Every creative decision, closed-loop.") */
.cq-iq-page .section-title {
  font-weight: 650;
  letter-spacing: -0.035em;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
}
.cq-iq-page .section-title em {
  font-weight: 650;
  font-style: normal;
}

/* Creative IQ page — marquee band on white (crisp step off the cream hero) */
.cq-iq-page .cq-marquee {
  background: #FFFFFF;
  border-top: 1px solid rgba(22,24,28,0.08);
  border-bottom: 1px solid rgba(22,24,28,0.08);
}
.cq-iq-page .cq-marquee-lab { color: #4A4D52; }
.cq-iq-page .cq-marquee-item { color: rgba(22,24,28,0.30); }
.cq-iq-page .cq-marquee-item:hover { color: rgba(22,24,28,0.72); }
.cq-iq-page .cq-marquee-item::after { color: rgba(22,24,28,0.14); }
.cq-iq-page .cq-marquee::before { background: linear-gradient(90deg, #FFFFFF, transparent); }
.cq-iq-page .cq-marquee::after  { background: linear-gradient(-90deg, #FFFFFF, transparent); }

/* Creative IQ page — 1a creative library (light cards + real photos) */
.cq-lib-1a-card { transition: transform 220ms ease, box-shadow 220ms ease; }
.cq-lib-1a-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(22,24,28,0.30); }
.cq-lib-1a-photo { transition: filter 300ms ease; }
@media (max-width: 1100px) {
  .cq-lib-1a > div { padding: 72px 32px !important; }
  .cq-lib-1a-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cq-lib-1a-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 560px) {
  .cq-lib-1a-grid { grid-template-columns: 1fr !important; }
}

/* Creative IQ page — lag chart 1a: frosted Apple-style card with vibrancy blobs */
.cq-lag-1a-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 28px 32px;
  background: linear-gradient(180deg, rgba(15,21,36,0.97), rgba(10,15,29,0.97));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 34px 80px -28px rgba(6,10,22,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
}
.cq-lag-1a-inner { position: relative; z-index: 2; color: #C7CBD4; }
.cq-lag-1a-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}
.cq-lag-1a-blob.a { width: 420px; height: 320px; left: -70px;  bottom: -90px; background: radial-gradient(circle, rgba(0,255,194,0.32), transparent 70%); }
.cq-lag-1a-blob.b { width: 380px; height: 320px; right: -50px; top: -100px;   background: radial-gradient(circle, rgba(255,107,91,0.30), transparent 70%); }
.cq-lag-1a-blob.c { width: 320px; height: 260px; left: 42%;    top: -70px;    background: radial-gradient(circle, rgba(255,179,71,0.22), transparent 70%); }
@media (max-width: 1100px) {
  .cq-lag-1a > div { padding: 72px 32px !important; }
}

/* Creative IQ page — Readiness: gray main background, keep inner containers dark */
.cq-iq-page .cq-readiness-section .section-title { color: #16181C; }
.cq-iq-page .cq-readiness-section .section-title em { color: #0B7B5A; }
.cq-iq-page .cq-readiness-section .section-sub { color: #43464C; }
/* Readiness score card → compact dark (inner text uses dark-theme defaults) */
.cq-iq-page .cq-readiness-section .cq-readiness-hero-v2 {
  grid-template-columns: 180px 1fr;
  gap: 34px;
  padding: 24px 30px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(0,255,194,0.08), transparent 55%),
    linear-gradient(180deg, rgba(15,21,36,0.97), rgba(10,15,29,0.97));
  border: 1px solid rgba(255,255,255,0.09);
}
.cq-iq-page .cq-readiness-section .cq-ring-big.cq-ring-dyn { width: 180px; height: 180px; }
.cq-iq-page .cq-readiness-section .cq-ring-big .core-num {
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: 56px;
  padding-top: 4px;
}
.cq-iq-page .cq-readiness-section .cq-ring-big .core-lab {
  bottom: 40px;
  font-size: 10px;
  letter-spacing: 0.24em;
}
/* Component cards 1–5 → light theme */
.cq-iq-page .cq-readiness-section .cq-partv2 {
  background: #FFFFFF;
  border: 1px solid #EFEDE5;
  border-top: 3px solid var(--part-accent);
}
.cq-iq-page .cq-readiness-section .cq-partv2:hover {
  box-shadow: 0 18px 36px -18px rgba(22,24,28,0.22);
  border-color: color-mix(in srgb, var(--part-accent) 40%, #EFEDE5);
}
.cq-iq-page .cq-readiness-section .cq-partv2.t-diversity { --part-accent: #6D5BD0; }
.cq-iq-page .cq-readiness-section .cq-partv2.t-fatigue   { --part-accent: #C4472E; }
.cq-iq-page .cq-readiness-section .cq-partv2.t-format    { --part-accent: #4A6FA5; }
.cq-iq-page .cq-readiness-section .cq-partv2.t-refresh   { --part-accent: #A87A1F; }
.cq-iq-page .cq-readiness-section .cq-partv2.t-signal    { --part-accent: #0B7B5A; }
.cq-iq-page .cq-readiness-section .cq-partv2-title h4 { color: #16181C; }
.cq-iq-page .cq-readiness-section .cq-partv2-eyebrow { color: #8A8D93; }
.cq-iq-page .cq-readiness-section .cq-partv2 p { color: #5F6368; }
.cq-iq-page .cq-readiness-section .cq-partv2-bar { background: rgba(22,24,28,0.08); }

/* Creative IQ page — Signals section: gray main background, keep hub graphics dark */
.cq-iq-page .cq-signals-section .section-title { color: #16181C; }
.cq-iq-page .cq-signals-section .section-sub { color: #43464C; }

/* Creative IQ page — Signals hub: strengthen spokes/particles for the gray (light) band */
.cq-iq-page .cq-signals-section .cq-hub-spoke {
  stroke-width: 0.42;
  animation: cq-hub-spoke-pulse-light 3.6s ease-in-out infinite;
}
@keyframes cq-hub-spoke-pulse-light {
  0%, 100% { stroke-opacity: 0.42; }
  50%      { stroke-opacity: 0.85; }
}
.cq-iq-page .cq-signals-section .cq-hub-svg circle { filter: drop-shadow(0 0 1.2px currentColor); }

/* Creative IQ — Signals: mobile uses a rectangular piped layout instead of the
   radial hub. Tiles sit in a 3-col grid and pipe animated signals into the
   engine block below. Radial hub is desktop-only. */
.cq-signals-mobile { display: none; }

@media (max-width: 640px) {
  .cq-iq-page .cq-signals-hub { display: none !important; }
  .cq-iq-page .cq-signals-mobile {
    display: block !important;
    width: 100%;
    margin: 6px 0 0;
  }

  /* Signal tiles — 3-col grid, labels wrap inside each fixed cell */
  .cq-iq-page .cq-sm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .cq-iq-page .cq-sm-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 11px 6px;
    border-radius: 12px;
    background: rgba(14,20,36,0.90);
    border: 1px solid rgba(255,255,255,0.09);
    text-align: center;
    position: relative;
  }
  .cq-iq-page .cq-sm-tile::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 14px;
    background: radial-gradient(circle, color-mix(in srgb, var(--tone) 20%, transparent), transparent 70%);
    filter: blur(6px);
    z-index: -1;
    opacity: 0.55;
  }
  .cq-iq-page .cq-sm-tile .ico {
    width: 30px; height: 30px;
    border-radius: 9px;
    display: grid; place-items: center;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--tone) 34%, transparent);
  }
  .cq-iq-page .cq-sm-tile .ico svg { width: 16px; height: 16px; }
  .cq-iq-page .cq-sm-tile b {
    font-family: 'Geist', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #EDEFF2;
    line-height: 1.2;
    letter-spacing: -0.005em;
  }

  /* Pipes connecting the grid to the engine */
  .cq-iq-page .cq-sm-pipes {
    display: block;
    width: 100%;
    height: 54px;
    overflow: visible;
  }
  .cq-iq-page .cq-sm-pipes circle { filter: drop-shadow(0 0 2px currentColor); }

  /* Rectangular engine block */
  .cq-iq-page .cq-sm-engine {
    border-radius: 16px;
    padding: 16px 18px;
    background:
      radial-gradient(circle at 22% 20%, rgba(255,107,91,0.22), transparent 60%),
      radial-gradient(circle at 82% 90%, rgba(255,179,71,0.16), transparent 60%),
      #140A12;
    border: 1px solid rgba(255,107,91,0.42);
    box-shadow: 0 0 40px rgba(255,107,91,0.20);
  }
  .cq-iq-page .cq-sm-eng-kicker {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FF8A7E;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .cq-iq-page .cq-sm-eng-row {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .cq-iq-page .cq-sm-eng-num {
    font-family: 'Geist', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #FF8A7E;
    text-shadow: 0 0 18px rgba(255,107,91,0.5);
  }
  .cq-iq-page .cq-sm-eng-meta b {
    display: block;
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #F2EEEA;
    letter-spacing: -0.01em;
  }
  .cq-iq-page .cq-sm-eng-meta b span { color: #FFB347; }
  .cq-iq-page .cq-sm-eng-meta em {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    font-style: normal;
    letter-spacing: 0.06em;
    color: #9A9DA3;
    margin-top: 4px;
  }
}

/* Creative IQ page — Ad detail section: white main background, keep dashboard mockup dark */
.cq-iq-page .cq-dash-section .section-title { color: #16181C; }
.cq-iq-page .cq-dash-section .section-sub { color: #43464C; }

/* Creative IQ — Ad detail dashboard: tidy alignment + trim info on mobile */
@media (max-width: 640px) {
  .cq-iq-page .cq-detail-head {
    grid-template-columns: 40px 1fr !important;
    gap: 12px !important;
    align-items: flex-start !important;
    padding: 14px 14px !important;
  }
  .cq-iq-page .cq-detail-thumb { width: 40px !important; height: 40px !important; }

  /* Title on a single line — drop the variant suffix on mobile */
  .cq-iq-page .cq-detail-variant { display: none !important; }
  .cq-iq-page .cq-detail-title b {
    font-size: 13.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 7px !important;
  }

  /* Breadcrumbs — one line each, truncated with ellipsis */
  .cq-iq-page .cq-detail-crumbs { gap: 4px !important; }
  .cq-iq-page .cq-detail-crumbs span {
    display: block !important;
    grid-template-columns: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
  }
  .cq-iq-page .cq-detail-crumbs em {
    display: inline !important;
    margin-right: 6px !important;
  }

  /* Status: pill + runway on one inline row below the header */
  .cq-iq-page .cq-detail-status {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  /* Breakdown cards — 2-up, clean; drop the tiny sub-notes to reduce clutter */
  .cq-iq-page .cq-breakdown-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .cq-iq-page .cq-grain { padding: 10px 11px !important; gap: 9px !important; align-items: center !important; }
  .cq-iq-page .cq-grain em { display: none !important; }
  .cq-iq-page .cq-grain-ico { width: 30px !important; height: 30px !important; }
  .cq-iq-page .cq-grain-lab { margin-bottom: 3px !important; }
  .cq-iq-page .cq-grain b { font-size: 16px !important; margin-bottom: 0 !important; }
}

/* Creative IQ page — Gap Map: gray section, dark viz stage */
.cq-iq-page .cq-gap-section .section-title { color: #16181C; }
.cq-iq-page .cq-gap-section .section-sub { color: #43464C; }
.cq-iq-page .cq-gap-section .section-title em { color: #0B7B5A; }
.cq-iq-page .cq-gap-section .cq-gap {
  background: linear-gradient(180deg, rgba(15,21,36,0.96), rgba(10,15,29,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 30px 80px -30px rgba(6,10,22,0.5);
}
.cq-iq-page .cq-gap-section .cq-gap-caption { color: #8A8D93; }

/* Creative IQ page — AI Brief: white section, dark fuse stage */
.cq-iq-page .cq-brief-section .section-title { color: #16181C; }
.cq-iq-page .cq-brief-section .section-sub { color: #43464C; }
/* AI Brief fuse — reference light layout (horizontal ingredients + white brief card), keep orb animation/icon */
.cq-iq-page .cq-brief-section .cq-brief-fuse {
  grid-template-columns: 1fr 150px 1fr;
  gap: 24px;
}
.cq-iq-page .cq-brief-section .cq-brief-ings { gap: 12px; }
.cq-iq-page .cq-brief-section .cq-brief-ing {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #FBFAF7; border: 1px solid #E5E2D8; border-left: 3px solid;
  border-radius: 14px; padding: 14px 18px;
}
.cq-iq-page .cq-brief-section .cq-brief-ing-main { display: flex; flex-direction: column; }
.cq-iq-page .cq-brief-section .cq-brief-ing-kicker { color: #8A8D93; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 2px; }
.cq-iq-page .cq-brief-section .cq-brief-ing b { color: #16181C; font-size: 14.5px; font-weight: 650; margin: 0; }
.cq-iq-page .cq-brief-section .cq-brief-ing em { color: #8A8D93; font-size: 12.5px; text-align: right; flex: none; }
.cq-iq-page .cq-brief-section .cq-brief-orb { color: #16181C; }
.cq-iq-page .cq-brief-section .cq-brief-orb svg { filter: none; }
.cq-iq-page .cq-brief-section .cq-brief-orb-lab { color: #16181C; text-align: center; }

.cq-iq-page .cq-brief-section .cq-brief-out {
  position: relative; overflow: hidden; padding: 0; border-radius: 20px;
  background: linear-gradient(180deg, #16203A, #0A0F1D);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 34px 80px -30px rgba(6,10,22,0.7);
}
.cq-iq-page .cq-brief-section .cq-brief-out::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(0,255,194,0.14), transparent 60%),
    radial-gradient(90% 70% at 100% 0%, rgba(184,166,255,0.12), transparent 60%);
}
.cq-iq-page .cq-brief-section .cq-brief-out > * { position: relative; z-index: 1; }
.cq-iq-page .cq-brief-section .cq-brief-out-head {
  margin: 0; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(90deg, rgba(0,255,194,0.14), rgba(184,166,255,0.10));
}
.cq-iq-page .cq-brief-section .cq-brief-out-head span { color: #fff; font-size: 13.5px; font-weight: 650; text-transform: none; letter-spacing: normal; font-family: inherit; }
.cq-iq-page .cq-brief-section .cq-brief-out-head em { color: #9BA0A8; font-size: 12px; text-transform: none; }
.cq-iq-page .cq-brief-section .cq-brief-out-fields {
  grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: rgba(255,255,255,0.09);
}
.cq-iq-page .cq-brief-section .cq-brief-out-fields > div {
  position: relative; background: #0E1524; padding: 16px 20px 16px 26px;
}
.cq-iq-page .cq-brief-section .cq-brief-out-fields > div::before {
  content: ''; position: absolute; left: 12px; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: currentColor;
}
.cq-iq-page .cq-brief-section .cq-brief-out-fields > div em { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.cq-iq-page .cq-brief-section .cq-brief-out-fields > div b { color: #F2F4F8; font-size: 14.5px; font-weight: 650; }
.cq-iq-page .cq-brief-section .cq-brief-out-fields > div:nth-child(1) { color: var(--teal); }
.cq-iq-page .cq-brief-section .cq-brief-out-fields > div:nth-child(2) { color: #B8A6FF; }
.cq-iq-page .cq-brief-section .cq-brief-out-fields > div:nth-child(3) { color: #FF8A7E; }
.cq-iq-page .cq-brief-section .cq-brief-out-fields > div:nth-child(4) { color: #8FCBFF; }
.cq-iq-page .cq-brief-section .cq-brief-out-fields > div:nth-child(5) { color: #FFB347; }
.cq-iq-page .cq-brief-section .cq-brief-out-fields > div:nth-child(6) { color: #6EE7B7; }
.cq-iq-page .cq-brief-section .cq-brief-out-foot { text-align: left; padding: 16px 22px; border-top: 1px solid rgba(255,255,255,0.10); }
.cq-iq-page .cq-brief-section .cq-brief-studio-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, var(--teal), #00D4A3); color: #05231C;
  border-radius: 999px; padding: 11px 22px; font-size: 13px; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 24px -10px rgba(0,255,194,0.5);
}
@media (max-width: 1100px) {
  .cq-iq-page .cq-brief-section .cq-brief-fuse { grid-template-columns: 1fr !important; }
}

/* Creative IQ page — Platforms: reference layout, dark containers */
.cq-iq-page .cq-platforms-section .section-title { color: #16181C; }
.cq-iq-page .cq-platforms-section .section-title em { color: #0B7B5A; }
.cq-iq-page .cq-platforms-section .section-sub { color: #43464C; }
.cq-iq-page .cq-platforms-section .cq-platforms { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cq-iq-page .cq-platforms-section .cq-pf {
  background: linear-gradient(180deg, rgba(19,26,43,0.97), rgba(10,15,29,0.97));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px; padding: 28px; gap: 18px;
}
.cq-iq-page .cq-platforms-section .cq-pf.cq-pf-live {
  border-color: rgba(0,255,194,0.30);
  box-shadow: 0 26px 60px -30px rgba(0,255,194,0.22);
}
.cq-iq-page .cq-platforms-section .cq-pf-top { display: flex; align-items: center; gap: 10px; }
.cq-iq-page .cq-platforms-section .cq-pf-logo {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.cq-iq-page .cq-platforms-section .cq-pf-logo svg { width: 20px; height: 20px; display: block; }
.cq-iq-page .cq-platforms-section .cq-pf-name { font-size: 19px; font-weight: 650; color: #fff; }
.cq-iq-page .cq-platforms-section .cq-pf-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 700;
  letter-spacing: normal; text-transform: none; font-family: inherit; border: none;
}
.cq-iq-page .cq-platforms-section .cq-pf-badge.live { background: rgba(0,255,194,0.14); color: var(--teal); }
.cq-iq-page .cq-platforms-section .cq-pf-badge.live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.cq-iq-page .cq-platforms-section .cq-pf-badge.soon { background: rgba(255,255,255,0.08); color: #9BA0A8; }
.cq-iq-page .cq-platforms-section .cq-pf-list { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cq-iq-page .cq-platforms-section .cq-pf-list li {
  display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: #C7CBD4;
  padding: 0; background: none; border: none; border-radius: 0;
}
.cq-iq-page .cq-platforms-section .cq-pf-list li::before { content: none; }
.cq-iq-page .cq-platforms-section .cq-pf-list li .mk { color: var(--teal); font-weight: 700; flex: none; }
.cq-iq-page .cq-platforms-section .cq-pf-list li .mk-soon { color: #6B7280; }
.cq-iq-page .cq-platforms-section .cq-pf-foot { margin-top: auto; display: flex; align-items: center; gap: 14px; border-top: none; padding-top: 0; }
.cq-iq-page .cq-platforms-section .cq-pf-btn {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 11px 22px;
  font-size: 13.5px; font-weight: 650; text-decoration: none; cursor: pointer;
}
.cq-iq-page .cq-platforms-section .cq-pf-btn.primary {
  background: linear-gradient(90deg, var(--teal), #00D4A3); color: #05231C; border: none;
  box-shadow: 0 8px 24px -10px rgba(0,255,194,0.5);
}
.cq-iq-page .cq-platforms-section .cq-pf-btn.ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22); color: #F2F4F8; }
.cq-iq-page .cq-platforms-section .cq-pf-note { font-size: 12px; color: #8A93A6; }
.cq-iq-page .cq-platforms-section .cq-pf-caption { text-align: left; color: #8A8D93; }

/* Creative IQ page — Close: white section (CTA panel stays a dark island) */
.cq-iq-page .cq-close-section .sp-quote p { color: #16181C; }
.cq-iq-page .cq-close-section .sp-quote cite { color: #5F6368; }
.cq-iq-page .cq-close-section .sp-nav-next { color: #8A8D93; }
.cq-iq-page .cq-close-section .sp-nav-next a { color: #16181C; }

/* Creative IQ page — Gap Map: symmetric columns (equal height, map fills) */
.cq-iq-page .cq-gap-section .cq-gap { align-items: stretch; }
.cq-iq-page .cq-gap-section .cq-gap-map { grid-template-rows: auto 1fr 1fr 1fr 1fr; }
.cq-iq-page .cq-gap-section .cq-gap-cell { aspect-ratio: auto; min-height: 0; }
.cq-iq-page .cq-gap-section .cq-gap-controls { justify-content: space-between; }
.cq-iq-page .cq-gap-section .cq-gap-items { display: flex; flex-direction: column; gap: 8px; }

/* ═══════════════ Creative IQ — mobile / responsive pass ═══════════════ */
/* Row headers: stack + left-align on tablet/mobile (override inline align-items:flex-end) */
@media (max-width: 1100px) {
  .cq-iq-page .cq-lib-1a-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 32px !important;
    text-align: left !important;
  }
  .cq-iq-page .cq-lib-1a-head > * { max-width: 100% !important; }
}
/* Platforms grid → single column on small screens (override scoped 3-col) */
@media (max-width: 920px) {
  .cq-iq-page .cq-platforms-section .cq-platforms { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  /* Tighter section paddings for the inline-padded sections */
  .cq-iq-page .cq-hero-1a-inner,
  .cq-iq-page .cq-lag-1a > div,
  .cq-iq-page .cq-lib-1a > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .cq-iq-page .cq-hero-1a-inner { padding-top: 36px !important; padding-bottom: 48px !important; }
  .cq-iq-page .cq-lag-1a > div,
  .cq-iq-page .cq-lib-1a > div { padding-top: 56px !important; padding-bottom: 56px !important; }
  .cq-iq-page .cq-hero-1a h1 { font-size: 34px !important; }

  /* Readiness ring a touch smaller */
  .cq-iq-page .cq-readiness-section .cq-ring-big.cq-ring-dyn { width: 150px !important; height: 150px !important; }

  /* Gap map: undo the symmetric-stretch hack (cells collapse when stacked) */
  .cq-iq-page .cq-gap-section .cq-gap { align-items: start; padding: 16px !important; }
  .cq-iq-page .cq-gap-section .cq-gap-map { grid-template-rows: none !important; }
  .cq-iq-page .cq-gap-section .cq-gap-cell { aspect-ratio: 1.3 / 1 !important; }

  /* Lag chart svg shouldn't squish too flat */
  /* Chart scales uniformly on mobile (no stretch = crisp text) */
  .cq-iq-page .cq-lag-1a-svg { height: auto !important; }
  /* Declutter the tiny in-chart labels on mobile; legend + takeaway (HTML) carry the meaning */
  .cq-iq-page .cq-lag-1a-svg text { display: none; }

  /* Brief: hide the orb side-connectors */
  .cq-iq-page .cq-brief-section .cq-brief-orb-wrap::before,
  .cq-iq-page .cq-brief-section .cq-brief-orb-wrap::after { display: none !important; }
}

/* Creative IQ — library photo cards: keep 2 per row on phones */
@media (max-width: 640px) {
  .cq-iq-page .cq-foreplay { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .cq-iq-page .cq-foreplay .cq-mock-copy { font-size: 15px !important; bottom: 66px !important; left: 10px !important; right: 10px !important; }
  .cq-iq-page .cq-foreplay .cq-fp-meta { padding: 10px !important; }
  .cq-iq-page .cq-foreplay .cq-fp-meta b { font-size: 10.5px !important; }
  .cq-iq-page .cq-foreplay .cq-fp-meta-row { font-size: 8.5px !important; gap: 5px !important; }
}

/* Creative IQ — mobile: gap map / AI brief / platforms → trim info + horizontal scroll */
@media (max-width: 640px) {
  /* shared scrollbar styling for the horizontal rows */
  .cq-iq-page .cq-gap-items::-webkit-scrollbar,
  .cq-iq-page .cq-brief-ings::-webkit-scrollbar,
  .cq-iq-page .cq-platforms::-webkit-scrollbar { height: 4px; }
  .cq-iq-page .cq-gap-items::-webkit-scrollbar-thumb,
  .cq-iq-page .cq-brief-ings::-webkit-scrollbar-thumb,
  .cq-iq-page .cq-platforms::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; }

  /* ---- Gap Map ---- */
  /* Reduce info: drop the axis-config controls block */
  .cq-iq-page .cq-gap-section .cq-gap-controls { display: none !important; }
  .cq-iq-page .cq-gap-section .cq-gap { padding: 12px !important; gap: 14px !important; }

  /* Heatmap fits the screen — all four columns visible, aligned, no scroll */
  .cq-iq-page .cq-gap-section .cq-gap-map {
    grid-template-columns: 40px repeat(4, 1fr) !important;
    gap: 4px !important;
    overflow: visible !important;
    padding: 10px !important;
  }
  .cq-iq-page .cq-gap-section .cq-gap-cell {
    aspect-ratio: 1 / 1 !important;
    padding: 6px 5px !important;
  }
  .cq-iq-page .cq-gap-section .cq-gap-cell .ct { font-size: 10px !important; }
  .cq-iq-page .cq-gap-section .cq-gap-cell em { font-size: 7.5px !important; }
  .cq-iq-page .cq-gap-section .cq-gap-xlab { font-size: 8px !important; padding: 2px 0 !important; }
  .cq-iq-page .cq-gap-section .cq-gap-ylab { font-size: 8px !important; padding: 0 3px 0 0 !important; line-height: 1.15 !important; }

  /* Ranked gaps: horizontal scroll row — cards must stay bounded (fix overflow) */
  .cq-iq-page .cq-gap-section .cq-gap-items {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px !important;
    padding-bottom: 6px !important;
  }
  .cq-iq-page .cq-gap-section .cq-gap-item {
    flex: 0 0 82% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: start;
  }
  .cq-iq-page .cq-gap-section .cq-gap-item > div { min-width: 0 !important; }
  .cq-iq-page .cq-gap-section .cq-gap-item em {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 8px !important;
  }
  .cq-iq-page .cq-gap-section .cq-gap-item .btn { width: 100% !important; }

  /* ---- AI Brief ingredients: horizontal scroll row ---- */
  .cq-iq-page .cq-brief-section .cq-brief-ings {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px !important;
    padding-bottom: 6px !important;
  }
  .cq-iq-page .cq-brief-section .cq-brief-ing {
    flex: 0 0 74% !important;
    scroll-snap-align: start;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .cq-iq-page .cq-brief-section .cq-brief-ing em { text-align: left !important; margin-top: 2px !important; }

  /* ---- AI Brief output: compact 2-up grid so the panel isn't oversized ---- */
  .cq-iq-page .cq-brief-section .cq-brief-out-fields { grid-template-columns: 1fr 1fr !important; }
  .cq-iq-page .cq-brief-section .cq-brief-out-fields > div { padding: 11px 8px 11px 18px !important; }
  .cq-iq-page .cq-brief-section .cq-brief-out-fields > div::before { top: 12px !important; bottom: 12px !important; left: 9px !important; }
  .cq-iq-page .cq-brief-section .cq-brief-out-fields > div em { font-size: 9px !important; }
  .cq-iq-page .cq-brief-section .cq-brief-out-fields > div b { font-size: 12px !important; }
  .cq-iq-page .cq-brief-section .cq-brief-out-head { padding: 12px 16px !important; }
  .cq-iq-page .cq-brief-section .cq-brief-out-foot { padding: 12px 16px !important; }
  .cq-iq-page .cq-brief-section .cq-brief-studio-btn { padding: 9px 16px !important; font-size: 12px !important; }

  /* ---- Platforms: horizontal scroll row ---- */
  .cq-iq-page .cq-platforms-section .cq-platforms {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    padding-bottom: 6px !important;
  }
  .cq-iq-page .cq-platforms-section .cq-pf {
    flex: 0 0 84% !important;
    scroll-snap-align: start;
  }
  /* Reduce info: show the first three capabilities per card */
  .cq-iq-page .cq-platforms-section .cq-pf-list li:nth-child(n+4) { display: none !important; }
}

/* Creative IQ — uniform headline size on mobile (match the hero H1 = 34px) */
@media (max-width: 760px) {
  .cq-iq-page .section-title { font-size: 34px !important; line-height: 1.1 !important; }
  .cq-iq-page .cq-lib-1a-head h2 { font-size: 34px !important; line-height: 1.1 !important; white-space: normal !important; }
}

/* Creative IQ — left-align remaining centered section heads (readiness, signals, gap map) */
.cq-iq-page .section-head.split {
  align-items: flex-start;
  text-align: left;
}

/* Creative IQ — sticky mobile CTA (desktop hidden) */
.cq-mobile-cta { display: none; }
@media (max-width: 640px) {
  /* Hide the hero product-frame dashboard and the inline hero CTAs on mobile */
  .cq-iq-page .cq-hero-frame { display: none !important; }
  .cq-iq-page .cq-hero-1a-cta { display: none !important; }
  /* Room so the fixed bar never covers the footer */
  .cq-iq-page { padding-bottom: 84px; }
  /* Sticky bottom Try Creative IQ */
  .cq-mobile-cta {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(22,24,28,0.10);
    box-shadow: 0 -8px 24px -14px rgba(22,24,28,0.25);
  }
  .cq-mobile-cta-btn {
    display: flex; align-items: center; justify-content: center;
    background: #16181C; color: #FFFFFF; border-radius: 999px;
    padding: 15px 24px; font-size: 16px; font-weight: 600; text-decoration: none;
  }
}

/* Creative IQ — hero dashboard on mobile: one-line WHEN row + tighter height */
@media (max-width: 640px) {
  /* WHEN pill row → single line, compact */
  .cq-iq-page .cq-hero-when { gap: 6px; }
  .cq-iq-page .cq-hero-when-pills { gap: 5px !important; flex-wrap: nowrap; min-width: 0; }
  .cq-iq-page .cq-hero-when-lab { font-size: 10px !important; }
  .cq-iq-page .cq-hero-when-pill { font-size: 10px !important; padding: 4px 8px !important; gap: 4px !important; }
  .cq-iq-page .cq-hero-when-brief { font-size: 10.5px !important; padding: 4px 9px !important; gap: 4px !important; }

  /* Reduce dashboard vertical footprint */
  .cq-iq-page .cq-hero-frame-body { padding: 14px !important; }
  .cq-iq-page .cq-hero-frame-ready { padding: 12px 14px !important; gap: 12px !important; }
  .cq-iq-page .cq-hero-frame-rows { gap: 8px !important; margin-top: 10px !important; }
  .cq-iq-page .cq-hero-frame-rows > div { padding: 10px 12px !important; }
}

/* Creative IQ — hero stat band on mobile: full-bleed 3-across strip (edge-to-edge, larger) */
@media (max-width: 720px) {
  .cq-iq-page .cq-hero-1a-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    padding: 18px 4px !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .cq-iq-page .cq-hero-1a-stats > .cq-1a-stat {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 9px !important;
    padding: 2px 6px !important;
    border: none !important;
  }
  .cq-iq-page .cq-hero-1a-stats > .cq-1a-stat + .cq-1a-stat {
    border-left: 1px solid rgba(22,24,28,0.10) !important;
    border-top: none !important;
    padding-left: 6px !important;
    padding-top: 2px !important;
  }
  .cq-iq-page .cq-1a-stat > .cq-1a-ico { margin-top: 0 !important; }
  .cq-iq-page .cq-1a-ico { width: 38px !important; height: 38px !important; border-radius: 10px; }
  .cq-iq-page .cq-1a-ico svg { width: 20px !important; height: 20px !important; }
  .cq-iq-page .cq-1a-stat-num { font-size: 27px !important; }
  .cq-iq-page .cq-1a-stat-num + div { font-size: 10.5px !important; margin-top: 5px !important; line-height: 1.25 !important; }
}

/* ═══════════════ Creative IQ — mobile hero: light + animated glow ═══════════════ */
/* Aurora + orb + chips are desktop-hidden by default */
.cq-hero-aurora { display: none; }
.cq-hero-engine { display: none; }
.cq-hero-sub-short { display: none; }
.cq-h1-tail-short { display: none; }

@media (max-width: 640px) {
  .cq-iq-page .cq-hero-1a { position: relative; overflow: hidden; }
  .cq-iq-page .cq-hero-1a-inner { position: relative; z-index: 1; }

  /* Soft animated aurora glow behind the hero */
  .cq-iq-page .cq-hero-aurora {
    display: block; position: absolute; inset: -10% -20% auto -20%; height: 78%;
    pointer-events: none; z-index: 0; filter: blur(46px); opacity: 0.9;
    background:
      radial-gradient(38% 44% at 22% 26%, rgba(11,123,90,0.30), transparent 70%),
      radial-gradient(42% 40% at 82% 16%, rgba(0,255,194,0.22), transparent 70%),
      radial-gradient(46% 46% at 60% 60%, rgba(120,166,255,0.16), transparent 72%);
    animation: cqHeroAurora 14s ease-in-out infinite alternate;
  }
  @keyframes cqHeroAurora {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(-6%, 3%, 0) scale(1.12); }
    100% { transform: translate3d(5%, -2%, 0) scale(1.06); }
  }

  /* Animated closed-loop engine (mobile hero visual) */
  .cq-iq-page .cq-hero-engine { display: block; width: 100%; max-width: 344px; margin: 24px auto 2px; }
  .cq-iq-page .cq-eng-svg { width: 100%; height: auto; display: block; overflow: visible; }
  .cq-eng-orbit { animation: cqEngOrbit 2.6s linear infinite; }
  @keyframes cqEngOrbit { to { stroke-dashoffset: -20; } }
  .cq-eng-flow { stroke-dasharray: 4 7; animation: cqEngFlow 1.05s linear infinite; }
  .cq-eng-flow.out { animation-duration: 0.85s; }
  @keyframes cqEngFlow { to { stroke-dashoffset: -11; } }
  .cq-eng-core-glow { animation: cqEngGlow 2.4s ease-in-out infinite; }
  @keyframes cqEngGlow { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.72; } }
  .cq-eng-brief { animation: cqEngBrief 3s ease-in-out infinite; }
  @keyframes cqEngBrief { 0%, 58%, 100% { opacity: 0.5; } 74% { opacity: 1; } }
  .cq-eng-out { animation: cqEngOut 3.4s ease-in-out infinite; }
  @keyframes cqEngOut { 0%, 55%, 100% { opacity: 0.6; } 72% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .cq-eng-orbit, .cq-eng-flow, .cq-eng-core-glow, .cq-eng-out { animation: none !important; opacity: 1 !important; }
  }

  /* Center the lead content, trim copy */
  .cq-iq-page .cq-hero-lead { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .cq-iq-page .cq-hero-lead h1 { margin-top: 18px !important; }
  .cq-iq-page .cq-h1-tail { display: none; }
  .cq-iq-page .cq-h1-tail-short { display: inline; }
  .cq-iq-page .cq-hero-sub { display: none; }
  .cq-iq-page .cq-hero-sub-short {
    display: block; margin: 16px auto 0; max-width: 340px;
    font-size: 15.5px; line-height: 1.55; color: #5F6368;
  }

  /* Feature rows → glassy chips (icon + label only) */
  .cq-iq-page .cq-hero-features {
    flex-direction: row !important; flex-wrap: wrap; justify-content: center;
    gap: 8px !important; margin-top: 22px !important;
  }
  .cq-iq-page .cq-hero-feat {
    gap: 8px !important;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(11,123,90,0.22);
    border-radius: 999px; padding: 8px 14px 8px 8px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px -12px rgba(22,24,28,0.35);
  }
  .cq-iq-page .cq-hero-feat > span:first-child { width: 26px !important; height: 26px !important; border-radius: 8px !important; }
  .cq-iq-page .cq-hero-feat > span:first-child svg { width: 14px; height: 14px; }
  .cq-iq-page .cq-hero-feat > span:last-child { font-size: 13px !important; }
  .cq-iq-page .cq-hero-feat > span:last-child > span { display: none; } /* hide the description */
}

/* Creative IQ — lag chart: compact + declutter on mobile */
@media (max-width: 640px) {
  .cq-iq-page .cq-lag-1a-card { padding: 16px 16px 18px !important; }
  .cq-iq-page .cq-lag-legendrow { margin-bottom: 8px !important; gap: 6px !important; }
  .cq-iq-page .cq-lag-legend-gap { display: none !important; }
  .cq-iq-page .cq-lag-badge { display: none !important; }
  .cq-iq-page .cq-lag-foot { margin-top: 8px !important; padding-top: 12px !important; gap: 0 !important; }
  .cq-iq-page .cq-lag-foot-meta { display: none !important; }
}

/* Creative IQ — Readiness component cards: horizontal carousel on mobile */
@media (max-width: 720px) {
  .cq-iq-page .cq-readiness-strip {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .cq-iq-page .cq-readiness-strip::-webkit-scrollbar { display: none; }
  .cq-iq-page .cq-readiness-strip .cq-partv2 {
    flex: 0 0 79% !important;
    scroll-snap-align: start;
    min-height: auto !important;
  }
}

/* Creative IQ — carousel indicator dots (mobile only) */
.cq-carousel-dots { display: none; }
@media (max-width: 720px) {
  .cq-iq-page .cq-carousel-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 16px; }
  .cq-iq-page .cq-carousel-dot {
    width: 7px; height: 7px; padding: 0; border: none; border-radius: 999px;
    background: rgba(22,24,28,0.2); cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
  }
  .cq-iq-page .cq-carousel-dot.is-active { width: 22px; background: #0B7B5A; }
}

/* ===== app/site.css ===== */

:root {
  color-scheme: dark;

  --bg:           #0A0F1D;  /* Deep Space Navy — canvas */
  --bg-alt:       #0F1628;  /* +1 step brighter for banded sections */
  --bg-warm:      #141C31;  /* +2 step brighter for nested surfaces */
  --ink-card:     #070B16;  /* Pure-depth panel, darker than canvas */

  /* "ink" tokens now mean foreground TEXT on dark (Titanium White → dim) */
  --ink:          #FBFBFD;  /* Titanium White — highest-contrast copy */
  --ink-2:        #D9DCE4;  /* body copy */
  --ink-3:        #8A93A6;  /* secondary / mono labels */
  --ink-4:        #5A6377;  /* tertiary / fine print */

  /* Lines — hairlines on dark */
  --rule:         rgba(255,255,255,0.12);
  --rule-soft:    rgba(255,255,255,0.06);

  /* Brand — Emerald
     --teal = brand emerald, --teal-deep = emerald used for emphasis text
     (same hue, kept legible on dark), --teal-soft = low-alpha emerald wash. */
  --teal:         var(--teal);  /* MemoLogs Emerald */
  --teal-deep:    var(--teal);  /* Same on dark — no darker variant needed */
  --teal-soft:    rgba(0,255,194,0.12);

  /* Accents — retuned for dark bg */
  --amber:        #FFB347;
  --amber-soft:   rgba(255,179,71,0.18);
  --coral:        #FF6B5B;
  --coral-soft:   rgba(255,107,91,0.18);

  /* Type — Inter only, per brand guide */
  --serif:  'Inter', system-ui, -apple-system, sans-serif;
  --sans:   'Inter', system-ui, -apple-system, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Scale */
  --radius:       10px;
  --radius-lg:    16px;
  --radius-sm:    6px;

  --shadow-sm:    0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-md:    0 4px 20px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:    0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}



img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font: inherit; color: inherit; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }


[class*="display"], .display em,
.section-title, .section-title em,
.spot-num, .calc-big, .mem-plan-name, .mem-warning-title,
.rh-num, .case h3, .case-stat-val,
.cc-tick, .if-value, .pain-close p,
.land-close, .tl-what h4, .foot-tag,
.ptab-name, .ppanel-copy h3, .cc-thanks h3,
.chat-msg .chat-bubble em {
  font-family: 'Geist', system-ui, sans-serif;
}

.display {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(48px, 5.4vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
}
.display em { font-style: italic; color: var(--teal); }

/* Hero — category H1 + tagline below */
.hero-display {
  font-family: var(--sans);
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 18px;
}
.hero-tagline em {
  font-style: italic;
  color: var(--teal);
  font-weight: 600;
}

.section-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-kicker .num {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: var(--teal);
  color: var(--ink-card);
  border-radius: 2px;
  font-size: 10px;
  padding: 0 4px;
  font-weight: 600;
}

.section-title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 16px 0 18px;
}
.section-title em { font-style: italic; color: var(--teal); }

.section-sub {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

.section-head {
  margin-bottom: 36px;
  max-width: 820px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.eyebrow .dot {
  width: 7px; height: 7px; background: var(--teal); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,255,194,.18);
}

.lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 560px;
  margin: 20px 0 26px;
}
.hero .lede em { font-style: normal; color: var(--teal); font-weight: 600; }

.metrics-band .lede{
  margin: 20px auto 26px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 11px 20px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: all .15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-lg { padding: 15px 28px; font-size: 15px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-primary { background: var(--teal); color: var(--ink-card); }
.btn-primary:hover { background: #33FFCF; transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(0,255,194,.18); }
.btn-ghost { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn-ghost:hover { background: var(--bg-alt); border-color: var(--ink); }
.btn-dark { background: var(--ink-card); color: var(--ink); border-color: var(--rule); }
.btn-dark:hover { background: #000; }

.link-muted { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.link-muted:hover { color: var(--ink); }


/* ═══════════ NAV ═══════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,15,29,0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 32px;
  height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 20px; font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.brand .dot-accent { color: var(--teal); }
.brand svg { color: var(--teal); }
.nav-links {
  display: flex; align-items: center; gap: 28px;
  justify-content: center;
}
.nav-links > a, .nav-item > button {
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 0;
  transition: color .15s ease;
}
.nav-links > a:hover, .nav-item > button:hover { color: var(--ink); }
.caret { font-size: 10px; margin-left: 2px; }

.nav-item { position: relative; }
.nav-item.has-dropdown:hover .dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dropdown {
  position: absolute; top: 100%; left: -20px;
  min-width: 360px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .15s, transform .15s;
}
.dd-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 6px 10px 10px;
}
.dropdown a {
  display: grid; grid-template-columns: 28px 1fr; align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  font-weight: 500; font-size: 14px;
  color: var(--ink);
}
.dropdown a em {
  font-style: normal; font-weight: 400; font-size: 13px; color: var(--ink-3);
  grid-column: 2; margin-top: -2px;
}
.dropdown a:hover { background: var(--bg-alt); }
.dd-pill {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  background: var(--teal); color: var(--ink-card);
  border-radius: 4px;
  grid-row: span 2;
}

.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 999px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-mobile {
  display: none;
}


/* ═══════════ HERO ═══════════ */
.hero { padding: 28px 0 0; border-bottom: 1px solid var(--rule-soft); }

.hero-marquee {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 18px;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 60px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-marquee .tick {
  color: var(--teal);
  font-weight: 600;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: start;
  padding-bottom: 40px;
}

.hero-lead h1 { margin-top: 4px; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-micro {
  margin-top: 20px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 10px;align-items: center;
}

.hero-micro span{display: flex; align-items: center; gap: 5px;}
.hero-micro .sep { color: var(--rule); font-size: 20px; color: #fff;}

.hero-micro-imperatives {
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  text-transform: none;
}
.hero-micro-imperatives b {
  color: var(--ink);
  font-weight: 700;
}
.hero-micro-imperatives .sep { color: var(--teal); opacity: .55; font-size: 20px; }
.hero-micro-meta { margin-top: 10px; }
.lede em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}

/* Hero carousel (replaces hero-spot) */
.hero-carousel,
.hero-spot {
  background: var(--ink-card);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.hero-carousel::before,
.hero-spot::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(0,255,194,.18), transparent 60%),
    radial-gradient(400px 220px at 0% 100%, rgba(0,255,194,.08), transparent 60%);
  pointer-events: none;
}
.hero-carousel > *,
.hero-spot > * { position: relative; }

/* Single hero visual: containerless signal-graph scene that blends into the page */
.hero-visual {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.hv-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: rgba(255,255,255,.9); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.hv-dot {
  width: 7px; height: 7px; background: var(--teal); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,255,194,.18);
}
.hv-tag {
  font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.5);
  letter-spacing: .08em; text-transform: uppercase;
}
.hv-stage {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 6px 0 10px;
}
.hv-svg {
  width: 100%;
  height: auto;
  max-width: 460px;
  display: block;
}
/* 3D signal-graph scene — containerless, blends into the page */
.hv-canvas-wrap {
  position: relative;
  width: 100%;
  height: 540px;
  margin: -8px 0 -16px;
  overflow: visible;
}
.hv-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.hv-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,.14);
  margin-top: 14px;
}
.hv-foot-item {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255,255,255,.72);
}
.hv-foot-item b { color: var(--ink); font-weight: 600; }

/* Mobile sticky "Schedule Call" CTA — hidden on desktop */
.mobile-cta-bar { display: none; }
.mobile-cta-btn { width: 100%; justify-content: center; }

@media (max-width: 720px) {
  .hero-visual { padding: 0; }
  .hv-canvas-wrap { height: 420px; margin: 0; }
  .arch-node-name { font-size: 13px; }
  .arch-node-role { display: none; }
  .arch-hub-lab { font-size: 12px; }
  .arch-hub-sub { display: none; }

  /* hide the in-hero primary pilot CTA on mobile */
  .hide-mobile { display: none !important; }

  /* fixed bottom Schedule Call bar */
  .mobile-cta-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(7, 11, 22, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
  }
  .mobile-cta-btn {
    display: flex;
    padding: 15px 22px;
    font-size: 16px;
  }

  /* clear the fixed bar so the footer's last row is never hidden (homepage only) */
  body:has(.mobile-cta-bar) {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}

/* Carousel slide stacking */
.hero-carousel {
  display: flex;
  flex-direction: column;
}
.hc-slide {
  display: none;
  flex-direction: column;
  gap: 0;
  animation: hcFade .45s var(--ease-out) both;
}
.hc-slide.active { display: flex; }
@keyframes hcFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 22px;
}
.hc-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: rgba(255,255,255,.85); text-transform: uppercase;
}
.hc-tag {
  font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.5);
  letter-spacing: .08em; text-transform: uppercase;
}
.hc-body { flex: 1; }

/* Slide 1: architecture SVG */
.hc-body.arch {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 8px 0 14px;
}
.arch-svg {
  width: 100%; height: auto; max-width: 420px;
  display: block;
}
.arch-svg .arch-node circle {
  transition: all .3s var(--ease-out);
}
.arch-svg .arch-node:hover circle {
  fill: rgba(0,255,194,0.12);
  stroke: var(--teal);
}
.arch-node-idx {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  fill: var(--teal); letter-spacing: .05em;
}
.arch-node-idx-dark { fill: #070B16; }
.arch-node-name {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  fill: rgba(255,255,255,0.9); letter-spacing: .06em; text-transform: uppercase;
}
.arch-node-name-hidden { display: none; }
.arch-hub .arch-hub-lab,
.arch-hub .arch-hub-sub { dominant-baseline: middle; }
.arch-node-role {
  font-family: var(--mono); font-size: 9px;
  fill: rgba(255,255,255,0.45); letter-spacing: .05em; text-transform: uppercase;
}
.arch-hub-lab {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  fill: var(--teal); letter-spacing: .15em;
}
.arch-hub-sub {
  font-family: var(--mono); font-size: 8.5px;
  fill: rgba(255,255,255,0.45); letter-spacing: .08em; text-transform: uppercase;
}
.arch-rings circle {
  animation: archRing 8s linear infinite;
  transform-origin: 180px 130px;
}
.arch-rings circle:nth-child(2) { animation-duration: 12s; animation-direction: reverse; }
.arch-rings circle:nth-child(3) { animation-duration: 18s; }
@keyframes archRing {
  to { stroke-dashoffset: -100; }
}

/* Memory-centric architecture: glowing hub + animated signal pulses */
.arch-svg-mem .arch-hub-glow {
  animation: memPulse 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes memPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.08); }
}

.arch-pulse { opacity: 0; }
.arch-pulse-1 { animation: pulseTL 3.2s ease-in-out infinite; animation-delay: 0s;   }
.arch-pulse-2 { animation: pulseTR 3.2s ease-in-out infinite; animation-delay: .8s;  }
.arch-pulse-3 { animation: pulseBL 3.2s ease-in-out infinite; animation-delay: 1.6s; }
.arch-pulse-4 { animation: pulseBR 3.2s ease-in-out infinite; animation-delay: 2.4s; }

@keyframes pulseTL {
  0%   { transform: translate(60px, 46px);   opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: translate(180px, 140px); opacity: 1; }
  55%  { transform: translate(180px, 140px); opacity: 1; }
  90%  { transform: translate(60px, 46px);   opacity: 0.6; }
  100% { transform: translate(60px, 46px);   opacity: 0; }
}
@keyframes pulseTR {
  0%   { transform: translate(300px, 46px);  opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: translate(180px, 140px); opacity: 1; }
  55%  { transform: translate(180px, 140px); opacity: 1; }
  90%  { transform: translate(300px, 46px);  opacity: 0.6; }
  100% { transform: translate(300px, 46px);  opacity: 0; }
}
@keyframes pulseBL {
  0%   { transform: translate(60px, 234px);  opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: translate(180px, 140px); opacity: 1; }
  55%  { transform: translate(180px, 140px); opacity: 1; }
  90%  { transform: translate(60px, 234px);  opacity: 0.6; }
  100% { transform: translate(60px, 234px);  opacity: 0; }
}
@keyframes pulseBR {
  0%   { transform: translate(300px, 234px); opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: translate(180px, 140px); opacity: 1; }
  55%  { transform: translate(180px, 140px); opacity: 1; }
  90%  { transform: translate(300px, 234px); opacity: 0.6; }
  100% { transform: translate(300px, 234px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .arch-pulse, .arch-hub-glow, .arch-rings circle { animation: none !important; }
}

/* ── Slide 2: Four verbs ── */
.hc-body.verbs {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  min-height: 280px;
  justify-content: center;
}
.verb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.verb-card {
  position: relative;
  padding: 16px 16px 32px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 130px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  overflow: hidden;
}
.verb-card::before {
  content: "";
  position: absolute;
  top: -40%; right: -30%;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,194,0.10), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.verb-card:hover {
  background: rgba(0,255,194,0.04);
  border-color: rgba(0,255,194,0.24);
  transform: translateY(-2px);
}
.verb-card:hover::before { opacity: 1; }
.verb-glyph {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--teal);
  background: rgba(0,255,194,0.06);
  border: 1px solid rgba(0,255,194,0.18);
  border-radius: 8px;
}
.verb-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.verb-word {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #fff;
  font-style: italic;
  line-height: 1.05;
}
.verb-obj {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.verb-obj em {
  font-style: italic;
  color: var(--teal);
  font-weight: 600;
}
.verb-prod {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  white-space: nowrap;
}
.verb-card-accent {
  background: linear-gradient(160deg, rgba(0,255,194,0.10), rgba(0,255,194,0.02));
  border-color: rgba(0,255,194,0.36);
  box-shadow: 0 14px 36px -14px rgba(0,255,194,0.22);
}
.verb-card-accent .verb-word { color: var(--teal); }
.verb-card-accent .verb-prod { color: rgba(0,255,194,0.72); }
.verb-card-accent .verb-glyph {
  background: rgba(0,255,194,0.14);
  border-color: rgba(0,255,194,0.45);
}
.verbs-foot {
  padding-top: 18px;
  margin-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.14);
}
.verbs-foot-line {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
  font-family: var(--sans);
}
.arch-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,.14);
  margin-top: 18px;
  font-family: var(--sans); font-size: 12px;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
}
.arch-foot-item b {
  color: #fff;
  display: block;
  font-weight: 600;
}

/* Carousel auto-advance progress */
.hc-progress {
  display: flex; gap: 10px;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hc-pill {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.hc-pill-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--teal);
  transition: width .2s linear;
}
.hc-pill.active .hc-pill-fill { animation: hcFill 7s linear forwards; }
.hc-pill.done .hc-pill-fill { width: 100%; }
@keyframes hcFill {
  from { width: 0%; }
  to   { width: 100%; }
}
.spot-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 24px;
}
.spot-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,.9);
}
.spot-tag {
  font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.55);
}
.spot-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}
.spot-cell { padding: 6px 0; }
.spot-small {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 8px;
}
.spot-num {
  font-family: var(--serif); font-size: 64px; line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  font-weight: 700;
}
.spot-reported .spot-num { color: rgba(255,255,255,.65); }
.spot-real .spot-num { color: var(--teal); }
.spot-unit {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin-top: 6px;
  font-weight: 400;
}
.spot-meta {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  font-family: var(--mono);
}
.spot-arrow { color: rgba(255,255,255,.4); }

.spot-foot {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  align-items: center;
}
.inflation-factor {
  padding: 12px 18px;
  background: rgba(0,255,194,.12);
  border: 1px solid rgba(0,255,194,.4);
  border-radius: var(--radius);
  text-align: center;
  min-width: 140px;
}
.if-label {
  display: block;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(0,255,194,.7);
  margin-bottom: 6px;
}
.if-value {
  font-family: var(--serif); font-size: 38px; color: var(--teal);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.spot-copy { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.8); }

/* Trust row */
.trust {
  margin-top: 72px;
  display: flex; align-items: center; gap: 32px;
  flex-wrap: wrap;
}
.trust-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
}
.trust-logos {
  display: flex; flex-wrap: wrap; gap: 28px 40px;
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-3);
}

/* ═══════════ PAIN ═══════════ */
.pain {
  padding: 120px 0;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule-soft);
}
.pains-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.pains-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 22px 24px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--bg);
}
.pains-list b { color: var(--ink); font-weight: 600; }
.pain-num {
  font-family: var(--serif); font-size: 28px; color: var(--coral);
  line-height: 1;
  font-style: italic;
  font-weight: 700;
}
.pain-close {
  margin-top: 56px;
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  align-items: center;
}
.pain-close-bar {
  width: 64px; height: 3px; background: var(--teal);
}
.pain-close p {
  font-family: var(--serif); font-size: 36px; letter-spacing: -0.025em; margin: 0;
  font-weight: 700; line-height: 1.15;
}

/* ═══════════ CALCULATOR ═══════════ */
.calc { padding: 72px 0; }

.calc-shell {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.calc-inputs { display: flex; flex-direction: column; gap: 28px; }

.calc-field {
  display: flex; flex-direction: column; gap: 10px;
}
.calc-field > span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.calc-field small { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

.calc-input {
  display: flex; align-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0 14px;
  height: 52px;
}
.calc-input .prefix, .calc-input .suffix {
  font-family: var(--mono); font-size: 13px; color: var(--ink-3);
}
.calc-input input[type="number"] {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: var(--serif); font-size: 28px; font-weight: 700;
  color: var(--ink);
  padding: 0 10px;
  min-width: 0;
  letter-spacing: -0.02em;
}
.calc-input.calc-inline { gap: 8px; padding: 8px; }
.chip {
  flex: 1;
  padding: 8px 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--ink-2);
}
.chip.active {
  background: var(--teal); color: var(--ink-card); border-color: var(--teal);
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; background: var(--rule); border-radius: 2px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal); cursor: pointer;
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--teal);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal); cursor: pointer; border: 3px solid var(--bg);
}

.calc-output {
  background: var(--ink-card);
  color: var(--bg);
  border-radius: var(--radius);
  padding: 32px;
  display: flex; flex-direction: column; gap: 28px;
}
.calc-result-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  display: block; margin-bottom: 10px;
}
.calc-big {
  font-family: var(--serif); font-size: 84px; line-height: 1;
  color: var(--teal);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.calc-sub { font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.7); margin-top: 10px; }

.calc-compare { display: flex; flex-direction: column; gap: 12px; }
.calc-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 100px;
  align-items: center;
  gap: 16px;
  font-family: var(--mono); font-size: 12px;
}
.calc-bar-label { color: rgba(255,255,255,.6); }
.calc-bar { height: 10px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.calc-bar-fill { height: 100%; transition: width .4s ease; }
.calc-bar-fill.reported { background: rgba(255,255,255,.35); }
.calc-bar-fill.real { background: var(--teal); box-shadow: 0 0 16px rgba(0,255,194,.4); }
.calc-bar-value { text-align: right; font-weight: 500; color: var(--ink); }
.calc-bar-value.warn { color: var(--teal); }
.calc-spacer { height: 10px; }

.calc-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1);
}
.calc-micro { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.55); }


.pillars {
  padding: 72px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.pillar-tabs-shell {
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: visible;
  box-shadow: var(--shadow-md);
}
.pillar-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-alt);
  position: sticky;
  top: 64px;
  z-index: 25;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.ptab {
  text-align: left;
  padding: 20px 24px;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 3px;
  position: relative;
  transition: background .15s ease;
}
.ptab:last-child { border-right: none; }
.ptab:hover { background: var(--bg-warm); }
.ptab-num {
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  letter-spacing: 0.1em;
}
.ptab-name {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  color: var(--ink-3);
  letter-spacing: -0.02em;
}
.ptab-desc {
  font-size: 12px;
  color: var(--ink-4);
}
.ptab.active { background: var(--bg-warm); }
.ptab.active .ptab-name { color: var(--ink); }
.ptab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--teal); box-shadow: 0 0 10px var(--teal);
}

.ptab-panels {
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.ppanel {
  display: none;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  padding: 56px;
}
.ppanel.active { display: grid; opacity: 1; animation: fadeIn .3s ease forwards; align-items: flex-start; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ppanel-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal);
  margin-bottom: 16px;
}
.ppanel-copy h3 {
  font-family: var(--serif); font-weight: 800;
  font-size: 40px; line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 20px;
}
.ppanel-copy > p {
  font-size: 16px; line-height: 1.55; color: var(--ink-2);
  margin: 0 0 24px;
}
.ppanel-list { list-style: none; padding: 0; margin: 0; }
.ppanel-list li {
  padding: 14px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 16px; line-height: 1.5; color: var(--ink-2);
}
.ppanel-list li:last-child { border-bottom: 1px solid var(--rule-soft); }
.ppanel-list b { color: var(--ink); font-weight: 600; }

.learn-more {
  display: block;
  margin-top: 24px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  padding: 10px 20px;
  border: solid 1px var(--teal);
  color: var(--teal);
  border-radius: 30px;
  width: 240px;
  margin: auto;
  text-align: center;
  margin-top: 20px;
}
.learn-more:hover { color: var(--ink); border-color: var(--ink); }

.ppanel-readmore-btn { display: none; }

/* Demo shared — glassmorphic 3D frame */
.ppanel-demo {
  position: relative;
  background:
    linear-gradient(160deg, rgba(20,28,49,0.95), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ppanel-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 200px at 100% 0%, rgba(0,255,194,0.08), transparent 60%),
    radial-gradient(500px 180px at 0% 100%, rgba(0,160,255,0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.ppanel-demo > * { position: relative; z-index: 1; }
.demo-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.demo-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal);
  background: var(--teal-soft);
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
}
.demo-title {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}

/* Geo-lift demo */
.geolift { flex: 1; display: flex; flex-direction: column; }
.geo-grid { padding: 24px; background: var(--bg); border-bottom: 1px solid var(--rule); }
.geo-grid svg { width: 100%; height: auto; }
.geo-ctrl {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--rule);
}
.geo-btn {
  flex: 1;
  padding: 12px 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--ink-3);
  border-right: 1px solid var(--rule);
  background: var(--bg);
}
.geo-btn:last-child { border-right: none; }
.geo-btn:hover { background: var(--bg-alt); color: var(--ink); }
.geo-btn.active { background: var(--teal); color: var(--ink-card); }
.geo-readout {
  padding: 16px 20px;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg-warm);
  min-height: 72px;
}
.geo-readout b { color: var(--ink); }

/* Creative demo */
.creative-demo {
  padding: 24px; display: grid; grid-template-columns: 180px 1fr; gap: 24px;
  background: var(--bg);
}
.cd-thumb {
  width: 100%; aspect-ratio: 3/2;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-warm);
  position: relative;
  margin-bottom: 12px;
}
.cd-thumb-label {
  position: absolute; bottom: 6px; left: 6px;
  font-family: var(--mono); font-size: 10px;
  background: var(--teal); color: var(--ink-card);
  padding: 2px 6px; border-radius: 2px;
  font-weight: 600;
}
.cd-health { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 10px; }
.cd-health-label, .cd-health-val {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.cd-health-val { color: var(--coral); font-size: 14px; font-weight: 500; }
.cd-health-bar { height: 8px; background: var(--bg-alt); border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.cd-health-fill { height: 100%; background: linear-gradient(90deg, var(--coral) 0%, var(--amber) 100%); }
.cd-status.warn {
  font-family: var(--mono); font-size: 12px; color: var(--coral);
  padding: 8px 10px; background: var(--coral-soft); border-radius: var(--radius-sm);
}
.cd-signals { display: flex; flex-direction: column; gap: 10px; }
.cd-sig {
  display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.cd-sig-bar {
  height: 8px; background: var(--bg-alt); border: 1px solid var(--rule);
  border-radius: 2px; overflow: hidden;
}
.cd-sig-bar > div { height: 100%; transition: width .4s ease; }

/* Audience table */
.audience-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  background: var(--bg);
}
.audience-table th {
  text-align: left; padding: 12px 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--rule);
}
.audience-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-soft);
}
.audience-table tr:last-child td { border-bottom: none; }
.audience-table .pos { color: var(--teal); font-weight: 500; font-family: var(--mono); }
.audience-table .mid { color: var(--ink-3); font-family: var(--mono); }
.audience-table .neg { color: var(--coral); }
.pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.pill.live  { background: var(--teal-soft);  color: var(--teal); }
.pill.opt   { background: var(--amber-soft); color: var(--amber); }
.pill.test  { background: rgba(255,255,255,.08); color: var(--ink-3); }
.pill.scale { background: var(--ink);        color: var(--ink-card); }
.audience-foot {
  padding: 14px 16px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3);
  background: var(--bg-warm);
  border-top: 1px solid var(--rule);
}

/* Chat demo */
.chat { flex: 1; display: flex; flex-direction: column; background: var(--bg); }
.chat-log {
  flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 14px;
  max-height: 400px; overflow-y: auto;
}
.chat-msg { display: flex; }
.chat-msg.user { justify-content: flex-end; }
.chat-bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px; line-height: 1.5;
}
.chat-msg.user .chat-bubble {
  background: var(--teal); color: var(--ink-card);
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.chat-msg.bot .chat-bubble {
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-bottom-left-radius: 4px;
}
.chat-answer-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal);
  margin-bottom: 8px;
  font-weight: 600;
}
.chat-bubble p { margin: 0 0 8px; }
.chat-bubble ol { margin: 6px 0 8px 0; padding-left: 20px; }
.chat-bubble ol li { padding: 3px 0; }
.chat-action {
  margin-top: 12px; padding: 10px 12px;
  background: var(--teal-soft); color: var(--teal);
  border-radius: var(--radius-sm);
  font-size: 13px;
  border-left: 2px solid var(--teal);
  font-weight: 500;
}
.chat-suggest {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--bg-warm); border-top: 1px solid var(--rule);
}
.chat-suggest-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
}
.chat-chip {
  font-size: 12px; padding: 5px 10px;
  background: var(--bg); border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink-2);
}
.chat-chip:hover { background: var(--teal); color: var(--ink-card); border-color: var(--teal); }
.chat-input {
  display: flex; gap: 8px; padding: 12px 20px 20px;
  background: var(--bg-warm);
}
.chat-input input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--bg);
  outline: none;
  font-size: 14px;
}
.chat-input input:focus { border-color: var(--ink); }

/* Memory demo */
.memory-demo { padding: 24px; display: flex; flex-direction: column; gap: 18px; background: var(--bg); }
.mem-plan {
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.mem-plan-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mem-plan-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
}
.mem-plan-name { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.mem-plan-body { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-bottom: 14px; }
.mem-plan-foot { display: flex; align-items: center; gap: 16px; }
.mem-plan-hold { font-family: var(--mono); font-size: 11px; color: var(--amber); }

.mem-warning {
  background: var(--bg);
  border: 1px solid var(--amber);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 20px;
}
.mem-warning-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mem-warning-icon {
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  background: var(--amber); color: var(--ink-card);
  border-radius: 50%;
  font-family: var(--serif); font-weight: 700; font-size: 14px;
}
.mem-warning-title { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.mem-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.mem-table th {
  text-align: left; padding: 8px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
  background: var(--bg-warm);
}
.mem-table td { padding: 10px; border-bottom: 1px solid var(--rule-soft); }
.mem-table .pos { color: var(--teal); }
.mem-table .neg { color: var(--coral); }
.mem-reco {
  padding: 12px 14px;
  background: var(--teal-soft); color: var(--teal);
  border-radius: var(--radius-sm);
  font-size: 13px;
  border-left: 2px solid var(--teal);
  font-weight: 500;
}



.results {
  padding: 72px 0;
  background:
    radial-gradient(1000px 420px at 50% -10%, rgba(0,255,194,0.07), transparent 60%),
    linear-gradient(180deg, #18233F 0%, #141C31 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.results-hero {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-bottom: 56px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rh-block {
  padding: 32px 24px;
  border-right: 1px solid var(--rule);
}
.rh-block:last-child { border-right: none; }
.rh-num {
  font-family: var(--serif);
  font-size: 72px; line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 800;
}
.rh-num span { font-size: 42px; color: var(--teal); }
.rh-label {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  line-height: 1.5;
}

.cases {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.case {
  display: flex; flex-direction: column;
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: all .2s ease;
}
.case:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.case-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.case-industry {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal);
  background: var(--teal-soft);
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
}
.case-action {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.case h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.case-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 16px;
}
.case-stat-val {
  display: block;
  font-family: var(--serif); font-size: 36px; line-height: 1;
  color: var(--teal); letter-spacing: -0.01em;
  margin-bottom: 4px;
  font-weight: 700;
}
.case-stat-lab {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.case-quote {
  font-size: 13px; line-height: 1.5; color: var(--ink-3);
  margin: 0; font-style: italic;
}
.case-more { background: var(--ink-card); color: var(--ink); border-color: var(--rule); }
.case-more h3 { color: var(--ink); }
.case-more .case-industry { background: rgba(0,255,194,.12); color: var(--teal); }
.case-quote-more { color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.5; flex: 1; margin: 12px 0 24px; }
.case-more-cta { font-family: var(--mono); font-size: 12px; color: var(--teal); }



.landscape { padding: 72px 0; background: var(--bg-alt); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }

.land-table-wrap {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: auto;
  box-shadow: var(--shadow-sm);
}
.land-table-wrap-mobile { display: none; }
.land-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.land-table th, .land-table td { padding: 16px 20px; text-align: left; }
.land-table thead th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--rule);
}
.land-table thead th.lt-memo { color: var(--teal); background: rgba(0,255,194,0.08); }
.land-table tbody td { border-bottom: 1px solid var(--rule-soft); color: var(--ink-2); }
.land-table tbody tr:last-child td { border-bottom: none; }
.land-table .lt-cap { font-weight: 500; color: var(--ink); }
.land-table .x { color: var(--ink-4); font-family: var(--mono); }
.land-table .lt-memo {
  background: rgba(0,255,194,0.06);
  color: var(--teal);
  font-weight: 500;
  border-left: 1px solid var(--teal);
}

.land-close {
  margin-top: 40px;
  max-width: 820px;
  font-family: var(--serif); font-size: 24px; line-height: 1.35;
  color: var(--ink);
  font-weight: 700; letter-spacing: -0.02em;
  display: grid;
  gap: 8px;
}
.land-close-line {
  display: block;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
  transition: opacity .95s cubic-bezier(.22, 1, .36, 1), transform .95s cubic-bezier(.22, 1, .36, 1), filter .95s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform, filter;
}
.land-close.is-visible .land-close-line {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
.land-close.is-visible .land-close-line-2 {
  transition-delay: .1s;
}
.land-close.is-visible .land-close-line-3 {
  transition-delay: .2s;
}
.land-close em { color: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  .land-close-line {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}



.implement { padding: 72px 0; }
.timeline {
  list-style: none; padding: 0; margin: 0 0 48px;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}
.timeline::before {
  content: ""; position: absolute;
  left: 130px; top: 0; bottom: 0; width: 1px;
  background: var(--rule);
}
.timeline-progress {
  position: absolute;
  left: 130px;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--teal);
  box-shadow: 0 0 12px rgba(0,255,194,.45);
  z-index: 1;
  pointer-events: none;
}
.timeline li {
  display: grid; grid-template-columns: 140px 1fr; gap: 32px;
  padding: 20px 0;
  position: relative;
}
.timeline li .tl-when,
.timeline li .tl-what {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
}
.timeline li.is-visible .tl-when,
.timeline li.is-visible .tl-what {
  opacity: 1;
  transform: translateY(0);
}
.tl-when {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
  padding-top: 4px;
}
.timeline li::after {
  content: ""; position: absolute; left: 123px; top: 28px;
  width: 11px; height: 11px;
  background: var(--bg); border: 2px solid var(--ink-3);
  border-radius: 50%;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.timeline li.is-active::after {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,255,194,.12);
}
.timeline li.is-active .tl-when {
  color: var(--teal);
}
.timeline li.is-active .tl-what h4 {
  color: var(--ink);
}
/* .timeline li.tl-milestone::after {
  background: var(--teal); border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,255,194,.15);
} */
.tl-what h4 { font-family: var(--serif); font-size: 22px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.02em; }
.tl-what p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.timeline li.tl-milestone .tl-what h4 { color: var(--teal); }
.impl-cta { text-align: center; padding-top: 40px; border-top: 1px solid var(--rule-soft); }


.close-cta { padding: 72px 0; background: var(--ink-card); color: var(--ink); border-top: 1px solid var(--rule); }
.close-cta .section-kicker { color: rgba(255,255,255,.65); }
.close-cta .section-kicker .num { background: var(--teal); color: var(--ink-card); }
.close-cta .display em { color: var(--teal); }
.close-cta .lede { color: rgba(255,255,255,.75); }

.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.cc-points { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.cc-points > div { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.cc-points > div svg { flex-shrink: 0; }
.cc-points > div p { margin: 0; }
.cc-points b { color: var(--ink); font-weight: 600; }

.cc-form {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.cc-fields { display: flex; flex-direction: column; gap: 16px; }
.cc-fields label { display: flex; flex-direction: column; gap: 6px; }
.cc-fields label > span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,.7);
}
.cc-fields label > span em { font-style: normal; color: rgba(255,255,255,.4); text-transform: none; letter-spacing: 0; }
.cc-fields input, .cc-fields select, .cc-fields textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 14px;
}
.cc-fields input::placeholder, .cc-fields textarea::placeholder { color: rgba(255,255,255,.3); }
.cc-fields input:focus, .cc-fields select:focus, .cc-fields textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,255,194,.15);
}
.cc-fields .btn-primary { background: var(--teal); color: var(--ink-card); margin-top: 8px; width: 100%; margin-top: 20px;}
.cc-fields .btn-primary:hover { background: #33FFCF; }
.cc-submit {
  display: block; width: 100%;
  background: var(--teal); color: var(--ink-card);
  font-size: 16px; font-weight: 700;
  padding: 16px 24px;
  border-radius: 999px;
  border: none; cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
}
.cc-submit:hover { background: #33FFCF; }
.cc-fine { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.45); margin-top: 8px; text-align: center; }
.cc-thanks { text-align: center; padding: 24px 0; }
.cc-tick {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal); color: var(--ink-card);
  font-family: var(--serif); font-size: 32px;
  border-radius: 50%;
  margin-bottom: 16px;
  font-weight: 700;
}
.cc-thanks h3 { font-family: var(--serif); font-size: 28px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.025em; }
.cc-thanks p { color: rgba(255,255,255,.7); margin: 0; }


.foot { padding: 64px 0 32px; background: var(--bg); border-top: 1px solid var(--rule-soft); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.foot-tag { font-family: var(--sans); font-size: 16px; line-height: 1.45; color: var(--ink-3); margin: 14px 0 0; max-width: 320px; }
.foot-col-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
  margin-bottom: 14px;
}
.foot a, .foot .foot-link-btn { display: block; padding: 4px 0; font-size: 14px; color: var(--ink-2); }
.foot a.brand{display: inline-flex;}
.foot a:hover, .foot .foot-link-btn:hover { color: var(--ink); }
.foot .foot-link-btn { background: none; border: none; cursor: pointer; text-align: left; font: inherit; font-size: 14px; }
.foot-rule { height: 1px; background: var(--rule-soft); margin: 48px 0 20px; }
.foot-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
}

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .ppanel { grid-template-columns: 1fr; padding: 24px; }
  .cases { grid-template-columns: 1fr; }
  .cc-grid { grid-template-columns: 1fr; gap: 48px; }
  .pillar-tabs { grid-template-columns: repeat(3, 1fr); }
  .ptab:nth-child(3) { border-right: none; }
  .ptab:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .pains-list { grid-template-columns: 1fr; }
  .results-hero { grid-template-columns: 1fr 1fr; }
  .rh-block:nth-child(2) { border-right: none; }
  .rh-block:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .calc-shell { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .calc-bar-row{grid-template-columns: 120px 1fr 100px;}
  .wrap { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.is-open {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-mobile {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 20px;
    border-top: 1px solid transparent;
    transition: max-height .25s ease, opacity .2s ease, padding .2s ease, border-color .2s ease;
    background: rgba(10,15,29,.97);
  }
  .nav-mobile.is-open {
    max-height: 420px;
    opacity: 1;
    padding: 16px 20px 18px;
    border-top-color: var(--rule-soft);
  }
  .nav-mobile a,
  .nav-mobile .btn,
  .nav-mobile .nav-mobile-parent {
    width: 100%;
  }
  .nav-mobile a,
  .nav-mobile .nav-mobile-parent {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 0;
    line-height: 1.35;
  }
  .nav-mobile .nav-mobile-parent {
    justify-content: space-between;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
  }
  .nav-mobile .nav-mobile-parent .caret {
    font-size: 11px;
    transition: transform .2s ease;
  }
  .nav-mobile .nav-mobile-parent.is-open .caret {
    transform: rotate(180deg);
  }
  .nav-mobile-sub {
    display: grid;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: -2px 0 2px 10px;
    padding-left: 10px;
    border-left: 1px solid var(--rule-soft);
    transition: max-height .22s ease, opacity .2s ease;
  }
  .nav-mobile-sub.is-open {
    max-height: 240px;
    opacity: 1;
  }
  .nav-mobile-sub a {
    color: var(--ink-3);
    font-size: 13px;
    min-height: 30px;
    padding: 2px 0;
  }
  .nav-mobile .btn {
    margin-top: 8px;
    justify-content: center;
  }
  .hero { padding: 20px 0 60px; }
  .spot-grid { grid-template-columns: 1fr; }
  .spot-arrow { display: none; }
  .spot-foot { grid-template-columns: 1fr; }
  .calc-shell { padding: 24px; }
  .calc-big { font-size: 48px; }
  .pillar-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .ptab {
    flex: 0 0 240px;
    border-top: none;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num name"
      "desc desc";
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
  }
  .ptab-num { grid-area: num; }
  .ptab-name { grid-area: name; }
  .ptab-desc { grid-area: desc; }
  .ptab:nth-child(3) { border-right: 1px solid var(--rule); }
  .ptab:nth-child(n+4) { border-top: none; }
  .land-table-wrap-desktop {
    display: none;
  }
  .land-table-wrap-mobile {
    display: block;
  }
  .land-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--bg);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
  }
  .land-table {
    width: max-content;
    min-width: 760px;
    font-size: 12px;
    border-collapse: collapse;
  }
  .land-table th,
  .land-table td {
    display: table-cell;
    width: auto;
    padding: 10px 12px;
    white-space: nowrap;
  }
  .land-table td::before {
    content: none;
  }
  .land-table thead {
    display: table-header-group;
  }
  .land-table tbody {
    display: table-row-group;
  }
  .land-table tr {
    display: table-row;
    background: transparent;
    border: none;
  }
  .land-table-mobile thead th.lt-memo,
  .land-table-mobile td.lt-memo {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 6px 0 12px rgba(10,15,29,.16);
  }
  .land-table-mobile thead th.lt-memo {
    z-index: 3;
    background: rgba(0,255,194,0.9);
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    color: var(--ink-card);
  }
  .land-table-mobile td.lt-memo {
    background: #0f1c22;
    border-right: 1px solid var(--teal);
    white-space: normal;
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    word-break: break-word;
  }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-meta { flex-direction: column; gap: 8px; align-items: flex-start; }
  .timeline::before { left: 22px; }
  .timeline-progress { left: 22px; }
  .timeline li { grid-template-columns: 60px 1fr; gap: 16px; }
  .timeline li::after { left: 15px; top: 40px;}
  .tl-when { font-size: 10px; }
  .creative-demo { grid-template-columns: 1fr; }
  .cd-sig { grid-template-columns: 120px 1fr; }
  .nav-inner{padding: 0 15px; gap: 16px; display: flex; justify-content: space-between;}
  .calc-output{padding: 20px; }
  .nav-actions a:first-child{display:none;}
  .close-cta, .implement, .landscape, .results, .calc, .platform, .pillars, .diag, .hero, .sp-section{padding: 20px 0px !important;}
  .diag{padding: 20px 0 40px 0 !important;}
  .cc-form{padding: 20px;}
  .sp-quote{padding: 20px !important; font-size: 14px;}
  .sp-cta-inline{margin-top: 20px !important;}
}

.results-strip {
  margin-top: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 44px 0 32px;
  position: relative;
}

.metrics-band {
  background: #090d1f;
  border-top: none;
  border-bottom: none;
  padding: 88px 0 80px;
  position: relative;
  overflow: hidden;
}
.metrics-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(0,255,194,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 85% 50%, rgba(0,255,194,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0,255,194,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.mb-head {
  position: relative;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 72px;
}
.mb-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(180,185,255,0.55);
  margin: 0 0 18px;
}
.mb-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(200,205,255,0.75);
  margin: 0;
}
.mb-title strong {
  font-weight: 700;
  color: #fff;
}

.mb-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 14px 0 0;
}

@media (max-width: 640px) {
  .metrics-band { padding: 40px 0 32px; }
}

.mb-marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0 6px;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.mb-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: mbScroll 48s linear infinite;
  will-change: transform;
}
.mb-marquee:hover .mb-track { animation-play-state: paused; }
@keyframes mbScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.mb-item {
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  white-space: nowrap;
  color: var(--ink);
}
.mb-val {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(44px, 5.6vw, 82px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--teal);
  background: linear-gradient(180deg, var(--teal) 0%, #00D4A3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(0,255,194,0.18);
}
.mb-val .mb-u {
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-left: 2px;
  -webkit-text-fill-color: initial;
  color: var(--teal);
  opacity: 0.85;
}
.mb-lab {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mb-sep {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0,255,194,0.35);
  box-shadow: 0 0 12px rgba(0,255,194,0.4);
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .mb-track { animation: none; transform: none; }
  .mb-marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}
@media (max-width: 720px) {
  .mb-track { gap: 36px; animation-duration: 36s; }
  .mb-item { gap: 12px; }
  .metrics-band { padding: 40px 0 32px; }
  .mb-head { margin-bottom: 24px; }
}

/* Screen-reader-only utility (for the metrics band a11y list) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Brand mark polish */
.brand-mark { flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(0,255,194,0.18)); }
.rs-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 44px;
}
.rs-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--teal-deep, var(--teal));
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 14px;
  position: relative;
}
.rs-kicker::after {
  content: "";
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 1px;
  background: var(--teal);
  opacity: .5;
}
.rs-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 10px 0 0;
}
.rs-marquee {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.rs-track {
  display: flex;
  align-items: baseline;
  gap: 40px;
  width: max-content;
  animation: rsScroll 60s linear infinite;
}
.rs-marquee:hover .rs-track { animation-play-state: paused; }
@keyframes rsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.rs-item {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: opacity .2s ease;
}
.rs-item:hover { opacity: .7; }
.rs-val {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--teal);
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep, var(--teal)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rs-lab {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rs-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rule);
  flex: none;
  align-self: center;
}

@media (max-width: 720px) {
  .results-strip { padding: 40px 0 28px; margin-top: 48px; }
  .rs-head { margin-bottom: 28px; }
  .rs-track { gap: 28px; animation-duration: 45s; }
  .rs-item { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   DIAGNOSTIC / PROBLEM — visual exhibit grid
   ═══════════════════════════════════════════════════════════ */
/* Orbit diagram: 8 symptoms → 1 root cause */
.diag-orbit {
  background:
    radial-gradient(720px 360px at 50% 40%, rgba(0,255,194,0.05), transparent 62%),
    var(--bg);
  padding: 48px 0 72px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.diag-orbit .mb-head { margin-bottom: 24px; }
.orbit-stage {
  display: flex;
  justify-content: center;
  padding: 0 12px;
}
.orbit-svg {
  width: 100%;
  max-width: 920px;
  height: auto;
  overflow: visible;
}
.orbit-labels text {
  font-weight: 400;
  letter-spacing: -0.005em;
}
.orbit-core-glow {
  transform-origin: 400px 200px;
  transform-box: fill-box;
  animation: orbitCoreBreathe 2.8s ease-in-out infinite;
}
.orbit-ripple {
  transform-origin: 400px 200px;
  transform-box: fill-box;
  animation: orbitRipple 2.8s ease-out infinite;
}
.orbit-dots circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: orbitDotPulse 2.6s ease-in-out infinite;
}
.orbit-dots circle:nth-child(1) { animation-delay: 0s; }
.orbit-dots circle:nth-child(2) { animation-delay: 0.3s; }
.orbit-dots circle:nth-child(3) { animation-delay: 0.6s; }
.orbit-dots circle:nth-child(4) { animation-delay: 0.9s; }
.orbit-dots circle:nth-child(5) { animation-delay: 1.2s; }
.orbit-dots circle:nth-child(6) { animation-delay: 1.5s; }
.orbit-dots circle:nth-child(7) { animation-delay: 1.8s; }
.orbit-dots circle:nth-child(8) { animation-delay: 2.1s; }
@keyframes orbitCoreBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.95; }
}
@keyframes orbitRipple {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes orbitDotPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(255,107,91,0.5)); }
  50%      { transform: scale(1.25); filter: drop-shadow(0 0 10px rgba(255,107,91,0.9)); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-core-glow,
  .orbit-ripple,
  .orbit-dots circle,
  .orbit-pulses circle { animation: none; }
}

.orbit-headline {
  font-family: var(--sans);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-align: center;
  max-width: 980px;
  margin: 32px auto 18px;
  color: var(--ink);
}
.orbit-headline em {
  font-style: italic;
  color: var(--teal);
  font-weight: 800;
}
.orbit-sub {
  font-size: 17px;
  line-height: 1.55;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink-2);
}
.orbit-sub em {
  font-style: italic;
  color: var(--teal);
  font-weight: 500;
}
@media (max-width: 720px) {
  .orbit-stage { padding: 0; }
  .orbit-labels text { font-size: 11px; }
  .orbit-headline { font-size: 26px; }
  .orbit-sub { font-size: 15px; }
}

.diag {
  background:
    radial-gradient(760px 320px at 12% -6%, rgba(255,107,91,0.055), transparent 62%),
    var(--ink-card);
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.diag-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.diag-card {
  grid-column: span 3;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg, 14px);
  padding: 28px 28px 0;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
  position: relative;
  transition: border-color .2s ease, transform .2s ease;
}
.diag-card:hover { border-color: rgba(0,255,194,.3); }
.diag-card-wide { grid-column: span 3; }
.dc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.dc-idx {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.12em;
  font-weight: 500;
}
.dc-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.dc-body h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.dc-body h3 em {
  font-style: normal;
  color: var(--teal);
}
.dc-body p {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 46ch;
}
.dc-exhibit {
  margin-top: auto;
  margin-left: -28px;
  margin-right: -28px;
  margin-bottom: 0;
  padding: 22px 28px 24px;
  background: var(--ink-card);
  border-top: 1px solid var(--rule);
}

/* Exhibit 1 — inflation bars */
.dc-inflation { display: flex; flex-direction: column; gap: 10px; }
.dc-inf-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 12px;
}
.dc-inf-lab {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.dc-inf-bar {
  height: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.dc-inf-fill {
  height: 100%;
  border-radius: 0;
}
.dc-inf-fill.ghost {
  background: repeating-linear-gradient(45deg, rgba(255,107,91,.5) 0 6px, rgba(255,107,91,.15) 6px 12px);
}
.dc-inf-fill.real {
  background: var(--teal);
  box-shadow: inset 0 0 20px rgba(0,0,0,.15);
}
.dc-inf-val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  min-width: 52px;
  text-align: right;
}
.dc-inf-delta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}
.dc-inf-delta-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dc-inf-delta-val {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 32px;
  color: var(--coral);
  letter-spacing: -0.02em;
}

/* Exhibit 2 — fatigue */
.dc-fatigue svg { width: 100%; height: 110px; display: block; }
.dc-fatigue-foot {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}
.dc-fatigue-foot b { color: var(--coral); font-weight: 600; }

/* Exhibit 3 — timing */
.dc-time-track {
  display: flex;
  gap: 0;
  position: relative;
  padding: 18px 0 22px;
}
.dc-time-track::before {
  content: '';
  position: absolute;
  left: 10px; right: 10px; top: 23px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--ink-4) 0 4px, transparent 4px 8px);
}
.dc-time-evt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.dc-time-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--coral);
  border: 2px solid var(--bg);
  margin-bottom: 2px;
  box-shadow: 0 0 0 1px var(--coral);
}
.dc-time-lab {
  font-size: 11px;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.3;
}
.dc-time-date {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.dc-time-foot {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}
.dc-time-foot b { color: var(--coral); font-weight: 600; }

/* Exhibit 4 — memory */
.dc-mem-decisions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-mem-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-2);
}
.dc-mem-item.dc-mem-leaving {
  border-color: rgba(255,107,91,.3);
  background: rgba(255,107,91,.06);
  animation: memFade 2.8s ease-in-out infinite alternate;
}
@keyframes memFade {
  0% { opacity: 1; }
  100% { opacity: 0.45; }
}
.dc-mem-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
.dc-mem-dot.leaving {
  background: var(--coral);
}
.dc-mem-fate {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.dc-mem-fate.bad { color: var(--coral); }
.dc-mem-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}

/* Secondary band */
.diag-band {
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg, 14px);
}
.db-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.db-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 28px;
}
.db-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-right: 8px;
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}
.db-list li:nth-child(3n+1) { border-left: none; padding-left: 0; }
.db-list b { color: var(--ink); font-weight: 600; }
.db-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--teal);
  padding-top: 3px;
}

/* Close — promoted editorial capstone */
.diag-close {
  position: relative;
  margin: 72px auto 0;
  max-width: 920px;
  padding: 56px 48px 48px;
  text-align: center;
  background:
    radial-gradient(620px 240px at 50% 0%, rgba(0,255,194,0.07), transparent 70%),
    linear-gradient(180deg, rgba(0,255,194,0.025) 0%, transparent 100%);
  border: 1px solid rgba(0,255,194,0.22);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}
.diag-close::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  transform: translateX(-50%);
}
.dclose-converge {
  width: 96px;
  height: 64px;
  margin: 0 auto 22px;
  display: block;
}
.dclose-converge svg { width: 100%; height: 100%; display: block; }
.dclose-converge-core {
  animation: dcloseCorePulse 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.dclose-converge-dots circle {
  animation: dcloseDot 2.4s ease-in-out infinite;
}
.dclose-converge-dots circle:nth-child(1) { animation-delay: 0s; }
.dclose-converge-dots circle:nth-child(2) { animation-delay: .3s; }
.dclose-converge-dots circle:nth-child(3) { animation-delay: .6s; }
.dclose-converge-dots circle:nth-child(4) { animation-delay: .9s; }
@keyframes dcloseDot {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@keyframes dcloseCorePulse {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.4); opacity: 1; }
}

.dclose-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.dclose-rule-line {
  width: 36px;
  height: 1px;
  background: rgba(0,255,194,0.45);
}
.dclose-lab {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}

.dclose-lead {
  font-family: var(--sans);
  font-size: clamp(20px, 2.0vw, 26px);
  line-height: 1.42;
  color: var(--ink);
  letter-spacing: -0.012em;
  max-width: 720px;
  margin: 0 auto 22px;
}
.dclose-lead em {
  font-style: normal;
  color: var(--teal);
  font-weight: 600;
}
.dclose-punch {
  font-family: var(--serif, var(--sans));
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.28;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
  max-width: 820px;
  margin: 0 auto 32px;
}
.dclose-punch em {
  font-style: italic;
  color: var(--teal);
  font-weight: 700;
}
.dclose-cta {
  margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .dclose-converge-core, .dclose-converge-dots circle { animation: none !important; }
}

@media (max-width: 980px) {
  .diag-grid { grid-template-columns: 1fr; }
  .diag-card, .diag-card-wide { grid-column: span 1; min-height: 0; }
  .db-list { grid-template-columns: 1fr; gap: 14px; }
  .db-list li { border-left: none; padding-left: 0; }
  .diag-close { padding: 44px 24px 36px; max-width: 100%; }
  .dclose-lead { font-size: 18px; }
  .dclose-punch { font-size: 22px; }
}

@media (max-width: 720px) {
  .diag-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    margin-top: 28px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .diag-card,
  .diag-card-wide {
    flex: 0 0 86%;
    min-height: 0;
    scroll-snap-align: start;
    padding: 22px 20px 0;
  }

  .dc-mem-decisions { gap: 6px; }

  .dc-mem-item {
    gap: 8px;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.25;
  }

  .dc-mem-fate {
    font-size: 9px;
    letter-spacing: 0.03em;
  }

  .dc-mem-note {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 10px;
    line-height: 1.3;
  }
}


.creative-scene {
  position: relative;
  perspective: 1400px;
  padding: 16px 8px 8px;
  min-height: 440px;
  transform: scale(0.8);
}
.cs-stage {
  position: relative;
  width: 100%;
  height: 420px;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-10deg);
}
.cs-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}
.cs-glow-a {
  width: 280px; height: 280px;
  top: -60px; left: -40px;
  background: radial-gradient(circle, rgba(0,255,194,0.55), transparent 70%);
}
.cs-glow-b {
  width: 320px; height: 320px;
  bottom: -100px; right: -60px;
  background: radial-gradient(circle, rgba(255,107,91,0.35), transparent 70%);
}

/* Stacked 3D ad cards */
.cs-card {
  position: absolute;
  width: 180px;
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,0.8),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.cs-card-back {
  top: 36px; left: 24px;
  transform: translateZ(-40px) rotateZ(-4deg);
  opacity: 0.88;
}
.cs-card-mid {
  top: 22px; left: 90px;
  transform: translateZ(-10px) rotateZ(-1.5deg);
  opacity: 0.96;
}
.cs-card-front {
  top: 4px; left: 156px;
  transform: translateZ(30px);
  box-shadow:
    0 50px 120px -20px rgba(0,255,194,0.25),
    0 40px 80px -30px rgba(0,0,0,0.9),
    0 0 0 1px rgba(0,255,194,0.35),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.cs-stage:hover .cs-card-front { transform: translateZ(44px) rotateX(-2deg); }

.cs-card-media {
  position: relative;
  height: 176px;
  overflow: hidden;
}
.cs-card-media[data-heat="cool"] {
  background:
    linear-gradient(135deg, #0E3A38 0%, #0A2A36 60%, #082029 100%);
}
.cs-card-media[data-heat="warm"] {
  background:
    linear-gradient(135deg, #3A2A10 0%, #2A1E0A 60%, #20160A 100%);
}
.cs-card-media[data-heat="hot"] {
  background:
    linear-gradient(135deg, #3A0F10 0%, #2A0A12 60%, #1A0610 100%);
}
.cs-card-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.04) 0 2px,
      transparent 2px 8px);
  pointer-events: none;
}
.cs-card-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,0.6);
  color: var(--ink);
  z-index: 3;
}
.cs-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  color: var(--ink);
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 3;
}

.cs-heatmap { position: absolute; inset: 0; z-index: 2; }
.cs-hot {
  position: absolute;
  left: var(--l, 50%);
  top: var(--t, 50%);
  width: var(--s, 80px); height: var(--s, 80px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255,107,91,0.85) 0%,
    rgba(255,107,91,0.35) 40%,
    transparent 70%);
  filter: blur(4px);
  border-radius: 50%;
  animation: csPulse 2.8s ease-in-out infinite;
}
.cs-hot:nth-child(2) { animation-delay: .7s; }
.cs-hot:nth-child(3) { animation-delay: 1.4s; }
@keyframes csPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.15); }
}
.cs-hot:nth-child(1) { left: 68%; top: 32%; }
.cs-hot:nth-child(2) { left: 32%; top: 62%; }
.cs-hot:nth-child(3) { left: 78%; top: 78%; }

.cs-card-foot {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0,0,0,0.35);
}
.cs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
}
.cs-pill.ok  { background: rgba(0,255,194,0.18); color: var(--teal); }
.cs-pill.mid { background: rgba(255,179,71,0.18); color: var(--amber); }
.cs-pill.bad { background: rgba(255,107,91,0.22); color: var(--coral); }
.cs-card-refresh {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  cursor: pointer;
}

/* Floating signal orbs */
.cs-orb {
  position: absolute;
  top: -8%; 
  left: 54%;
  transform: translate(-50%, -50%) translateZ(70px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(10,15,29,0.82), rgba(10,15,29,0.55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,255,194,0.28);
  box-shadow:
    0 10px 30px -8px rgba(0,0,0,0.8),
    0 0 20px rgba(0,255,194,0.18);
  min-width: 78px;
  animation: csFloat 6s ease-in-out infinite;
}
.cs-orb-freq  { animation-delay: -1.2s; top: 14%; left: 92%;}
.cs-orb-cpa   { animation-delay: -2.4s; top: 66%; left: 96%;}
.cs-orb-over  { animation-delay: -3.6s; top: 86%; left: 10%;}
@keyframes csFloat {
  0%, 100% { transform: translate(-50%, -50%) translateZ(70px) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateZ(76px) translateY(-6px); }
}
.cs-orb-val {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--teal);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cs-orb-lab {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Tone the "too-healthy" or mixed orbs differently if needed */
.cs-orb-over { border-color: rgba(255,179,71,0.35); box-shadow: 0 10px 30px -8px rgba(0,0,0,0.8), 0 0 20px rgba(255,179,71,0.18); }
.cs-orb-over .cs-orb-val { color: var(--amber); }
.cs-orb-cpa { border-color: rgba(255,107,91,0.35); box-shadow: 0 10px 30px -8px rgba(0,0,0,0.8), 0 0 20px rgba(255,107,91,0.18); }
.cs-orb-cpa .cs-orb-val { color: var(--coral); }

.cs-connect {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Refresh queue tray at the bottom */
.cs-tray {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%) translateZ(20px);
  width: 340px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(15,22,40,0.9), rgba(10,15,29,0.7));
  border: 1px solid rgba(0,255,194,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.8), 0 0 30px rgba(0,255,194,0.1);
}
.cs-tray-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 8px;
}
.cs-tray-lab { color: var(--teal); }
.cs-tray-count { color: var(--ink-3); }
.cs-tray-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-queue {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-queue span { font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--ink); }
.cs-queue em {
  font-family: var(--mono); font-size: 10px; font-style: normal;
  letter-spacing: 0.06em; color: var(--teal);
}

@media (max-width: 900px) {
  .cs-stage { transform: none; height: 520px; }
  .cs-card { width: 150px; height: 200px; }
  .cs-card-back  { top: 24px; left: 8px; }
  .cs-card-mid   { top: 16px; left: 72px; }
  .cs-card-front { top: 8px;  left: 140px; }
  .cs-orb { transform: translate(-50%, -50%); }
  .cs-tray { width: 92%; }
}


.aud-scene {
  position: relative;
  perspective: 1600px;
  min-height: 440px;
  padding: 10px 0 4px;
}
.aud-stage {
  position: relative;
  height: 420px;
  transform-style: preserve-3d;
  transform: rotateX(14deg) rotateY(-6deg);
  transform: scale(0.9);
}
.aud-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 220px at 50% 48%, rgba(0,255,194,0.22), transparent 70%),
    radial-gradient(300px 160px at 20% 20%, rgba(0,160,255,0.12), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}
.aud-orbits {
  position: absolute;
  inset: 4% 0 0 0;
  width: 100%; height: 80%;
  z-index: 1;
}

/* Central hub */
.aud-hub {
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, -50%) translateZ(50px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.aud-hub-core {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--teal), #00C99C);
  display: grid; place-items: center;
  box-shadow:
    0 0 40px rgba(0,255,194,0.55),
    0 0 80px rgba(0,255,194,0.25),
    inset 0 -8px 20px rgba(0,0,0,0.25),
    inset 0 8px 20px rgba(255,255,255,0.25);
  animation: audPulse 3.2s ease-in-out infinite;
}
@keyframes audPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(0,255,194,0.55), 0 0 80px rgba(0,255,194,0.25), inset 0 -8px 20px rgba(0,0,0,0.25), inset 0 8px 20px rgba(255,255,255,0.25); }
  50%      { box-shadow: 0 0 60px rgba(0,255,194,0.75), 0 0 120px rgba(0,255,194,0.35), inset 0 -8px 20px rgba(0,0,0,0.25), inset 0 8px 20px rgba(255,255,255,0.25); }
}
.aud-hub-lab {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.aud-hub-sub {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: -4px;
}

/* 6 agent orbit nodes */
.aud-agent {
  position: absolute;
  top: var(--t); left: var(--l);
  transform: translate(-50%, -50%) translateZ(30px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(15,22,40,0.92), rgba(10,15,29,0.7));
  border: 1px solid rgba(0,255,194,0.3);
  backdrop-filter: blur(10px);
  box-shadow:
    0 12px 28px -10px rgba(0,0,0,0.8),
    0 0 16px rgba(0,255,194,0.15);
  z-index: 2;
  animation: audFloat 6s ease-in-out infinite;
}

.aa-acq{top: 12%; left: 20%;}
.aa-react { animation-delay: -1s; top: 8%; left: 70%;}
.aa-ret   { animation-delay: -2s; top: 38%; left: 84%;}
.aa-ctx   { animation-delay: -3s; top: 72%; left: 78%;}
.aa-sup   { animation-delay: -4s; top: 80%; left: 28%;}
.aa-bid   { animation-delay: -5s; top: 42%; left: 10%;}




@keyframes audFloat {
  0%, 100% { transform: translate(-50%, -50%) translateZ(30px) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateZ(36px) translateY(-4px); }
}
.aud-agent-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(0,255,194,0.7);
  flex: none;
}
.aud-agent-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.aud-agent-size {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding-left: 8px;
  border-left: 1px solid var(--rule);
}

/* Cross-platform sync footer */
.aud-sync {
  position: absolute;
  left: 0%;
  bottom: -20px;
  transform: translateX(-50%) translateZ(10px);
  width: 94%;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(15,22,40,0.9), rgba(10,15,29,0.72));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  transform: scale(1);

}
.aud-sync-lab {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.aud-sync-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.aud-chip {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0,255,194,0.25);
  color: var(--ink);
  position: relative;
}
.aud-chip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(0,255,194,0.7);
  animation: audChip 2s ease-in-out infinite;
}
.aud-chip:nth-child(2)::before { animation-delay: .5s; }
.aud-chip:nth-child(3)::before { animation-delay: 1s; }
.aud-chip:nth-child(4)::before { animation-delay: 1.5s; }
@keyframes audChip {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@media (max-width: 900px) {
  .aud-stage { transform: none; height: 520px; }
  .aud-agent { font-size: 12px; }
  .aud-agent-size { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-hot, .cs-orb, .aud-hub-core, .aud-agent, .aud-chip::before { animation: none; }
}

/* Pilot CTA modal */
.pm-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(5, 9, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pm-fade 0.18s ease-out;
}
.pm-dialog {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--ink-card);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  animation: pm-rise 0.2s ease-out;
}
.pm-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,.55); font-size: 24px; line-height: 1;
  border-radius: 999px;
}
.pm-close:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.pm-head { margin-bottom: 20px; padding-right: 28px; }
.pm-title { font-family: var(--serif); font-size: 24px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.02em; }
.pm-sub { font-size: 13px; color: rgba(255,255,255,.65); margin: 0; line-height: 1.5; }
.pm-thank-close { margin-top: 20px; }
.cc-error {
  padding: 10px 12px;
  background: rgba(255, 80, 80, 0.08);
  border: 1px solid rgba(255, 80, 80, 0.3);
  border-radius: var(--radius-sm);
}
.cc-error p { margin: 0; color: #ff8080; font-size: 13px; }

@keyframes pm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pm-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.geo-grid-in{
  display: flex; 
  gap: 12px;
  height: 210px
}


@media (max-width: 767px) {
  body {
    font-size: 15px;
  }

  .ppanel-readmore {
    position: relative;
    max-height: 100px;
    overflow: hidden;
  }

  .ppanel-readmore::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(10,15,29,0), var(--bg-alt));
    pointer-events: none;
  }

  .ppanel-readmore.expanded {
    max-height: none;
    overflow: visible;
  }

  .ppanel-readmore.expanded::after { display: none; }

  .ppanel-readmore-btn {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--teal);
    border-bottom: 1px solid var(--teal);
    padding-bottom: 2px;
    padding: 0px;
  }

  .ppanel-readmore-btn:hover { color: var(--ink); border-color: var(--ink); }

  .lede, .section-sub, .ppanel-copy > p, .ppanel-list li{font-size: 15px;}
  .hero-micro{line-height: 16px;}
  .demo-head{display: block;}
  .demo-title{display: block; width: 100%; margin-top: 10px;}
  .geo-grid{padding: 15px;}
  .hero-grid{gap: 40px; padding-bottom: 20px;}
  .hero-carousel{padding: 20px;}
  .spot-grid{display: flex; flex-wrap: wrap; align-items: flex-start;}
  .spot-cell{width: calc(50% - 10px); text-align: center;}
  .spot-num{font-size: 50px;}
  .spot-small{font-size: 9px;}
  .spot-foot{margin-top: 14px;}
  .hero-carousel{height: 520px;}
  .metrics-band{padding: 30px 0px;}
  .diag-close{margin: 32px 16px 0; padding: 32px 20px 28px;}
  .dclose-converge{width: 72px; height: 48px; margin-bottom: 14px;}
  .dclose-eyebrow{margin-bottom: 14px;}
  .dclose-rule-line{width: 22px;}
  .dclose-lab{font-size: 10px; letter-spacing: 0.18em;}
  .dclose-lead{font-size: 16px; margin-bottom: 16px;}
  .dclose-punch{font-size: 20px; margin-bottom: 22px;}
  .dc-mem-dot{display: none;}
  .ppanel{padding: 20px;}
  .ppanel-copy h3{font-size: 30px; margin-bottom: 0px;}
  .ppanel.active{gap: 30px;}
  .geo-grid-in{height: auto; flex-direction: column; gap: 0px;}
  .calc-bar-row{
    gap: 6px 10px;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "bar bar";
    align-items: center;
  }
  .calc-bar-label { grid-area: label; }
  .calc-bar-value { grid-area: value; }
  .calc-bar { grid-area: bar; }
  .creative-scene{min-height: auto; transform: scale(.9);}
  .cs-stage{height: 400px}
  .cs-card{height: 235px;}

  .cs-orb{top: -2%; left: 15%;}
  .cs-orb-freq  { animation-delay: -1.2s; top: 1%; left: 92%;}
  .cs-orb-cpa   { animation-delay: -2.4s; top: 66%; left: 90%;}
  .cs-orb-over  { animation-delay: -3.6s; top: 66%; left: 10%;}
  .aud-agent-dot{display: none;}
  .aud-stage{height: 350px;}

  .aud-agent-name{font-size: 11px;}
  .aud-hub-sub{text-align: center;}
  .aa-acq{top: 20%; left: 18%;}
  .aa-react {top: 21%; left: 81%;}
  .aa-ret   {top: 44%; left: 84%;}
  .aa-ctx   {top: 66%; left: 84%;}
  .aa-sup   {top: 68%; left: 19%;}
  .aa-bid   {top: 42%; left: 16%;}
  .aud-sync{bottom: -40px; left: 3%;}
  .mem-plan-head{flex-direction: column; align-items: flex-start;}
  .mem-plan-tag{text-align: left;}
  .mem-plan-name{font-size: 17px;}
  .mem-plan{padding: 15px;}
  .mem-warning{padding: 15px;}
  .memory-demo{padding: 15px;}
  .mem-table td{padding: 5px;;}
  .mem-warning{border-left-width: 1px;}
  .mem-warning-title{width: calc(100% - 22px); font-size: 16px;}
  .mem-table{font-size: 12px;}
  .geo-readout{font-size: 11px;}
  .calc-shell{padding: 15px; gap: 20px;}
  .calc-inputs{flex-wrap: wrap; flex-direction: row; gap: 16px;}
  .calc-field{width: calc(50% - 8px);}
  .calc-field:last-child{width: 100%;}
  .calc-field > span{letter-spacing: normal; text-transform: none;}
  .calc-input{padding: 0 8px;}
  .calc-input input[type="number"]{font-size: 16px;}
  .calc-result-label{letter-spacing: normal;}
  .calc-output{padding: 15px;}
  .calc-big{font-size: 36px;}
  .calc-bar{height: 6px; border-radius: 6px;}
  .calc-spacer{height: 0px;}
  .spot-meta{font-size: 10px;}
  .spot-cell{text-align: left;}

  .hero-carousel .hc-head{height: 50px;}
  .hero-carousel .hc-slide:first-child .hc-head{margin-bottom: 10px;}
  .hero-micro .sep{font-size: 20px; color: #fff;}
  .ptab{padding: 10px 15px;}
  .metrics-band:before {background: radial-gradient(70% 60% at 15%, #00ffc323 0%, #0000 50%), radial-gradient(70% 60% at 65%, #00ffc323 0%, #0000 70%), radial-gradient(60% 80%, #00ffc323 0%, #0000 0%);}
  .land-table .lt-memo{border-left: none;}
}
/* ===== app/sub.css ===== */
/* ═══════════ SUBPAGE STYLES ═══════════ */

.subpage-hero {
  padding: 72px 0 64px;
  border-bottom: 1px solid var(--rule-soft);
}
.subpage-hero .eyebrow { margin-bottom: 20px; }
.subpage-hero h1 {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(48px, 5.2vw, 80px);
  line-height: 1; letter-spacing: -0.035em;
  margin: 0 0 24px;
  max-width: 960px;
}
.subpage-hero h1 em { font-style: italic; color: var(--teal); }
.subpage-hero .lede { max-width: 720px; margin: 0 0 32px; }

.sp-breadcrumb {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
  margin-bottom: 24px;
}
.sp-breadcrumb a { color: var(--ink-3); }
.sp-breadcrumb a:hover { color: var(--ink); }
.sp-breadcrumb span { margin: 0 8px; color: var(--ink-4); }

.sp-hero-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px;
  align-items: start;
}
.sp-stat-card {
  background: var(--ink-card); color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.sp-stat-card .section-kicker { color: rgba(255,255,255,.6); }
.sp-stat-card .section-kicker .num { background: var(--teal); color: var(--ink-card); }
.sp-stat-big {
  font-family: var(--serif); font-size: 88px; line-height: 1;
  letter-spacing: -0.035em; color: var(--teal);
  margin: 16px 0 0;
  font-weight: 800;
}
.sp-stat-big small { font-size: 40px; color: rgba(255,255,255,.7); }
.sp-stat-lab { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.7); }
.sp-stat-sub { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.8); padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }

.sp-section { padding: 96px 0; border-bottom: 1px solid var(--rule-soft); }
.sp-section.alt { background: var(--bg-alt); }

.sp-feats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  margin-top: 40px;
}
.sp-feat {
  padding: 28px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.sp-feat-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 16px;
  font-weight: 600;
}
.sp-feat h4 {
  font-family: var(--serif); font-weight: 700;
  font-size: 20px; line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.sp-feat p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

.sp-method {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin-top: 40px;
}
.sp-method h3 {
  font-family: var(--serif); font-weight: 800;
  font-size: 28px; margin: 0 0 20px;
  letter-spacing: -0.025em;
}
.sp-method ol {
  counter-reset: m;
  list-style: none; padding: 0; margin: 0;
}
.sp-method ol li {
  counter-increment: m;
  display: grid; grid-template-columns: 40px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--rule-soft);
}
.sp-method ol li::before {
  content: counter(m, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  padding-top: 4px;
}
.sp-method ol li b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.02em; color: var(--ink); }
.sp-method ol li p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

.sp-quote {
  padding: 64px 48px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.sp-quote p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
  margin: 0 0 24px;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
}
.sp-quote cite {
  font-style: normal;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}

.sp-nav-next {
  display: flex; justify-content: space-between;
  padding: 48px 0;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-3);
}
.sp-nav-next a { color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.sp-nav-next a:hover { border-color: var(--ink); }

.sp-cta-inline {
  margin-top: 48px;
  padding: 32px;
  background: var(--ink-card); color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  flex-wrap: wrap;
}
.sp-cta-inline h3 {
  font-family: var(--serif); font-weight: 700; font-size: 24px;
  margin: 0; letter-spacing: -0.02em;
}
.sp-cta-inline p { margin: 4px 0 0; color: rgba(255,255,255,.7); font-size: 14px; }

/* Privacy policy */
.privacy-hero .lede {
  max-width: 780px;
}
.privacy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.privacy-meta span,
.privacy-meta a {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
}
.privacy-meta a {
  color: var(--teal);
}
.privacy-section {
  background:
    radial-gradient(circle at 10% 0%, rgba(0,255,194,0.08), transparent 30%),
    var(--bg);
}
.privacy-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.privacy-toc {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgba(7,11,22,0.78);
  box-shadow: var(--shadow-sm);
}
.privacy-toc-title {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.privacy-toc a {
  display: block;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.3;
}
.privacy-toc a:hover {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}
.privacy-content {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.privacy-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 34px;
  background: rgba(10,15,29,0.82);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 96px;
}
.privacy-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--teal);
}
.privacy-card h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.privacy-card h3 {
  margin: 24px 0 8px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.privacy-card p,
.privacy-card li {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.72;
}
.privacy-card p {
  margin: 0;
}
.privacy-card p + p {
  margin-top: 14px;
}
.privacy-card ul,
.privacy-card ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 20px;
}
.privacy-card strong {
  color: var(--ink);
  font-weight: 700;
}
.privacy-card a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: rgba(0,255,194,0.35);
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .privacy-layout {
    grid-template-columns: 1fr;
  }
  .privacy-toc {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .privacy-toc-title {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .privacy-meta {
    flex-direction: column;
  }
  .privacy-toc {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .privacy-card {
    padding: 24px 20px;
  }
  .privacy-card p,
  .privacy-card li {
    font-size: 14px;
  }
}

/* Case-study specific */
.cs-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--rule-soft); }
.cs-industry {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal);
  background: var(--teal-soft);
  padding: 4px 8px; border-radius: 3px;
  display: inline-block;
  font-weight: 600;
}
.cs-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: 48px 0 64px;
}
.cs-stat { padding: 28px 24px; border-right: 1px solid var(--rule); }
.cs-stat:last-child { border-right: none; }
.cs-stat-num {
  font-family: var(--serif); font-size: 56px; line-height: 1;
  letter-spacing: -0.035em; color: var(--teal);
  font-weight: 800;
}
.cs-stat-lab {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
  margin-top: 12px;
}

.cs-body { display: grid; grid-template-columns: 200px 1fr; gap: 48px; padding: 80px 0; }
.cs-body h2 { font-family: var(--serif); font-weight: 800; font-size: 28px; margin: 0 0 16px; letter-spacing: -0.025em; }
.cs-body h2:not(:first-of-type) { margin-top: 40px; }
.cs-body p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.cs-body .cs-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
  padding-top: 8px;
}
.cs-pull {
  border-left: 2px solid var(--teal);
  padding: 12px 0 12px 20px;
  font-family: var(--serif); font-style: italic;
  font-size: 20px; line-height: 1.4; color: var(--ink);
  margin: 24px 0;
  font-weight: 600; letter-spacing: -0.015em;
}
.cs-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; }
.cs-table th, .cs-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--rule-soft); }
.cs-table th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); background: var(--bg-alt); }
.cs-table .pos { color: var(--teal); font-family: var(--mono); font-weight: 500; }

/* Hub */
.hub-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 40px;
}
.hub-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px;
  display: flex; flex-direction: column;
  transition: all .2s;
}
.hub-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hub-card-head { display: flex; justify-content: space-between; margin-bottom: 16px; }
.hub-card h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.2; margin: 0 0 20px; letter-spacing: -0.02em; }
.hub-card-stats { display: flex; gap: 24px; padding: 14px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); margin-bottom: 14px; }
.hub-card-stat-val { display: block; font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--teal); font-weight: 800; letter-spacing: -0.025em; }
.hub-card-stat-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.hub-card-quote { font-size: 13px; line-height: 1.5; color: var(--ink-3); font-style: italic; margin: 0; flex: 1; }
.hub-card-cta { margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--teal); }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.price-col { padding: 36px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.price-col:last-child { border-right: none; }
.price-col.featured { background: var(--ink-card); color: var(--ink); position: relative; border-top: 2px solid var(--teal); }
.price-col.featured .section-kicker { color: rgba(255,255,255,.6); }
.price-col.featured .section-kicker .num { background: var(--teal); color: var(--ink-card); }
.price-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; font-weight: 600; }
.price-col.featured .price-tag { color: var(--teal); }
.price-name { font-family: var(--serif); font-size: 28px; margin: 0 0 6px; letter-spacing: -0.025em; font-weight: 800; }
.price-desc { font-size: 13px; color: var(--ink-3); margin: 0 0 24px; line-height: 1.5; }
.price-col.featured .price-desc { color: rgba(255,255,255,.7); }
.price-num { font-family: var(--serif); font-size: 52px; letter-spacing: -0.035em; line-height: 1; font-weight: 800; }
.price-num small { font-size: 14px; font-family: var(--mono); color: var(--ink-3); margin-left: 8px; font-weight: 400; letter-spacing: 0; }
.price-col.featured .price-num small { color: rgba(255,255,255,.6); }
.price-list { list-style: none; padding: 20px 0 0; margin: 24px 0 0; border-top: 1px solid var(--rule-soft); font-size: 14px; line-height: 1.55; flex: 1; }
.price-col.featured .price-list { border-color: rgba(255,255,255,.1); }
.price-list li { padding: 8px 0; display: grid; grid-template-columns: 20px 1fr; gap: 8px; color: var(--ink-2); }
.price-col.featured .price-list li { color: rgba(255,255,255,.85); }
.price-list li::before { content: "✓"; color: var(--teal); font-family: var(--mono); font-weight: 700; }
.price-col.featured .price-list li::before { color: var(--teal); }
.price-cta { margin-top: 24px; }
.price-featured-ribbon { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-card); background: var(--teal); padding: 4px 8px; border-radius: 3px; font-weight: 700; }

@media (max-width: 1100px) {
  .sp-hero-grid { grid-template-columns: 1fr; }
  .sp-feats { grid-template-columns: 1fr 1fr; }
  .sp-feats .sp-feat:nth-child(2) { border-right: none; }
  .cs-body { grid-template-columns: 1fr; gap: 16px; }
  .cs-stats { grid-template-columns: 1fr 1fr; }
  .cs-stats .cs-stat:nth-child(2) { border-right: none; }
  .cs-stats .cs-stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .hub-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .price-col { border-right: none; border-bottom: 1px solid var(--rule); }
  .price-col:last-child { border-bottom: none; }
}
@media (max-width: 720px) {
  .sp-feats { grid-template-columns: 1fr; }
  .sp-feats .sp-feat { border-right: none; }
  .sp-method { padding: 24px; }
  .cs-stats { grid-template-columns: 1fr; }
  .cs-stats .cs-stat { border-right: none; border-bottom: 1px solid var(--rule); }
}

/* ═══════════════════════════════════════════════════════════
   INCREMENTALITY IQ — enriched product page
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.iq-hero {
  padding: 56px 0 64px;
  background:
    radial-gradient(900px 320px at 85% 0%, rgba(0,255,194,0.08), transparent 60%),
    radial-gradient(600px 260px at 10% 100%, rgba(96,165,250,0.06), transparent 60%);
}
.iq-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.iq-hero-lead h1 {
  font-family: var(--sans);
  font-size: clamp(44px, 4.8vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 18px 0 22px;
}
.iq-hero-lead h1 em { font-style: italic; color: var(--teal); }

.iq-chip-row { margin-bottom: 4px; }
.iq-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.iq-chip-accent {
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  color: #7CFFDB;
}
.iq-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 28px;
}
.iq-fchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: var(--ink-2);
}
.iq-fchip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(0,255,194,0.5);
}
.iq-cta-row { margin-bottom: 24px; }
.iq-hero-micro {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.iq-hero-micro .sep { color: var(--rule); }

/* ── Consensus Verdict card ── */
.iq-verdict {
  position: relative;
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(26,35,56,0.92), rgba(15,21,36,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 0 1px rgba(0,255,194,0.35),
    0 0 48px rgba(0,255,194,0.18),
    0 40px 80px -30px rgba(0,0,0,0.7);
  overflow: hidden;
}
.iq-verdict::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,194,0.18), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.iq-verdict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
}
.iq-verdict-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  color: #7CFFDB;
  padding: 4px 10px;
  border-radius: 999px;
}
.iq-verdict-id {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
}
.iq-verdict-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.iq-verdict-big {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 6px 0 18px;
}
.iq-verdict-num {
  font-family: var(--sans);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.iq-verdict-num small {
  font-size: 40px;
  color: var(--ink-2);
  font-weight: 700;
  margin-left: 2px;
}
.iq-verdict-lab {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
}
.iq-verdict-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.iq-vt {
  background: rgba(10,15,29,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.iq-vt-lab {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.iq-vt-val {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.iq-verdict-rule {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 14px 0;
}
.iq-verdict-models {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.iq-vm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.iq-vm-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  box-shadow: 0 0 8px currentColor;
}
.iq-vm-dot[data-m="geo"]  { background: var(--teal); color: rgba(0,255,194,0.6); }
.iq-vm-dot[data-m="core"] { background: #60A5FA; color: rgba(96,165,250,0.6); }
.iq-vm-dot[data-m="lens"] { background: #A78BFA; color: rgba(167,139,250,0.6); }
.iq-vm-name {
  flex: 1;
  color: var(--ink-2);
  font-weight: 500;
}
.iq-vm-name em {
  font-style: normal;
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-left: 6px;
  text-transform: uppercase;
}
.iq-vm-val {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--mono);
  font-size: 12px;
}
.iq-verdict-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,255,194,0.06);
  border: 1px solid rgba(0,255,194,0.2);
  font-size: 12px;
  line-height: 1.5;
  color: #C7F5E1;
}
.iq-verdict-badge b { color: var(--ink); }
.iq-verdict-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,255,194,0.25);
  color: #7CFFDB;
  font-weight: 700;
  font-size: 11px;
  flex: none;
}

/* ── Workflow grid ── */
.iq-workflow-section { padding: 64px 0; }
.iq-workflow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 36px;
}
.iq-wf-card {
  background: linear-gradient(180deg, rgba(19,26,43,0.72), rgba(10,15,29,0.7));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.iq-wf-card:hover {
  border-color: rgba(0,255,194,0.3);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
}
.iq-wf-card-accent {
  background: linear-gradient(180deg, rgba(0,255,194,0.08), rgba(10,15,29,0.7));
  border-color: rgba(0,255,194,0.3);
}
.iq-wf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.iq-wf-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  font-weight: 600;
}
.iq-wf-icon {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  color: var(--ink-4);
}
.iq-wf-card:hover .iq-wf-icon,
.iq-wf-card-accent .iq-wf-icon { color: var(--teal); }
.iq-wf-icon svg { width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }
.iq-wf-card h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.iq-wf-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.iq-feats .sp-feat-num {
  color: var(--teal);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Tri-model consensus engine ── */
.iq-tri-section { padding: 72px 0; }
.iq-tri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.iq-model {
  position: relative;
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(26,35,56,0.92), rgba(15,21,36,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.iq-model::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--teal));
  opacity: 0.9;
}
.iq-model::after {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft, rgba(0,255,194,0.18)), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  opacity: 0.8;
}
.iq-model:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.18); }
.iq-model-geo  { --accent: var(--teal); --accent-soft: rgba(0,255,194,0.22); }
.iq-model-core { --accent: #60A5FA; --accent-soft: rgba(96,165,250,0.22); }
.iq-model-lens { --accent: #A78BFA; --accent-soft: rgba(167,139,250,0.22); }

.iq-model-head {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
}
.iq-model-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
}
.iq-model-icon svg { width: 22px; height: 22px; stroke-linecap: round; stroke-linejoin: round; }
.iq-model-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  display: block;
}
.iq-model-meta h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 2px 0 0;
  color: var(--ink);
}
.iq-tm {
  font-size: 0.55em;
  color: var(--accent);
  font-weight: 600;
  margin-left: 2px;
  vertical-align: super;
}
.iq-model-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  padding: 4px 8px;
  border-radius: 999px;
}
.iq-model-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 16px;
  position: relative;
}
.iq-model-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  margin: 0;
  position: relative;
}
.iq-model-specs > div { display: flex; flex-direction: column; gap: 2px; }
.iq-model-specs dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.iq-model-specs dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.iq-model-lift {
  color: var(--accent) !important;
  font-size: 16px !important;
  letter-spacing: -0.01em;
}

.iq-consensus-banner {
  margin-top: 24px;
  padding: 28px 32px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(0,255,194,0.12), rgba(0,255,194,0.02)),
    rgba(15,22,40,0.7);
  border: 1px solid rgba(0,255,194,0.3);
  box-shadow: 0 20px 60px -20px rgba(0,255,194,0.15);
  display: grid;
  grid-template-columns: minmax(260px, auto) 1fr;
  gap: 32px;
  align-items: center;
}
.iq-cb-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7CFFDB;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.iq-cb-big {
  font-family: var(--sans);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 6px;
}
.iq-cb-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.iq-cb-checks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.iq-cb-check {
  background: rgba(10,15,29,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.iq-cb-check-lab {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.iq-cb-check-val {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.01em;
}
.iq-cb-check-val em {
  font-style: normal;
  font-size: 10px;
  color: var(--ink-4);
  font-family: var(--mono);
  letter-spacing: 0.08em;
  margin-left: 6px;
  font-weight: 500;
}

/* ── Charts section ── */
.iq-charts-section { padding: 72px 0; }
.iq-chart {
  margin-top: 28px;
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15,21,36,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.06);
}
.iq-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.iq-chart-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(0,255,194,0.08);
  border: 1px solid rgba(0,255,194,0.25);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 8px;
}
.iq-chart-head h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.iq-chart-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.iq-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.iq-legend-line {
  display: inline-block;
  width: 16px;
  height: 2px;
}
.iq-legend-line.teal   { background: var(--teal); }
.iq-legend-line.dashed { border-top: 2px dashed #8A93A6; }
.iq-legend-swatch {
  display: inline-block;
  width: 14px; height: 12px;
  border-radius: 3px;
}
.iq-legend-swatch.lift { background: linear-gradient(180deg, rgba(0,255,194,0.45), rgba(0,255,194,0.1)); }
.iq-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.iq-legend-pill em {
  font-style: normal;
  color: var(--ink-4);
}
.iq-legend-pill b {
  color: var(--ink);
  font-weight: 700;
}
.iq-chart-svg {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.iq-chart-foot {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.iq-chart-meta {
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.iq-chart-meta b { color: var(--ink); }
.iq-chart-takeaway {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 640px;
}
.iq-chart-takeaway b { color: var(--teal); }

/* ── AI Insights + Markets ── */
.iq-insights-section { padding: 72px 0; }
.iq-insights-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  margin-top: 36px;
  align-items: start;
}
.iq-ai-rail {
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15,21,36,0.92), rgba(10,15,29,0.92));
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.iq-ai-head {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
}
.iq-ai-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--teal), #00D4A3);
  color: #070B16;
  display: grid; place-items: center;
  box-shadow: 0 0 20px rgba(0,255,194,0.35);
}
.iq-ai-icon svg { width: 18px; height: 18px; }
.iq-ai-title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.iq-ai-sub {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.iq-ai-confidence {}
.iq-ai-conf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.iq-ai-conf-head > span:first-child {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}
.iq-ai-conf-val {
  font-family: var(--mono);
  font-size: 14px;
  color: #7CFFDB;
  font-weight: 600;
}
.iq-ai-bar {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
}
.iq-ai-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #7CFFDB);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(0,255,194,0.5);
}
.iq-ai-conf-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}
.iq-ai-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.iq-ai-check {
  padding: 12px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
}
.iq-ai-check b {
  display: block;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 2px;
  font-weight: 700;
}
.iq-ai-check p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-2);
}
.iq-ai-mark {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}
.iq-ai-pass {
  background: rgba(0,255,194,0.06);
  border: 1px solid rgba(0,255,194,0.25);
}
.iq-ai-pass .iq-ai-mark {
  background: rgba(0,255,194,0.2);
  color: #7CFFDB;
}
.iq-ai-info {
  background: rgba(96,165,250,0.06);
  border: 1px solid rgba(96,165,250,0.2);
}
.iq-ai-info .iq-ai-mark {
  background: rgba(96,165,250,0.2);
  color: #BFD7FF;
}
.iq-ai-reco {
  padding: 14px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(0,255,194,0.15), rgba(0,255,194,0.02));
  border: 1px solid rgba(0,255,194,0.3);
}
.iq-ai-reco-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7CFFDB;
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}
.iq-ai-reco p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}
.iq-ai-reco p b { color: var(--ink); }

/* Markets panel */
.iq-markets {
  padding: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15,21,36,0.92), rgba(10,15,29,0.92));
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.iq-markets-head {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.iq-markets-head h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.iq-markets-head p {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.iq-markets-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 10px;
  border-radius: 999px;
}
.iq-market-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.iq-market-list li {
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 100px 200px 1fr;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.iq-market-list li:last-child { border-bottom: none; }
.iq-m-val {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: right;
}
.iq-m-val-good { color: var(--teal); }
.iq-m-val-warn { color: #FFB347; }
.iq-m-meta { display: flex; flex-direction: column; gap: 2px; }
.iq-m-meta b {
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
}
.iq-m-meta span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.iq-market-list li p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.iq-markets-foot {
  padding: 14px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.iq-run-hash b { color: var(--teal); margin-right: 6px; }
.iq-run-hash code {
  background: rgba(255,255,255,0.04);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-2);
  border: 1px solid rgba(255,255,255,0.06);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .iq-workflow { grid-template-columns: repeat(3, 1fr); }
  .iq-tri { grid-template-columns: 1fr; }
  .iq-insights-grid { grid-template-columns: 1fr; }
  .iq-consensus-banner { grid-template-columns: 1fr; gap: 16px; }
  .iq-cb-checks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .iq-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .iq-workflow { grid-template-columns: repeat(2, 1fr); }
  .iq-verdict-num { font-size: 52px; }
  .iq-market-list li { grid-template-columns: 72px 1fr; }
  .iq-market-list li p { grid-column: 1 / -1; }
  .iq-m-meta { grid-column: 2; }
}
@media (max-width: 560px) {
  .iq-workflow { grid-template-columns: 1fr; }
  .iq-verdict-tiles { grid-template-columns: 1fr; }
  .iq-cb-checks { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   MEMORY IQ — enriched page
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.mem-hero {
  padding: 56px 0 64px;
  background:
    radial-gradient(900px 320px at 85% 0%, rgba(0,255,194,0.08), transparent 60%),
    radial-gradient(600px 260px at 10% 100%, rgba(255,107,91,0.05), transparent 60%);
}
.mem-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.mem-hero-lead h1 {
  font-family: var(--sans);
  font-size: clamp(44px, 4.8vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 18px 0 22px;
}
.mem-hero-lead h1 em { font-style: italic; color: var(--teal); }

/* 3D stacked decision cards */
.mem-stack { position: relative; perspective: 1400px; min-height: 440px; }
.mem-stack-stage {
  position: relative;
  height: 420px;
  transform-style: preserve-3d;
  transform: rotateX(5deg) rotateY(-8deg);
}
.mem-card {
  position: absolute;
  width: 340px;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(26,35,56,0.92), rgba(15,21,36,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transform-style: preserve-3d;
}
.mem-card-back {
  top: 20px; left: 20px;
  transform: translateZ(-50px) rotateZ(-4deg);
  opacity: 0.7;
}
.mem-card-mid {
  top: 130px; left: 60px;
  transform: translateZ(-20px) rotateZ(-1.5deg);
  opacity: 0.9;
}
.mem-card-front {
  top: 240px; left: 100px;
  transform: translateZ(50px);
  box-shadow:
    0 50px 120px -20px rgba(255,107,91,0.22),
    0 40px 80px -30px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,107,91,0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.mem-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mem-card-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.mem-card-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--teal);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.mem-card-pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #FF6B5B;
  margin-left: auto;
  box-shadow: 0 0 0 0 rgba(255,107,91,0.6);
  animation: memPulse 2s ease-out infinite;
}
@keyframes memPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,91,0.6); }
  100% { box-shadow: 0 0 0 14px rgba(255,107,91,0); }
}
.mem-card-body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.mem-card-body em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 12px;
  color: var(--teal);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.mem-card-body em.bad { color: #FF6B5B; }

.mem-card-warn {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,107,91,0.08);
  border: 1px solid rgba(255,107,91,0.28);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
}
.mem-warn-ico {
  font-size: 14px;
  color: #FF6B5B;
  font-weight: 700;
  display: grid;
  place-items: center;
  background: rgba(255,107,91,0.18);
  width: 22px; height: 22px;
  border-radius: 6px;
}
.mem-card-warn b {
  display: block;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 2px;
}
.mem-card-warn span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.mem-stack-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.mem-stack-foot {
  position: absolute;
  bottom: -48px; left: 20px; right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.mem-stack-foot-lab { text-transform: uppercase; }
.mem-stack-foot-val { color: var(--teal); }

/* ── Why current tools miss ── */
.mem-why { padding: 72px 0; }
.mem-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.mem-why-card {
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15,21,36,0.9), rgba(10,15,29,0.9));
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mem-why-card:hover { border-color: rgba(255,255,255,0.14); transform: translateY(-2px); }
.mem-why-card-accent {
  background:
    linear-gradient(180deg, rgba(0,255,194,0.1), rgba(10,15,29,0.9));
  border-color: rgba(0,255,194,0.3);
  box-shadow: 0 0 40px rgba(0,255,194,0.12);
}
.mem-why-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ink-3);
  margin-bottom: 4px;
}
.mem-why-card-accent .mem-why-ico {
  background: rgba(0,255,194,0.15);
  border-color: rgba(0,255,194,0.35);
  color: var(--teal);
}
.mem-why-ico svg { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; }
.mem-why-card h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.mem-why-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  margin: 0;
  letter-spacing: 0.06em;
}
.mem-why-card-accent .mem-why-sub { color: var(--teal); }
.mem-why-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* ── Capture grid ── */
.mem-capture { padding: 72px 0; }
.mem-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.mem-cap {
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(19,26,43,0.8), rgba(10,15,29,0.8));
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mem-cap:hover {
  border-color: rgba(0,255,194,0.3);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.5);
}
.mem-cap-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--teal);
}
.mem-cap-icon svg { width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }
.mem-cap h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  margin: 4px 0 0;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.mem-cap p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

.mem-cap-note {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
}
.mem-cap-note-bar {
  background: linear-gradient(180deg, var(--teal), transparent);
  border-radius: 2px;
}
.mem-cap-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ── Decision Loop ── */
.mem-loop-section { padding: 72px 0; }
.mem-loop {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
}
.mem-loop::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(0,255,194,0.3) 0 6px, transparent 6px 12px);
  z-index: 0;
}
.mem-loop-step {
  position: relative;
  background: linear-gradient(180deg, rgba(15,21,36,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}
.mem-loop-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(15,21,36,0.95);
  border: 1px solid rgba(0,255,194,0.35);
  color: var(--teal);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 0 0 3px rgba(10,15,29,1);
}
.mem-loop-step-accent {
  background:
    linear-gradient(180deg, rgba(0,255,194,0.1), rgba(10,15,29,0.85));
  border-color: rgba(0,255,194,0.35);
}
.mem-loop-step-accent .mem-loop-num {
  background: var(--teal);
  color: #070B16;
  box-shadow: 0 0 0 3px rgba(10,15,29,1), 0 0 20px rgba(0,255,194,0.45);
}
.mem-loop-body h4 {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.mem-loop-body p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* ── Pattern Warning ── */
.mem-warn-section { padding: 72px 0; }
.mem-warn-card {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 20px;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(15,21,36,0.95), rgba(10,15,29,0.95));
  border: 1px solid rgba(255,107,91,0.25);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 40px rgba(255,107,91,0.1);
  position: relative;
  overflow: hidden;
}
.mem-warn-card::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,107,91,0.22), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.mem-warn-pending {
  padding: 20px;
  border-radius: 16px;
  background: rgba(10,15,29,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.mem-warn-pending > header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mem-warn-lab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFB347;
  font-weight: 700;
}
.mem-warn-plan {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.mem-warn-plan-body p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.mem-warn-plan-body p b { color: var(--ink); }
.mem-warn-hyp b { color: var(--teal); }
.mem-warn-owner {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-top: 4px !important;
}
.mem-warn-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mem-warn-hold {
  font-family: var(--mono);
  font-size: 11px;
  color: #FFB347;
  letter-spacing: 0.04em;
}

.mem-warn-match {
  padding: 20px;
  border-radius: 16px;
  background: rgba(10,15,29,0.6);
  border: 1px solid rgba(255,107,91,0.25);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.mem-warn-match > header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mem-warn-match-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,107,91,0.18);
  color: #FF6B5B;
  font-weight: 700;
  font-size: 16px;
}
.mem-warn-match h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.015em;
  flex: 1;
}
.mem-warn-match-conf {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #FF6B5B;
  background: rgba(255,107,91,0.12);
  border: 1px solid rgba(255,107,91,0.3);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.mem-warn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mem-warn-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-weight: 600;
}
.mem-warn-table tbody td {
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--ink-2);
}
.mem-warn-table tbody td:first-child {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
}
.mem-warn-table tr:last-child td { border-bottom: none; }
.mem-warn-table .neg { color: #FF8A7E; font-family: var(--mono); font-size: 12px; }
.mem-warn-table .pos { color: var(--teal); font-family: var(--mono); font-size: 12px; }
.mem-warn-table .mem-success { background: rgba(0,255,194,0.04); }

.mem-sig {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.mem-sig.bad {
  background: rgba(255,107,91,0.12);
  color: #FF6B5B;
  border: 1px solid rgba(255,107,91,0.3);
}
.mem-sig.good {
  background: rgba(0,255,194,0.12);
  color: var(--teal);
  border: 1px solid rgba(0,255,194,0.3);
}

.mem-warn-reco {
  padding: 16px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(0,255,194,0.14), rgba(0,255,194,0.02));
  border: 1px solid rgba(0,255,194,0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mem-warn-reco-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7CFFDB;
  font-weight: 700;
}
.mem-warn-reco p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.mem-warn-reco p b { color: var(--teal); }
.mem-warn-reco-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mem-warn-caption {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Search dashboard ── */
.mem-search-section { padding: 72px 0; }
.mem-dashboard {
  margin-top: 32px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15,21,36,0.95), rgba(10,15,29,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7);
}
.mem-dash-chrome {
  padding: 10px 14px;
  background: rgba(7,11,22,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
.mem-dash-dots { display: flex; gap: 6px; }
.mem-dash-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.mem-dash-dots span:nth-child(1) { background: #FF6B5B; }
.mem-dash-dots span:nth-child(2) { background: #FFB347; }
.mem-dash-dots span:nth-child(3) { background: var(--teal); }
.mem-dash-tab {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  letter-spacing: 0.05em;
}
.mem-dash-user {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,255,194,0.3), rgba(96,165,250,0.2));
  border: 1px solid rgba(0,255,194,0.3);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #7CFFDB;
  letter-spacing: 0.05em;
}
.mem-dash-body { padding: 28px; }

.mem-search-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(10,15,29,0.6);
  border: 1px solid rgba(0,255,194,0.25);
  box-shadow: 0 0 30px rgba(0,255,194,0.1);
}
.mem-search-ico { color: var(--teal); display: grid; place-items: center; }
.mem-search-ico svg { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; }
.mem-search-bar input {
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  outline: none;
}
.mem-search-kbd {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--ink-3);
}

.mem-search-suggest {
  margin: 14px 0 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.mem-search-suggest-lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.mem-search-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease;
}
.mem-search-chip:hover { border-color: rgba(0,255,194,0.4); color: var(--ink); }

.mem-search-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mem-result {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(10,15,29,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  align-items: start;
  transition: border-color .15s ease;
}
.mem-result:hover { border-color: rgba(255,255,255,0.14); }
.mem-result-hit { border-color: rgba(255,107,91,0.3); background: rgba(255,107,91,0.04); }
.mem-result-good { border-color: rgba(0,255,194,0.3); background: rgba(0,255,194,0.04); }

.mem-result-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mem-result-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.mem-result-tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--teal);
  font-weight: 600;
}
.mem-result-body b {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
.mem-result-body p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.mem-result-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mem-outcome {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
}
.mem-outcome.neg {
  background: rgba(255,107,91,0.12);
  color: #FF8A7E;
  border: 1px solid rgba(255,107,91,0.3);
}
.mem-outcome.pos {
  background: rgba(0,255,194,0.12);
  color: var(--teal);
  border: 1px solid rgba(0,255,194,0.3);
}
.mem-sim {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.mem-dash-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.mem-dash-compute { color: var(--teal); }

/* ── Three steps ── */
.mem-steps-section { padding: 72px 0; }
.mem-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}
.mem-step {
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19,26,43,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.mem-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  opacity: 0.7;
}
.mem-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mem-step-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  background: rgba(0,255,194,0.12);
  color: var(--teal);
  border-radius: 999px;
  border: 1px solid rgba(0,255,194,0.3);
  font-weight: 700;
}
.mem-step-lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.mem-step h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mem-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}
.mem-step-mock {
  margin-top: 6px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(7,11,22,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mem-slack-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--teal);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.mem-slack-bubble {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15,21,36,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.mem-slack-bubble b { color: var(--teal); margin-right: 6px; }

.mem-graph {
  align-items: center;
  min-height: 140px;
}
.mem-graph svg { width: 100%; height: auto; }
.mem-graph-lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-align: center;
}

.mem-toast {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  background: rgba(255,107,91,0.08);
  border: 1px solid rgba(255,107,91,0.3);
  min-height: 86px;
}
.mem-toast-ico {
  color: #FF6B5B;
  font-size: 18px;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(255,107,91,0.2);
  display: flex; place-items: center;

}
.mem-toast b {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}
.mem-toast span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* ── Transformation (Before/After) ── */
.mem-transform-section { padding: 72px 0; }
.mem-transform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}
.mem-transform-col {
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19,26,43,0.8), rgba(10,15,29,0.8));
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mem-without { border-color: rgba(255,107,91,0.22); }
.mem-with { border-color: rgba(0,255,194,0.3); box-shadow: 0 0 40px rgba(0,255,194,0.08); }
.mem-transform-col header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mem-transform-tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,107,91,0.12);
  color: #FF8A7E;
  border: 1px solid rgba(255,107,91,0.25);
  font-weight: 700;
}
.mem-transform-tag.good {
  background: rgba(0,255,194,0.12);
  color: var(--teal);
  border-color: rgba(0,255,194,0.3);
}
.mem-transform-col h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.mem-dialogue {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mem-bubble {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 78%;
  align-self: flex-start;
}
.mem-bubble-right { align-self: flex-end; }
.mem-bubble-red {
  background: rgba(255,107,91,0.08);
  border: 1px solid rgba(255,107,91,0.2);
  color: #FFB8A8;
}
.mem-bubble-green {
  background: rgba(0,255,194,0.08);
  border: 1px solid rgba(0,255,194,0.22);
  color: #C7F5E1;
}
.mem-bubble-memo {
  align-self: stretch;
  max-width: 100%;
  background: linear-gradient(135deg, rgba(0,255,194,0.14), rgba(0,255,194,0.02));
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mem-bubble-memo b {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}
.mem-bubble-memo span em {
  font-style: italic;
  color: var(--ink-3);
}
.mem-bubble-memo span b {
  font-family: var(--sans);
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--teal);
  font-weight: 700;
}
.mem-without-foot, .mem-with-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.mem-without-foot { color: #FF8A7E; }
.mem-with-foot { color: var(--teal); }
.mem-with-foot b { color: var(--teal); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .mem-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .mem-stack-stage { transform: none; height: 400px; }
  .mem-card { width: 90%; }
  .mem-card-back  { top: 10px; left: 0; transform: rotateZ(-3deg); }
  .mem-card-mid   { top: 120px; left: 5%; transform: rotateZ(-1.5deg); }
  .mem-card-front { top: 230px; left: 10%; transform: none; }
  .mem-why-grid { grid-template-columns: repeat(2, 1fr); }
  .mem-cap-grid { grid-template-columns: repeat(2, 1fr); }
  .mem-loop { grid-template-columns: repeat(3, 1fr); }
  .mem-loop::before { display: none; }
  .mem-warn-card { grid-template-columns: 1fr; }
  .mem-steps { grid-template-columns: 1fr; }
  .mem-transform { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .mem-why-grid { grid-template-columns: 1fr; }
  .mem-cap-grid { grid-template-columns: 1fr; }
  .mem-loop { grid-template-columns: 1fr; }
  .mem-result { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   AUDIENCE IQ — Pixis-inspired rich viz
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.aq-hero {
  padding: 56px 0 72px;
  background:
    radial-gradient(900px 320px at 85% 0%, rgba(0,255,194,0.1), transparent 60%),
    radial-gradient(600px 260px at 10% 100%, rgba(96,165,250,0.06), transparent 60%);
}
.aq-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
}
.aq-hero-lead h1 {
  font-family: var(--sans);
  font-size: clamp(44px, 4.8vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 18px 0 22px;
}
.aq-hero-lead h1 em { font-style: italic; color: var(--teal); }

/* ── 3D hero viz: constellation + persona cards + platform chips ── */
.aq-hero-viz {
  position: relative;
  perspective: 1600px;
  min-height: 500px;
}
.aq-stage {
  position: relative;
  height: 480px;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-6deg);
}
.aq-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 260px at 50% 50%, rgba(0,255,194,0.26), transparent 70%),
    radial-gradient(300px 180px at 15% 20%, rgba(96,165,250,0.12), transparent 70%),
    radial-gradient(300px 180px at 85% 80%, rgba(167,139,250,0.1), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}
.aq-orbits {
  position: absolute;
  inset: 2% 0 5% 0;
  width: 100%;
  height: 88%;
  z-index: 1;
}

.aq-hub {
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, -50%) translateZ(60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.aq-hub-core {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--teal), #00C99C);
  display: grid; place-items: center;
  box-shadow:
    0 0 50px rgba(0,255,194,0.55),
    0 0 100px rgba(0,255,194,0.25),
    inset 0 -10px 25px rgba(0,0,0,0.25),
    inset 0 10px 25px rgba(255,255,255,0.3);
  animation: aqPulse 3.2s ease-in-out infinite;
}
@keyframes aqPulse {
  0%,100% { box-shadow: 0 0 50px rgba(0,255,194,0.55), 0 0 100px rgba(0,255,194,0.25), inset 0 -10px 25px rgba(0,0,0,0.25), inset 0 10px 25px rgba(255,255,255,0.3); }
  50%     { box-shadow: 0 0 70px rgba(0,255,194,0.75), 0 0 140px rgba(0,255,194,0.4), inset 0 -10px 25px rgba(0,0,0,0.25), inset 0 10px 25px rgba(255,255,255,0.3); }
}
.aq-hub-lab {
  font-family: var(--sans); font-weight: 700; font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.aq-hub-sub {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: -4px;
}

/* Persona cards floating */
.aq-persona {
  position: absolute;
  width: 180px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(15,21,36,0.95), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 20px 40px -10px rgba(0,0,0,0.7),
    0 0 20px rgba(0,255,194,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06);
  z-index: 4;
  transform-style: preserve-3d;
  animation: aqFloat 6s ease-in-out infinite;
}
.aq-p1 { top: 4%;  left: 0%;   transform: translateZ(50px); animation-delay: 0s; }
.aq-p2 { top: 0%;  right: 0%;  transform: translateZ(40px); animation-delay: -1.5s; }
.aq-p3 { bottom: 14%; left: 0%; transform: translateZ(30px); animation-delay: -3s; }
.aq-p4 { bottom: 10%; right: 0%; transform: translateZ(55px); animation-delay: -4.5s; }
@keyframes aqFloat {
  0%,100% { transform: translateZ(40px) translateY(0); }
  50%     { transform: translateZ(48px) translateY(-6px); }
}
.aq-p1 { animation-name: aqFloat1; }
.aq-p2 { animation-name: aqFloat2; }
.aq-p3 { animation-name: aqFloat3; }
.aq-p4 { animation-name: aqFloat4; }
@keyframes aqFloat1 { 0%,100% { transform: translateZ(50px) translateY(0); } 50% { transform: translateZ(58px) translateY(-6px); } }
@keyframes aqFloat2 { 0%,100% { transform: translateZ(40px) translateY(0); } 50% { transform: translateZ(46px) translateY(-4px); } }
@keyframes aqFloat3 { 0%,100% { transform: translateZ(30px) translateY(0); } 50% { transform: translateZ(36px) translateY(-5px); } }
@keyframes aqFloat4 { 0%,100% { transform: translateZ(55px) translateY(0); } 50% { transform: translateZ(62px) translateY(-7px); } }

.aq-p-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,255,194,0.22), rgba(96,165,250,0.15));
  border: 1px solid rgba(0,255,194,0.35);
  display: grid; place-items: center;
  color: #7CFFDB;
}
.aq-p-avatar svg { width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke: currentColor; stroke-width: 1.6; }
.aq-p-avatar-warn {
  background: linear-gradient(135deg, rgba(255,107,91,0.22), rgba(255,107,91,0.1));
  border-color: rgba(255,107,91,0.45);
  color: #FF8A7E;
}
.aq-p-body { display: flex; flex-direction: column; gap: 2px; }
.aq-p-body b { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.aq-p-body span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-3); }
.aq-p-body em {
  font-family: var(--mono); font-size: 9px; font-style: normal;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal);
  margin-top: 2px;
}
.aq-p-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.aq-p-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #7CFFDB);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(0,255,194,0.5);
}
.aq-p-bar.mid > div { background: linear-gradient(90deg, #FFB347, #FFE0A6); box-shadow: 0 0 8px rgba(255,179,71,0.5); }
.aq-p-bar.warn > div { background: linear-gradient(90deg, #FF6B5B, #FF9E90); box-shadow: 0 0 8px rgba(255,107,91,0.5); }

/* Platform chips around the edges */
.aq-platforms {
  position: absolute;
  bottom: -44px; left: 0; right: 0;
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  z-index: 5;
}
.aq-pf {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15,21,36,0.92);
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--ink);
  position: relative;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.6), 0 0 12px rgba(0,255,194,0.12);
}
.aq-pf::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(0,255,194,0.7);
  animation: aqChip 2s ease-in-out infinite;
}
.aq-pf { padding-left: 24px; }
.aq-pf:nth-child(2)::before { animation-delay: .5s; }
.aq-pf:nth-child(3)::before { animation-delay: 1s; }
.aq-pf:nth-child(4)::before { animation-delay: 1.5s; }
@keyframes aqChip {
  0%,100% { opacity: 0.35; }
  50%     { opacity: 1; }
}

.aq-stage-foot {
  position: absolute;
  bottom: -84px; left: 8px; right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.aq-stage-foot-lab { text-transform: uppercase; }
.aq-stage-foot-val { color: var(--teal); }

/* ── Lookalike vs Buyer-graded compare ── */
.aq-compare-section { padding: 80px 0; }
.aq-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  margin-top: 36px;
  align-items: stretch;
}
.aq-compare-col {
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19,26,43,0.8), rgba(10,15,29,0.8));
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.aq-before { border-color: rgba(255,107,91,0.25); }
.aq-after  { border-color: rgba(0,255,194,0.32); box-shadow: 0 20px 60px -20px rgba(0,255,194,0.15); }
.aq-before::before, .aq-after::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 220px; height: 220px;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
}
.aq-before::before { background: radial-gradient(circle, rgba(255,107,91,0.18), transparent 70%); }
.aq-after::before  { background: radial-gradient(circle, rgba(0,255,194,0.22), transparent 70%); }
.aq-compare-col header { position: relative; }
.aq-compare-tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(255,107,91,0.12);
  color: #FF8A7E;
  border: 1px solid rgba(255,107,91,0.3);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 8px;
}
.aq-compare-tag.good {
  background: rgba(0,255,194,0.12);
  color: var(--teal);
  border-color: rgba(0,255,194,0.3);
}
.aq-compare-col h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.aq-compare-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.aq-compare-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.aq-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 5px;
}
.aq-dot.good { background: var(--teal); box-shadow: 0 0 8px rgba(0,255,194,0.6); }
.aq-dot.bad  { background: #FF6B5B; box-shadow: 0 0 8px rgba(255,107,91,0.5); }

.aq-compare-outcome {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.aq-compare-outcome.bad  { background: rgba(255,107,91,0.08); border: 1px solid rgba(255,107,91,0.25); }
.aq-compare-outcome.good { background: rgba(0,255,194,0.08);  border: 1px solid rgba(0,255,194,0.3); }
.aq-compare-outcome-lab {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
}
.aq-compare-outcome.bad  .aq-compare-outcome-lab { color: #FF8A7E; }
.aq-compare-outcome.good .aq-compare-outcome-lab { color: var(--teal); }
.aq-compare-outcome-val { font-size: 15px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.aq-compare-outcome-val b { color: var(--teal); }

.aq-vs {
  align-self: center;
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(10,15,29,0.9);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
}

/* ── Six agents grid ── */
.aq-agents-section { padding: 80px 0; }
.aq-agents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.aq-agent {
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19,26,43,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.aq-agent::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  opacity: 0.8;
}
.aq-agent::after {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(0,255,194,0.16), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.aq-agent:hover {
  border-color: rgba(0,255,194,0.3);
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.5), 0 0 30px rgba(0,255,194,0.12);
}
.aq-agent-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  position: relative;
}
.aq-agent-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(0,255,194,0.12);
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--teal);
  display: grid; place-items: center;
}
.aq-agent-icon svg { width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }
.aq-agent-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.aq-agent h3 {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.aq-agent-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--teal);
}
.aq-agent-status.opt { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.3); color: #BFD7FF; }
.aq-agent-status.scale { background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.3); color: #D4C4FF; }
.aq-agent-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
}
.aq-agent-stats {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(7,11,22,0.6);
  border: 1px solid rgba(255,255,255,0.05);
}
.aq-agent-stats > div {
  display: flex; flex-direction: column; gap: 2px;
}
.aq-agent-stats span {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.aq-agent-stats b {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink); font-weight: 700; letter-spacing: -0.01em;
}
.aq-agent-stats b.pos { color: var(--teal); font-family: var(--mono); }
.aq-agent-stats b.mid { color: #FFB347; font-family: var(--mono); }

/* ── LTV Grading Dashboard ── */
.aq-ltv-section { padding: 80px 0; }
.aq-ltv-dash {
  margin-top: 32px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(15,21,36,0.95), rgba(10,15,29,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
}
.aq-dash-chrome {
  padding: 10px 14px;
  background: rgba(7,11,22,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
.aq-dash-dots { display: flex; gap: 6px; }
.aq-dash-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.aq-dash-dots span:nth-child(1) { background: #FF6B5B; }
.aq-dash-dots span:nth-child(2) { background: #FFB347; }
.aq-dash-dots span:nth-child(3) { background: var(--teal); }
.aq-dash-tab {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  letter-spacing: 0.05em;
}
.aq-dash-user {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,255,194,0.3), rgba(96,165,250,0.2));
  border: 1px solid rgba(0,255,194,0.3);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  color: #7CFFDB; letter-spacing: 0.05em;
}
.aq-dash-body {
  padding: 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* LTV distribution chart */
.aq-ltv-chart {
  padding: 20px;
  border-radius: 14px;
  background: rgba(7,11,22,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aq-ltv-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.aq-ltv-chart-head h4 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.aq-ltv-chart-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.aq-ltv-bars {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  height: 180px;
  align-items: flex-end;
}
.aq-ltv-bar {
  position: relative;
  height: var(--h);
  background: linear-gradient(180deg, rgba(96,165,250,0.6) 0%, rgba(96,165,250,0.25) 100%);
  border-top: 2px solid #60A5FA;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
}
.aq-ltv-bar-accent {
  background: linear-gradient(180deg, rgba(0,255,194,0.6) 0%, rgba(0,255,194,0.2) 100%);
  border-top-color: var(--teal);
  box-shadow: 0 0 16px rgba(0,255,194,0.35);
}
.aq-ltv-bar-peak {
  background: linear-gradient(180deg, rgba(0,255,194,0.85) 0%, rgba(0,255,194,0.3) 100%);
  border-top-color: var(--teal);
  box-shadow: 0 0 24px rgba(0,255,194,0.55);
}
.aq-ltv-val {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-weight: 600;
}
.aq-ltv-axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}
.aq-ltv-seed { color: var(--teal); font-weight: 700; }

/* Enrichment layers */
.aq-enrich {
  padding: 20px;
  border-radius: 14px;
  background: rgba(7,11,22,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aq-enrich h4 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.aq-enrich ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aq-enrich li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15,21,36,0.6);
  border: 1px solid rgba(0,255,194,0.15);
}
.aq-enrich li:last-child { border-color: rgba(255,107,91,0.2); background: rgba(255,107,91,0.04); }
.aq-enrich-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(0,255,194,0.6);
}
.aq-enrich-dot.warn { background: #FF6B5B; box-shadow: 0 0 8px rgba(255,107,91,0.6); }
.aq-enrich li b {
  display: block;
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 2px;
}
.aq-enrich li span {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
}
.aq-enrich li em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--teal);
  font-weight: 600;
  white-space: nowrap;
}
.aq-enrich li:last-child em { color: #FF8A7E; }

.aq-enrich-foot {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.aq-enrich-badge {
  background: rgba(0,255,194,0.1);
  color: var(--teal);
  border: 1px solid rgba(0,255,194,0.28);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

/* ── Cross-platform sync ── */
.aq-sync-section { padding: 80px 0; }
.aq-sync {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 20px;
  align-items: center;
  margin-top: 36px;
  padding: 36px 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(15,21,36,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
}
.aq-sync::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 50% 50%, rgba(0,255,194,0.06), transparent 70%);
  pointer-events: none;
}
.aq-sync-source {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(7,11,22,0.7);
  border: 1px solid rgba(0,255,194,0.3);
  box-shadow: 0 0 30px rgba(0,255,194,0.15);
}
.aq-sync-source b {
  font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--ink);
}
.aq-sync-source span {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.aq-sync-source-core {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), #00C99C);
  display: grid; place-items: center;
  box-shadow:
    0 0 30px rgba(0,255,194,0.5),
    inset 0 -6px 16px rgba(0,0,0,0.25),
    inset 0 6px 16px rgba(255,255,255,0.25);
}
.aq-sync-lines {
  width: 100%; height: 280px;
  position: relative;
}
.aq-sync-targets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aq-target {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(7,11,22,0.7);
  border: 1px solid rgba(0,255,194,0.2);
  transition: border-color .2s ease;
}
.aq-target:hover { border-color: rgba(0,255,194,0.5); }
.aq-target-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.aq-target-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.aq-target-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(0,255,194,0.7);
  animation: aqChip 2s ease-in-out infinite;
}
.aq-target:nth-child(2) .aq-target-dot { animation-delay: .5s; }
.aq-target:nth-child(3) .aq-target-dot { animation-delay: 1s; }
.aq-target:nth-child(4) .aq-target-dot { animation-delay: 1.5s; }
.aq-sync-caption {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.aq-sync-caption b { color: var(--teal); }

/* ── Better outcomes pillars ── */
.aq-outcomes-section { padding: 80px 0; }
.aq-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.aq-outcome {
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19,26,43,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.aq-outcome:hover { transform: translateY(-3px); border-color: rgba(0,255,194,0.3); }
.aq-outcome-accent {
  background:
    linear-gradient(180deg, rgba(0,255,194,0.1), rgba(10,15,29,0.9));
  border-color: rgba(0,255,194,0.3);
  box-shadow: 0 30px 80px -20px rgba(0,255,194,0.15);
}
.aq-outcome-ico {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(0,255,194,0.12);
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--teal);
  display: grid; place-items: center;
}
.aq-outcome-ico svg { width: 22px; height: 22px; stroke-linecap: round; stroke-linejoin: round; }
.aq-outcome h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.aq-outcome p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}
.aq-outcome-metric {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.aq-outcome-metric b {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.035em;
  color: var(--teal);
  line-height: 1;
}
.aq-outcome-metric span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .aq-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .aq-stage { transform: none; height: 440px; }
  .aq-compare { grid-template-columns: 1fr; }
  .aq-vs {
    justify-self: center;
    transform: rotate(90deg);
  }
  .aq-agents { grid-template-columns: repeat(2, 1fr); }
  .aq-dash-body { grid-template-columns: 1fr; }
  .aq-sync { grid-template-columns: 1fr; gap: 28px; }
  .aq-sync-lines { height: 160px; }
  .aq-outcomes { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .aq-agents { grid-template-columns: 1fr; }
  .aq-ltv-bars { gap: 3px; height: 140px; }
  .aq-ltv-val { font-size: 9px; }
  .aq-platforms { flex-wrap: wrap; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .aq-hub-core, .aq-persona, .aq-target-dot, .aq-pf::before { animation: none; }
  .aq-sync-lines circle { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   CREATIVE IQ — Pixis-inspired rich viz
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.cq-hero {
  padding: 56px 0 80px;
  background:
    radial-gradient(900px 320px at 85% 0%, rgba(0,255,194,0.1), transparent 60%),
    radial-gradient(600px 260px at 10% 100%, rgba(255,107,91,0.06), transparent 60%);
}
.cq-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: start;
}
.cq-hero-lead h1 {
  font-family: var(--sans);
  font-size: clamp(44px, 4.8vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 18px 0 22px;
}
.cq-hero-lead h1 em { font-style: italic; color: var(--teal); }

/* 3D creative viz */
.cq-hero-viz {
  position: relative;
  perspective: 1600px;
  min-height: 520px;
  overflow: hidden;
}
.cq-stage {
  position: relative;
  height: 480px;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-10deg);
}
.cq-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}
.cq-glow-a {
  width: 300px; height: 300px;
  top: -50px; left: -50px;
  background: radial-gradient(circle, rgba(0,255,194,0.55), transparent 70%);
}
.cq-glow-b {
  width: 340px; height: 340px;
  bottom: -120px; right: -80px;
  background: radial-gradient(circle, rgba(255,107,91,0.38), transparent 70%);
}

/* Stacked ad cards */
.cq-card {
  position: absolute;
  width: 200px;
  height: 260px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,0.8),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.cq-card-back {
  top: 40px; left: 12px;
  transform: translateZ(-40px) rotateZ(-4deg);
  opacity: 0.88;
}
.cq-card-mid {
  top: 24px; left: 94px;
  transform: translateZ(-10px) rotateZ(-1.5deg);
  opacity: 0.96;
}
.cq-card-front {
  top: 4px; left: 176px;
  transform: translateZ(30px);
  box-shadow:
    0 50px 120px -20px rgba(255,107,91,0.28),
    0 40px 80px -30px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,107,91,0.38),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.cq-stage:hover .cq-card-front { transform: translateZ(44px) rotateX(-2deg); }

.cq-card-media {
  position: relative;
  height: 196px;
  overflow: hidden;
}
.cq-card-media[data-heat="cool"] {
  background: linear-gradient(135deg, #0E3A38 0%, #0A2A36 60%, #082029 100%);
}
.cq-card-media[data-heat="warm"] {
  background: linear-gradient(135deg, #3A2A10 0%, #2A1E0A 60%, #20160A 100%);
}
.cq-card-media[data-heat="hot"] {
  background: linear-gradient(135deg, #3A0F10 0%, #2A0A12 60%, #1A0610 100%);
}
.cq-card-media::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.04) 0 2px, transparent 2px 8px);
  pointer-events: none;
}
.cq-card-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,0.6);
  color: var(--ink);
  z-index: 3;
}
.cq-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  color: var(--ink);
  font-size: 16px;
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 3;
}
.cq-heatmap { position: absolute; inset: 0; z-index: 2; }
.cq-hot {
  position: absolute;
  width: var(--s, 80px); height: var(--s, 80px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255,107,91,0.85) 0%,
    rgba(255,107,91,0.35) 40%,
    transparent 70%);
  filter: blur(5px);
  border-radius: 50%;
  animation: cqPulse 2.8s ease-in-out infinite;
}
.cq-hot:nth-child(2) { animation-delay: .7s; }
.cq-hot:nth-child(3) { animation-delay: 1.4s; }
@keyframes cqPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.15); }
}
.cq-card-foot {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0,0,0,0.35);
}
.cq-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.cq-pill.ok  { background: rgba(0,255,194,0.18); color: var(--teal); }
.cq-pill.mid { background: rgba(255,179,71,0.18); color: #FFB347; }
.cq-pill.bad { background: rgba(255,107,91,0.22); color: #FF8A7E; }
.cq-card-refresh {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  cursor: pointer;
}

/* Floating signal orbs */
.cq-orb {
  position: absolute;
  transform: translate(-50%, -50%) translateZ(70px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(10,15,29,0.92), rgba(10,15,29,0.65));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,255,194,0.3);
  box-shadow:
    0 10px 30px -8px rgba(0,0,0,0.8),
    0 0 20px rgba(0,255,194,0.18);
  min-width: 84px;
  animation: cqFloat 6s ease-in-out infinite;
  z-index: 5;
}
.cq-orb-ctr  { top: 8%;   left: 56%; }
.cq-orb-freq { top: 22%;  left: 86%; animation-delay: -1.2s; }
.cq-orb-cpa  { top: 66%;  left: 88%; animation-delay: -2.4s; }
.cq-orb-over { top: 88%;  left: 14%; animation-delay: -3.6s; }
@keyframes cqFloat {
  0%, 100% { transform: translate(-50%, -50%) translateZ(70px) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateZ(78px) translateY(-6px); }
}
.cq-orb-val {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--teal);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cq-orb-lab {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cq-orb-over {
  border-color: rgba(255,179,71,0.35);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.8), 0 0 20px rgba(255,179,71,0.2);
}
.cq-orb-over .cq-orb-val { color: #FFB347; }
.cq-orb-cpa {
  border-color: rgba(255,107,91,0.35);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.8), 0 0 20px rgba(255,107,91,0.2);
}
.cq-orb-cpa .cq-orb-val { color: #FF8A7E; }

/* Refresh queue tray at bottom */
.cq-tray {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateZ(20px);
  width: 360px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(15,22,40,0.92), rgba(10,15,29,0.75));
  border: 1px solid rgba(0,255,194,0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.8), 0 0 30px rgba(0,255,194,0.12);
  z-index: 4;
}
.cq-tray-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 8px;
}
.cq-tray-lab { color: var(--teal); }
.cq-tray-count { color: var(--ink-3); }
.cq-tray-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cq-queue {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.cq-queue span { font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--ink); }
.cq-queue em {
  font-family: var(--mono); font-size: 10px; font-style: normal;
  letter-spacing: 0.06em; color: var(--teal);
}

.cq-stage-foot {
  position: absolute;
  bottom: -72px; left: 8px; right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.cq-stage-foot-lab { text-transform: uppercase; }
.cq-stage-foot-val { color: var(--teal); }

/* ── Lag chart ── */
.cq-lag-section { padding: 80px 0; }
.cq-lag-chart {
  margin-top: 32px;
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(15,21,36,0.88), rgba(10,15,29,0.88));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.cq-lag-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cq-lag-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.cq-lag-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.cq-lag-line {
  display: inline-block;
  width: 18px; height: 2px;
}
.cq-lag-line.teal  { background: var(--teal); box-shadow: 0 0 6px rgba(0,255,194,0.5); }
.cq-lag-line.coral { background: #FF6B5B; box-shadow: 0 0 6px rgba(255,107,91,0.5); }
.cq-lag-zone {
  display: inline-block;
  width: 18px; height: 12px;
  border-radius: 3px;
  background: rgba(255,179,71,0.12);
  border: 1px dashed rgba(255,179,71,0.5);
}
.cq-lag-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.cq-lag-svg {
  width: 100%;
  height: auto;
  display: block;
}
.cq-lag-foot {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 16px;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.cq-lag-meta {
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.cq-lag-meta b { color: var(--ink); }
.cq-lag-takeaway {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 520px;
}
.cq-lag-takeaway b { color: var(--teal); }

/* ── 7 signals ── */
.cq-signals-section { padding: 80px 0; }
.cq-signals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 36px;
}
.cq-signal {
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(19,26,43,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.cq-signal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  opacity: 0.7;
}
.cq-signal:hover { transform: translateY(-3px); border-color: rgba(0,255,194,0.3); }
.cq-sig-head {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
}
.cq-sig-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--teal);
  display: grid; place-items: center;
}
.cq-sig-ico-accent {
  background: linear-gradient(135deg, var(--teal), #00C99C);
  color: #070B16;
  border-color: var(--teal);
  box-shadow: 0 0 16px rgba(0,255,194,0.4);
}
.cq-sig-ico svg { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; }
.cq-sig-num {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.cq-signal h3 {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cq-sig-weight {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 600;
}
.cq-signal p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.cq-sig-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cq-sig-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}
.cq-sig-fill.ok  { background: linear-gradient(90deg, var(--teal), #7CFFDB); box-shadow: 0 0 8px rgba(0,255,194,0.5); }
.cq-sig-fill.mid { background: linear-gradient(90deg, #FFB347, #FFE0A6); box-shadow: 0 0 8px rgba(255,179,71,0.5); }
.cq-sig-fill.bad { background: linear-gradient(90deg, #FF6B5B, #FF9E90); box-shadow: 0 0 8px rgba(255,107,91,0.5); }
.cq-sig-val {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.cq-sig-val.ok  { color: var(--teal); }
.cq-sig-val.mid { color: #FFB347; }
.cq-sig-val.bad { color: #FF8A7E; }

/* Composite score ring */
.cq-signal-composite {
  grid-column: span 2;
  background:
    linear-gradient(180deg, rgba(0,255,194,0.08), rgba(10,15,29,0.9));
  border-color: rgba(0,255,194,0.3);
  box-shadow: 0 0 40px rgba(0,255,194,0.1);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.cq-signal-composite > :not(.cq-score-ring) {
  grid-column: 1;
}
.cq-score-ring {
  grid-column: 2;
  grid-row: 1 / span 10;
  position: relative;
  width: 128px; height: 128px;
  align-self: center;
  justify-self: end;
}
.cq-score-ring svg { width: 100%; height: 100%; }
.cq-score-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.04em;
  color: var(--ink);
  padding-top: 10px;
}
.cq-score-lab {
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF8A7E;
  font-weight: 700;
}

/* ── Asset dashboard ── */
.cq-dash-section { padding: 80px 0; }
.cq-dash {
  margin-top: 32px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(15,21,36,0.95), rgba(10,15,29,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
}
.cq-dash-body { padding: 24px 28px 28px; }
.cq-dash-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 18px;
}
.cq-dash-bar b {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.cq-dash-bar span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.cq-dash-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cq-dash-filter {
  font-family: var(--mono);
  font-size: 10px !important;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ink-3) !important;
  cursor: pointer;
}
.cq-dash-filter.active {
  background: rgba(0,255,194,0.1);
  border-color: rgba(0,255,194,0.3);
  color: var(--teal) !important;
}

.cq-asset-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cq-asset-row {
  display: grid;
  grid-template-columns: 1.8fr 0.9fr 0.9fr 1.3fr 0.7fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(7,11,22,0.55);
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color .15s ease;
}
.cq-asset-row:hover { border-color: rgba(255,255,255,0.14); }
.cq-asset-head {
  background: transparent;
  border: none;
  padding: 0 16px 6px;
}
.cq-asset-head > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.cq-asset-bad { border-color: rgba(255,107,91,0.28); background: rgba(255,107,91,0.04); }
.cq-asset-mid { border-color: rgba(255,179,71,0.22); }

.cq-asset-meta {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
}
.cq-asset-thumb {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.1);
}
.cq-asset-thumb[data-heat="cool"] { background: linear-gradient(135deg, #0E3A38, #082029); }
.cq-asset-thumb[data-heat="warm"] { background: linear-gradient(135deg, #3A2A10, #20160A); }
.cq-asset-thumb[data-heat="hot"]  { background: linear-gradient(135deg, #3A0F10, #1A0610); border-color: rgba(255,107,91,0.4); }
.cq-asset-meta b {
  display: block;
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
}
.cq-asset-meta em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.06em;
}

.cq-asset-health {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cq-asset-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cq-asset-bar > div {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}
.cq-asset-bar > div.ok  { background: linear-gradient(90deg, var(--teal), #7CFFDB); }
.cq-asset-bar > div.mid { background: linear-gradient(90deg, #FFB347, #FFE0A6); }
.cq-asset-bar > div.bad { background: linear-gradient(90deg, #FF6B5B, #FF9E90); }
.cq-asset-health > span {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  min-width: 28px;
}
.cq-asset-health > span.ok  { color: var(--teal); }
.cq-asset-health > span.mid { color: #FFB347; }
.cq-asset-health > span.bad { color: #FF8A7E; }

.cq-asset-sig {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cq-asset-sig-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  text-transform: uppercase;
  font-weight: 600;
}
.cq-asset-sig-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}
.cq-asset-sig-val.ok  { color: var(--teal); }
.cq-asset-sig-val.mid { color: #FFB347; }
.cq-asset-sig-val.bad { color: #FF8A7E; }

.cq-asset-element { display: flex; flex-direction: column; gap: 4px; }
.cq-el-pill {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.cq-el-pill.ok  { background: rgba(0,255,194,0.12); color: var(--teal); border: 1px solid rgba(0,255,194,0.3); }
.cq-el-pill.mid { background: rgba(255,179,71,0.12); color: #FFB347; border: 1px solid rgba(255,179,71,0.3); }
.cq-el-pill.bad { background: rgba(255,107,91,0.16); color: #FF8A7E; border: 1px solid rgba(255,107,91,0.35); }
.cq-asset-element small {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
}
.cq-asset-action { text-align: right; }

.cq-dash-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.cq-dash-compute { color: var(--teal); }

/* ── Refresh queue ── */
.cq-queue-section { padding: 80px 0; }
.cq-queue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.cq-var {
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19,26,43,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.cq-var-1 {
  border-color: rgba(0,255,194,0.35);
  box-shadow: 0 0 40px rgba(0,255,194,0.12);
}
.cq-var-1::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
}
.cq-var:hover { transform: translateY(-3px); border-color: rgba(0,255,194,0.3); }
.cq-var header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.cq-var-rank {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  padding: 4px 10px;
  border-radius: 999px;
}
.cq-var-1 .cq-var-rank {
  background: linear-gradient(135deg, var(--teal), #00C99C);
  color: #070B16;
  border-color: var(--teal);
  box-shadow: 0 0 16px rgba(0,255,194,0.45);
}
.cq-var-type {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.cq-var-thumb {
  height: 120px;
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  overflow: hidden;
}
.cq-var-thumb[data-heat="teal"] {
  background: linear-gradient(135deg, rgba(0,255,194,0.4), rgba(0,200,156,0.15));
  border: 1px solid rgba(0,255,194,0.25);
}
.cq-var-thumb[data-heat="mid"] {
  background: linear-gradient(135deg, rgba(255,179,71,0.3), rgba(255,179,71,0.1));
  border: 1px solid rgba(255,179,71,0.25);
}
.cq-var-thumb[data-heat="neutral"] {
  background: linear-gradient(135deg, rgba(167,139,250,0.28), rgba(167,139,250,0.1));
  border: 1px solid rgba(167,139,250,0.25);
}
.cq-var-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.05) 0 2px, transparent 2px 8px);
  pointer-events: none;
}
.cq-var-label {
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(0,0,0,0.5);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
}

.cq-var-body { display: flex; flex-direction: column; gap: 12px; }
.cq-var-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(7,11,22,0.55);
  border: 1px solid rgba(0,255,194,0.18);
}
.cq-var-metric span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.cq-var-metric b {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 22px;
  color: var(--teal);
  letter-spacing: -0.03em;
}

.cq-var-signals { display: flex; flex-wrap: wrap; gap: 6px; }
.cq-var-sig {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 8px;
  border-radius: 999px;
}
.cq-var-confidence {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.cq-var-confidence > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.cq-var-conf-bar {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cq-var-conf-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #7CFFDB);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(0,255,194,0.5);
}
.cq-var-confidence b {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--teal);
  font-weight: 700;
}
.cq-var-reason {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  padding: 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border-left: 2px solid rgba(0,255,194,0.3);
}

.cq-var footer { margin-top: auto; }

.cq-queue-caption {
  margin: 24px auto 0;
  text-align: center;
  max-width: 720px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ── Cross-platform scoring ── */
.cq-platforms-section { padding: 80px 0; }
.cq-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.cq-pf {
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19,26,43,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.cq-pf:hover { transform: translateY(-3px); border-color: rgba(0,255,194,0.3); }
.cq-pf header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.cq-pf-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cq-pf-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.cq-pf-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cq-pf-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.cq-pf-bar {
  display: block;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cq-pf-bar > div {
  height: 100%;
  border-radius: 999px;
}
.cq-pf-bar > div.ok  { background: linear-gradient(90deg, var(--teal), #7CFFDB); box-shadow: 0 0 8px rgba(0,255,194,0.5); }
.cq-pf-bar > div.mid { background: linear-gradient(90deg, #FFB347, #FFE0A6); box-shadow: 0 0 8px rgba(255,179,71,0.45); }
.cq-pf-bar > div.bad { background: linear-gradient(90deg, #FF6B5B, #FF9E90); box-shadow: 0 0 8px rgba(255,107,91,0.5); }
.cq-pf-row b {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  min-width: 28px;
  text-align: right;
}
.cq-pf-row b.ok  { color: var(--teal); }
.cq-pf-row b.mid { color: #FFB347; }
.cq-pf-row b.bad { color: #FF8A7E; }

.cq-pf footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cq-pf footer span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.cq-pf footer b {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ── Outcomes + close ── */
.cq-outcomes-section { padding: 80px 0; }
.cq-close-section { padding: 72px 0; }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .cq-signals { grid-template-columns: repeat(2, 1fr); }
  .cq-signal-composite { grid-column: span 2; }
  .cq-queue { grid-template-columns: 1fr; }
  .cq-platforms { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .cq-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .cq-stage { transform: none; height: 520px; }
  .cq-card-back  { top: 20px; left: 0; transform: rotateZ(-3deg); }
  .cq-card-mid   { top: 40px; left: 60px; transform: rotateZ(-1.5deg); }
  .cq-card-front { top: 4px; left: 140px; transform: none; }
  .cq-orb { transform: translate(-50%, -50%); }
  .cq-tray { width: 90%; }
}
@media (max-width: 900px) {
  .cq-signals { grid-template-columns: 1fr; }
  .cq-signal-composite { grid-column: span 1; grid-template-columns: 1fr; }
  .cq-score-ring { grid-column: 1; grid-row: auto; justify-self: start; }
  .cq-asset-row { grid-template-columns: 1fr; }
  .cq-asset-head { display: none; }
  .cq-asset-action { text-align: left; }
  
}



@media (prefers-reduced-motion: reduce) {
  .cq-hot, .cq-orb { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS — scroll-animated chapter timeline
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.hw-hero {
  padding: 56px 0 72px;
  background:
    radial-gradient(900px 340px at 85% 0%, rgba(0,255,194,0.1), transparent 60%),
    radial-gradient(600px 260px at 10% 100%, rgba(96,165,250,0.06), transparent 60%);
}
.hw-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hw-hero-lead h1 {
  font-family: var(--sans);
  font-size: clamp(44px, 4.8vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 18px 0 22px;
}
.hw-hero-lead h1 em { font-style: italic; color: var(--teal); }

/* Journey arc */
.hw-journey { position: relative; min-height: 460px; }
.hw-journey-stage {
  position: relative;
  height: 460px;
  display: grid;
  place-items: center;
}
.hw-arc-svg {
  width: 100%;
  max-width: 480px;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(0,255,194,0.12));
}
.hw-chap {
  position: absolute;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(15,22,40,0.95), rgba(10,15,29,0.8));
  border: 1px solid rgba(0,255,194,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6), 0 0 16px rgba(0,255,194,0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  text-align: left;
  z-index: 2;
}
.hw-chap b {
  font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--ink);
  letter-spacing: -0.015em;
}
.hw-chap em {
  font-family: var(--mono); font-style: normal; font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-3);
}
.hw-chap-k {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin-bottom: 2px;
}
.hw-chap-1 { top: 4%;  right: 0; }
.hw-chap-2 { bottom: 4%; right: 4%; }
.hw-chap-3 {
  bottom: 4%; left: 0;
  border-color: rgba(0,255,194,0.55);
  box-shadow: 0 18px 40px -10px rgba(0,0,0,0.6), 0 0 28px rgba(0,255,194,0.3);
}
.hw-chap-3 b { color: var(--teal); }
.hw-chap-4 { top: 4%;  left: 4%; }

/* ── Mission summary: 1 hero tile + 5-tile strip ── */
.hw-mission-section { padding: 24px 0 72px; }
.hw-mission {
  display: grid;
  grid-template-columns: 1.05fr 2fr;
  gap: 16px;
  align-items: stretch;
}
.hw-mission-cells {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(15,21,36,0.7), rgba(10,15,29,0.7));
}
.hw-mission-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border-right: 1px solid rgba(255,255,255,0.06);
  min-width: 0;
}
.hw-mission-cell:last-child { border-right: none; }
.hw-mission-lab {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.hw-mission-val {
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 24px;
  color: var(--teal);
  letter-spacing: -0.035em;
  line-height: 1;
}
.hw-mission-val small {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 4px;
  letter-spacing: -0.01em;
}
.hw-mission-sub {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* Hero tile — 0 engineering hours */
.hw-mission-hero {
  position: relative;
  padding: 28px;
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(0,255,194,0.16), rgba(10,15,29,0.85));
  border: 1px solid rgba(0,255,194,0.38);
  box-shadow: 0 20px 60px -20px rgba(0,255,194,0.2), 0 0 30px rgba(0,255,194,0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  overflow: hidden;
}
.hw-mission-hero::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,194,0.25), transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}
.hw-mission-hero .hw-mission-lab {
  color: #7CFFDB;
  position: relative;
}
.hw-mission-hero .hw-mission-val {
  font-size: clamp(48px, 4.6vw, 72px);
  color: var(--ink);
  position: relative;
}
.hw-mission-hero .hw-mission-val small {
  font-size: 0.4em;
  color: var(--teal);
  margin-left: 6px;
}
.hw-mission-hero .hw-mission-sub {
  max-width: 28ch;
  color: var(--ink-2);
  font-size: 13.5px;
  position: relative;
}

/* ── Journey section — single centered column, rail floats outside ── */
.hw-journey-section {
  position: relative;
  padding: 60px 0 80px;
  background:
    radial-gradient(800px 600px at 50% 0%, rgba(0,255,194,0.04), transparent 60%);
}
.hw-journey-wrap {
  position: relative;
}

/* Floating rail — fixed on desktop right, hidden until track is in view */
.hw-rail {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translate(24px, -50%);
  z-index: 30;
  padding: 18px;
  width: 200px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,21,36,0.96), rgba(10,15,29,0.96));
  border: 1px solid rgba(0,255,194,0.24);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 30px rgba(0,255,194,0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.hw-rail.is-active {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}
.hw-rail-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.hw-rail-ring {
  position: relative;
  width: 66px; height: 66px;
}
.hw-rail-ring svg { width: 100%; height: 100%; }
.hw-rail-ring-fill { transition: stroke-dashoffset .2s ease; }
.hw-rail-pct {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700;
  font-size: 13px; color: var(--teal);
  letter-spacing: 0.02em;
}
.hw-rail-meta { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 0; }
.hw-rail-lab {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700;
}
.hw-rail-val {
  font-family: var(--sans); font-size: 15px;
  font-weight: 800; color: var(--ink); letter-spacing: -0.015em;
  line-height: 1.1;
}
.hw-rail-chap {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--teal);
  line-height: 1.3;
}

/* The timeline track — a centered column, spine runs down the left */
.hw-track {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding-left: 90px;
}
.hw-spine {
  position: absolute;
  top: 0; bottom: 0;
  left: 44px;
  width: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 1px;
}
.hw-spine-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--teal), #00D4A3);
  border-radius: 1px;
  box-shadow: 0 0 18px rgba(0,255,194,0.55), 0 0 40px rgba(0,255,194,0.25);
  transition: height .08s linear;
}

/* Chapter wrapper */
.hw-chapter {
  position: relative;
  margin: 56px 0 32px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.hw-chapter.is-visible { opacity: 1; transform: translateY(0); }
.hw-chapter:first-of-type { margin-top: 0; }

/* Chapter header — CENTERED content, hub node on the spine */
.hw-chapter-head {
  position: relative;
  padding: 40px 32px 36px;
  border-radius: 24px;
  background:
    linear-gradient(160deg, rgba(0,255,194,0.1), rgba(15,21,36,0.75));
  border: 1px solid rgba(0,255,194,0.35);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6), 0 0 40px rgba(0,255,194,0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}
.hw-chapter-head::before {
  /* subtle ambient glow inside chapter card */
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,194,0.2), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}
.hw-chapter-head::after {
  /* hub node on the spine */
  content: "";
  position: absolute;
  left: -90px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--teal);
  border: 4px solid #0A0F1D;
  box-shadow: 0 0 0 3px rgba(0,255,194,0.28), 0 0 30px rgba(0,255,194,0.55);
  z-index: 2;
}
.hw-chapter-idx {
  position: relative;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
}
.hw-chapter-title {
  position: relative;
  margin: 4px 0 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
}
.hw-chapter-sub {
  position: relative;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 640px;
}
.hw-chapter-range {
  position: relative;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

/* Milestone */
.hw-ms {
  position: relative;
  margin: 20px 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.hw-ms.is-visible { opacity: 1; transform: translateY(0); }
.hw-ms-node {
  position: absolute;
  left: -62px;
  top: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #0A0F1D;
  border: 2px solid rgba(0,255,194,0.35);
  display: grid; place-items: center;
  z-index: 2;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hw-ms-node span {
  font-family: var(--mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.05em;
  color: var(--teal);
}
.hw-ms.is-active .hw-ms-node {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(10,15,29,1), 0 0 28px rgba(0,255,194,0.5);
  transform: scale(1.06);
}
.hw-ms.is-active .hw-ms-node span { color: #0A0F1D; }
.hw-ms-node-accent,
.hw-ms-node-milestone {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(10,15,29,1), 0 0 20px rgba(0,255,194,0.4);
}
.hw-ms-node-accent span,
.hw-ms-node-milestone span { color: #0A0F1D; }

.hw-ms-card {
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(19,26,43,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hw-ms.is-active .hw-ms-card {
  border-color: rgba(0,255,194,0.35);
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.5), 0 0 40px rgba(0,255,194,0.1);
}
.hw-ms-card-accent {
  border-color: rgba(0,255,194,0.3);
  background: linear-gradient(180deg, rgba(0,255,194,0.06), rgba(10,15,29,0.85));
}
.hw-ms-card-milestone {
  border-color: rgba(0,255,194,0.45);
  background: linear-gradient(180deg, rgba(0,255,194,0.12), rgba(10,15,29,0.9));
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.5), 0 0 50px rgba(0,255,194,0.22);
}
.hw-ms-card header { display: flex; flex-direction: column; gap: 2px; }
.hw-ms-when {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); font-weight: 700;
}
.hw-ms-card h3 {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: 20px; letter-spacing: -0.02em;
  color: var(--ink);
}
.hw-ms-card p {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--ink-3);
}

/* ── Preview panels per milestone ── */
.hw-preview {
  margin-top: 4px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(7,11,22,0.55);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Team avatars */
.hw-pv-team {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hw-pv-avatars {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hw-pv-avatar {
  flex: 1 1 auto;
  min-width: 72px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15,21,36,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.hw-pv-avatar b {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink); font-weight: 700;
}
.hw-pv-avatar em {
  font-family: var(--mono); font-style: normal;
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.08em;
}
.hw-pv-avatar-you {
  background: rgba(0,255,194,0.08);
  border-color: rgba(0,255,194,0.35);
}
.hw-pv-avatar-you b { color: var(--teal); }
.hw-pv-foot {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.06em;
}

/* Platform chips */
.hw-pv-plat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hw-pv-plat-chip {
  font-family: var(--sans); font-weight: 600;
  font-size: 12px; color: var(--ink);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15,21,36,0.8);
  border: 1px solid rgba(0,255,194,0.28);
  position: relative;
  padding-left: 26px;
  animation: hwChip 2.4s ease-in-out infinite;
}
.hw-pv-plat-chip::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(0,255,194,0.7);
}
.hw-pv-plat-chip:nth-child(2) { animation-delay: .3s; }
.hw-pv-plat-chip:nth-child(3) { animation-delay: .6s; }
.hw-pv-plat-chip:nth-child(4) { animation-delay: .9s; }
.hw-pv-plat-chip:nth-child(5) { animation-delay: 1.2s; }
.hw-pv-plat-chip:nth-child(6) { animation-delay: 1.5s; }
.hw-pv-plat-chip:nth-child(7) { animation-delay: 1.8s; }
@keyframes hwChip {
  0%,100% { border-color: rgba(0,255,194,0.2); }
  50%     { border-color: rgba(0,255,194,0.5); }
}

/* Dashboard tiles */
.hw-pv-dash {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hw-pv-dash-tile {
  padding: 12px;
  border-radius: 10px;
  background: rgba(15,21,36,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 108px;
}
.hw-pv-dash-lab {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.hw-pv-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
}
.hw-pv-dash-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  transition: height .4s ease;
}
.hw-pv-dash-bars span.ok  { background: linear-gradient(180deg, var(--teal), rgba(0,255,194,0.2)); box-shadow: 0 0 10px rgba(0,255,194,0.4); }
.hw-pv-dash-bars span.mid { background: linear-gradient(180deg, #FFB347, rgba(255,179,71,0.2)); }
.hw-pv-dash-bars span.bad { background: linear-gradient(180deg, #FF6B5B, rgba(255,107,91,0.2)); }

.hw-pv-dash-donut {
  position: relative;
  width: 56px; height: 56px;
  align-self: center;
}
.hw-pv-dash-donut svg { width: 100%; height: 100%; }
.hw-pv-dash-donut b {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--sans); font-weight: 800;
  color: var(--teal); font-size: 16px;
}

.hw-pv-chat {
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-2);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,255,194,0.06);
  border: 1px solid rgba(0,255,194,0.2);
  line-height: 1.45;
}

/* Refresh queue preview */
.hw-pv-queue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hw-pv-var {
  padding: 10px;
  border-radius: 8px;
  background: rgba(15,21,36,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hw-pv-var-1 {
  background: rgba(0,255,194,0.1);
  border-color: rgba(0,255,194,0.35);
}
.hw-pv-var span {
  font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--ink);
}
.hw-pv-var em {
  font-family: var(--mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--teal);
}

/* Weekly report */
.hw-pv-report { display: flex; flex-direction: column; gap: 10px; }
.hw-pv-report-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hw-pv-report-chip {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,255,194,0.08);
  border: 1px solid rgba(0,255,194,0.3);
}
.hw-pv-report-date {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--ink-3);
}
.hw-pv-report-rows {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.hw-pv-report-rows > div {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(15,21,36,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.hw-pv-report-rows span {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-3);
  text-transform: uppercase;
}
.hw-pv-report-rows em {
  font-family: var(--mono); font-style: normal;
  font-size: 14px; font-weight: 700;
}
.hw-pv-report-rows em.pos { color: var(--teal); }
.hw-pv-report-rows em.mid { color: #FFB347; }
.hw-pv-report-rows em.bad { color: #FF8A7E; }

/* Geo preview */
.hw-pv-geo { display: flex; flex-direction: column; gap: 8px; }
.hw-pv-geo svg { width: 100%; height: auto; }
.hw-pv-geo-lab {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-3);
  text-align: center;
}

/* Verdict preview */
.hw-pv-verdict { display: flex; flex-direction: column; gap: 12px; }
.hw-pv-verdict-head {
  display: flex; justify-content: space-between; align-items: center;
}
.hw-pv-verdict-tag {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal); font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
}
.hw-pv-verdict-conf {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-3);
}
.hw-pv-verdict-big {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.hw-pv-verdict-big b {
  font-family: var(--sans); font-weight: 800;
  font-size: 44px; color: var(--ink);
  letter-spacing: -0.04em; line-height: 1;
}
.hw-pv-verdict-big span {
  font-family: var(--mono); font-size: 11px;
  color: var(--teal); letter-spacing: 0.08em;
}
.hw-pv-verdict-models {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.hw-pv-verdict-models span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2);
}
.hw-pv-verdict-models .dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.hw-pv-verdict-models .dot[data-m="geo"]  { background: var(--teal); box-shadow: 0 0 6px rgba(0,255,194,0.6); }
.hw-pv-verdict-models .dot[data-m="core"] { background: #60A5FA; box-shadow: 0 0 6px rgba(96,165,250,0.6); }
.hw-pv-verdict-models .dot[data-m="lens"] { background: #A78BFA; box-shadow: 0 0 6px rgba(167,139,250,0.6); }

/* Reallocation bars */
.hw-pv-realloc { display: flex; flex-direction: column; gap: 10px; }
.hw-pv-bar-row {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  gap: 12px;
  align-items: center;
}
.hw-pv-bar-lab {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.hw-pv-bar {
  position: relative;
  height: 18px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  overflow: hidden;
}
.hw-pv-bar > div.before {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: rgba(255,255,255,0.1);
  border-right: 1px dashed rgba(255,255,255,0.2);
}
.hw-pv-bar > div.after {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, var(--teal), #00D4A3);
  box-shadow: 0 0 10px rgba(0,255,194,0.35);
}
.hw-pv-bar-delta {
  font-family: var(--mono); font-size: 12px;
  font-weight: 700; letter-spacing: 0.04em;
  text-align: right;
  color: var(--ink-3);
}
.hw-pv-bar-delta.good { color: var(--teal); }
.hw-pv-bar-delta.bad  { color: #FF8A7E; }

/* Memory pattern warning */
.hw-pv-memo {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  background: rgba(255,179,71,0.06);
  border: 1px solid rgba(255,179,71,0.25);
  padding: 12px;
  border-radius: 10px;
}
.hw-pv-memo-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255,179,71,0.18);
  color: #FFB347;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
}
.hw-pv-memo b {
  display: block;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 2px;
  font-family: var(--sans);
}
.hw-pv-memo span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Impact summary */
.hw-pv-impact { display: flex; flex-direction: column; gap: 8px; }
.hw-pv-impact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(15,21,36,0.7);
  border: 1px solid rgba(255,255,255,0.06);
}
.hw-pv-impact-row > span {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.hw-pv-impact-row > b {
  font-family: var(--sans); font-weight: 800;
  font-size: 18px; color: var(--ink);
  letter-spacing: -0.02em;
}
.hw-pv-impact-row > b.good { color: var(--teal); }

/* Milestone alternating layout — left/right visual cue via tinting */
.hw-ms-left   .hw-ms-card { border-left: 3px solid rgba(0,255,194,0.18); }
.hw-ms-right  .hw-ms-card { border-right: 3px solid rgba(0,255,194,0.18); }
.hw-ms-left.is-active   .hw-ms-card { border-left-color: rgba(0,255,194,0.6); }
.hw-ms-right.is-active  .hw-ms-card { border-right-color: rgba(0,255,194,0.6); }

/* ── Technical footprint ── */
.hw-foot-section { padding: 80px 0; }
.hw-foot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.hw-foot-card {
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19,26,43,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.hw-foot-card:hover { transform: translateY(-3px); }
.hw-foot-need  { border-color: rgba(0,255,194,0.28); }
.hw-foot-touch { border-color: rgba(255,179,71,0.22); }
.hw-foot-dont  { border-color: rgba(255,107,91,0.22); }

.hw-foot-card header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hw-foot-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
}
.hw-foot-ico svg { width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }
.hw-foot-ico.ok  { background: rgba(0,255,194,0.14); color: var(--teal); border: 1px solid rgba(0,255,194,0.3); }
.hw-foot-ico.mid { background: rgba(255,179,71,0.14); color: #FFB347; border: 1px solid rgba(255,179,71,0.3); }
.hw-foot-ico.bad { background: rgba(255,107,91,0.14); color: #FF8A7E; border: 1px solid rgba(255,107,91,0.3); }
.hw-foot-tag {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.hw-foot-tag.ok  { background: rgba(0,255,194,0.08); color: var(--teal); }
.hw-foot-tag.mid { background: rgba(255,179,71,0.08); color: #FFB347; }
.hw-foot-tag.bad { background: rgba(255,107,91,0.08); color: #FF8A7E; }
.hw-foot-card h3 {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: 20px; letter-spacing: -0.02em;
  color: var(--ink);
}
.hw-foot-card p {
  margin: 0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-3);
}
.hw-foot-list {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hw-foot-list li {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(7,11,22,0.6);
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
  color: var(--ink-2);
}

.hw-foot-badges {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.hw-foot-badge {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15,21,36,0.7);
  border: 1px solid rgba(0,255,194,0.2);
}

/* ── FAQ ── */
.hw-faq-section { padding: 80px 0; }
.hw-faq {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 960px;
}
.hw-faq-item {
  border-radius: 14px;
  background: rgba(15,21,36,0.75);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  transition: border-color .2s ease, background .2s ease;
}
.hw-faq-item[open] {
  border-color: rgba(0,255,194,0.3);
  background: rgba(15,21,36,0.9);
}
.hw-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.hw-faq-item summary::-webkit-details-marker { display: none; }
.hw-faq-q {
  font-family: var(--sans); font-weight: 600;
  font-size: 16px; color: var(--ink);
  letter-spacing: -0.01em;
}
.hw-faq-caret {
  font-family: var(--mono); font-weight: 700;
  font-size: 18px;
  color: var(--teal);
  transition: transform .2s ease;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  flex: none;
}
.hw-faq-item[open] .hw-faq-caret { transform: rotate(45deg); }
.hw-faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.hw-faq-item p b { color: var(--ink); }

.hw-close-section { padding: 64px 0 72px; }

/* Add bottom-padding on mobile so the sticky rail doesn't obscure the close CTA */
@media (max-width: 900px) {
  .hw-body { padding-bottom: 96px; }
}

/* ── Responsive ── */
@media (max-width: 1280px) {
  /* Tighter rail placement on narrower desktop viewports */
  .hw-rail { right: 16px; width: 180px; padding: 14px; }
  .hw-rail-ring { width: 56px; height: 56px; }
  .hw-rail-pct { font-size: 12px; }
  .hw-rail-val { font-size: 14px; }
  .hw-rail-chap { font-size: 10px; }
}

@media (max-width: 1140px) {
  .hw-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hw-journey-stage { height: 380px; }
  .hw-chap { min-width: 100px; padding: 8px 10px; }
  .hw-chap b { font-size: 12px; }
  .hw-chap em { font-size: 9px; }

  /* Mission tiles stack */
  .hw-mission { grid-template-columns: 1fr; gap: 14px; }
  .hw-mission-hero { padding: 24px; }
  .hw-mission-cells { grid-template-columns: repeat(5, 1fr); }
  .hw-mission-hero .hw-mission-val { font-size: 52px; }

  .hw-foot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Mission cells fold to 2 columns */
  .hw-mission-cells { grid-template-columns: repeat(2, 1fr); }
  .hw-mission-cell { border-right: 1px solid rgba(255,255,255,0.06); }
  .hw-mission-cell:nth-child(2n) { border-right: none; }
  .hw-mission-cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.06); }

  /* Rail becomes a bottom-sticky horizontal bar */
  .hw-rail {
    position: fixed;
    left: 12px; right: 12px;
    top: auto;
    bottom: 12px;
    transform: translateY(calc(100% + 16px));
    width: auto;
    padding: 12px 14px;
    border-radius: 16px;
    max-width: 680px;
    margin: 0 auto;
  }
  .hw-rail.is-active { transform: translateY(0); }
  .hw-rail-inner {
    flex-direction: row;
    gap: 14px;
    align-items: center;
    text-align: left;
  }
  .hw-rail-ring { width: 48px; height: 48px; flex: none; }
  .hw-rail-pct { font-size: 11px; }
  .hw-rail-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }
  .hw-rail-val { font-size: 14px; }
  .hw-rail-lab { font-size: 9px; }
  .hw-rail-chap {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .hw-mission-cells { grid-template-columns: 1fr 1fr; }

  /* Tighter track on narrow screens */
  .hw-track { padding-left: 56px; }
  .hw-spine { left: 26px; }
  .hw-ms-node { left: -50px; width: 36px; height: 36px; }
  .hw-ms-node span { font-size: 9px; }
  .hw-chapter-head { padding: 28px 22px 24px; }
  .hw-chapter-head::after { left: -56px; width: 20px; height: 20px; }
  .hw-chapter-title { font-size: clamp(28px, 6vw, 36px); }
  .hw-chapter-sub { font-size: 14px; }
  .hw-ms-card { padding: 18px; }
  .hw-ms-card h3 { font-size: 17px; }
  .hw-pv-dash { grid-template-columns: 1fr; }
  .hw-pv-queue { grid-template-columns: 1fr; }
  .hw-pv-report-rows { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-spine-fill { transition: none; }
  .hw-chapter, .hw-ms { opacity: 1; transform: none; transition: none; }
  .hw-pv-plat-chip { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   AI CO-PILOT — Pixis-inspired rich chat UI
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.cp-hero {
  padding: 56px 0 80px;
  background:
    radial-gradient(900px 320px at 85% 0%, rgba(0,255,194,0.1), transparent 60%),
    radial-gradient(600px 260px at 10% 100%, rgba(96,165,250,0.06), transparent 60%);
}
.cp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
}
.cp-hero-lead h1 {
  font-family: var(--sans);
  font-size: clamp(44px, 4.8vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 18px 0 22px;
}
.cp-hero-lead h1 em { font-style: italic; color: var(--teal); }

/* ── Chat frame ── */
.cp-hero-chat { position: relative; min-height: 520px; }
.cp-chat-frame {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(15,21,36,0.95), rgba(10,15,29,0.95));
  border: 1px solid rgba(0,255,194,0.28);
  overflow: hidden;
  box-shadow:
    0 50px 120px -30px rgba(0,0,0,0.7),
    0 0 60px rgba(0,255,194,0.1),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.cp-chat-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(7,11,22,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cp-chat-dots { display: flex; gap: 6px; }
.cp-chat-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.cp-chat-dots span:nth-child(1) { background: #FF6B5B; }
.cp-chat-dots span:nth-child(2) { background: #FFB347; }
.cp-chat-dots span:nth-child(3) { background: var(--teal); }
.cp-chat-tab {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2); letter-spacing: 0.06em;
  text-align: center;
}
.cp-chat-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); font-weight: 700;
}
.cp-chat-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(0,255,194,0.7);
  animation: cpPulse 2s ease-in-out infinite;
}
@keyframes cpPulse {
  0%,100% { opacity: 0.5; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.15); }
}
.cp-chat-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(0,255,194,0.06), transparent 60%);
}

/* ── Messages ── */
.cp-msg {
  display: grid;
  gap: 10px;
  align-items: flex-start;
}
.cp-msg-user {
  grid-template-columns: 1fr 32px;
  justify-items: end;
}
.cp-msg-bot {
  grid-template-columns: 32px 1fr;
}
.cp-msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.cp-msg-avatar-user {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink-2);
  grid-column: 2;
  grid-row: 1;
}
.cp-msg-avatar-bot {
  background: linear-gradient(135deg, var(--teal), #00D4A3);
  border: 1px solid var(--teal);
  color: #070B16;
  box-shadow: 0 0 16px rgba(0,255,194,0.4);
  grid-column: 1;
  grid-row: 1;
}
.cp-msg-avatar-bot svg { width: 18px; height: 18px; }
.cp-msg-bubble {
  max-width: 92%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ink);
}
.cp-msg-user .cp-msg-bubble {
  background: linear-gradient(135deg, rgba(0,255,194,0.16), rgba(0,255,194,0.06));
  border-color: rgba(0,255,194,0.35);
  border-bottom-right-radius: 4px;
}
.cp-msg-bot .cp-msg-bubble {
  background: rgba(15,21,36,0.85);
  border-color: rgba(255,255,255,0.08);
  border-bottom-left-radius: 4px;
}
.cp-msg-bubble-rich {
  max-width: 100%;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cp-msg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.cp-msg-conf {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal);
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.cp-msg-time {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.cp-msg-summary {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.cp-msg-summary b { color: var(--teal); font-weight: 700; }

.cp-msg-points {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.cp-msg-points li::marker { color: var(--teal); }
.cp-msg-points b { color: var(--ink); }

.cp-msg-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cp-msg-cites {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cp-msg-cite-lab {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
  margin-right: 4px;
}
.cp-msg-cite {
  font-family: var(--mono); font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,255,194,0.06);
  border: 1px solid rgba(0,255,194,0.25);
  color: var(--teal);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  letter-spacing: 0.04em;
}
.cp-msg-cite:hover {
  background: rgba(0,255,194,0.12);
  border-color: rgba(0,255,194,0.45);
}
.cp-msg-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Embedded vizzes ── */
.cp-viz {
  padding: 12px;
  border-radius: 12px;
  background: rgba(7,11,22,0.6);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Stacked horizontal bar */
.cp-viz-stacked .cp-stack-row { display: flex; }
.cp-stack-bar {
  display: flex;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.cp-stack-seg {
  position: relative;
  width: var(--w);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(7,11,22,0.95);
  font-weight: 700;
  transition: filter .15s ease;
}
.cp-stack-seg::after {
  content: attr(data-v);
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; font-weight: 700;
  color: var(--ink-2);
}
.cp-stack-seg em { font-style: normal; font-size: 10px; }
.cp-stack-seg.s-creative { background: linear-gradient(135deg, #FF6B5B, #FF9E90); }
.cp-stack-seg.s-audience { background: linear-gradient(135deg, #FFB347, #FFE0A6); color: #2D1A04; }
.cp-stack-seg.s-comp     { background: linear-gradient(135deg, #A78BFA, #D4C4FF); color: #1A0E2E; }

/* Horizontal bars (inflation per channel) */
.cp-viz-bars { display: flex; flex-direction: column; gap: 8px; }
.cp-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 56px;
  gap: 10px;
  align-items: center;
}
.cp-bar-lab {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-2);
  font-weight: 600;
}
.cp-bar {
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cp-bar-fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 999px;
}
.cp-bar-fill.bad { background: linear-gradient(90deg, #FF6B5B, #FF9E90); box-shadow: 0 0 8px rgba(255,107,91,0.4); }
.cp-bar-fill.mid { background: linear-gradient(90deg, #FFB347, #FFE0A6); box-shadow: 0 0 8px rgba(255,179,71,0.35); }
.cp-bar-fill.ok  { background: linear-gradient(90deg, var(--teal), #7CFFDB); box-shadow: 0 0 8px rgba(0,255,194,0.45); }
.cp-bar-val {
  text-align: right;
  font-family: var(--mono); font-size: 12px;
  font-weight: 700;
}
.cp-bar-val.bad { color: #FF8A7E; }
.cp-bar-val.mid { color: #FFB347; }
.cp-bar-val.ok  { color: var(--teal); }

/* Forecast line chart */
.cp-viz-line svg { width: 100%; height: auto; }

/* Reallocation table */
.cp-viz-table { padding: 4px; }
.cp-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-table-row {
  display: grid;
  grid-template-columns: 80px 1.4fr 1.2fr 80px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(15,21,36,0.6);
  border: 1px solid rgba(255,255,255,0.06);
}
.cp-table-head {
  background: transparent;
  border: none;
  padding: 4px 12px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700;
}
.cp-table-amt {
  font-family: var(--mono); font-size: 14px;
  font-weight: 700; letter-spacing: 0.02em;
}
.cp-table-amt.good { color: var(--teal); }
.cp-table-amt.bad  { color: #FF8A7E; }
.cp-from {
  font-family: var(--sans); font-size: 13px;
  font-weight: 600; color: var(--ink);
}
.cp-arrow {
  font-family: var(--mono); font-size: 16px;
  color: #FF8A7E;
}
.cp-table-pred {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.cp-impact {
  font-family: var(--mono); font-size: 13px;
  font-weight: 700;
  text-align: right;
}
.cp-impact.good { color: var(--teal); }
.cp-impact.bad  { color: #FF8A7E; }
.cp-table-total {
  background: rgba(0,255,194,0.06);
  border-color: rgba(0,255,194,0.3);
}
.cp-table-total .cp-from { color: var(--ink); font-style: italic; }

/* Suggested chips + input */
.cp-chat-suggest {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding-top: 4px;
}
.cp-chat-suggest-lab {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.cp-chat-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease;
}
.cp-chat-chip:hover { border-color: rgba(0,255,194,0.4); color: var(--ink); }

.cp-chat-input {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(7,11,22,0.7);
  border: 1px solid rgba(0,255,194,0.25);
  margin-top: 4px;
}
.cp-chat-input-ico {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--teal);
  font-weight: 700;
}
.cp-chat-input input {
  background: transparent;
  border: none; outline: none;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}
.cp-chat-input input::placeholder { color: var(--ink-3); }
.cp-chat-send {
  padding: 7px 14px;
  font-family: var(--sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.04em;
  color: #070B16;
  background: linear-gradient(135deg, var(--teal), #00D4A3);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0,255,194,0.35);
}
.cp-chat-send:hover { filter: brightness(1.08); }

/* ── Reasoning flow ── */
.cp-reasoning-section { padding: 80px 0; }
.cp-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  margin-top: 36px;
}
.cp-flow-step {
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(19,26,43,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.cp-flow-step:hover {
  transform: translateY(-3px);
  border-color: rgba(0,255,194,0.3);
}
.cp-flow-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  opacity: 0.7;
}
.cp-flow-step-accent {
  background: linear-gradient(180deg, rgba(0,255,194,0.1), rgba(10,15,29,0.85));
  border-color: rgba(0,255,194,0.35);
  box-shadow: 0 0 30px rgba(0,255,194,0.1);
}
.cp-flow-num {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700;
}

.cp-flow-icon-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.cp-flow-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(0,255,194,0.12);
  border: 1px solid rgba(0,255,194,0.3);
  color: var(--teal);
  display: grid; place-items: center;
}
.cp-flow-icon svg { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; }
.cp-flow-step-accent .cp-flow-icon {
  background: linear-gradient(135deg, var(--teal), #00C99C);
  color: #070B16;
  border-color: var(--teal);
}
.cp-flow-step h4 {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: 17px; letter-spacing: -0.015em;
  color: var(--ink);
}
.cp-flow-step p {
  margin: 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-3);
}
.cp-flow-step p em { font-style: italic; color: var(--teal); }
.cp-flow-arrow {
  align-self: center;
  font-family: var(--mono); font-size: 22px;
  font-weight: 700;
  color: rgba(0,255,194,0.5);
  padding: 0 4px;
}

/* ── Conversation showcases ── */
.cp-shows-section { padding: 80px 0; }
.cp-shows {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 36px;
}
.cp-show {
  padding: 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(15,21,36,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.cp-show::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(0,255,194,0.1), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}
.cp-show-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cp-show-num {
  font-family: var(--sans); font-weight: 800;
  font-size: 22px; letter-spacing: -0.03em;
  color: var(--teal);
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  padding: 4px 12px;
  border-radius: 999px;
}
.cp-show-tag {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
}
.cp-show-user { grid-template-columns: 1fr; justify-items: end; }
.cp-show-bot  { grid-template-columns: 32px 1fr; }
.cp-show-bot::before {
  content: "◉";
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), #00D4A3);
  display: grid; place-items: center;
  color: #070B16;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(0,255,194,0.4);
}

/* ── Cross-signal graph ── */
.cp-graph-section { padding: 80px 0; }
.cp-graph {
  margin-top: 36px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(15,21,36,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  position: relative;
}
.cp-graph-stage {
  position: relative;
  padding: 32px;
  min-height: 420px;
}
.cp-graph-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 360px at 50% 50%, rgba(0,255,194,0.1), transparent 60%);
  pointer-events: none;
}
.cp-graph-svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.cp-graph-src {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(15,21,36,0.95), rgba(10,15,29,0.85));
  border: 1px solid rgba(0,255,194,0.3);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6), 0 0 18px rgba(0,255,194,0.18);
  z-index: 3;
  min-width: 160px;
}
.cp-graph-src b {
  font-family: var(--sans); font-weight: 700;
  font-size: 13px; color: var(--ink);
  letter-spacing: -0.01em;
}
.cp-graph-src em {
  font-family: var(--mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* Position the source pills */
.cp-graph-s1 { top: 18%;  left: 4%; }
.cp-graph-s2 { bottom: 18%; left: 4%; }
.cp-graph-s3 { top: 18%;  right: 4%; }
.cp-graph-s4 { bottom: 18%; right: 4%; }
.cp-graph-s5 { top: 4%;   left: 50%; transform: translateX(-50%); }

.cp-graph-brain-lab {
  position: absolute;
  left: 50%; bottom: 18%;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal); font-weight: 700;
  background: rgba(7,11,22,0.85);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,194,0.3);
}

/* ── Slack alerts ── */
.cp-slack-section { padding: 80px 0; }
.cp-slack {
  margin: 36px auto 0;
  max-width: 720px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,21,36,0.95), rgba(10,15,29,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.cp-slack-chrome {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: rgba(7,11,22,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cp-slack-hash {
  font-family: var(--mono); font-size: 16px;
  color: var(--ink-3);
}
.cp-slack-channel {
  font-family: var(--sans); font-weight: 700;
  font-size: 15px; color: var(--ink);
}
.cp-slack-meta {
  text-align: right;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.cp-slack-stream {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-slack-msg {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .15s ease;
}
.cp-slack-msg:last-child { border-bottom: none; }
.cp-slack-msg:hover { background: rgba(255,255,255,0.02); }

.cp-slack-bad   { background: rgba(255,107,91,0.04); border-left: 3px solid rgba(255,107,91,0.4); }
.cp-slack-warn  { background: rgba(255,179,71,0.04); border-left: 3px solid rgba(255,179,71,0.4); }
.cp-slack-good  { background: rgba(0,255,194,0.04);  border-left: 3px solid rgba(0,255,194,0.4); }

.cp-slack-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(0,255,194,0.12);
  border: 1px solid rgba(0,255,194,0.3);
  display: grid; place-items: center;
  font-size: 16px;
}
.cp-slack-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cp-slack-line b {
  font-family: var(--sans); font-weight: 700;
  font-size: 13px; color: var(--ink);
}
.cp-slack-line em {
  font-family: var(--mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-4);
}
.cp-slack-pill {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.cp-slack-pill.bad  { background: rgba(255,107,91,0.18); color: #FF8A7E; border: 1px solid rgba(255,107,91,0.3); }
.cp-slack-pill.mid  { background: rgba(255,179,71,0.18); color: #FFB347; border: 1px solid rgba(255,179,71,0.3); }
.cp-slack-pill.good { background: rgba(0,255,194,0.18); color: var(--teal); border: 1px solid rgba(0,255,194,0.3); }

.cp-slack-body p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.cp-slack-body p code {
  font-family: var(--mono); font-size: 11px;
  background: rgba(255,255,255,0.05);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}
.cp-slack-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-slack-btn {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s ease;
}
.cp-slack-btn:hover { border-color: rgba(0,255,194,0.5); color: var(--ink); }
.cp-slack-btn.primary {
  background: rgba(0,255,194,0.12);
  border-color: rgba(0,255,194,0.4);
  color: var(--teal);
}

/* ── Trust grid ── */
.cp-trust-section { padding: 80px 0; }
.cp-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 36px;
}
.cp-trust-card {
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(19,26,43,0.85), rgba(10,15,29,0.85));
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cp-trust-card-report {
  border-color: rgba(0,255,194,0.3);
  background: linear-gradient(180deg, rgba(0,255,194,0.06), rgba(10,15,29,0.85));
}
.cp-trust-card header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-trust-tag {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal); font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
}
.cp-trust-tag.accent {
  background: linear-gradient(135deg, var(--teal), #00D4A3);
  color: #070B16;
  border-color: var(--teal);
}
.cp-trust-card h3 {
  margin: 0;
  font-family: var(--sans); font-weight: 800;
  font-size: 26px; letter-spacing: -0.025em;
  color: var(--ink);
}

/* Citation example */
.cp-cite-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cp-cite-demo p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.cp-cite-link {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,255,194,0.45);
  cursor: pointer;
  transition: border-color .15s ease;
}
.cp-cite-link:hover { border-bottom-style: solid; }
.cp-cite-link sup {
  font-family: var(--mono);
  font-size: 0.7em;
  margin-left: 1px;
}
.cp-cite-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-cite-list li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(7,11,22,0.6);
  border: 1px solid rgba(0,255,194,0.18);
  align-items: center;
}
.cp-cite-list li > span {
  font-family: var(--mono); font-size: 11px;
  font-weight: 700; color: var(--teal);
}
.cp-cite-list li > div b {
  display: block;
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 2px;
}
.cp-cite-list li > div em {
  font-family: var(--mono); font-style: normal;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.cp-cite-go {
  font-family: var(--mono); font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* Auto-report card */
.cp-report {
  padding: 18px;
  border-radius: 14px;
  background: rgba(7,11,22,0.6);
  border: 1px solid rgba(0,255,194,0.25);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cp-report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.cp-report-head b {
  display: block;
  font-family: var(--sans); font-weight: 700;
  font-size: 16px; color: var(--ink);
  letter-spacing: -0.01em;
}
.cp-report-head span {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--ink-3);
}
.cp-report-stamp {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); font-weight: 700;
  background: rgba(0,255,194,0.1);
  border: 1px solid rgba(0,255,194,0.3);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.cp-report-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cp-report-rows > div {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(15,21,36,0.7);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cp-report-rows span {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.cp-report-rows b {
  font-family: var(--sans); font-weight: 800;
  font-size: 15px; color: var(--ink);
  letter-spacing: -0.01em;
}
.cp-report-rows b.good { color: var(--teal); }
.cp-report footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cp-report footer span {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--ink-3);
}

.cp-outcomes-section { padding: 80px 0; }
.cp-close-section { padding: 64px 0 80px; }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .cp-flow { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cp-flow-arrow { display: none; }
  .cp-trust-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .cp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .cp-hero-chat { min-height: auto; }
  .cp-graph-stage { min-height: 480px; padding: 24px 16px; }
  .cp-graph-src { min-width: 130px; padding: 8px 12px; }
  .cp-graph-src b { font-size: 12px; }
  .cp-graph-src em { font-size: 9px; }
}
@media (max-width: 900px) {
  .cp-flow { grid-template-columns: 1fr; }
  .cp-msg-foot { flex-direction: column; align-items: stretch; }
  .cp-table-row { grid-template-columns: 1fr 1fr; }
  .cp-arrow { display: none; }
  .cp-graph-s5 { display: none; }
  .cp-graph-s1, .cp-graph-s2, .cp-graph-s3, .cp-graph-s4 {
    position: relative;
    inset: auto;
    transform: none;
    margin: 6px;
    flex: 1 1 calc(50% - 12px);
    min-width: 0;
  }
  .cp-graph-stage {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }
  .cp-graph-svg { display: none; }
  .cp-graph-brain-lab { position: relative; left: auto; bottom: auto; transform: none; align-self: center; margin: 8px auto 0; }
  .cp-stack-bar { height: 28px; }
  .cp-stack-seg em { display: none; }
}
@media (max-width: 720px) {
  .cp-msg-bubble-rich { padding: 14px; }
  .cp-bar-row { grid-template-columns: 90px 1fr 50px; }
  .cp-show { padding: 18px; }
  .cp-report-rows { grid-template-columns: 1fr; }
  .cp-cite-list li { grid-template-columns: 28px 1fr; }
  .cp-cite-list li .cp-cite-go { grid-column: 1 / -1; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-chat-dot { animation: none; }
  .cp-graph-svg circle { animation: none !important; }
}

.subpage-hero {
    padding: 72px 0 64px;
    border-bottom: 1px solid var(--rule-soft);
}

@media (max-width: 768px) {
  .cq-card{width: 150px; height: 200px;}
  .cq-stage{transform: scale(0.8); height: 450px;}
  .cq-hero-viz{padding-top: 40px; width: calc(100% + 40px); margin-left: -20px; min-height: 450px; }
  .cq-hero-grid{gap: 0px;}
  .cq-hero{padding: 30px 0 0 0;}
  .cq-dash-body{padding: 20px;}
  .cq-pf, .aq-outcome, .aq-dash-body, .aq-sync, .cp-trust-card, .mem-dash-body{padding: 20px;}
  .aq-persona{display: flex; width: 150px;}
  .aq-p-avatar{display: none;}
  .aq-p3{bottom:8%;}
  .aq-p4{bottom:5%;}
  .aq-platforms{gap: 5px}
  .cp-cite-list li{align-items: flex-start; gap: 8px;}
  .cp-cite-list li > span{padding: 2px;}
  .aq-outcome-metric b{font-size: 20px;}
  .mem-warn-card{display: block;}
  .mem-warn-card{padding: 10px;}
  .mem-warn-match{margin-top: 20px;}
  .mem-warn-table-wrap{
    width: 100%;
    overflow: auto;
  }
  .mem-warn-match > header{flex-direction: column;justify-content: flex-start; align-items: flex-start;}
}
/* ═══════════════════════════════════════════════════════════════
   Creative IQ v2 rewrite — decision-OS positioning + Foreplay/MotionApp graphics
   Andromeda Readiness · 9 signals · Ad Detail · Today · Gap Map ·
   AI Brief · Meta-first coverage · marquee · scroll-reveals
   ═══════════════════════════════════════════════════════════════ */

/* Scroll-reveal / staggered fade-ins.
   Uses CSS-only animation that plays on mount — always renders content.
   Progressive scroll-trigger applied via @supports where available. */
@keyframes cq-reveal-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.cq-reveal { animation: cq-reveal-in 700ms cubic-bezier(0.22,1,0.36,1) both; }
.cq-reveal.d1 { animation-delay: 80ms; }
.cq-reveal.d2 { animation-delay: 160ms; }
.cq-reveal.d3 { animation-delay: 240ms; }
.cq-reveal.d4 { animation-delay: 320ms; }
@media (prefers-reduced-motion: reduce) { .cq-reveal { animation: none; } }
@supports (animation-timeline: view()) {
  .cq-reveal-scroll {
    animation: cq-reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}

/* ── MOTIONAPP-STYLE ANIMATED HERO GRADIENT ──────────────── */
.cq-hero-v2 {
  position: relative;
  overflow: hidden;
  padding: 88px 0 96px;
}
.cq-hero-v2::before,
.cq-hero-v2::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.cq-hero-v2::before {
  top: -20%; left: -12%;
  width: 55%; height: 60%;
  background: radial-gradient(circle, rgba(0,255,194,0.22), transparent 65%);
  animation: cq-hero-glow-a 22s ease-in-out infinite;
}
.cq-hero-v2::after {
  bottom: -25%; right: -10%;
  width: 55%; height: 60%;
  background: radial-gradient(circle, rgba(184,166,255,0.20), transparent 65%);
  animation: cq-hero-glow-b 26s ease-in-out infinite;
}
@keyframes cq-hero-glow-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 30px) scale(1.10); }
}
@keyframes cq-hero-glow-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, -40px) scale(1.15); }
}
.cq-hero-v2 .wrap { position: relative; z-index: 1; }

.cq-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,194,0.32);
  background: rgba(0,255,194,0.08);
  color: var(--teal);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 20px;
}
.cq-hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
  animation: cq-pulse 1.6s ease-in-out infinite;
}
@keyframes cq-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.35); }
}
.cq-hero-h1,
.cq-hero-lead h1.cq-hero-h1 {
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5.5vw, 68px);
  line-height: 1.15;              /* was 1.02 — too tight; italic "p" in loop clipped */
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 0.06em;         /* extra room for gradient-text descenders */
}
.cq-hero-h1 .accent {
  background: linear-gradient(90deg, var(--teal), #C8B8FF, #FFB347);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
  display: inline-block;
  padding-bottom: 0.05em;         /* italic descender room */
  line-height: 1.2;
}
.cq-hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 640px;
  margin: 0 0 28px;
}
.cq-hero-sub b { color: var(--ink); font-weight: 600; }

.cq-hero-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
  max-width: 720px;
}
.cq-pillar {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 200ms ease;
}
.cq-pillar:hover { transform: translateY(-2px); border-color: rgba(0,255,194,0.28); background: rgba(0,255,194,0.04); }
.cq-pillar-ico {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  margin-bottom: 10px;
  background: rgba(0,255,194,0.08);
  color: var(--teal);
}
.cq-pillar-ico svg { width: 18px; height: 18px; }
.cq-pillar:nth-child(2) .cq-pillar-ico { background: rgba(184,166,255,0.10); color: #C8B8FF; }
.cq-pillar:nth-child(3) .cq-pillar-ico { background: rgba(255,179,71,0.10); color: #FFB347; }
.cq-pillar b {
  display: block;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.cq-pillar em {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  font-style: normal;
  line-height: 1.4;
  display: block;
}

/* Big stat stripe — MotionApp-style oversized headline metrics */
.cq-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 24px 28px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  max-width: 720px;
  margin-top: 24px;
}
.cq-hero-stat b {
  display: block;
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 6px;
  background: linear-gradient(180deg, #FFFFFF, #8A93A6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cq-hero-stat em {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  font-style: normal;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* MotionApp-style hero product frame — a shrunken product screenshot */
.cq-hero-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #0E1424, #050914);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.55),
    0 0 60px -30px rgba(0,255,194,0.25);
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transition: transform 500ms cubic-bezier(0.22,1,0.36,1);
}
.cq-hero-frame:hover { transform: perspective(1400px) rotateY(-1deg) rotateX(0deg); }
.cq-hero-frame-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
}
.cq-hero-frame-chrome .dots { display: flex; gap: 5px; }
.cq-hero-frame-chrome .dots span {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.10);
}
.cq-hero-frame-chrome .tab {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.cq-hero-frame-body { padding: 18px; }

/* ── MARQUEE BAND ────────────────────────────────────────── */
.cq-marquee {
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.01);
  overflow: hidden;
  position: relative;
}
.cq-marquee-lab {
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 18px;
}
.cq-marquee-track {
  display: flex;
  gap: 56px;
  animation: cq-marquee-scroll 40s linear infinite;
  width: max-content;
  align-items: center;
}
@keyframes cq-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cq-marquee-item {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.32);
  transition: color 200ms ease;
  white-space: nowrap;
}
.cq-marquee-item:hover { color: rgba(255,255,255,0.72); }
.cq-marquee-item::after {
  content: '·';
  margin-left: 56px;
  color: rgba(255,255,255,0.10);
}
.cq-marquee-item:last-child::after { display: none; }

/* Marquee fade edges */
.cq-marquee::before,
.cq-marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 120px;
  z-index: 1;
  pointer-events: none;
}
.cq-marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg, #050914), transparent); }
.cq-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--bg, #050914), transparent); }

/* ── FOREPLAY-STYLE CREATIVE CARD GRID ───────────────────── */
.cq-foreplay {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cq-fp-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(184,166,255,0.15), rgba(0,255,194,0.08));
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 250ms cubic-bezier(0.22,1,0.36,1), border-color 250ms ease;
  cursor: pointer;
}
.cq-fp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,255,194,0.32);
}
.cq-fp-card:nth-child(1) { background: linear-gradient(135deg, rgba(255,138,126,0.25), rgba(255,107,91,0.08)); }
.cq-fp-card:nth-child(2) { background: linear-gradient(135deg, rgba(184,166,255,0.25), rgba(138,120,224,0.08)); }
.cq-fp-card:nth-child(3) { background: linear-gradient(135deg, rgba(255,179,71,0.25), rgba(255,159,46,0.08)); }
.cq-fp-card:nth-child(4) { background: linear-gradient(135deg, rgba(0,255,194,0.25), rgba(0,212,163,0.08)); }
.cq-fp-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(0,0,0,0.5);
  color: #FFF;
  backdrop-filter: blur(6px);
}
.cq-fp-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.85);
  font-size: 28px;
  opacity: 0.4;
  transition: opacity 250ms ease, transform 250ms ease;
}
.cq-fp-card:hover .cq-fp-play { opacity: 1; transform: scale(1.15); }
.cq-fp-meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
}
.cq-fp-meta b {
  display: block;
  font-size: 11.5px;
  color: #FFF;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.cq-fp-meta-row {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
}
.cq-fp-meta-row .score {
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}
.cq-fp-meta-row .score.ok  { background: rgba(0,255,194,0.20); color: var(--teal); }
.cq-fp-meta-row .score.mid { background: rgba(255,179,71,0.20); color: #FFB347; }
.cq-fp-meta-row .score.bad { background: rgba(255,107,91,0.20); color: #FF8A7E; }

/* Fake-heatmap overlay on Foreplay card */
.cq-fp-heat {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,107,91,0.35), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(255,107,91,0.25), transparent 25%);
  opacity: 0.6;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ── ANDROMEDA READINESS ─────────────────────────────────── */
.cq-readiness {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 28px;
  align-items: stretch;
}
.cq-readiness-hero {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
  padding: 30px;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(0,255,194,0.06), transparent 55%),
    rgba(255,255,255,0.02);
  border: 1px solid rgba(0,255,194,0.18);
}
.cq-score-ring-hero { width: 180px; height: 180px; position: relative; }
.cq-score-ring-hero .cq-score-num { font-size: 52px; }
.cq-score-ring-hero .cq-score-lab { font-size: 11px; }
.cq-readiness-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.cq-readiness-lede h3 {
  font-size: 22px; color: var(--ink);
  letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.25;
}
.cq-readiness-lede p {
  color: var(--ink-2); line-height: 1.55; margin: 0 0 14px; font-size: 14px;
}
.cq-readiness-bands { display: flex; gap: 8px; flex-wrap: wrap; }
.cq-band {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.08);
}
.cq-band b { font-weight: 700; letter-spacing: 0.02em; }
.cq-band.ok  { color: var(--teal); background: rgba(0,255,194,0.08); border-color: rgba(0,255,194,0.25); }
.cq-band.mid { color: #FFB347;     background: rgba(255,179,71,0.08); border-color: rgba(255,179,71,0.28); }
.cq-band.bad { color: #FF8A7E;     background: rgba(255,107,91,0.08); border-color: rgba(255,107,91,0.28); }

.cq-readiness-parts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; align-self: start;
}
.cq-part {
  padding: 18px; border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 200ms ease;
}
.cq-part:hover { border-color: rgba(0,255,194,0.28); transform: translateY(-2px); }
.cq-part header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.cq-part-num { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--teal); letter-spacing: -0.02em; }
.cq-part-eyebrow { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px; }
.cq-part h4 { font-size: 15px; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.cq-part p { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin: 0 0 12px; }
.cq-part-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.cq-part-bar > div { height: 100%; border-radius: 999px; transition: width 400ms cubic-bezier(0.22,1,0.36,1); }
.cq-part-bar > div.ok  { background: linear-gradient(90deg, var(--teal), #00D4A3); }
.cq-part-bar > div.mid { background: linear-gradient(90deg, #FFB347, #FF9F2E); }
.cq-part-bar > div.bad { background: linear-gradient(90deg, #FF8A7E, #FF6B5B); }

.cq-signals-rollup { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cq-signals-rollup-arrow { color: var(--ink-4); font-size: 22px; line-height: 1; }
.cq-signals-rollup-card {
  display: grid; grid-template-columns: 1fr 130px;
  gap: 24px; align-items: center;
  padding: 20px 24px; border-radius: 14px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,107,91,0.25);
  max-width: 720px; width: 100%;
}
.cq-signals-rollup-card h3 { margin: 0 0 4px; font-size: 17px; color: var(--ink); letter-spacing: -0.015em; }
.cq-signals-rollup-card p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.cq-signals-rollup-card b { color: var(--ink); }
.cq-signals-rollup-card em { color: #FF8A7E; font-style: normal; font-family: var(--mono); }

/* ── AD DETAIL — CREATIVE BREAKDOWN ──────────────────────── */
.cq-detail-head {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 16px; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cq-detail-thumb {
  width: 56px; height: 56px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 15px; color: #FFF;
  background: linear-gradient(135deg, rgba(255,107,91,0.35), rgba(255,107,91,0.08));
  border: 1px solid rgba(255,107,91,0.32);
}
.cq-detail-title b { display: block; font-size: 17px; color: var(--ink); letter-spacing: -0.015em; margin-bottom: 4px; }
.cq-detail-crumbs { display: flex; flex-direction: column; gap: 2px; }
.cq-detail-crumbs span { display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.cq-detail-crumbs em { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); font-style: normal; }
.cq-detail-status { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cq-detail-runway { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.cq-detail-runway b { color: var(--ink); font-weight: 700; }

.cq-breakdown { padding: 22px; }
.cq-breakdown-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.cq-breakdown-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.cq-grain {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 180ms ease, border-color 180ms ease;
}
.cq-grain:hover { transform: translateY(-2px); }
.cq-grain-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04); flex-shrink: 0;
}
.cq-grain-ico svg { width: 18px; height: 18px; }
.cq-grain.ok  { border-color: rgba(0,255,194,0.28); }
.cq-grain.ok  .cq-grain-ico { color: var(--teal); background: rgba(0,255,194,0.08); }
.cq-grain.mid { border-color: rgba(255,179,71,0.28); }
.cq-grain.mid .cq-grain-ico { color: #FFB347; background: rgba(255,179,71,0.08); }
.cq-grain.bad { border-color: rgba(255,107,91,0.28); }
.cq-grain.bad .cq-grain-ico { color: #FF8A7E; background: rgba(255,107,91,0.08); }
.cq-grain-lab { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 3px; }
.cq-grain b { display: block; font-size: 17px; color: var(--ink); letter-spacing: -0.015em; line-height: 1; margin-bottom: 3px; }
.cq-grain b.ok { color: var(--teal); }
.cq-grain b.mid { color: #FFB347; }
.cq-grain b.bad { color: #FF8A7E; }
.cq-grain em { display: block; font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.02em; font-style: normal; }

.cq-tagstrip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 22px 22px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.cq-tagstrip-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-right: 2px; }
.cq-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font-family: 'Geist', sans-serif; font-size: 11.5px; font-weight: 600;
  border: 1px solid;
}
.cq-tag .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}
.cq-tag.t-hook    { color: var(--teal); background: rgba(0,255,194,0.08); border-color: rgba(0,255,194,0.32); }
.cq-tag.t-tone    { color: #FFB347; background: rgba(255,179,71,0.10); border-color: rgba(255,179,71,0.32); }
.cq-tag.t-format  { color: #8FCBFF; background: rgba(143,203,255,0.10); border-color: rgba(143,203,255,0.32); }
.cq-tag.t-audience{ color: #FF8A7E; background: rgba(255,138,126,0.10); border-color: rgba(255,138,126,0.32); }
.cq-tag.t-angle   { color: #C8B8FF; background: rgba(184,166,255,0.10); border-color: rgba(184,166,255,0.32); }
.cq-tag.t-length  { color: #8FE6BE; background: rgba(143,230,190,0.10); border-color: rgba(143,230,190,0.32); }

/* ── TODAY — DECISION QUEUE ──────────────────────────────── */
.cq-today-filters {
  display: flex; gap: 32px; padding: 16px 20px;
  border-radius: 12px; background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px; flex-wrap: wrap;
}
.cq-today-fgroup { display: flex; align-items: center; gap: 10px; }
.cq-today-flab { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
.cq-today-pills {
  display: inline-flex; padding: 3px; gap: 2px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
}
.cq-today-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  cursor: default; position: relative;
}
.cq-today-pill em {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(0,0,0,0.2); font-style: normal;
}
.cq-today-pill .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #FF6B5B; box-shadow: 0 0 6px rgba(255,107,91,0.55);
  animation: cq-pulse 1.8s ease-in-out infinite;
}
.cq-today-pill.on em { background: rgba(0,0,0,0.22); color: inherit; }
.cq-today-pill.on.b-now      { background: linear-gradient(180deg, #FF7060, #E04638); color: #1A0A08; }
.cq-today-pill.on.b-today    { background: linear-gradient(180deg, #FF8A7E, #FF6B5B); color: #1A0F0C; }
.cq-today-pill.on.b-1_3d     { background: linear-gradient(180deg, #FF8A4A, #FF6B2E); color: #1A0F00; }
.cq-today-pill.on.b-4_7d     { background: linear-gradient(180deg, #FFB347, #FF9F2E); color: #1A0F00; }
.cq-today-pill.on.b-8_14d    { background: linear-gradient(180deg, var(--teal), #00D4A3); color: #052019; }
.cq-today-pill.on.b-14d_plus { background: linear-gradient(180deg, #B0B5C0, #8088A0); color: #0A0E18; }
.cq-today-pill.on.t-apply    { background: linear-gradient(180deg, var(--teal), #00D4A3); color: #052019; }
.cq-today-pill.on.t-test     { background: linear-gradient(180deg, #B8A6FF, #8A78E0); color: #1A1330; }
.cq-today-pill.on.t-brief    { background: linear-gradient(180deg, #FFB347, #FF9F2E); color: #1A0F00; }
.cq-today-pill.on.t-watch    { background: rgba(255,255,255,0.14); color: var(--ink); }

.cq-today-rows { display: flex; flex-direction: column; gap: 8px; }
.cq-today-row {
  --td-accent: var(--teal);
  --td-fill: rgba(0,255,194,0.04);
  display: grid; grid-template-columns: 56px 1.6fr 1fr 200px;
  gap: 16px; align-items: center;
  padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, var(--td-fill), transparent 60%), rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  transition: transform 220ms ease, border-color 220ms ease;
}
.cq-today-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--td-accent); box-shadow: 0 0 18px var(--td-accent); opacity: 0.85;
}
.cq-today-row:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.12); }
.cq-today-row.r-apply { --td-accent: var(--teal); --td-fill: rgba(0,255,194,0.04); }
.cq-today-row.r-test  { --td-accent: #B8A6FF;    --td-fill: rgba(184,166,255,0.04); }
.cq-today-row.r-brief { --td-accent: #FFB347;    --td-fill: rgba(255,179,71,0.04); }

.cq-today-orb {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 28%, var(--td-fill), transparent 60%), linear-gradient(180deg, #1A1F28, #10141B);
  border: 1px solid color-mix(in srgb, var(--td-accent) 35%, transparent);
  color: var(--td-accent);
}
.cq-today-orb svg { width: 26px; height: 26px; }
.cq-today-body { min-width: 0; }
.cq-today-body b {
  display: block; font-size: 15.5px; color: var(--ink);
  letter-spacing: -0.012em; margin: 6px 0 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cq-today-type {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: color-mix(in srgb, var(--td-accent) 12%, transparent);
  color: var(--td-accent);
  border: 1px solid color-mix(in srgb, var(--td-accent) 30%, transparent);
}
.cq-today-type::before { content:''; width:5px; height:5px; border-radius:999px; background: currentColor; }
.cq-today-crumbs { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.cq-today-crumbs span {
  display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px;
  font-size: 11px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cq-today-crumbs em { font-family: var(--mono); font-style: normal; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); font-weight: 700; }
.cq-today-why { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.cq-today-runway {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--td-accent);
  background: color-mix(in srgb, var(--td-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--td-accent) 22%, transparent);
}
.cq-today-runway.is-fatigued { color: #FF8A7E; background: rgba(255,107,91,0.10); border-color: rgba(255,107,91,0.38); }

.cq-today-viz { display: grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items: center; }
.cq-today-thumb { width: 44px; height: 56px; border-radius: 9px; background: linear-gradient(135deg, rgba(255,107,91,0.35), rgba(255,255,255,0.04)); }
.cq-today-thumb[data-heat="lavender"] { background: linear-gradient(135deg, rgba(184,166,255,0.35), rgba(255,255,255,0.04)); }
.cq-today-thumb[data-heat="amber"]    { background: linear-gradient(135deg, rgba(255,179,71,0.35),  rgba(255,255,255,0.04)); }
.cq-today-spark { width: 100%; height: 30px; }
.cq-today-ring {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 999px; border: 3px solid var(--td-accent);
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-2); letter-spacing: 0.02em;
}
.cq-today-ring[data-tone="bad"] { border-color: #FF8A7E; }
.cq-today-ring[data-tone="mid"] { border-color: #FFB347; }
.cq-today-ring[data-tone="ok"]  { border-color: var(--teal); }
.cq-today-cta { display: flex; flex-direction: column; gap: 5px; }
.cq-today-cta .btn { justify-content: center; }
.cq-today-caption {
  margin-top: 20px; text-align: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  line-height: 1.5; max-width: 720px; margin-left: auto; margin-right: auto;
}

/* ── DIVERSITY GAP MAP ───────────────────────────────────── */
.cq-gap { display: grid; grid-template-columns: 220px 1fr 300px; gap: 16px; align-items: start; }
.cq-gap-controls {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: 12px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.cq-gap-ctlrow { display: flex; flex-direction: column; gap: 6px; }
.cq-gap-flab { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.cq-gap-pill {
  display: inline-block; padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; color: var(--ink-2);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  margin-right: 3px;
}
.cq-gap-pill.on {
  color: #1A1330; background: linear-gradient(180deg, #B8A6FF, #8A78E0);
  border-color: transparent; font-weight: 600;
}
.cq-gap-metric {
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  padding: 6px 10px; border-radius: 8px;
  background: rgba(0,255,194,0.05); border: 1px solid rgba(0,255,194,0.18);
}
.cq-gap-map {
  display: grid; grid-template-columns: 130px repeat(4, 1fr);
  gap: 5px; padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.cq-gap-xlab {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  letter-spacing: 0.04em; padding: 4px;
}
.cq-gap-ylab {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 4px 8px 4px 0;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  letter-spacing: 0.04em; text-align: right;
}
.cq-gap-cell {
  aspect-ratio: 1.4 / 1; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);
  padding: 8px 9px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.cq-gap-cell .ct { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.cq-gap-cell em { font-family: var(--mono); font-size: 10px; color: var(--ink-3); font-style: normal; }
.cq-gap-cell.hot {
  background: radial-gradient(120% 100% at 50% 30%, rgba(0,255,194,0.25), rgba(0,255,194,0.06) 60%, transparent 90%), rgba(0,255,194,0.06);
  border-color: rgba(0,255,194,0.32);
}
.cq-gap-cell.hot em { color: var(--teal); }
.cq-gap-cell.warm {
  background: radial-gradient(120% 100% at 50% 30%, rgba(0,255,194,0.14), rgba(0,255,194,0.03) 60%, transparent 90%), rgba(0,255,194,0.03);
  border-color: rgba(0,255,194,0.20);
}
.cq-gap-cell.under {
  background: radial-gradient(120% 100% at 50% 30%, rgba(255,107,91,0.18), rgba(255,107,91,0.04) 60%, transparent 90%), rgba(255,107,91,0.03);
  border-color: rgba(255,107,91,0.28);
}
.cq-gap-cell.under em { color: #FF8A7E; }
.cq-gap-cell.weak { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
.cq-gap-cell.empty {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 6px, transparent 6px 12px), rgba(255,255,255,0.01);
  border: 1px dashed rgba(255,255,255,0.06);
}
.cq-gap-cell.gap {
  background: radial-gradient(circle at 50% 50%, rgba(184,166,255,0.20), rgba(184,166,255,0.03) 70%, transparent 90%), rgba(184,166,255,0.04);
  border: 1px dashed rgba(184,166,255,0.50);
}
.cq-gap-cell.gap em { color: #C8B8FF; font-weight: 600; }

.cq-gap-side {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: 12px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.cq-gap-side-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }
.cq-gap-item {
  display: grid; grid-template-columns: 32px 1fr;
  gap: 10px; padding: 12px; border-radius: 10px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
.cq-gap-item-rank { font-family: var(--mono); font-size: 15px; color: #C8B8FF; font-weight: 700; }
.cq-gap-item b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.cq-gap-item em {
  display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); font-style: normal; line-height: 1.45; margin-bottom: 8px;
}
.cq-gap-item .btn { grid-column: 1 / -1; }
.cq-gap-caption {
  margin-top: 20px; text-align: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  line-height: 1.5; max-width: 780px; margin-left: auto; margin-right: auto;
}

/* ── AI TOP BRIEF ─────────────────────────────────────────── */
.cq-brief-fuse { display: grid; grid-template-columns: 260px 160px 1fr; gap: 20px; align-items: center; }
.cq-brief-ings { display: flex; flex-direction: column; gap: 8px; }
.cq-brief-ing {
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid;
  transition: transform 200ms ease;
  animation: cq-brief-flow 3.6s ease-in-out infinite;
}
.cq-brief-ing:nth-child(1) { animation-delay: 0s; }
.cq-brief-ing:nth-child(2) { animation-delay: 0.4s; }
.cq-brief-ing:nth-child(3) { animation-delay: 0.8s; }
.cq-brief-ing:nth-child(4) { animation-delay: 1.2s; }
.cq-brief-ing:nth-child(5) { animation-delay: 1.6s; }
@keyframes cq-brief-flow {
  0%, 100% { transform: translateX(0); opacity: 1; }
  30%      { transform: translateX(20px); opacity: 0.55; }
  60%      { transform: translateX(0); opacity: 1; }
}
.cq-brief-ing.t-diversity { border-left-color: #C8B8FF; }
.cq-brief-ing.t-winners   { border-left-color: var(--teal); }
.cq-brief-ing.t-audience  { border-left-color: #FF8A7E; }
.cq-brief-ing.t-realworld { border-left-color: #8FCBFF; }
.cq-brief-ing.t-fatigue   { border-left-color: #FFB347; }
.cq-brief-ing-kicker { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 3px; }
.cq-brief-ing b { display: block; font-size: 12.5px; color: var(--ink); margin-bottom: 2px; }
.cq-brief-ing em { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); font-style: normal; }

.cq-brief-orb-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.cq-brief-orb-wrap::before {
  content: ''; position: absolute; left: -30px; right: 100%; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(184,166,255,0.4));
}
.cq-brief-orb-wrap::after {
  content: ''; position: absolute; left: 100%; right: -30px; top: 50%; height: 2px;
  background: linear-gradient(90deg, rgba(184,166,255,0.4), transparent);
}
.cq-brief-orb {
  width: 96px; height: 96px; border-radius: 22px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 28%, rgba(184,166,255,0.32), transparent 60%),
    linear-gradient(180deg, rgba(184,166,255,0.14), rgba(184,166,255,0.04));
  border: 1px solid rgba(184,166,255,0.45);
  box-shadow: 0 0 40px rgba(184,166,255,0.30);
  color: #C8B8FF;
  animation: cq-brief-orb-pulse 2.4s ease-in-out infinite;
}
@keyframes cq-brief-orb-pulse {
  0%, 100% { box-shadow: 0 0 40px rgba(184,166,255,0.30), 0 0 0 0 rgba(184,166,255,0.30); }
  50%      { box-shadow: 0 0 60px rgba(184,166,255,0.45), 0 0 0 12px rgba(184,166,255,0); }
}
.cq-brief-orb svg { width: 50px; height: 50px; filter: drop-shadow(0 0 6px rgba(200,184,255,0.5)); }
.cq-brief-orb-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #C8B8FF; }

.cq-brief-out {
  padding: 18px 20px; border-radius: 14px;
  background: rgba(184,166,255,0.05); border: 1px solid rgba(184,166,255,0.28);
}
.cq-brief-out-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 12px;
}
.cq-brief-out-head span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #C8B8FF; font-weight: 700; }
.cq-brief-out-head em { font-family: var(--mono); font-size: 10px; color: var(--ink-3); font-style: normal; }
.cq-brief-out-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 14px; }
.cq-brief-out-fields > div em {
  display: block; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4);
  font-style: normal; margin-bottom: 2px;
}
.cq-brief-out-fields > div b { display: block; font-size: 12.5px; color: var(--ink); }
.cq-brief-out-foot { text-align: right; }
.cq-brief-caption {
  margin-top: 24px; text-align: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  line-height: 1.5; max-width: 720px; margin-left: auto; margin-right: auto;
}
.cq-brief-caption b { color: #C8B8FF; font-weight: 700; }

/* ── PLATFORM COVERAGE ────────────────────────────────────── */
.cq-pf-badge {
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.cq-pf-badge.live    { color: var(--teal); background: rgba(0,255,194,0.10); border: 1px solid rgba(0,255,194,0.32); }
.cq-pf-badge.roadmap { color: #C8B8FF;     background: rgba(184,166,255,0.10); border: 1px solid rgba(184,166,255,0.32); }
.cq-pf-list { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.cq-pf-list li {
  padding: 6px 12px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
  border-radius: 6px; border-left: 2px solid rgba(0,255,194,0.35);
  background: rgba(255,255,255,0.02);
}
.cq-pf-roadmap .cq-pf-list li { border-left-color: rgba(184,166,255,0.35); }
.cq-pf-list li.pending { color: var(--ink-3); border-left-color: rgba(255,179,71,0.35); }
.cq-pf-list li.pending em { font-family: var(--mono); font-size: 10.5px; color: #FFB347; font-style: normal; margin-left: 4px; }
.cq-pf.cq-pf-live { border: 1px solid rgba(0,255,194,0.25); }
.cq-pf.cq-pf-roadmap { border: 1px solid rgba(184,166,255,0.25); opacity: 0.94; }
.cq-pf-caption {
  margin-top: 20px; text-align: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  line-height: 1.5; max-width: 720px; margin-left: auto; margin-right: auto;
}

/* ── Responsive collapse ─────────────────────────────────── */
@media (max-width: 1080px) {
  .cq-readiness       { grid-template-columns: 1fr; }
  .cq-readiness-parts { grid-template-columns: 1fr 1fr; }
  .cq-breakdown-grid  { grid-template-columns: repeat(3, 1fr); }
  .cq-gap             { grid-template-columns: 1fr; }
  .cq-gap-controls    { flex-direction: row; gap: 16px; flex-wrap: wrap; }
  .cq-brief-fuse      { grid-template-columns: 1fr; text-align: center; }
  .cq-brief-orb-wrap::before,
  .cq-brief-orb-wrap::after { display: none; }
  .cq-foreplay        { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .cq-readiness-hero  { grid-template-columns: 1fr; text-align: center; }
  .cq-readiness-parts { grid-template-columns: 1fr; }
  .cq-breakdown-grid  { grid-template-columns: 1fr 1fr; }
  .cq-detail-head     { grid-template-columns: 44px 1fr; }
  .cq-detail-status   { grid-column: 1 / -1; align-items: flex-start; }
  .cq-today-row       { grid-template-columns: 44px 1fr; gap: 12px; }
  .cq-today-viz,
  .cq-today-cta       { grid-column: 1 / -1; }
  .cq-today-filters   { flex-direction: column; gap: 12px; }
  .cq-gap-map         { grid-template-columns: 90px repeat(4, 1fr); font-size: 10px; }
  .cq-brief-out-fields{ grid-template-columns: 1fr; }
  .cq-hero-pillars    { grid-template-columns: 1fr; }
  .cq-hero-stats      { grid-template-columns: 1fr; }
  .cq-foreplay        { grid-template-columns: 1fr 1fr; }
  .cq-hero-h1         { font-size: 36px; }
  .cq-hero-frame      { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Hero v2 polish — full-width layout, mock ads, animated stats
   ═══════════════════════════════════════════════════════════════ */

/* Restructured hero: copy + product frame stack vertically */
.cq-hero-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 980px) {
  .cq-hero-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* Product frame grows into the second column */
.cq-hero-frame-lg {
  min-height: 460px;
  max-width: 640px;
  width: 100%;
  margin-left: auto;
}

/* ── Stats band — full-width horizontal, animated icons ─── */
.cq-hero-statband {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
  padding: 24px 28px;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(0,255,194,0.05), transparent 55%),
    rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.cq-hero-statband::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,255,194,0.03) 30%,
    rgba(184,166,255,0.03) 60%,
    rgba(255,179,71,0.03) 100%);
  pointer-events: none;
}
.cq-stat-tile {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: center;
  padding: 8px 4px;
}
.cq-stat-tile + .cq-stat-tile { border-left: 1px solid rgba(255,255,255,0.06); padding-left: 24px; }
.cq-stat-ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(0,255,194,0.08);
  border: 1px solid rgba(0,255,194,0.28);
  color: var(--teal);
  position: relative;
}
.cq-stat-ico svg { width: 26px; height: 26px; }
.cq-stat-tile:nth-child(2) .cq-stat-ico {
  background: rgba(184,166,255,0.10);
  border-color: rgba(184,166,255,0.32);
  color: #C8B8FF;
}
.cq-stat-tile:nth-child(3) .cq-stat-ico {
  background: rgba(255,179,71,0.10);
  border-color: rgba(255,179,71,0.32);
  color: #FFB347;
}
/* Icon animations — one per tile, subtle looping */
.cq-stat-tile:nth-child(1) .cq-stat-ico { animation: cq-stat-pulse 2.6s ease-in-out infinite; }
.cq-stat-tile:nth-child(2) .cq-stat-ico { animation: cq-stat-tilt  3.2s ease-in-out infinite; }
.cq-stat-tile:nth-child(3) .cq-stat-ico { animation: cq-stat-glow  2.8s ease-in-out infinite; }
@keyframes cq-stat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,194,0.30); }
  50%      { box-shadow: 0 0 0 10px rgba(0,255,194,0);   }
}
@keyframes cq-stat-tilt {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-6deg); }
}
@keyframes cq-stat-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(255,179,71,0.15); }
  50%      { box-shadow: 0 0 22px rgba(255,179,71,0.55); }
}
/* Animated inner elements — draw/tick per icon */
.cq-stat-ico .anim-ring {
  animation: cq-stat-ring-rot 8s linear infinite;
  transform-origin: center;
}
@keyframes cq-stat-ring-rot { to { transform: rotate(360deg); } }
.cq-stat-ico .anim-count {
  animation: cq-stat-count-tick 1.6s ease-in-out infinite;
}
@keyframes cq-stat-count-tick {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.cq-stat-ico .anim-bar {
  transform-origin: bottom;
  animation: cq-stat-bar-grow 2.6s ease-in-out infinite;
}
@keyframes cq-stat-bar-grow {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1);   }
}

.cq-stat-body b {
  display: block;
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
  background: linear-gradient(180deg, #FFFFFF, #8A93A6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cq-stat-body em {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  font-style: normal;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.4;
}
@media (max-width: 720px) {
  .cq-hero-statband { grid-template-columns: 1fr; }
  .cq-stat-tile + .cq-stat-tile { border-left: 0; border-top: 1px solid rgba(255,255,255,0.06); padding-left: 4px; padding-top: 20px; margin-top: 4px; }
  .cq-stat-body b { font-size: 30px; }
}

/* ═══════════════════════════════════════════════════════════════
   Mock ad component — hypothetical brand creatives with fake
   product silhouettes, brand marks, and copy overlays
   ═══════════════════════════════════════════════════════════════ */

/* Base mock-ad tile (used in Today thumbs, Foreplay cards, Ad Detail) */
.cq-mock {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  isolation: isolate;
  background: #0E1424;
}
/* Product-shape silhouette layer */
.cq-mock-bg {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: transform 400ms cubic-bezier(0.22,1,0.36,1);
}
.cq-mock-bg svg { width: 60%; height: 60%; }
.cq-mock:hover .cq-mock-bg { transform: scale(1.06); }

/* Brand-tone variants */
.cq-mock.b-aura {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,175,150,0.35), transparent 60%),
    linear-gradient(160deg, #E9967A 0%, #C05F4A 55%, #6B2A22 100%);
}
.cq-mock.b-pulse {
  background:
    radial-gradient(circle at 70% 20%, rgba(140,220,255,0.30), transparent 60%),
    linear-gradient(160deg, #4C7EFF 0%, #2D4FCC 55%, #142268 100%);
}
.cq-mock.b-meridian {
  background:
    radial-gradient(circle at 30% 20%, rgba(220,190,120,0.28), transparent 60%),
    linear-gradient(160deg, #6E5A3A 0%, #3C2D18 55%, #1B140A 100%);
}
.cq-mock.b-glow {
  background:
    radial-gradient(circle at 70% 20%, rgba(255,220,140,0.32), transparent 60%),
    linear-gradient(160deg, #F0C674 0%, #C68420 55%, #5B3808 100%);
}
.cq-mock.b-lumen {
  background:
    radial-gradient(circle at 30% 20%, rgba(160,230,220,0.30), transparent 60%),
    linear-gradient(160deg, #4EB8A8 0%, #2C7A70 55%, #0E332F 100%);
}
.cq-mock.b-verdant {
  background:
    radial-gradient(circle at 70% 20%, rgba(180,230,150,0.30), transparent 60%),
    linear-gradient(160deg, #7BB668 0%, #3D6D2C 55%, #16290F 100%);
}

/* Grain noise overlay to simulate photography */
.cq-mock::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 40%, rgba(255,255,255,0.10) 0.5px, transparent 1px),
    radial-gradient(circle at 85% 60%, rgba(255,255,255,0.08) 0.5px, transparent 1px),
    radial-gradient(circle at 50% 90%, rgba(0,0,0,0.15) 1px, transparent 2px);
  background-size: 60px 60px, 70px 70px, 80px 80px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}
/* Bottom vignette for text readability */
.cq-mock::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

.cq-mock-brand {
  position: absolute; top: 6px; left: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FFF;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 2;
}
.cq-mock-brand .brandmark {
  width: 10px; height: 10px; border-radius: 2px;
  background: currentColor;
  opacity: 0.85;
}
.cq-mock-brand.aura     .brandmark { background: #FFD9C4; }
.cq-mock-brand.pulse    .brandmark { background: #A0C4FF; }
.cq-mock-brand.meridian .brandmark { background: #F0DAA8; }
.cq-mock-brand.glow     .brandmark { background: #FFE9BB; }
.cq-mock-brand.lumen    .brandmark { background: #B8EAE0; }
.cq-mock-brand.verdant  .brandmark { background: #D2F0BC; }

.cq-mock-copy {
  position: absolute; bottom: 5px; left: 5px; right: 5px;
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: 10px;
  color: #FFF;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  z-index: 2;
}
.cq-mock-copy em {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
}

.cq-mock-badge {
  position: absolute; top: 6px; right: 6px;
  padding: 3px 6px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  z-index: 2;
  color: #1A0F00;
}
.cq-mock-badge.sale { background: #FFB347; }
.cq-mock-badge.new  { background: var(--teal); color: #052019; }
.cq-mock-badge.hot  { background: #FF6B5B; color: #1A0A08; }

/* Larger variant for Foreplay grid — 9:16 tall cards */
.cq-fp-mock .cq-mock-copy { font-size: 15px; }
.cq-fp-mock .cq-mock-copy em { font-size: 9.5px; margin-top: 4px; }
.cq-fp-mock .cq-mock-brand { top: 12px; left: 12px; padding: 5px 9px; font-size: 10px; }
.cq-fp-mock .cq-mock-brand .brandmark { width: 12px; height: 12px; }
.cq-fp-mock .cq-mock-copy   { bottom: 44px; left: 12px; right: 12px; }
.cq-fp-mock .cq-mock-badge  { top: 12px; right: 12px; padding: 4px 9px; font-size: 9px; }
.cq-fp-mock .cq-mock-bg svg { width: 55%; height: 55%; }

/* Ad detail thumb — a bit wider, richer */
.cq-detail-thumb.cq-mock {
  width: 60px; height: 60px; border-radius: 12px;
  padding: 0;
  border: 1px solid rgba(255,107,91,0.32);
}
.cq-detail-thumb.cq-mock .cq-mock-copy { font-size: 8px; bottom: 3px; left: 3px; right: 3px; }
.cq-detail-thumb.cq-mock .cq-mock-copy em { font-size: 6px; margin-top: 1px; }
.cq-detail-thumb.cq-mock .cq-mock-brand,
.cq-detail-thumb.cq-mock .cq-mock-badge { display: none; }

/* ═══════════════════════════════════════════════════════════════
   Hero polish v2 — lifestyle thumbs, no title truncation, right-
   sized hero CTAs. Overrides only inside .cq-hero-v2 so the same
   .cq-today-row + .cq-mock tokens keep their default treatment
   further down the page.
   ═══════════════════════════════════════════════════════════════ */

/* Right-size the hero primary CTAs — big buttons felt heavy next to
   the pillar chips. Bump down to normal padding + weight. */
.cq-hero-v2 .iq-cta-row .btn.btn-lg {
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: 10px;
}
.cq-hero-v2 .iq-cta-row .btn.btn-primary {
  box-shadow: 0 8px 20px -8px rgba(0,255,194,0.45);
}
.cq-hero-v2 .iq-cta-row .btn.btn-primary:hover {
  box-shadow: 0 12px 28px -10px rgba(0,255,194,0.60);
}

/* Compact hero product-frame rows — different layout from the full
   Today row rendered lower on the page. Emphasis on the ad name +
   the verb + the runway pill; verb is delivered by orb + icon-only
   CTA on the right. Sparkline + ring dropped for less clutter. */
.cq-hero-frame .cq-today-row {
  grid-template-columns: 40px 44px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
}
.cq-hero-frame .cq-today-orb {
  width: 40px; height: 40px; border-radius: 11px;
}
.cq-hero-frame .cq-today-orb svg { width: 20px; height: 20px; }
.cq-hero-frame .cq-today-body b {
  font-size: 13px;
  line-height: 1.25;
  margin: 4px 0 4px;
  white-space: normal;         /* allow 2-line wrap so nothing truncates */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cq-hero-frame .cq-today-type { padding: 1px 8px; font-size: 8.5px; }
.cq-hero-frame .cq-today-type::before { width: 4px; height: 4px; }
.cq-hero-frame .cq-today-runway {
  padding: 3px 8px;
  font-size: 8.5px;
  letter-spacing: 0.12em;
}
/* Drop the sparkline + ring — keep only the mock thumb in the middle */
.cq-hero-frame .cq-today-viz {
  display: block;
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  width: 44px;
  height: 60px;
  align-self: stretch;
}
.cq-hero-frame .cq-today-viz .cq-today-thumb {
  width: 44px; height: 60px; border-radius: 9px;
}
.cq-hero-frame .cq-today-viz .cq-today-spark,
.cq-hero-frame .cq-today-viz .cq-today-ring { display: none; }
/* Order body after the thumb via grid placement */
.cq-hero-frame .cq-today-body {
  grid-column: 3;
  grid-row: 1;
}
.cq-hero-frame .cq-today-cta {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  flex-direction: row;
  gap: 4px;
}
.cq-hero-frame .cq-today-cta .btn {
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════
   Lifestyle-photography mock ads — richer gradients, no visible
   product outline. Depth via layered radial gradients + grain.
   ═════════════════════════════════════════════════════════════ */

/* Real lifestyle photography — Unsplash portraits downloaded to
   /public/mock-ads/. Each brand gets a photo that fits its category:
     aura     → hair / skincare (woman with long hair)
     pulse    → water bottle (hydration)
     meridian → teal leather bag (accessories)
     lumen    → wellness / spa scene */
.cq-mock.b-aura {
  background: #2A1811 url('/mock-ads/aura.jpg') center/cover no-repeat;
}
.cq-mock.b-pulse {
  background: #0E1A48 url('/mock-ads/pulse.jpg') center/cover no-repeat;
}
.cq-mock.b-meridian {
  background: #14322D url('/mock-ads/meridian.jpg') center/cover no-repeat;
}
.cq-mock.b-lumen {
  background: #E8D4C4 url('/mock-ads/lumen.jpg') center/cover no-repeat;
}
/* Reuse the same photos for extra brand variants when we need more
   cards than we have images — hue-rotate + blend to differentiate. */
.cq-mock.b-glow {
  background: #2A1802 url('/mock-ads/aura.jpg') center/cover no-repeat;
  filter: hue-rotate(-15deg) saturate(1.1);
}
.cq-mock.b-verdant {
  background: #0A140A url('/mock-ads/lumen.jpg') center/cover no-repeat;
  filter: hue-rotate(60deg) saturate(0.95);
}
/* Stronger, more photographic vignette */
.cq-mock::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 20%, transparent 60%, rgba(0,0,0,0.65) 100%),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.28) 100%);
}
/* Softer, film-grain noise */
.cq-mock::before {
  background-image:
    radial-gradient(circle at 15% 40%, rgba(255,255,255,0.12) 0.4px, transparent 0.9px),
    radial-gradient(circle at 42% 68%, rgba(255,255,255,0.08) 0.4px, transparent 0.9px),
    radial-gradient(circle at 75% 32%, rgba(255,255,255,0.10) 0.4px, transparent 0.9px),
    radial-gradient(circle at 60% 90%, rgba(0,0,0,0.14) 0.6px, transparent 1.2px);
  background-size: 50px 60px, 70px 80px, 65px 75px, 90px 90px;
  opacity: 0.55;
}

/* Hide the product-shape SVG on tiny hero thumbs — too small to read,
   the lifestyle gradient carries the mood. Copy stays. */
.cq-hero-frame .cq-mock .cq-mock-bg { display: none; }
/* Tiny hero-thumb copy — brand mark + one-liner */
.cq-hero-frame .cq-mock .cq-mock-copy {
  bottom: 4px; left: 5px; right: 5px;
  font-size: 8.5px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cq-hero-frame .cq-mock .cq-mock-copy em {
  font-size: 6.5px;
  margin-top: 1px;
  letter-spacing: 0.14em;
}
.cq-hero-frame .cq-mock .cq-mock-brand,
.cq-hero-frame .cq-mock .cq-mock-badge { display: none; }
/* Optional brand corner mark on hero thumbs */
.cq-hero-frame .cq-mock-brandmark {
  position: absolute;
  top: 5px; left: 5px;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,0.90);
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

/* Photos now paint the mood — drop the SVG silhouette overlays that
   would sit on top of real portraits and look strange. */
.cq-fp-mock .cq-mock-bg { display: none; }

/* Foreplay card — larger, richer brand mark */
.cq-fp-mock .cq-mock-brand {
  top: 12px; left: 12px;
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
}
.cq-fp-mock .cq-mock-copy {
  font-size: 18px;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.70);
}
.cq-fp-mock .cq-mock-copy em {
  font-size: 9.5px;
  margin-top: 6px;
  opacity: 0.90;
}

/* ═══════════════════════════════════════════════════════════════
   Hero product-frame — layered analytical UI
   Adds score badges pinned to thumbs, colour-coded dimension tag
   pills below the title, mini confidence ring column, and a
   Readiness Score banner at the top of the frame.
   ═══════════════════════════════════════════════════════════════ */

/* Row layout — orb dropped (redundant with CTA icon), room for
   thumb + body + mini confidence ring + verb CTA button */
.cq-hero-frame .cq-today-row {
  grid-template-columns: 46px 1fr 36px auto;
  gap: 12px;
  padding: 11px 12px;
}
.cq-hero-frame .cq-today-orb { display: none; }
.cq-hero-frame .cq-today-viz {
  grid-column: 1;
  grid-row: 1;
  width: 46px;
  height: 62px;
}
.cq-hero-frame .cq-today-viz .cq-today-thumb {
  width: 46px; height: 62px;
  border-radius: 9px;
  position: relative;
}
.cq-hero-frame .cq-today-body { grid-column: 2; grid-row: 1; }
.cq-hero-frame .cq-hero-mini-ring { grid-column: 3; grid-row: 1; }
.cq-hero-frame .cq-today-cta  { grid-column: 4; grid-row: 1; }

/* Score badge — small circular chip pinned to thumb top-right */
.cq-thumb-score {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid; place-items: center;
  font: 800 10.5px 'Geist', sans-serif;
  letter-spacing: -0.01em;
  z-index: 3;
  border: 2px solid #0E1424;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.cq-thumb-score.bad { background: linear-gradient(180deg, #FF8A7E, #FF6B5B); color: #1A0A08; }
.cq-thumb-score.mid { background: linear-gradient(180deg, #FFB347, #FF9F2E); color: #1A0F00; }
.cq-thumb-score.ok  { background: linear-gradient(180deg, var(--teal), #00D4A3); color: #052019; }
.cq-thumb-score.lav { background: linear-gradient(180deg, #B8A6FF, #8A78E0); color: #1A1330; }

/* Tag pills strip — under the title. Small mono chips, 2–3 per row */
.cq-hero-tags {
  display: flex; gap: 4px; flex-wrap: nowrap;
  margin-top: 4px;
  overflow: hidden;
}
.cq-hero-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
}
.cq-hero-tag .dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
  flex-shrink: 0;
}
.cq-hero-tag.t-hook     { color: var(--teal); background: rgba(0,255,194,0.08);   border-color: rgba(0,255,194,0.32);   }
.cq-hero-tag.t-tone     { color: #FFB347; background: rgba(255,179,71,0.10);  border-color: rgba(255,179,71,0.32);  }
.cq-hero-tag.t-format   { color: #8FCBFF; background: rgba(143,203,255,0.10); border-color: rgba(143,203,255,0.32); }
.cq-hero-tag.t-audience { color: #FF8A7E; background: rgba(255,138,126,0.10); border-color: rgba(255,138,126,0.32); }
.cq-hero-tag.t-angle    { color: #C8B8FF; background: rgba(184,166,255,0.10); border-color: rgba(184,166,255,0.32); }
.cq-hero-tag.t-age      { color: #FF8A7E; background: rgba(255,138,126,0.08); border-color: rgba(255,138,126,0.28); }
.cq-hero-tag.t-lift     { color: var(--teal); background: rgba(0,255,194,0.08);   border-color: rgba(0,255,194,0.32);   }

/* Mini confidence ring — 32px SVG ring with score number inside */
.cq-hero-mini-ring {
  width: 34px; height: 34px;
  position: relative;
  align-self: center;
  justify-self: center;
}
.cq-hero-mini-ring svg { width: 100%; height: 100%; }
.cq-hero-mini-ring .val {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 800 10.5px 'Geist', sans-serif;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cq-hero-mini-ring .lab {
  position: absolute; left: 50%; bottom: -12px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}

/* Readiness banner in the frame chrome — hero-only "north star" */
.cq-hero-frame-ready {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(0,255,194,0.06), transparent 55%),
    rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cq-hero-ready-ring {
  width: 38px; height: 38px;
  position: relative;
  flex-shrink: 0;
}
.cq-hero-ready-ring svg { width: 100%; height: 100%; }
.cq-hero-ready-ring .val {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 800 12px 'Geist', sans-serif;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cq-hero-ready-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cq-hero-ready-body .kicker {
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}
.cq-hero-ready-body .val {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 700;
}
.cq-hero-ready-body em {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-style: normal;
  text-transform: uppercase;
}
.cq-hero-ready-parts {
  display: flex; gap: 3px; align-items: center;
  flex-shrink: 0;
}
.cq-hero-ready-parts span {
  width: 22px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.cq-hero-ready-parts span.ok  { background: linear-gradient(90deg, var(--teal), #00D4A3); }
.cq-hero-ready-parts span.mid { background: linear-gradient(90deg, #FFB347, #FF9F2E); }
.cq-hero-ready-parts span.bad { background: linear-gradient(90deg, #FF8A7E, #FF6B5B); }

@media (max-width: 720px) {
  .cq-hero-frame .cq-today-row {
    grid-template-columns: 36px 44px 1fr auto;
    gap: 8px;
  }
  .cq-hero-frame .cq-hero-mini-ring { display: none; }
  .cq-hero-tags { flex-wrap: wrap; }
}

/* Compact filter bar in the hero product frame + AI Brief mini CTA */
.cq-hero-frame .cq-today-filters {
  padding: 8px 12px !important;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cq-hero-frame .cq-today-fgroup { gap: 6px; }
.cq-hero-frame .cq-today-flab {
  font-size: 8.5px !important;
  letter-spacing: 0.16em !important;
}
.cq-hero-frame .cq-today-pill {
  padding: 3px 9px;
  font-size: 10px;
  gap: 4px;
}
.cq-hero-frame .cq-today-pill em {
  font-size: 8.5px;
  padding: 0 5px;
  border-radius: 999px;
}
.cq-hero-frame .cq-today-pill .dot { width: 5px; height: 5px; }

/* AI Brief generator mini-CTA — pinned to the right of the filter bar */
.cq-hero-aibrief {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #B8A6FF, #8A78E0);
  color: #1A1330;
  font: 700 10px 'Geist', sans-serif;
  letter-spacing: -0.005em;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(184,166,255,0.55),
              0 0 0 1px rgba(255,255,255,0.20) inset;
  transition: transform 180ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 180ms cubic-bezier(0.22,1,0.36,1);
}
.cq-hero-aibrief:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(184,166,255,0.70),
              0 0 0 1px rgba(255,255,255,0.24) inset;
}
.cq-hero-aibrief svg {
  width: 12px; height: 12px;
  animation: cq-hero-aibrief-spark 2s ease-in-out infinite;
}
@keyframes cq-hero-aibrief-spark {
  0%, 100% { opacity: 0.85; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(8deg); }
}

/* ═══════════════════════════════════════════════════════════════
   Section-head centered stack — title on top, body below, both
   centered. Body is allowed wider than the default 640px so long
   paragraphs use the page width instead of wrapping too early.
   ═══════════════════════════════════════════════════════════════ */
.section-head.split {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: none;
  margin-bottom: 44px;
}
.section-head.split > * { max-width: 900px; }
.section-head.split .section-title { margin: 0; max-width: 1000px; }
.section-head.split .section-sub  { margin: 0; max-width: 820px; padding-bottom: 0; }
.section-head.split .iq-chip { margin-bottom: 6px; }
@media (max-width: 720px) {
  .section-head.split { gap: 14px; margin-bottom: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   Andromeda Readiness v2 — bigger animated ring + horizontal strip
   Removes the whitespace-at-bottom problem the 2×3 grid caused.
   ═══════════════════════════════════════════════════════════════ */

.cq-readiness-hero-v2 {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 44px;
  align-items: center;
  padding: 36px 40px;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(0,255,194,0.09), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(184,166,255,0.06), transparent 60%),
    rgba(255,255,255,0.02);
  border: 1px solid rgba(0,255,194,0.20);
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}
.cq-readiness-hero-v2::before {
  content: '';
  position: absolute;
  top: -60%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(0,255,194,0.12), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  animation: cq-readiness-glow 18s ease-in-out infinite;
}
@keyframes cq-readiness-glow {
  0%, 100% { transform: translate(0,0) scale(1); opacity: 0.85; }
  50%      { transform: translate(-30px, 20px) scale(1.15); opacity: 1; }
}

/* Big score ring — 240px, animated stroke + rotating tick marks */
.cq-ring-big {
  width: 240px; height: 240px;
  position: relative;
  flex-shrink: 0;
}
.cq-ring-big svg { width: 100%; height: 100%; overflow: visible; }
.cq-ring-big .core-num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: 80px;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #FFFFFF, #B8FFE8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-top: 10px;
}
.cq-ring-big .core-lab {
  position: absolute; left: 50%; bottom: 62px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
  white-space: nowrap;
}
.cq-ring-big .ring-fill {
  stroke-dasharray: 566;    /* 2πr where r=90 */
  stroke-dashoffset: 566;
  animation: cq-ring-fill 1.8s cubic-bezier(0.22,1,0.36,1) 200ms forwards;
}
@keyframes cq-ring-fill {
  to { stroke-dashoffset: 215; }  /* 62% shown (score of 62) */
}
.cq-ring-big .ring-ticks {
  transform-origin: center;
  animation: cq-ring-tick-rotate 40s linear infinite;
}
@keyframes cq-ring-tick-rotate { to { transform: rotate(360deg); } }
.cq-ring-big .ring-pulse {
  transform-origin: center;
  animation: cq-ring-pulse 2.4s ease-in-out infinite;
  transform-box: fill-box;
}
@keyframes cq-ring-pulse {
  0%, 100% { opacity: 0.20; transform: scale(0.98); }
  50%      { opacity: 0.55; transform: scale(1.04); }
}

/* Readiness lede — cleaner spacing */
.cq-readiness-hero-v2 .cq-readiness-lede { position: relative; z-index: 1; }
.cq-readiness-hero-v2 .cq-readiness-lede h3 {
  margin: 6px 0 10px;
  font-family: 'Geist', sans-serif;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cq-readiness-hero-v2 .cq-readiness-lede p {
  margin: 0 0 16px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.cq-readiness-hero-v2 .cq-readiness-bands { gap: 10px; }

/* 5-component horizontal strip — fills full width, no empty cells */
.cq-readiness-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.cq-partv2 {
  --part-accent: var(--teal);
  padding: 22px 20px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 3px solid var(--part-accent);
  transition: all 250ms cubic-bezier(0.22,1,0.36,1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
}
.cq-partv2:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--part-accent) 35%, transparent);
  box-shadow: 0 16px 32px -14px rgba(0,0,0,0.55);
}
.cq-partv2::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 100%;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--part-accent) 12%, transparent), transparent 55%);
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 250ms ease;
}
.cq-partv2:hover::before { opacity: 0.7; }
.cq-partv2.t-diversity { --part-accent: #C8B8FF; }
.cq-partv2.t-fatigue   { --part-accent: #FF8A7E; }
.cq-partv2.t-format    { --part-accent: #8FCBFF; }
.cq-partv2.t-refresh   { --part-accent: #FFB347; }
.cq-partv2.t-signal    { --part-accent: var(--teal); }

/* Header row — icon tile + weight num */
.cq-partv2-head {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.cq-partv2-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--part-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--part-accent) 30%, transparent);
  color: var(--part-accent);
  flex-shrink: 0;
}
.cq-partv2-ico svg { width: 22px; height: 22px; }
.cq-partv2-weight {
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--part-accent);
}

.cq-partv2-title { position: relative; z-index: 1; }
.cq-partv2-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.cq-partv2-title h4 {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.cq-partv2 p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* Fill bar at the bottom */
.cq-partv2-bar {
  margin-top: auto;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.cq-partv2-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--part-accent), color-mix(in srgb, var(--part-accent) 80%, #000));
  box-shadow: 0 0 8px color-mix(in srgb, var(--part-accent) 55%, transparent);
  animation: cq-partv2-fill 1.4s cubic-bezier(0.22,1,0.36,1) both;
  transform-origin: left;
}
@keyframes cq-partv2-fill {
  from { transform: scaleX(0); }
}

/* Icon animations — one signature move per component */
.cq-icon-cells rect,
.cq-icon-cells circle {
  transform-origin: center;
  animation: cq-cell-blink 3s ease-in-out infinite;
  transform-box: fill-box;
}
.cq-icon-cells rect:nth-child(1) { animation-delay: 0s; }
.cq-icon-cells rect:nth-child(2) { animation-delay: 0.4s; }
.cq-icon-cells rect:nth-child(3) { animation-delay: 0.8s; }
.cq-icon-cells rect:nth-child(4) { animation-delay: 1.2s; }
@keyframes cq-cell-blink {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

.cq-icon-wave {
  animation: cq-wave-drift 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes cq-wave-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

.cq-icon-shapes > * {
  transform-origin: center;
  animation: cq-shape-float 4s ease-in-out infinite;
  transform-box: fill-box;
}
.cq-icon-shapes > *:nth-child(1) { animation-delay: 0s; }
.cq-icon-shapes > *:nth-child(2) { animation-delay: 0.5s; }
.cq-icon-shapes > *:nth-child(3) { animation-delay: 1s; }
@keyframes cq-shape-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

.cq-icon-refresh {
  transform-origin: center;
  animation: cq-refresh-spin 5s linear infinite;
  transform-box: fill-box;
}
@keyframes cq-refresh-spin { to { transform: rotate(360deg); } }

.cq-icon-bars rect {
  transform-origin: bottom center;
  animation: cq-signal-grow 2.4s ease-in-out infinite;
  transform-box: fill-box;
}
.cq-icon-bars rect:nth-child(1) { animation-delay: 0s; }
.cq-icon-bars rect:nth-child(2) { animation-delay: 0.2s; }
.cq-icon-bars rect:nth-child(3) { animation-delay: 0.4s; }
.cq-icon-bars rect:nth-child(4) { animation-delay: 0.6s; }
@keyframes cq-signal-grow {
  0%, 100% { transform: scaleY(0.55); }
  50%      { transform: scaleY(1); }
}

@media (max-width: 1080px) {
  .cq-readiness-hero-v2 { grid-template-columns: 1fr; text-align: center; padding: 28px 24px; }
  .cq-readiness-hero-v2 .cq-ring-big { justify-self: center; }
  .cq-readiness-hero-v2 .cq-readiness-bands { justify-content: center; }
  .cq-readiness-strip { grid-template-columns: repeat(2, 1fr); }
  .cq-readiness-strip .cq-partv2:nth-child(5) { grid-column: 1 / -1; min-height: auto; }
}
@media (max-width: 720px) {
  .cq-readiness-strip { grid-template-columns: 1fr; }
  .cq-readiness-strip .cq-partv2:nth-child(5) { grid-column: auto; }
  .cq-ring-big { width: 200px; height: 200px; }
  .cq-ring-big .core-num { font-size: 66px; }
}

/* ═══════════════════════════════════════════════════════════════
   9-signal hub-and-spoke — 9 satellites transmit into a central
   Creative IQ orb. Orb flips periodically to reveal the fatigue
   score + runway prediction (the payoff of the transmission).
   ═══════════════════════════════════════════════════════════════ */

.cq-signals-hub {
  position: relative;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 5 / 4;
  margin: 0 auto;
  perspective: 1200px;
}
.cq-hub-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.cq-hub-spoke {
  stroke-linecap: round;
  animation: cq-hub-spoke-pulse 3.6s ease-in-out infinite;
}
@keyframes cq-hub-spoke-pulse {
  0%, 100% { stroke-opacity: 0.18; }
  50%      { stroke-opacity: 0.45; }
}

/* Central orb — flips periodically to reveal fatigue score */
.cq-hub-orb {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 160px; height: 160px;
  transform-style: preserve-3d;
  animation: cq-hub-flip 9s cubic-bezier(0.55, 0.06, 0.42, 1.02) infinite;
  z-index: 2;
}
@keyframes cq-hub-flip {
  0%   { transform: translate(-50%, -50%) rotateY(0deg); }
  38%  { transform: translate(-50%, -50%) rotateY(0deg); }
  50%  { transform: translate(-50%, -50%) rotateY(180deg); }
  88%  { transform: translate(-50%, -50%) rotateY(180deg); }
  100% { transform: translate(-50%, -50%) rotateY(360deg); }
}
.cq-hub-face {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 20px;
  text-align: center;
}
.cq-hub-face.front {
  background:
    radial-gradient(circle at 30% 28%, rgba(0,255,194,0.32), transparent 60%),
    radial-gradient(circle at 65% 72%, rgba(184,166,255,0.22), transparent 60%),
    #0A0F1D;
  border: 1px solid rgba(0,255,194,0.45);
  box-shadow: 0 0 50px rgba(0,255,194,0.35),
              0 0 100px rgba(184,166,255,0.18);
  animation: cq-hub-front-glow 3s ease-in-out infinite;
}
@keyframes cq-hub-front-glow {
  0%, 100% { box-shadow: 0 0 50px rgba(0,255,194,0.35), 0 0 100px rgba(184,166,255,0.18); }
  50%      { box-shadow: 0 0 70px rgba(0,255,194,0.55), 0 0 130px rgba(184,166,255,0.28); }
}
.cq-hub-face.back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,107,91,0.30), transparent 60%),
    radial-gradient(circle at 65% 72%, rgba(255,179,71,0.20), transparent 60%),
    #1A0A08;
  border: 1px solid rgba(255,107,91,0.55);
  box-shadow: 0 0 50px rgba(255,107,91,0.35),
              0 0 100px rgba(255,179,71,0.15);
}

/* Front-face content — Creative IQ mark */
.cq-hub-face.front .mark {
  color: #C8FFEE;
  width: 46px; height: 46px;
  filter: drop-shadow(0 0 8px rgba(0,255,194,0.55));
  margin-bottom: 6px;
}
.cq-hub-face.front .kicker {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}
.cq-hub-face.front b {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 700;
  margin-top: 2px;
}
.cq-hub-face.front em {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--ink-3);
  font-style: normal;
  letter-spacing: 0.14em;
  margin-top: 3px;
}

/* Back-face content — fatigue score + runway */
.cq-hub-face.back .kicker {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #FF8A7E;
  font-weight: 700;
  margin-bottom: 4px;
}
.cq-hub-face.back .num {
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #FF8A7E;
  text-shadow: 0 0 20px rgba(255,107,91,0.55);
}
.cq-hub-face.back .runway {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--ink);
  margin-top: 8px;
  font-weight: 700;
}
.cq-hub-face.back .runway b { color: #FFB347; }
.cq-hub-face.back em {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--ink-3);
  font-style: normal;
  letter-spacing: 0.14em;
  margin-top: 3px;
}

/* 9 satellite tiles — positioned around the orb */
.cq-hub-sat {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(14,20,36,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-width: 108px;
  transition: transform 250ms cubic-bezier(0.22,1,0.36,1), border-color 250ms ease;
  z-index: 3;
  animation: cq-hub-sat-in 700ms cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes cq-hub-sat-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.cq-hub-sat:hover {
  border-color: color-mix(in srgb, var(--tone) 45%, transparent);
  z-index: 4;
}
.cq-hub-sat .ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent);
  flex-shrink: 0;
}
.cq-hub-sat .ico svg { width: 17px; height: 17px; }
.cq-hub-sat b {
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.cq-hub-sat em {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--tone);
  font-style: normal;
  letter-spacing: 0.08em;
  font-weight: 700;
}
/* Faint outward-facing tone ring on each satellite */
.cq-hub-sat::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 15px;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone) 22%, transparent), transparent 70%);
  filter: blur(6px);
  z-index: -1;
  opacity: 0.6;
}

/* Below-graphic caption — small honest note */
.cq-hub-caption {
  text-align: center;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  line-height: 1.5;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.cq-hub-caption b { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
  .cq-signals-hub {
    aspect-ratio: 4 / 5;
    max-width: 560px;
  }
  .cq-hub-orb {
    width: 130px; height: 130px;
  }
  .cq-hub-face.back .num { font-size: 44px; }
  .cq-hub-sat {
    min-width: 92px;
    padding: 8px 10px;
  }
  .cq-hub-sat b { font-size: 10px; }
  .cq-hub-sat em { font-size: 9px; }
  .cq-hub-sat .ico { width: 26px; height: 26px; }
  .cq-hub-sat .ico svg { width: 14px; height: 14px; }
}
@media (max-width: 560px) {
  .cq-signals-hub {
    aspect-ratio: 3 / 4;
    max-width: 400px;
  }
  .cq-hub-orb { width: 100px; height: 100px; }
  .cq-hub-face.back .num { font-size: 34px; }
  .cq-hub-face.front .mark { width: 32px; height: 32px; }
  .cq-hub-sat { min-width: 78px; padding: 6px 8px; }
  .cq-hub-sat b { font-size: 9px; }
  .cq-hub-sat em { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Platform coverage v2 — icons, coming-soon pills, CTA buttons
   Overrides the older .cq-pf styles.
   ═══════════════════════════════════════════════════════════════ */

.cq-pf {
  padding: 24px 24px 22px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  gap: 14px;
  transition: transform 250ms cubic-bezier(0.22,1,0.36,1), border-color 250ms ease;
}
.cq-pf:hover { transform: translateY(-4px); }

/* Header: icon + platform name (inline) with badge pinned to the right */
.cq-pf-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
}
.cq-pf-ico {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ink);
  flex-shrink: 0;
}
.cq-pf-ico svg { width: 24px; height: 24px; }
.cq-pf-ico-meta    { background: rgba(24,119,242,0.14); border-color: rgba(24,119,242,0.32); color: #4A9AFF; }
.cq-pf-ico-tiktok  { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #FFFFFF; }
.cq-pf-ico-youtube { background: rgba(255,60,60,0.12);  border-color: rgba(255,60,60,0.32);  color: #FF4E4E; }

.cq-pf-name {
  flex: 1; min-width: 0;
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Badges — Live has a pulsing dot; Coming soon is lavender static */
.cq-pf-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: fit-content;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}
.cq-pf-badge.live {
  color: var(--teal);
  background: rgba(0,255,194,0.10);
  border: 1px solid rgba(0,255,194,0.32);
}
.cq-pf-badge.live .dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 6px var(--teal);
  animation: cq-pulse 1.6s ease-in-out infinite;
}
.cq-pf-badge.soon {
  color: #C8B8FF;
  background: rgba(184,166,255,0.10);
  border: 1px solid rgba(184,166,255,0.32);
}

/* Features list — cleaner spacing */
.cq-pf-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 auto;
  display: flex; flex-direction: column;
  gap: 6px;
}
.cq-pf-list li {
  position: relative;
  padding: 8px 12px 8px 30px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.cq-pf-list li::before {
  content: '';
  position: absolute;
  left: 12px; top: 50%;
  width: 6px; height: 6px; border-radius: 999px;
  transform: translateY(-50%);
  background: var(--teal);
  box-shadow: 0 0 6px var(--teal);
}
.cq-pf-roadmap .cq-pf-list li::before {
  background: #B8A6FF;
  box-shadow: 0 0 6px #B8A6FF;
}

/* Footer — CTA + tiny helper note (was too big before) */
.cq-pf-foot {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.cq-pf-foot .btn { align-self: stretch; justify-content: center; }
.cq-pf-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* Live card gets an accent glow */
.cq-pf.cq-pf-live {
  border-color: rgba(0,255,194,0.28);
  box-shadow: 0 12px 30px -18px rgba(0,255,194,0.35);
}
.cq-pf.cq-pf-live:hover { border-color: rgba(0,255,194,0.45); }
.cq-pf.cq-pf-roadmap {
  border-color: rgba(184,166,255,0.20);
}
.cq-pf.cq-pf-roadmap:hover { border-color: rgba(184,166,255,0.35); }

/* ═══════════════════════════════════════════════════════════════
   Creative IQ page — comprehensive mobile responsive overrides
   ═══════════════════════════════════════════════════════════════ */

/* Hero can grow tall enough — background blobs stay clipped via
   the ::before/::after positioning, not overflow:hidden. */
.cq-hero-v2 { overflow: visible !important; }
.cq-hero-v2::before, .cq-hero-v2::after {
  z-index: 0;
  /* keep the drift blobs behind everything */
}
/* Prevent any accidental text truncation on the hero sub */
.cq-hero-sub { max-width: 640px; }
.cq-hero-lead { min-width: 0; }

@media (max-width: 980px) {
  /* Hero: stack cleanly, shrink type + product frame */
  .cq-hero-v2 { padding: 56px 0 68px !important; }
  .cq-hero-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cq-hero-h1 { font-size: clamp(30px, 8vw, 44px) !important; }
  .cq-hero-sub { font-size: 15.5px !important; line-height: 1.55 !important; max-width: none !important; }
  .cq-hero-pillars { grid-template-columns: 1fr 1fr !important; max-width: none !important; }
  .cq-hero-frame { transform: none !important; max-width: 560px; margin: 0 auto !important; }
  .cq-hero-frame:hover { transform: none !important; }
  .cq-hero-statband { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 18px 20px !important; }
  .cq-hero-statband .cq-stat-tile:nth-child(3) { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 16px !important; padding-left: 4px !important; margin-top: 4px !important; }
  .cq-hero-frame .cq-hero-mini-ring { display: none; }
  .cq-hero-frame .cq-today-row { grid-template-columns: 44px 1fr auto !important; gap: 10px !important; }
  .cq-hero-tags { display: none; }
  .cq-hero-frame-ready { padding: 8px 10px !important; }
  .cq-hero-frame-ready .cq-hero-ready-body { min-width: 0; }
  .cq-hero-frame-ready .cq-hero-ready-body em { display: none; }
  .cq-hero-frame-ready .cq-hero-ready-parts { display: none; }
}

@media (max-width: 640px) {
  /* Hero even tighter */
  .cq-hero-v2 { padding: 44px 0 56px !important; }
  .cq-hero-h1 { font-size: 28px !important; letter-spacing: -0.02em !important; }
  .cq-hero-sub { font-size: 14.5px !important; }
  .cq-hero-pillars { grid-template-columns: 1fr !important; }
  .cq-hero-eyebrow { font-size: 10px !important; padding: 4px 10px !important; }
  .cq-hero-statband { grid-template-columns: 1fr !important; padding: 14px 16px !important; }
  .cq-hero-statband .cq-stat-tile { grid-template-columns: 44px 1fr !important; gap: 12px !important; padding: 6px 2px !important; }
  .cq-hero-statband .cq-stat-tile + .cq-stat-tile { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.06); padding-left: 2px !important; padding-top: 14px !important; margin-top: 4px !important; }
  .cq-hero-statband .cq-stat-ico { width: 44px !important; height: 44px !important; }
  .cq-hero-statband .cq-stat-ico svg { width: 22px !important; height: 22px !important; }
  .cq-hero-statband .cq-stat-body b { font-size: 24px !important; margin-bottom: 3px !important; }
  .cq-hero-statband .cq-stat-body em { font-size: 10px !important; }
  .iq-cta-row { flex-direction: column; align-items: stretch !important; gap: 8px !important; }
  .cq-hero-v2 .iq-cta-row .btn.btn-lg { padding: 12px 16px !important; font-size: 13px !important; text-align: center; }

  /* Product frame — drastically simpler on phone */
  .cq-hero-frame { max-width: 100%; border-radius: 14px !important; }
  .cq-hero-frame-body { padding: 10px !important; }
  .cq-hero-frame .cq-today-filters { padding: 6px 8px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .cq-hero-frame .cq-today-fgroup { flex-wrap: wrap; }
  .cq-hero-frame .cq-today-pills .cq-today-pill { font-size: 9.5px !important; padding: 3px 7px !important; }
  .cq-hero-frame .cq-today-row { grid-template-columns: 42px 1fr 32px !important; padding: 10px !important; gap: 8px !important; }
  .cq-hero-frame .cq-today-viz { width: 42px !important; height: 56px !important; }
  .cq-hero-frame .cq-today-viz .cq-today-thumb { width: 42px !important; height: 56px !important; }
  .cq-hero-frame .cq-today-body b { font-size: 12px !important; -webkit-line-clamp: 2 !important; }
  .cq-hero-frame .cq-today-cta .btn { padding: 5px 8px !important; font-size: 10.5px !important; }
  .cq-hero-frame-ready { padding: 6px 10px !important; gap: 8px !important; }
  .cq-hero-frame-ready .cq-hero-ready-ring { width: 30px !important; height: 30px !important; }
  .cq-hero-frame-ready .cq-hero-ready-body .val { font-size: 11.5px !important; }
  .cq-hero-frame-ready .cq-hero-ready-body .kicker { font-size: 8px !important; }
  .cq-hero-aibrief { padding: 4px 9px !important; font-size: 9.5px !important; }
  .cq-hero-aibrief svg { width: 10px !important; height: 10px !important; }

  /* Marquee — same but tighter */
  .cq-marquee { padding: 20px 0 !important; }
  .cq-marquee-lab { font-size: 9.5px !important; letter-spacing: 0.16em !important; padding: 0 20px; }
  .cq-marquee-item { font-size: 16px !important; }

  /* Foreplay creative library grid — 2 up on mobile so cards stay square */
  .cq-foreplay { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .cq-fp-mock .cq-mock-copy { font-size: 13px !important; }
  .cq-fp-mock .cq-mock-brand { font-size: 8px !important; padding: 3px 6px !important; }
  .cq-fp-mock .cq-mock-badge { font-size: 8px !important; padding: 3px 6px !important; }
  .cq-fp-mock .cq-fp-meta b { font-size: 11px !important; }
  .cq-fp-mock .cq-fp-meta-row { font-size: 9.5px !important; }

  /* Section paddings tighter */
  .sp-section { padding: 44px 0 !important; }
  .sp-section .wrap { padding: 0 20px !important; }
  .section-title { font-size: clamp(26px, 7vw, 36px) !important; }

  /* Lag chart — hide the wide SVG, scale it */
  .cq-lag-chart { padding: 16px !important; }
  .cq-lag-svg { height: 200px !important; }
  .cq-lag-head { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  .cq-lag-legend { flex-wrap: wrap; }
  .cq-lag-meta { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }

  /* Readiness section — stack score + parts */
  .cq-readiness-hero-v2 { grid-template-columns: 1fr !important; padding: 24px 20px !important; gap: 24px !important; text-align: center; }
  .cq-readiness-hero-v2 .cq-ring-big { justify-self: center !important; width: 200px !important; height: 200px !important; }
  .cq-readiness-hero-v2 .cq-readiness-bands { justify-content: center; }
  .cq-readiness-strip { grid-template-columns: 1fr !important; }
  .cq-readiness-strip .cq-partv2 { min-height: auto !important; }
  .cq-partv2 { padding: 18px !important; }

  /* 9-signal hub — narrower aspect ratio, hide some satellite tiles */
  .cq-signals-hub { aspect-ratio: 3 / 4 !important; max-width: 380px !important; }
  .cq-hub-orb { width: 88px !important; height: 88px !important; }
  .cq-hub-face.back .num { font-size: 30px !important; }
  .cq-hub-face.front .mark { width: 24px !important; height: 24px !important; }
  .cq-hub-sat { min-width: 66px !important; padding: 5px 7px !important; gap: 3px !important; }
  .cq-hub-sat .ico { width: 22px !important; height: 22px !important; }
  .cq-hub-sat .ico svg { width: 12px !important; height: 12px !important; }
  .cq-hub-sat b { font-size: 8px !important; letter-spacing: -0.005em !important; }

  /* Ad detail dash-body */
  .cq-dash-body { padding: 0 !important; }
  .cq-detail-head { grid-template-columns: 44px 1fr !important; padding: 14px 16px !important; }
  .cq-detail-status { grid-column: 1 / -1 !important; align-items: flex-start !important; }
  .cq-detail-title b { font-size: 14px !important; }
  .cq-detail-crumbs span { grid-template-columns: 70px 1fr !important; font-size: 11px !important; }
  .cq-breakdown { padding: 16px !important; }
  .cq-breakdown-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .cq-grain { padding: 10px !important; }
  .cq-grain b { font-size: 15px !important; }
  .cq-grain em { font-size: 9.5px !important; }
  .cq-tagstrip { padding: 0 16px 16px !important; gap: 6px !important; }
  .cq-tag { font-size: 10.5px !important; padding: 3px 8px 3px 6px !important; }

  /* Gap map — stack controls + shrink cells */
  .cq-gap { grid-template-columns: 1fr !important; gap: 14px !important; }
  .cq-gap-controls { flex-direction: row !important; flex-wrap: wrap; gap: 12px !important; }
  .cq-gap-map { grid-template-columns: 80px repeat(4, 1fr) !important; padding: 10px !important; }
  .cq-gap-xlab, .cq-gap-ylab { font-size: 9px !important; }
  .cq-gap-cell .ct { font-size: 10.5px !important; }
  .cq-gap-cell em { font-size: 8.5px !important; }

  /* AI brief fuse — stack */
  .cq-brief-fuse { grid-template-columns: 1fr !important; gap: 16px !important; }
  .cq-brief-orb-wrap::before, .cq-brief-orb-wrap::after { display: none !important; }
  .cq-brief-out-fields { grid-template-columns: 1fr !important; }

  /* Platform coverage — single column stack */
  .cq-platforms { grid-template-columns: 1fr !important; }
  .cq-pf { padding: 20px 20px 18px !important; }
  .cq-pf-name { font-size: 17px !important; }
  .cq-pf-list li { font-size: 12px !important; padding: 6px 10px 6px 26px !important; }

  /* Close section */
  .sp-cta-inline { flex-direction: column !important; text-align: center; gap: 18px !important; }
  .sp-quote p { font-size: 15px !important; }
  .sp-nav-next { flex-direction: column; gap: 8px !important; }
}

/* ═══════════ ABOUT PAGE ═══════════ */

/* Thesis pull-block — closes the "why we exist" section with the one line the
   three failure cards above are all evidence for. */
.about-thesis {
  margin-top: 40px;
  padding: 32px 36px;
  background: var(--ink-card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--teal);
  border-radius: var(--radius-lg);
}
.about-thesis-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal); font-weight: 600;
  margin-bottom: 12px;
}
.about-thesis p {
  margin: 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35;
  letter-spacing: -0.02em; color: var(--ink);
}
.about-thesis p em { font-style: italic; color: var(--teal); }

/* Product stack — the five IQ products as one navigable list */
.about-stack {
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}
.about-stack-item {
  display: grid; grid-template-columns: 48px 1fr 24px;
  align-items: center; gap: 22px;
  padding: 24px 20px;
  border-bottom: 1px solid var(--rule);
  transition: background .18s ease, padding-left .18s ease;
}
.about-stack-item:hover { background: rgba(0,255,194,0.04); padding-left: 28px; }
.about-pill {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--teal);
  border: 1px solid rgba(0,255,194,0.32); border-radius: 4px;
  padding: 5px 0; text-align: center;
}
.about-stack-body { display: block; }
.about-stack-body b {
  display: block;
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 5px;
}
.about-stack-body em {
  font-style: normal;
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.about-stack-arrow {
  font-family: var(--mono); font-size: 15px; color: var(--ink-4);
  text-align: right;
  transition: color .18s ease, transform .18s ease;
}
.about-stack-item:hover .about-stack-arrow { color: var(--teal); transform: translateX(3px); }

/* Do / won't-do stance columns */
.about-stance {
  margin-top: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.about-stance-col {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
}
.about-stance-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  letter-spacing: -0.02em; color: var(--ink);
  padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--rule-soft);
}
.about-stance-mark {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 11px; font-weight: 700;
}
.about-stance-do .about-stance-mark { background: var(--teal-soft); color: var(--teal); }
.about-stance-dont .about-stance-mark { background: rgba(255,107,91,0.14); color: #FF6B5B; }
.about-stance-list { list-style: none; padding: 0; margin: 0; }
.about-stance-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.about-stance-list li:last-child { border-bottom: none; padding-bottom: 0; }
.about-stance-list li b {
  display: block; color: var(--ink);
  font-weight: 600; margin-bottom: 3px;
}

/* Company facts */
.about-facts {
  margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.about-fact {
  padding: 24px 26px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.about-fact dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 10px;
}
.about-fact dd {
  margin: 0;
  font-family: var(--serif); font-weight: 600; font-size: 17px;
  letter-spacing: -0.015em; color: var(--ink);
}
.about-fact dd a { color: var(--teal); }
.about-fact dd a:hover { border-bottom: 1px solid var(--teal); }

.about-legal-note {
  margin: 24px 0 0;
  font-size: 14px; line-height: 1.6; color: var(--ink-3);
}
.about-legal-note a { color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.about-legal-note a:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 1100px) {
  .about-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .about-stance { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .about-thesis { padding: 24px 22px; }
  .about-stack-item { grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; }
  .about-stack-item:hover { padding-left: 0; background: none; }
  .about-stack-arrow { display: none; }
  .about-stance-col { padding: 24px 22px; }
  .about-facts { grid-template-columns: 1fr; }
}


/* ============================================================ re-theming ==
   The homepage's tokens, mapped onto the names the imported CSS already uses.
   This block is last on purpose: it wins on source order, so nothing above
   needs touching. */
:root {
  --bg:         #070D17;   /* homepage --sc-canvas */
  --bg-alt:     #0A1220;   /* the drift colour the homepage bands with */
  --bg-warm:    #0F1A28;   /* homepage --sc-surface */
  --ink-card:   #050A12;

  --ink:        #EDF4F5;   /* homepage --sc-ink */
  --ink-2:      #C8D6DA;
  --ink-3:      #93A7B0;   /* homepage --sc-ink-soft */
  --ink-4:      #6B7F88;

  --rule:       color-mix(in oklab, #EDF4F5 14%, transparent);
  --rule-soft:  color-mix(in oklab, #EDF4F5 7%, transparent);

  --teal:       #2EF0CB;   /* homepage --sc-accent */
  --teal-deep:  #2EF0CB;
  --teal-soft:  color-mix(in oklab, #2EF0CB 12%, transparent);

  --amber:      #F3C969;   /* the homepage's caution colour */
  --amber-soft: color-mix(in oklab, #F3C969 18%, transparent);
  --coral:      #FF6B5B;
  --coral-soft: color-mix(in oklab, #FF6B5B 18%, transparent);

  --serif: "Archivo", "Geist", system-ui, sans-serif;   /* display */
  --sans:  "Geist", system-ui, sans-serif;              /* text */
  --mono:  "Geist Mono", ui-monospace, monospace;

  --shadow-color: 215 60% 3%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .28), 0 2px 6px -1px hsl(var(--shadow-color) / .20);
  --shadow-md: 0 2px 4px hsl(var(--shadow-color) / .24), 0 8px 18px -4px hsl(var(--shadow-color) / .30);
  --shadow-lg: 0 18px 40px -8px hsl(var(--shadow-color) / .38), 0 48px 90px -24px hsl(var(--shadow-color) / .30);
}

/* The imported sheet sets its own display weight and tracking for Inter. Archivo
   is a wider face, so headings need the homepage's optical correction back. */
.display, .section-title, .subpage-hero h1, .sp-stat-big, .case h3 {
  letter-spacing: -0.03em;
}
body { font-synthesis-weight: none; }

/* The fixed bar sits over the top of every page; the first section has to clear
   it. The imported hero padding assumed a static nav in flow. */
.subpage-hero { padding-top: calc(var(--ml-bar) + clamp(1.5rem, 5vh, 3.5rem)); }

/* ================================================ Creative IQ, darkened ==
   The previous site had redesigned this one page light while everything else
   stayed dark. Its section grounds are handled on the elements themselves; the
   rules below are the component colours that were written as literal hex and
   so could not follow a token. Appended, so the imported blocks above stay a
   clean copy of the original. */
.cq-iq-page .cq-marquee {
  background: var(--bg-alt);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.cq-iq-page .cq-marquee::before { background: linear-gradient(90deg, var(--bg-alt), transparent); }
.cq-iq-page .cq-marquee::after  { background: linear-gradient(-90deg, var(--bg-alt), transparent); }

.cq-iq-page .cq-readiness-section,
.cq-iq-page .cq-signals-section,
.cq-iq-page .cq-dash-section,
.cq-iq-page .cq-gap-section,
.cq-iq-page .cq-brief-section,
.cq-iq-page .cq-platforms-section,
.cq-iq-page .cq-close-section { color: var(--ink); }

.cq-iq-page .cq-readiness-section .section-title em,
.cq-iq-page .cq-gap-section .section-title em,
.cq-iq-page .cq-platforms-section .section-title em { color: var(--teal); }

.cq-iq-page .cq-readiness-section .cq-partv2 {
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--part-accent);
}
.cq-iq-page .cq-readiness-section .cq-partv2.t-signal { --part-accent: var(--teal); }
.cq-iq-page .cq-readiness-section .cq-partv2-title h4 { color: var(--ink); }
.cq-iq-page .cq-readiness-section .cq-partv2-eyebrow,
.cq-iq-page .cq-gap-section .cq-gap-caption,
.cq-iq-page .cq-brief-section .cq-brief-ing-kicker,
.cq-iq-page .cq-brief-section .cq-brief-ing em,
.cq-iq-page .cq-platforms-section .cq-pf-caption,
.cq-iq-page .cq-close-section .sp-nav-next { color: var(--ink-3); }

.cq-iq-page .cq-brief-section .cq-brief-ing b,
.cq-iq-page .cq-brief-section .cq-brief-orb,
.cq-iq-page .cq-brief-section .cq-brief-orb-lab,
.cq-iq-page .cq-close-section .sp-nav-next a { color: var(--ink); }

.cq-iq-page .cq-carousel-dot.is-active { background: var(--teal); }
.cq-mobile-cta-btn { background: var(--teal); color: var(--sc-accent-ink); }

/* The ingredient cards in the AI-brief section, and the handful of places the
   previous brand emerald was written out rather than tokenised. */
.cq-iq-page .cq-brief-section .cq-brief-ing {
  background: var(--bg-warm);
  border: 1px solid var(--rule);
}
.cq-iq-page .cq-readiness-section .cq-partv2:hover { border-color: color-mix(in oklab, var(--teal) 45%, transparent); }
.cq-iq-page .cq-brief-section .cq-brief-studio-btn,
.cq-iq-page .cq-platforms-section .cq-pf-badge.live .dot,
.cq-iq-page .cq-platforms-section .cq-pf-btn.primary,
.cq-sig-ico-accent { background: var(--teal); }

/* The section headings, the marquee and the hero furniture were all written
   for the light ground this page used to sit on. */
.cq-iq-page .cq-readiness-section .section-title,
.cq-iq-page .cq-signals-section .section-title,
.cq-iq-page .cq-dash-section .section-title,
.cq-iq-page .cq-gap-section .section-title,
.cq-iq-page .cq-brief-section .section-title,
.cq-iq-page .cq-platforms-section .section-title,
.cq-iq-page .cq-close-section .sp-quote p { color: var(--ink); }

.cq-iq-page .cq-readiness-section .section-sub,
.cq-iq-page .cq-signals-section .section-sub,
.cq-iq-page .cq-dash-section .section-sub,
.cq-iq-page .cq-gap-section .section-sub,
.cq-iq-page .cq-brief-section .section-sub,
.cq-iq-page .cq-platforms-section .section-sub { color: var(--ink-3); }

.cq-iq-page .cq-marquee-item { color: color-mix(in oklab, var(--ink) 45%, transparent); }
.cq-iq-page .cq-marquee-item:hover { color: var(--ink); }
.cq-iq-page .cq-marquee-item::after { color: var(--rule); }

.cq-iq-page .cq-readiness-section .cq-partv2-bar { background: var(--rule-soft); }
.cq-iq-page .cq-readiness-section .cq-partv2:hover { box-shadow: var(--shadow-md); }

.cq-hero-1a-stats { background: color-mix(in oklab, var(--bg-warm) 70%, transparent); }
.cq-hero-1a-stats > .cq-1a-stat + .cq-1a-stat,
.cq-iq-page .cq-hero-1a-stats > .cq-1a-stat + .cq-1a-stat { border-color: var(--rule) !important; }
.cq-iq-page .cq-hero-feat {
  background: color-mix(in oklab, var(--bg-warm) 60%, transparent);
  border-color: color-mix(in oklab, var(--teal) 28%, transparent);
}
.cq-hero-frame-ready { background: var(--bg-warm); }
.cq-lib-1a-card:hover { box-shadow: var(--shadow-lg); }
.cq-iq-page .cq-marquee-lab { color: var(--ink-3); }