/* ─────────────────────────────────────────────────────────
   BASE / GLOBAL
   ───────────────────────────────────────────────────────── */
:root {
  --bg-base: #0A0C10;
  --bg-surface: #13161D;
  --bg-elevated: #1C2030;
  /* --accent-cyan retained as token name to avoid mass rename;
     value is now the mint-green primary. */
  --accent-cyan: #00E676;
  --accent-green: #00E676;
  --accent-blue: #7C86FF;
  /* periwinkle — secondary / chrome / informational */
  --accent-pass: #22C55E;
  /* signal-pass differentiated from primary */
  --accent-amber: #EAB308;
  --accent-red: #EF4444;
  --text-primary: #F0F4FF;
  --text-secondary: #8B92A8;
  --text-muted: #444C63;
  --border: #1F2535;
  --border-bright: #2D3550;
  /* radius scale (new) */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;
  /* glass surface (new) */
  --glass-bg: rgba(19, 22, 29, 0.55);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-bright: rgba(124, 134, 255, 0.18);
}

/* Glass utility — used by hero card, problem table, and future cards */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
}

/* Mac-style window header — traffic lights + optional filename tab */
.win-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.015);
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
}

.win-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  background: rgba(124, 134, 255, 0.10);
  border: 1px solid rgba(124, 134, 255, 0.35);
  padding: 4px 10px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.win-next:hover {
  background: rgba(124, 134, 255, 0.18);
  border-color: rgba(124, 134, 255, 0.55);
  color: var(--accent-blue);
  transform: translateX(1px);
}
.win-next svg {
  width: 10px;
  height: 10px;
}

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

.win-dots i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
}

.win-dots i:nth-child(1) {
  background: #FF5F57;
}

.win-dots i:nth-child(2) {
  background: #FEBC2E;
}

.win-dots i:nth-child(3) {
  background: #28C840;
}

.win-title {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-left: 6px;
  flex: 1;
  text-align: center;
}

html,
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1, 'zero' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(0, 230, 118, 0.32);
  color: var(--bg-base);
}

input,
textarea {
  caret-color: var(--accent-blue);
}

:focus-visible {
  outline: 1px solid var(--accent-blue);
  outline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) var(--bg-base);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--border-bright);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue);
}

/* ─────────────────────────────────────────────────────────
   AMBIENCE LAYER
   ───────────────────────────────────────────────────────── */
.ambience {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ambience::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.96  0 0 0 0 1  0.6 0 0 0 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.04;
}

.grid-surface {
  position: relative;
}

.grid-surface>* {
  position: relative;
  z-index: 1;
}

.scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

@keyframes scansweep {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  10% {
    opacity: 0.8;
  }

  90% {
    opacity: 0.8;
  }

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

.scanline.play {
  animation: scansweep 1.4s ease-out forwards;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.bar-track {
  position: relative;
  height: 4px;
  background: var(--border);
  overflow: hidden;
}

.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--accent-cyan);
  transition: width 600ms ease-out;
}

.section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .scanline {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE — reduce scroll depth
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Collapse section padding: 120–140px → 60px */
  #score-card-section,
  #real-work,
  #problem,
  #how-it-works,
  #pricing,
  #cta-footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Hide the three weakest conversion sections on mobile.
     Desktop visitors still see them — no content is deleted. */
  #hiring-blind {
    display: none;
  }
}

