/* ─────────────────────────────────────────────────────────────
 * xpntl · packages/web/landing/assets/css/style.css
 *
 * Page-specific styles for the marketing landing. Pairs with
 * tokens.css (design-system tokens). Brand mark + sections layered
 * on top of the same OKLch/JetBrains-Mono primitives the product uses.
 * ──────────────────────────────────────────────────────────── */

body {
    background: var(--xp-canvas);
    background-image: radial-gradient(circle, var(--xp-grid-dot) 0.7px, transparent 0.8px);
    background-size: 16px 16px;
  }

  /* ── shared chrome ───────────────────────────────────── */
  .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
  .rule { height: 1px; background: var(--xp-border); border: 0; margin: 0; }

  /* ── NAV ──────────────────────────────────────────────── */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklch, var(--xp-canvas) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--xp-border);
  }
  .nav-inner {
    display: flex; align-items: center; gap: 24px;
    padding: 12px 32px;
    max-width: 1240px; margin: 0 auto;
  }
  .nav .brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--xp-font-mono); font-weight: 700; font-size: 16px;
    letter-spacing: var(--xp-track-tight); color: var(--xp-ink);
    text-decoration: none;
  }
  .nav .brand svg { width: 22px; height: 22px; flex: none; }
  .nav .stamp {
    background: var(--xp-accent); color: oklch(20% 0.010 60);
    padding: 2px 6px; font-size: 9px;
    letter-spacing: var(--xp-track-meta); font-weight: 700;
  }
  .nav .links {
    display: flex; gap: 4px; margin-left: 28px;
  }
  .nav .links a {
    padding: 6px 10px; font-family: var(--xp-font-mono);
    font-size: 11px; letter-spacing: var(--xp-track-wide);
    text-transform: uppercase; font-weight: 500;
    color: var(--xp-muted); text-decoration: none;
  }
  .nav .links a:hover { color: var(--xp-ink); }
  .nav .spacer { flex: 1; }
  .nav .right {
    display: flex; align-items: center; gap: 12px;
  }
  .nav .meta {
    font-family: var(--xp-font-mono); font-size: 10px;
    color: var(--xp-muted); letter-spacing: var(--xp-track-snug);
  }
  .nav .ghost {
    padding: 7px 12px; font-family: var(--xp-font-mono);
    font-size: 11px; letter-spacing: var(--xp-track-wide);
    text-transform: uppercase; font-weight: 600;
    color: var(--xp-ink); text-decoration: none;
    border: 1px solid var(--xp-border); border-radius: var(--xp-r-sm);
    background: var(--xp-surface);
  }
  .nav .primary {
    padding: 7px 12px; font-family: var(--xp-font-mono);
    font-size: 11px; letter-spacing: var(--xp-track-wide);
    text-transform: uppercase; font-weight: 600;
    background: var(--xp-accent); color: oklch(20% 0.010 60);
    text-decoration: none;
    border-radius: var(--xp-r-sm);
    display: inline-flex; align-items: center; gap: 8px;
  }

  .kbd {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid currentColor; border-radius: 2px;
    padding: 0 4px; font-size: 9.5px; font-weight: 500;
    line-height: 1.4; opacity: 0.7;
  }
  .btn .kbd { font-size: 10px; padding: 0 5px; }

  /* ── SECTION numbering ───────────────────────────────── */
  .section {
    padding: 96px 0;
    border-bottom: 1px solid var(--xp-border);
    position: relative;
  }
  .section.hero {
    padding: 0;
    min-height: 100vh;
    display: flex; align-items: flex-start;
    position: relative;
    border-bottom: none;
  }
  .section.hero > .container {
    padding-top: 24px;
    padding-bottom: 64px;
    width: 100%;
  }
  .hero-scroll-hint {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-family: var(--xp-font-mono); font-size: 9px;
    letter-spacing: var(--xp-track-meta); text-transform: uppercase;
    color: var(--xp-muted); font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    animation: hint-bob 2s ease-in-out infinite;
    transition: opacity 0.3s ease-out;
  }
  .hero-scroll-hint:hover { color: var(--xp-ink); }
  .hero-scroll-hint.hidden {
    opacity: 0;
    pointer-events: none;
  }
  .hero-scroll-hint .arrow {
    font-size: 16px; line-height: 1;
  }
  @keyframes hint-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
  }
  .sec-eyebrow {
    display: inline-flex; align-items: baseline; gap: 12px;
    margin-bottom: 18px;
    font-family: var(--xp-font-mono); font-size: 10px;
    letter-spacing: var(--xp-track-meta); text-transform: uppercase;
    color: var(--xp-muted); font-weight: 500;
  }
  .sec-eyebrow .num { color: var(--xp-accent-strong); }

  /* ── HERO — terminal + chart layout ────────────────────── */
  .hero-layout {
    display: grid; grid-template-columns: 65fr 35fr; gap: 32px;
    align-items: start;
  }
  .hero-terminal {
    background: oklch(10% 0.005 60);
    border: 1px solid oklch(22% 0.008 55);
    border-radius: var(--xp-r-md);
    overflow: hidden;
    box-shadow: 0 24px 80px oklch(0% 0 0 / 0.5), 0 2px 6px oklch(0% 0 0 / 0.3);
    width: 100%;
  }
  :root[data-theme="dark"] .hero-terminal {
    border-color: oklch(28% 0.008 55);
    box-shadow:
      0 0 0 1px oklch(28% 0.008 55),
      0 0 40px oklch(85% 0.18 95 / 0.06),
      0 0 120px oklch(85% 0.18 95 / 0.03),
      0 24px 80px oklch(0% 0 0 / 0.5);
  }
  .hero-terminal-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px;
    background: oklch(14% 0.005 60);
    border-bottom: 1px solid oklch(22% 0.008 55);
  }
  .hero-terminal-bar .dot {
    width: 11px; height: 11px; border-radius: 50%;
  }
  .hero-terminal-title {
    margin-left: 12px;
    font-family: var(--xp-font-mono); font-size: 11px;
    font-weight: 500; letter-spacing: var(--xp-track-snug);
    color: oklch(50% 0.008 55);
  }
  .hero-terminal-body {
    padding: 24px 24px 28px;
  }
  .hero-line {
    margin-bottom: 10px;
  }
  .hero-prompt {
    display: flex; align-items: center; gap: 10px;
  }
  .t-prompt-mark {
    width: 26px; height: 26px;
    flex: none;
  }
  .t-tool-bar:hover, a.t-tool-bar:hover {
    border-color: oklch(85% 0.18 95);
    background: oklch(18% 0.008 60);
    cursor: pointer;
  }
  .hero-response {
    padding-left: 16px;
    border-left: 2px solid oklch(22% 0.008 55);
  }
  .hero-tool {
    margin-top: 8px;
  }
  .t-tool-bar {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: oklch(14% 0.005 60);
    border: 1px solid oklch(22% 0.008 55);
    border-radius: 4px;
    font-family: var(--xp-font-mono);
    font-size: 11px; font-weight: 500;
    color: oklch(70% 0.008 55);
    letter-spacing: var(--xp-track-snug);
  }
  .t-tool-icon {
    color: oklch(85% 0.18 95);
  }
  .t-tool-path {
    color: oklch(50% 0.008 55);
  }
  /* shell prompt */
  .t-shell {
    font-family: var(--xp-font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: var(--xp-track-snug);
    color: oklch(58% 0.008 55);
  }
  .t-shell-user { color: oklch(70% 0.14 145); font-weight: 600; }
  .t-shell-path { color: oklch(65% 0.12 240); }
  .t-shell-pct { color: oklch(58% 0.008 55); }
  #shell-typed { color: oklch(94% 0.006 70); }
  .t-shell-cursor {
    display: inline-block;
    width: 8px; height: 1.1em;
    vertical-align: -0.15em;
    background: oklch(94% 0.006 70);
    animation: blink 1s steps(2, end) infinite;
  }
  .t-shell-cursor.hidden { display: none; }

  .xpntl-anim {
    display: flex; align-items: center;
    font-family: var(--xp-font-mono);
    font-size: 32px; font-weight: 600;
    letter-spacing: 0.03em;
    color: oklch(94% 0.006 70);
    min-height: 42px;
  }
  .xpntl-anim .ch {
    display: inline-block;
    transition: width 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
    overflow: hidden;
    white-space: pre;
  }
  .xpntl-anim .ch.drop {
    color: oklch(50% 0.008 55);
  }
  .xpntl-anim .ch.keep {
    color: oklch(85% 0.18 95);
    font-weight: 700;
  }
  .xpntl-anim .ch.removing {
    opacity: 0;
    width: 0 !important;
    margin: 0;
  }
  .xpntl-cursor {
    display: inline-block;
    width: 3px; height: 0.88em;
    vertical-align: -0.05em;
    animation: cursor-cycle-term 1.8s steps(1) infinite;
  }
  @keyframes cursor-cycle-term {
    0%       { background: oklch(85% 0.18 95); }
    33.3%    { background: oklch(60% 0.18 90); }
    66.6%    { background: transparent; }
    100%     { background: oklch(85% 0.18 95); }
  }
  .hero-headline {
    font-family: var(--xp-font-mono); font-weight: 700;
    font-size: 64px; line-height: 0.95;
    letter-spacing: var(--xp-track-tight);
    color: oklch(96% 0.004 70);
    margin: 0;
  }
  .hero-sub {
    margin: 0; max-width: 640px;
    font-family: var(--xp-font-mono); font-size: 14px;
    line-height: 1.65; color: oklch(58% 0.008 55);
  }
  .hero-sub em { font-style: normal; color: oklch(85% 0.18 95); }
  .hero-sub-accent { margin-top: 8px; }
  .t-print {
    visibility: hidden;
  }
  .t-print.printed {
    visibility: visible;
  }
  .t-print.t-fade {
    visibility: visible;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }
  .t-print.t-fade.printed {
    opacity: 1;
    transform: translateY(0);
  }
  .hero-bullets {
    margin: 0; padding: 0;
    display: grid; gap: 6px;
  }
  .hero-bullets li {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--xp-font-mono); font-size: 12px;
    color: oklch(58% 0.008 55); letter-spacing: var(--xp-track-snug);
    list-style: none;
  }
  .hero-bullets li::before {
    content: "—"; color: oklch(85% 0.18 95); font-weight: 600;
  }
  .hero-bullets li strong { color: oklch(90% 0.006 70); font-weight: 600; }
  .hero-ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
  }
  .hero-terminal .btn.primary {
    background: oklch(85% 0.18 95); color: oklch(14% 0.006 60);
    border: none;
  }
  .hero-terminal .btn.secondary {
    background: transparent; color: oklch(90% 0.006 70);
    border-color: oklch(28% 0.008 55);
  }

  /* ── Right aside (kanban board) ────────────────────────── */
  .hero-aside {
    display: flex; flex-direction: column; gap: 20px;
  }
  .hero-kanban {
    background: var(--xp-surface);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r-sm);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.92) translateY(12px);
    transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hero-kanban.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  .kanban-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 12px;
    background: var(--xp-layer);
    border-bottom: 1px solid var(--xp-hairline);
  }
  .kanban-bar .dot {
    width: 9px; height: 9px; border-radius: 50%;
  }
  .kanban-url {
    margin-left: 10px;
    font-family: var(--xp-font-mono); font-size: 10px;
    color: var(--xp-muted); letter-spacing: var(--xp-track-snug);
  }
  .kanban-url strong { color: var(--xp-ink); font-weight: 500; }
  .kanban-cols {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding: 10px;
  }
  .kanban-col {
    padding: 0 6px;
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
  }
  .kanban-col + .kanban-col {
    border-left: 1px solid var(--xp-hairline);
  }
  .kanban-col-head {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 4px 8px;
    font-family: var(--xp-font-mono); font-size: 10px;
    font-weight: 600; color: var(--xp-ink);
    letter-spacing: var(--xp-track-snug);
  }
  .kanban-ct {
    margin-left: auto;
    font-size: 9px; font-weight: 500;
    color: var(--xp-muted);
  }
  .kanban-card {
    background: var(--xp-canvas);
    border: 1px solid var(--xp-hairline);
    border-radius: 4px;
    padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .kanban-card.active {
    border-color: var(--xp-accent-strong);
    background: var(--xp-accent-tint);
  }
  .kanban-card.done { opacity: 0.6; }
  .kanban-key {
    font-family: var(--xp-font-mono); font-size: 8.5px;
    font-weight: 600; color: var(--xp-muted);
    letter-spacing: var(--xp-track-snug);
  }
  .kanban-title {
    font-family: var(--xp-font-mono); font-size: 10px;
    color: var(--xp-ink); line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .kanban-av {
    width: 16px; height: 16px; border-radius: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 7px; font-weight: 700; color: var(--xp-canvas);
    letter-spacing: 0;
    align-self: flex-end;
  }
  .kanban-av.agent {
    border: 1.5px solid var(--xp-accent);
  }

  /* kanban card highlight pulse */
  .kanban-card.highlight {
    border-color: var(--xp-accent-strong);
    background: var(--xp-accent-tint);
    animation: card-pulse 0.6s ease-out;
  }
  @keyframes card-pulse {
    0% { box-shadow: 0 0 0 0 oklch(85% 0.18 95 / 0.5); }
    100% { box-shadow: 0 0 0 8px oklch(85% 0.18 95 / 0); }
  }
  .kanban-card.moving {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.35s ease-out, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .kanban-card.moved {
    opacity: 1;
    transform: translateX(0);
    border-color: var(--xp-accent-strong);
    background: var(--xp-accent-tint);
  }

  /* detail comments — hidden until comment-create fires */
  .detail-comment.hidden {
    opacity: 0;
    transform: translateY(6px);
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
  }
  .detail-comment {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.3s ease-out, padding 0.3s ease-out;
  }

  /* ── Hero issue detail card ─────────────────────────────── */
  .hero-detail {
    background: var(--xp-surface);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r-sm);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.92) translateY(12px);
    transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hero-detail.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  .detail-body {
    padding: 12px 14px;
    font-family: var(--xp-font-mono); font-size: 10.5px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .detail-head {
    display: flex; align-items: center; gap: 8px;
  }
  .detail-key {
    font-size: 9px; font-weight: 600; color: var(--xp-muted);
    letter-spacing: var(--xp-track-snug);
    border: 1px solid var(--xp-hairline); padding: 1px 5px;
    border-radius: 2px; background: var(--xp-layer);
  }
  .detail-badge {
    margin-left: auto;
    font-size: 8.5px; color: var(--xp-faint);
    letter-spacing: var(--xp-track-meta); font-weight: 500;
  }
  .detail-title {
    margin: 0; font-size: 14px; font-weight: 700;
    letter-spacing: var(--xp-track-tight); line-height: 1.2;
    color: var(--xp-ink);
  }
  .detail-grid {
    display: grid; grid-template-columns: 72px 1fr; gap: 5px 10px;
    font-size: 10px;
  }
  .detail-k {
    font-size: 9px; letter-spacing: var(--xp-track-meta);
    text-transform: uppercase; color: var(--xp-faint); font-weight: 500;
    padding-top: 2px;
  }
  .detail-v {
    display: flex; align-items: center; gap: 5px;
    color: var(--xp-ink);
  }
  .detail-av {
    width: 14px; height: 14px; border-radius: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 6.5px; font-weight: 700; color: var(--xp-canvas);
  }
  .detail-av.agent { border: 1.5px solid var(--xp-accent); }
  .detail-label {
    border: 1px solid var(--xp-hairline); padding: 1px 5px;
    font-size: 9px; letter-spacing: var(--xp-track-snug);
    border-radius: 2px;
  }
  .detail-rule {
    border: 0; border-top: 1px dashed var(--xp-hairline); margin: 0;
  }
  .detail-comment {
    padding: 8px 10px;
    background: var(--xp-canvas);
    border: 1px solid var(--xp-hairline); border-radius: 2px;
    font-size: 10.5px; line-height: 1.5; color: var(--xp-ink);
  }
  .detail-meta {
    font-size: 8.5px; color: var(--xp-muted);
    letter-spacing: var(--xp-track-meta); margin-bottom: 3px;
  }
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    font-family: var(--xp-font-mono); font-weight: 600;
    font-size: 12px; letter-spacing: var(--xp-track-meta);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--xp-r-sm);
    border: 1px solid transparent;
  }
  .btn.primary {
    background: var(--xp-ink); color: var(--xp-canvas);
  }
  .btn.secondary {
    background: var(--xp-surface); color: var(--xp-ink);
    border-color: var(--xp-border);
  }
  /* ── STATS strip ─────────────────────────────────────── */
  .stats {
    background: var(--xp-surface);
    border-block: 1px solid var(--xp-border);
    padding: 18px 0;
  }
  .stats-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 32px;
    display: flex; align-items: baseline; gap: 32px; flex-wrap: wrap;
  }
  .stat {
    display: flex; align-items: baseline; gap: 10px;
    font-family: var(--xp-font-mono);
  }
  .stat .num {
    font-size: 22px; font-weight: 700; letter-spacing: var(--xp-track-tight);
    color: var(--xp-ink);
    font-variant-numeric: tabular-nums;
  }
  .stat .label {
    font-size: 10px; letter-spacing: var(--xp-track-meta);
    text-transform: uppercase; color: var(--xp-muted); font-weight: 500;
  }
  .stats .divider {
    width: 1px; height: 22px; background: var(--xp-border);
    align-self: center;
  }
  .stats .right {
    margin-left: auto;
    display: flex; align-items: center; gap: 12px;
    font-family: var(--xp-font-mono); font-size: 11px;
    color: var(--xp-muted); letter-spacing: var(--xp-track-snug);
  }
  .stats .right .tag {
    background: var(--xp-layer); padding: 2px 6px; color: var(--xp-ink);
    font-size: 10px; letter-spacing: var(--xp-track-meta); font-weight: 500;
  }

  /* ── WHY (three-up) ──────────────────────────────────── */
  .three-up {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 32px;
  }
  .why-card {
    background: var(--xp-surface);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r-sm);
    padding: 28px 24px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .why-card .head {
    display: flex; align-items: baseline; gap: 10px;
  }
  .why-card .num {
    font-family: var(--xp-font-mono); font-size: 10px;
    letter-spacing: var(--xp-track-meta); font-weight: 600;
    color: var(--xp-accent-strong);
  }
  .why-card .tag {
    margin-left: auto; font-family: var(--xp-font-mono);
    font-size: 9.5px; letter-spacing: var(--xp-track-snug);
    color: var(--xp-muted);
  }
  .why-card h3 {
    margin: 0; font-family: var(--xp-font-mono);
    font-size: 22px; font-weight: 700;
    letter-spacing: var(--xp-track-tight); line-height: 1.15;
  }
  .why-card p {
    margin: 0; font-family: var(--xp-font-mono);
    font-size: 12.5px; line-height: 1.6;
    color: var(--xp-muted);
  }
  .why-card p em { color: var(--xp-ink); font-style: normal; }
  .why-card .glyph {
    width: 48px; height: 48px;
    border-radius: var(--xp-r-sm);
    position: relative; overflow: hidden;
  }
  .why-card .glyph svg { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* ── PRODUCT SHOT ────────────────────────────────────── */
  .product {
    background: var(--xp-product-bg, oklch(20% 0.010 60));
    border-block: 1px solid var(--xp-border);
    padding: 96px 0 0;
  }
  :root[data-theme="light"] .product, :root:not([data-theme="dark"]) .product { --xp-product-bg: oklch(20% 0.010 60); }
  :root[data-theme="dark"] .product { --xp-product-bg: var(--xp-surface); }
  .product-head { padding: 0 0 64px; }
  .product-head .sec-eyebrow { color: var(--xp-product-muted, oklch(72% 0.010 55)); }
  .product-head .sec-eyebrow .num { color: var(--xp-accent); }
  .product-head h2 {
    margin: 0; font-family: var(--xp-font-mono);
    font-size: 48px; font-weight: 700; line-height: 0.98;
    letter-spacing: var(--xp-track-tight);
    color: var(--xp-product-ink, oklch(94% 0.006 70)); max-width: 740px;
  }
  :root[data-theme="light"] .product, :root:not([data-theme="dark"]) .product {
    --xp-product-ink: oklch(94% 0.006 70);
    --xp-product-muted: oklch(72% 0.010 55);
  }
  :root[data-theme="dark"] .product {
    --xp-product-ink: var(--xp-ink);
    --xp-product-muted: var(--xp-muted);
  }
  .product-head p {
    margin: 22px 0 0; max-width: 540px;
    font-family: var(--xp-font-mono); font-size: 14px;
    color: var(--xp-product-muted, oklch(72% 0.010 55)); line-height: 1.6;
  }
  .product-shot {
    width: calc(100% - 64px); max-width: 1240px;
    margin: 0 auto;
    background: var(--xp-canvas);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r-md) var(--xp-r-md) 0 0;
    box-shadow: 0 -20px 60px oklch(0% 0 0 / 0.4);
    overflow: hidden;
  }
  .browser-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: var(--xp-layer);
    border-bottom: 1px solid var(--xp-border);
  }
  .browser-bar .dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--xp-faint);
  }
  .browser-bar .url {
    margin-left: 14px; padding: 4px 10px;
    background: var(--xp-surface);
    border: 1px solid var(--xp-hairline); border-radius: 2px;
    font-family: var(--xp-font-mono); font-size: 11px;
    color: var(--xp-muted); letter-spacing: var(--xp-track-snug);
    flex: 1; max-width: 380px;
  }
  .browser-bar .url strong { color: var(--xp-ink); font-weight: 500; }

  /* Product UI mock */
  .ui {
    display: grid; grid-template-columns: 220px 1fr 320px;
    height: 540px;
    font-family: var(--xp-font-mono);
    font-size: 11.5px; color: var(--xp-ink);
    background: var(--xp-canvas);
  }
  .ui-side {
    background: var(--xp-canvas);
    border-right: 1px solid var(--xp-border);
    padding: 14px 10px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .ui-side .ws {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 6px 8px;
    border-bottom: 1px solid var(--xp-hairline);
    margin-bottom: 8px;
  }
  .ui-side .ws .icon {
    width: 22px; height: 22px;
    border-radius: 3px;
    position: relative; overflow: hidden;
  }
  .ui-side .ws .icon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ui-side .ws .name { font-weight: 700; font-size: 13px; letter-spacing: var(--xp-track-tight); }
  .ui-side .ws .caret { margin-left: auto; color: var(--xp-faint); font-size: 10px; }
  .ui-side .row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px; border-radius: 2px;
    font-size: 11px; line-height: 1.4;
  }
  .ui-side .row.active { background: var(--xp-layer); color: var(--xp-ink); }
  .ui-side .row .dot { width: 10px; height: 10px; flex: none; }
  .ui-side .row .ct { margin-left: auto; font-size: 10px; color: var(--xp-muted); }
  .ui-side .label {
    margin-top: 12px; padding: 0 6px 4px;
    font-size: 9.5px; letter-spacing: var(--xp-track-meta);
    text-transform: uppercase; color: var(--xp-faint); font-weight: 500;
  }

  .ui-main {
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .ui-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--xp-hairline);
    font-size: 11px;
  }
  .ui-toolbar .crumb { color: var(--xp-muted); letter-spacing: var(--xp-track-snug); }
  .ui-toolbar .crumb strong { color: var(--xp-ink); font-weight: 700; font-size: 12px; }
  .ui-toolbar .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 2px;
    background: var(--xp-layer);
    font-size: 10px; letter-spacing: var(--xp-track-snug);
  }
  .ui-toolbar .pill .x { color: var(--xp-faint); }
  .ui-toolbar .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
  .ui-toolbar .ico {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--xp-hairline); border-radius: 2px;
    color: var(--xp-muted); font-size: 11px;
  }
  .ui-list {
    flex: 1; overflow: hidden;
  }
  .ui-row {
    display: grid;
    grid-template-columns: 18px 56px 1fr 60px 60px 70px;
    align-items: center; gap: 12px;
    height: 30px; padding: 0 16px;
    border-bottom: 1px solid var(--xp-hairline);
    font-size: 11.5px;
  }
  .ui-row.selected { background: var(--xp-layer); }
  .ui-row .key {
    font-size: 9.5px; letter-spacing: var(--xp-track-snug); font-weight: 600;
    color: var(--xp-muted);
    border: 1px solid var(--xp-hairline);
    padding: 1px 4px; border-radius: 2px;
    background: var(--xp-surface);
    text-align: center;
  }
  .ui-row .title { color: var(--xp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ui-row .meta { font-size: 10px; color: var(--xp-muted); letter-spacing: var(--xp-track-snug); text-align: right; }
  .ui-row .av {
    width: 18px; height: 18px;
    border-radius: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 8.5px; font-weight: 700; color: var(--xp-canvas);
    letter-spacing: 0;
    margin-left: auto;
  }
  .ui-row .pri svg { display: block; }

  .ui-inspector {
    background: var(--xp-surface);
    border-left: 1px solid var(--xp-border);
    padding: 16px 14px;
    display: flex; flex-direction: column; gap: 14px;
    font-size: 11.5px;
  }
  .ui-inspector .head {
    display: flex; align-items: center; gap: 8px;
  }
  .ui-inspector .key {
    font-size: 9.5px; letter-spacing: var(--xp-track-snug); font-weight: 600;
    color: var(--xp-muted);
    border: 1px solid var(--xp-hairline); padding: 1px 4px;
  }
  .ui-inspector .esc {
    margin-left: auto;
    font-size: 9.5px; color: var(--xp-muted);
    border: 1px solid var(--xp-hairline); padding: 0 4px;
    border-radius: 2px;
  }
  .ui-inspector h4 {
    margin: 0; font-size: 16px; font-weight: 700;
    letter-spacing: var(--xp-track-tight); line-height: 1.2;
    color: var(--xp-ink);
  }
  .ui-inspector .grid {
    display: grid; grid-template-columns: 80px 1fr; gap: 6px 12px;
    font-size: 10.5px;
  }
  .ui-inspector .grid .k {
    font-size: 9.5px; letter-spacing: var(--xp-track-meta);
    text-transform: uppercase; color: var(--xp-faint); font-weight: 500;
    padding-top: 2px;
  }
  .ui-inspector .grid .v {
    display: flex; align-items: center; gap: 6px;
    color: var(--xp-ink);
  }
  .ui-inspector .comment {
    padding: 8px 10px;
    background: var(--xp-canvas);
    border: 1px solid var(--xp-hairline); border-radius: 2px;
    font-size: 11px; line-height: 1.5; color: var(--xp-ink);
  }
  .ui-inspector .comment .meta { font-size: 9.5px; color: var(--xp-muted); letter-spacing: var(--xp-track-meta); margin-bottom: 4px; }

  /* dotted accent for product callout chip */
  .product-callout {
    position: absolute;
    background: var(--xp-accent); color: oklch(20% 0.010 60);
    padding: 6px 10px;
    font-family: var(--xp-font-mono); font-size: 10px;
    font-weight: 700; letter-spacing: var(--xp-track-meta);
    border-radius: 2px;
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.2);
  }

  /* ── FEATURES ────────────────────────────────────────── */
  .feat {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
    align-items: center;
  }
  .feat + .feat { margin-top: 96px; }
  .feat.reverse > :first-child { order: 2; }
  .feat-text h3 {
    margin: 18px 0 14px;
    font-family: var(--xp-font-mono); font-size: 34px; font-weight: 700;
    line-height: 1.05; letter-spacing: var(--xp-track-tight);
    color: var(--xp-ink);
  }
  .feat-text p {
    margin: 0; font-family: var(--xp-font-mono);
    font-size: 14px; line-height: 1.65; color: var(--xp-muted);
    max-width: 480px;
  }
  .feat-text p em { color: var(--xp-ink); font-style: normal; }
  .feat-text ul {
    margin: 22px 0 0; padding: 0; list-style: none;
    display: grid; gap: 8px;
    font-family: var(--xp-font-mono); font-size: 12px; color: var(--xp-ink);
  }
  .feat-text ul li {
    display: flex; gap: 12px; align-items: baseline;
  }
  .feat-text ul li .k {
    flex: none;
    font-size: 10px; letter-spacing: var(--xp-track-meta);
    color: var(--xp-accent-strong); font-weight: 600;
    min-width: 80px;
  }
  .feat-art {
    background: var(--xp-surface);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r-sm);
    padding: 28px;
    aspect-ratio: 5 / 4;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
  }

  /* Keyboard art */
  .kbd-cluster {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    width: 100%; max-width: 320px;
  }
  .kbd-key {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; min-width: 60px;
    background: var(--xp-canvas);
    border: 1.5px solid var(--xp-input);
    border-radius: var(--xp-r-md);
    box-shadow: 0 2px 0 var(--xp-border);
    font-family: var(--xp-font-mono); font-weight: 600; font-size: 16px;
    color: var(--xp-ink);
    position: relative;
  }
  .kbd-key.accent {
    background: var(--xp-accent); border-color: var(--xp-accent-strong);
    box-shadow: 0 2px 0 var(--xp-accent-strong);
  }
  .kbd-key .sublabel {
    position: absolute; bottom: 4px; right: 6px;
    font-size: 8px; font-weight: 500; opacity: 0.6;
    letter-spacing: var(--xp-track-snug);
  }
  .kbd-key.cmd { font-size: 14px; }

  /* State pipeline art */
  .pipeline {
    display: flex; align-items: center; gap: 12px;
    width: 100%; max-width: 540px;
  }
  .pipeline .step {
    flex: 1;
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    padding: 18px 10px;
    border: 1px solid var(--xp-hairline);
    background: var(--xp-canvas);
    border-radius: var(--xp-r-sm);
  }
  .pipeline .step.active { border-color: var(--xp-accent-strong); background: var(--xp-accent-tint); }
  .pipeline .step .dot svg { display: block; }
  .pipeline .step .lbl {
    font-family: var(--xp-font-mono); font-size: 10px;
    letter-spacing: var(--xp-track-meta); text-transform: uppercase;
    color: var(--xp-ink); font-weight: 500;
  }
  .pipeline .arrow {
    color: var(--xp-faint); font-size: 14px;
  }

  /* Open-source art (terminal) */
  .terminal {
    width: 100%; max-width: 420px;
    background: var(--xp-terminal-bg, oklch(14% 0.006 60));
    color: var(--xp-terminal-fg, oklch(94% 0.006 70));
    border-radius: var(--xp-r-sm);
    padding: 14px 16px;
    font-family: var(--xp-font-mono); font-size: 11.5px;
    line-height: 1.7;
    border: 1px solid var(--xp-border);
    box-shadow: var(--xp-shadow-2, 0 16px 40px oklch(0% 0 0 / 0.2));
  }
  :root:not([data-theme="dark"]) { --xp-terminal-bg: oklch(14% 0.006 60); --xp-terminal-fg: oklch(94% 0.006 70); }
  :root[data-theme="dark"] { --xp-terminal-bg: var(--xp-layer); --xp-terminal-fg: var(--xp-ink); }
  .terminal .prompt { color: var(--xp-accent); }
  .terminal .cmd { color: inherit; }
  .terminal .out { color: var(--xp-muted); }
  .terminal .ok { color: var(--xp-success); }

  /* ── FOUNDING DIAGRAM full ──────────────────────────── */
  .founding {
    text-align: center;
  }
  .founding h2 {
    margin: 0; font-family: var(--xp-font-mono);
    font-size: 56px; font-weight: 700; line-height: 0.95;
    letter-spacing: var(--xp-track-tight);
    color: var(--xp-ink);
  }
  .founding p {
    margin: 22px auto 0; max-width: 600px;
    font-family: var(--xp-font-mono); font-size: 14px; line-height: 1.65;
    color: var(--xp-muted);
  }
  .founding-diagram {
    margin: 48px auto 0; max-width: 880px; aspect-ratio: 16 / 9;
    background: var(--xp-surface);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r-sm);
    overflow: hidden;
    position: relative;
  }
  .founding-diagram svg { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* ── CTA strip ─────────────────────────────────────── */
  .cta {
    background: var(--xp-surface); color: var(--xp-ink);
    text-align: center;
    padding: 96px 32px;
    border-top: 1px solid var(--xp-border);
    border-bottom: 1px solid var(--xp-border);
  }
  .cta-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    font-family: var(--xp-font-mono); font-size: 10px;
    letter-spacing: var(--xp-track-meta); text-transform: uppercase;
    color: var(--xp-muted);
  }
  .cta h2 {
    margin: 0 0 24px; font-family: var(--xp-font-mono);
    font-size: 72px; font-weight: 700; line-height: 0.92;
    letter-spacing: var(--xp-track-tight);
  }
  .cta .stamp-mini {
    background: var(--xp-accent); color: oklch(20% 0.010 60);
    padding: 2px 8px; font-weight: 700;
    font-size: 10px; letter-spacing: var(--xp-track-meta);
  }
  .cta .btns {
    margin-top: 32px;
    display: inline-flex; gap: 12px;
  }
  .cta .btn.primary {
    background: var(--xp-accent); color: oklch(20% 0.010 60);
  }
  .cta .btn.secondary {
    background: transparent; color: var(--xp-canvas);
    border-color: var(--xp-border);
  }
  .cta-sub {
    max-width: 520px; margin: 0 auto 12px;
    font-family: var(--xp-font-mono); font-size: 13px;
    color: var(--xp-muted); line-height: 1.6;
  }
  .cta-footnote {
    margin-top: 24px; font-family: var(--xp-font-mono);
    font-size: 11px; color: var(--xp-muted);
    letter-spacing: var(--xp-track-meta); text-transform: uppercase;
  }

  /* ── PRICING ──────────────────────────────────────── */
  .pricing-inner {
    max-width: 960px; margin: 0 auto; text-align: center;
  }
  .pricing-heading {
    font-size: clamp(24px, 4vw, 40px); margin-bottom: 8px;
  }
  .pricing-sub {
    font-family: var(--xp-font-mono); font-size: 12px;
    color: var(--xp-muted); letter-spacing: var(--xp-track-meta);
    margin-bottom: 40px;
  }
  .pricing-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px; text-align: left;
  }
  .pricing-card {
    border: 1px solid var(--xp-border); border-radius: 12px;
    padding: 28px 24px; background: var(--xp-surface);
  }
  .pricing-card.featured {
    border: 2px solid var(--xp-accent-strong); position: relative;
  }
  .pricing-badge {
    position: absolute; top: -10px; left: 24px;
    background: var(--xp-accent-strong); color: oklch(20% 0.010 60);
    font-family: var(--xp-font-mono); font-size: 9px; font-weight: 700;
    padding: 2px 10px; border-radius: 4px; letter-spacing: var(--xp-track-meta);
  }
  .pricing-tier {
    font-family: var(--xp-font-mono); font-size: 10px;
    letter-spacing: var(--xp-track-meta); color: var(--xp-muted);
    font-weight: 600; margin-bottom: 8px;
  }
  .pricing-tier.accent { color: var(--xp-accent-strong); }
  .pricing-price {
    font-size: 36px; font-weight: 800;
    font-family: var(--xp-font-mono); line-height: 1;
    color: var(--xp-ink);
  }
  .pricing-period {
    font-family: var(--xp-font-mono); font-size: 11px;
    color: var(--xp-muted); margin-bottom: 20px;
  }
  .pricing-features {
    list-style: none; padding: 0; margin: 0;
    font-family: var(--xp-font-mono); font-size: 11px;
    line-height: 2; color: var(--xp-ink);
  }
  .pricing-cta {
    display: block; text-align: center; margin-top: 20px;
    padding: 10px; border: 1px solid var(--xp-border); border-radius: 8px;
    font-family: var(--xp-font-mono); font-size: 11px; font-weight: 600;
    color: var(--xp-ink); text-decoration: none;
    letter-spacing: var(--xp-track-meta);
  }
  .pricing-cta.primary {
    background: var(--xp-accent-strong); border-color: var(--xp-accent-strong);
    color: oklch(20% 0.010 60);
  }
  .pricing-footnote {
    text-align: center; font-family: var(--xp-font-mono);
    font-size: 10px; color: var(--xp-muted);
    letter-spacing: var(--xp-track-meta); margin-top: 24px;
  }

  /* ── FOOTER ───────────────────────────────────────── */
  .footer {
    padding: 48px 0;
    font-family: var(--xp-font-mono);
  }
  .footer-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 32px;
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px;
  }
  .footer .col h5 {
    margin: 0 0 12px; font-size: 9.5px; font-weight: 600;
    letter-spacing: var(--xp-track-meta); text-transform: uppercase;
    color: var(--xp-muted);
  }
  .footer .col ul {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 6px;
  }
  .footer .col a {
    color: var(--xp-ink); text-decoration: none;
    font-size: 12px; letter-spacing: var(--xp-track-snug);
  }
  .footer .col a:hover { color: var(--xp-accent-strong); }
  .footer .brand-col {
    display: flex; flex-direction: column; gap: 12px;
  }
  .footer .brand-col .mark {
    display: inline-flex; align-items: center; gap: 10px;
  }
  .footer .brand-col .mark svg { width: 24px; height: 24px; }
  .footer .brand-col .mark .word {
    font-size: 16px; font-weight: 700; letter-spacing: var(--xp-track-tight);
  }
  .footer .brand-col .tag {
    font-size: 10px; letter-spacing: var(--xp-track-meta);
    text-transform: uppercase; color: var(--xp-accent-strong); font-weight: 500;
  }
  .footer .hl { color: var(--xp-accent-strong); }
  .footer .brand-col p {
    margin: 0; font-size: 11px; color: var(--xp-muted); line-height: 1.55;
    max-width: 240px;
  }
  .footer .bottom {
    max-width: 1240px; margin: 32px auto 0; padding: 22px 32px 0;
    border-top: 1px solid var(--xp-border);
    display: flex; align-items: baseline; gap: 18px;
    font-size: 10px; color: var(--xp-muted); letter-spacing: var(--xp-track-snug);
  }
  .footer .bottom .right { margin-left: auto; display: flex; gap: 18px; }

