@font-face {
      font-family: 'Nohemi';
      src: url('/fonts/nohemi-regular.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Nohemi';
      src: url('/fonts/nohemi-medium.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }

    :root {
      /* Fin LIGHT base */
      --bg: #F5F1EB;
      --bg-elev: #FFFFFF;
      --bg-subtle: #EFEAE2;
      --bg-deeper: #ECE5DA;

      /* Fin DARK (used heavily for inversion / contrast bands) */
      --ink: #0A0A0B;
      --ink-elev: #141416;
      --ink-subtle: #1C1C1F;
      --ink-deep: #060607;
      --ink-line: #26262A;

      --text: #0A0A0B;
      --text-2: #45433F;
      --text-3: #6B6862;
      --text-4: #908B82;

      --line: #D9D4CC;
      --line-faint: #E5DFD4;

      /* Accent — solar flare */
      --hot: #FF6B3D;
      --warm: #FFB088;
      --deep: #D94F24;
      --plum: #5B2BC4;
      /* secondary cool — cosmic accent */
      --indigo: #2A1F4D;
      --cool: #6FE7DD;
      /* used very sparingly, only on dark */

      --glow: rgba(255, 107, 61, 0.18);
      --glow-warm: rgba(255, 176, 136, 0.20);

      /* Linear-style typography: Inter for everything (display + UI + body).
         A single, consistent type system with Linear's specific spacing/weight constants
         applied via the variables below. Mono kept for technical labels. */
      --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --mono: 'JetBrains Mono', ui-monospace, monospace;

      /* Linear-style typography scale (weights + tracking + leading) */
      --fw-display: 600;
      /* hero, large display headlines */
      --fw-heading: 600;
      /* section h2, card h3 */
      --fw-body: 400;
      /* paragraphs */
      --fw-medium: 500;
      /* eyebrows, micro labels, button labels */
      --fw-strong: 600;
      /* emphasis within body */

      --ls-display: -0.044em;
      /* very tight on display */
      --ls-heading: -0.022em;
      /* h2 / large section heads */
      --ls-h3: -0.014em;
      /* card heads, tile titles */
      --ls-body: -0.011em;
      /* body — Linear's signature */
      --ls-mono: 0.04em;
      /* mono caption */
      --ls-eyebrow: 0.06em;
      /* uppercase eyebrows */

      --lh-display: 1.04;
      --lh-heading: 1.08;
      --lh-h3: 1.2;
      --lh-body: 1.5;
      --lh-lead: 1.45;

      --container: 1280px;
      --container-wide: 1440px;

      --r-sm: 8px;
      --r-md: 14px;
      --r-lg: 20px;
      --r-xl: 28px;

      --easing: cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 16px;
      font-weight: var(--fw-body);
      line-height: var(--lh-body);
      letter-spacing: var(--ls-body);
      font-feature-settings: "ss01", "cv11", "cv02";
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    p {
      letter-spacing: var(--ls-body);
    }

    strong,
    b {
      font-weight: var(--fw-strong);
    }

    img,
    svg {
      max-width: 100%;
      display: block;
    }

    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 clamp(24px, 4vw, 64px);
    }

    .container-wide {
      max-width: var(--container-wide);
      margin: 0 auto;
      padding: 0 clamp(24px, 4vw, 64px);
    }

    /* === GLOBAL TYPE — Linear-style scale === */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: var(--display);
      font-feature-settings: "ss01", "cv11";
      font-weight: var(--fw-heading);
      letter-spacing: var(--ls-h3);
      line-height: var(--lh-h3);
    }

    h1 {
      letter-spacing: var(--ls-display);
      line-height: var(--lh-display);
      font-weight: var(--fw-display);
    }

    h2 {
      letter-spacing: var(--ls-heading);
      line-height: var(--lh-heading);
    }

    .display {
      font-family: var(--display);
      font-weight: var(--fw-display);
      line-height: var(--lh-display);
      letter-spacing: var(--ls-display);
      color: var(--text);
    }

    .display em {
      font-style: normal;
      color: var(--deep);
    }

    .h2 {
      font-family: var(--display);
      font-size: clamp(32px, 4vw, 52px);
      font-weight: var(--fw-display);
      line-height: var(--lh-heading);
      letter-spacing: var(--ls-heading);
      color: var(--text);
      max-width: 1000px;
    }

    .h2 em {
      font-style: normal;
      color: var(--deep);
    }

    .h2 .muted {
      color: rgba(10, 10, 11, 0.42);
    }

    .lead {
      font-family: var(--sans);
      font-size: 18px;
      font-weight: var(--fw-body);
      line-height: var(--lh-lead);
      letter-spacing: var(--ls-h3);
      max-width: 720px;
      margin-top: 24px;
      color: var(--text-2);
    }

    .micro {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-eyebrow);
      text-transform: uppercase;
      color: var(--text-2);
    }

    .fig {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-mono);
      color: var(--text-3);
      text-transform: uppercase;
    }

    .fig-dark {
      color: rgba(245, 241, 235, 0.45);
    }

    .mono {
      font-family: var(--mono);
      font-feature-settings: "ss01";
      letter-spacing: var(--ls-mono);
    }

    .num-tab {
      font-variant-numeric: tabular-nums;
    }

    /* === BUTTONS === */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 24px;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.011em;
      border-radius: 9999px;
      text-decoration: none;
      border: 1px solid transparent;
      cursor: pointer;
      transition: all 250ms var(--easing);
      position: relative;
      overflow: hidden;
    }

    .btn-primary {
      background: var(--ink);
      color: var(--bg);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 6px 24px rgba(10, 10, 11, 0.18);
    }

    .btn-primary:hover {
      background: var(--deep);
      transform: translateY(-1px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 8px 32px rgba(217, 79, 36, 0.32);
    }

    .btn-primary .arrow {
      transition: transform 250ms var(--easing);
    }

    .btn-primary:hover .arrow {
      transform: translateX(3px);
    }

    .btn-ghost {
      background: rgba(255, 255, 255, 0.6);
      color: var(--text);
      border-color: var(--line);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .btn-ghost:hover {
      background: rgba(255, 255, 255, 0.9);
      border-color: var(--text);
    }

    .btn-light-on-dark {
      background: var(--bg);
      color: var(--ink);
    }

    .btn-light-on-dark:hover {
      background: #FFF;
      transform: translateY(-1px);
    }

    .btn-hot {
      background: var(--hot);
      color: #FFF;
      box-shadow: 0 4px 20px rgba(255, 107, 61, 0.35);
    }

    .btn-hot:hover {
      background: var(--deep);
      transform: translateY(-1px);
      box-shadow: 0 6px 28px rgba(255, 107, 61, 0.45);
    }

    .btn-hot .arrow {
      transition: transform 250ms var(--easing);
    }

    .btn-hot:hover .arrow {
      transform: translateX(3px);
    }

    .btn-glass {
      background: rgba(245, 241, 235, 0.08);
      color: var(--bg);
      border-color: rgba(245, 241, 235, 0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .btn-glass:hover {
      background: rgba(245, 241, 235, 0.12);
      border-color: rgba(245, 241, 235, 0.3);
    }

    /* Demoted secondary action — text link with chevron, sits next to a primary btn */
    .cta-text-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 4px;
      color: rgba(245, 241, 235, 0.75);
      font-family: var(--sans);
      font-size: 14px;
      font-weight: var(--fw-medium);
      letter-spacing: -0.005em;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color 180ms var(--easing), border-color 180ms;
    }

    .cta-text-link:hover {
      color: var(--bg);
      border-bottom-color: rgba(245, 241, 235, 0.4);
    }

    .cta-text-link .arrow {
      font-size: 13px;
      transition: transform 180ms var(--easing);
    }

    .cta-text-link:hover .arrow {
      transform: translateX(2px);
    }

    /* === GLOBAL DECORATIONS === */
    .grid-pattern {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(10, 10, 11, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 10, 11, 0.04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
      pointer-events: none;
    }

    .grid-pattern.dark {
      background-image:
        linear-gradient(rgba(245, 241, 235, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 241, 235, 0.05) 1px, transparent 1px);
    }

    /* Inline section CTA — quiet but visible */
    .section-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-top: 56px;
      padding: 14px 22px;
      background: rgba(10, 10, 11, 0.04);
      border: 1px solid var(--line);
      border-radius: 9999px;
      max-width: max-content;
      margin-left: auto;
      margin-right: auto;
      transition: all 220ms var(--easing);
      text-decoration: none;
    }

    section.dark .section-cta,
    .flywheel-section .section-cta,
    .feather-section .section-cta {
      background: rgba(245, 241, 235, 0.04);
      border-color: rgba(245, 241, 235, 0.12);
    }

    .section-cta:hover {
      transform: translateY(-1px);
      border-color: var(--text);
    }

    section.dark .section-cta:hover,
    .flywheel-section .section-cta:hover,
    .feather-section .section-cta:hover {
      border-color: rgba(245, 241, 235, 0.4);
    }

    .section-cta .cta-text {
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      letter-spacing: -0.011em;
    }

    section.dark .section-cta .cta-text,
    .flywheel-section .section-cta .cta-text,
    .feather-section .section-cta .cta-text {
      color: var(--bg);
    }

    .section-cta .cta-text strong {
      font-weight: 600;
    }

    .section-cta .cta-link {
      font-size: 14px;
      font-weight: 600;
      color: var(--deep);
      letter-spacing: -0.011em;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    section.dark .section-cta .cta-link,
    .flywheel-section .section-cta .cta-link,
    .feather-section .section-cta .cta-link {
      color: var(--hot);
    }

    .section-cta .cta-link .arrow {
      transition: transform 220ms;
    }

    .section-cta:hover .cta-link .arrow {
      transform: translateX(3px);
    }

    .section-cta .divider {
      width: 1px;
      height: 16px;
      background: var(--line);
    }

    section.dark .section-cta .divider,
    .flywheel-section .section-cta .divider,
    .feather-section .section-cta .divider {
      background: rgba(245, 241, 235, 0.18);
    }

    /* Pulse animation for live dots */
    @keyframes pulse-dot {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.4;
        transform: scale(1.4);
      }
    }

    .live-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ADE80;
      box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
      animation: pulse-dot 2s var(--easing) infinite;
    }

    /* Scrolling marquee */
    @keyframes marquee {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    @keyframes spin-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes spin-slow-reverse {
      from {
        transform: rotate(360deg);
      }

      to {
        transform: rotate(0deg);
      }
    }

    @keyframes orbit {
      from {
        transform: rotate(0deg) translateX(200px) rotate(0deg);
      }

      to {
        transform: rotate(360deg) translateX(200px) rotate(-360deg);
      }
    }

    @keyframes float-slow {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-8px);
      }
    }

    @keyframes ticker-up {
      0% {
        transform: translateY(8px);
        opacity: 0;
      }

      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* === NAV === */
    nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(245, 241, 235, 0.7);
      backdrop-filter: saturate(180%) blur(18px);
      -webkit-backdrop-filter: saturate(180%) blur(18px);
      border-bottom: 1px solid rgba(217, 212, 204, 0.6);
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .nav-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 12px;
      background: rgba(255, 107, 61, 0.10);
      border: 1px solid rgba(255, 107, 61, 0.28);
      border-radius: 9999px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hot);
      font-weight: 600;
    }

    .nav-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.20);
      animation: nav-blink 1.6s ease-in-out infinite;
    }

    @keyframes nav-blink {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.55;
        transform: scale(0.85);
      }
    }

    @media (max-width: 880px) {
      .nav-badge {
        display: none;
      }
    }

    /* === STICKY BOTTOM CTA BAR — appears after scrolling past hero === */
    .sticky-cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      padding: 12px 16px env(safe-area-inset-bottom, 12px);
      background: rgba(10, 10, 11, 0.92);
      backdrop-filter: saturate(180%) blur(16px);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
      border-top: 1px solid rgba(255, 107, 61, 0.25);
      box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, 0.5);
      transform: translateY(120%);
      transition: transform 360ms var(--easing);
      pointer-events: none;
    }

    .sticky-cta.visible {
      transform: translateY(0);
      pointer-events: auto;
    }

    .sticky-cta-inner {
      max-width: var(--container-wide);
      margin: 0 auto;
      padding: 0 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: 44px;
    }

    .sticky-cta-msg {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .sticky-cta-msg .l1 {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.005em;
      line-height: 1.25;
    }

    .sticky-cta-msg .l2 {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.08em;
      color: rgba(245, 241, 235, 0.6);
      line-height: 1.3;
    }

    .sticky-cta-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-shrink: 0;
    }

    .sticky-cta-actions .btn {
      padding: 9px 16px;
      font-size: 13px;
      line-height: 1.2;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .sticky-cta-close {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(245, 241, 235, 0.06);
      border: 1px solid rgba(245, 241, 235, 0.10);
      color: rgba(245, 241, 235, 0.55);
      cursor: pointer;
      transition: background 200ms, color 200ms;
      flex-shrink: 0;
      padding: 0;
    }

    .sticky-cta-close:hover {
      background: rgba(245, 241, 235, 0.10);
      color: var(--bg);
    }

    @media (max-width: 640px) {
      .sticky-cta-msg .l2 {
        display: none;
      }

      .sticky-cta-msg .l1 {
        font-size: 12px;
      }

      .sticky-cta-actions .btn {
        padding: 8px 12px;
        font-size: 12px;
      }

      .sticky-cta-actions .btn-glass-light {
        display: none;
      }
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      max-width: var(--container-wide);
      margin: 0 auto;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      text-decoration: none;
    }

    .logo .logo-img {
      height: 28px;
      width: auto;
      display: block;
      flex-shrink: 0;
    }

    .logo .logo-word {
      display: none;
    }

    /* full logo includes the wordmark */
    .logo small {
      display: none;
    }

    /* Inline Hawky SVG — paths are class-tagged so we can flip contrast per context.
       hl-dark = the icon's rounded-square container + the wordmark.
       hl-light = the hawk silhouette inside the container. */
    .hawky-logo-svg {
      height: 28px;
      width: auto;
      display: block;
      flex-shrink: 0;
    }

    .hawky-logo-svg .hl-dark {
      fill: #0A0A0B;
    }

    .hawky-logo-svg .hl-light {
      fill: #F5F1EB;
    }

    /* Footer is dark — invert the contrast: cream container, dark hawk, cream wordmark. */
    footer .hawky-logo-svg .hl-dark {
      fill: #F5F1EB;
    }

    footer .hawky-logo-svg .hl-light {
      fill: #0A0A0B;
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0 16px;
    }

    .nav-links a {
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.011em;
      color: var(--text-2);
      text-decoration: none;
      border-radius: 8px;
      transition: color 200ms, background 200ms;
    }

    .nav-links a:hover {
      color: var(--text);
      background: rgba(10, 10, 11, 0.04);
    }

    .nav-dropdown-trigger {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .nav-chevron {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      opacity: 0.6;
    }

    .btn-nav-book {
      display: inline-flex;
      align-items: center;
      padding: 9px 16px;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.011em;
      background: #000;
      color: #fff;
      border-radius: 6px;
      text-decoration: none;
      transition: background 200ms, transform 200ms;
    }

    .btn-nav-book:hover {
      background: #1a1a1a;
      transform: translateY(-1px);
    }

    .nav-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border: 1px solid var(--line);
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: var(--text-2);
      background: rgba(255, 255, 255, 0.5);
    }

    /* === HERO === */
    .hero {
      position: relative;
      padding: 88px 0 96px;
      overflow: hidden;
      isolation: isolate;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(ellipse 50% 38% at 90% 5%, rgba(255, 107, 61, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 5% 25%, rgba(91, 43, 196, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 50% 110%, rgba(255, 176, 136, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 30% 25% at 18% 90%, rgba(255, 107, 61, 0.12) 0%, transparent 70%),
        var(--bg);
    }

    .hero-grid {
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.55;
      background-image:
        linear-gradient(rgba(10, 10, 11, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 10, 11, 0.05) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 30%, transparent 80%);
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 7px 14px 7px 8px;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid var(--line);
      border-radius: 9999px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: var(--text-2);
    }

    .hero-eyebrow .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 9px;
      background: var(--ink);
      color: var(--bg);
      border-radius: 9999px;
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 600;
    }

    .hero-headline {
      font-family: var(--display);
      font-size: clamp(44px, 6.4vw, 84px);
      font-weight: var(--fw-display);
      line-height: var(--lh-display);
      letter-spacing: var(--ls-display);
      max-width: 1080px;
      margin-top: 24px;
      font-feature-settings: "ss01", "cv11";
    }

    .hero-headline em {
      font-style: normal;
      color: var(--hot);
    }

    .hero-copy {
      position: relative;
    }

    /* === POWERED BY FEATHERDB — intricate SVG mark + HTML wordmark below ===
       Floats near the right edge of the hero column, near the H1 height. */
    .feather-seal {
      position: absolute;
      top: 50%;
      right: 80px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      pointer-events: auto;
      transition: transform 320ms var(--easing);
      z-index: 2;
    }

    .feather-seal-mark {
      width: 92px;
      height: 92px;
      filter: drop-shadow(0 0 18px rgba(255, 107, 61, 0.22));
      transition: filter 320ms var(--easing);
    }

    .feather-seal svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .feather-seal-text {
      text-align: center;
      line-height: 1;
    }

    .feather-seal-text .fs-eyebrow {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--hot, #FF6B3D);
      opacity: 0.85;
    }

    .feather-seal-text .fs-mark {
      font-family: 'Nohemi', 'Inter', system-ui, sans-serif;
      font-size: 19px;
      font-weight: 500;
      letter-spacing: -0.018em;
      color: var(--hot, #FF6B3D);
      margin-top: 4px;
    }

    .feather-seal:hover {
      transform: translateY(-50%) rotate(-3deg) scale(1.03);
    }

    .feather-seal:hover .feather-seal-mark {
      filter: drop-shadow(0 0 26px rgba(255, 107, 61, 0.36));
    }

    @media (max-width: 880px) {
      .feather-seal {
        top: 12px;
        right: 8px;
        gap: 8px;
      }

      .feather-seal-mark {
        width: 76px;
        height: 76px;
      }

      .feather-seal-text .fs-eyebrow {
        font-size: 8.5px;
        letter-spacing: 0.2em;
      }

      .feather-seal-text .fs-mark {
        font-size: 16px;
      }
    }

    @media (max-width: 560px) {
      .feather-seal {
        position: relative;
        top: auto;
        right: auto;
        margin: 0 auto 16px;
      }

      .feather-seal-mark {
        width: 84px;
        height: 84px;
      }

      .feather-seal-text .fs-mark {
        font-size: 17px;
      }
    }

    .hero-manifesto {
      font-family: var(--serif);
      font-style: italic;
      max-width: 620px;
      font-size: 15px;
      line-height: 1.4;
      letter-spacing: -0.005em;
      color: var(--text-3);
      margin-top: 0;
      padding-top: 22px;
    }

    .hero-sub {
      font-family: var(--sans);
      max-width: 640px;
      font-size: 18px;
      font-weight: var(--fw-body);
      line-height: var(--lh-lead);
      letter-spacing: var(--ls-h3);
      color: var(--text-2);
      margin-top: 22px;
    }

    .hero-sub strong {
      color: var(--text);
      font-weight: var(--fw-strong);
    }

    .hero-cta {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-top: 40px;
      flex-wrap: wrap;
    }

    .hero-meta {
      display: flex;
      gap: 28px;
      align-items: center;
      margin-top: 32px;
      font-size: 13px;
      color: var(--text-3);
      flex-wrap: wrap;
    }

    .hero-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .hero-meta-item .live-dot {
      background: var(--hot);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.18);
    }

    .hero-meta-item .check {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--bg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
    }

    /* === HERO LOGOS (above-the-fold trust row) === */
    .hero-logos {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      margin-top: 32px;
    }

    .hero-logos-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-3);
      white-space: nowrap;
    }

    .hero-logos-row {
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
    }

    .hero-logo-img {
      height: 26px;
      max-width: 100px;
      width: auto;
      object-fit: contain;
      opacity: 1;
      transition: opacity 250ms var(--easing), transform 250ms var(--easing), filter 250ms var(--easing);
    }

    /* Bombay Shaving Company: white logo on transparent — invert to black so it's visible on light bg */
    .hero-logos-row .hero-logo-img:nth-child(2) {
      filter: invert(1);
    }

    /* Bhanzu: white rectangle background — multiply blends white away on the cream hero bg */
    .hero-logos-row .hero-logo-img:nth-child(4) {
      mix-blend-mode: multiply;
    }

    .hero-logo-img:hover {
      opacity: 1;
      transform: scale(1.08) translateY(-2px);
    }

    /* BSC hover: keep inverted so it stays visible, add subtle brightness pop */
    .hero-logos-row .hero-logo-img:nth-child(2):hover {
      filter: invert(1) brightness(1.15);
    }

    @media (max-width: 640px) {
      .hero-logos {
        gap: 14px;
      }

      .hero-logos-row {
        gap: 18px;
      }

      .hero-logo-img {
        height: 22px;
        opacity: 0.65;
      }
    }

    /* === LEAD HERO BRIDGE (single-email pre-form, opens modal) === */
    .lead-hero-bridge {
      margin-top: 32px;
      width: 100%;
      max-width: 520px;
    }

    .lead-hero-row {
      display: flex;
      gap: 8px;
      align-items: stretch;
      padding: 6px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: 999px;
      box-shadow: 0 1px 3px rgba(10, 10, 11, 0.04);
      transition: border-color 160ms var(--easing), box-shadow 160ms var(--easing);
    }

    .lead-hero-row:focus-within {
      border-color: var(--ink);
      box-shadow: 0 0 0 3px rgba(10, 10, 11, 0.06);
    }

    .lead-hero-input {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      padding: 8px 16px;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--text);
      letter-spacing: -0.005em;
      outline: none;
    }

    .lead-hero-input::placeholder {
      color: var(--text-3);
    }

    .lead-hero-submit {
      flex-shrink: 0;
      padding: 12px 22px;
      border-radius: 999px;
      font-size: 14px;
    }

    .lead-hero-error {
      margin-top: 10px;
      font-family: var(--sans);
      font-size: 13px;
      color: var(--deep);
      letter-spacing: -0.005em;
    }

    @media (max-width: 640px) {
      .lead-hero-row {
        flex-direction: column;
        border-radius: 14px;
        padding: 8px;
        gap: 6px;
      }

      .lead-hero-input {
        padding: 14px 12px;
      }

      .lead-hero-submit {
        width: 100%;
        padding: 14px 16px;
        justify-content: center;
      }
    }

    /* === LEAD FORM (inline + modal) === */
    .lead-form {
      margin-top: 32px;
      width: 100%;
      max-width: 560px;
    }

    .lead-form-inline {
      /* extra polish for the hero variant */
    }

    .lead-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .lead-field {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .lead-field-full {
      grid-column: span 2;
    }

    .lead-field input,
    .lead-field select {
      width: 100%;
      box-sizing: border-box;
      padding: 18px 14px 8px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid var(--line);
      border-radius: 10px;
      font-family: var(--sans);
      font-size: 14px;
      color: var(--text);
      letter-spacing: -0.005em;
      transition: border-color 160ms var(--easing), background 160ms var(--easing), box-shadow 160ms var(--easing);
      outline: none;
      appearance: none;
    }

    .lead-field input:hover,
    .lead-field select:hover {
      border-color: var(--text-3);
    }

    .lead-field input:focus,
    .lead-field select:focus {
      border-color: var(--ink);
      background: #FFF;
      box-shadow: 0 0 0 3px rgba(10, 10, 11, 0.06);
    }

    .lead-field input:invalid:not(:placeholder-shown) {
      border-color: var(--deep);
    }

    .lead-field-select select {
      padding: 14px 36px 14px 14px;
      cursor: pointer;
      color: var(--text-3);
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2345433F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
    }

    .lead-field-select select option {
      color: var(--text);
    }

    .lead-field-select select.has-value {
      color: var(--text);
    }

    .lead-label {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--sans);
      font-size: 13px;
      color: var(--text-3);
      pointer-events: none;
      transition: top 160ms var(--easing), font-size 160ms var(--easing), color 160ms var(--easing), transform 160ms var(--easing);
      background: transparent;
    }

    .lead-field input:focus+.lead-label,
    .lead-field input:not(:placeholder-shown)+.lead-label {
      top: 8px;
      transform: translateY(0);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-3);
    }

    .lead-label-static {
      /* selects don't have :placeholder-shown — keep label tucked */
      top: 8px !important;
      transform: translateY(0) !important;
      font-size: 10px !important;
      letter-spacing: 0.06em !important;
      text-transform: uppercase !important;
    }

    .lead-submit {
      margin-top: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 50px;
      min-width: 200px;
      justify-content: center;
      position: relative;
    }

    .lead-submit[disabled] {
      opacity: 0.7;
      cursor: progress;
    }

    .lead-submit.is-loading .lead-submit-label,
    .lead-submit.is-loading .arrow,
    .lead-hero-submit.is-loading .arrow,
    .lead-hero-submit.is-loading {
      color: transparent;
    }

    .lead-hero-submit.is-loading .arrow {
      visibility: hidden;
    }

    .lead-submit.is-loading::after,
    .lead-hero-submit.is-loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 16px;
      margin: -8px 0 0 -8px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: var(--bg);
      animation: lead-spin 700ms linear infinite;
    }

    .lead-hero-submit {
      position: relative;
    }

    @keyframes lead-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .lead-form-trust {
      margin-top: 14px;
      font-family: var(--sans);
      font-size: 12px;
      color: var(--text-3);
      letter-spacing: 0;
    }

    .lead-form-status {
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 10px;
      font-family: var(--sans);
      font-size: 14px;
      line-height: 1.45;
      letter-spacing: -0.005em;
    }

    .lead-form-status[data-status="success"] {
      background: rgba(255, 107, 61, 0.06);
      border: 1px solid rgba(255, 107, 61, 0.25);
      color: var(--text);
    }

    .lead-form-status[data-status="success"] strong {
      color: var(--deep);
    }

    .lead-form-status[data-status="error"] {
      background: rgba(217, 79, 36, 0.08);
      border: 1px solid rgba(217, 79, 36, 0.25);
      color: var(--deep);
    }

    @media (max-width: 640px) {
      .lead-fields {
        grid-template-columns: 1fr;
      }

      .lead-field-full {
        grid-column: span 1;
      }

      .lead-submit {
        width: 100%;
      }
    }

    /* === LEAD MODAL === */
    .lead-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      animation: lead-modal-in 220ms var(--easing);
    }

    .lead-modal[hidden] {
      display: none;
    }

    @keyframes lead-modal-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .lead-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10, 10, 11, 0.55);
      border: none;
      cursor: pointer;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .lead-modal-card {
      position: relative;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 36px 36px 32px;
      max-width: 560px;
      width: 100%;
      max-height: calc(100vh - 48px);
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(10, 10, 11, 0.25);
      animation: lead-modal-pop 220ms var(--easing);
    }

    @keyframes lead-modal-pop {
      from {
        transform: translateY(8px) scale(0.985);
        opacity: 0;
      }

      to {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    .lead-modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 32px;
      height: 32px;
      border: none;
      background: transparent;
      color: var(--text-3);
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 160ms, color 160ms;
    }

    .lead-modal-close:hover {
      background: rgba(10, 10, 11, 0.06);
      color: var(--text);
    }

    .lead-modal-eyebrow {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-3);
      margin-bottom: 10px;
    }

    .lead-modal-title {
      font-family: var(--display);
      font-size: 26px;
      font-weight: var(--fw-display);
      letter-spacing: var(--ls-heading);
      line-height: 1.15;
      color: var(--text);
      margin: 0 0 8px;
    }

    /* Bridge variant — applied when the modal opens from the hero email submit.
       Tighter line-height + a hair smaller, since the copy wraps to ~3 lines. */
    .lead-modal-title.lead-modal-title-bridge {
      font-size: 24px;
      line-height: 1.25;
      letter-spacing: -0.012em;
      margin-bottom: 22px;
    }

    .lead-modal-sub {
      font-family: var(--sans);
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.5;
      margin: 0 0 20px;
    }

    .lead-form-modal {
      margin-top: 0;
    }

    /* Modal sizing per step */
    .lead-modal-card[data-step="book"] {
      max-width: 680px;
      padding: 24px 24px 20px;
    }

    .lead-modal-card[data-step="choose"] {
      /* Dark, intimate canvas for the merged thank-you + choose moment */
      background: radial-gradient(ellipse at top, #1A1418 0%, #0A0A0B 80%);
      border-color: rgba(255, 107, 61, 0.22);
      color: #F5F1EB;
      box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 107, 61, 0.06),
        0 0 120px rgba(255, 107, 61, 0.10);
      transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    }

    .lead-modal-card[data-step="book"] {
      background: radial-gradient(ellipse at top, #14101A 0%, #0A0A0B 75%);
      border-color: rgba(255, 107, 61, 0.18);
      color: #F5F1EB;
    }

    /* === MODAL STEPS — single panel visible at a time === */
    .lead-modal-step {
      animation: lead-step-in 240ms var(--easing) both;
    }

    .lead-modal-step[hidden] {
      display: none;
    }

    @keyframes lead-step-in {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .lead-step-tag {
      display: inline-block;
      padding: 2px 8px;
      margin-right: 8px;
      border-radius: 999px;
      background: var(--text);
      color: var(--bg);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      vertical-align: 1px;
    }

    /* === STEP 2 — THANK-YOU + CHOOSE (merged on dark canvas) === */
    .lead-step-choose {
      position: relative;
      padding: 28px 6px 12px;
      min-height: 360px;
      overflow: hidden;
      border-radius: inherit;
    }

    /* Ambient twinkling stars (the "subtle confetti" backdrop) */
    .choose-stars {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    /* One-shot expanding glow ring — fires on each entry to the step */
    .choose-burst {
      position: absolute;
      left: 50%;
      top: 22%;
      transform: translate(-50%, -50%) scale(0.4);
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 107, 61, 0.42) 0%, rgba(255, 107, 61, 0) 65%);
      opacity: 0;
      pointer-events: none;
      z-index: 0;
    }

    .choose-burst.choose-burst-on {
      animation: choose-burst-pulse 1.7s cubic-bezier(0.22, 0.94, 0.35, 1) forwards;
    }

    @keyframes choose-burst-pulse {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
      }

      28% {
        opacity: 0.95;
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.6);
      }
    }

    /* The one-liner thank-you */
    .choose-thanks {
      position: relative;
      z-index: 1;
      font-family: var(--display);
      font-size: 32px;
      font-weight: var(--fw-display);
      line-height: 1.1;
      letter-spacing: -0.025em;
      color: #F5F1EB;
      text-align: center;
      margin: 8px 0 6px;
    }

    .choose-thanks-sub {
      position: relative;
      z-index: 1;
      font-family: var(--sans);
      font-size: 14px;
      letter-spacing: 0.005em;
      color: rgba(245, 241, 235, 0.55);
      text-align: center;
      margin: 0 0 28px;
    }

    /* Founders block — personal touch on the choose step (LinkedIn-linked) */
    .choose-founders {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      max-width: 460px;
      margin: 4px auto 26px;
      text-align: center;
    }

    .cf-avatars {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cf-avatar {
      position: relative;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #FFB088 0%, #FF6B3D 100%);
      border: 3px solid rgba(245, 241, 235, 0.92);
      color: #1A1418;
      text-decoration: none;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
      box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(255, 107, 61, 0.18);
      overflow: hidden;
    }

    .cf-avatar:not(:first-child) {
      margin-left: -16px;
    }

    .cf-avatar:hover {
      transform: translateY(-2px) scale(1.06);
      box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 0 32px rgba(255, 107, 61, 0.36);
      z-index: 2;
    }

    .cf-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 22%;
      display: block;
    }

    .cf-initials {
      font-family: var(--display, 'Inter', system-ui, sans-serif);
      font-weight: 700;
      font-size: 17px;
      letter-spacing: -0.02em;
      color: #1A1418;
    }

    .cf-note {
      font-family: var(--sans, 'Inter', system-ui, sans-serif);
      font-size: 14.5px;
      line-height: 1.55;
      color: rgba(245, 241, 235, 0.85);
      margin: 0;
      max-width: 420px;
    }

    .cf-signoff {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--sans, 'Inter', system-ui, sans-serif);
      font-size: 13px;
      color: rgba(245, 241, 235, 0.55);
    }

    .cf-name {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #FFB088;
      text-decoration: none;
      font-weight: 600;
      letter-spacing: -0.005em;
      transition: color 0.15s ease;
    }

    .cf-name:hover {
      color: #FF6B3D;
    }

    .cf-li {
      width: 12px;
      height: 12px;
      display: inline-block;
      opacity: 0.85;
    }

    .cf-sep {
      opacity: 0.5;
    }

    @media (max-width: 540px) {
      .choose-founders {
        gap: 12px;
        max-width: 100%;
      }

      .cf-avatar {
        width: 60px;
        height: 60px;
        border-width: 2px;
      }

      .cf-avatar:not(:first-child) {
        margin-left: -12px;
      }

      .cf-initials {
        font-size: 16px;
      }

      .cf-note {
        font-size: 13.5px;
      }
    }

    /* Compact card stack — title + meta + arrow, no body paragraph */
    .choose-cards {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 460px;
      margin: 0 auto;
    }

    .choose-card {
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-areas:
        "time title arrow"
        "time tag   arrow";
      column-gap: 18px;
      row-gap: 2px;
      align-items: center;
      padding: 18px 22px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.12);
      border-radius: 14px;
      color: #F5F1EB;
      font-family: var(--sans);
      cursor: pointer;
      text-align: left;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }

    .choose-card:hover {
      background: rgba(255, 107, 61, 0.08);
      border-color: rgba(255, 107, 61, 0.5);
      transform: translateX(2px);
    }

    .choose-card:focus-visible {
      outline: 2px solid var(--hot);
      outline-offset: 2px;
    }

    .choose-card-time {
      grid-area: time;
      align-self: center;
      font-family: var(--display);
      font-size: 22px;
      font-weight: var(--fw-display);
      letter-spacing: -0.02em;
      color: #F5F1EB;
      padding-right: 14px;
      border-right: 1px solid rgba(245, 241, 235, 0.10);
    }

    .choose-card-title {
      grid-area: title;
      font-family: var(--display);
      font-size: 17px;
      font-weight: var(--fw-display);
      letter-spacing: -0.01em;
      color: #F5F1EB;
    }

    .choose-card-tag {
      grid-area: tag;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
    }

    .choose-card-arrow {
      grid-area: arrow;
      align-self: center;
      font-size: 18px;
      color: rgba(245, 241, 235, 0.45);
      transition: transform 0.18s ease, color 0.18s ease;
    }

    .choose-card:hover .choose-card-arrow {
      transform: translateX(3px);
      color: var(--hot);
    }

    /* Primary card — slight hot-orange highlight, no obstructive ::before badge */
    .choose-card-primary {
      background: rgba(255, 107, 61, 0.08);
      border-color: rgba(255, 107, 61, 0.32);
    }

    .choose-card-primary .choose-card-time {
      color: #FFB088;
    }

    /* === STEP 3 — CALENDAR EMBED === */
    .lead-step-back {
      background: transparent;
      border: none;
      padding: 0 8px 0 0;
      cursor: pointer;
      color: rgba(245, 241, 235, 0.55);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      transition: color 160ms var(--easing);
    }

    .lead-step-back:hover {
      color: #F5F1EB;
    }

    .lead-modal-card[data-step="book"] .lead-modal-eyebrow {
      color: rgba(245, 241, 235, 0.6);
    }

    .lead-modal-card[data-step="book"] [data-book-title].lead-modal-title {
      color: #F5F1EB;
      font-size: 20px;
    }

    .lead-modal-card[data-step="book"] [data-book-sub].lead-modal-sub {
      color: rgba(245, 241, 235, 0.55);
      margin-bottom: 14px;
    }

    .lead-cal-frame {
      position: relative;
      margin-top: 12px;
      border: 1px solid rgba(255, 107, 61, 0.22);
      border-radius: 12px;
      overflow: hidden;
      background: #FBF6EC;
      min-height: 540px;
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4) inset,
        0 12px 32px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(255, 107, 61, 0.10);
    }

    .lead-cal-frame iframe {
      width: 100%;
      height: 540px;
      border: 0;
      display: block;
      background: #FBF6EC;
    }

    /* Calendar loader — covers the iframe until Google renders, then fades out */
    .lead-cal-loader {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      background: linear-gradient(180deg, #FBF6EC 0%, #F2EBDC 100%);
      z-index: 2;
      transition: opacity 0.4s ease;
    }

    .lead-cal-loader.lcl-fade {
      opacity: 0;
      pointer-events: none;
    }

    /* Pulsing core — Hawky-orange dot with halo, breathes 1.6s */
    .lcl-pulse {
      position: relative;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--hot, #FF6B3D);
      box-shadow: 0 0 18px rgba(255, 107, 61, 0.55);
      animation: lcl-pulse 1.6s ease-in-out infinite;
    }

    @keyframes lcl-pulse {

      0%,
      100% {
        transform: scale(0.85);
        opacity: 0.85;
      }

      50% {
        transform: scale(1.15);
        opacity: 1;
      }
    }

    /* Orbit ring — three small satellites circling the core, suggesting "fetching" */
    .lcl-orbit {
      position: relative;
      width: 56px;
      height: 56px;
      margin-top: -36px;
    }

    .lcl-orbit span {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6px;
      height: 6px;
      margin: -3px 0 0 -3px;
      border-radius: 50%;
      background: rgba(255, 107, 61, 0.7);
      box-shadow: 0 0 6px rgba(255, 107, 61, 0.5);
      transform-origin: 0 0;
      animation: lcl-orbit 2s linear infinite;
    }

    .lcl-orbit span:nth-child(1) {
      animation-delay: 0s;
      background: rgba(255, 107, 61, 0.85);
    }

    .lcl-orbit span:nth-child(2) {
      animation-delay: -0.66s;
      background: rgba(255, 176, 136, 0.8);
      width: 5px;
      height: 5px;
    }

    .lcl-orbit span:nth-child(3) {
      animation-delay: -1.33s;
      background: rgba(245, 241, 235, 0.85);
      width: 4px;
      height: 4px;
      box-shadow: 0 0 4px rgba(245, 241, 235, 0.4);
    }

    @keyframes lcl-orbit {
      from {
        transform: rotate(0deg) translateX(28px) rotate(0deg);
      }

      to {
        transform: rotate(360deg) translateX(28px) rotate(-360deg);
      }
    }

    .lcl-text {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(10, 10, 11, 0.55);
      margin: 8px 0 0;
    }

    /* ====================================================================== */
    /* WINDOW-WIDE CONFETTI SPLASH (fires on lead submit, behind the modal card) */
    /* ====================================================================== */
    .hawky-confetti {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 1;
      /* Above .lead-modal-backdrop, below .lead-modal-card */
    }

    .hcf {
      position: absolute;
      width: 8px;
      height: 8px;
      background: rgba(245, 241, 235, 0.85);
      border-radius: 2px;
      opacity: 0;
      animation-name: hcf-rise;
      animation-timing-function: cubic-bezier(0.22, 0.55, 0.35, 1);
      animation-fill-mode: forwards;
      will-change: transform, opacity;
    }

    .hcf-warm {
      background: var(--hot, #FF6B3D);
      box-shadow: 0 0 8px rgba(255, 107, 61, 0.55);
    }

    .hcf-star {
      background: transparent !important;
      width: auto;
      height: auto;
      border-radius: 0;
      font-size: 16px;
      line-height: 1;
      color: rgba(255, 176, 136, 0.95);
      text-shadow: 0 0 10px rgba(255, 107, 61, 0.65);
      box-shadow: none;
    }

    @keyframes hcf-rise {
      0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg) scale(0.55);
      }

      14% {
        opacity: 0.95;
      }

      100% {
        opacity: 0;
        transform: translate(var(--hcf-dx), var(--hcf-dy)) rotate(var(--hcf-rot)) scale(1.05);
      }
    }

    /* Fallback "I've booked" link below iframe (in case auto-close misses) */
    .lead-cal-foot {
      margin-top: 12px;
      text-align: center;
    }

    .lead-cal-done {
      background: transparent;
      border: 0;
      color: rgba(245, 241, 235, 0.55);
      font-family: var(--sans);
      font-size: 13px;
      cursor: pointer;
      padding: 4px 8px;
      transition: color 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .lead-cal-done:hover {
      color: #F5F1EB;
    }

    .lead-cal-done .arrow {
      transition: transform 0.15s ease;
    }

    .lead-cal-done:hover .arrow {
      transform: translateX(2px);
    }

    @media (max-width: 640px) {
      .lead-modal {
        padding: 12px;
      }

      .lead-modal-card {
        padding: 28px 22px 24px;
      }

      .lead-modal-card[data-step="book"] {
        padding: 20px 14px 16px;
      }

      .lead-modal-title {
        font-size: 22px;
      }

      .choose-thanks {
        font-size: 26px;
      }

      .choose-cards {
        max-width: 100%;
      }

      .choose-card {
        padding: 16px 18px;
        column-gap: 14px;
      }

      .choose-card-time {
        font-size: 20px;
        padding-right: 12px;
      }

      .lead-cal-frame,
      .lead-cal-frame iframe {
        min-height: 500px;
        height: 500px;
      }
    }

    body.lead-modal-open {
      overflow: hidden;
    }

    /* === HERO PANEL SHOWCASE (4 panels) === */
    .hero-showcase-wrap {
      margin-top: 80px;
      position: relative;
    }

    .hero-showcase {
      max-width: 1280px;
      margin: 0 auto;
      padding: 24px;
      background: linear-gradient(180deg, #16161A 0%, #0A0A0B 100%);
      border-radius: var(--r-xl);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 48px -12px rgba(10, 10, 11, 0.25),
        0 60px 100px -20px rgba(255, 107, 61, 0.18),
        0 0 0 1px rgba(217, 212, 204, 0.5);
      position: relative;
      overflow: hidden;
    }

    .hero-showcase::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 50% 35% at 50% 0%, rgba(255, 107, 61, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 100% 100%, rgba(91, 43, 196, 0.12) 0%, transparent 60%);
      pointer-events: none;
    }

    .hero-grid-layout {
      display: grid;
      grid-template-columns: 1.55fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 16px;
      position: relative;
      z-index: 2;
      min-height: 540px;
    }

    .hero-panel {
      background: rgba(245, 241, 235, 0.025);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 14px;
      padding: 22px;
      color: var(--bg);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .hero-panel.p-graph-1 {
      grid-column: 1;
      grid-row: 1;
    }

    .hero-panel.p-kb {
      grid-column: 2;
      grid-row: 1;
    }

    .hero-panel.p-graph-2 {
      grid-column: 1;
      grid-row: 2;
    }

    .hero-panel.p-learn {
      grid-column: 2;
      grid-row: 2;
    }

    .panel-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 14px;
      gap: 10px;
    }

    .panel-fig {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.10em;
      color: rgba(245, 241, 235, 0.42);
      text-transform: uppercase;
      font-weight: 500;
    }

    .panel-meta {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.55);
    }

    .panel-meta .v {
      color: var(--bg);
      font-weight: 500;
    }

    .panel-meta .live-dot {
      vertical-align: middle;
      margin-right: 6px;
    }

    .panel-title {
      ;
      letter-spacing: -0.011em;
      color: var(--bg);
      margin-bottom: 4px;
    }

    .panel-sub {
      font-size: 12px;
      color: rgba(245, 241, 235, 0.55);
      letter-spacing: 0.02em;
    }

    /* graph panel — hypothesis → growth */
    .panel-graph svg {
      width: 100%;
      height: 100%;
      flex: 1;
    }

    .panel-graph-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
      padding-top: 14px;
      margin-top: 10px;
      border-top: 1px solid rgba(245, 241, 235, 0.06);
    }

    .panel-graph-stats .v {
      ;
      color: var(--bg);
      letter-spacing: -0.014em;
      line-height: 1;
    }

    .panel-graph-stats .v.accent {
      color: var(--hot);
    }

    .panel-graph-stats .l {
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.45);
      font-weight: 500;
      margin-top: 6px;
    }

    /* knowledge base */
    .kb-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      flex: 1;
    }

    .kb-chip {
      padding: 12px 14px;
      background: rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 10px;
      transition: border-color 250ms;
    }

    .kb-chip:hover {
      border-color: rgba(255, 107, 61, 0.4);
    }

    .kb-chip .chip-ic {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 107, 61, 0.14);
      color: var(--hot);
      margin-bottom: 8px;
    }

    .kb-chip .chip-name {
      font-size: 13px;
      color: var(--bg);
      font-weight: 500;
      letter-spacing: -0.011em;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .kb-chip .chip-cad {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
    }

    .kb-chip .chip-cad.live {
      color: var(--hot);
    }

    /* activity log */
    .activity-list {
      list-style: none;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .activity-list li {
      display: grid;
      grid-template-columns: 64px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 9px 0;
      border-top: 1px solid rgba(245, 241, 235, 0.05);
      font-size: 12px;
    }

    .activity-list li:first-child {
      border-top: none;
    }

    .activity-list .ts {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.42);
      letter-spacing: 0.04em;
    }

    .activity-list .msg {
      color: rgba(245, 241, 235, 0.85);
      line-height: 1.4;
    }

    .activity-list .msg .accent {
      color: var(--hot);
    }

    .activity-list .msg .pos {
      color: #4ADE80;
    }

    .activity-list .vd {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      padding: 2px 7px;
      border-radius: 4px;
      text-transform: uppercase;
    }

    .activity-list .vd.win {
      background: rgba(74, 222, 128, 0.14);
      color: #4ADE80;
    }

    .activity-list .vd.kill {
      background: rgba(245, 241, 235, 0.06);
      color: rgba(245, 241, 235, 0.5);
    }

    .activity-list .vd.queue {
      background: rgba(255, 107, 61, 0.12);
      color: var(--hot);
    }

    /* learnings */
    .learnings-list {
      list-style: none;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .learnings-list li {
      padding: 11px 14px;
      background: rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-left: 2px solid var(--hot);
      border-radius: 8px;
    }

    .learnings-list .li-tag {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--hot);
      font-weight: 500;
      margin-bottom: 4px;
    }

    .learnings-list .li-msg {
      font-size: 12px;
      color: rgba(245, 241, 235, 0.85);
      line-height: 1.45;
    }

    /* === HERO MOCKUP CARD (UI showpiece) === */
    .hero-mockup-wrap {
      margin-top: 80px;
      position: relative;
    }

    .hero-mockup {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      border-radius: var(--r-xl);
      overflow: hidden;
      background: linear-gradient(180deg, #16161A 0%, #0A0A0B 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 48px -12px rgba(10, 10, 11, 0.25),
        0 60px 100px -20px rgba(255, 107, 61, 0.18),
        0 0 0 1px rgba(217, 212, 204, 0.5);
    }

    .hero-mockup::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 50% 30% at 50% 0%, rgba(255, 107, 61, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 80% 100%, rgba(91, 43, 196, 0.18) 0%, transparent 60%);
      pointer-events: none;
      z-index: 1;
    }

    .mockup-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: rgba(245, 241, 235, 0.04);
      border-bottom: 1px solid rgba(245, 241, 235, 0.08);
      position: relative;
      z-index: 2;
    }

    .mockup-dots {
      display: flex;
      gap: 6px;
    }

    .mockup-dots span {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: rgba(245, 241, 235, 0.15);
    }

    .mockup-dots span:nth-child(1) {
      background: #FF5F57;
    }

    .mockup-dots span:nth-child(2) {
      background: #FFBD2E;
    }

    .mockup-dots span:nth-child(3) {
      background: #28CA41;
    }

    .mockup-url {
      flex: 1;
      text-align: center;
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(245, 241, 235, 0.5);
      padding: 6px 12px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 8px;
      max-width: 320px;
      margin: 0 18px;
    }

    .mockup-url .live-dot {
      vertical-align: middle;
      margin-right: 8px;
    }

    .mockup-meta {
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.06em;
    }

    .mockup-body {
      display: grid;
      grid-template-columns: 240px 1fr;
      min-height: 580px;
      position: relative;
      z-index: 2;
    }

    .mockup-side {
      padding: 16px 12px;
      border-right: 1px solid rgba(245, 241, 235, 0.06);
      background: rgba(245, 241, 235, 0.015);
    }

    .mockup-side h5 {
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.4);
      font-weight: 500;
      margin-bottom: 12px;
    }

    .mockup-side ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 24px;
    }

    .mockup-side li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 6px;
      font-size: 13px;
      color: rgba(245, 241, 235, 0.65);
      cursor: pointer;
    }

    .mockup-side li.active {
      background: rgba(255, 107, 61, 0.12);
      color: var(--bg);
    }

    .mockup-side li .ic {
      width: 14px;
      height: 14px;
      border-radius: 4px;
      background: rgba(245, 241, 235, 0.1);
      flex-shrink: 0;
    }

    .mockup-side li.active .ic {
      background: var(--hot);
    }

    .mockup-side li .ct {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.06em;
    }

    .mockup-main {
      padding: 24px;
      color: var(--bg);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .mockup-row-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .stat-tile {
      padding: 18px;
      background: rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 12px;
      position: relative;
      overflow: hidden;
    }

    .stat-tile::after {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 107, 61, 0.4), transparent);
    }

    .stat-tile .lbl {
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      font-weight: 500;
    }

    .stat-tile .v {
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.02em;
      margin-top: 6px;
    }

    .stat-tile .v .unit {
      color: var(--hot);
      font-size: 0.7em;
    }

    .stat-tile .delta {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: #4ADE80;
      margin-top: 6px;
      font-weight: 500;
    }

    .stat-tile .delta.down {
      color: #4ADE80;
    }

    .mockup-row-chart {
      padding: 18px;
      background: rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 12px;
    }

    .mockup-chart-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .mockup-chart-title {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.55);
      font-weight: 500;
    }

    .mockup-chart-meta {
      display: flex;
      gap: 14px;
      font-size: 11px;
      color: rgba(245, 241, 235, 0.5);
      letter-spacing: 0.04em;
    }

    .mockup-chart-meta .v {
      color: var(--bg);
      font-family: var(--mono);
    }

    .mockup-chart svg {
      width: 100%;
      height: auto;
    }

    .mockup-row-feed {
      padding: 18px;
      background: rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 12px;
    }

    .mockup-feed-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 12px;
    }

    .mockup-feed-title {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.55);
      font-weight: 500;
    }

    .mockup-feed-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 10px;
      background: rgba(74, 222, 128, 0.12);
      border-radius: 9999px;
      font-size: 10px;
      color: #4ADE80;
      letter-spacing: 0.06em;
      font-weight: 500;
    }

    .mockup-feed-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .mockup-feed-list li {
      display: grid;
      grid-template-columns: 60px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 9px 0;
      border-top: 1px solid rgba(245, 241, 235, 0.06);
      font-size: 12px;
    }

    .mockup-feed-list li:first-child {
      border-top: none;
    }

    .mockup-feed-list .ts {
      font-family: var(--mono);
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.04em;
    }

    .mockup-feed-list .msg {
      color: var(--bg);
    }

    .mockup-feed-list .msg .accent {
      color: var(--hot);
    }

    .mockup-feed-list .msg .pos {
      color: #4ADE80;
    }

    .mockup-feed-list .verdict {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      padding: 2px 8px;
      border-radius: 4px;
      text-transform: uppercase;
    }

    .mockup-feed-list .verdict.win {
      background: rgba(74, 222, 128, 0.14);
      color: #4ADE80;
    }

    .mockup-feed-list .verdict.kill {
      background: rgba(245, 241, 235, 0.05);
      color: rgba(245, 241, 235, 0.5);
    }

    .mockup-feed-list .verdict.queue {
      background: rgba(255, 107, 61, 0.12);
      color: var(--hot);
    }

    /* ============ Enhanced platform mockup chrome ============ */
    @keyframes mockup-cursor-blink {

      0%,
      49% {
        opacity: 1;
      }

      50%,
      100% {
        opacity: 0;
      }
    }

    @keyframes mockup-pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.5;
        transform: scale(1.3);
      }
    }

    /* Browser chrome enhancements */
    .mockup-bar {
      gap: 14px;
      padding: 12px 16px;
    }

    .mockup-nav-arrows {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .mockup-nav-arrow {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: rgba(245, 241, 235, 0.45);
      font-size: 14px;
      cursor: pointer;
      border-radius: 4px;
      transition: all 200ms;
    }

    .mockup-nav-arrow:hover {
      background: rgba(245, 241, 235, 0.06);
      color: var(--bg);
    }

    .mockup-nav-arrow.dim {
      color: rgba(245, 241, 235, 0.20);
      cursor: default;
    }

    .mockup-nav-arrow.dim:hover {
      background: transparent;
    }

    .mockup-url-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      max-width: 480px;
      margin: 0 auto;
      background: rgba(245, 241, 235, 0.05);
      border: 1px solid rgba(245, 241, 235, 0.08);
      border-radius: 8px;
      padding: 4px 8px 4px 4px;
      gap: 8px;
    }

    .mockup-url-favicon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      border-radius: 4px;
      background: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mockup-url-text {
      flex: 1;
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(245, 241, 235, 0.6);
      letter-spacing: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mockup-url-text .domain {
      color: var(--bg);
      font-weight: 500;
    }

    .mockup-url-text .path {
      color: rgba(245, 241, 235, 0.55);
    }

    .mockup-url-secure {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      color: #4ADE80;
      flex-shrink: 0;
    }

    .mockup-bar-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    /* App-level top navigation */
    .mockup-topnav {
      display: flex;
      align-items: center;
      padding: 0 18px;
      height: 48px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.08);
      background: rgba(245, 241, 235, 0.02);
      gap: 24px;
      position: relative;
      z-index: 2;
    }

    .mockup-topnav-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .mockup-topnav-brand .ws-mark {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: linear-gradient(135deg, #FF6B3D, #D94F24);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      color: var(--bg);
      letter-spacing: -0.02em;
    }

    .mockup-topnav-brand .ws-name {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.011em;
    }

    .mockup-topnav-brand .ws-tier {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hot);
      padding: 2px 6px;
      border: 1px solid rgba(255, 107, 61, 0.4);
      border-radius: 4px;
      font-weight: 600;
    }

    .mockup-topnav-tabs {
      display: flex;
      gap: 2px;
      flex: 1;
      align-items: center;
    }

    .mockup-topnav-tabs a {
      padding: 7px 12px;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      color: rgba(245, 241, 235, 0.55);
      text-decoration: none;
      border-radius: 6px;
      letter-spacing: -0.011em;
      transition: all 180ms;
      position: relative;
      cursor: pointer;
    }

    .mockup-topnav-tabs a:hover {
      color: var(--bg);
      background: rgba(245, 241, 235, 0.04);
    }

    .mockup-topnav-tabs a.active {
      color: var(--bg);
      background: rgba(245, 241, 235, 0.06);
    }

    .mockup-topnav-tabs a.active::after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: -8px;
      height: 2px;
      background: var(--hot);
      border-radius: 2px;
    }

    .mockup-topnav-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .mockup-search {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 6px;
      font-family: var(--sans);
      font-size: 12px;
      color: rgba(245, 241, 235, 0.45);
      cursor: pointer;
      min-width: 200px;
    }

    .mockup-search .kbd {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 10px;
      padding: 1px 6px;
      background: rgba(245, 241, 235, 0.06);
      border-radius: 3px;
      color: rgba(245, 241, 235, 0.55);
    }

    .mockup-icon-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      color: rgba(245, 241, 235, 0.55);
      cursor: pointer;
      position: relative;
      transition: all 180ms;
    }

    .mockup-icon-btn:hover {
      background: rgba(245, 241, 235, 0.06);
      color: var(--bg);
    }

    .mockup-notif-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 2px var(--ink);
    }

    .mockup-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #5B2BC4, #B47AFF);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.02em;
      cursor: pointer;
      border: 1px solid rgba(245, 241, 235, 0.10);
      position: relative;
    }

    .mockup-avatar::after {
      content: "";
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4ADE80;
      border: 1.5px solid var(--ink);
    }

    /* Sidebar enhancements */
    .mockup-side {
      display: flex;
      flex-direction: column;
    }

    .mockup-side-section {
      flex: 0 0 auto;
    }

    .mockup-side-section+.mockup-side-section {
      margin-top: 4px;
    }

    .mockup-side-foot {
      margin-top: auto;
      padding: 10px 8px;
      display: grid;
      grid-template-columns: 24px 1fr 14px;
      gap: 8px;
      align-items: center;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 8px;
      cursor: pointer;
      transition: all 180ms;
    }

    .mockup-side-foot:hover {
      border-color: rgba(245, 241, 235, 0.14);
    }

    .mockup-side-foot .ws-mini {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--hot), var(--deep));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      color: var(--bg);
    }

    .mockup-side-foot .ws-meta {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .mockup-side-foot .ws-meta .name {
      font-size: 12px;
      font-weight: 500;
      color: var(--bg);
      letter-spacing: -0.011em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mockup-side-foot .ws-meta .sub {
      font-family: var(--mono);
      font-size: 9px;
      color: rgba(245, 241, 235, 0.45);
      letter-spacing: 0.04em;
    }

    .mockup-side-foot .ws-chev {
      color: rgba(245, 241, 235, 0.45);
      font-size: 12px;
    }

    .mockup-side li .icon-svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: rgba(245, 241, 235, 0.55);
    }

    .mockup-side li.active .icon-svg {
      color: var(--hot);
    }

    .mockup-side .ch-mark {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: 10px;
      color: white;
      font-weight: 700;
    }

    .mockup-side .ch-mark.meta {
      background: linear-gradient(135deg, #1877F2, #0d4cb3);
    }

    .mockup-side .ch-mark.google {
      background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC04 100%);
    }

    .mockup-side .ch-mark.youtube {
      background: linear-gradient(135deg, #FF0000, #b30000);
    }

    .mockup-side .ch-pulse {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ADE80;
      box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.18);
      flex-shrink: 0;
      animation: mockup-pulse 2.4s ease-in-out infinite;
    }

    .mockup-side li.ch-row {
      display: grid;
      grid-template-columns: 18px 1fr auto auto;
      gap: 8px;
      align-items: center;
    }

    /* Page header */
    .mockup-page-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }

    .mockup-breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--sans);
      font-size: 12px;
      color: rgba(245, 241, 235, 0.45);
      letter-spacing: -0.011em;
    }

    .mockup-breadcrumb .sep {
      color: rgba(245, 241, 235, 0.20);
    }

    .mockup-breadcrumb .active {
      color: var(--bg);
      font-weight: 500;
    }

    .mockup-page-actions {
      display: flex;
      gap: 6px;
    }

    .mockup-action {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.08);
      border-radius: 6px;
      font-family: var(--sans);
      font-size: 12px;
      color: rgba(245, 241, 235, 0.7);
      cursor: pointer;
      transition: all 180ms;
    }

    .mockup-action:hover {
      border-color: rgba(245, 241, 235, 0.20);
      color: var(--bg);
    }

    .mockup-action.icon-only {
      padding: 5px 6px;
    }

    .mockup-page-title {
      ;
      letter-spacing: -0.014em;
      color: var(--bg);
      margin: 4px 0 4px;
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .mockup-page-title .muted {
      font-size: 14px;
      color: rgba(245, 241, 235, 0.42);
      font-weight: 400;
      letter-spacing: 0;
      font-family: var(--sans);
    }

    .mockup-page-context {
      display: flex;
      gap: 12px;
      align-items: center;
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(245, 241, 235, 0.45);
      letter-spacing: 0.04em;
      margin-bottom: 8px;
    }

    .mockup-page-context .pip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .mockup-page-context .pip::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4ADE80;
      animation: mockup-pulse 2.4s ease-in-out infinite;
    }

    /* Stat tiles enhancements */
    .stat-tile {
      padding: 14px 16px;
    }

    .stat-tile-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .stat-tile-head .lbl {
      letter-spacing: 0.10em;
    }

    .stat-tile-head .info {
      width: 14px;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(245, 241, 235, 0.30);
      font-size: 11px;
      cursor: help;
    }

    .stat-tile .v-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
    }

    .stat-tile .v-row .v {
      font-family: var(--serif);
      font-size: 28px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.022em;
      margin: 0;
      line-height: 1;
    }

    .stat-tile-spark {
      width: 60px;
      height: 22px;
      flex-shrink: 0;
    }

    .stat-tile-spark svg {
      width: 100%;
      height: 100%;
    }

    /* Chart enhancements */
    .mockup-row-chart {
      padding: 16px 18px 14px;
    }

    .mockup-chart-head {
      align-items: baseline;
      margin-bottom: 6px;
    }

    .mockup-chart-title-wrap {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .mockup-chart-title-main {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      color: var(--bg);
      letter-spacing: -0.011em;
      text-transform: none;
    }

    .mockup-chart-title-sub {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.45);
      letter-spacing: 0.06em;
    }

    .mockup-chart-toggle {
      display: flex;
      gap: 0;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 6px;
      padding: 2px;
    }

    .mockup-chart-toggle span {
      padding: 3px 8px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.55);
      cursor: pointer;
      border-radius: 4px;
      font-weight: 500;
      transition: all 180ms;
    }

    .mockup-chart-toggle span.active {
      background: rgba(245, 241, 235, 0.10);
      color: var(--bg);
    }

    .mockup-chart-canvas {
      position: relative;
      height: 180px;
    }

    .mockup-chart-canvas svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .mockup-chart-legend {
      display: flex;
      gap: 16px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(245, 241, 235, 0.06);
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.55);
      letter-spacing: 0.06em;
    }

    .mockup-chart-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .mockup-chart-legend .swatch {
      width: 10px;
      height: 2px;
      background: var(--hot);
      border-radius: 1px;
    }

    .mockup-chart-legend .swatch.baseline {
      background: rgba(245, 241, 235, 0.30);
      background-image: linear-gradient(to right, rgba(245, 241, 235, 0.40) 0px, rgba(245, 241, 235, 0.40) 3px, transparent 3px, transparent 6px);
    }

    .mockup-chart-legend .v {
      color: var(--bg);
      font-weight: 600;
    }

    /* Decision feed enhancements */
    .mockup-row-feed {
      padding: 14px 18px;
    }

    .mockup-feed-head {
      gap: 14px;
      align-items: center;
    }

    .mockup-feed-title-wrap {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .mockup-feed-title-main {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      color: var(--bg);
      letter-spacing: -0.011em;
      text-transform: none;
    }

    .mockup-feed-title-sub {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.45);
      letter-spacing: 0.06em;
    }

    .mockup-feed-filters {
      display: flex;
      gap: 4px;
      flex: 1;
      margin-left: 16px;
    }

    .mockup-feed-filters span {
      padding: 4px 10px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.55);
      cursor: pointer;
      border-radius: 4px;
      font-weight: 500;
      transition: all 180ms;
    }

    .mockup-feed-filters span:hover {
      background: rgba(245, 241, 235, 0.04);
      color: var(--bg);
    }

    .mockup-feed-filters span.active {
      background: rgba(245, 241, 235, 0.08);
      color: var(--bg);
    }

    .mockup-feed-filters .count {
      margin-left: 4px;
      color: rgba(245, 241, 235, 0.40);
    }

    .mockup-feed-filters span.active .count {
      color: rgba(245, 241, 235, 0.65);
    }

    .mockup-feed-list li {
      grid-template-columns: 56px 22px 1fr auto;
      gap: 12px;
      padding: 10px 0;
    }

    .mockup-feed-agent {
      width: 22px;
      height: 22px;
      border-radius: 5px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #2A1F4D, #5B2BC4);
      border: 1px solid rgba(255, 107, 61, 0.30);
    }

    .mockup-feed-agent svg {
      width: 12px;
      height: 12px;
      color: #FFB088;
    }

    /* === LOGO MARQUEE === */
    .logo-strip {
      padding: 56px 0 48px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--bg);
      overflow: hidden;
      position: relative;
    }

    .logo-strip-label {
      text-align: center;
      margin-bottom: 28px;
    }

    .logo-strip-label .micro {
      color: var(--text-3);
    }

    .logo-strip-track {
      display: flex;
      gap: 64px;
      align-items: center;
      animation: marquee 40s linear infinite;
      white-space: nowrap;
      width: max-content;
    }

    .logo-strip-mask {
      position: relative;
      mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
    }

    .logo-strip-track .name {
      ;
      letter-spacing: -0.01em;
      color: var(--text);
      opacity: 0.55;
      transition: opacity 250ms;
    }

    .logo-strip-track .name:hover {
      opacity: 1;
    }

    .logo-strip-track .dot {
      width: 4px;
      height: 4px;
      background: var(--hot);
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* Per-brand typographic wordmarks (replace with real SVG logos when shipping) */
    .logo-strip-track .lg {
      display: inline-flex;
      align-items: center;
      height: 36px;
      color: var(--text);
      opacity: 0.55;
      transition: opacity 250ms;
      flex-shrink: 0;
    }

    .logo-strip-track .lg:hover {
      opacity: 1;
    }

    /* Image-based brand logos in the marquee */
    .logo-strip-track .lg-img {
      height: 32px;
      max-width: 100px;
      width: auto;
      flex-shrink: 0;
      object-fit: contain;
      opacity: 1;
      mix-blend-mode: multiply;
      transition: opacity 250ms var(--easing);
    }

    .logo-strip-track .lg-img:hover {
      opacity: 1;
    }

    /* BSC logo is white artwork on transparent — invert to dark so it reads on the cream bg */
    .logo-strip-track .lg-img--invert {
      filter: invert(1);
    }

    .logo-strip-track .lg-img--invert:hover {
      filter: invert(1) brightness(1.15);
    }

    .lg-bsc {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 500;
      font-style: italic;
      letter-spacing: -0.011em;
    }

    .lg-bsc .small {
      font-size: 14px;
      margin-left: 3px;
      letter-spacing: 0.04em;
    }

    .lg-instamart {
      font-family: var(--sans);
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.04em;
      text-transform: lowercase;
    }

    .lg-instamart .dot {
      width: 5px;
      height: 5px;
      background: var(--text);
      border-radius: 50%;
      margin-left: 2px;
      align-self: flex-end;
      margin-bottom: 4px;
    }

    .lg-bhanzu {
      font-family: var(--sans);
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -0.022em;
    }

    .lg-bhanzu::before {
      content: "";
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 4px;
      background: var(--text);
      margin-right: 6px;
      transform: rotate(45deg);
    }

    .lg-cars24 {
      font-family: var(--sans);
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.02em;
      text-transform: lowercase;
    }

    .lg-cars24 .num {
      font-weight: 900;
      letter-spacing: -0.04em;
      margin-left: -2px;
    }

    .lg-tvs {
      font-family: var(--sans);
      font-size: 26px;
      font-weight: 800;
      letter-spacing: 0.10em;
    }

    .lg-tvs::after {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--text);
      margin-left: 6px;
    }

    .lg-maruti {
      font-family: var(--sans);
      font-size: 22px;
      font-weight: 700;
      font-style: italic;
      letter-spacing: -0.014em;
    }

    .lg-maruti .suzuki {
      font-size: 13px;
      font-weight: 500;
      font-style: normal;
      letter-spacing: 0.05em;
      margin-left: 6px;
      opacity: 0.7;
      text-transform: uppercase;
    }

    .lg-bajaj {
      font-family: var(--sans);
      font-size: 24px;
      font-weight: 700;
      font-style: italic;
      letter-spacing: -0.02em;
    }

    .lg-razorpay {
      font-family: var(--sans);
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.01em;
      text-transform: lowercase;
    }

    .lg-razorpay .accent {
      color: var(--hot);
      margin-right: 0;
    }

    .lg-wpp {
      font-family: var(--sans);
      font-size: 26px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    /* === SECTION SHELLS === */
    section.std {
      padding: 140px 0;
      position: relative;
    }

    section.dark {
      background: var(--ink);
      color: var(--bg);
    }

    section.dark .micro {
      color: rgba(245, 241, 235, 0.5);
    }

    section.dark .h2 {
      color: var(--bg);
    }

    section.dark .h2 .muted {
      color: rgba(245, 241, 235, 0.32);
    }

    section.dark .lead {
      color: rgba(245, 241, 235, 0.65);
    }

    .sec-head {
      display: flex;
      align-items: baseline;
      gap: 40px;
      padding-top: 40px;
      border-top: 1px solid var(--line);
      margin-bottom: 56px;
    }

    section.dark .sec-head {
      border-top-color: rgba(245, 241, 235, 0.12);
    }

    .sec-num {
      font-family: var(--sans);
      font-size: 60px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }

    section.dark .sec-num {
      color: var(--bg);
    }

    /* === OLD WAY (concise) === */
    .oldway-illo {
      margin-top: 80px;
      padding: 56px;
      background: var(--ink);
      border-radius: var(--r-xl);
      color: var(--bg);
      position: relative;
      overflow: hidden;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 32px 80px -20px rgba(10, 10, 11, 0.18);
    }

    .oldway-illo::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 100% 50%, rgba(255, 107, 61, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 0% 100%, rgba(91, 43, 196, 0.10) 0%, transparent 60%);
      pointer-events: none;
    }

    .oldway-fig {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.4);
      font-weight: 500;
      margin-bottom: 36px;
      position: relative;
    }

    .oldway-illo svg {
      width: 100%;
      height: auto;
      max-width: 1100px;
      margin: 0 auto;
      display: block;
      position: relative;
    }

    .oldway-points {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 40px;
      padding-top: 36px;
      border-top: 1px solid rgba(245, 241, 235, 0.1);
      position: relative;
    }

    .oldway-point .pt-num {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hot);
      font-weight: 600;
      margin-bottom: 12px;
    }

    .oldway-point h4 {
      ;
      letter-spacing: -0.01em;
      line-height: 1.2;
      color: var(--bg);
      margin-bottom: 8px;
    }

    .oldway-point p {
      font-size: 14px;
      color: rgba(245, 241, 235, 0.65);
      line-height: 1.5;
    }

    /* === OLD WAY === */
    section.std#problem .sec-head {
      margin-bottom: 20px;
      padding-top: 18px;
    }

    section.std#problem .h2 {
      font-size: clamp(30px, 3.6vw, 44px);
    }

    section.std#problem .lead {
      font-size: 17px;
      max-width: 720px;
    }

    .oldway-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 40px;
      align-items: stretch;
    }

    .oldway-split-left {
      display: flex;
      flex-direction: column;
    }

    .oldway-split-left>.bento-card {
      flex: 1;
    }

    .oldway-split-right {
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 16px;
    }

    .oldway-split-right>.bento-card {
      display: flex;
      flex-direction: column;
    }

    .oldway-split .bento-card {
      padding: 20px;
    }

    .oldway-split .bento-card h3 {
      font-size: 18px;
      line-height: 1.22;
      letter-spacing: -0.011em;
      margin-bottom: 6px;
    }

    .oldway-split .bento-card p {
      font-size: 13.5px;
      line-height: 1.45;
    }

    /* === BENTO: OLD WAY === */
    .bento-old {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(180px, auto);
      gap: 16px;
      margin-top: 80px;
    }

    .bento-card {
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 28px;
      position: relative;
      overflow: hidden;
      transition: transform 250ms var(--easing), border-color 250ms;
    }

    .bento-card:hover {
      border-color: var(--text-3);
      transform: translateY(-3px);
    }

    .bento-card .fig {
      margin-bottom: 18px;
    }

    .bento-card h3 {
      ;
      letter-spacing: -0.01em;
      line-height: 1.2;
      margin-bottom: 10px;
    }

    .bento-card p {
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.55;
    }

    .bento-card.span-3 {
      grid-column: span 3;
    }

    .bento-card.span-2 {
      grid-column: span 2;
    }

    .bento-card.span-4 {
      grid-column: span 4;
    }

    .bento-card.row-2 {
      grid-row: span 2;
    }

    .bento-card.dark {
      background: var(--ink);
      color: var(--bg);
      border-color: rgba(245, 241, 235, 0.08);
    }

    .bento-card.dark .fig {
      color: rgba(245, 241, 235, 0.45);
    }

    .bento-card.dark h3 {
      color: var(--bg);
    }

    .bento-card.dark p {
      color: rgba(245, 241, 235, 0.65);
    }

    .bento-card.featured {
      background:
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(255, 107, 61, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 0% 100%, rgba(91, 43, 196, 0.12) 0%, transparent 60%),
        var(--ink);
    }

    .bento-clock {
      display: flex;
      gap: 6px;
      align-items: flex-end;
      margin-top: auto;
      align-self: flex-end;
      padding-top: 14px;
    }

    .bento-clock .bar {
      width: 6px;
      background: rgba(255, 107, 61, 0.35);
      border-radius: 2px;
    }

    .bento-clock .bar.h-on {
      background: var(--hot);
      height: 30px;
    }

    .bento-clock .bar.h1 {
      height: 10px;
    }

    .bento-clock .bar.h2 {
      height: 16px;
    }

    .bento-clock .bar.h3 {
      height: 22px;
    }

    .bento-clock .bar.h4 {
      height: 30px;
    }

    .bento-clock .bar.h5 {
      height: 22px;
    }

    .bento-clock .bar.h6 {
      height: 16px;
    }

    .bento-mini-chart svg {
      width: 100%;
    }

    .bento-stat-big {
      ;
      line-height: 1;
      letter-spacing: -0.022em;
      margin-top: 8px;
    }

    .bento-stat-big .unit {
      font-size: 0.55em;
      color: var(--hot);
      font-weight: 400;
      margin-left: 4px;
    }

    /* === MONITORING BOARD (Linear-style symbolic monitoring) === */
    .mon-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-top: 14px;
      margin-bottom: 8px;
    }

    .mon-stat {
      padding: 8px 10px;
      background: rgba(245, 241, 235, 0.025);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 8px;
    }

    .mon-stat-v {
      ;
      color: var(--bg);
      letter-spacing: -0.02em;
      line-height: 1;
      margin-bottom: 3px;
    }

    .mon-stat-v .suf {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.45);
      font-weight: 500;
      letter-spacing: 0;
    }

    .mon-stat-l {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      font-weight: 500;
      line-height: 1.25;
    }

    .mon-block {
      margin-top: 8px;
      padding: 10px 12px;
      background: rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 10px;
    }

    .mon-block-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
    }

    .mon-block-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.55);
      font-weight: 500;
    }

    .mon-block-meta {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      color: rgba(245, 241, 235, 0.45);
    }

    /* channel rows (richer) */
    .mon-channels {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .mon-ch {
      display: grid;
      grid-template-columns: 20px 1fr 60px auto auto;
      gap: 8px;
      align-items: center;
      padding: 6px 8px;
      background: rgba(245, 241, 235, 0.02);
      border: 1px solid rgba(245, 241, 235, 0.04);
      border-radius: 6px;
    }

    .mon-ch-mark {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: 11px;
      color: white;
      font-weight: 600;
    }

    .mon-mark-meta {
      background: linear-gradient(135deg, #1877F2, #0d4cb3);
    }

    .mon-mark-google {
      background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC04 100%);
    }

    .mon-mark-youtube {
      background: linear-gradient(135deg, #FF0000, #b30000);
    }

    .mon-ch-name {
      font-size: 12px;
      color: var(--bg);
      font-weight: 500;
      line-height: 1.2;
    }

    .mon-ch-sub {
      font-size: 9.5px;
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.02em;
      margin-top: 1px;
    }

    .mon-ch-spark {
      height: 18px;
    }

    .mon-ch-spark svg {
      width: 100%;
      height: 100%;
    }

    .mon-ch-rate {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--hot);
      letter-spacing: 0.04em;
      font-weight: 600;
    }

    .mon-ch-rate span {
      color: rgba(245, 241, 235, 0.5);
      font-weight: 500;
    }

    .mon-ch-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--mono);
      font-size: 9px;
      color: #4ADE80;
      letter-spacing: 0.10em;
      font-weight: 600;
    }

    /* heatmap */
    .mon-heatmap {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .mon-heat-row {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 8px;
      align-items: center;
    }

    .mon-heat-label {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.45);
      font-weight: 600;
    }

    .mon-heat-cells {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      gap: 2px;
    }

    .mon-heat-cells .hc {
      aspect-ratio: 1;
      border-radius: 2px;
      display: block;
    }

    .mon-heat-cells .h0 {
      background: rgba(245, 241, 235, 0.04);
    }

    .mon-heat-cells .h1 {
      background: rgba(255, 107, 61, 0.12);
    }

    .mon-heat-cells .h2 {
      background: rgba(255, 107, 61, 0.22);
    }

    .mon-heat-cells .h3 {
      background: rgba(255, 107, 61, 0.40);
    }

    .mon-heat-cells .h4 {
      background: rgba(255, 107, 61, 0.62);
    }

    .mon-heat-cells .h5 {
      background: rgba(255, 107, 61, 0.85);
    }

    .mon-heat-cells .active {
      box-shadow: 0 0 0 1.5px var(--hot), 0 0 8px rgba(255, 107, 61, 0.5);
    }

    .mon-heat-axis {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      margin-top: 5px;
      padding-left: 56px;
      font-family: var(--mono);
      font-size: 8.5px;
      color: rgba(245, 241, 235, 0.35);
      letter-spacing: 0.04em;
    }

    .mon-heat-axis span:nth-child(1) {
      text-align: left;
    }

    .mon-heat-axis span:nth-child(7) {
      text-align: right;
    }

    .mon-heat-axis span {
      text-align: center;
    }

    /* Now watching */
    .mon-watch {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .mw-tile {
      padding: 12px 14px;
      background: rgba(245, 241, 235, 0.02);
      border: 1px solid rgba(245, 241, 235, 0.05);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .mw-v {
      ;
      color: var(--bg);
      letter-spacing: -0.014em;
      line-height: 1;
    }

    .mw-l {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.45);
      font-weight: 500;
    }

    /* === CAPABILITIES === */
    section.std#capabilities .sec-head {
      margin-bottom: 20px;
      padding-top: 18px;
    }

    section.std#capabilities .h2 {
      font-size: clamp(30px, 3.6vw, 44px);
    }

    section.std#capabilities .lead {
      font-size: 17px;
      max-width: 720px;
    }

    .cap-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 28px;
      align-items: stretch;
      /* match column heights for symmetry */
    }

    .cap-split .cap-bento {
      margin: 0;
      padding: 20px;
    }

    .cap-split-left {
      display: flex;
      flex-direction: column;
    }

    .cap-split-left .cap-bento {
      flex: 1;
    }

    .cap-split-right {
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      /* equal-height stacked cards */
      gap: 12px;
    }

    /* Removed icon chips — headline does the work */
    .cap-split .cap-bento .ic-chip {
      display: none;
    }

    .cap-split .cap-bento h3 {
      font-size: 18px;
      margin: 0 0 6px;
      line-height: 1.22;
      letter-spacing: -0.011em;
    }

    .cap-split .cap-bento p {
      font-size: 13.5px;
      line-height: 1.45;
    }

    .cap-split .cap-bento .cap-mini {
      padding: 10px 12px;
      margin-top: 10px;
    }

    /* === CAPABILITIES — bento grid (zigzag, asymmetric) === */
    .cap-grid-4 {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: minmax(380px, auto);
      gap: 16px;
      margin-top: 40px;
      align-items: stretch;
    }

    /* Zigzag: card 1 wide-left, card 2 narrow-right, card 3 narrow-left, card 4 wide-right */
    .cap-grid-4>.cap-bento:nth-child(1) {
      grid-column: span 8;
    }

    .cap-grid-4>.cap-bento:nth-child(2) {
      grid-column: span 4;
    }

    .cap-grid-4>.cap-bento:nth-child(3) {
      grid-column: span 4;
    }

    .cap-grid-4>.cap-bento:nth-child(4) {
      grid-column: span 8;
    }

    .cap-grid-4 .cap-bento {
      margin: 0;
      padding: 28px 30px 24px;
      display: flex;
      flex-direction: column;
      min-height: 380px;
    }

    @media (max-width: 980px) {
      .cap-grid-4 {
        grid-template-columns: 1fr 1fr;
      }

      .cap-grid-4>.cap-bento:nth-child(1),
      .cap-grid-4>.cap-bento:nth-child(2),
      .cap-grid-4>.cap-bento:nth-child(3),
      .cap-grid-4>.cap-bento:nth-child(4) {
        grid-column: span 1;
      }
    }

    @media (max-width: 640px) {
      .cap-grid-4 {
        grid-template-columns: 1fr;
      }
    }

    .cap-grid-4 .cap-bento .ic-chip {
      display: none;
    }

    .cap-grid-4 .cap-bento .cap-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      margin-bottom: 14px;
    }

    .cap-grid-4 .cap-bento.dark .cap-eyebrow {
      color: rgba(245, 241, 235, 0.55);
    }

    .cap-grid-4 .cap-bento .cap-eyebrow .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.18);
    }

    .cap-grid-4 .cap-bento h3 {
      font-size: 22px;
      line-height: 1.18;
      letter-spacing: -0.018em;
      margin: 0 0 8px;
      font-weight: 600;
    }

    .cap-grid-4 .cap-bento p {
      font-size: 14px;
      line-height: 1.5;
      margin: 0 0 18px;
      max-width: 44ch;
    }

    .cap-grid-4 .cap-mini {
      margin-top: auto;
      padding: 14px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 10px;
    }

    .cap-grid-4 .cap-bento.dark .cap-mini {
      background: rgba(245, 241, 235, 0.03);
      border-color: rgba(245, 241, 235, 0.08);
    }

    /* — card #1: deployment grid — */
    .deploy-grid {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 10px 14px;
      align-items: center;
      font-size: 12px;
    }

    .deploy-grid .dp-mark {
      width: 22px;
      height: 22px;
      border-radius: 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--bg);
    }

    .dp-mark.dp-meta {
      background: linear-gradient(135deg, #1877F2, #0866FF);
    }

    .dp-mark.dp-google {
      background: linear-gradient(135deg, #4285F4, #34A853);
    }

    .dp-mark.dp-yt {
      background: linear-gradient(135deg, #FF0033, #C4001A);
    }

    .deploy-grid .dp-name {
      font-weight: 500;
      color: rgba(245, 241, 235, 0.9);
      letter-spacing: -0.005em;
    }

    .deploy-grid .dp-name span {
      display: block;
      font-family: var(--mono);
      font-size: 9.5px;
      color: rgba(245, 241, 235, 0.45);
      letter-spacing: 0.06em;
      margin-top: 1px;
    }

    .deploy-grid .dp-status {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.08em;
      color: var(--hot);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .deploy-grid .dp-status .live-dot {
      background: var(--hot);
    }

    .deploy-grid .dp-status.deploying {
      color: #FBBF24;
    }

    .deploy-grid .dp-status.deploying .live-dot {
      background: #FBBF24;
      box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
      animation: cap-pulse 1.4s ease-in-out infinite;
    }

    .deploy-grid .dp-num {
      font-family: var(--mono);
      font-size: 10.5px;
      color: rgba(245, 241, 235, 0.65);
      text-align: right;
    }

    @keyframes cap-pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.55;
        transform: scale(0.85);
      }
    }

    .deploy-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      margin-top: 12px;
      border-top: 1px dashed rgba(245, 241, 235, 0.1);
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.5);
      letter-spacing: 0.06em;
    }

    .deploy-foot strong {
      color: rgba(245, 241, 235, 0.85);
      font-weight: 500;
    }

    /* — card #1 (Linear-style ship feed) — */
    .ship-feed {
      display: flex;
      flex-direction: column;
    }

    .ship-feed-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0 8px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.06);
      margin-bottom: 6px;
      gap: 12px;
    }

    .ship-feed-head .title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 500;
      color: var(--bg);
      letter-spacing: -0.011em;
    }

    .ship-feed-head .title .pip {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.20);
      animation: cap-pulse 2.4s ease-in-out infinite;
    }

    .ship-feed-head .stats {
      display: inline-flex;
      gap: 12px;
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.55);
      letter-spacing: 0.04em;
    }

    .ship-feed-head .stats strong {
      color: var(--bg);
      font-weight: 600;
    }

    .ship-row {
      display: grid;
      grid-template-columns: 40px 22px 60px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 10px 0;
      font-size: 12.5px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.05);
    }

    .ship-row:last-child {
      border-bottom: none;
    }

    .ship-row .ts {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.42);
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .ship-row .ch {
      width: 18px;
      height: 18px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }

    .ship-row .ch.meta {
      background: linear-gradient(135deg, #0080FB, #0064E0);
    }

    .ship-row .ch.google {
      background: white;
    }

    .ship-row .ch.youtube {
      background: #FF0000;
    }

    .ship-row .ch svg {
      display: block;
    }

    .ship-row .id {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.55);
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .ship-row .desc {
      color: rgba(245, 241, 235, 0.85);
      letter-spacing: -0.005em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11.5px;
    }

    .ship-row .desc strong {
      font-weight: 500;
      color: var(--bg);
    }

    .ship-row .desc .accent {
      color: var(--hot);
    }

    .ship-row .verdict {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.06em;
      color: #4ADE80;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .ship-row .verdict::before {
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.16);
    }

    .ship-row .verdict.shipping {
      color: #FBBF24;
    }

    .ship-row .verdict.shipping::before {
      box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.18);
      animation: cap-pulse 1.4s ease-in-out infinite;
    }

    .ship-foot {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(245, 241, 235, 0.06);
      margin-top: 8px;
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.55);
      letter-spacing: 0.04em;
    }

    .ship-foot .more strong {
      color: var(--bg);
      font-weight: 600;
    }

    .ship-foot .ch-stats {
      display: flex;
      gap: 12px;
      margin-left: auto;
    }

    .ship-foot .ch-stat {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.7);
    }

    .ship-foot .ch-stat .ch {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .ship-foot .ch-stat .ch.meta {
      background: linear-gradient(135deg, #0080FB, #0064E0);
    }

    .ship-foot .ch-stat .ch.google {
      background: white;
    }

    .ship-foot .ch-stat .ch.youtube {
      background: #FF0000;
    }

    .ship-foot .ch-stat .ch svg {
      display: block;
    }

    .ship-foot .ch-stat strong {
      color: var(--bg);
      font-weight: 600;
    }

    /* — card #2 (Linear-style goal + suggestions) — */
    .kpi-linear {
      display: flex;
      flex-direction: column;
    }

    .kpi-goal-block {
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 14px;
    }

    .kpi-goal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .kpi-goal-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      font-weight: 500;
    }

    .kpi-goal-label svg {
      color: var(--hot);
    }

    .kpi-goal-edit {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      font-family: var(--sans);
      font-size: 11px;
      color: var(--text-3);
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: 5px;
      cursor: pointer;
      letter-spacing: -0.011em;
      transition: all 180ms;
    }

    .kpi-goal-edit:hover {
      color: var(--text);
      border-color: var(--text-3);
    }

    .kpi-goal-edit svg {
      color: var(--text-3);
    }

    .kpi-targets {
      display: flex;
      gap: 14px;
      align-items: baseline;
      font-family: var(--sans);
      font-size: 14px;
      color: var(--text);
      margin-bottom: 12px;
    }

    .kpi-targets .lbl {
      font-family: var(--mono);
      font-size: 9px;
      color: var(--text-3);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-right: 6px;
      font-weight: 600;
    }

    .kpi-targets strong {
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.014em;
    }

    .kpi-targets-sep {
      color: var(--line);
      font-weight: 400;
    }

    .kpi-progress-track {
      height: 4px;
      background: var(--bg-deeper);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .kpi-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--hot), #FFB088);
      border-radius: 3px;
    }

    .kpi-progress-meta {
      display: flex;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: 10px;
      color: var(--text-3);
      letter-spacing: 0.04em;
    }

    .kpi-progress-meta strong {
      color: var(--text);
      font-weight: 600;
    }

    .kpi-sugs-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      font-weight: 500;
      margin-bottom: 6px;
    }

    .kpi-sugs-head .ct {
      font-family: var(--mono);
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 1px 7px;
      font-size: 9px;
      color: var(--text-2);
      letter-spacing: 0.04em;
    }

    .kpi-sug-list {
      display: flex;
      flex-direction: column;
    }

    .kpi-sug-row {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 12px;
      align-items: start;
      padding: 11px 0;
      border-bottom: 1px solid var(--line-faint);
    }

    .kpi-sug-row:last-child {
      border-bottom: none;
      padding-bottom: 4px;
    }

    .kpi-sug-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .kpi-sug-icon svg {
      color: white;
    }

    .kpi-sug-icon.scale {
      background: #16A34A;
    }

    .kpi-sug-icon.shift {
      background: var(--hot);
    }

    .kpi-sug-icon.kill {
      background: var(--text);
    }

    .kpi-sug-content {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .kpi-sug-row-1 {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 13px;
      letter-spacing: -0.011em;
    }

    .kpi-sug-tag {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      font-weight: 600;
    }

    .kpi-sug-name {
      color: var(--text);
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .kpi-sug-row-2 {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--text-3);
      letter-spacing: 0.02em;
    }

    .kpi-sug-row-2 strong {
      color: #16A34A;
      font-weight: 600;
    }

    /* — card #3 (Linear-style insight miner) — */
    .insight-miner {
      display: flex;
      flex-direction: column;
    }

    .im-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 14px;
      gap: 8px;
    }

    .im-scope {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--sans);
      font-size: 12px;
      color: var(--text);
      letter-spacing: -0.011em;
      font-weight: 500;
      min-width: 0;
    }

    .im-scope svg {
      color: var(--text-3);
      flex-shrink: 0;
    }

    .im-scope .scope-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .im-scope strong {
      font-weight: 600;
    }

    .im-pulse {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #16A34A;
      font-weight: 600;
      flex-shrink: 0;
    }

    .im-pulse .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #16A34A;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
      animation: cap-pulse 2.4s ease-in-out infinite;
    }

    .im-sec-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      font-weight: 500;
      margin-bottom: 4px;
    }

    .im-sec-head .ct {
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 1px 7px;
      font-size: 9px;
      color: var(--text-2);
      letter-spacing: 0.04em;
    }

    .im-list {
      display: flex;
      flex-direction: column;
    }

    .im-row {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 12px;
      align-items: start;
      padding: 11px 0;
      border-bottom: 1px solid var(--line-faint);
    }

    .im-row:last-child {
      border-bottom: none;
      padding-bottom: 4px;
    }

    .im-icon {
      width: 22px;
      height: 22px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 700;
      color: white;
      margin-top: 1px;
    }

    .im-icon svg {
      color: white;
    }

    .im-icon.hook {
      background: var(--hot);
    }

    .im-icon.claim {
      background: #5B2BC4;
    }

    .im-icon.search {
      background: #16A34A;
    }

    .im-icon.comp {
      background: #F2453D;
    }

    .im-content {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .im-row-1 {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 13px;
      letter-spacing: -0.011em;
      color: var(--text);
      min-width: 0;
    }

    .im-tag {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      font-weight: 600;
      flex-shrink: 0;
    }

    .im-title {
      color: var(--text);
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .im-title strong {
      font-weight: 600;
    }

    .im-row-2 {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--text-3);
      letter-spacing: 0.02em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .im-row-2 strong {
      color: var(--text);
      font-weight: 600;
    }

    /* === Dark Linear "screen" treatment for cards 2 & 3 === */
    .cap-grid-4 .cap-mini.dark-screen {
      background: #0E0E10;
      border: 1px solid rgba(245, 241, 235, 0.08);
      color: var(--bg);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 24px -12px rgba(10, 10, 11, 0.40);
      position: relative;
      overflow: hidden;
    }

    .cap-grid-4 .cap-mini.dark-screen::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 107, 61, 0.30), transparent);
      pointer-events: none;
    }

    /* KPI overrides */
    .dark-screen .kpi-goal-block {
      border-bottom-color: rgba(245, 241, 235, 0.08);
    }

    .dark-screen .kpi-goal-label {
      color: rgba(245, 241, 235, 0.55);
    }

    .dark-screen .kpi-goal-edit {
      background: rgba(245, 241, 235, 0.05);
      border-color: rgba(245, 241, 235, 0.10);
      color: rgba(245, 241, 235, 0.7);
    }

    .dark-screen .kpi-goal-edit svg {
      color: rgba(245, 241, 235, 0.55);
    }

    .dark-screen .kpi-goal-edit:hover {
      color: var(--bg);
      border-color: rgba(245, 241, 235, 0.25);
    }

    .dark-screen .kpi-targets {
      color: var(--bg);
    }

    .dark-screen .kpi-targets .lbl {
      color: rgba(245, 241, 235, 0.45);
    }

    .dark-screen .kpi-targets strong {
      color: var(--bg);
    }

    .dark-screen .kpi-targets-sep {
      color: rgba(245, 241, 235, 0.18);
    }

    .dark-screen .kpi-progress-track {
      background: rgba(245, 241, 235, 0.08);
    }

    .dark-screen .kpi-progress-meta {
      color: rgba(245, 241, 235, 0.55);
    }

    .dark-screen .kpi-progress-meta strong {
      color: var(--bg);
    }

    .dark-screen .kpi-sugs-head {
      color: rgba(245, 241, 235, 0.5);
    }

    .dark-screen .kpi-sugs-head .ct {
      background: rgba(245, 241, 235, 0.05);
      border-color: rgba(245, 241, 235, 0.10);
      color: rgba(245, 241, 235, 0.7);
    }

    .dark-screen .kpi-sug-row {
      border-bottom-color: rgba(245, 241, 235, 0.05);
    }

    .dark-screen .kpi-sug-icon.kill {
      background: rgba(245, 241, 235, 0.18);
    }

    .dark-screen .kpi-sug-tag {
      color: rgba(245, 241, 235, 0.5);
    }

    .dark-screen .kpi-sug-name {
      color: var(--bg);
    }

    .dark-screen .kpi-sug-row-2 {
      color: rgba(245, 241, 235, 0.55);
    }

    .dark-screen .kpi-sug-row-2 strong {
      color: #4ADE80;
    }

    /* Insight Miner overrides */
    .dark-screen .im-head {
      border-bottom-color: rgba(245, 241, 235, 0.10);
    }

    .dark-screen .im-scope {
      color: var(--bg);
    }

    .dark-screen .im-scope svg {
      color: rgba(245, 241, 235, 0.55);
    }

    .dark-screen .im-scope strong {
      color: var(--bg);
    }

    .dark-screen .im-sec-head {
      color: rgba(245, 241, 235, 0.5);
    }

    .dark-screen .im-sec-head .ct {
      background: rgba(245, 241, 235, 0.05);
      border-color: rgba(245, 241, 235, 0.10);
      color: rgba(245, 241, 235, 0.7);
    }

    .dark-screen .im-row {
      border-bottom-color: rgba(245, 241, 235, 0.05);
    }

    .dark-screen .im-row-1 {
      color: var(--bg);
    }

    .dark-screen .im-tag {
      color: rgba(245, 241, 235, 0.5);
    }

    .dark-screen .im-title {
      color: var(--bg);
    }

    .dark-screen .im-title strong {
      color: var(--bg);
    }

    .dark-screen .im-row-2 {
      color: rgba(245, 241, 235, 0.55);
    }

    .dark-screen .im-row-2 strong {
      color: var(--bg);
    }

    /* — card #2: KPI optimization actions — */
    .kpi-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 12px;
    }

    .kpi-head-l {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .kpi-head-l .kpi-label {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
    }

    .kpi-head-l .kpi-target {
      font-size: 13px;
      color: var(--text);
      font-weight: 500;
      letter-spacing: -0.005em;
    }

    .kpi-head-l .kpi-target strong {
      color: var(--hot);
      font-weight: 600;
    }

    .kpi-head-r .kpi-roas {
      font-family: var(--display);
      font-size: 22px;
      letter-spacing: -0.022em;
      font-weight: 600;
      color: var(--text);
      line-height: 1;
    }

    .kpi-head-r .kpi-delta {
      display: block;
      text-align: right;
      font-family: var(--mono);
      font-size: 9.5px;
      color: #1F7A4D;
      margin-top: 2px;
    }

    .kpi-actions {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .kpi-row {
      display: grid;
      grid-template-columns: 60px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 7px 10px;
      border-radius: 5px;
      font-size: 11.5px;
      border-left: 2px solid;
    }

    .kpi-row.scale {
      background: rgba(74, 222, 128, 0.06);
      border-color: #4ADE80;
    }

    .kpi-row.shift {
      background: rgba(255, 107, 61, 0.06);
      border-color: var(--hot);
    }

    .kpi-row.kill {
      background: rgba(10, 10, 11, 0.04);
      border-color: var(--text-3);
    }

    .kpi-row .kpi-tag {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
    }

    .kpi-row.scale .kpi-tag {
      color: #1F7A4D;
    }

    .kpi-row.shift .kpi-tag {
      color: var(--deep);
    }

    .kpi-row.kill .kpi-tag {
      color: var(--text-3);
    }

    .kpi-row .kpi-text {
      color: var(--text);
    }

    .kpi-row .kpi-impact {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--text-3);
    }

    /* — card #3: intelligence feed — */
    .intel-feed {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .intel-item {
      display: grid;
      grid-template-columns: 12px 1fr auto;
      gap: 10px;
      align-items: flex-start;
      padding: 9px 11px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: 6px;
      font-size: 12px;
      line-height: 1.4;
    }

    .intel-item .intel-pulse {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--hot);
      margin-top: 5px;
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.14);
    }

    .intel-item.cool .intel-pulse {
      background: var(--text-3);
      box-shadow: none;
    }

    .intel-item .intel-text {
      color: var(--text);
    }

    .intel-item .intel-text strong {
      color: var(--text);
      font-weight: 600;
    }

    .intel-item .intel-text .src {
      display: block;
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--text-3);
      letter-spacing: 0.06em;
      margin-top: 3px;
    }

    .intel-item .intel-time {
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--text-3);
      white-space: nowrap;
    }

    /* — card #4: decision log / audit trail — */
    .audit-log {
      display: flex;
      flex-direction: column;
    }

    .audit-row {
      display: grid;
      grid-template-columns: 12px 78px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 8px 0;
      font-size: 12px;
      border-bottom: 1px dashed rgba(245, 241, 235, 0.06);
    }

    .audit-row:last-child {
      border-bottom: 0;
    }

    .audit-row .audit-mark {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(245, 241, 235, 0.5);
    }

    .audit-row.scaled .audit-mark {
      background: #4ADE80;
    }

    .audit-row.paused .audit-mark {
      background: #FBBF24;
    }

    .audit-row.killed .audit-mark {
      background: var(--hot);
    }

    .audit-row .audit-time {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.5);
      letter-spacing: 0.04em;
    }

    .audit-row .audit-text {
      color: rgba(245, 241, 235, 0.88);
      letter-spacing: -0.005em;
    }

    .audit-row .audit-text strong {
      color: var(--bg);
      font-weight: 600;
    }

    .audit-row .audit-tag {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      padding: 2px 7px;
      border-radius: 9999px;
      border: 1px solid rgba(245, 241, 235, 0.18);
      color: rgba(245, 241, 235, 0.65);
    }

    .audit-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed rgba(245, 241, 235, 0.12);
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.5);
    }

    .audit-foot .rollback-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      background: rgba(245, 241, 235, 0.08);
      border: 1px solid rgba(245, 241, 235, 0.16);
      border-radius: 9999px;
      color: var(--bg);
    }

    /* === BENTO: CAPABILITIES === */
    .bento-cap {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(220px, auto);
      gap: 16px;
      margin-top: 80px;
    }

    .cap-bento {
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 32px;
      position: relative;
      overflow: hidden;
      transition: transform 250ms var(--easing), border-color 250ms;
    }

    .cap-bento:hover {
      transform: translateY(-3px);
      border-color: var(--hot);
    }

    .cap-bento.span-3 {
      grid-column: span 3;
    }

    .cap-bento.span-2 {
      grid-column: span 2;
    }

    .cap-bento.span-4 {
      grid-column: span 4;
    }

    .cap-bento.row-2 {
      grid-row: span 2;
    }

    .cap-bento.dark {
      background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 107, 61, 0.14) 0%, transparent 70%),
        var(--ink);
      color: var(--bg);
      border-color: rgba(245, 241, 235, 0.08);
    }

    .cap-bento.dark h3 {
      color: var(--bg);
    }

    .cap-bento.dark p {
      color: rgba(245, 241, 235, 0.65);
    }

    .cap-bento.dark .fig {
      color: rgba(245, 241, 235, 0.5);
    }

    .cap-bento h3 {
      ;
      letter-spacing: -0.01em;
      margin: 18px 0 10px;
    }

    .cap-bento p {
      color: var(--text-2);
      font-size: 15px;
    }

    .cap-bento .ic-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(255, 107, 61, 0.16), rgba(255, 176, 136, 0.06));
      border: 1px solid rgba(255, 107, 61, 0.25);
      color: var(--hot);
    }

    .cap-bento.dark .ic-chip {
      background: linear-gradient(135deg, rgba(255, 107, 61, 0.2), rgba(255, 107, 61, 0.05));
      border-color: rgba(255, 107, 61, 0.3);
    }

    /* mini-chart inside capability card */
    .cap-mini {
      margin-top: 20px;
      padding: 16px;
      background: rgba(10, 10, 11, 0.04);
      border-radius: 10px;
      border: 1px solid rgba(217, 212, 204, 0.4);
    }

    .cap-bento.dark .cap-mini {
      background: rgba(245, 241, 235, 0.04);
      border-color: rgba(245, 241, 235, 0.06);
    }

    /* === FLYWHEEL animations & interactions === */
    @keyframes fw-spin-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes fw-spin-slow-rev {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(-360deg);
      }
    }

    @keyframes fw-orbit-1 {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes fw-orbit-2 {
      from {
        transform: rotate(90deg);
      }

      to {
        transform: rotate(450deg);
      }
    }

    @keyframes fw-orbit-3 {
      from {
        transform: rotate(180deg);
      }

      to {
        transform: rotate(540deg);
      }
    }

    @keyframes fw-dash-flow {
      from {
        stroke-dashoffset: 0;
      }

      to {
        stroke-dashoffset: -180;
      }
    }

    @keyframes fw-node-pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.18);
        opacity: 0.7;
      }
    }

    @keyframes fw-core-breath {

      0%,
      100% {
        opacity: 0.7;
      }

      50% {
        opacity: 1;
      }
    }

    @keyframes fw-stage-cycle {

      0%,
      24%,
      100% {
        /* node 1 active */
      }
    }

    /* === FEATHER STRENGTHENING — visual: data flows IN, ripples flow OUT === */
    /* Data packets flowing from each node toward the center */
    @keyframes fw-packet-top {
      0% {
        transform: translate(700px, 240px);
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        transform: translate(700px, 380px);
        opacity: 0;
      }
    }

    @keyframes fw-packet-right {
      0% {
        transform: translate(920px, 460px);
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        transform: translate(780px, 460px);
        opacity: 0;
      }
    }

    @keyframes fw-packet-bottom {
      0% {
        transform: translate(700px, 680px);
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        transform: translate(700px, 540px);
        opacity: 0;
      }
    }

    @keyframes fw-packet-left {
      0% {
        transform: translate(480px, 460px);
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        transform: translate(620px, 460px);
        opacity: 0;
      }
    }

    .fw-packet {
      transform-origin: 0 0;
      transform-box: fill-box;
      animation: fw-packet-top 7s ease-in-out infinite;
    }

    .fw-packet.p1 {
      animation: fw-packet-top 7s ease-in-out infinite;
      animation-delay: 0s;
    }

    .fw-packet.p2 {
      animation: fw-packet-right 7s ease-in-out infinite;
      animation-delay: 1.75s;
    }

    .fw-packet.p3 {
      animation: fw-packet-bottom 7s ease-in-out infinite;
      animation-delay: 3.5s;
    }

    .fw-packet.p4 {
      animation: fw-packet-left 7s ease-in-out infinite;
      animation-delay: 5.25s;
    }

    /* Strengthening ripples emitting outward from Feather core (signifies growth) */
    @keyframes fw-ripple {
      0% {
        r: 96;
        opacity: 0.7;
        stroke-width: 2;
      }

      80% {
        opacity: 0.05;
      }

      100% {
        r: 200;
        opacity: 0;
        stroke-width: 0.4;
      }
    }

    .fw-ripple {
      transform-origin: 700px 460px;
      animation: fw-ripple 10s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
    }

    .fw-ripple.r2 {
      animation-delay: 2.5s;
    }

    .fw-ripple.r3 {
      animation-delay: 5.0s;
    }

    .fw-ripple.r4 {
      animation-delay: 7.5s;
    }

    /* Growth-rings inside the badge — accumulate over time */
    @keyframes fw-growth-ring {
      0% {
        opacity: 0;
        transform: scale(0.85);
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0.55;
        transform: scale(1);
      }
    }

    .fw-growth {
      transform-origin: 700px 460px;
      transform-box: fill-box;
      animation: fw-growth-ring 20s ease-out infinite;
    }

    .fw-growth.g2 {
      animation-delay: 6.7s;
    }

    .fw-growth.g3 {
      animation-delay: 13.4s;
    }

    @media (prefers-reduced-motion: reduce) {

      .fw-packet,
      .fw-ripple,
      .fw-growth {
        animation: none !important;
      }
    }

    /* the 24 tick marks slowly rotate clockwise */
    .fw-ticks-rotate {
      transform-origin: 700px 460px;
      animation: fw-spin-slow 150s linear infinite;
    }

    /* main dashed wheel — dash flow */
    .fw-wheel-flow {
      animation: fw-dash-flow 10s linear infinite;
    }

    /* counter-rotating inner depth ring */
    .fw-inner-rotate {
      transform-origin: 700px 460px;
      animation: fw-spin-slow-rev 100s linear infinite;
    }

    /* orbiting particle groups */
    .fw-orbit-grp {
      transform-origin: 700px 460px;
      animation: fw-orbit-1 18s linear infinite;
    }

    .fw-orbit-grp.o2 {
      animation: fw-orbit-2 24s linear infinite;
    }

    .fw-orbit-grp.o3 {
      animation: fw-orbit-3 30s linear infinite;
    }

    /* primary nodes pulse subtly */
    .fw-node-halo {
      transform-origin: center;
      transform-box: fill-box;
      animation: fw-node-pulse 5s ease-in-out infinite;
    }

    .fw-node-halo.n2 {
      animation-delay: 1.25s;
    }

    .fw-node-halo.n3 {
      animation-delay: 2.5s;
    }

    .fw-node-halo.n4 {
      animation-delay: 3.75s;
    }

    /* core breathing */
    .fw-core-aura {
      transform-origin: 700px 460px;
      animation: fw-core-breath 7s ease-in-out infinite;
    }

    /* hover interaction — labels are wrapped in groups */
    .fw-stage {
      cursor: pointer;
      transition: opacity 250ms;
    }

    .fw-stage .fw-stage-label-rect {
      transition: fill 220ms, stroke 220ms;
    }

    .fw-stage .fw-stage-name {
      transition: fill 220ms;
    }

    .fw-stage:hover .fw-stage-label-rect {
      fill: rgba(255, 107, 61, 0.18);
      stroke: rgba(255, 107, 61, 0.55);
    }

    .fw-stage:hover .fw-stage-num,
    .fw-stage:hover .fw-stage-name {
      fill: var(--hot);
    }

    /* dim other stages on hover */
    .flywheel-stage:has(.fw-stage:hover) .fw-stage:not(:hover) {
      opacity: 0.4;
    }

    @media (prefers-reduced-motion: reduce) {

      .fw-ticks-rotate,
      .fw-inner-rotate,
      .fw-orbit-grp,
      .fw-wheel-flow,
      .fw-node-halo,
      .fw-core-aura {
        animation: none !important;
      }
    }

    /* === FLYWHEEL === */
    .flywheel-section {
      background: var(--ink);
      color: var(--bg);
      position: relative;
      overflow: hidden;
      padding: 140px 0;
    }

    .flywheel-section .sec-head {
      border-top-color: rgba(245, 241, 235, 0.12);
    }

    .flywheel-section .sec-num {
      color: var(--bg);
    }

    .flywheel-section .micro {
      color: rgba(245, 241, 235, 0.5);
    }

    .flywheel-section .h2 {
      color: var(--bg);
    }

    .flywheel-section .h2 em {
      background: linear-gradient(135deg, var(--warm), var(--hot));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .flywheel-section .lead {
      color: rgba(245, 241, 235, 0.65);
    }

    .flywheel-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 50% 40% at 50% 60%, rgba(255, 107, 61, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 30% 30% at 90% 20%, rgba(91, 43, 196, 0.15) 0%, transparent 60%);
      pointer-events: none;
    }

    .flywheel-section .grid-pattern {
      opacity: 0.6;
    }

    .flywheel-stage {
      margin-top: 40px;
      position: relative;
    }

    .flywheel-stage svg {
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      display: block;
    }

    /* === HYPOTHESIS === */
    .hypo-section {
      background: var(--bg);
      color: var(--text);
      padding: 140px 0;
    }

    .hypo-section .sec-head {
      border-top-color: var(--line);
    }

    .hypo-section .sec-num,
    .hypo-section .h2 {
      color: var(--text);
    }

    .hypo-section .h2 .muted {
      color: var(--text-3);
    }

    .hypo-section .micro {
      color: var(--text-3);
    }

    .hypo-section .lead {
      color: var(--text-2);
    }

    .hypo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 56px;
      align-items: stretch;
    }

    .hypo-list-block {
      padding: 28px;
      background: linear-gradient(180deg, #131315 0%, #0E0E10 100%);
      border-radius: var(--r-lg);
      border: 1px solid rgba(245, 241, 235, 0.06);
      box-shadow:
        0 1px 0 rgba(245, 241, 235, 0.04) inset,
        0 32px 80px -20px rgba(255, 107, 61, 0.18);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .hypo-list-block::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(255, 107, 61, 0.10) 0%, transparent 60%);
      pointer-events: none;
    }

    .hypo-list-block>* {
      position: relative;
      z-index: 1;
    }

    .hypo-list-block .hypo-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 16px;
    }

    .hypo-list-block .hypo-head .lbl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
    }

    .hypo-list-block .hypo-head .badge {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      color: var(--hot);
      letter-spacing: 0.04em;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .hypo-list-block .hypo-head .live-dot {
      background: var(--hot);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.18);
    }

    .hypo-list ul {
      list-style: none;
      border-top: 1px solid rgba(245, 241, 235, 0.1);
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .hypo-list li {
      display: grid;
      grid-template-columns: 18px 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 18px 0;
      border-bottom: 1px solid rgba(245, 241, 235, 0.1);
      transition: padding 250ms;
      flex: 1;
    }

    .hypo-list li:last-child {
      border-bottom: 0;
    }

    .hypo-list li:hover {
      padding-left: 6px;
    }

    .hypo-list li .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.15);
    }

    .hypo-list li .copy {
      color: var(--bg);
      font-size: 16px;
    }

    .hypo-list li .metric {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.55);
      text-transform: uppercase;
    }

    .hypo-list li .metric .strong {
      color: var(--bg);
      font-weight: 600;
      margin-right: 4px;
    }

    .hypo-card {
      padding: 28px;
      background: linear-gradient(180deg, #131315 0%, #0E0E10 100%);
      border-radius: var(--r-lg);
      border: 1px solid rgba(245, 241, 235, 0.06);
      box-shadow:
        0 1px 0 rgba(245, 241, 235, 0.04) inset,
        0 32px 80px -20px rgba(255, 107, 61, 0.18);
      position: relative;
      overflow: hidden;
    }

    .hypo-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(255, 107, 61, 0.10) 0%, transparent 60%);
      pointer-events: none;
    }

    .hypo-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 16px;
      position: relative;
    }

    .hypo-head .lbl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
    }

    .hypo-head .badge {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      color: var(--hot);
      letter-spacing: 0.04em;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .hypo-head .live-dot {
      background: var(--hot);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.18);
    }

    .hypo-card svg {
      width: 100%;
      height: auto;
      margin: 8px 0 16px;
    }

    .hypo-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      padding-top: 22px;
      border-top: 1px solid rgba(245, 241, 235, 0.08);
      position: relative;
    }

    .hypo-stat .v {
      ;
      letter-spacing: -0.02em;
      color: var(--bg);
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }

    .hypo-stat .v.accent {
      color: var(--hot);
    }

    .hypo-stat .l {
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      font-weight: 500;
      margin-top: 6px;
    }

    /* === HYPOTHESIS CHART animations === */
    @keyframes chart-draw {
      from {
        stroke-dashoffset: 1200;
      }

      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes chart-fade-in {
      from {
        opacity: 0;
        transform: translateY(4px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes chart-now-pulse {

      0%,
      100% {
        opacity: 0.55;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.18);
      }
    }

    @keyframes chart-area-shimmer {

      0%,
      100% {
        opacity: 0.85;
      }

      50% {
        opacity: 1;
      }
    }

    .hp-trend-line {
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      animation: chart-draw 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
    }

    .hp-area {
      animation: chart-area-shimmer 5s ease-in-out infinite;
    }

    .hp-dot {
      opacity: 0;
      animation: chart-fade-in 0.4s var(--easing) forwards;
      transform-origin: center;
      transform-box: fill-box;
      transition: r 200ms var(--easing), filter 200ms;
      cursor: pointer;
    }

    .hp-dot:hover {
      r: 6;
      filter: drop-shadow(0 0 6px rgba(255, 107, 61, 0.7));
    }

    .hp-dot.d2 {
      animation-delay: 0.7s;
    }

    .hp-dot.d3 {
      animation-delay: 1.0s;
    }

    .hp-dot.d4 {
      animation-delay: 1.3s;
    }

    .hp-dot.d5 {
      animation-delay: 1.6s;
    }

    .hp-dot.d6 {
      animation-delay: 1.9s;
    }

    .hp-now-ring {
      animation: chart-now-pulse 2.4s ease-in-out infinite;
      transform-origin: center;
      transform-box: fill-box;
    }

    .hp-now-ring2 {
      animation: chart-now-pulse 2.4s ease-in-out 0.6s infinite;
      transform-origin: center;
      transform-box: fill-box;
    }

    .hp-ann {
      opacity: 0;
      animation: chart-fade-in 0.5s var(--easing) forwards;
    }

    .hp-ann.a1 {
      animation-delay: 0.7s;
    }

    .hp-ann.a2 {
      animation-delay: 1.0s;
    }

    .hp-ann.a3 {
      animation-delay: 1.3s;
    }

    .hp-ann.a4 {
      animation-delay: 1.6s;
    }

    .hp-ann.a5 {
      animation-delay: 1.9s;
    }

    .hp-ann.a6 {
      animation-delay: 2.2s;
    }

    @media (prefers-reduced-motion: reduce) {
      .hp-trend-line {
        animation: none;
        stroke-dashoffset: 0;
      }

      .hp-dot,
      .hp-ann {
        animation: none;
        opacity: 1;
      }

      .hp-now-ring,
      .hp-now-ring2,
      .hp-area {
        animation: none;
      }
    }

    /* === HYPOTHESIS STREAM — notification feed (animated). Sits as right column
       of .hypo-grid (was full-width below; merged for symmetry). === */
    .hypo-stream {
      display: flex;
      flex-direction: column;
      background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(255, 107, 61, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #131315 0%, #0E0E10 100%);
      border-radius: var(--r-lg);
      border: 1px solid rgba(245, 241, 235, 0.06);
      overflow: hidden;
      position: relative;
    }

    .hypo-stream-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 24px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.06);
    }

    .hypo-stream-head .live-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: rgba(255, 107, 61, 0.12);
      border: 1px solid rgba(255, 107, 61, 0.3);
      border-radius: 9999px;
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--hot);
      font-weight: 600;
    }

    .hypo-stream-head .live-pill .live-dot {
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.20);
    }

    .hypo-stream-head .lbl {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.55);
    }

    .hypo-stream-head .lbl strong {
      color: var(--bg);
      font-weight: 600;
    }

    /* Stream viewport — fills available height in grid column, hides overflow */
    .hypo-stream-viewport {
      position: relative;
      flex: 1 1 auto;
      min-height: 280px;
      overflow: hidden;
      mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%);
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%);
    }

    .hypo-stream-track {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 18px 24px;
      animation: hypoStream 36s linear infinite;
    }

    @keyframes hypoStream {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-50%);
      }
    }

    /* Each notification */
    .hypo-note {
      display: grid;
      grid-template-columns: 32px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      background: rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.08);
      border-left: 3px solid rgba(245, 241, 235, 0.18);
      border-radius: 8px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .hypo-note .icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(245, 241, 235, 0.05);
      border: 1px solid rgba(245, 241, 235, 0.08);
      color: rgba(245, 241, 235, 0.65);
    }

    .hypo-note .icon svg {
      width: 14px;
      height: 14px;
    }

    .hypo-note .body {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .hypo-note .title {
      font-size: 13.5px;
      color: var(--bg);
      letter-spacing: -0.005em;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hypo-note .title strong {
      font-weight: 600;
    }

    .hypo-note .meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.04em;
      color: rgba(245, 241, 235, 0.5);
    }

    .hypo-note .meta .sep {
      opacity: 0.4;
    }

    .hypo-note .verdict {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      border-radius: 9999px;
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      font-weight: 700;
      white-space: nowrap;
    }

    /* States */
    .hypo-note.testing {
      border-left-color: var(--hot);
      background: linear-gradient(90deg, rgba(255, 107, 61, 0.06), rgba(245, 241, 235, 0.03));
    }

    .hypo-note.testing .icon {
      background: rgba(255, 107, 61, 0.12);
      border-color: rgba(255, 107, 61, 0.30);
      color: var(--hot);
    }

    .hypo-note.testing .verdict {
      background: rgba(255, 107, 61, 0.14);
      color: var(--hot);
      border: 1px solid rgba(255, 107, 61, 0.30);
    }

    .hypo-note.testing .verdict .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.20);
      animation: hypo-blink 1.4s ease-in-out infinite;
    }

    .hypo-note.accepted {
      border-left-color: #4ADE80;
      background: linear-gradient(90deg, rgba(74, 222, 128, 0.06), rgba(245, 241, 235, 0.03));
    }

    .hypo-note.accepted .icon {
      background: rgba(74, 222, 128, 0.12);
      border-color: rgba(74, 222, 128, 0.30);
      color: #4ADE80;
    }

    .hypo-note.accepted .verdict {
      background: rgba(74, 222, 128, 0.14);
      color: #4ADE80;
      border: 1px solid rgba(74, 222, 128, 0.30);
    }

    .hypo-note.rejected {
      opacity: 0.66;
      border-left-color: rgba(245, 241, 235, 0.30);
    }

    .hypo-note.rejected .icon {
      background: rgba(245, 241, 235, 0.04);
      border-color: rgba(245, 241, 235, 0.12);
      color: rgba(245, 241, 235, 0.45);
    }

    .hypo-note.rejected .verdict {
      background: rgba(245, 241, 235, 0.04);
      color: rgba(245, 241, 235, 0.55);
      border: 1px solid rgba(245, 241, 235, 0.14);
    }

    .hypo-note.rejected .title {
      text-decoration: line-through;
      text-decoration-color: rgba(245, 241, 235, 0.25);
    }

    @keyframes hypo-blink {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.55;
        transform: scale(0.85);
      }
    }

    /* Footer */
    .hypo-stream-foot {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
      border-top: 1px solid rgba(245, 241, 235, 0.06);
      background: rgba(245, 241, 235, 0.02);
    }

    .hypo-stream-foot .stat {
      padding: 14px 20px;
      display: flex;
      align-items: baseline;
      gap: 10px;
      border-right: 1px dashed rgba(245, 241, 235, 0.06);
    }

    .hypo-stream-foot .stat:last-child {
      border-right: 0;
    }

    .hypo-stream-foot .stat .v {
      font-family: var(--display);
      font-size: 22px;
      letter-spacing: -0.022em;
      font-weight: 600;
      color: var(--bg);
      line-height: 1;
    }

    .hypo-stream-foot .stat.win .v {
      color: #4ADE80;
    }

    .hypo-stream-foot .stat.kill .v {
      color: rgba(245, 241, 235, 0.55);
    }

    .hypo-stream-foot .stat.test .v {
      color: var(--hot);
    }

    .hypo-stream-foot .stat .l {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.55);
    }

    @media (max-width: 700px) {
      .hypo-stream-viewport {
        height: 320px;
      }

      .hypo-note {
        grid-template-columns: 28px 1fr auto;
        padding: 10px 12px;
      }

      .hypo-note .icon {
        width: 28px;
        height: 28px;
      }

      .hypo-note .title {
        font-size: 12.5px;
        white-space: normal;
      }

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

      .hypo-stream-foot .stat {
        border-right: 0;
        border-bottom: 1px dashed rgba(245, 241, 235, 0.06);
      }

      .hypo-stream-foot .stat:last-child {
        border-bottom: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hypo-stream-track {
        animation: none;
      }

      .hypo-note.testing .verdict .dot {
        animation: none;
      }
    }

    /* === HYPOTHESIS CHIPS (concise, isomorphic) === */
    .hypo-chips {
      margin-top: 56px;
      padding: 28px 32px;
      background: linear-gradient(180deg, #131315 0%, #0E0E10 100%);
      border-radius: var(--r-lg);
      border: 1px solid rgba(245, 241, 235, 0.06);
    }

    .hypo-chips-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 20px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.06);
    }

    .hypo-chips-head .lbl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.55);
    }

    .hypo-chips-head .ctrls {
      display: flex;
      gap: 8px;
    }

    .hypo-chips-head .ctrl-chip {
      padding: 5px 12px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.08);
      border-radius: 9999px;
      color: rgba(245, 241, 235, 0.6);
      font-weight: 500;
      cursor: pointer;
      transition: all 200ms;
    }

    .hypo-chips-head .ctrl-chip.active {
      background: rgba(255, 107, 61, 0.14);
      border-color: rgba(255, 107, 61, 0.4);
      color: var(--hot);
    }

    .hypo-chips-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .hypo-chip {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 8px 14px 8px 8px;
      background: rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.08);
      border-radius: 9999px;
      font-size: 13px;
      cursor: default;
      transition: all 200ms;
    }

    .hypo-chip:hover {
      transform: translateY(-1px);
      border-color: rgba(245, 241, 235, 0.18);
    }

    .hypo-chip .chip-status {
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 4px 9px;
      border-radius: 9999px;
    }

    .hypo-chip.s-test .chip-status {
      background: rgba(255, 107, 61, 0.16);
      color: var(--hot);
    }

    .hypo-chip.s-test .chip-status::before {
      content: "● ";
    }

    .hypo-chip.s-win .chip-status {
      background: rgba(74, 222, 128, 0.16);
      color: #4ADE80;
    }

    .hypo-chip.s-kill .chip-status {
      background: rgba(245, 241, 235, 0.06);
      color: rgba(245, 241, 235, 0.55);
    }

    .hypo-chip.s-kill {
      opacity: 0.78;
    }

    .hypo-chip .chip-body {
      color: var(--bg);
      letter-spacing: -0.011em;
    }

    .hypo-chip .chip-meta {
      color: rgba(245, 241, 235, 0.55);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      margin-left: 4px;
    }

    .hypo-chip.s-win .chip-meta {
      color: #6FE7DD;
    }

    /* === HYPOTHESIS FEED (interactive cards — legacy) === */
    .hypo-feed {
      margin-top: 56px;
      padding: 28px;
      background: linear-gradient(180deg, #131315 0%, #0E0E10 100%);
      border-radius: var(--r-lg);
      border: 1px solid rgba(245, 241, 235, 0.06);
    }

    .hypo-feed-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 22px;
    }

    .hypo-feed-head .lbl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
    }

    .hypo-feed-head .ctrls {
      display: flex;
      gap: 8px;
    }

    .hypo-feed-head .ctrl-chip {
      padding: 5px 12px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.08);
      border-radius: 9999px;
      color: rgba(245, 241, 235, 0.6);
      font-weight: 500;
      cursor: pointer;
      transition: all 200ms;
    }

    .hypo-feed-head .ctrl-chip.active {
      background: rgba(255, 107, 61, 0.14);
      border-color: rgba(255, 107, 61, 0.4);
      color: var(--hot);
    }

    .hypo-feed-head .ctrl-chip:hover {
      border-color: rgba(245, 241, 235, 0.18);
      color: var(--bg);
    }

    .hypo-feed-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .hypo-card-mini {
      padding: 16px;
      background: rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-left: 2px solid rgba(245, 241, 235, 0.15);
      border-radius: 10px;
      transition: transform 200ms, border-color 200ms;
    }

    .hypo-card-mini:hover {
      transform: translateY(-2px);
      border-color: rgba(245, 241, 235, 0.18);
    }

    .hypo-card-mini.s-test {
      border-left-color: var(--hot);
    }

    .hypo-card-mini.s-win {
      border-left-color: #4ADE80;
    }

    .hypo-card-mini.s-kill {
      border-left-color: rgba(245, 241, 235, 0.25);
      opacity: 0.78;
    }

    .hypo-card-mini .row1 {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 10px;
    }

    .hypo-card-mini .badge {
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      padding: 3px 8px;
      border-radius: 4px;
      text-transform: uppercase;
    }

    .hypo-card-mini.s-test .badge {
      background: rgba(255, 107, 61, 0.14);
      color: var(--hot);
    }

    .hypo-card-mini.s-test .badge::before {
      content: "● ";
    }

    .hypo-card-mini.s-win .badge {
      background: rgba(74, 222, 128, 0.14);
      color: #4ADE80;
    }

    .hypo-card-mini.s-kill .badge {
      background: rgba(245, 241, 235, 0.06);
      color: rgba(245, 241, 235, 0.5);
    }

    .hypo-card-mini .id {
      font-family: var(--mono);
      font-size: 9px;
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.06em;
    }

    .hypo-card-mini .title {
      ;
      letter-spacing: -0.011em;
      color: var(--bg);
      line-height: 1.25;
      margin-bottom: 6px;
    }

    .hypo-card-mini .desc {
      font-size: 12px;
      color: rgba(245, 241, 235, 0.55);
      line-height: 1.45;
      margin-bottom: 12px;
    }

    .hypo-card-mini .delta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: 10px;
      border-top: 1px dashed rgba(245, 241, 235, 0.08);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      color: rgba(245, 241, 235, 0.5);
    }

    .hypo-card-mini .delta .v {
      color: var(--bg);
      font-weight: 500;
    }

    .hypo-card-mini.s-win .delta .v {
      color: #4ADE80;
    }

    .hypo-card-mini.s-kill .delta .v {
      color: rgba(245, 241, 235, 0.5);
    }

    /* === FEATHER (rewritten for performance marketing) === */
    .feather-section {
      padding: 140px 0;
      background: var(--ink);
      color: var(--bg);
      position: relative;
      overflow: hidden;
    }

    .feather-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 50% 35% at 90% 10%, rgba(255, 107, 61, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 10% 90%, rgba(91, 43, 196, 0.10) 0%, transparent 60%);
      pointer-events: none;
    }

    .feather-section .container-wide {
      position: relative;
      z-index: 2;
    }

    .feather-section .sec-head {
      border-top-color: rgba(245, 241, 235, 0.12);
    }

    .feather-section .sec-num,
    .feather-section .h2 {
      color: var(--bg);
    }

    .feather-section .micro {
      color: rgba(245, 241, 235, 0.5);
    }

    .feather-section .h2 .muted {
      color: rgba(245, 241, 235, 0.32);
    }

    .feather-section .lead {
      color: rgba(245, 241, 235, 0.65);
    }

    .feather-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 8px 16px 8px 12px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.10);
      border-radius: 9999px;
      backdrop-filter: blur(10px);
      margin-bottom: 32px;
    }

    .feather-eyebrow .dot-glow {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.18), 0 0 12px var(--hot);
    }

    .feather-eyebrow .lbl {
      font-family: var(--mono);
      font-size: 12.5px;
      letter-spacing: 0.16em;
      color: rgba(245, 241, 235, 0.92);
      font-weight: 600;
      text-transform: uppercase;
    }

    .feather-eyebrow .lbl strong {
      color: var(--bg);
      font-weight: 700;
    }

    /* === FEATHER · file-system / OS visualization === */
    @keyframes fs-cursor-blink {

      0%,
      49% {
        opacity: 1;
      }

      50%,
      100% {
        opacity: 0;
      }
    }

    .feather-fs {
      margin-top: 64px;
      background: linear-gradient(180deg, #16161A 0%, #0A0A0B 100%);
      border-radius: var(--r-xl);
      border: 1px solid rgba(245, 241, 235, 0.10);
      overflow: hidden;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 32px 80px -20px rgba(255, 107, 61, 0.18),
        0 0 0 1px rgba(255, 107, 61, 0.04);
    }

    .feather-fs-bar {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 18px;
      background: rgba(245, 241, 235, 0.04);
      border-bottom: 1px solid rgba(245, 241, 235, 0.08);
    }

    .feather-fs-bar .dots {
      display: flex;
      gap: 6px;
    }

    .feather-fs-bar .dots span {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: rgba(245, 241, 235, 0.15);
    }

    .feather-fs-bar .dots span:nth-child(1) {
      background: #FF5F57;
    }

    .feather-fs-bar .dots span:nth-child(2) {
      background: #FFBD2E;
    }

    .feather-fs-bar .dots span:nth-child(3) {
      background: #28CA41;
    }

    .feather-fs-bar .title {
      flex: 1;
      text-align: center;
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(245, 241, 235, 0.7);
      letter-spacing: 0.06em;
    }

    .feather-fs-bar .title strong {
      color: var(--bg);
      font-weight: 500;
    }

    .feather-fs-bar .meta {
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.04em;
    }

    .feather-fs-bar .meta .live-dot {
      vertical-align: middle;
      margin-right: 6px;
    }

    .feather-fs-body {
      display: grid;
      grid-template-columns: 220px 1fr 280px;
      min-height: 460px;
    }

    /* sidebar */
    .feather-fs-side {
      padding: 18px 14px;
      border-right: 1px solid rgba(245, 241, 235, 0.06);
      background: rgba(245, 241, 235, 0.015);
    }

    .feather-fs-side h5 {
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.4);
      font-weight: 500;
      margin-bottom: 10px;
      padding: 0 6px;
    }

    .feather-fs-side ul {
      list-style: none;
      margin-bottom: 24px;
    }

    .feather-fs-side li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 8px;
      border-radius: 6px;
      font-size: 13px;
      color: rgba(245, 241, 235, 0.65);
      cursor: pointer;
      font-family: var(--mono);
      letter-spacing: 0.02em;
    }

    .feather-fs-side li.active {
      background: rgba(255, 107, 61, 0.10);
      color: var(--bg);
    }

    .feather-fs-side li .ic {
      font-size: 14px;
      color: rgba(245, 241, 235, 0.45);
      flex-shrink: 0;
    }

    .feather-fs-side li.active .ic {
      color: var(--hot);
    }

    .feather-fs-side li .ct {
      margin-left: auto;
      font-size: 10px;
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.04em;
    }

    /* main tree */
    .feather-fs-main {
      padding: 24px 28px;
      font-family: var(--mono);
      font-size: 13px;
      line-height: 1.75;
      color: rgba(245, 241, 235, 0.78);
      overflow: hidden;
    }

    .feather-fs-main .fs-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 14px;
      font-size: 10px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.45);
      font-weight: 500;
    }

    .fs-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 1px 0;
    }

    .fs-row.dir {
      color: var(--bg);
    }

    .fs-row .glyph {
      color: rgba(245, 241, 235, 0.35);
      width: 14px;
      flex-shrink: 0;
      text-align: center;
    }

    .fs-row .name {
      letter-spacing: -0.011em;
    }

    .fs-row .name.k {
      color: var(--warm);
    }

    .fs-row .name.s {
      color: #A8E6CF;
    }

    .fs-row .name.f {
      color: var(--bg);
    }

    .fs-row .meta {
      margin-left: auto;
      color: rgba(245, 241, 235, 0.4);
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    .fs-row .meta .accent {
      color: var(--hot);
    }

    .fs-row .indent-1 {
      padding-left: 18px;
    }

    .fs-row .indent-2 {
      padding-left: 36px;
    }

    .fs-row .pip {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-right: 4px;
    }

    .fs-row .pip.live {
      background: var(--hot);
      box-shadow: 0 0 0 2px rgba(255, 107, 61, 0.18);
    }

    .fs-row .pip.warm {
      background: var(--warm);
    }

    .fs-row .pip.cool {
      background: rgba(111, 231, 221, 0.7);
    }

    .fs-row .pip.dim {
      background: rgba(245, 241, 235, 0.25);
    }

    .fs-blank-row {
      height: 12px;
    }

    /* properties panel */
    .feather-fs-detail {
      padding: 24px 22px;
      border-left: 1px solid rgba(245, 241, 235, 0.06);
      background: rgba(245, 241, 235, 0.015);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .fs-detail-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.06);
    }

    .fs-hex {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fs-detail-head h6 {
      ;
      color: var(--bg);
      letter-spacing: -0.01em;
      line-height: 1.1;
    }

    .fs-detail-head .sub {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.45);
      margin-top: 4px;
    }

    .fs-prop {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .fs-prop .l {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.4);
      font-weight: 500;
    }

    .fs-prop .v {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--bg);
      letter-spacing: 0.02em;
    }

    .fs-prop .v.accent {
      color: var(--hot);
    }

    .fs-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .fs-tag {
      padding: 4px 10px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.10);
      border-radius: 9999px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.7);
      font-weight: 600;
    }

    .fs-tag.accent {
      background: rgba(255, 107, 61, 0.14);
      border-color: rgba(255, 107, 61, 0.40);
      color: var(--hot);
    }

    .fs-mcp-block {
      margin-top: auto;
      padding: 12px 14px;
      background: rgba(255, 107, 61, 0.06);
      border: 1px solid rgba(255, 107, 61, 0.25);
      border-radius: 8px;
    }

    .fs-mcp-line {
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.6;
      color: rgba(245, 241, 235, 0.72);
    }

    .fs-mcp-line .arr {
      color: var(--hot);
    }

    .fs-mcp-line .ok {
      color: #4ADE80;
    }

    .fs-mcp-line .cmt {
      color: rgba(245, 241, 235, 0.35);
    }

    .fs-mcp-line .cursor {
      display: inline-block;
      width: 6px;
      height: 13px;
      background: var(--hot);
      vertical-align: middle;
      margin-left: 2px;
      animation: fs-cursor-blink 1.1s steps(2, end) infinite;
    }

    /* === KNOWLEDGE BASE — unified wrapper for lifecycle + signals === */
    .knowledge-base {
      margin-top: 80px;
      padding: 28px 32px 32px;
      border-radius: var(--r-lg);
      border: 1px solid rgba(245, 241, 235, 0.08);
      background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(255, 107, 61, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, #131315 0%, #0E0E10 100%);
      box-shadow: 0 1px 0 rgba(245, 241, 235, 0.04) inset, 0 32px 80px -20px rgba(255, 107, 61, 0.12);
    }

    .kb-head {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      padding-bottom: 22px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.08);
      margin-bottom: 18px;
    }

    .kb-glyph {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 107, 61, 0.16);
      border: 1px solid rgba(255, 107, 61, 0.4);
      color: #FFB088;
      flex-shrink: 0;
    }

    .kb-titles {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1 1 auto;
    }

    .kb-eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--hot, #FF6B3D);
    }

    .kb-title {
      font-family: var(--display);
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.018em;
      color: #F5F1EB;
      margin: 0;
      line-height: 1.2;
    }

    .kb-meta {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.5);
    }

    .kb-meta .v {
      color: #F5F1EB;
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    /* Soft divider label between the two rows of the knowledge base */
    .kb-row-label {
      display: flex;
      align-items: baseline;
      gap: 14px;
      flex-wrap: wrap;
      margin: 26px 0 14px;
      padding-bottom: 10px;
      border-bottom: 1px dashed rgba(245, 241, 235, 0.10);
    }

    .kb-row-label>span:first-child {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.85);
    }

    .kb-row-label .kb-row-sub {
      font-family: var(--sans);
      font-size: 12.5px;
      letter-spacing: -0.005em;
      color: rgba(245, 241, 235, 0.5);
    }

    .knowledge-base .lifecycle {
      margin-top: 0;
    }

    .knowledge-base .lifecycle-track {
      padding: 0;
    }

    .knowledge-base .intel-grid {
      margin-top: 0;
    }

    @media (max-width: 720px) {
      .knowledge-base {
        padding: 22px 20px 24px;
      }
    }

    /* lifecycle bar (4 stages) */
    .lifecycle {
      margin-top: 80px;
    }

    .lifecycle-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      padding-top: 56px;
    }

    .lifecycle-track::before {
      content: "";
      position: absolute;
      top: 32px;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg,
          transparent 0%,
          rgba(255, 107, 61, 0.4) 12%,
          rgba(255, 107, 61, 0.4) 88%,
          transparent 100%);
    }

    .lifecycle-stage {
      position: relative;
    }

    .lifecycle-stage .stage-num {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      font-weight: 500;
      margin-bottom: 32px;
      display: flex;
      align-items: baseline;
      gap: 14px;
    }

    .lifecycle-stage.active .stage-num,
    .lifecycle-stage.active .stage-num .dash {
      color: var(--hot);
    }

    .lifecycle-stage .stage-num .dash {
      color: rgba(245, 241, 235, 0.3);
    }

    .lifecycle-stage .stage-icon {
      position: absolute;
      top: 22px;
      left: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--ink);
      border: 1px solid rgba(255, 107, 61, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(245, 241, 235, 0.55);
    }

    .lifecycle-stage.active .stage-icon {
      background: var(--ink);
      border: 1px solid var(--hot);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.15), 0 0 16px rgba(255, 107, 61, 0.4);
      color: var(--hot);
    }

    .lifecycle-stage h4 {
      ;
      letter-spacing: -0.011em;
      color: var(--bg);
      margin-bottom: 12px;
    }

    .lifecycle-stage.active h4 {
      color: var(--hot);
    }

    .lifecycle-stage p {
      font-size: 14px;
      color: rgba(245, 241, 235, 0.65);
      line-height: 1.5;
    }

    /* MEMORY/LEARNING/COMPOUNDING/CONTEXT band — peach color */
    .feather-band {
      margin-top: 80px;
      padding: 36px 40px;
      background: linear-gradient(135deg, #FFB088 0%, #FFC9A8 100%);
      color: var(--ink);
      border-radius: var(--r-lg);
      position: relative;
      overflow: hidden;
    }

    .feather-band::after {
      content: "";
      position: absolute;
      top: 28px;
      right: 32px;
      width: 80px;
      height: 36px;
      background-image: repeating-linear-gradient(90deg,
          var(--ink) 0, var(--ink) 1px,
          transparent 1px, transparent 5px);
      mask-image: linear-gradient(90deg,
          transparent 0%,
          black 10%, black 90%, transparent 100%);
      opacity: 0.65;
    }

    .feather-band-head {
      display: flex;
      align-items: center;
      gap: 18px;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid rgba(10, 10, 11, 0.18);
    }

    .feather-band-mark {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feather-band-head .lbl {
      font-family: var(--mono);
      font-size: 12.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.92);
      font-weight: 600;
    }

    .feather-band-head h4 {
      font-family: var(--serif);
      font-size: 19px;
      font-weight: 500;
      letter-spacing: -0.011em;
      color: var(--ink);
      line-height: 1.4;
      margin-top: 4px;
    }

    .feather-band-head h4 .muted {
      color: rgba(10, 10, 11, 0.5);
      font-weight: 400;
    }

    .feather-band-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }

    .feather-band-col .col-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink);
      font-weight: 600;
      margin-bottom: 14px;
    }

    .feather-band-col .col-tag::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ink);
    }

    .feather-band-col p {
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.5;
    }

    .feather-band-col p strong {
      color: var(--ink);
      font-weight: 600;
    }

    /* Intelligence Signals grid */
    .intel {
      margin-top: 80px;
    }

    .intel-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.12);
      margin-bottom: 32px;
      flex-wrap: wrap;
    }

    .intel-head .left {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .intel-head .step {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      padding: 5px 12px;
      border: 1px solid rgba(245, 241, 235, 0.1);
      border-radius: 9999px;
    }

    .intel-head .ttl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--bg);
      font-weight: 500;
    }

    .intel-head .meta {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.45);
    }

    .intel-head .meta .v {
      color: var(--bg);
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .intel-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .intel-card {
      padding: 22px;
      background: rgba(245, 241, 235, 0.025);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: var(--r-md);
      transition: transform 250ms, border-color 250ms;
      display: flex;
      flex-direction: column;
    }

    .intel-card:hover {
      transform: translateY(-3px);
      border-color: rgba(255, 107, 61, 0.4);
    }

    .intel-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255, 107, 61, 0.1);
      border: 1px solid rgba(255, 107, 61, 0.25);
      color: var(--hot);
      margin-bottom: 16px;
    }

    .intel-card.dim .intel-icon {
      background: rgba(245, 241, 235, 0.04);
      border-color: rgba(245, 241, 235, 0.08);
      color: rgba(245, 241, 235, 0.45);
    }

    .intel-card h5 {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.011em;
      margin-bottom: 8px;
      line-height: 1.25;
    }

    .intel-card p {
      font-size: 12.5px;
      color: rgba(245, 241, 235, 0.55);
      line-height: 1.45;
      margin-bottom: 14px;
      flex: 1;
    }

    .intel-cad {
      padding-top: 12px;
      border-top: 1px dashed rgba(245, 241, 235, 0.12);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      font-weight: 500;
    }

    .intel-cad.live {
      color: var(--hot);
    }

    .intel-cad.live::before {
      content: "● ";
      color: var(--hot);
    }

    /* === FEATHER (legacy classes preserved below for safety) === */
    .feather-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: stretch;
      margin-bottom: 72px;
    }

    .feather-pill {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 7px 16px 7px 8px;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid var(--line);
      border-radius: 9999px;
      backdrop-filter: blur(10px);
      margin-bottom: 28px;
    }

    .feather-pill .dot-glow {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.18), 0 0 12px var(--hot);
    }

    .feather-pill .lbl {
      font-size: 12px;
      letter-spacing: 0.08em;
      color: var(--text-2);
      font-weight: 500;
    }

    .feather-pill .lbl strong {
      color: var(--text);
      font-weight: 600;
    }

    .feather-h2 {
      font-family: var(--serif);
      font-size: clamp(38px, 4.6vw, 60px);
      font-weight: 600;
      line-height: 1.04;
      letter-spacing: -0.022em;
      margin-bottom: 24px;
    }

    .feather-h2 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--deep), var(--hot));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .feather-card {
      padding: 0;
      background: linear-gradient(180deg, #16161A 0%, #0A0A0B 100%);
      border-radius: var(--r-lg);
      color: var(--bg);
      overflow: hidden;
      box-shadow: 0 24px 60px -20px rgba(10, 10, 11, 0.4);
      border: 1px solid rgba(217, 212, 204, 0.5);
    }

    .feather-card-bar {
      display: flex;
      gap: 0;
      border-bottom: 1px solid rgba(245, 241, 235, 0.08);
    }

    .feather-card-tab {
      padding: 12px 18px;
      font-family: var(--mono);
      font-size: 12px;
      color: rgba(245, 241, 235, 0.55);
      border-right: 1px solid rgba(245, 241, 235, 0.08);
    }

    .feather-card-tab.active {
      color: var(--bg);
      background: rgba(245, 241, 235, 0.04);
      border-bottom: 2px solid var(--hot);
      margin-bottom: -1px;
    }

    .feather-card-body {
      padding: 28px;
      font-family: var(--mono);
      font-size: 14px;
      line-height: 1.7;
    }

    .feather-card-body .c {
      color: rgba(245, 241, 235, 0.4);
    }

    .feather-card-body .k {
      color: var(--hot);
    }

    .feather-card-body .v {
      color: var(--warm);
    }

    .feather-card-body .s {
      color: #A8E6CF;
    }

    .feather-card-body .num {
      color: #FFC9A8;
    }

    .pillars {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .pillar {
      padding: 28px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      position: relative;
      overflow: hidden;
      transition: transform 250ms var(--easing), border-color 250ms;
    }

    .pillar:hover {
      transform: translateY(-3px);
      border-color: var(--hot);
    }

    .pillar .num {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hot);
      font-weight: 600;
      margin-bottom: 16px;
      display: block;
    }

    .pillar h4 {
      ;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }

    .pillar p {
      font-size: 14px;
      color: var(--text-2);
    }

    /* === PERFORMANCE === */
    .perf-section {
      padding: 140px 0;
      background: var(--bg);
    }

    .perf-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 80px;
    }

    .perf-tile {
      padding: 36px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      position: relative;
      overflow: hidden;
    }

    .perf-tile.feature {
      background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255, 107, 61, 0.18) 0%, transparent 60%),
        var(--ink);
      color: var(--bg);
      border: 1px solid rgba(245, 241, 235, 0.06);
    }

    .perf-tile .fig {
      margin-bottom: 28px;
    }

    .perf-tile.feature .fig {
      color: rgba(245, 241, 235, 0.5);
    }

    .perf-tile .v {
      font-family: var(--serif);
      font-size: 88px;
      font-weight: 600;
      line-height: 0.95;
      letter-spacing: -0.035em;
      color: var(--text);
    }

    .perf-tile.feature .v {
      color: var(--bg);
    }

    .perf-tile .v .unit {
      color: var(--hot);
      font-size: 0.5em;
      letter-spacing: -0.02em;
    }

    .perf-tile .lbl {
      margin-top: 18px;
      font-size: 14px;
      color: var(--text-2);
      max-width: 240px;
      line-height: 1.45;
    }

    .perf-tile.feature .lbl {
      color: rgba(245, 241, 235, 0.65);
    }

    .perf-bar {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .perf-bar-row {
      display: grid;
      grid-template-columns: 100px 1fr 60px;
      gap: 12px;
      align-items: center;
      font-size: 12px;
    }

    .perf-bar-row .name {
      color: rgba(245, 241, 235, 0.6);
      letter-spacing: 0.04em;
    }

    .perf-bar-row .track {
      height: 6px;
      border-radius: 9999px;
      background: rgba(245, 241, 235, 0.08);
      overflow: hidden;
      position: relative;
    }

    .perf-bar-row .fill {
      height: 100%;
      border-radius: 9999px;
      background: linear-gradient(90deg, var(--hot), var(--warm));
    }

    .perf-bar-row .v {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--bg);
      letter-spacing: 0.04em;
      text-align: right;
    }

    .perf-quote {
      margin-top: 64px;
      padding: 56px 64px;
      background: var(--ink);
      color: var(--bg);
      border-radius: var(--r-lg);
      position: relative;
      overflow: hidden;
    }

    .perf-quote::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      background:
        radial-gradient(ellipse 60% 80% at 100% 50%, rgba(255, 107, 61, 0.18) 0%, transparent 70%);
      pointer-events: none;
    }

    .perf-quote .q {
      ;
      line-height: 1.3;
      letter-spacing: -0.014em;
      max-width: 920px;
      position: relative;
    }

    .perf-quote .q em {
      font-style: italic;
      color: var(--warm);
    }

    .perf-quote .who {
      margin-top: 32px;
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.6);
      font-weight: 500;
    }

    /* === TESTIMONIALS — VIDEO === */
    .testi-section {
      padding: 140px 0;
      background: var(--bg);
      position: relative;
    }

    .testi-section.feature-band {
      padding: 140px 0;
      background:
        radial-gradient(ellipse 60% 50% at 80% 0%, rgba(255, 107, 61, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 20% 100%, rgba(255, 176, 136, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 100% 80%, rgba(217, 79, 36, 0.10) 0%, transparent 65%),
        var(--ink);
      color: var(--bg);
      border-top: 1px solid rgba(245, 241, 235, 0.06);
      border-bottom: 1px solid rgba(245, 241, 235, 0.06);
      position: relative;
      overflow: hidden;
    }

    .testi-section.feature-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(245, 241, 235, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 241, 235, 0.04) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 30%, transparent 80%);
      pointer-events: none;
    }

    .testi-section.feature-band .container-wide {
      position: relative;
      z-index: 2;
    }

    .testi-section.feature-band .h2 {
      color: var(--bg);
    }

    .testi-section.feature-band .h2 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--warm) 0%, var(--hot) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .testi-section.feature-band .lead {
      color: rgba(245, 241, 235, 0.65);
    }

    .testi-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px 6px 9px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.10);
      border-radius: 9999px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.7);
      font-weight: 500;
      margin-bottom: 21px;
      backdrop-filter: blur(8px);
    }

    .testi-eyebrow .live-dot {
      background: var(--hot);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.18), 0 0 12px var(--hot);
    }

    .testi-section .h2 {
      max-width: 980px;
    }

    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 80px;
    }

    .testi-card {
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      overflow: hidden;
      transition: transform 350ms var(--easing), border-color 250ms, box-shadow 350ms var(--easing);
    }

    .testi-card:hover {
      transform: translateY(-5px);
      border-color: var(--text);
      box-shadow: 0 32px 80px -20px rgba(10, 10, 11, 0.18);
    }

    .testi-thumb {
      position: relative;
      aspect-ratio: 5 / 4;
      cursor: pointer;
      overflow: hidden;
      background:
        radial-gradient(ellipse 90% 70% at 50% 110%, rgba(255, 107, 61, 0.32) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 25% 0%, rgba(91, 43, 196, 0.28) 0%, transparent 70%),
        linear-gradient(155deg, #1F1F26 0%, #0A0A0B 70%);
    }

    .testi-thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(10, 10, 11, 0.55) 100%);
      pointer-events: none;
      z-index: 2;
    }

    .testi-thumb .grid-pattern {
      opacity: 0.5;
    }

    .testi-name-overlay {
      position: absolute;
      bottom: 18px;
      left: 18px;
      right: 18px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .testi-name-overlay .nm {
      ;
      color: var(--bg);
      letter-spacing: -0.01em;
      line-height: 1.1;
    }

    .testi-name-overlay .role {
      font-size: 12px;
      letter-spacing: 0.04em;
      color: rgba(245, 241, 235, 0.7);
    }

    .testi-tag {
      position: absolute;
      top: 16px;
      left: 18px;
      z-index: 3;
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.55);
      font-weight: 500;
    }

    .testi-duration {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 3;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      color: rgba(245, 241, 235, 0.7);
      background: rgba(0, 0, 0, 0.4);
      padding: 4px 10px;
      border-radius: 9999px;
      backdrop-filter: blur(6px);
    }

    .testi-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: rgba(245, 241, 235, 0.12);
      border: 1px solid rgba(245, 241, 235, 0.30);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      transition: all 300ms var(--easing);
      box-shadow: 0 12px 32px rgba(10, 10, 11, 0.5);
    }

    .testi-play::before {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 1px solid rgba(255, 107, 61, 0.2);
      pointer-events: none;
    }

    .testi-thumb:hover .testi-play {
      background: var(--hot);
      border-color: var(--hot);
      transform: translate(-50%, -50%) scale(1.06);
      box-shadow: 0 12px 36px rgba(255, 107, 61, 0.4);
    }

    .testi-play::after {
      content: "";
      width: 0;
      height: 0;
      border-left: 14px solid var(--bg);
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      margin-left: 4px;
    }

    /* portrait: stylized monogram in thumbnail */
    .testi-portrait {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .testi-portrait svg {
      width: 60%;
      height: 60%;
      opacity: 0.4;
    }

    .testi-body {
      padding: 26px;
    }

    .testi-body .fig {
      margin-bottom: 16px;
    }

    .testi-quote {
      ;
    }

    .testi-quote::before {
      content: "\201C";
      display: inline-block;
      color: var(--hot);
      font-size: 32px;
      line-height: 0;
      vertical-align: -8px;
      margin-right: 4px;
    }

    .testi-meta {
      display: flex;
      justify-content: space-between;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-3);
    }

    .testi-meta .delta {
      color: var(--deep);
      font-family: var(--mono);
    }

    /* === TESTIMONIALS — FUTURISTIC DISPATCHES === */
    @keyframes ring-rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes ring-rotate-rev {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(-360deg);
      }
    }

    @keyframes signal-pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.85;
      }

      50% {
        transform: scale(1.15);
        opacity: 1;
      }
    }

    @keyframes scan {
      0% {
        transform: translateY(-100%);
      }

      100% {
        transform: translateY(100%);
      }
    }

    /* === TESTIMONIALS — TABBED FEATURED CARD === */
    .testi-tabs {
      margin-top: 42px;
      position: relative;
    }

    .testi-tabs>input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    /* sci-fi tab nav */
    .testi-tab-nav {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
      margin-bottom: 21px;
    }

    .testi-tab-nav label {
      cursor: pointer;
      padding: 14px 16px;
      background: rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.08);
      border-radius: var(--r-md);
      transition: all 280ms var(--easing);
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
      overflow: hidden;
    }

    .testi-tab-nav label::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 70% at 100% 0%, rgba(255, 107, 61, 0.10) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 280ms;
      pointer-events: none;
    }

    .testi-tab-nav label:hover {
      border-color: rgba(245, 241, 235, 0.18);
      transform: translateY(-1px);
    }

    .testi-tab-nav label:hover::before {
      opacity: 1;
    }

    .testi-tab-nav label .row1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .testi-tab-nav label .pilot-num {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.42);
      font-weight: 600;
    }

    .testi-tab-nav label .signal {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.4);
      font-weight: 500;
    }

    .testi-tab-nav label .signal::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(245, 241, 235, 0.25);
    }

    .testi-tab-nav label .name {
      ;
      letter-spacing: -0.011em;
      color: var(--bg);
      line-height: 1.05;
    }

    .testi-tab-nav label .scope {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: rgba(245, 241, 235, 0.55);
    }

    /* active tab */
    #testi-1:checked~.testi-tab-nav label[for="testi-1"],
    #testi-2:checked~.testi-tab-nav label[for="testi-2"],
    #testi-3:checked~.testi-tab-nav label[for="testi-3"] {
      background: linear-gradient(135deg, rgba(255, 107, 61, 0.16), rgba(255, 176, 136, 0.06));
      border-color: rgba(255, 107, 61, 0.45);
    }

    #testi-1:checked~.testi-tab-nav label[for="testi-1"] .pilot-num,
    #testi-2:checked~.testi-tab-nav label[for="testi-2"] .pilot-num,
    #testi-3:checked~.testi-tab-nav label[for="testi-3"] .pilot-num {
      color: var(--hot);
    }

    #testi-1:checked~.testi-tab-nav label[for="testi-1"] .signal,
    #testi-2:checked~.testi-tab-nav label[for="testi-2"] .signal,
    #testi-3:checked~.testi-tab-nav label[for="testi-3"] .signal {
      color: var(--hot);
    }

    #testi-1:checked~.testi-tab-nav label[for="testi-1"] .signal::before,
    #testi-2:checked~.testi-tab-nav label[for="testi-2"] .signal::before,
    #testi-3:checked~.testi-tab-nav label[for="testi-3"] .signal::before {
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.18), 0 0 10px var(--hot);
      animation: signal-pulse 1.6s var(--easing) infinite;
    }

    .testi-tab-content>.testi-feature {
      display: none;
    }

    #testi-1:checked~.testi-tab-content .tf-1,
    #testi-2:checked~.testi-tab-content .tf-2,
    #testi-3:checked~.testi-tab-content .tf-3 {
      display: grid;
    }

    /* dispatch card */
    .testi-feature {
      grid-template-columns: 0.8fr 1.2fr;
      gap: 0;
      background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(255, 107, 61, 0.10) 0%, transparent 65%),
        linear-gradient(180deg, #14141A 0%, #0A0A0B 100%);
      border: 1px solid rgba(245, 241, 235, 0.10);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 32px 80px -20px rgba(10, 10, 11, 0.4),
        0 0 0 1px rgba(255, 107, 61, 0.05);
      position: relative;
    }

    .testi-feature::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(245, 241, 235, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 241, 235, 0.03) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
      pointer-events: none;
    }

    /* thumbnail panel — futuristic aurora portrait */
    .testi-feature .tf-thumb {
      position: relative;
      min-height: 405px;
      background: #0A0A0B;
      cursor: pointer;
      overflow: hidden;
      border-right: 1px solid rgba(245, 241, 235, 0.08);
    }

    .testi-feature .tf-thumb::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(10, 10, 11, 0.55) 100%),
        linear-gradient(180deg, transparent 60%, rgba(10, 10, 11, 0.7) 100%);
      pointer-events: none;
    }

    /* Video — always visible as thumbnail, contain so full frame shows */
    .testi-feature .tf-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
      z-index: 10;
      pointer-events: none;
    }
    .testi-feature .tf-thumb.is-playing .tf-video,
    .testi-feature .tf-thumb.is-paused .tf-video {
      pointer-events: auto;
    }
    /* Playing: hide everything including play button and name */
    .testi-feature .tf-thumb.is-playing .tf-play,
    .testi-feature .tf-thumb.is-playing .tf-name-overlay,
    .testi-feature .tf-thumb.is-playing .tf-portrait,
    .testi-feature .tf-thumb.is-playing .tf-rings,
    .testi-feature .tf-thumb.is-playing .tf-tx,
    .testi-feature .tf-thumb.is-playing .tf-duration,
    .testi-feature .tf-thumb.is-playing .tf-grid-pattern,
    .testi-feature .tf-thumb.is-playing::after {
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    /* Paused: show video frame + play button, hide decorative elements */
    .testi-feature .tf-thumb.is-paused .tf-portrait,
    .testi-feature .tf-thumb.is-paused .tf-rings,
    .testi-feature .tf-thumb.is-paused .tf-tx,
    .testi-feature .tf-thumb.is-paused .tf-duration,
    .testi-feature .tf-thumb.is-paused .tf-grid-pattern,
    .testi-feature .tf-thumb.is-paused::after {
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .testi-feature .tf-thumb.is-paused .tf-play {
      z-index: 20;
    }

    /* dotted/scanline overlay for sci-fi feel */
    .testi-feature .tf-grid-pattern {
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(0deg,
          rgba(245, 241, 235, 0.05) 0px,
          rgba(245, 241, 235, 0.05) 1px,
          transparent 1px, transparent 4px);
      mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 30%, transparent 80%);
    }

    /* concentric rings around the avatar */
    .testi-feature .tf-rings {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      width: 240px;
      height: 240px;
      pointer-events: none;
    }

    .testi-feature .tf-rings .ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(245, 241, 235, 0.10);
    }

    .testi-feature .tf-rings .ring.r1 {
      inset: 22px;
      border-color: rgba(255, 107, 61, 0.18);
    }

    .testi-feature .tf-rings .ring.r2 {
      inset: 45px;
      border-style: dashed;
      border-color: rgba(255, 176, 136, 0.22);
      animation: ring-rotate 60s linear infinite;
    }

    .testi-feature .tf-rings .ring.r3 {
      inset: 67px;
      border-color: rgba(255, 200, 160, 0.22);
    }

    .testi-feature .tf-rings .ring-tick {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.18), 0 0 8px var(--hot);
    }

    .testi-feature .tf-portrait {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .testi-feature .tf-portrait svg {
      width: 165px;
      height: 165px;
      opacity: 0.78;
      filter: drop-shadow(0 8px 24px rgba(255, 107, 61, 0.3));
    }

    /* TRANSMISSION metadata, top-left corner */
    .testi-feature .tf-tx {
      position: absolute;
      top: 22px;
      left: 24px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .testi-feature .tf-tx-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.55);
      font-weight: 600;
    }

    .testi-feature .tf-tx-label .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.18), 0 0 8px var(--hot);
      animation: signal-pulse 1.8s var(--easing) infinite;
    }

    .testi-feature .tf-tx-status {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      color: #4ADE80;
      text-transform: uppercase;
    }

    /* duration top right */
    .testi-feature .tf-duration {
      position: absolute;
      top: 22px;
      right: 22px;
      z-index: 3;
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.65);
      background: rgba(10, 10, 11, 0.5);
      border: 1px solid rgba(245, 241, 235, 0.12);
      padding: 5px 11px;
      border-radius: 9999px;
      backdrop-filter: blur(8px);
      letter-spacing: 0.10em;
    }

    /* play button */
    .testi-feature .tf-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: rgba(10, 10, 11, 0.55);
      border: 1px solid rgba(255, 107, 61, 0.4);
      backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      transition: all 320ms var(--easing);
      box-shadow:
        0 0 0 8px rgba(10, 10, 11, 0.3),
        0 12px 48px rgba(255, 107, 61, 0.2);
    }

    .testi-feature .tf-play::before {
      content: "";
      position: absolute;
      inset: -16px;
      border-radius: 50%;
      border: 1px solid rgba(255, 107, 61, 0.25);
      animation: signal-pulse 2.2s var(--easing) infinite;
    }

    .testi-feature .tf-play::after {
      content: "";
      width: 0;
      height: 0;
      border-left: 20px solid var(--bg);
      border-top: 13px solid transparent;
      border-bottom: 13px solid transparent;
      margin-left: 5px;
    }

    .testi-feature .tf-thumb:hover .tf-play {
      background: var(--hot);
      border-color: var(--hot);
      transform: translate(-50%, -50%) scale(1.05);
      box-shadow: 0 0 0 8px rgba(255, 107, 61, 0.18), 0 16px 64px rgba(255, 107, 61, 0.5);
    }

    /* name overlay (bottom-left of thumbnail) */
    .testi-feature .tf-name-overlay {
      position: absolute;
      bottom: 24px;
      left: 24px;
      right: 24px;
      z-index: 3;
    }

    .testi-feature .tf-name-overlay .nm {
      ;
      color: var(--bg);
      letter-spacing: -0.022em;
      line-height: 1;
    }

    .testi-feature .tf-name-overlay .role {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.7);
      margin-top: 10px;
      text-transform: uppercase;
    }

    /* body — quote panel */
    .testi-feature .tf-body {
      padding: 36px 42px 33px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      gap: 28px;
    }

    .testi-company-logo {
      height: 32px;
      width: auto;
      max-width: 140px;
      object-fit: contain;
      object-position: left center;
      filter: brightness(0) invert(1);
      opacity: 0.85;
    }

    /* Logos with opaque white backgrounds: show in a white pill so they read on the dark panel */
    .testi-company-logo.testi-logo-pill {
      filter: none;
      opacity: 1;
      background: rgba(255, 255, 255, 0.92);
      padding: 5px 12px;
      border-radius: 6px;
      object-position: center center;
    }

    /* Logos already designed for dark backgrounds: strip the invert filter */
    .testi-company-logo.testi-logo-native {
      filter: none;
      opacity: 0.92;
      height: 36px;
    }

    /* Square-ish logos need more height to be legible */
    .testi-company-logo.testi-logo-lg {
      height: 52px;
    }

    .testi-nav {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 8px;
    }
    .testi-nav-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(245, 241, 235, 0.18);
      background: rgba(245, 241, 235, 0.06);
      color: rgba(245, 241, 235, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 0;
      flex-shrink: 0;
    }
    .testi-nav-btn svg {
      width: 18px;
      height: 18px;
    }
    .testi-nav-btn:hover:not(:disabled) {
      border-color: var(--hot);
      color: var(--hot);
      background: rgba(255, 107, 61, 0.1);
    }
    .testi-nav-btn:disabled {
      opacity: 0.25;
      cursor: default;
    }

    .testi-feature .tf-tx-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.08);
    }

    .testi-feature .tf-tx-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.6);
      padding: 5px 11px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.08);
      border-radius: 9999px;
      font-weight: 500;
    }

    .testi-feature .tf-tx-chip.accent {
      background: rgba(255, 107, 61, 0.12);
      border-color: rgba(255, 107, 61, 0.35);
      color: var(--hot);
    }

    .testi-feature .tf-quote {
      font-family: var(--serif);
      font-size: 22.5px;
      line-height: 1.32;
      color: var(--bg);
      letter-spacing: -0.012em;
      font-weight: 600;
    }

    .testi-feature .tf-quote::before {
      content: "\201C";
      display: inline-block;
      color: var(--hot);
      font-size: 42px;
      line-height: 0;
      vertical-align: -12px;
      margin-right: 5px;
    }

    .testi-feature .tf-quote::after {
      content: "\201D";
      display: inline-block;
      color: var(--hot);
      font-size: 42px;
      line-height: 0;
      vertical-align: -12px;
      margin-left: 3px;
    }

    .testi-feature .tf-quote em {
      font-style: normal;
      background: linear-gradient(135deg, var(--warm), var(--hot) 80%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* scope panel */
    .testi-feature .tf-scope {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 13px;
      padding-top: 19px;
      border-top: 1px solid rgba(245, 241, 235, 0.08);
    }

    .testi-feature .tf-scope-item .l {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.42);
      margin-bottom: 6px;
      font-weight: 500;
    }

    .testi-feature .tf-scope-item .v {
      font-family: var(--sans);
      font-size: 14px;
      color: var(--bg);
      letter-spacing: -0.011em;
      font-weight: 400;
      line-height: 1.4;
    }

    /* === HITL — interactive console (you really do decide) === */
    @keyframes hitl-card-out {
      0% {
        opacity: 1;
        transform: translateX(0) scale(1);
      }

      100% {
        opacity: 0;
        transform: translateX(-32px) scale(0.96);
      }
    }

    @keyframes hitl-card-in {
      0% {
        opacity: 0;
        transform: translateX(32px) scale(0.96);
      }

      100% {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

    @keyframes hitl-toast-pop {
      0% {
        opacity: 0;
        transform: translateY(8px);
      }

      20% {
        opacity: 1;
        transform: translateY(0);
      }

      80% {
        opacity: 1;
      }

      100% {
        opacity: 0;
        transform: translateY(-4px);
      }
    }

    @keyframes hitl-bump {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.18);
        color: var(--hot);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes hitl-history-in {
      0% {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
        max-height: 0;
        padding: 0 10px;
        margin: 0;
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 60px;
      }
    }

    .hitl-suggestion.exit {
      animation: hitl-card-out 240ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
      pointer-events: none;
    }

    .hitl-suggestion.enter {
      animation: hitl-card-in 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* counter strip */
    .hitl-counters {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 16px;
      padding: 12px;
      background: rgba(245, 241, 235, 0.025);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 10px;
    }

    .hitl-counter {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 6px 4px;
      border-radius: 8px;
      transition: background 200ms;
    }

    .hitl-counter .v {
      ;
      color: var(--bg);
      letter-spacing: -0.02em;
      line-height: 1;
      transition: color 240ms;
    }

    .hitl-counter .v.bump {
      animation: hitl-bump 480ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hitl-counter .l {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.45);
      font-weight: 500;
    }

    .hitl-counter[data-counter="accept"] .v {
      color: #4ADE80;
    }

    .hitl-counter[data-counter="reject"] .v {
      color: rgba(245, 241, 235, 0.7);
    }

    .hitl-counter[data-counter="modify"] .v {
      color: var(--hot);
    }

    .hitl-counter[data-counter="command"] .v {
      color: #B47AFF;
    }

    /* better, clickable buttons (now real <button>s) */
    .hitl-btn {
      position: relative;
      overflow: hidden;
    }

    .hitl-btn:active {
      transform: translateY(0) scale(0.98);
    }

    .hitl-btn:focus-visible {
      outline: 2px solid rgba(255, 107, 61, 0.5);
      outline-offset: 2px;
    }

    .hitl-btn[aria-pressed="true"] {
      background: rgba(255, 107, 61, 0.12);
      border-color: rgba(255, 107, 61, 0.45);
    }

    /* Modify panel */
    .hitl-modify,
    .hitl-command {
      margin-top: 16px;
      padding: 18px;
      background: rgba(255, 107, 61, 0.06);
      border: 1px solid rgba(255, 107, 61, 0.30);
      border-radius: 10px;
      animation: hitl-card-in 280ms var(--easing);
    }

    .hitl-modify-head,
    .hitl-command-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hot);
      font-weight: 600;
    }

    .hitl-modify-head .x,
    .hitl-command-head .x {
      cursor: pointer;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(245, 241, 235, 0.06);
      color: rgba(245, 241, 235, 0.7);
      font-size: 14px;
      border: 1px solid rgba(245, 241, 235, 0.10);
      transition: all 200ms;
    }

    .hitl-modify-head .x:hover,
    .hitl-command-head .x:hover {
      background: rgba(255, 107, 61, 0.12);
      color: var(--hot);
      border-color: rgba(255, 107, 61, 0.4);
    }

    .hitl-modify-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .hitl-modify-row .label {
      font-size: 13px;
      color: var(--bg);
      flex-shrink: 0;
    }

    .hitl-slider {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      background: linear-gradient(90deg, rgba(255, 107, 61, 0.6) 0%, rgba(255, 107, 61, 0.6) var(--pct, 50%), rgba(245, 241, 235, 0.10) var(--pct, 50%), rgba(245, 241, 235, 0.10) 100%);
      border-radius: 2px;
      outline: none;
    }

    .hitl-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--hot);
      cursor: pointer;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.3);
      transition: transform 150ms;
    }

    .hitl-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
    }

    .hitl-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--hot);
      cursor: pointer;
      border: 2px solid var(--ink);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.3);
    }

    .hitl-modify-value {
      font-family: var(--mono);
      font-size: 14px;
      color: var(--hot);
      font-weight: 600;
      min-width: 56px;
      text-align: right;
      letter-spacing: 0.04em;
    }

    .hitl-modify-actions,
    .hitl-command-actions {
      display: flex;
      gap: 8px;
    }

    .hitl-modify-actions .btn-go,
    .hitl-command-actions .btn-go {
      flex: 1;
      padding: 10px 16px;
      background: var(--hot);
      color: var(--ink);
      font-size: 13px;
      font-weight: 500;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 200ms;
    }

    .hitl-modify-actions .btn-go:hover,
    .hitl-command-actions .btn-go:hover {
      background: var(--deep);
      color: var(--bg);
    }

    .hitl-modify-actions .btn-cancel,
    .hitl-command-actions .btn-cancel {
      padding: 10px 16px;
      background: transparent;
      color: rgba(245, 241, 235, 0.7);
      font-size: 13px;
      border: 1px solid rgba(245, 241, 235, 0.15);
      border-radius: 9999px;
      cursor: pointer;
      transition: all 200ms;
    }

    .hitl-modify-actions .btn-cancel:hover,
    .hitl-command-actions .btn-cancel:hover {
      border-color: rgba(245, 241, 235, 0.35);
      color: var(--bg);
    }

    /* Command panel */
    .hitl-command-input {
      width: 100%;
      padding: 12px 14px;
      background: rgba(10, 10, 11, 0.5);
      border: 1px solid rgba(245, 241, 235, 0.15);
      border-radius: 8px;
      color: var(--bg);
      font-family: var(--sans);
      font-size: 14px;
      letter-spacing: -0.011em;
      margin-bottom: 12px;
      outline: none;
      transition: border-color 200ms;
    }

    .hitl-command-input:focus {
      border-color: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.18);
    }

    .hitl-command-input::placeholder {
      color: rgba(245, 241, 235, 0.35);
    }

    .hitl-command-suggestions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .hitl-command-chip {
      padding: 5px 10px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.10);
      border-radius: 9999px;
      font-size: 11px;
      color: rgba(245, 241, 235, 0.7);
      cursor: pointer;
      transition: all 180ms;
    }

    .hitl-command-chip:hover {
      background: rgba(255, 107, 61, 0.10);
      border-color: rgba(255, 107, 61, 0.4);
      color: var(--hot);
    }

    /* Toast feedback */
    .hitl-toast {
      position: absolute;
      top: 18px;
      right: 18px;
      padding: 8px 14px;
      background: rgba(74, 222, 128, 0.16);
      border: 1px solid rgba(74, 222, 128, 0.4);
      border-radius: 9999px;
      color: #4ADE80;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 600;
      animation: hitl-toast-pop 1.6s ease-out forwards;
      pointer-events: none;
      z-index: 10;
    }

    .hitl-toast.t-reject {
      background: rgba(245, 241, 235, 0.10);
      border-color: rgba(245, 241, 235, 0.25);
      color: rgba(245, 241, 235, 0.85);
    }

    .hitl-toast.t-modify {
      background: rgba(255, 107, 61, 0.16);
      border-color: rgba(255, 107, 61, 0.4);
      color: var(--hot);
    }

    .hitl-toast.t-command {
      background: rgba(180, 122, 255, 0.16);
      border-color: rgba(180, 122, 255, 0.4);
      color: #B47AFF;
    }

    /* History list — animate new entries in */
    .hitl-history li.new {
      animation: hitl-history-in 360ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* queue progress dots */
    .hitl-queue-progress {
      display: flex;
      gap: 5px;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(245, 241, 235, 0.08);
      align-items: center;
    }

    .hitl-queue-progress .pdot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(245, 241, 235, 0.18);
      transition: all 240ms;
    }

    .hitl-queue-progress .pdot.done {
      background: rgba(255, 107, 61, 0.4);
    }

    .hitl-queue-progress .pdot.current {
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.18);
      width: 18px;
      border-radius: 9999px;
    }

    .hitl-queue-progress .pos {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.5);
      letter-spacing: 0.06em;
    }

    .hitl-queue-progress .pos strong {
      color: var(--bg);
    }

    /* === HITL — Command Console (agent suggests, human decides) === */
    @keyframes hitl-flow {
      0% {
        transform: translateX(-2px);
        opacity: 0.4;
      }

      50% {
        transform: translateX(2px);
        opacity: 1;
      }

      100% {
        transform: translateX(-2px);
        opacity: 0.4;
      }
    }

    .hitl-console {
      margin-top: 80px;
      display: grid;
      grid-template-columns: 1fr 80px 1fr;
      gap: 0;
      align-items: stretch;
      background: linear-gradient(180deg, rgba(20, 20, 26, 0.7) 0%, rgba(10, 10, 11, 0.9) 100%);
      border: 1px solid rgba(245, 241, 235, 0.10);
      border-radius: var(--r-xl);
      overflow: hidden;
      position: relative;
    }

    .hitl-console::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 50% 40% at 0% 0%, rgba(255, 107, 61, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(91, 43, 196, 0.10) 0%, transparent 60%);
      pointer-events: none;
    }

    .hitl-pane {
      padding: 32px 36px;
      position: relative;
      z-index: 1;
    }

    .hitl-pane-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 22px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.08);
    }

    .hitl-pane-head .lbl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.6);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .hitl-pane-head .lbl .live-dot {
      background: var(--hot);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.18), 0 0 12px var(--hot);
    }

    .hitl-pane-head .meta {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.45);
      letter-spacing: 0.04em;
    }

    .hitl-pane-head .meta strong {
      color: var(--bg);
      font-weight: 500;
    }

    /* divider with flow arrows */
    .hitl-flow-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 24px 0;
      background:
        linear-gradient(180deg,
          transparent 0%,
          rgba(245, 241, 235, 0.06) 30%,
          rgba(245, 241, 235, 0.06) 70%,
          transparent 100%);
      background-size: 1px 100%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .hitl-flow-divider .arrow {
      color: var(--hot);
      font-size: 16px;
      animation: hitl-flow 2.4s ease-in-out infinite;
    }

    .hitl-flow-divider .arrow:nth-child(2) {
      animation-delay: 0.4s;
    }

    .hitl-flow-divider .arrow:nth-child(3) {
      animation-delay: 0.8s;
    }

    .hitl-flow-divider .lbl {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      margin: 16px 0;
      font-weight: 600;
    }

    /* AGENT pane */
    .hitl-suggestion {
      padding: 18px;
      background: rgba(255, 107, 61, 0.05);
      border: 1px solid rgba(255, 107, 61, 0.30);
      border-radius: 10px;
      margin-bottom: 16px;
      position: relative;
    }

    .hitl-suggestion-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 12px;
      gap: 8px;
    }

    .hitl-suggestion-id {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.10em;
      color: rgba(245, 241, 235, 0.55);
    }

    .hitl-suggestion-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hot);
      padding: 3px 8px;
      background: rgba(255, 107, 61, 0.14);
      border-radius: 9999px;
    }

    .hitl-suggestion-status::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 2px rgba(255, 107, 61, 0.18);
    }

    .hitl-suggestion-title {
      font-family: var(--serif);
      font-size: 18px;
      color: var(--bg);
      letter-spacing: -0.01em;
      line-height: 1.3;
      margin-bottom: 10px;
    }

    .hitl-suggestion-title em {
      font-style: normal;
      color: var(--warm);
    }

    .hitl-suggestion-trigger {
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(245, 241, 235, 0.65);
      line-height: 1.5;
      padding: 7px 12px;
      background: rgba(10, 10, 11, 0.5);
      border-radius: 6px;
      border-left: 2px solid var(--hot);
      display: inline-flex;
      gap: 4px;
      flex-wrap: wrap;
      letter-spacing: 0.04em;
    }

    .hitl-suggestion-trigger .k {
      color: rgba(245, 241, 235, 0.45);
      letter-spacing: 0.06em;
    }

    .hitl-suggestion-trigger .v {
      color: var(--bg);
    }

    .hitl-suggestion-trigger .accent {
      color: var(--hot);
      font-weight: 600;
    }

    .hitl-suggestion-meta {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 12px;
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.5);
      letter-spacing: 0.04em;
    }

    .hitl-suggestion-meta .v {
      color: var(--bg);
    }

    /* HUMAN pane */
    .hitl-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
    }

    .hitl-btn {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 14px 16px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.12);
      border-radius: 10px;
      cursor: pointer;
      transition: all 220ms var(--easing);
      color: var(--bg);
      text-align: left;
      font-family: var(--sans);
    }

    .hitl-btn:hover {
      transform: translateY(-2px);
    }

    .hitl-btn .ic {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .hitl-btn.accept .ic {
      background: rgba(74, 222, 128, 0.16);
      color: #4ADE80;
    }

    .hitl-btn.accept:hover {
      background: rgba(74, 222, 128, 0.10);
      border-color: rgba(74, 222, 128, 0.5);
    }

    .hitl-btn.reject .ic {
      background: rgba(245, 241, 235, 0.08);
      color: rgba(245, 241, 235, 0.7);
    }

    .hitl-btn.reject:hover {
      border-color: rgba(245, 241, 235, 0.3);
    }

    .hitl-btn.modify .ic {
      background: rgba(255, 107, 61, 0.16);
      color: var(--hot);
    }

    .hitl-btn.modify:hover {
      border-color: rgba(255, 107, 61, 0.4);
    }

    .hitl-btn.command .ic {
      background: rgba(180, 122, 255, 0.16);
      color: #B47AFF;
    }

    .hitl-btn.command:hover {
      border-color: rgba(180, 122, 255, 0.4);
    }

    .hitl-btn .label {
      font-size: 13px;
      font-weight: 500;
      color: var(--bg);
      letter-spacing: -0.011em;
    }

    .hitl-btn .hint {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.45);
    }

    .hitl-btn .key {
      font-family: var(--mono);
      font-size: 9px;
      padding: 1px 5px;
      background: rgba(245, 241, 235, 0.06);
      border-radius: 3px;
      color: rgba(245, 241, 235, 0.55);
      letter-spacing: 0.04em;
      margin-left: auto;
    }

    .hitl-history-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.42);
      font-weight: 500;
      margin-bottom: 10px;
    }

    .hitl-history {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .hitl-history li {
      display: grid;
      grid-template-columns: 64px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 8px 10px;
      background: rgba(245, 241, 235, 0.02);
      border-radius: 6px;
      font-size: 12px;
      list-style: none;
    }

    .hitl-history .ts {
      font-family: var(--mono);
      font-size: 9.5px;
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.04em;
    }

    .hitl-history .msg {
      color: var(--bg);
      font-size: 12px;
    }

    .hitl-history .msg .accent {
      color: var(--hot);
    }

    .hitl-history .verdict {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 4px;
      font-weight: 600;
    }

    .hitl-history .verdict.ok {
      background: rgba(74, 222, 128, 0.14);
      color: #4ADE80;
    }

    .hitl-history .verdict.no {
      background: rgba(245, 241, 235, 0.05);
      color: rgba(245, 241, 235, 0.5);
    }

    .hitl-history .verdict.mod {
      background: rgba(255, 107, 61, 0.14);
      color: var(--hot);
    }

    .hitl-history .verdict.cmd {
      background: rgba(180, 122, 255, 0.14);
      color: #B47AFF;
    }

    /* === HUMAN-IN-THE-LOOP === */
    .hitl-section {
      padding: 140px 0;
      background: var(--bg);
      color: var(--text);
      position: relative;
      overflow: hidden;
    }

    .hitl-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 50% 40% at 80% 0%, rgba(255, 107, 61, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 35% at 20% 100%, rgba(91, 43, 196, 0.04) 0%, transparent 60%);
      pointer-events: none;
    }

    .hitl-section .sec-head {
      border-top-color: var(--line);
      position: relative;
    }

    .hitl-section .sec-num {
      color: var(--text);
    }

    .hitl-section .micro {
      color: var(--text-3);
    }

    .hitl-section .h2 {
      color: var(--text);
      position: relative;
    }

    .hitl-section .h2 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--hot), var(--deep));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hitl-section .lead {
      color: var(--text-2);
      position: relative;
    }

    .hitl-section .container-wide {
      position: relative;
      z-index: 2;
    }

    .hitl-grid {
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      gap: 64px;
      margin-top: 96px;
      align-items: stretch;
    }

    .hitl-divider {
      background: linear-gradient(180deg,
          transparent 0%,
          var(--line) 30%,
          var(--line) 70%,
          transparent 100%);
    }

    .hitl-col-eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-3);
      font-weight: 500;
      margin-bottom: 22px;
    }

    .hitl-col-eyebrow.accent {
      color: var(--hot);
    }

    .hitl-col-title {
      font-family: var(--serif);
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text);
      margin-bottom: 36px;
      line-height: 1.05;
    }

    .hitl-col-human .hitl-col-title {
      color: var(--text);
    }

    .hitl-list {
      list-style: none;
      border-top: 1px solid var(--line);
    }

    .hitl-list li {
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 18px;
      align-items: baseline;
      padding: 20px 0;
      border-bottom: 1px dashed var(--line);
      transition: padding 250ms;
    }

    .hitl-list li:hover {
      padding-left: 6px;
    }

    .hitl-tag {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: var(--text-3);
      text-transform: uppercase;
    }

    .hitl-tag.accent {
      color: var(--hot);
    }

    .hitl-text {
      font-size: 16px;
      color: var(--text);
      line-height: 1.4;
      letter-spacing: -0.011em;
    }

    /* === PRICING === */
    .pricing-section {
      padding: 140px 0;
    }

    .pricing-card {
      margin-top: 80px;
      padding: 80px 64px;
      background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255, 107, 61, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 0% 100%, rgba(91, 43, 196, 0.18) 0%, transparent 70%),
        var(--ink);
      border-radius: var(--r-xl);
      color: var(--bg);
      text-align: center;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(245, 241, 235, 0.08);
    }

    .pricing-card .grid-pattern {
      opacity: 0.5;
    }

    .pricing-card .fig {
      color: rgba(245, 241, 235, 0.4);
      margin-bottom: 24px;
    }

    .pricing-card h3 {
      font-family: var(--serif);
      font-size: clamp(38px, 4.5vw, 60px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.022em;
      max-width: 880px;
      margin: 0 auto 24px;
      color: var(--bg);
      position: relative;
    }

    .pricing-card h3 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--warm), var(--hot));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .pricing-card p {
      max-width: 580px;
      margin: 0 auto 36px;
      color: rgba(245, 241, 235, 0.7);
      font-size: 17px;
      position: relative;
    }

    .pricing-card .cta-row {
      justify-content: center;
    }

    /* === DELIVERY === */
    .delivery-section {
      padding: 140px 0;
      background: var(--bg-subtle);
    }

    .delivery-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-top: 80px;
    }

    .delivery-card {
      padding: 48px;
      background: var(--bg-elev);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      position: relative;
      overflow: hidden;
      transition: border-color 250ms, transform 250ms var(--easing);
    }

    .delivery-card:hover {
      border-color: var(--text);
      transform: translateY(-3px);
    }

    .delivery-card .fig {
      margin-bottom: 28px;
    }

    .delivery-card h3 {
      ;
      letter-spacing: -0.014em;
      margin-bottom: 14px;
    }

    .delivery-card p {
      font-size: 15px;
      line-height: 1.55;
    }

    .delivery-card ul {
      list-style: none;
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .delivery-card ul li {
      display: flex;
      gap: 10px;
      align-items: baseline;
      font-size: 14px;
      color: var(--text-2);
    }

    .delivery-card ul li::before {
      content: "→";
      color: var(--hot);
      font-weight: 500;
      flex-shrink: 0;
    }

    /* === FAQ === */
    .faq-section {
      padding: 140px 0;
    }

    .faq-list {
      margin-top: 64px;
      max-width: 940px;
    }

    /* Long-form FAQ — grouped + collapsible */
    .faq-groups {
      margin-top: 64px;
      max-width: 980px;
      position: relative;
    }

    .faq-toggle {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .faq-extra {
      display: none;
    }

    .faq-toggle:checked~.faq-extra {
      display: block;
    }

    .faq-show-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 32px;
      padding: 14px 24px;
      background: var(--ink);
      color: var(--bg);
      border-radius: 9999px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all 250ms var(--easing);
      border: 1px solid var(--ink);
    }

    .faq-show-btn:hover {
      background: var(--deep);
      border-color: var(--deep);
      transform: translateY(-1px);
    }

    .faq-show-btn .arrow {
      display: inline-block;
      transition: transform 250ms;
    }

    .faq-toggle:checked~.faq-show-btn .arrow {
      transform: rotate(180deg);
    }

    .faq-show-btn .less {
      display: none;
    }

    .faq-toggle:checked~.faq-show-btn .more {
      display: none;
    }

    .faq-toggle:checked~.faq-show-btn .less {
      display: inline;
    }

    .faq-show-btn .count {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      padding: 3px 10px;
      background: rgba(245, 241, 235, 0.10);
      border-radius: 9999px;
      color: rgba(245, 241, 235, 0.7);
      margin-left: 4px;
    }

    .faq-group {
      margin-bottom: 56px;
    }

    .faq-group:last-child {
      margin-bottom: 0;
    }

    .faq-group-label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--hot);
      font-weight: 600;
      padding-bottom: 14px;
      margin-bottom: 8px;
      border-bottom: 1px solid var(--line);
      position: relative;
    }

    .faq-group-label::before {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 56px;
      height: 1px;
      background: var(--hot);
    }

    .faq-group .faq-item {
      padding: 24px 0;
    }

    .faq-group .faq-item summary {
      font-size: 20px;
      letter-spacing: -0.011em;
    }

    .faq-item {
      padding: 30px 0;
      border-bottom: 1px solid var(--line);
    }

    .faq-item summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 24px;
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: "+";
      font-size: 28px;
      color: var(--deep);
      transition: transform 200ms;
      font-weight: 300;
    }

    .faq-item[open] summary::after {
      content: "−";
    }

    .faq-item p {
      margin-top: 18px;
      font-size: 16px;
      max-width: 760px;
      line-height: 1.6;
      color: var(--text-2);
    }

    /* === COMPELLING OFFER CARD (above CTA) === */
    .offer-card {
      max-width: 1080px;
      margin: 80px auto 0;
      padding: 48px 56px;
      background:
        radial-gradient(ellipse 60% 60% at 100% 0%, rgba(255, 107, 61, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(91, 43, 196, 0.18) 0%, transparent 65%),
        linear-gradient(180deg, #14141A 0%, #0A0A0B 100%);
      border-radius: var(--r-xl);
      border: 1px solid rgba(245, 241, 235, 0.08);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 32px 80px -20px rgba(255, 107, 61, 0.20);
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 48px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .offer-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(245, 241, 235, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 241, 235, 0.04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 30%, transparent 80%);
      pointer-events: none;
    }

    .offer-tag {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 14px 6px 8px;
      background: rgba(255, 107, 61, 0.14);
      border: 1px solid rgba(255, 107, 61, 0.4);
      border-radius: 9999px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--hot);
      font-weight: 600;
      margin-bottom: 22px;
      position: relative;
    }

    .offer-tag::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.18), 0 0 12px var(--hot);
    }

    .offer-headline {
      font-family: var(--serif);
      font-size: clamp(28px, 3.4vw, 42px);
      font-weight: 600;
      line-height: 1.12;
      letter-spacing: -0.02em;
      color: var(--bg);
      margin-bottom: 20px;
      position: relative;
    }

    .offer-headline em {
      font-style: normal;
      background: linear-gradient(135deg, var(--warm), var(--hot));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .offer-terms {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 32px;
      padding-top: 22px;
      border-top: 1px solid rgba(245, 241, 235, 0.1);
      margin-top: 32px;
      position: relative;
    }

    .offer-terms li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 14px;
      color: rgba(245, 241, 235, 0.78);
      line-height: 1.4;
    }

    .offer-terms li::before {
      content: "";
      flex-shrink: 0;
      margin-top: 7px;
      width: 6px;
      height: 6px;
      background: var(--hot);
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.15);
    }

    .offer-terms li strong {
      color: var(--bg);
      font-weight: 600;
    }

    /* === AI-native panel (simple & powerful) === */
    .offer-ainative {
      position: relative;
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      padding: 32px 24px 28px;
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 107, 61, 0.14) 0%, transparent 70%),
        rgba(245, 241, 235, 0.03);
      border: 1px solid rgba(245, 241, 235, 0.10);
      border-radius: 20px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      overflow: hidden;
      text-align: center;
    }

    .offer-ainative::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(245, 241, 235, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 241, 235, 0.025) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 40%, transparent 90%);
      pointer-events: none;
    }

    .offer-ainative>* {
      position: relative;
      z-index: 1;
    }

    /* The big claim */
    .ainc-claim {
      font-family: var(--display);
      font-size: 56px;
      letter-spacing: -0.034em;
      line-height: 1;
      font-weight: 600;
      background: linear-gradient(135deg, var(--warm) 0%, var(--hot) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 6px;
    }

    .ainc-claim-sub {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      margin-bottom: 22px;
    }

    /* The flip — single, dramatic before→after */
    .ainc-flip {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 12px;
      align-items: center;
      padding: 14px 0;
      border-top: 1px dashed rgba(245, 241, 235, 0.12);
      border-bottom: 1px dashed rgba(245, 241, 235, 0.12);
    }

    .ainc-state {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;
    }

    .ainc-state .l {
      font-family: var(--mono);
      font-size: 8.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.45);
    }

    .ainc-state .v {
      font-family: var(--display);
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.018em;
      color: var(--bg);
      line-height: 1.1;
    }

    .ainc-state.before .v {
      color: rgba(245, 241, 235, 0.55);
    }

    .ainc-state.after .v {
      background: linear-gradient(135deg, var(--warm), var(--hot));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .ainc-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(255, 107, 61, 0.3);
      background: rgba(255, 107, 61, 0.10);
      color: var(--hot);
      animation: ainc-pulse 2.4s ease-in-out infinite;
    }

    .ainc-arrow svg {
      width: 14px;
      height: 14px;
    }

    @keyframes ainc-pulse {

      0%,
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 107, 61, 0.30);
      }

      50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 6px rgba(255, 107, 61, 0);
      }
    }

    /* Tail */
    .ainc-tail {
      margin-top: 16px;
      font-size: 12px;
      line-height: 1.4;
      color: rgba(245, 241, 235, 0.65);
      letter-spacing: -0.005em;
    }

    .ainc-tail strong {
      color: var(--bg);
      font-weight: 600;
    }


    /* === FINAL CTA === */
    .final-cta {
      padding: 140px 0;
      text-align: center;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: var(--ink);
      color: var(--bg);
    }

    .final-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(ellipse 80% 70% at 50% 130%,
          rgba(255, 107, 61, 0.65) 0%,
          rgba(255, 107, 61, 0.18) 35%,
          transparent 70%),
        radial-gradient(ellipse 60% 50% at 30% 110%,
          rgba(255, 176, 136, 0.45) 0%,
          transparent 60%),
        radial-gradient(ellipse 45% 40% at 70% 110%,
          rgba(91, 43, 196, 0.30) 0%,
          transparent 70%),
        var(--ink-deep);
    }

    .final-cta-rings {
      position: absolute;
      bottom: -200px;
      left: 50%;
      transform: translateX(-50%);
      width: 1200px;
      height: 1200px;
      z-index: -1;
      pointer-events: none;
      opacity: 0.4;
    }

    .final-cta-rings circle {
      fill: none;
      stroke: rgba(255, 107, 61, 0.3);
      stroke-dasharray: 4 6;
    }

    .final-cta .micro {
      color: rgba(245, 241, 235, 0.7);
      letter-spacing: 0.06em;
    }

    .final-cta h2 {
      font-family: var(--serif);
      font-size: clamp(48px, 6.5vw, 84px);
      font-weight: 600;
      line-height: 1.04;
      letter-spacing: -0.03em;
      max-width: 920px;
      margin: 24px auto 28px;
      color: var(--bg);
    }

    .final-cta h2 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--warm), var(--hot));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .final-cta p {
      max-width: 600px;
      margin: 0 auto 40px;
      font-size: 18px;
      color: rgba(245, 241, 235, 0.7);
    }

    .final-cta .cta-row {
      justify-content: center;
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      align-items: center;
    }

    .offer-card .btn {
      padding: 10px 20px;
      font-size: 13px;
    }

    /* === FOOTER === */
    footer {
      padding: 80px 0 36px;
      background: var(--ink);
      color: rgba(245, 241, 235, 0.7);
      border-top: 1px solid rgba(245, 241, 235, 0.08);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr repeat(3, 1fr);
      gap: 48px;
      margin-bottom: 56px;
    }

    .footer-col h4 {
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.4);
      margin-bottom: 20px;
      font-weight: 500;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col li {
      margin-bottom: 12px;
    }

    .footer-col a {
      color: rgba(245, 241, 235, 0.7);
      text-decoration: none;
      font-size: 14px;
      transition: color 250ms;
    }

    .footer-col a:hover {
      color: var(--bg);
    }

    footer .logo {
      color: var(--bg);
    }

    footer .logo small {
      color: rgba(245, 241, 235, 0.4);
    }

    .footer-bottom {
      padding-top: 32px;
      border-top: 1px solid rgba(245, 241, 235, 0.08);
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.04em;
    }

    /* === RESPONSIVE === */
    @media (max-width: 1180px) {

      .bento-old,
      .bento-cap {
        grid-template-columns: repeat(4, 1fr);
      }

      .bento-card.span-3,
      .bento-card.span-4,
      .cap-bento.span-3,
      .cap-bento.span-4 {
        grid-column: span 4;
      }

      .bento-card.span-2,
      .cap-bento.span-2 {
        grid-column: span 2;
      }
    }

    @media (max-width: 1024px) {
      .feather-hero {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .pillars {
        grid-template-columns: repeat(2, 1fr);
      }

      .perf-grid {
        grid-template-columns: 1fr;
      }

      .testi-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .delivery-grid {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .hypo-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .hero-mockup-wrap {
        display: none;
      }

      .mockup-body {
        grid-template-columns: 1fr;
      }

      .mockup-side {
        display: none;
      }

      .mockup-row-stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .hitl-grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }

      .hitl-divider {
        display: none;
      }

      .hitl-console {
        grid-template-columns: 1fr;
      }

      .hitl-flow-divider {
        padding: 8px 0;
        flex-direction: row;
        gap: 8px;
      }

      .hitl-flow-divider .lbl {
        writing-mode: horizontal-tb;
        transform: none;
        margin: 0 8px;
      }

      .hitl-flow-divider .arrow {
        transform: rotate(90deg);
      }

      .hypo-feed-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .cap-split {
        grid-template-columns: 1fr;
      }

      .cap-split-right {
        grid-template-rows: auto;
      }

      .oldway-split {
        grid-template-columns: 1fr;
      }

      .oldway-split-right {
        grid-template-rows: auto;
      }

      .testi-tab-nav {
        grid-template-columns: repeat(3, 1fr);
      }

      .mon-stats {
        grid-template-columns: repeat(2, 1fr);
      }

      .mon-watch {
        grid-template-columns: repeat(2, 1fr);
      }

      .mon-ch {
        grid-template-columns: 26px 1fr auto;
      }

      .mon-ch-spark,
      .mon-ch-status {
        display: none;
      }

      .testi-feature {
        grid-template-columns: 1fr;
      }

      .testi-feature .tf-thumb {
        min-height: 360px;
        aspect-ratio: 5 / 4;
      }

      .testi-feature .tf-body {
        padding: 36px;
        gap: 28px;
      }

      .testi-feature .tf-quote {
        font-size: 22px;
      }

      .testi-feature .tf-scope {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .testi-feature .tf-rings {
        width: 240px;
        height: 240px;
      }

      .testi-feature .tf-portrait svg {
        width: 160px;
        height: 160px;
      }

      .offer-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px;
      }

      .offer-ainative {
        max-width: 360px;
        margin-top: 8px;
      }

      .offer-terms {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .feather-fs-body {
        grid-template-columns: 1fr;
      }

      .feather-fs-side,
      .feather-fs-detail {
        display: none;
      }

      .lifecycle-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
      }

      .lifecycle-track::before {
        display: none;
      }

      .feather-band-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .intel-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .hero-grid-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: auto;
      }

      .hero-panel.p-graph-1,
      .hero-panel.p-kb,
      .hero-panel.p-graph-2,
      .hero-panel.p-learn {
        grid-column: 1;
        grid-row: auto;
      }

      .kb-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 720px) {

      /* Testi video + quote panel — phone-optimised */
      .testi-feature .tf-thumb {
        min-height: 0;
        aspect-ratio: 3 / 4;
      }

      .testi-feature .tf-body {
        padding: 24px 20px;
        gap: 18px;
      }

      .testi-feature .tf-quote {
        font-size: 18px;
        line-height: 1.45;
      }

      /* Testi tab nav: stay 3-col horizontal on phones, just tighter */
      .testi-tab-nav {
        gap: 6px;
      }

      .testi-tab-nav label {
        padding: 10px 10px;
        gap: 2px;
      }

      .testi-tab-nav label .row1 {
        gap: 4px;
      }

      .testi-tab-nav label .pilot-num {
        font-size: 8px;
        letter-spacing: 0.12em;
      }

      .testi-tab-nav label .signal {
        font-size: 7px;
        letter-spacing: 0.04em;
        gap: 4px;
      }

      .testi-tab-nav label .name {
        font-size: 15px;
      }

      .testi-tab-nav label .scope {
        font-size: 9px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      section.std,
      .perf-section,
      .feather-section,
      .testi-section,
      .pricing-section,
      .delivery-section,
      .faq-section,
      .flywheel-section,
      .hypo-section {
        padding: 80px 0;
      }

      .hero {
        padding: 56px 0 64px;
      }

      .hero-headline {
        font-size: clamp(36px, 11vw, 56px);
      }

      .sec-head {
        gap: 18px;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 36px;
      }

      .bento-old,
      .bento-cap {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
      }

      .bento-card,
      .cap-bento {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
      }

      .oldway-illo {
        padding: 28px;
      }

      .oldway-points {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .pillars,
      .testi-grid {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }

      .pricing-card {
        padding: 48px 28px;
      }

      .perf-tile {
        padding: 28px;
      }

      .perf-tile .v {
        font-size: 64px;
      }

      .perf-quote {
        padding: 36px 28px;
      }

      .delivery-card {
        padding: 32px;
      }

      .feather-card-body {
        padding: 20px;
        font-size: 12px;
      }

      .hero-cta {
        width: 100%;
      }

      .hero-cta .btn {
        flex: 1;
        justify-content: center;
      }

      .logo small {
        display: none;
      }

      .nav-links {
        display: none;
      }

      .kb-grid {
        grid-template-columns: 1fr 1fr;
      }

      .hero-showcase {
        padding: 14px;
      }

      .hero-panel {
        padding: 16px;
      }

      .hypo-feed-grid {
        grid-template-columns: 1fr;
      }

      .feather-fs-main {
        padding: 16px;
        font-size: 11px;
      }

      .lifecycle-track {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 32px;
      }

      .feather-band {
        padding: 28px;
      }

      .feather-band-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .intel-grid {
        grid-template-columns: 1fr;
      }

      .intel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
    }

    /* ============================================================
       LINEAR-STYLE INTERFACE (hero mockup)
       ============================================================ */
    .mockup-side.linear-side {
      padding: 8px;
      gap: 1px;
    }

    .linear-ws-pill {
      display: grid;
      grid-template-columns: 24px 1fr 14px;
      gap: 8px;
      align-items: center;
      padding: 7px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 180ms;
    }

    .linear-ws-pill:hover {
      background: rgba(245, 241, 235, 0.05);
    }

    .linear-ws-pill .ws-mark {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--hot), var(--deep));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 700;
      color: var(--bg);
      letter-spacing: -0.02em;
    }

    .linear-ws-pill .ws-name {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.011em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .linear-ws-pill .ws-chev {
      color: rgba(245, 241, 235, 0.45);
      font-size: 10px;
      text-align: center;
    }

    .linear-side-search {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 8px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 5px;
      font-family: var(--sans);
      font-size: 12px;
      color: rgba(245, 241, 235, 0.55);
      cursor: pointer;
      margin: 4px 0 8px;
    }

    .linear-side-search svg {
      width: 12px;
      height: 12px;
      color: rgba(245, 241, 235, 0.45);
    }

    .linear-side-search .kbd {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 9.5px;
      padding: 1px 5px;
      background: rgba(245, 241, 235, 0.06);
      border-radius: 3px;
      color: rgba(245, 241, 235, 0.55);
    }

    .linear-side-link {
      display: grid;
      grid-template-columns: 14px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 5px 8px;
      border-radius: 5px;
      font-family: var(--sans);
      font-size: 13px;
      color: rgba(245, 241, 235, 0.7);
      cursor: pointer;
      letter-spacing: -0.011em;
      transition: background 180ms;
    }

    .linear-side-link:hover {
      background: rgba(245, 241, 235, 0.04);
      color: var(--bg);
    }

    .linear-side-link.active {
      background: rgba(245, 241, 235, 0.07);
      color: var(--bg);
    }

    .linear-side-link svg {
      width: 14px;
      height: 14px;
      color: rgba(245, 241, 235, 0.5);
    }

    .linear-side-link.active svg {
      color: var(--hot);
    }

    .linear-side-link .ct {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.04em;
    }

    .linear-side-link .ct.urgent {
      background: var(--hot);
      color: var(--bg);
      padding: 1px 6px;
      border-radius: 8px;
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .linear-side-link .channel-mark {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--sans);
      font-size: 8.5px;
      font-weight: 700;
      color: white;
    }

    .linear-side-link .channel-mark.meta {
      background: linear-gradient(135deg, #1877F2, #0d4cb3);
    }

    .linear-side-link .channel-mark.google {
      background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC04 100%);
    }

    .linear-side-link .channel-mark.youtube {
      background: linear-gradient(135deg, #FF0000, #b30000);
    }

    .linear-side-link .channel-mark.reddit {
      background: linear-gradient(135deg, #FF4500, #cc3700);
    }

    .linear-side-section {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .linear-side-section:first-of-type {
      margin-top: 8px;
    }

    .linear-side-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 8px 4px 8px;
      font-family: var(--sans);
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.42);
      cursor: pointer;
    }

    .linear-side-section-head:hover {
      color: rgba(245, 241, 235, 0.7);
    }

    .linear-side-section-head .add {
      font-size: 14px;
      font-weight: 400;
      color: rgba(245, 241, 235, 0.4);
      line-height: 1;
    }

    .linear-side-section-head .chev {
      font-size: 9px;
      color: rgba(245, 241, 235, 0.4);
      margin-right: 4px;
    }

    .linear-side-foot {
      margin-top: auto;
      padding: 8px 6px 4px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-top: 1px solid rgba(245, 241, 235, 0.06);
    }

    .linear-side-foot .invite-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      font-family: var(--sans);
      font-size: 12px;
      color: rgba(245, 241, 235, 0.65);
      cursor: pointer;
      border-radius: 5px;
      transition: all 180ms;
      letter-spacing: -0.011em;
    }

    .linear-side-foot .invite-btn:hover {
      background: rgba(245, 241, 235, 0.04);
      color: var(--bg);
    }

    .linear-side-foot .invite-btn svg {
      width: 13px;
      height: 13px;
      color: rgba(245, 241, 235, 0.5);
    }

    .linear-side-foot .help-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      color: rgba(245, 241, 235, 0.5);
      font-family: var(--mono);
      font-size: 11px;
      cursor: pointer;
      transition: all 180ms;
    }

    .linear-side-foot .help-btn:hover {
      background: rgba(245, 241, 235, 0.06);
      color: var(--bg);
    }

    /* ===== Linear main view ===== */
    .mockup-main.linear-main {
      padding: 0;
      gap: 0;
      background: rgba(245, 241, 235, 0.005);
    }

    .linear-view-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px 12px;
      gap: 12px;
    }

    .linear-view-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.011em;
    }

    .linear-view-title svg {
      width: 15px;
      height: 15px;
      color: var(--hot);
    }

    .linear-view-title .badge {
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.55);
      background: rgba(245, 241, 235, 0.06);
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: 0.04em;
      font-weight: 500;
    }

    .linear-view-tools {
      display: flex;
      gap: 2px;
      align-items: center;
    }

    .linear-view-tool {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 5px;
      font-family: var(--sans);
      font-size: 12px;
      color: rgba(245, 241, 235, 0.65);
      cursor: pointer;
      letter-spacing: -0.011em;
      transition: all 180ms;
    }

    .linear-view-tool:hover {
      background: rgba(245, 241, 235, 0.06);
      color: var(--bg);
    }

    .linear-view-tool svg {
      width: 12px;
      height: 12px;
    }

    .linear-view-tool.icon-only {
      padding: 5px 6px;
    }

    /* Cycle banner */
    .linear-cycle-banner {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 18px;
      background: rgba(255, 107, 61, 0.04);
      border-top: 1px solid rgba(255, 107, 61, 0.10);
      border-bottom: 1px solid rgba(255, 107, 61, 0.10);
      font-family: var(--sans);
    }

    .linear-cycle-banner .pip {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.15);
      flex-shrink: 0;
    }

    .linear-cycle-banner .name {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.011em;
    }

    .linear-cycle-banner .meta {
      font-size: 11.5px;
      color: rgba(245, 241, 235, 0.55);
      letter-spacing: -0.011em;
    }

    .linear-cycle-banner .progress-track {
      flex: 1;
      max-width: 200px;
      height: 4px;
      background: rgba(245, 241, 235, 0.08);
      border-radius: 2px;
      overflow: hidden;
    }

    .linear-cycle-banner .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--hot), #FFB088);
      border-radius: 2px;
    }

    .linear-cycle-banner .progress-pct {
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(245, 241, 235, 0.7);
      letter-spacing: 0.02em;
    }

    .linear-cycle-banner .scope {
      display: flex;
      gap: 14px;
      font-family: var(--mono);
      font-size: 10.5px;
      color: rgba(245, 241, 235, 0.55);
      letter-spacing: 0.04em;
      margin-left: auto;
    }

    .linear-cycle-banner .scope strong {
      color: var(--bg);
      font-weight: 600;
    }

    /* Filter chip bar */
    .linear-filter-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 9px 18px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.06);
    }

    .linear-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 8px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.08);
      border-radius: 4px;
      font-family: var(--sans);
      font-size: 11.5px;
      color: rgba(245, 241, 235, 0.7);
      cursor: pointer;
      letter-spacing: -0.011em;
      transition: all 180ms;
    }

    .linear-filter-chip:hover {
      border-color: rgba(245, 241, 235, 0.18);
      color: var(--bg);
    }

    .linear-filter-chip svg {
      width: 11px;
      height: 11px;
      opacity: 0.7;
    }

    .linear-filter-chip .filter-key {
      color: rgba(245, 241, 235, 0.5);
    }

    .linear-filter-chip .filter-val {
      color: var(--bg);
      font-weight: 500;
    }

    .linear-filter-chip .x {
      margin-left: 1px;
      color: rgba(245, 241, 235, 0.4);
      font-size: 13px;
      line-height: 1;
    }

    .linear-filter-add {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      font-family: var(--sans);
      font-size: 11.5px;
      color: rgba(245, 241, 235, 0.45);
      cursor: pointer;
      border-radius: 4px;
      transition: color 180ms;
    }

    .linear-filter-add:hover {
      color: var(--bg);
    }

    .linear-filter-add svg {
      width: 10px;
      height: 10px;
    }

    .linear-filter-spacer {
      flex: 1;
    }

    /* List groups */
    .linear-list {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .linear-group {
      display: flex;
      flex-direction: column;
    }

    .linear-group-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 18px;
      background: rgba(245, 241, 235, 0.022);
      border-bottom: 1px solid rgba(245, 241, 235, 0.05);
      font-family: var(--sans);
      font-size: 12px;
      cursor: pointer;
      transition: background 120ms;
    }

    .linear-group-head:hover {
      background: rgba(245, 241, 235, 0.035);
    }

    .linear-group-head .chev {
      color: rgba(245, 241, 235, 0.4);
      font-size: 9px;
      width: 8px;
      text-align: center;
    }

    .linear-group-head .status-icon {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .linear-group-head .name {
      color: var(--bg);
      font-weight: 500;
      letter-spacing: -0.011em;
    }

    .linear-group-head .count {
      color: rgba(245, 241, 235, 0.45);
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: 0.04em;
    }

    .linear-group-head .add-btn {
      margin-left: auto;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      color: rgba(245, 241, 235, 0.4);
      font-size: 13px;
      transition: all 180ms;
    }

    .linear-group-head:hover .add-btn {
      background: rgba(245, 241, 235, 0.06);
      color: var(--bg);
    }

    /* Issue row */
    .linear-row {
      display: grid;
      grid-template-columns: 18px 16px 64px 1fr auto auto auto auto;
      gap: 12px;
      align-items: center;
      padding: 7px 18px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.04);
      font-family: var(--sans);
      font-size: 12.5px;
      cursor: pointer;
      transition: background 120ms;
    }

    .linear-row:hover {
      background: rgba(245, 241, 235, 0.025);
    }

    .linear-row .priority {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 1.5px;
      height: 14px;
    }

    .linear-row .priority span {
      width: 2.5px;
      border-radius: 1px;
      background: rgba(245, 241, 235, 0.22);
      display: block;
    }

    .linear-row .priority span:nth-child(1) {
      height: 4px;
    }

    .linear-row .priority span:nth-child(2) {
      height: 7px;
    }

    .linear-row .priority span:nth-child(3) {
      height: 10px;
    }

    .linear-row .priority span:nth-child(4) {
      height: 13px;
    }

    .linear-row .priority.urgent span {
      background: #F2453D;
    }

    .linear-row .priority.high span:nth-child(-n+3) {
      background: var(--hot);
    }

    .linear-row .priority.med span:nth-child(-n+2) {
      background: #F5C12E;
    }

    .linear-row .priority.low span:nth-child(-n+1) {
      background: rgba(245, 241, 235, 0.5);
    }

    .linear-row .status-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .linear-row .id {
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(245, 241, 235, 0.45);
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .linear-row .title {
      color: var(--bg);
      font-weight: 400;
      letter-spacing: -0.011em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .linear-row .title strong {
      font-weight: 500;
    }

    .linear-row .title .accent {
      color: var(--hot);
      font-weight: 500;
    }

    .linear-row .title .pos {
      color: #4ADE80;
      font-weight: 500;
    }

    .linear-row .labels {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }

    .linear-row .label-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 1px 7px;
      border-radius: 9px;
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.02em;
      font-weight: 500;
      white-space: nowrap;
    }

    .linear-row .label-pill::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    .linear-row .label-pill.creative {
      color: var(--hot);
      background: rgba(255, 107, 61, 0.12);
    }

    .linear-row .label-pill.audience {
      color: #B47AFF;
      background: rgba(180, 122, 255, 0.13);
    }

    .linear-row .label-pill.bidding {
      color: #4ADE80;
      background: rgba(74, 222, 128, 0.12);
    }

    .linear-row .label-pill.budget {
      color: #FFB088;
      background: rgba(255, 176, 136, 0.13);
    }

    .linear-row .label-pill.copy {
      color: #6FE7DD;
      background: rgba(111, 231, 221, 0.12);
    }

    .linear-row .label-pill.placement {
      color: #F5C12E;
      background: rgba(245, 193, 46, 0.12);
    }

    .linear-row .channel {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 700;
      color: white;
      flex-shrink: 0;
      letter-spacing: -0.02em;
    }

    .linear-row .channel.meta {
      background: linear-gradient(135deg, #1877F2, #0d4cb3);
    }

    .linear-row .channel.google {
      background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC04 100%);
    }

    .linear-row .channel.youtube {
      background: linear-gradient(135deg, #FF0000, #b30000);
    }

    .linear-row .channel.reddit {
      background: linear-gradient(135deg, #FF4500, #cc3700);
    }

    .linear-row .assignee {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.02em;
      flex-shrink: 0;
      border: 1px solid rgba(245, 241, 235, 0.10);
    }

    .linear-row .assignee.agent {
      background: linear-gradient(135deg, var(--hot), var(--deep));
    }

    .linear-row .assignee.sr {
      background: linear-gradient(135deg, #5B2BC4, #B47AFF);
    }

    .linear-row .assignee.kp {
      background: linear-gradient(135deg, #4285F4, #34A853);
    }

    .linear-row .assignee.aa {
      background: linear-gradient(135deg, #14B8A6, #06B6D4);
    }

    .linear-row .assignee.nd {
      background: linear-gradient(135deg, #F2453D, #FF6B3D);
    }

    .linear-row .when {
      font-family: var(--mono);
      font-size: 10.5px;
      color: rgba(245, 241, 235, 0.45);
      white-space: nowrap;
      letter-spacing: 0.02em;
      min-width: 28px;
      text-align: right;
    }

    /* Trend graphs row */
    .linear-trend-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      padding: 14px 18px 14px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.06);
    }

    .linear-trend-card {
      background: rgba(245, 241, 235, 0.025);
      border: 1px solid rgba(245, 241, 235, 0.06);
      border-radius: 8px;
      padding: 12px 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
      overflow: hidden;
    }

    .linear-trend-card::after {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 107, 61, 0.30), transparent);
    }

    .linear-trend-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .linear-trend-title {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--sans);
      font-size: 10.5px;
      font-weight: 500;
      color: rgba(245, 241, 235, 0.6);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .linear-trend-title .range {
      font-family: var(--mono);
      font-size: 9px;
      color: rgba(245, 241, 235, 0.45);
      background: rgba(245, 241, 235, 0.05);
      padding: 1px 5px;
      border-radius: 3px;
      letter-spacing: 0.04em;
      text-transform: none;
      font-weight: 500;
    }

    .linear-trend-info {
      width: 12px;
      height: 12px;
      color: rgba(245, 241, 235, 0.3);
      font-size: 11px;
      cursor: help;
    }

    .linear-trend-value-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 8px;
    }

    .linear-trend-value {
      font-family: var(--sans);
      font-size: 22px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.022em;
      line-height: 1;
    }

    .linear-trend-value .unit {
      color: var(--hot);
      font-size: 0.62em;
      font-weight: 500;
      margin-left: 1px;
    }

    .linear-trend-delta {
      font-family: var(--sans);
      font-size: 11px;
      color: #4ADE80;
      font-weight: 500;
      letter-spacing: -0.011em;
    }

    .linear-trend-delta.down {
      color: #F2453D;
    }

    .linear-trend-chart {
      width: 100%;
      height: 56px;
      position: relative;
      margin-top: 10px;
    }

    .linear-trend-chart svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .linear-trend-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      font-family: var(--mono);
      font-size: 9.5px;
      color: rgba(245, 241, 235, 0.4);
      letter-spacing: 0.04em;
    }

    .linear-trend-foot .live {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: rgba(245, 241, 235, 0.55);
    }

    .linear-trend-foot .live::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #FF6B3D;
      box-shadow: 0 0 0 2px rgba(255, 107, 61, 0.22);
      animation: mockup-pulse 2.4s ease-in-out infinite;
    }

    /* ============================================================
       HITL — Linear-style override (single column, big buttons)
       ============================================================ */
    .hitl-console.hitl-linear {
      display: block;
      grid-template-columns: none;
      max-width: 780px;
      margin: 0 auto;
      position: relative;
      background: #0E0E10;
      color: var(--bg);
      border: 1px solid rgba(10, 10, 11, 0.10);
      border-radius: 14px;
      padding: 0;
      overflow: hidden;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 12px 32px -12px rgba(10, 10, 11, 0.30);
    }

    .hitl-console.hitl-linear::before {
      display: none;
    }

    .hitl-console.hitl-linear .hl-view-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 18px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.08);
    }

    .hitl-console.hitl-linear .hl-view-title {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--sans);
      font-size: 13.5px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.011em;
    }

    .hl-pip {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--hot);
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.18);
      animation: mockup-pulse 2.4s ease-in-out infinite;
    }

    .hl-badge {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--bg);
      background: rgba(255, 107, 61, 0.18);
      border: 1px solid rgba(255, 107, 61, 0.30);
      padding: 2px 8px;
      border-radius: 9px;
      letter-spacing: 0.04em;
      font-weight: 600;
    }

    .hitl-console.hitl-linear .hl-view-meta {
      font-family: var(--mono);
      font-size: 10.5px;
      color: rgba(245, 241, 235, 0.5);
      letter-spacing: 0.04em;
    }

    /* Suggestion card — min-height pins it so content swaps (different
       title/meta lengths across the queue) don't reflow the layout below. */
    .hitl-console.hitl-linear .hl-card {
      margin: 18px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.10);
      border-radius: 10px;
      padding: 18px 20px 14px;
      position: relative;
      min-height: 168px;
      contain: layout;
    }

    .hl-card-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .hitl-console.hitl-linear .hl-card-id {
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(245, 241, 235, 0.55);
      letter-spacing: 0.04em;
    }

    /* Type pill — Linear label style: dot + uppercase mono text. No bg, no border. */
    .hitl-console.hitl-linear .hl-type-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      padding: 0;
      border: none;
      background: transparent;
      font-weight: 600;
    }

    .hitl-console.hitl-linear .hl-type-pill::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }

    .hitl-console.hitl-linear .hl-type-pill.strategic {
      color: #B47AFF;
    }

    .hitl-console.hitl-linear .hl-type-pill.tactical {
      color: var(--hot);
    }

    .hitl-console.hitl-linear .hl-type-pill.executional {
      color: #4ADE80;
    }

    .hitl-console.hitl-linear .hl-card-status {
      margin-left: auto;
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: #FBBF24;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-weight: 600;
    }

    .hitl-console.hitl-linear .hl-card-status::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #FBBF24;
      box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
      animation: mockup-pulse 1.4s ease-in-out infinite;
    }

    .hitl-console.hitl-linear .hl-card-title {
      font-family: var(--sans);
      font-size: 22px;
      font-weight: 500;
      color: var(--bg);
      letter-spacing: -0.018em;
      line-height: 1.25;
      margin-bottom: 16px;
    }

    .hitl-console.hitl-linear .hl-card-title em {
      font-style: normal;
      color: var(--hot);
      font-weight: 600;
    }

    .hl-card-meta {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-top: 12px;
      border-top: 1px solid rgba(245, 241, 235, 0.06);
    }

    .hl-meta-row {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 10px;
      align-items: baseline;
      font-family: var(--sans);
      font-size: 13px;
      color: rgba(245, 241, 235, 0.85);
      letter-spacing: -0.005em;
    }

    .hl-k {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.45);
      font-weight: 500;
    }

    .hl-v {
      color: rgba(245, 241, 235, 0.85);
    }

    .hl-v .accent {
      color: var(--hot);
      font-weight: 600;
    }

    .hl-v .k {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.45);
      margin-right: 4px;
    }

    .hitl-console.hitl-linear .hl-queue-progress {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(245, 241, 235, 0.06);
      font-family: var(--mono);
      font-size: 10px;
      color: rgba(245, 241, 235, 0.5);
      letter-spacing: 0.04em;
    }

    .hitl-console.hitl-linear .hl-queue-progress .pdot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(245, 241, 235, 0.18);
    }

    .hitl-console.hitl-linear .hl-queue-progress .pdot.current {
      background: var(--hot);
      box-shadow: 0 0 0 2px rgba(255, 107, 61, 0.25);
    }

    .hitl-console.hitl-linear .hl-queue-progress .pdot.done {
      background: rgba(245, 241, 235, 0.4);
    }

    .hitl-console.hitl-linear .hl-queue-progress .pos {
      margin-left: auto;
      color: rgba(245, 241, 235, 0.65);
    }

    .hitl-console.hitl-linear .hl-queue-progress .pos strong {
      color: var(--bg);
      font-weight: 600;
    }

    /* Action prompt label */
    .hl-action-prompt {
      padding: 0 18px 8px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      font-weight: 500;
    }

    .hl-action-prompt strong {
      color: var(--bg);
      font-weight: 600;
    }

    /* Buttons row — Linear-style, clearly clickable */
    .hl-actions {
      padding: 0 18px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 10px;
    }

    @media (max-width: 720px) {
      .hl-actions {
        grid-template-columns: 1fr 1fr;
      }
    }

    .hl-btn {
      display: grid;
      grid-template-columns: 32px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 13px 12px;
      background: linear-gradient(180deg, rgba(245, 241, 235, 0.10), rgba(245, 241, 235, 0.06));
      border: 1px solid rgba(245, 241, 235, 0.16);
      border-radius: 8px;
      color: var(--bg);
      font-family: var(--sans);
      cursor: pointer;
      transition: background 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
      position: relative;
      text-align: left;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 1px 2px rgba(0, 0, 0, 0.30),
        0 4px 10px -4px rgba(0, 0, 0, 0.40);
    }

    .hl-btn:hover {
      background: linear-gradient(180deg, rgba(245, 241, 235, 0.14), rgba(245, 241, 235, 0.09));
      border-color: rgba(245, 241, 235, 0.28);
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 8px 18px -6px rgba(0, 0, 0, 0.45);
    }

    .hl-btn:active {
      transform: translateY(0);
      background: rgba(245, 241, 235, 0.05);
      box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.28),
        0 1px 1px rgba(0, 0, 0, 0.20);
    }

    .hl-btn:focus-visible {
      outline: 2px solid var(--hot);
      outline-offset: 2px;
    }

    .hl-btn-icon {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      flex-shrink: 0;
      transition: all 160ms;
    }

    .hl-btn-content {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .hl-btn-label {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.011em;
      line-height: 1.1;
    }

    .hl-btn-hint {
      font-size: 10.5px;
      color: rgba(245, 241, 235, 0.55);
      letter-spacing: -0.005em;
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }

    .hl-btn-key {
      font-family: var(--mono);
      font-size: 9.5px;
      padding: 2px 6px;
      background: rgba(245, 241, 235, 0.08);
      border-radius: 3px;
      color: rgba(245, 241, 235, 0.65);
      letter-spacing: 0.06em;
      flex-shrink: 0;
      font-weight: 500;
    }

    .hl-btn.accept .hl-btn-icon {
      background: rgba(74, 222, 128, 0.18);
      color: #4ADE80;
    }

    .hl-btn.accept:hover {
      background: rgba(74, 222, 128, 0.10);
      border-color: rgba(74, 222, 128, 0.45);
    }

    .hl-btn.accept:hover .hl-btn-icon {
      background: #4ADE80;
      color: #0A0A0B;
    }

    .hl-btn.reject .hl-btn-icon {
      background: rgba(242, 69, 61, 0.18);
      color: #F2453D;
    }

    .hl-btn.reject:hover {
      background: rgba(242, 69, 61, 0.08);
      border-color: rgba(242, 69, 61, 0.45);
    }

    .hl-btn.reject:hover .hl-btn-icon {
      background: #F2453D;
      color: #FFFFFF;
    }

    .hl-btn.modify .hl-btn-icon {
      background: rgba(255, 107, 61, 0.18);
      color: var(--hot);
    }

    .hl-btn.modify:hover {
      background: rgba(255, 107, 61, 0.08);
      border-color: rgba(255, 107, 61, 0.45);
    }

    .hl-btn.modify:hover .hl-btn-icon {
      background: var(--hot);
      color: var(--bg);
    }

    .hl-btn.feedback .hl-btn-icon {
      background: rgba(180, 122, 255, 0.18);
      color: #B47AFF;
    }

    .hl-btn.feedback:hover {
      background: rgba(180, 122, 255, 0.08);
      border-color: rgba(180, 122, 255, 0.45);
    }

    .hl-btn.feedback:hover .hl-btn-icon {
      background: #B47AFF;
      color: var(--bg);
    }

    /* "Acting" state — flashes when clicked */
    @keyframes hl-flash-accept {
      0% {
        background: rgba(74, 222, 128, 0.35);
      }

      100% {
        background: rgba(245, 241, 235, 0.05);
      }
    }

    @keyframes hl-flash-reject {
      0% {
        background: rgba(242, 69, 61, 0.35);
      }

      100% {
        background: rgba(245, 241, 235, 0.05);
      }
    }

    @keyframes hl-flash-modify {
      0% {
        background: rgba(255, 107, 61, 0.35);
      }

      100% {
        background: rgba(245, 241, 235, 0.05);
      }
    }

    @keyframes hl-flash-feedback {
      0% {
        background: rgba(180, 122, 255, 0.35);
      }

      100% {
        background: rgba(245, 241, 235, 0.05);
      }
    }

    .hl-btn.accept.acting {
      animation: hl-flash-accept 900ms ease-out;
    }

    .hl-btn.reject.acting {
      animation: hl-flash-reject 900ms ease-out;
    }

    .hl-btn.modify.acting {
      animation: hl-flash-modify 900ms ease-out;
    }

    .hl-btn.feedback.acting {
      animation: hl-flash-feedback 900ms ease-out;
    }

    /* Inline action result strip — "Acting…", "Rejected", etc. */
    .hl-action-result {
      margin: 12px 18px 0;
      padding: 10px 14px;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.08);
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--sans);
      font-size: 12.5px;
      color: rgba(245, 241, 235, 0.85);
      letter-spacing: -0.011em;
      opacity: 0;
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-width: 0;
      margin-top: 0;
      overflow: hidden;
      transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hl-action-result.show {
      opacity: 1;
      max-height: 100px;
      padding-top: 11px;
      padding-bottom: 11px;
      border-width: 1px;
      margin-top: 12px;
    }

    .hl-action-result .ar-icon {
      width: 24px;
      height: 24px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .hl-action-result .ar-body {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
      min-width: 0;
    }

    .hl-action-result .ar-status {
      font-family: var(--sans);
      font-size: 12.5px;
      letter-spacing: -0.011em;
      color: var(--bg);
    }

    .hl-action-result .ar-status strong {
      font-weight: 600;
    }

    .hl-action-result .ar-learning {
      font-family: var(--mono);
      font-size: 10.5px;
      color: rgba(245, 241, 235, 0.6);
      letter-spacing: 0.02em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: none;
    }

    .hl-action-result.has-learning .ar-learning {
      display: block;
    }

    .hl-action-result .ar-learning code {
      color: var(--hot);
      background: rgba(255, 107, 61, 0.10);
      padding: 1px 6px;
      border-radius: 3px;
      font-size: 0.95em;
      margin-left: 4px;
      font-family: var(--mono);
    }

    .hl-action-result .ar-learning .lesson {
      color: rgba(245, 241, 235, 0.8);
      font-style: normal;
    }

    .hl-action-result .ar-spinner {
      width: 12px;
      height: 12px;
      border: 1.5px solid rgba(245, 241, 235, 0.20);
      border-top-color: var(--bg);
      border-radius: 50%;
      animation: hl-spin 700ms linear infinite;
      margin-left: auto;
    }

    @keyframes hl-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .hl-action-result.accept {
      background: rgba(74, 222, 128, 0.08);
      border-color: rgba(74, 222, 128, 0.30);
    }

    .hl-action-result.accept .ar-icon {
      background: #4ADE80;
      color: #0A0A0B;
    }

    .hl-action-result.reject {
      background: rgba(242, 69, 61, 0.08);
      border-color: rgba(242, 69, 61, 0.30);
    }

    .hl-action-result.reject .ar-icon {
      background: #F2453D;
      color: #FFFFFF;
    }

    .hl-action-result.modify {
      background: rgba(255, 107, 61, 0.08);
      border-color: rgba(255, 107, 61, 0.30);
    }

    .hl-action-result.modify .ar-icon {
      background: var(--hot);
      color: var(--bg);
    }

    .hl-action-result.feedback {
      background: rgba(180, 122, 255, 0.08);
      border-color: rgba(180, 122, 255, 0.30);
    }

    .hl-action-result.feedback .ar-icon {
      background: #B47AFF;
      color: var(--bg);
    }

    /* Stats row */
    .hl-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      padding: 16px 18px 14px;
      margin-top: 18px;
      border-top: 1px solid rgba(245, 241, 235, 0.08);
    }

    .hl-stat {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 0 14px;
      border-right: 1px solid rgba(245, 241, 235, 0.06);
    }

    .hl-stat:last-child {
      border-right: none;
    }

    .hl-stat:first-child {
      padding-left: 0;
    }

    .hl-stat-v {
      font-family: var(--sans);
      font-size: 22px;
      font-weight: 600;
      color: var(--bg);
      letter-spacing: -0.022em;
      line-height: 1;
    }

    .hl-stat-l {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      font-weight: 500;
    }

    /* History */
    .hl-history-head {
      padding: 0 18px 8px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.5);
      font-weight: 500;
    }

    .hitl-console.hitl-linear .hl-history {
      padding: 0 18px 18px;
      margin: 0;
    }

    /* Modify/Command panels — anchor below buttons */
    .hitl-console.hitl-linear .hitl-modify,
    .hitl-console.hitl-linear .hitl-command {
      margin: 12px 18px 0;
    }

    /* prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }

    /* ====================================================================== */
    /* STACK SECTION — "Bottom-funnel optimization, finally in real-time"     */
    /*                                                                        */
    /* Two illustrations stacked:                                             */
    /*   1. .stack-feed     — animated event log (proves the real-time claim) */
    /*   2. .stack-arch     — horizontal strip: Stack → Ontology → FeatherDB   */
    /*                        (proves the "plugs in" claim)                   */
    /* ====================================================================== */

    /* ---------- 2-COLUMN: Integrations (left, emphasised) + tabbed use cases (right) ---------- */
    .stack-two {
      max-width: 1040px;
      margin: 56px auto 24px;
      display: grid;
      grid-template-columns: minmax(360px, 460px) 1fr;
      gap: 20px;
      align-items: stretch;
    }

    /* Left panel — Integrations (dark canvas, emphasised as the primary story) */
    .stack-integrations {
      padding: 22px 26px 24px;
      background: linear-gradient(180deg, #131217 0%, #0E0E11 100%);
      border: 1px solid rgba(255, 107, 61, 0.28);
      border-radius: 16px;
      box-shadow:
        0 0 0 1px rgba(255, 107, 61, 0.06) inset,
        0 30px 70px -20px rgba(255, 107, 61, 0.26),
        0 8px 22px rgba(0, 0, 0, 0.22);
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }

    /* Subtle radial accent in the upper-right of the integrations panel */
    .stack-integrations::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 60%;
      height: 60%;
      background: radial-gradient(ellipse at top right, rgba(255, 107, 61, 0.10) 0%, transparent 60%);
      border-radius: inherit;
      pointer-events: none;
    }

    .stack-integrations>* {
      position: relative;
      z-index: 1;
    }

    .stack-integrations-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 18px;
      margin-bottom: 8px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.10);
    }

    .si-eyebrow {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: #FFB088;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .si-eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--hot, #FF6B3D);
      box-shadow: 0 0 0 4px rgba(255, 107, 61, 0.18), 0 0 12px var(--hot, #FF6B3D);
      animation: stack-feed-pulse 1.8s ease-in-out infinite;
    }

    .si-meta {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.62);
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(245, 241, 235, 0.06);
      border: 1px solid rgba(245, 241, 235, 0.12);
    }

    /* Compact category rows — bigger logos, more breathing room */
    .integ-cat {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px 0;
      border-bottom: 1px dashed rgba(245, 241, 235, 0.08);
    }

    .integ-cat:last-child {
      border-bottom: 0;
      padding-bottom: 4px;
    }

    .integ-cat-head {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .integ-cat-label {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.85);
    }

    .integ-cat.is-hot .integ-cat-label {
      color: var(--hot, #FF6B3D);
    }

    .integ-cat-tag {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(255, 107, 61, 0.18);
      border: 1px solid rgba(255, 107, 61, 0.45);
      color: #FFB088;
    }

    .integ-cat-logos {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .stack-integrations .stack-logo {
      width: 44px;
      height: 44px;
      border-radius: 11px;
      box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(245, 241, 235, 0.08) inset;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
      cursor: default;
    }

    .stack-integrations .stack-logo:hover {
      transform: translateY(-2px) scale(1.06);
      box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 107, 61, 0.32) inset,
        0 0 18px rgba(255, 107, 61, 0.24);
    }

    .integ-cat.is-hot .stack-logo {
      box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(255, 107, 61, 0.42) inset,
        0 0 16px rgba(255, 107, 61, 0.26);
    }

    .integ-cat.is-hot .stack-logo:hover {
      box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 107, 61, 0.6) inset,
        0 0 24px rgba(255, 107, 61, 0.42);
    }

    /* Footer line in the integrations panel — soft hint that more is supported */
    .stack-integrations-foot {
      margin-top: 12px;
      padding-top: 14px;
      border-top: 1px solid rgba(245, 241, 235, 0.08);
      font-family: var(--sans, 'Inter', sans-serif);
      font-size: 12.5px;
      letter-spacing: -0.005em;
      color: rgba(245, 241, 235, 0.5);
      text-align: center;
    }

    .stack-integrations-foot strong {
      color: rgba(245, 241, 235, 0.85);
      font-weight: 600;
    }

    /* Right panel — tabbed use cases (CSS-only via radio buttons) */
    .usecase-tabs {
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, #131217 0%, #0E0E11 100%);
      border: 1px solid rgba(255, 107, 61, 0.22);
      border-radius: 16px;
      box-shadow:
        0 0 0 1px rgba(255, 107, 61, 0.04) inset,
        0 26px 60px -20px rgba(255, 107, 61, 0.22),
        0 8px 22px rgba(0, 0, 0, 0.18);
      overflow: hidden;
      position: relative;
    }

    .usecase-tabs>input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .usecase-tabbar {
      display: flex;
      gap: 0;
      border-bottom: 1px solid rgba(245, 241, 235, 0.08);
    }

    .usecase-tab {
      flex: 1 1 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 16px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(245, 241, 235, 0.55);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
      user-select: none;
    }

    .usecase-tab:hover {
      color: rgba(245, 241, 235, 0.85);
      background: rgba(255, 107, 61, 0.04);
    }

    .ut-glyph {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: currentColor;
      opacity: 0.8;
    }

    /* Active tab styling — sibling selectors based on which radio is checked */
    #uc-actions:checked~.usecase-tabbar .usecase-tab-actions,
    #uc-alerts:checked~.usecase-tabbar .usecase-tab-alerts {
      color: var(--hot, #FF6B3D);
      border-bottom-color: var(--hot, #FF6B3D);
      background: rgba(255, 107, 61, 0.06);
    }

    .usecase-pane {
      display: none;
    }

    #uc-actions:checked~.usecase-pane-actions,
    #uc-alerts:checked~.usecase-pane-alerts {
      display: flex;
      flex-direction: column;
    }

    /* Use case pane content */
    .up-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 22px;
      border-bottom: 1px solid rgba(245, 241, 235, 0.06);
    }

    .up-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: rgba(255, 107, 61, 0.14);
      border: 1px solid rgba(255, 107, 61, 0.4);
      border-radius: 999px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--hot, #FF6B3D);
    }

    .up-pill-warn {
      background: rgba(245, 197, 46, 0.14);
      border-color: rgba(245, 197, 46, 0.4);
      color: #F5C12E;
    }

    .up-pill .live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.22);
      animation: stack-feed-pulse 1.6s ease-in-out infinite;
    }

    .up-pill-warn .live-dot {
      box-shadow: 0 0 0 3px rgba(245, 197, 46, 0.22);
    }

    @keyframes stack-feed-pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.55;
        transform: scale(0.85);
      }
    }

    .up-title {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: rgba(245, 241, 235, 0.82);
      letter-spacing: -0.005em;
    }

    .up-body {
      padding: 14px 22px 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      flex: 1 1 auto;
    }

    .feed-evt {
      display: grid;
      grid-template-columns: 80px 1fr;
      align-items: center;
      gap: 14px;
      animation: feed-evt-in 0.5s ease-out;
    }

    @keyframes feed-evt-in {
      from {
        opacity: 0;
        transform: translateY(4px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .feed-ts {
      font-size: 11px;
      letter-spacing: 0.04em;
      color: rgba(245, 241, 235, 0.4);
    }

    .feed-line {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 13px;
      color: rgba(245, 241, 235, 0.85);
      letter-spacing: -0.005em;
    }

    .feed-rule {
      display: inline-block;
      width: 12px;
      color: rgba(255, 107, 61, 0.55);
      font-size: 14px;
      transform: translateY(-2px);
    }

    .feed-src {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: -0.02em;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    .feed-src svg {
      width: 60%;
      height: 60%;
      display: block;
    }

    .feed-mono {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
    }

    .feed-arrow {
      color: rgba(245, 241, 235, 0.35);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 12px;
    }

    .feed-text {
      font-family: 'Inter', system-ui, sans-serif;
      letter-spacing: -0.005em;
    }

    .feed-text strong {
      color: #FFFFFF;
      font-weight: 600;
    }

    .feed-accent {
      color: var(--hot, #FF6B3D);
      font-weight: 600;
    }

    .feed-tag {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 4px;
      background: rgba(74, 222, 128, 0.12);
      border: 1px solid rgba(74, 222, 128, 0.32);
      color: #4ADE80;
      margin-left: auto;
    }

    .feed-tag-pending {
      background: rgba(255, 107, 61, 0.10);
      border-color: rgba(255, 107, 61, 0.35);
      color: var(--hot, #FF6B3D);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .feed-tag-pending .live-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--hot, #FF6B3D);
      animation: stack-feed-pulse 1.4s ease-in-out infinite;
    }

    /* The "agent acted" rows are slightly indented + dimmer to imply "downstream" */
    .feed-evt-action .feed-text {
      color: rgba(245, 241, 235, 0.88);
    }

    .feed-evt-pending {
      opacity: 0.78;
    }

    /* Threshold-alert pane styling — yellow/warn flavour */
    .feed-evt-warn .feed-text strong {
      color: #F5C12E;
    }

    .feed-src-warn {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 12px;
      background: rgba(245, 197, 46, 0.16);
      border: 1px solid rgba(245, 197, 46, 0.45);
      color: #F5C12E;
    }

    .feed-tag.feed-tag-pending,
    .usecase-pane-alerts .feed-tag {
      background: rgba(74, 222, 128, 0.10);
      border-color: rgba(74, 222, 128, 0.30);
      color: #4ADE80;
    }

    /* Use case footer stats */
    .up-foot {
      display: flex;
      gap: 0;
      border-top: 1px solid rgba(245, 241, 235, 0.06);
      background: rgba(245, 241, 235, 0.02);
    }

    .upf-stat {
      flex: 1 1 auto;
      padding: 12px 22px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.5);
      border-right: 1px dashed rgba(245, 241, 235, 0.06);
    }

    .upf-stat:last-child {
      border-right: 0;
    }

    .upf-stat .v {
      font-family: var(--display, 'Inter', sans-serif);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: #F5F1EB;
      margin-right: 8px;
    }

    /* ---------- ARCHITECTURE STRIP (4 blocks: Stack → Ontology → Feather → Acts) ---------- */
    .stack-arch {
      max-width: 980px;
      margin: 24px auto 0;
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
      gap: 12px;
      align-items: stretch;
    }

    .arch-block {
      padding: 16px 18px;
      border-radius: 14px;
      background: #FFFFFF;
      border: 1px solid rgba(10, 10, 11, 0.08);
      box-shadow: 0 4px 14px rgba(10, 10, 11, 0.04);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .arch-block-label {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(10, 10, 11, 0.55);
    }

    .arch-block-body {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .arch-cat {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.06em;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgba(10, 10, 11, 0.04);
      color: rgba(10, 10, 11, 0.7);
    }

    .arch-block-logos {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-top: 4px;
    }

    .arch-logo-more {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: rgba(10, 10, 11, 0.5);
      padding: 0 4px;
    }

    .arch-conn {
      align-self: center;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 18px;
      color: var(--hot, #FF6B3D);
      opacity: 0.7;
    }

    .arch-onto {
      background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F2 100%);
      border-color: rgba(255, 107, 61, 0.22);
    }

    .arch-onto .arch-block-label {
      color: var(--hot, #FF6B3D);
    }

    .arch-onto-body .entity {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10.5px;
      font-weight: 500;
      padding: 4px 9px;
      border-radius: 6px;
      background: rgba(255, 107, 61, 0.06);
      border: 1px solid rgba(255, 107, 61, 0.22);
      color: rgba(10, 10, 11, 0.78);
    }

    .arch-onto-body .entity::before {
      content: "·";
      margin-right: 4px;
      color: var(--hot, #FF6B3D);
      font-weight: 700;
    }

    .arch-feather {
      background: linear-gradient(180deg, #131217 0%, #0E0E11 100%);
      border-color: rgba(255, 107, 61, 0.32);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 107, 61, 0.04) inset;
    }

    .arch-feather .arch-block-label {
      color: #FFB088;
    }

    .arch-feather-body {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .arch-feather-tag {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px;
      letter-spacing: 0.06em;
      color: rgba(245, 241, 235, 0.7);
    }

    /* Action / output block (4th and final arch step) */
    .arch-act {
      background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F0 100%);
      border-color: rgba(255, 107, 61, 0.22);
    }

    .arch-act .arch-block-label {
      color: var(--hot, #FF6B3D);
    }

    .arch-cat-act {
      background: rgba(255, 107, 61, 0.08);
      color: rgba(10, 10, 11, 0.85);
      border: 1px solid rgba(255, 107, 61, 0.22);
    }

    /* Mobile: 2-col stack collapses, feed tightens, arch strip goes vertical */
    @media (max-width: 880px) {
      .stack-two {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .stack-integrations {
        padding: 18px 18px 16px;
      }

      .stack-integrations .stack-logo {
        width: 32px;
        height: 32px;
        border-radius: 8px;
      }
    }

    @media (max-width: 760px) {
      .up-body {
        padding: 12px 16px 14px;
      }

      .feed-evt {
        grid-template-columns: 64px 1fr;
        gap: 10px;
      }

      .feed-ts {
        font-size: 10px;
      }

      .feed-line {
        font-size: 12px;
        gap: 8px;
      }

      .feed-tag,
      .feed-tag-pending {
        margin-left: 0;
      }

      .up-foot {
        flex-direction: column;
      }

      .upf-stat {
        border-right: 0;
        border-bottom: 1px dashed rgba(245, 241, 235, 0.06);
      }

      .upf-stat:last-child {
        border-bottom: 0;
      }

      .stack-arch {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .arch-conn {
        transform: rotate(90deg);
        justify-self: center;
      }

      .usecase-tab {
        padding: 12px 10px;
        font-size: 10px;
        letter-spacing: 0.10em;
      }

      .ut-glyph {
        display: none;
      }
    }

    /* Stack section — 4-card 2×2 grid */
    .stack-section .stack-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 40px;
    }

    .stack-card {
      background: #FFFFFF;
      border: 1px solid rgba(10, 10, 11, 0.09);
      border-radius: 20px;
      padding: 28px 28px 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 2px 8px rgba(10, 10, 11, 0.04);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .stack-card:hover {
      border-color: rgba(10, 10, 11, 0.16);
      box-shadow: 0 8px 28px rgba(10, 10, 11, 0.08);
    }

    .stack-card-eyebrow {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(10, 10, 11, 0.42);
    }

    .stack-card-eyebrow .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--hot, #FF6B3D);
      flex-shrink: 0;
    }

    .stack-card h3 {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: #0A0A0B;
      line-height: 1.2;
      margin: 0;
    }

    /* Brand logo cluster — replaces text pills with recognizable brand marks. */
    .stack-logos {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 4px;
    }

    .stack-logo {
      width: 44px;
      height: 44px;
      border-radius: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
      box-shadow: 0 2px 6px rgba(10, 10, 11, 0.10), 0 0 0 1px rgba(10, 10, 11, 0.04) inset;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
      cursor: default;
    }

    .stack-logo[aria-label]::after {
      content: attr(aria-label);
      position: absolute;
      bottom: calc(100% + 7px);
      left: 50%;
      transform: translateX(-50%) translateY(3px);
      background: #0A0A0B;
      color: #F5F1EB;
      font-size: 11px;
      font-weight: 500;
      font-family: var(--sans);
      letter-spacing: -0.01em;
      padding: 3px 8px;
      border-radius: 5px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 150ms ease, transform 150ms ease;
      z-index: 10;
    }

    .stack-logo[aria-label]:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .stack-logo:hover {
      transform: translateY(-2px) scale(1.04);
      box-shadow: 0 8px 18px rgba(10, 10, 11, 0.16);
    }

    .stack-logo svg {
      width: 60%;
      height: 60%;
      display: block;
    }

    .stack-logo img {
      width: 72%;
      height: 72%;
      object-fit: contain;
      display: block;
    }

    .stack-logo img.si-white {
      filter: brightness(0) invert(1);
    }

    .stack-logo-mono {
      font-family: var(--display, 'Inter', system-ui, sans-serif);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #FFFFFF;
      line-height: 1;
    }

    /* Hero card — bottom-funnel claim. Hot-orange highlight + slightly lifted. */
    .stack-card.stack-card-hot {
      background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F0 100%);
      border-color: rgba(255, 107, 61, 0.32);
      box-shadow: 0 0 0 1px rgba(255, 107, 61, 0.04), 0 18px 40px rgba(255, 107, 61, 0.10);
    }

    .stack-card.stack-card-hot:hover {
      border-color: rgba(255, 107, 61, 0.55);
      box-shadow: 0 0 0 1px rgba(255, 107, 61, 0.08), 0 22px 48px rgba(255, 107, 61, 0.16);
    }

    .stack-card.stack-card-hot .stack-card-eyebrow {
      color: var(--hot, #FF6B3D);
    }

    .stack-card.stack-card-hot .stack-pill {
      background: rgba(255, 107, 61, 0.06);
      border-color: rgba(255, 107, 61, 0.22);
      color: rgba(10, 10, 11, 0.85);
    }

    @media (max-width: 760px) {
      .stack-section .stack-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 28px;
      }

      .stack-card {
        padding: 22px 22px 20px;
        border-radius: 16px;
      }

      .stack-card h3 {
        font-size: 20px;
      }

      .stack-card p {
        font-size: 14px;
      }
    }

    /* ====================================================================== */
    /* OFFER CARD — risk-reversal subline                                     */
    /* ====================================================================== */
    .offer-card .offer-risk-line {
      margin-top: 48px;
      font-size: 13.5px;
      letter-spacing: -0.005em;
      color: rgba(245, 241, 235, 0.55);
      font-style: italic;
    }

    .offer-card .offer-risk-line strong {
      color: rgba(245, 241, 235, 0.92);
      font-style: normal;
      font-weight: 600;
    }

    /* ====================================================================== */
    /* CHOOSE STEP — twinkling-star backdrop (shared with the dark canvas)    */
    /* ====================================================================== */
    .wstar {
      position: absolute;
      width: 2px;
      height: 2px;
      background: rgba(245, 241, 235, 0.55);
      border-radius: 50%;
      box-shadow: 0 0 4px rgba(245, 241, 235, 0.35);
      opacity: 0;
      animation-name: wstar-twinkle;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      will-change: opacity, transform;
    }

    .wstar-warm {
      background: rgba(255, 176, 136, 0.65);
      box-shadow: 0 0 6px rgba(255, 107, 61, 0.45);
      width: 2.5px;
      height: 2.5px;
    }

    @keyframes wstar-twinkle {

      0%,
      100% {
        opacity: 0.10;
        transform: scale(0.7);
      }

      50% {
        opacity: 0.85;
        transform: scale(1.15);
      }
    }

    /* ====================================================================== */
    /* EXIT-INTENT MODAL                                                      */
    /* ====================================================================== */
    .exit-intent {
      position: fixed;
      inset: 0;
      z-index: 1100;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: ei-fade-in 0.22s ease-out;
    }

    .exit-intent[hidden] {
      display: none;
    }

    .exit-intent-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10, 10, 11, 0.78);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border: 0;
      cursor: pointer;
    }

    .exit-intent-card {
      position: relative;
      /* Dark palette is hard-coded — project --bg is cream (#F5F1EB) for the page surface,
         but this card needs the dark canvas regardless. */
      background: #0A0A0B;
      border: 1px solid rgba(255, 107, 61, 0.32);
      border-radius: 18px;
      padding: 36px 36px 32px;
      width: min(560px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 107, 61, 0.08),
        0 0 90px rgba(255, 107, 61, 0.18);
      color: #F5F1EB;
      animation: ei-card-in 0.34s cubic-bezier(0.22, 0.94, 0.35, 1);
    }

    .exit-intent-x {
      position: absolute;
      top: 12px;
      right: 14px;
      width: 28px;
      height: 28px;
      border-radius: 14px;
      border: 0;
      background: rgba(245, 241, 235, 0.06);
      color: rgba(245, 241, 235, 0.7);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .exit-intent-x:hover {
      background: rgba(245, 241, 235, 0.14);
      color: #F5F1EB;
    }

    .exit-intent-eyebrow {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--hot, #FF6B3D);
      font-weight: 600;
    }

    .exit-intent-title {
      font-family: 'Nohemi', 'Inter', system-ui, sans-serif;
      font-size: 28px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      font-weight: 380;
      margin: 12px 0 14px;
      color: #F5F1EB;
    }

    .exit-intent-sub {
      font-size: 15px;
      line-height: 1.55;
      color: rgba(245, 241, 235, 0.72);
      margin-bottom: 28px;
    }

    .exit-intent-sub strong {
      color: #F5F1EB;
      font-weight: 600;
    }

    .exit-intent-actions {
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: stretch;
    }

    .exit-intent-actions .btn {
      align-self: stretch;
      justify-content: center;
    }

    /* Solid hot-orange CTA against the dark card — overrides the default
       cream-on-dark .btn-primary which loses contrast here. */
    .exit-intent .btn-primary,
    .exit-intent .exit-intent-form .btn {
      background: var(--hot, #FF6B3D);
      color: #0A0A0B;
      border: 1px solid #FF6B3D;
      box-shadow: 0 6px 20px rgba(255, 107, 61, 0.32);
    }

    .exit-intent .btn-primary:hover,
    .exit-intent .exit-intent-form .btn:hover {
      background: #ff7a4f;
      border-color: #ff7a4f;
    }

    .exit-intent-decline {
      background: transparent;
      border: 0;
      color: rgba(245, 241, 235, 0.48);
      font-size: 13px;
      font-style: italic;
      cursor: pointer;
      padding: 6px 0;
      align-self: center;
      text-decoration: underline;
      text-decoration-color: rgba(245, 241, 235, 0.2);
      text-underline-offset: 3px;
      transition: color 0.15s ease, text-decoration-color 0.15s ease;
    }

    .exit-intent-decline:hover {
      color: rgba(245, 241, 235, 0.9);
      text-decoration-color: rgba(245, 241, 235, 0.5);
    }

    /* Variant B — question grid */
    .exit-intent-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 6px;
    }

    .exit-intent-options button {
      display: grid;
      grid-template-columns: 28px 1fr;
      align-items: center;
      gap: 14px;
      text-align: left;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.12);
      border-radius: 12px;
      padding: 14px 18px;
      color: #F5F1EB;
      font-size: 15px;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }

    .exit-intent-options button:hover {
      background: rgba(255, 107, 61, 0.08);
      border-color: rgba(255, 107, 61, 0.45);
      transform: translateX(2px);
    }

    .exit-intent-options .opt-letter {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: var(--hot, #FF6B3D);
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(255, 107, 61, 0.10);
      border: 1px solid rgba(255, 107, 61, 0.32);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .exit-intent-options .opt-text {
      font-size: 15px;
      letter-spacing: -0.005em;
    }

    .exit-intent-reveal {
      margin-top: 6px;
    }

    .exit-intent-reveal-text {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 16px;
      color: rgba(245, 241, 235, 0.85);
    }

    .exit-intent-reveal-text strong {
      color: #F5F1EB;
      font-weight: 600;
    }

    .exit-intent-form {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
    }

    .exit-intent-form input {
      flex: 1;
      background: rgba(245, 241, 235, 0.04);
      border: 1px solid rgba(245, 241, 235, 0.16);
      border-radius: 10px;
      padding: 12px 14px;
      color: #F5F1EB;
      font-family: inherit;
      font-size: 14px;
      transition: border-color 0.15s ease;
    }

    .exit-intent-form input:focus {
      outline: none;
      border-color: var(--hot, #FF6B3D);
    }

    .exit-intent-input-error {
      border-color: #ff5e5e !important;
    }

    @keyframes ei-fade-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes ei-card-in {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    body.exit-intent-open {
      overflow: hidden;
    }

    /* Mobile tightening */
    @media (max-width: 600px) {
      .exit-intent-card {
        padding: 28px 22px 24px;
        border-radius: 16px;
      }

      .exit-intent-title {
        font-size: 24px;
      }

      .exit-intent-sub {
        font-size: 14.5px;
        margin-bottom: 22px;
      }

      .exit-intent-form {
        flex-direction: column;
      }

      .exit-intent-form .btn {
        align-self: stretch;
      }
    }

    /* === HAWKY MAIN FOOTER (hfw-*) === */
    .hfw-root {
      background: #fff;
      font-family: "Inter", sans-serif;
    }

    .hfw-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }

    /* CTA band */
    .hfw-cta-band {
      background: #FFF8F2;
    }

    .hfw-cta-content {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      padding: 40px 0;
    }

    .hfw-cta-text {
      flex: 1;
      max-width: 55%;
    }

    .hfw-cta-heading {
      font-size: 32px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: #1a1a1a;
      margin: 0 0 16px;
    }

    .hfw-cta-desc {
      font-size: 18px;
      line-height: 1.5;
      color: #4d4d4d;
      margin: 0;
    }

    .hfw-cta-btn {
      display: inline-block;
      padding: 11px 22px;
      background: #000;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      border-radius: 6px;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 0.15s;
    }

    .hfw-cta-btn:hover {
      background: #222;
      color: #fff;
    }

    /* Logo band */
    .hfw-logo-band {
      background: #fff;
      border-bottom: 1px dashed #e6e6e6;
    }

    .hfw-logo-row {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 40px 0;
    }

    .hfw-logo-link {
      display: block;
      text-decoration: none;
      flex-shrink: 0;
    }

    .hfw-logo-svg {
      display: block;
      height: 24px;
      width: auto;
    }

    .hfw-tagline {
      font-size: 16px;
      color: #4d4d4d;
      margin: 0;
    }

    /* Nav band */
    .hfw-nav-band {
      background: #fff;
    }

    .hfw-nav-row {
      display: flex;
      gap: 80px;
      padding: 40px 0 0;
    }

    .hfw-nav-row--2 {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .hfw-col-head {
      font-size: 16px;
      font-weight: 400;
      color: #4d4d4d;
      margin: 0 0 10px;
    }

    .hfw-col-links {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .hfw-col-links a {
      font-size: 14px;
      color: #4d4d4d;
      text-decoration: none;
      white-space: nowrap;
      line-height: 1.4;
    }

    .hfw-col-links a:hover {
      color: #2a2a2a;
    }

    /* Bottom bar */
    .hfw-bottom-bar {
      background: #fff;
      border-top: 1px dashed #e6e6e6;
    }

    .hfw-bottom-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      padding: 40px 0;
    }

    .hfw-copyright {
      font-size: 14px;
      color: #1a1a1a;
    }

    .hfw-legal {
      display: flex;
      gap: 40px;
      align-items: center;
    }

    .hfw-legal a {
      font-size: 14px;
      color: #808080;
      text-decoration: none;
    }

    .hfw-legal a:hover {
      color: #4d4d4d;
    }

    .hfw-social {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .hfw-social a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 33px;
      height: 33px;
      color: #1a1a1a;
      text-decoration: none;
    }

    .hfw-social a:hover {
      color: #4d4d4d;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .hfw-cta-content {
        flex-direction: column;
        align-items: flex-start;
      }

      .hfw-cta-text {
        max-width: 100%;
      }

      .hfw-nav-row {
        gap: 40px;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 600px) {
      .hfw-inner {
        padding: 0 24px;
      }

      .hfw-cta-heading {
        font-size: 24px;
      }

      .hfw-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
      }
    }