main,
nav {
  position: relative;
  z-index: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


      #nav-shell {
        transition: background-color 260ms ease, border-color 260ms ease,
          backdrop-filter 260ms ease;
        background-color: transparent;
        border-bottom: 1px solid transparent;
      }

      #nav-shell.scrolled {
        background-color: rgba(13, 15, 20, 0.82);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        border-bottom-color: rgba(31, 37, 53, 0.6);
      }

      .nav-wordmark {
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-weight: 700;
        font-size: 24px;
        letter-spacing: -0.03em;
        color: #F0F4FF;
        display: flex;
        align-items: baseline;
      }

      .nav-wordmark .x {
        color: #00E676;
        font-size: 1em;
        position: relative;
        top: -0.35em;
        letter-spacing: 0;
      }

      .nav-link {
        font-family: 'IBM Plex Mono', ui-monospace, monospace;
        font-weight: 400;
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #5A6178;
        transition: color 160ms ease;
      }

      .nav-link:hover {
        color: #F0F4FF;
      }

      .nav-cta {
        font-family: 'IBM Plex Mono', ui-monospace, monospace;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #0D0F14;
        background: #00E676;
        padding: 9px 18px;
        border: 1px solid #00E676;
        transition: background 160ms ease, border-color 160ms ease;
      }

      .nav-cta:hover {
        background: #4AFF91;
        border-color: #4AFF91;
      }


        #hero-inner .h-rise {
          opacity: 0;
          transform: translateY(20px);
          animation: hRise 600ms ease-out forwards;
        }

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

        #hero-inner .h-slide-right {
          opacity: 0;
          transform: translateX(24px);
          animation: hSlide 500ms ease-out forwards;
          animation-delay: 400ms;
        }

        @keyframes hSlide {
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }

        #hero-inner .d-0 {
          animation-delay: 0ms;
        }

        #hero-inner .d-150 {
          animation-delay: 150ms;
        }

        #hero-inner .d-300 {
          animation-delay: 300ms;
        }

        #hero-inner .d-450 {
          animation-delay: 450ms;
        }

        #hero-inner .d-600 {
          animation-delay: 600ms;
        }

        #hero-inner .d-750 {
          animation-delay: 750ms;
        }

        #hero-inner .hero-h1 {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 700;
          font-size: clamp(44px, 7vw, 84px);
          line-height: 1.02;
          letter-spacing: -0.035em;
          color: #F0F4FF;
        }

        #hero-inner .hero-h1 .accent {
          background: linear-gradient(180deg, #B6FFD7 0%, #00E676 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }

        #hero-inner .hero-sub {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 16px;
          line-height: 1.55;
          color: #8B92A8;
          max-width: 480px;
        }

        #hero-inner .hero-eyebrow {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: #444C63;
        }

        #hero-inner .hero-stat-line {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: #8B92A8;
        }

        #hero-inner .hero-stat-line .dot {
          color: #2D3550;
          margin: 0 12px;
        }

        #hero-inner .btn-primary {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: 14px;
          letter-spacing: 0.01em;
          background: #00E676;
          color: #0A0C10;
          padding: 13px 22px;
          border-radius: var(--r-full);
          box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.4), 0 8px 24px -8px rgba(0, 230, 118, 0.45);
          transition: transform 160ms ease, box-shadow 200ms ease, background-color 160ms ease;
        }

        #hero-inner .btn-primary:hover {
          background: #1AFF8C;
          transform: translateY(-1px);
          box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.55), 0 12px 32px -8px rgba(0, 230, 118, 0.6);
        }

        #hero-inner .btn-ghost {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 500;
          font-size: 14px;
          letter-spacing: 0.01em;
          background: rgba(255, 255, 255, 0.03);
          color: #F0F4FF;
          padding: 12px 21px;
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: var(--r-full);
          backdrop-filter: blur(10px);
          transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
        }

        #hero-inner .btn-ghost:hover {
          border-color: rgba(124, 134, 255, 0.45);
          color: #7C86FF;
          background: rgba(124, 134, 255, 0.06);
        }

        #hero-score-card {
          background: var(--glass-bg);
          backdrop-filter: blur(28px) saturate(170%);
          -webkit-backdrop-filter: blur(28px) saturate(170%);
          border: 1px solid var(--glass-border);
          border-radius: var(--r-lg);
          position: relative;
          overflow: hidden;
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 30px 80px -30px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(0, 230, 118, 0.04);
          height: 100%;
        }

        #hero-score-card .sc-body {
          padding: 10px 22px 14px;
        }

        #hero-score-card .sc-head {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          gap: 12px;
          padding-bottom: 14px;
          border-bottom: 1px solid var(--glass-border);
        }

        #hero-score-card .sc-handle {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 13px;
          color: #F0F4FF;
        }

        #hero-score-card .sc-challenge {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: #8B92A8;
        }

        /* ── Radar fills the top of the card. Score + pillar chips
           are absolute overlays in the top-right / bottom-right corners. ── */
        #hero-score-card .sc-top {
          position: relative;
          display: flex;
          justify-content: flex-start;
          padding: 16px 4px 14px 0;
        }

        #hero-score-card .sc-radar-wrap {
          width: 100%;
          max-width: 380px;
          aspect-ratio: 1 / 1;
          position: relative;
          margin-left: 0px;
          /* nudge left so bottom-right bars have room */
        }

        /* Score badge — pinned to the card's right edge (parent is .sc-top) */
        #hero-score-card .sc-score-row {
          position: absolute;
          top: 6px;
          right: 6px;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 2px;
          background: rgba(13, 15, 20, 0.72);
          backdrop-filter: blur(10px) saturate(160%);
          -webkit-backdrop-filter: blur(10px) saturate(160%);
          border: 1px solid rgba(0, 230, 118, 0.22);
          border-radius: 10px;
          padding: 8px 12px;
          z-index: 2;
        }

        /* Pillar breakdown — pinned to the card's right edge (parent is .sc-top) */
        #hero-score-card .sc-pillar-overlay {
          position: absolute;
          right: 8px;
          bottom: 8px;
          width: 180px;
          display: flex;
          flex-direction: column;
          gap: 6px;
          background: rgba(13, 15, 20, 0.82);
          backdrop-filter: blur(14px) saturate(170%);
          -webkit-backdrop-filter: blur(14px) saturate(170%);
          border: 1px solid var(--glass-border);
          border-radius: 10px;
          padding: 10px 12px;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10.5px;
          letter-spacing: 0.02em;
          z-index: 2;
        }

        #hero-score-card .sc-pillar-overlay .op {
          display: flex;
          flex-direction: column;
          gap: 3px;
          color: var(--text-secondary);
          transition: color 160ms ease;
        }

        #hero-score-card .sc-pillar-overlay .op-row {
          display: flex;
          justify-content: space-between;
          gap: 8px;
          line-height: 1;
        }

        #hero-score-card .sc-pillar-overlay .op .v {
          color: var(--text-primary);
          font-variant-numeric: tabular-nums;
        }

        #hero-score-card .sc-pillar-overlay .op .track {
          height: 2px;
          width: 100%;
          background: rgba(255, 255, 255, 0.06);
          overflow: hidden;
        }

        #hero-score-card .sc-pillar-overlay .op .fill {
          height: 100%;
          background: #00E676;
          box-shadow: 0 0 6px rgba(0, 230, 118, 0.5);
        }

        #hero-score-card .sc-pillar-overlay .op:hover {
          color: var(--accent-cyan);
        }

        #hero-score-card .sc-pillar-overlay .op:hover .v {
          color: var(--accent-cyan);
        }

        #hero-score-card .sc-radar-wrap canvas {
          width: 100% !important;
          height: 100% !important;
        }

        /* Subtle glow behind the radar */
        #hero-score-card .sc-radar-wrap::before {
          content: "";
          position: absolute;
          inset: 10%;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(0, 230, 118, 0.08) 0%, transparent 70%);
          pointer-events: none;
          z-index: 0;
        }

        #hero-score-card .sc-radar-wrap canvas {
          position: relative;
          z-index: 1;
        }

        #hero-score-card .sc-score-label {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 9px;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: var(--text-muted);
          line-height: 1;
        }

        #hero-score-card .sc-score-big {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: 32px;
          line-height: 1;
          color: #00E676;
          font-variant-numeric: tabular-nums;
          letter-spacing: -0.035em;
          background: linear-gradient(180deg, #B6FFD7 0%, #00E676 90%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          transition: color 180ms ease;
        }

        #hero-score-card .sc-score-big .denom {
          -webkit-text-fill-color: initial;
          color: var(--text-muted);
          font-size: 18px;
          font-weight: 500;
          transition: color 200ms ease;
        }

        #hero-score-card.is-pillar .sc-score-big .denom {
          color: #2D3550;
        }

        /* ── Bottom section: signals only (pillars moved to radar overlay) ── */
        #hero-score-card .sc-bottom {
          border-top: 1px solid #1F2535;
          padding-top: 10px;
        }

        /* Hide the old inline pillar list — overlay handles it now */
        #hero-score-card .sc-pillars {
          display: none;
        }

        #hero-score-card .sc-caption {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10.5px;
          letter-spacing: 0.05em;
          color: #8B92A8;
          min-height: 18px;
          line-height: 1.4;
          transition: color 180ms ease;
          margin-bottom: 6px;
        }

        /* Kept for structure only — hidden; overlay chips on the radar handle this now */
        #hero-score-card .sc-pillars {
          display: none;
        }

        #hero-score-card .sc-pillar {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 2px 10px;
          align-items: center;
          padding: 3px 8px;
          margin: 0 -8px;
          cursor: pointer;
          transition: background-color 160ms ease;
        }

        #hero-score-card .sc-pillar-desc {
          grid-column: 1 / -1;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          line-height: 1.55;
          color: #8B92A8;
          max-height: 0;
          overflow: hidden;
          transition: max-height 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 200ms ease, padding 280ms ease;
          opacity: 0;
          padding: 0;
        }

        #hero-score-card .sc-pillar.is-expanded .sc-pillar-desc {
          max-height: 60px;
          opacity: 1;
          padding: 4px 0 2px;
        }

        #hero-score-card .sc-pillar:hover,
        #hero-score-card .sc-pillar:focus-visible {
          background: #1C2030;
          border-radius: var(--r-sm);
        }

        #hero-score-card .sc-pillar:focus {
          outline: none;
        }

        #hero-score-card .sc-pillar:focus-visible {
          outline: 1px solid #00E5FF;
          outline-offset: 2px;
        }

        #hero-score-card .sc-pillar-name {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 12px;
          color: #F0F4FF;
        }

        #hero-score-card .sc-pillar-val {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 12px;
          color: #8B92A8;
          font-variant-numeric: tabular-nums;
        }

        #hero-score-card .sc-pillar .bar-track {
          grid-column: 1 / -1;
          height: 3px;
        }

        #hero-score-card .bar-track {
          background: rgba(255, 255, 255, 0.05);
          border-radius: 999px;
          overflow: hidden;
        }

        #hero-score-card .bar-fill {
          background: #00E676;
          border-radius: 999px;
          height: 100%;
          width: 0;
        }

        #hero-score-card .sc-pillar .bar-fill {
          transition: width 800ms ease-out, background-color 160ms ease;
        }

        #hero-score-card .sc-pillar:hover .bar-fill {
          background: #7FF2FF;
        }

        #hero-score-card .sc-signals {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 14px;
          padding-top: 14px;
          border-top: 1px solid #1F2535;
        }

        #hero-score-card .sc-badge {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          padding: 5px 10px;
          border: 1px solid #1F2535;
          border-radius: var(--r-full);
          color: #8B92A8;
          display: inline-flex;
          align-items: center;
          gap: 5px;
        }

        #hero-score-card .sc-badge .mark {
          font-size: 11px;
        }

        #hero-score-card .sc-badge.good {
          color: #F0F4FF;
          border-left: 2px solid #22C55E;
        }

        #hero-score-card .sc-badge.good .mark {
          color: #22C55E;
        }

        #hero-score-card .sc-badge.watch {
          color: #F0F4FF;
          border-left: 2px solid #EAB308;
        }

        #hero-score-card .sc-badge.watch .mark {
          color: #EAB308;
        }

        @media (hover: none) {
          #hero-score-card .sc-pillar {
            cursor: pointer;
          }

          #hero-score-card .sc-pillar:hover {
            background: transparent;
          }

          #hero-score-card .sc-pillar:hover .bar-fill {
            background: #00E5FF;
          }
        }

        @media (prefers-reduced-motion: reduce) {

          #hero-inner .h-rise,
          #hero-inner .h-slide-right {
            opacity: 1 !important;
            transform: none !important;
            animation: none !important;
          }

          #hero-score-card .bar-fill {
            transition: none !important;
          }
        }

        #hero-inner {
          position: relative;
          z-index: 1;
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 120px 24px 80px;
        }

        #hero-glow {
          position: absolute;
          pointer-events: none;
          z-index: 0;
          top: -10%;
          left: 65%;
          transform: translateX(-50%);
          width: 70vw;
          height: 70vw;
          max-width: 1100px;
          max-height: 1100px;
          background: radial-gradient(closest-side, rgba(0, 230, 118, 0.18), rgba(0, 230, 118, 0) 70%);
          filter: blur(40px);
          opacity: 0.9;
        }

        #hero-glow-blue {
          position: absolute;
          pointer-events: none;
          z-index: 0;
          top: 10%;
          left: 30%;
          transform: translateX(-50%);
          width: 55vw;
          height: 55vw;
          max-width: 900px;
          max-height: 900px;
          background: radial-gradient(closest-side, rgba(0, 160, 255, 0.14), rgba(0, 160, 255, 0) 70%);
          filter: blur(50px);
          opacity: 0.85;
        }

        #hero-glow-periwinkle {
          position: absolute;
          pointer-events: none;
          z-index: 0;
          top: 5%;
          left: 45%;
          transform: translateX(-50%);
          width: 45vw;
          height: 45vw;
          max-width: 700px;
          max-height: 700px;
          background: radial-gradient(closest-side, rgba(124, 134, 255, 0.22), rgba(124, 134, 255, 0) 70%);
          filter: blur(60px);
          opacity: 0.65;
        }

        @media (max-width: 767px) {
          #hero-glow {
            top: 20%;
            left: 50%;
            width: 120vw;
            height: 120vw;
          }
          #hero-glow-blue {
            top: 30%;
            left: 50%;
            width: 100vw;
            height: 100vw;
          }
          #hero-glow-periwinkle {
            top: 25%;
            left: 50%;
            width: 90vw;
            height: 90vw;
          }
        }

        #hero-inner .hero-h1 {
          max-width: 800px;
        }

        #hero-inner .hero-sub {
          max-width: 600px;
        }

        /* Scroll indicator */
        #hero-inner .scroll-hint {
          position: absolute;
          bottom: 32px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          color: var(--text-muted);
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10px;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          animation: scrollBounce 2s ease-in-out infinite;
        }

        @keyframes scrollBounce {

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

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

        @media (max-width: 767px) {
          #hero-inner {
            padding: 100px 20px 60px;
          }
        }


        #score-card-section {
          background: var(--bg-base);
        }

        #score-card-section .sc-section-label {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        #score-card-section .sc-section-h2 {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: clamp(24px, 3.2vw, 36px);
          line-height: 1.15;
          letter-spacing: -0.02em;
          color: var(--text-primary);
          max-width: 560px;
        }

        #score-card-section .sc-section-h2 .accent {
          background: linear-gradient(180deg, #B6FFD7 0%, #00E676 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }

        /* Stacked deck: cards layered with a slight offset. Click to cycle
           which card is on top. Card that leaves tucks behind the stack. */
        #score-card-section .cards-grid {
          position: relative;
          max-width: 620px;
          margin: 0 auto;
          min-height: 540px;
        }

        #score-card-section .cards-grid>.slot {
          position: absolute;
          inset: 0;
          cursor: pointer;
          transition:
            transform 600ms cubic-bezier(0.65, 0, 0.35, 1),
            opacity 400ms ease;
          transform-origin: 50% 100%;
        }

        /* Top card: fully visible, centered. */
        #score-card-section .cards-grid>.slot.is-top {
          transform: translate(0, 0) scale(1);
          z-index: 4;
          opacity: 1;
        }

        /* One card back: peeks with small offset. */
        #score-card-section .cards-grid>.slot.is-back {
          transform: translate(18px, 14px) scale(0.97);
          z-index: 3;
          opacity: 0.88;
          filter: brightness(0.92);
        }

        /* Two cards back: peeks further + dimmer. */
        #score-card-section .cards-grid>.slot.is-back-2 {
          transform: translate(34px, 28px) scale(0.94);
          z-index: 2;
          opacity: 0.7;
          filter: brightness(0.82);
        }

        /* Hide contents of background cards — card silhouette stays, internals hidden */
        #score-card-section .cards-grid>.slot.is-back>*>*,
        #score-card-section .cards-grid>.slot.is-back-2>*>* {
          visibility: hidden;
        }

        /* Click affordance on the visible card */
        #score-card-section .cards-grid>.slot.is-top:hover {
          transform: translate(0, -3px) scale(1);
        }

        @media (prefers-reduced-motion: reduce) {
          #score-card-section .cards-grid>.slot {
            transition: none !important;
            animation: none !important;
          }
        }

        @media (max-width: 640px) {
          /* Radar fills full width at 1:1 — on narrow screens it's ~268px tall,
             pushing the signals badges below the 540px container floor.
             Cap the radar so the card fits without clipping. */
          #score-card-section .cards-grid { min-height: 580px; }
          #hero-score-card .sc-radar-wrap { max-width: 220px; }
        }

        /* ── Eval card (Understanding + AI Usage Patterns) ── */
        #score-card-section .eval-card {
          background: var(--glass-bg);
          backdrop-filter: blur(24px) saturate(160%);
          -webkit-backdrop-filter: blur(24px) saturate(160%);
          border: 1px solid var(--glass-border);
          border-radius: var(--r-lg);
          overflow: hidden;
        }

        #score-card-section .eval-body {
          padding: 20px 22px 22px;
          overflow-y: auto;
          max-height: 600px;
        }

        #score-card-section .eval-section-label {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--text-muted);
          margin-bottom: 16px;
        }

        #score-card-section .eval-dimension {
          margin-bottom: 20px;
          padding-bottom: 20px;
          border-bottom: 1px solid var(--border);
        }

        #score-card-section .eval-dimension:last-child {
          border-bottom: none;
          margin-bottom: 0;
          padding-bottom: 0;
        }

        #score-card-section .eval-dim-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          margin-bottom: 8px;
        }

        #score-card-section .eval-dim-name {
          font-size: 14px;
          font-weight: 700;
          color: var(--text-primary);
        }

        #score-card-section .eval-strength {
          display: flex;
          align-items: center;
          gap: 4px;
          flex-shrink: 0;
        }

        #score-card-section .eval-bar {
          display: inline-block;
          width: 18px;
          height: 3px;
          border-radius: 2px;
          background: var(--border-bright);
        }

        #score-card-section .eval-bar.filled {
          background: var(--accent-cyan);
        }

        #score-card-section .eval-bar.filled.mod {
          background: var(--accent-blue);
        }

        #score-card-section .eval-bar.filled.partial {
          background: #EAB308;
        }

        #score-card-section .eval-bar.filled.limited {
          background: #C2410C;
        }

        #score-card-section .eval-strength-label {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 9px;
          letter-spacing: 0.12em;
          color: var(--accent-cyan);
          margin-left: 6px;
        }

        #score-card-section .eval-strength-label.mod {
          color: var(--accent-blue);
        }

        #score-card-section .eval-strength-label.partial {
          color: #EAB308;
        }

        #score-card-section .eval-strength-label.limited {
          color: #C2410C;
        }

        #score-card-section .eval-dim-desc {
          font-size: 12px;
          line-height: 1.65;
          color: var(--text-secondary);
          margin-bottom: 10px;
        }

        #score-card-section .eval-frq {
          background: var(--bg-elevated);
          border-left: 2px solid var(--accent-blue);
          border-radius: 0 var(--r-sm) var(--r-sm) 0;
          padding: 10px 14px;
        }

        #score-card-section .eval-frq-label {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 9px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--accent-blue);
          margin-bottom: 6px;
        }

        #score-card-section .eval-frq-text {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          line-height: 1.6;
          color: var(--text-secondary);
        }

        /* Spectrum dimensions */
        #score-card-section .eval-spectrum-dim {
          margin-bottom: 16px;
          padding-bottom: 16px;
          border-bottom: 1px solid var(--border);
        }

        #score-card-section .eval-spectrum-dim:last-of-type {
          border-bottom: none;
        }

        #score-card-section .eval-spectrum {
          display: flex;
          align-items: center;
          gap: 10px;
          margin: 6px 0 8px;
        }

        #score-card-section .spec-pole {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 9px;
          letter-spacing: 0.12em;
          color: var(--text-muted);
          white-space: nowrap;
          flex-shrink: 0;
        }

        #score-card-section .spec-track {
          flex: 1;
          position: relative;
          height: 2px;
          background: var(--border-bright);
          border-radius: 2px;
        }

        #score-card-section .spec-dot {
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: var(--accent-blue);
          box-shadow: 0 0 8px rgba(124, 134, 255, 0.6);
        }

        /* Best Fit box */
        #score-card-section .eval-best-fit {
          background: var(--bg-elevated);
          border: 1px solid var(--border-bright);
          border-radius: var(--r-md);
          padding: 12px 14px;
          margin-top: 16px;
        }

        /* ── Summary card ── */
        #score-card-section .summary-card,
        #score-card-section .pillars-card {
          background: var(--glass-bg);
          backdrop-filter: blur(24px) saturate(160%);
          -webkit-backdrop-filter: blur(24px) saturate(160%);
          border: 1px solid var(--glass-border);
          border-radius: var(--r-lg);
          overflow: hidden;
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 30px 80px -30px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(0, 230, 118, 0.04);
          height: 100%;
        }

        /* Pillars card — 5 icon + name + description rows */
        #score-card-section .pillars-card .pillars-body {
          padding: 20px 24px 24px;
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        #score-card-section .pillars-card .p-eyebrow {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--text-muted);
          padding-bottom: 14px;
          margin-bottom: 6px;
          border-bottom: 1px solid var(--border);
        }

        #score-card-section .pillars-card .p-row {
          display: flex;
          gap: 14px;
          align-items: flex-start;
          padding: 12px 0;
          border-bottom: 1px solid var(--border);
        }

        #score-card-section .pillars-card .p-row:last-child {
          border-bottom: none;
        }

        #score-card-section .pillars-card .p-ico {
          flex-shrink: 0;
          width: 36px;
          height: 36px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: var(--r-md);
          background: rgba(124, 134, 255, 0.08);
          border: 1px solid rgba(124, 134, 255, 0.22);
          color: var(--accent-blue);
        }

        #score-card-section .pillars-card .p-ico svg {
          width: 18px;
          height: 18px;
        }

        #score-card-section .pillars-card .p-txt {
          flex: 1;
          min-width: 0;
        }

        #score-card-section .pillars-card .p-name {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: 14px;
          color: var(--text-primary);
          letter-spacing: -0.01em;
          margin-bottom: 2px;
        }

        #score-card-section .pillars-card .p-desc {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11.5px;
          line-height: 1.45;
          color: var(--text-secondary);
        }

        #score-card-section .summary-card .sum-body {
          padding: 20px 24px 24px;
        }

        #score-card-section .summary-card .sum-section {
          padding: 14px 0;
          border-bottom: 1px solid var(--border);
        }

        #score-card-section .summary-card .sum-section:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }

        #score-card-section .summary-card .sum-label {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10px;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: var(--text-muted);
          margin-bottom: 8px;
        }

        #score-card-section .summary-card .sum-text {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 12.5px;
          line-height: 1.6;
          color: var(--text-secondary);
        }

        #score-card-section .summary-card .sum-signal {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          padding: 10px 12px;
          border-left: 2px solid var(--border-bright);
          margin-bottom: 8px;
        }

        #score-card-section .summary-card .sum-signal:last-child {
          margin-bottom: 0;
        }

        #score-card-section .summary-card .sum-signal.strong {
          border-left-color: var(--accent-green);
        }

        #score-card-section .summary-card .sum-signal.watch {
          border-left-color: var(--accent-amber);
        }

        #score-card-section .summary-card .sum-signal .sig-icon {
          font-size: 11px;
          flex-shrink: 0;
          margin-top: 2px;
        }

        #score-card-section .summary-card .sum-signal .sig-text {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 12px;
          line-height: 1.55;
          color: var(--text-primary);
        }

        #score-card-section .summary-card .rec-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
        }

        #score-card-section .summary-card .rec-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 8px 14px;
          border: 1px solid var(--accent-cyan);
          border-radius: var(--r-full);
          color: var(--accent-cyan);
          font-family: 'Syne', system-ui, sans-serif;
          font-weight: 700;
          font-size: 11px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
        }

        #score-card-section .summary-card .rec-badge .dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: var(--accent-cyan);
        }

        #score-card-section .summary-card .meta-row {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border-top: 1px solid var(--border);
          margin: 0 -24px -24px;
        }

        #score-card-section .summary-card .meta-cell {
          padding: 14px 16px;
          border-right: 1px solid var(--border);
          text-align: center;
        }

        #score-card-section .summary-card .meta-cell:last-child {
          border-right: none;
        }

        #score-card-section .summary-card .meta-num {
          font-family: 'Syne', system-ui, sans-serif;
          font-weight: 800;
          font-size: 22px;
          color: var(--accent-cyan);
          font-variant-numeric: tabular-nums;
          line-height: 1;
        }

        #score-card-section .summary-card .meta-label {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 9px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--text-muted);
          margin-top: 6px;
        }


        #real-work .rw-eyebrow {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        #real-work .rw-h2 {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: clamp(32px, 4.6vw, 52px);
          line-height: 1.05;
          letter-spacing: -0.03em;
          color: var(--text-primary);
          max-width: 720px;
        }

        #real-work .rw-h2 .accent {
          background: linear-gradient(180deg, #B6FFD7 0%, #00E676 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }

        #real-work .rw-sub {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-size: 16px;
          line-height: 1.55;
          color: var(--text-secondary);
          max-width: 560px;
        }

        /* ── Mock VSCode IDE ─────────────────────────────────── */
        #real-work .ide {
          background: rgba(13, 15, 20, 0.85);
          backdrop-filter: blur(28px) saturate(160%);
          -webkit-backdrop-filter: blur(28px) saturate(160%);
          border: 1px solid var(--glass-border);
          border-radius: var(--r-lg);
          overflow: hidden;
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 40px 100px -40px rgba(0, 0, 0, 0.7),
            0 0 0 1px rgba(0, 230, 118, 0.04);
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          color: var(--text-primary);
        }

        #real-work .ide .tabbar {
          display: flex;
          align-items: center;
          gap: 0;
          background: rgba(0, 0, 0, 0.25);
          border-bottom: 1px solid var(--glass-border);
          padding-left: 16px;
        }

        #real-work .ide .tabbar .win-dots {
          padding: 12px 14px 12px 0;
        }

        #real-work .ide .tab {
          font-size: 12px;
          color: var(--text-secondary);
          padding: 10px 16px;
          border-right: 1px solid var(--glass-border);
          display: inline-flex;
          align-items: center;
          gap: 8px;
        }

        #real-work .ide .tab.active {
          color: var(--text-primary);
          background: rgba(255, 255, 255, 0.02);
          box-shadow: inset 0 -1px 0 var(--accent-blue);
        }

        #real-work .ide .tab .dot-mod {
          width: 6px;
          height: 6px;
          border-radius: 999px;
          background: var(--accent-blue);
        }

        /* Fixed-height IDE: drag splits the editor/terminal share inside it,
           so the component never grows. --term-h is the controlled value. */
        #real-work .ide-grid {
          --term-h: 240px;
          display: grid;
          grid-template-columns: 44px 220px 1fr;
          grid-template-rows: minmax(0, 1fr) var(--term-h);
          grid-template-areas:
            "act exp edt"
            "act exp term";
          height: 580px;
          /* total IDE body height — pinned */
        }

        #real-work .ide-activity {
          grid-area: act;
        }

        #real-work .ide-explorer {
          grid-area: exp;
        }

        #real-work .ide-editor {
          grid-area: edt;
          min-height: 0;
        }

        #real-work .ide-term {
          grid-area: term;
          min-height: 0;
        }

        /* Mobile two-card wrapper */
        #real-work .mobile-ide-cards {
          display: none;
          flex-direction: column;
          gap: 12px;
        }

        /* Card 1: README preview */
        #real-work .mobile-readme {
          border: 1px solid var(--glass-border);
          border-radius: var(--r-lg);
          overflow: hidden;
          background: var(--bg-surface);
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
        }
        #real-work .mr-header {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 9px 14px;
          background: rgba(0,0,0,0.25);
          border-bottom: 1px solid var(--glass-border);
        }
        #real-work .mr-tab {
          font-size: 12px;
          color: var(--text-primary);
        }
        #real-work .mr-body {
          padding: 16px 16px 18px;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        #real-work .mr-h1 {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-size: 18px;
          font-weight: 700;
          color: var(--text-primary);
          letter-spacing: -0.01em;
          line-height: 1.2;
        }
        #real-work .mr-p {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-size: 13px;
          color: var(--text-secondary);
          line-height: 1.55;
        }
        #real-work .mr-stack {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }
        #real-work .mr-badge {
          font-size: 11px;
          padding: 3px 8px;
          border-radius: 4px;
          background: var(--bg-elevated);
          border: 1px solid var(--glass-border);
          color: var(--text-secondary);
          font-family: 'IBM Plex Mono', monospace;
        }
        #real-work .mr-limit {
          display: flex;
          align-items: center;
          gap: 8px;
          padding-top: 4px;
          border-top: 1px solid var(--glass-border);
          font-size: 11px;
        }
        #real-work .mr-limit-label {
          color: var(--text-muted);
          text-transform: uppercase;
          letter-spacing: 0.1em;
        }
        #real-work .mr-limit-val {
          color: var(--accent-blue);
        }

        /* Mobile chat transcript — replaces laptop IDE on narrow screens */
        #real-work .mobile-chat {
          display: none;
          flex-direction: column;
          border: 1px solid var(--glass-border);
          border-radius: var(--r-lg);
          overflow: hidden;
          background: var(--bg-surface);
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
        }

        #real-work .mc-header {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 14px;
          background: rgba(0,0,0,0.25);
          border-bottom: 1px solid var(--glass-border);
        }
        #real-work .mc-title {
          font-size: 12px;
          color: var(--text-primary);
          flex: 1;
        }
        #real-work .mc-badge {
          font-size: 11px;
          color: var(--accent-blue);
          letter-spacing: 0.04em;
        }

        #real-work .mc-thread {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 16px 14px;
          overflow-y: auto;
          max-height: 380px;
        }

        #real-work .mc-row {
          display: flex;
        }
        #real-work .mc-row--candidate {
          justify-content: flex-end;
        }
        #real-work .mc-row--ai {
          justify-content: flex-start;
        }
        #real-work .mc-row--tool {
          justify-content: flex-start;
          padding-left: 2px;
        }

        #real-work .mc-bubble {
          max-width: 82%;
          padding: 9px 12px;
          border-radius: 10px;
          font-size: 12px;
          line-height: 1.55;
        }
        #real-work .mc-bubble--candidate {
          background: rgba(0, 230, 118, 0.07);
          border: 1px solid rgba(0, 230, 118, 0.18);
          color: var(--text-primary);
          border-bottom-right-radius: 3px;
        }
        #real-work .mc-bubble--ai {
          background: var(--bg-elevated);
          border: 1px solid var(--glass-border);
          color: var(--text-secondary);
          border-bottom-left-radius: 3px;
        }
        #real-work .mc-bubble--ai strong {
          color: var(--text-primary);
          font-weight: 500;
        }
        #real-work .mc-bubble--ai code {
          font-family: inherit;
          color: var(--accent-blue);
          font-size: 11px;
        }

        #real-work .mc-tool-pill {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 3px 8px;
          background: rgba(99, 120, 255, 0.08);
          border: 1px solid rgba(99, 120, 255, 0.2);
          border-radius: 4px;
          font-size: 11px;
          color: var(--accent-blue);
        }

        #real-work .mc-input {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 14px;
          border-top: 1px solid var(--glass-border);
          background: rgba(0,0,0,0.15);
        }
        #real-work .mc-input .mc-arrow {
          color: var(--accent-blue);
          flex-shrink: 0;
        }
        #real-work .mc-input .mc-placeholder {
          font-size: 12px;
          color: var(--text-muted);
        }

        @media (max-width: 720px) {
          #real-work .device-scene     { display: none !important; }
          #real-work .mobile-ide-cards { display: flex; }
        }

        /* Activity bar */
        #real-work .ide-activity {
          background: rgba(0, 0, 0, 0.3);
          border-right: 1px solid var(--glass-border);
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 12px 0;
          gap: 4px;
        }

        #real-work .ide-activity .ai {
          width: 28px;
          height: 28px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: var(--text-muted);
          border-left: 2px solid transparent;
          margin-left: -2px;
          border-radius: 4px;
        }

        #real-work .ide-activity .ai.active {
          color: var(--text-primary);
          border-left-color: var(--accent-blue);
        }

        #real-work .ide-activity .ai svg {
          width: 18px;
          height: 18px;
        }

        /* Explorer */
        #real-work .ide-explorer {
          background: rgba(0, 0, 0, 0.18);
          border-right: 1px solid var(--glass-border);
          padding: 12px 0;
          font-size: 12px;
        }

        #real-work .ide-explorer .group {
          padding: 4px 14px;
          color: var(--text-muted);
          letter-spacing: 0.1em;
          text-transform: uppercase;
          font-size: 10px;
        }

        #real-work .ide-explorer .file {
          padding: 4px 14px 4px 28px;
          color: var(--text-secondary);
          display: flex;
          align-items: center;
          gap: 8px;
          cursor: default;
        }

        #real-work .ide-explorer .file:hover {
          background: rgba(255, 255, 255, 0.025);
        }

        #real-work .ide-explorer .file.active {
          background: rgba(124, 134, 255, 0.06);
          color: var(--text-primary);
          border-left: 2px solid var(--accent-blue);
          padding-left: 26px;
        }

        #real-work .ide-explorer .file .ic {
          color: var(--text-muted);
          font-size: 10px;
        }

        /* Editor */
        #real-work .ide-editor {
          background: rgba(0, 0, 0, 0.1);
          padding: 14px 0 14px 0;
          font-size: 13px;
          line-height: 1.55;
          overflow: auto;
          position: relative;
        }

        #real-work .ide-editor pre {
          margin: 0;
          padding-right: 16px;
          counter-reset: line;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
        }

        #real-work .ide-editor .ln {
          display: grid;
          grid-template-columns: 44px 1fr;
          gap: 12px;
        }

        #real-work .ide-editor .ln::before {
          counter-increment: line;
          content: counter(line);
          color: var(--text-muted);
          text-align: right;
          font-variant-numeric: tabular-nums;
        }

        #real-work .ide-editor .ln .code {
          color: var(--text-primary);
          white-space: pre;
        }

        #real-work .ide-editor .kw {
          color: #FF7AB6;
        }

        /* keyword */
        #real-work .ide-editor .fn {
          color: #B6E1FF;
        }

        /* function */
        #real-work .ide-editor .str {
          color: #7C86FF;
        }

        /* string — periwinkle secondary */
        #real-work .ide-editor .com {
          color: var(--text-muted);
          font-style: italic;
        }

        #real-work .ide-editor .num {
          color: #F5C97B;
        }

        #real-work .ide-editor .punct {
          color: var(--text-secondary);
        }

        /* Chat panel */
        #real-work .ide-chat {
          background: rgba(0, 0, 0, 0.28);
          border-left: 1px solid var(--glass-border);
          display: flex;
          flex-direction: column;
          min-height: 460px;
        }

        #real-work .ide-chat .chat-head {
          padding: 12px 16px;
          border-bottom: 1px solid var(--glass-border);
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 11px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        #real-work .ide-chat .chat-head .live {
          width: 6px;
          height: 6px;
          border-radius: 999px;
          background: var(--accent-blue);
          box-shadow: 0 0 8px rgba(124, 134, 255, 0.7);
          animation: livePulse 1.6s ease-in-out infinite;
        }

        @keyframes livePulse {

          0%,
          100% {
            opacity: 1
          }

          50% {
            opacity: 0.4
          }
        }

        #real-work .ide-chat .chat-body {
          flex: 1;
          overflow-y: auto;
          padding: 16px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          font-size: 13px;
          line-height: 1.5;
        }

        #real-work .ide-chat .msg {
          max-width: 92%;
          padding: 10px 12px;
          border-radius: var(--r-md);
          border: 1px solid var(--glass-border);
          background: rgba(255, 255, 255, 0.02);
          color: var(--text-secondary);
          font-family: 'Space Grotesk', system-ui, sans-serif;
        }

        #real-work .ide-chat .msg.user {
          align-self: flex-end;
          background: rgba(124, 134, 255, 0.08);
          border-color: rgba(124, 134, 255, 0.25);
          color: var(--text-primary);
        }

        #real-work .ide-chat .msg .role {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--text-muted);
          margin-bottom: 4px;
          display: block;
        }

        #real-work .ide-chat .msg.user .role {
          color: var(--accent-blue);
        }

        #real-work .ide-chat .msg.thinking {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          color: var(--text-secondary);
        }

        #real-work .spinner {
          width: 14px;
          height: 14px;
          border: 2px solid rgba(124, 134, 255, 0.18);
          border-top-color: var(--accent-blue);
          border-radius: 999px;
          animation: spin 0.8s linear infinite;
          flex-shrink: 0;
        }

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

        #real-work .ide-chat .chat-input {
          border-top: 1px solid var(--glass-border);
          padding: 12px;
          background: rgba(0, 0, 0, 0.2);
        }

        #real-work .ide-chat .chat-input form {
          display: flex;
          align-items: center;
          gap: 8px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid var(--glass-border);
          border-radius: var(--r-md);
          padding: 8px 10px;
          transition: border-color 160ms ease, background-color 160ms ease;
        }

        #real-work .ide-chat .chat-input form:focus-within {
          border-color: rgba(124, 134, 255, 0.45);
          background: rgba(124, 134, 255, 0.04);
        }

        #real-work .ide-chat .chat-input input {
          flex: 1;
          min-width: 0;
          background: transparent;
          border: none;
          outline: none;
          color: var(--text-primary);
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-size: 13px;
          caret-color: var(--accent-blue);
        }

        #real-work .ide-chat .chat-input input::placeholder {
          color: var(--text-muted);
        }

        #real-work .ide-chat .chat-input button {
          background: var(--accent-cyan);
          color: var(--bg-base);
          border: none;
          cursor: pointer;
          padding: 6px 12px;
          border-radius: var(--r-sm);
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: 12px;
          letter-spacing: 0.02em;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          transition: background-color 160ms ease, transform 160ms ease;
        }

        #real-work .ide-chat .chat-input button:hover {
          background: #1AFF8C;
        }

        #real-work .ide-chat .chat-input button:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          transform: none;
        }

        #real-work .ide-chat .chat-input .hint {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10px;
          color: var(--text-muted);
          padding-top: 8px;
          padding-left: 4px;
          letter-spacing: 0.08em;
        }

        /* Terminal panel (replaces side chat) */
        #real-work .ide-term {
          position: relative;
          border-top: 1px solid var(--glass-border);
          background: rgba(0, 0, 0, 0.45);
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 12.5px;
          line-height: 1.55;
          color: var(--text-primary);
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }

        /* Resize handle — drag to taste */
        #real-work .ide-term .term-resize {
          position: absolute;
          top: -3px;
          left: 0;
          right: 0;
          height: 6px;
          cursor: ns-resize;
          z-index: 5;
        }

        #real-work .ide-term .term-resize::after {
          content: "";
          position: absolute;
          top: 2px;
          left: 0;
          right: 0;
          height: 2px;
          background: transparent;
          transition: background-color 160ms ease;
        }

        #real-work .ide-term .term-resize:hover::after,
        #real-work .ide-term.is-resizing .term-resize::after {
          background: rgba(124, 134, 255, 0.5);
        }

        #real-work .ide-term.is-resizing {
          user-select: none;
        }

        /* Startup view header line ("──── TenX AI ────") */
        #real-work .ide-term .term-banner {
          display: flex;
          align-items: center;
          gap: 12px;
          color: var(--text-muted);
          margin-bottom: 8px;
        }

        #real-work .ide-term .term-banner .rule {
          flex: 1;
          height: 1px;
          background: var(--glass-border);
        }

        #real-work .ide-term .term-banner .name {
          color: var(--accent-blue);
          letter-spacing: 0.12em;
          font-weight: 500;
        }

        #real-work .ide-term .term-welcome {
          color: var(--text-primary);
          margin-bottom: 8px;
        }

        #real-work .ide-term .term-hint {
          color: var(--text-muted);
          margin-bottom: 4px;
        }

        #real-work .ide-term .term-hint code,
        #real-work .ide-term .term-cmd-tag {
          color: var(--accent-blue);
          background: rgba(124, 134, 255, 0.06);
          padding: 0 4px;
          border-radius: 3px;
        }

        #real-work .ide-term .term-divider {
          height: 1px;
          background: var(--glass-border);
          margin: 10px 0;
        }

        /* Bottom status: (mm:ss) › task description */
        #real-work .ide-term .term-status {
          color: var(--text-secondary);
        }

        #real-work .ide-term .term-status .clk {
          color: var(--accent-blue);
        }

        #real-work .ide-term .term-status .arrow {
          color: var(--accent-blue);
          margin: 0 6px;
        }

        #real-work .ide-term .term-intro {
          border-left: 2px solid var(--accent-blue);
          padding-left: 10px;
          margin-bottom: 8px;
        }

        #real-work .ide-term .term-tool {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          color: var(--text-muted);
          padding: 2px 0 2px 28px;
        }

        #real-work .ide-term .term-working {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          color: var(--accent-blue);
          padding: 2px 0 2px 28px;
        }

        #real-work .ide-term .term-dim {
          color: var(--text-muted);
        }

        /* Markdown preview editor */
        #real-work .ide-editor--md {
          padding: 18px 22px;
          overflow: auto;
        }

        #real-work .md-preview {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          color: var(--text-primary);
          max-width: 560px;
        }

        #real-work .md-h1 {
          font-size: 17px;
          font-weight: 700;
          color: var(--text-primary);
          margin: 0 0 14px;
          padding-bottom: 8px;
          border-bottom: 1px solid var(--border);
        }

        #real-work .md-p {
          font-size: 12px;
          line-height: 1.65;
          color: var(--text-secondary);
          margin: 0 0 10px;
        }

        #real-work .md-code {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          background: var(--bg-elevated);
          border: 1px solid var(--border-bright);
          border-radius: 4px;
          padding: 1px 5px;
          color: var(--text-primary);
        }

        #real-work .md-table {
          width: 100%;
          border-collapse: collapse;
          font-size: 11.5px;
          margin-top: 10px;
        }

        #real-work .md-table th,
        #real-work .md-table td {
          text-align: left;
          padding: 7px 10px;
          border-bottom: 1px solid var(--border);
          color: var(--text-secondary);
        }

        #real-work .md-table th {
          color: var(--text-primary);
          font-weight: 600;
          border-bottom-color: var(--border-bright);
        }

        #real-work .md-table td strong {
          color: var(--text-primary);
          font-weight: 600;
        }

        #real-work .md-h2 {
          font-size: 13px;
          font-weight: 700;
          color: var(--text-primary);
          margin: 16px 0 8px;
        }

        #real-work .md-badge {
          font-size: 10px;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          background: rgba(0, 230, 118, 0.12);
          color: var(--accent-cyan);
          border: 1px solid rgba(0, 230, 118, 0.3);
          border-radius: var(--r-sm);
          padding: 1px 6px;
          vertical-align: middle;
          margin-left: 6px;
        }

        #real-work .md-codeblock {
          position: relative;
          background: var(--bg-elevated);
          border: 1px solid var(--border-bright);
          border-radius: var(--r-md);
          padding: 10px 14px;
          margin: 8px 0 10px;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11.5px;
          color: var(--text-primary);
        }

        #real-work .md-cb-lang {
          position: absolute;
          top: 6px;
          right: 10px;
          font-size: 9px;
          letter-spacing: 0.08em;
          color: var(--text-muted);
          text-transform: uppercase;
        }

        #real-work .md-ul,
        #real-work .md-ol {
          margin: 4px 0 10px 16px;
          padding: 0;
          font-size: 11.5px;
          color: var(--text-secondary);
          line-height: 1.7;
        }

        #real-work .md-ul { list-style: disc; }
        #real-work .md-ol { list-style: decimal; }

        #real-work .md-hr {
          border: none;
          border-top: 1px solid var(--border);
          margin: 16px 0;
        }

        #real-work .md-bold-label {
          font-weight: 700;
          color: var(--text-primary);
          margin-bottom: 2px;
        }

        #real-work .ide-term .term-tabs {
          display: flex;
          align-items: center;
          gap: 0;
          padding: 0 10px;
          border-bottom: 1px solid var(--glass-border);
          background: rgba(0, 0, 0, 0.25);
        }

        #real-work .ide-term .term-tab {
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--text-muted);
          padding: 8px 12px;
          border-bottom: 1px solid transparent;
          margin-bottom: -1px;
        }

        #real-work .ide-term .term-tab.active {
          color: var(--text-primary);
          border-bottom-color: var(--accent-blue);
        }

        #real-work .ide-term .term-tab .live {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 999px;
          background: var(--accent-blue);
          box-shadow: 0 0 8px rgba(124, 134, 255, 0.7);
          margin-right: 6px;
          vertical-align: middle;
          animation: livePulse 1.6s ease-in-out infinite;
        }

        #real-work .ide-term .term-spacer {
          flex: 1;
        }

        #real-work .ide-term .term-x {
          color: var(--text-muted);
          padding: 4px 8px;
          font-size: 14px;
          cursor: default;
        }

        #real-work .ide-term .term-body {
          flex: 1;
          overflow-y: auto;
          padding: 12px 16px;
        }

        #real-work .ide-term .term-line {
          white-space: pre-wrap;
        }

        #real-work .ide-term .term-line .ps {
          color: var(--accent-blue);
          margin-right: 8px;
        }

        #real-work .ide-term .term-line .out {
          color: var(--text-secondary);
        }

        #real-work .ide-term .term-line .ok {
          color: var(--accent-blue);
        }

        #real-work .ide-term .term-line .dim {
          color: var(--text-muted);
        }

        #real-work .ide-term .term-thinking {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: var(--text-secondary);
        }

        #real-work .ide-term .term-thinking .spinner {
          width: 12px;
          height: 12px;
          border: 2px solid rgba(124, 134, 255, 0.18);
          border-top-color: var(--accent-blue);
          border-radius: 999px;
          animation: spin 0.8s linear infinite;
        }

        /* Inline prompt: input is the terminal line. Whole row clickable
           and hover-highlighted to telegraph "type here". */
        #real-work .ide-term .term-prompt-line {
          display: flex;
          align-items: baseline;
          gap: 8px;
          margin-top: 4px;
          line-height: 1.5;
          padding: 4px 6px;
          margin-left: -6px;
          margin-right: -6px;
          border-radius: var(--r-sm);
          cursor: text;
          transition: background-color 160ms ease;
        }

        #real-work .ide-term .term-prompt-line:hover {
          background: rgba(124, 134, 255, 0.06);
        }

        #real-work .ide-term .term-prompt-line.is-active:hover {
          background: transparent;
        }

        #real-work .ide-term .term-prompt-line .ps {
          color: var(--accent-blue);
          flex-shrink: 0;
        }

        /* Field: shrink-to-content via a width-mirror so the cursor sits
           immediately after the placeholder/typed text. */
        #real-work .ide-term .term-prompt-line .field {
          position: relative;
          display: inline-flex;
          align-items: center;
          min-width: 0;
        }

        #real-work .ide-term .term-prompt-line .mirror {
          visibility: hidden;
          white-space: pre;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 12.5px;
          line-height: 1.5;
          min-width: 1ch;
        }

        #real-work .ide-term .term-prompt-line input {
          position: absolute;
          inset: 0;
          width: 100%;
          background: transparent;
          border: none;
          outline: none;
          color: var(--text-primary);
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 12.5px;
          line-height: 1.5;
          padding: 0;
          caret-color: var(--accent-blue);
        }

        #real-work .ide-term .term-prompt-line input::placeholder {
          color: var(--text-muted);
        }

        /* At-rest cursor block: anchored RIGHT NEXT TO the placeholder text. */
        #real-work .ide-term .term-prompt-line .rest-cursor {
          width: 9px;
          height: 16px;
          background: var(--accent-blue);
          flex-shrink: 0;
          margin-left: 4px;
          align-self: center;
        }

        #real-work .ide-term .term-prompt-line.is-active .rest-cursor,
        #real-work .ide-term .term-prompt-line.has-text .rest-cursor {
          display: none;
        }

        /* "Click to type" hint slides in on hover — telegraphs interactivity */
        #real-work .ide-term .term-prompt-line .click-hint {
          margin-left: 10px;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10.5px;
          letter-spacing: 0.08em;
          color: var(--accent-blue);
          opacity: 0;
          transform: translateX(-6px);
          transition: opacity 240ms ease, transform 240ms ease;
          pointer-events: none;
          align-self: center;
        }

        #real-work .ide-term .term-prompt-line:hover .click-hint {
          opacity: 0.85;
          transform: translateX(0);
        }

        #real-work .ide-term .term-prompt-line.is-active .click-hint,
        #real-work .ide-term .term-prompt-line.has-text .click-hint {
          display: none;
        }

        @keyframes caretBlink {
          50% {
            opacity: 0;
          }
        }

        /* Echoed (frozen) prompt lines — same look as live one, no input */
        #real-work .ide-term .term-echo {
          display: flex;
          align-items: baseline;
          gap: 8px;
          line-height: 1.5;
        }

        #real-work .ide-term .term-echo .ps {
          color: var(--accent-blue);
          flex-shrink: 0;
        }

        /* Status bar */
        #real-work .ide-status {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 6px 14px;
          border-top: 1px solid var(--glass-border);
          background: rgba(124, 134, 255, 0.06);
          font-size: 10px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: var(--text-secondary);
        }

        #real-work .ide-status .pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          color: var(--text-primary);
        }

        #real-work .ide-status .pill .dt {
          color: var(--accent-blue);
        }

        #real-work .ide-status .spacer {
          flex: 1;
        }

        /* Pointer rail under the IDE — three labeled callouts that
           "point up" into the surface above. Self-documents the IDE. */
        #real-work .rw-pointers {
          display: grid;
          gap: 14px;
          grid-template-columns: 1fr;
          margin-top: 20px;
          padding: 0 4px;
        }

        @media (min-width: 900px) {
          #real-work .rw-pointers {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 28px;
          }
        }

        #real-work .rw-pointer {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          padding-top: 10px;
          border-top: 1px dashed rgba(124, 134, 255, 0.25);
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
        }

        #real-work .rw-pointer .up {
          color: var(--accent-blue);
          flex-shrink: 0;
          font-size: 16px;
          line-height: 1;
          margin-top: -1px;
        }

        #real-work .rw-pointer .txt {
          flex: 1;
          min-width: 0;
        }

        #real-work .rw-pointer .label {
          color: var(--text-primary);
          font-weight: 500;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          font-size: 11px;
          display: block;
          margin-bottom: 3px;
        }

        #real-work .rw-pointer .desc {
          color: var(--text-secondary);
          font-size: 12px;
          line-height: 1.5;
        }

        /* ── Device shell ── */
        #real-work .device-scene {
          perspective: 2200px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        #real-work .device-shell {
          position: relative;
          transform-style: preserve-3d;
          will-change: transform;
          width: 100%;
        }

        #real-work .layer-back {
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, #1f2128 0%, #0e1014 100%);
          border-radius: 18px;
          border: 1px solid rgba(255, 255, 255, 0.07);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
          pointer-events: none;
          will-change: transform;
          transform: translateZ(-8px);
        }

        #real-work .layer-bezel {
          position: absolute;
          inset: 0;
          background: #0a0a0d;
          border-radius: 16px;
          border: 1px solid rgba(255, 255, 255, 0.11);
          box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.04), 0 20px 60px rgba(0, 0, 0, 0.5);
          pointer-events: none;
          will-change: transform;
          transform: translateZ(0px);
        }

        #real-work .layer-keyboard {
          position: absolute;
          left: -32px;
          right: -32px;
          bottom: -28px;
          height: 28px;
          background: linear-gradient(180deg, #2a2d36 0%, #14161c 100%);
          border-radius: 0 0 10px 10px;
          border: 1px solid rgba(255, 255, 255, 0.05);
          box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
          transform-origin: top center;
          pointer-events: none;
          will-change: transform;
          transform: translateZ(0px) rotateX(78deg);
        }

        #real-work .layer-screen {
          position: relative;
          margin: 14px;
          border-radius: 10px;
          overflow: hidden;
          will-change: transform;
          transform: translateZ(0px);
        }

        #real-work .layer-screen .ide {
          opacity: 0;
          transition: opacity 800ms ease;
        }

        #real-work .layer-screen.screen-awake .ide {
          opacity: 1;
        }

        #real-work .layer-screen::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.13) 50%, transparent 62%);
          transform: translateX(-120%);
          pointer-events: none;
          mix-blend-mode: screen;
          z-index: 10;
        }

        #real-work .layer-screen.shimmer::after {
          transition: transform 550ms cubic-bezier(0.4, 0, 0.2, 1);
          transform: translateX(120%);
        }


        #defense .df-eyebrow {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        #defense .df-h2 {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: clamp(32px, 4.6vw, 52px);
          line-height: 1.05;
          letter-spacing: -0.03em;
          color: var(--text-primary);
          max-width: 760px;
        }

        #defense .df-h2 .accent {
          background: linear-gradient(180deg, #B6FFD7 0%, #00E676 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }

        #defense .df-sub {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-size: 16px;
          line-height: 1.55;
          color: var(--text-secondary);
          max-width: 580px;
        }

        /* Chat-panel shell (mirrors the VSCode extension chat surface) */
        #defense .df-chat {
          background: rgba(13, 15, 20, 0.85);
          backdrop-filter: blur(28px) saturate(160%);
          -webkit-backdrop-filter: blur(28px) saturate(160%);
          border: 1px solid var(--glass-border);
          border-radius: var(--r-lg);
          overflow: hidden;
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 30px 80px -30px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(0, 230, 118, 0.04);
          display: flex;
          flex-direction: column;
          max-width: 720px;
          margin: 0 auto;
        }

        #defense .df-chat .win-header {
          padding: 12px 16px;
          border-bottom: 1px solid var(--glass-border);
          background: rgba(0, 0, 0, 0.25);
          display: flex;
          align-items: center;
          gap: 10px;
        }

        #defense .df-chat .win-title {
          color: var(--text-muted);
        }

        #defense .df-chat .chat-head {
          padding: 12px 18px;
          border-bottom: 1px solid var(--glass-border);
          display: flex;
          align-items: center;
          gap: 10px;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        #defense .df-chat .chat-head .live {
          width: 6px;
          height: 6px;
          border-radius: 999px;
          background: var(--accent-blue);
          box-shadow: 0 0 8px rgba(124, 134, 255, 0.7);
          animation: livePulse 1.6s ease-in-out infinite;
        }

        #defense .df-chat .chat-head .session {
          margin-left: auto;
          color: var(--text-muted);
          letter-spacing: 0.06em;
          text-transform: none;
        }

        /* Replay button — lives in the chat-head next to the session ID */
        #defense .df-replay {
          margin-left: 12px;
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-size: 11px;
          font-weight: 500;
          letter-spacing: 0.04em;
          text-transform: none;
          color: var(--text-primary);
          background: rgba(124, 134, 255, 0.08);
          border: 1px solid rgba(124, 134, 255, 0.3);
          padding: 5px 10px;
          border-radius: var(--r-full);
          display: inline-flex;
          align-items: center;
          gap: 6px;
          cursor: pointer;
          transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
        }

        #defense .df-replay:hover {
          background: rgba(124, 134, 255, 0.16);
          border-color: rgba(124, 134, 255, 0.5);
          color: var(--accent-blue);
        }

        #defense .df-replay:disabled {
          opacity: 0.4;
          cursor: not-allowed;
        }

        #defense .df-replay svg {
          width: 11px;
          height: 11px;
        }

        #defense .df-chat .chat-body {
          padding: 20px 18px;
          display: flex;
          flex-direction: column;
          gap: 14px;
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-size: 14px;
          line-height: 1.55;
          /* Fixed scroll viewport — like the sample-report deep dive */
          height: 460px;
          overflow-y: auto;
          scroll-behavior: smooth;
        }

        /* Bubbles — TenX (assistant, asks) on the left, candidate (you) on the right */
        #defense .df-msg {
          max-width: 86%;
          padding: 12px 14px;
          border-radius: var(--r-md);
          border: 1px solid var(--glass-border);
          background: rgba(255, 255, 255, 0.02);
          color: var(--text-primary);
          opacity: 0;
          transform: translateY(6px);
          transition: opacity 320ms ease, transform 320ms ease;
        }

        #defense .df-msg.in {
          opacity: 1;
          transform: translateY(0);
        }

        #defense .df-msg.tenx {
          align-self: flex-start;
          border-color: rgba(124, 134, 255, 0.18);
          background: rgba(124, 134, 255, 0.05);
        }

        #defense .df-msg.you {
          align-self: flex-end;
          border-color: rgba(182, 225, 255, 0.18);
          background: rgba(182, 225, 255, 0.04);
        }

        #defense .df-msg .role {
          display: block;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--text-muted);
          margin-bottom: 6px;
        }

        #defense .df-msg.tenx .role {
          color: var(--accent-blue);
        }

        #defense .df-msg.you .role {
          color: #B6E1FF;
        }

        #defense .df-msg .body {
          color: var(--text-primary);
        }

        /* Typewriter caret on the candidate's currently-typing reply */
        #defense .df-msg .body.typing::after {
          content: '';
          display: inline-block;
          width: 7px;
          height: 14px;
          background: #B6E1FF;
          margin-left: 2px;
          vertical-align: -2px;
          animation: caretBlink 1s steps(2) infinite;
        }

        @keyframes caretBlink {
          50% {
            opacity: 0;
          }
        }

        /* Verdict card at the end */
        #defense .df-verdict {
          align-self: stretch;
          margin-top: 4px;
          padding: 12px 14px;
          border: 1px solid rgba(124, 134, 255, 0.3);
          background: rgba(124, 134, 255, 0.05);
          border-radius: var(--r-md);
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 12px;
          line-height: 1.5;
          color: var(--text-primary);
          opacity: 0;
          transform: translateY(8px);
          transition: opacity 400ms ease, transform 400ms ease;
        }

        #defense .df-verdict.in {
          opacity: 1;
          transform: translateY(0);
        }

        #defense .df-verdict .label {
          color: var(--accent-blue);
          letter-spacing: 0.12em;
          text-transform: uppercase;
          font-size: 10px;
          margin-right: 8px;
        }

        /* Footer hint strip — mirrors the VSCode chat input area */
        #defense .df-foot {
          border-top: 1px solid var(--glass-border);
          padding: 10px 16px;
          background: rgba(0, 0, 0, 0.2);
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          color: var(--text-muted);
          letter-spacing: 0.08em;
          display: flex;
          align-items: center;
          gap: 10px;
        }

        #defense .df-foot .mark {
          color: var(--accent-blue);
        }

        @media (prefers-reduced-motion: reduce) {

          #defense .df-msg,
          #defense .df-verdict {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
          }

          #defense .df-msg .body.typing::after {
            animation: none;
          }
        }


        /* Two-column layout: sticky narrative left, scrolling chat right.
           Mirrors the sample-report deep-dive pattern (Section 6). */
        #defense .df-grid {
          display: grid;
          gap: 40px;
          grid-template-columns: 1fr;
        }

        @media (min-width: 900px) {
          #defense .df-grid {
            grid-template-columns: 360px 1fr;
            gap: 60px;
            align-items: start;
          }

          #defense .df-narrative {
            position: sticky;
            top: 100px;
          }
        }


        #hiring-blind .cmp-shell {
          position: relative;
          background: var(--glass-bg);
          backdrop-filter: blur(24px) saturate(160%);
          -webkit-backdrop-filter: blur(24px) saturate(160%);
          border: 1px solid var(--glass-border);
          border-radius: var(--r-lg);
          overflow: hidden;
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 24px 60px -28px rgba(0, 0, 0, 0.55);
        }

        #hiring-blind .cmp-table {
          width: 100%;
          border-collapse: collapse;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 14px;
        }

        #hiring-blind .cmp-table thead th {
          text-align: left;
          font-weight: 500;
          padding: 14px 20px;
          color: var(--text-muted);
          font-size: 11px;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          border-bottom: 1px solid var(--border);
        }

        #hiring-blind .cmp-table thead th {
          border-bottom: 1px solid var(--glass-border);
        }

        #hiring-blind .cmp-table thead th.tenx-col {
          color: var(--accent-cyan);
        }

        #hiring-blind .cmp-table tbody th {
          text-align: left;
          font-weight: 400;
          padding: 18px 22px;
          color: var(--text-muted);
          white-space: nowrap;
          border-bottom: 1px solid var(--glass-border);
          width: 22%;
        }

        #hiring-blind .cmp-table td {
          padding: 18px 22px;
          vertical-align: top;
          border-bottom: 1px solid var(--glass-border);
          color: var(--text-secondary);
        }

        #hiring-blind .cmp-table td.tenx-val {
          color: var(--text-primary);
          background: linear-gradient(90deg, rgba(0, 230, 118, 0.06), rgba(0, 230, 118, 0));
          border-left: 1px solid rgba(0, 230, 118, 0.4);
        }

        #hiring-blind .cmp-table tbody tr:last-child th,
        #hiring-blind .cmp-table tbody tr:last-child td {
          border-bottom: none;
        }

        @media (max-width: 640px) {
          /* Category label spans full width; values sit in a true 50/50 grid below it */
          #hiring-blind .cmp-table,
          #hiring-blind .cmp-table tbody { display: block; }

          /* Header: hide category cell, show the two column names side by side */
          #hiring-blind .cmp-table thead tr {
            display: grid;
            grid-template-columns: 1fr 1fr;
          }
          #hiring-blind .cmp-table thead th:first-child { display: none; }
          #hiring-blind .cmp-table thead th { padding: 10px 12px; font-size: 10px; }

          /* Body rows: 2-column grid, category th spans both columns */
          #hiring-blind .cmp-table tbody tr {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-bottom: 1px solid var(--glass-border);
          }
          #hiring-blind .cmp-table tbody tr:last-child { border-bottom: none; }

          #hiring-blind .cmp-table tbody th {
            grid-column: 1 / -1;
            white-space: normal;
            padding: 14px 14px 4px;
            border-bottom: none;
            font-size: 9px;
            letter-spacing: 0.16em;
          }
          #hiring-blind .cmp-table td {
            padding: 4px 14px 14px;
            border-bottom: none;
            font-size: 12px;
            line-height: 1.45;
          }
          #hiring-blind .cmp-table td.tenx-val {
            border-left: 1px solid rgba(0, 230, 118, 0.4);
            background: linear-gradient(90deg, rgba(0, 230, 118, 0.06), rgba(0, 230, 118, 0));
          }
        }


        #hiring-blind {
          background: var(--bg-surface);
        }

        #hiring-blind .hb-h2 {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: clamp(28px, 3.8vw, 44px);
          line-height: 1.1;
          letter-spacing: -0.02em;
          color: var(--text-primary);
          max-width: 760px;
        }

        #hiring-blind .hb-h2 .accent {
          background: linear-gradient(180deg, #B6FFD7 0%, #00E676 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }

        #hiring-blind .hb-sub {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-size: 16px;
          line-height: 1.55;
          color: var(--text-secondary);
          max-width: 560px;
        }

        /* ── process steps ── */
        #how-it-works .step {
          border: 1px solid var(--border);
          padding: 28px 24px;
          position: relative;
        }

        @media (min-width: 768px) {
          #how-it-works .step:not(:last-child) {
            border-right: none;
          }
        }

        #how-it-works .step-num {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-weight: 500;
          font-size: 36px;
          line-height: 1;
          color: var(--accent-blue);
          opacity: 0.55;
          font-feature-settings: 'tnum' 1;
        }

        #how-it-works .step-title {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: 16px;
          letter-spacing: -0.01em;
          color: var(--text-primary);
          line-height: 1.25;
        }

        #how-it-works .step-desc {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 13px;
          line-height: 1.6;
          color: var(--text-secondary);
        }

        @media (max-width: 768px) {
          /* 2-column grid: stages pair up, TenX spans full width as the focal row */

          #how-it-works .step:not(:last-child) {
            border-bottom: none;
          }
        }


        #pricing {
          background: var(--bg-base);
        }

        #pricing .pr-eyebrow {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        #pricing .pr-h2 {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: clamp(28px, 3.8vw, 44px);
          line-height: 1.1;
          letter-spacing: -0.025em;
          color: var(--text-primary);
          max-width: 600px;
          margin-top: 20px;
        }

        #pricing .pr-h2 .accent {
          background: linear-gradient(180deg, #B6FFD7 0%, #00E676 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }

        #pricing .pr-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          margin-top: 48px;
        }

        @media (max-width: 768px) {
          #pricing .pr-grid {
            grid-template-columns: 1fr;
          }
        }

        #pricing .tier {
          background: var(--glass-bg);
          backdrop-filter: blur(20px) saturate(140%);
          -webkit-backdrop-filter: blur(20px) saturate(140%);
          border: 1px solid var(--glass-border);
          padding: 32px 28px;
          display: flex;
          flex-direction: column;
          position: relative;
          transition: border-color 200ms ease;
        }

        #pricing .tier:hover {
          border-color: var(--border-bright);
        }

        #pricing .tier.featured::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          height: 2px;
          background: linear-gradient(90deg, #00E676 0%, #00E5FF 100%);
        }

        #pricing .tier-label {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 10px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        #pricing .tier.featured .tier-label {
          color: #00E676;
        }

        #pricing .tier-name {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: 22px;
          color: var(--text-primary);
          letter-spacing: -0.01em;
          margin-top: 6px;
        }

        #pricing .tier-price {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 700;
          font-size: 40px;
          line-height: 1;
          color: var(--text-primary);
          font-variant-numeric: tabular-nums;
          letter-spacing: -0.03em;
          margin-top: 20px;
        }

        #pricing .tier-price .unit {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 12px;
          font-weight: 400;
          color: var(--text-muted);
          margin-left: 6px;
          letter-spacing: 0.04em;
        }

        #pricing .tier ul {
          margin-top: 24px;
          padding-top: 20px;
          border-top: 1px solid var(--border);
          flex: 1;
        }

        #pricing .tier ul li {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 12.5px;
          line-height: 1.5;
          color: var(--text-secondary);
          padding: 10px 0;
          display: flex;
          align-items: flex-start;
          gap: 12px;
        }

        #pricing .tier ul li::before {
          content: "";
          width: 4px;
          height: 4px;
          background: #00E676;
          border-radius: 50%;
          margin-top: 7px;
          flex: 0 0 auto;
        }

        #pricing .tier-cta {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin-top: 24px;
          padding: 13px 20px;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-weight: 500;
          font-size: 11px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          border: 1px solid var(--border-bright);

          color: var(--text-primary);
          background: transparent;
          transition: background 160ms ease, border-color 160ms ease;
        }

        #pricing .tier-cta:hover {
          background: rgba(0, 230, 118, 0.08);
          border-color: #00E676;
        }

        #pricing .tier.featured .tier-cta {
          background: #00E676;
          border-color: #00E676;
          color: var(--bg-base);
          font-weight: 600;
        }

        #pricing .tier.featured .tier-cta:hover {
          background: #4AFF91;
          border-color: #4AFF91
        }

        #pricing .pr-note {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          line-height: 1.6;
          color: var(--text-muted);
          text-align: center;
          margin-top: 36px;
          letter-spacing: 0.06em;
        }


        #cta-footer {
          background: var(--bg-surface);
        }

        #cta-footer .cf-eyebrow {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        #cta-footer .cf-h2 {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 600;
          font-size: clamp(24px, 3.2vw, 36px);
          line-height: 1.15;
          letter-spacing: -0.02em;
          color: var(--text-primary);
          max-width: 660px;
        }

        #cta-footer .cf-kicker {
          font-family: 'Space Grotesk', system-ui, sans-serif;
          font-weight: 700;
          font-size: clamp(36px, 5.6vw, 60px);
          line-height: 1;
          letter-spacing: -0.03em;
          background: linear-gradient(180deg, #B6FFD7 0%, #00E676 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }

        #cta-footer .cf-email {
          display: grid;
          grid-template-columns: 1fr auto;
          width: 100%;
          max-width: 440px;
        }

        #cta-footer .cf-email input {
          background: var(--bg-base);
          border: 1px solid var(--border);
          border-right: none;
          color: var(--text-primary);
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 13px;
          padding: 14px 16px;
          outline: none;
          transition: border-color 160ms ease;
        }

        #cta-footer .cf-email input::placeholder {
          color: var(--text-muted);
        }

        #cta-footer .cf-email input:focus {
          border-color: #7C86FF;
        }

        #cta-footer .cf-email button {
          background: #00E676;
          color: var(--bg-base);
          border: 1px solid #00E676;
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-weight: 600;
          font-size: 11px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          padding: 0 20px;
          transition: background 160ms ease, border-color 160ms ease;
        }

        #cta-footer .cf-email button:hover {
          background: #4AFF91;
          border-color: #4AFF91;
        }

        #cta-footer .cf-foot {
          font-family: 'IBM Plex Mono', ui-monospace, monospace;
          font-size: 11px;
          line-height: 1.6;
          color: var(--text-muted);
          letter-spacing: 0.06em;
          margin-top: 48px;
        }