/* ── Scroll reveal ─────────────────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
  .reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.12s; }
  .reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.24s; }
  .reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.36s; }

/* ── Theme toggle ──────────────────────────────────────────── */
  .theme-toggle {
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--xp-layer);
    border: 1px solid var(--xp-border);
    border-radius: var(--xp-r-sm);
    padding: 2px;
  }
  .theme-toggle button {
    all: unset;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 2px;
    font-size: 13px;
    cursor: pointer;
    color: var(--xp-muted);
    transition: background 0.15s, color 0.15s;
  }
  .theme-toggle button:hover { color: var(--xp-ink); }
  .theme-toggle button.active {
    background: var(--xp-surface);
    color: var(--xp-ink);
    box-shadow: 0 1px 2px oklch(0% 0 0 / 0.08);
  }


/* ── MOBILE / RESPONSIVE ──────────────────────────────────── */
@media (max-width: 900px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }
  .hero-aside {
    position: relative;
    top: auto; right: auto;
    width: 100%;
    flex-direction: row;
    gap: 12px;
  }
  .hero-aside > * { flex: 1; min-width: 0; }
  .hero-headline {
    font-size: 36px !important;
  }
  .xpntl-anim {
    font-size: 22px !important;
  }
  .t-prompt-mark {
    width: 20px !important; height: 20px !important;
  }
  .hero-sub { font-size: 12px !important; }
  .hero-bullets li { font-size: 11px !important; }
  .t-tool-bar { font-size: 10px !important; }
  .hero-terminal-body { padding: 16px 16px 20px; }
  .kbd { display: none; }
  .nav .links { display: none; }
  .nav .meta { display: none; }
  .three-up { grid-template-columns: 1fr; }
  .feat { grid-template-columns: 1fr !important; gap: 32px; }
  .feat.reverse > :first-child { order: 0; }
  .ui { grid-template-columns: 1fr; height: auto; }
  .ui-side { display: none; }
  .ui-inspector { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .cta h2 { font-size: 36px; }
  .founding h2 { font-size: 32px; }
  .product-head h2 { font-size: 28px; }
  .hero-scroll-hint { display: none; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .hero-aside { flex-direction: column; }
  .hero-headline { font-size: 28px !important; }
  .xpntl-anim { font-size: 18px !important; }
  .section { padding: 48px 0; }
  .footer-inner { grid-template-columns: 1fr; }
  .stats-inner { flex-direction: column; gap: 12px; }
  .stats .divider { display: none; }
}

/* ── In Progress pulse ─────────────────────────────────────── */
.pulse-progress {
  animation: progress-pulse 2s ease-in-out infinite;
}
@keyframes progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Misc · keyframes used by the terminal cursor ─────────── */
@keyframes blink { 50% { opacity: 0; } }