/* ==========================================================================
   BEVEL — design system
   design tokens for bevel.
   ========================================================================== */

:root {
  /* surfaces — pivoted cool to match Bevel /app (was warm cream) */
  --bg:               #FAFAFC;
  --surface:          #FFFFFF;
  --surface-2:        #F4F4F7;
  --surface-darker:   #EBEBEF;
  --elevated:         #FFFFFF;
  --paper-grain:      #EFEFF3;

  /* borders */
  --bd-pill:          #E2E2E7;
  --bd-card:          #E2E2E7;
  --bd-soft:          rgba(28,28,32,.08);
  --bd-mid:           rgba(28,28,32,.14);
  --bd-strong:        rgba(28,28,32,.22);

  /* ink — cool graphite, matches /app's #1a1a1f */
  --ink:              #1A1A1F;
  --ink-92:           rgba(26,26,31,.92);
  --ink-85:           rgba(26,26,31,.85);
  --ink-72:           rgba(26,26,31,.72);
  --ink-58:           rgba(26,26,31,.58);
  --ink-45:           rgba(26,26,31,.45);
  --ink-30:           rgba(26,26,31,.30);
  --ink-18:           rgba(26,26,31,.18);
  --ink-10:           rgba(26,26,31,.10);

  /* accents — pulled directly from /app dashboard.tsx */
  --clay:             #4A6EE0;     /* primary · Bevel blue (was clay orange) */
  --clay-soft:        #DCE4F8;
  --clay-bg:          #EEF2FC;
  --ship:             #1A9A5A;     /* success · matches app green */
  --ship-soft:        #C7E8D6;
  --ship-bg:          #EAF7F0;
  --watch:            #D97706;     /* warning · matches app orange */
  --watch-soft:       #FBDFB0;
  --watch-bg:         #FDF1DD;
  --skip:             #6B6B76;     /* muted · matches app textSecondary */
  --skip-soft:        #D8D8DE;
  --override:         #7C3F87;
  --override-soft:    #E2D2E5;

  /* type — Vercel Geist Variable across the board */
  --font-display:     "Geist", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-sans:        "Geist", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono:        "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* radii — small scale */
  --r-xs:  3px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  8px;
  --r-xl:  12px;
  --r-2xl: 16px;
  --r-3xl: 22px;

  /* shadows · skeuomorphic embossed level (skeuomorphic embossed level) */
  /* the signature 5-layer "physical sticker" recipe — outer hairline ring +
     top white inset + bottom dark inset + soft drop. Used on every elevated
     surface (buttons, hero packet, app frame, pricing, closing). */
  --sh-physical:
    0 0 0 1px rgba(64,64,64,.12),
    inset 0 2px 0 0 rgba(255,255,255,.24),
    inset 0 -0.5px 2px 0 rgba(0,0,0,.18),
    0 2px 8px rgba(0,0,0,.03),
    0 3px 4px rgba(0,0,0,.06);
  --sh-physical-strong:
    0 0 0 1px rgba(28,28,32,.08),
    inset 0 1px 0 0 rgba(255,255,255,.9),
    0 1px 1px rgba(28,28,32,.04),
    0 8px 18px rgba(28,28,32,.05),
    0 24px 48px rgba(28,28,32,.07);
  --sh-tile-soft:
    0 0 0 1px rgba(226,226,231,1),
    inset 0 2px 0 0 #FFFFFF,
    0 1px 1px rgba(0,0,0,.06);
  --sh-btn-light:
    0 1px 1px rgba(0,0,0,.04),
    inset 0 0 .357px 1.5px rgba(255,255,255,.7),
    inset 0 2px 0 0 #FFFFFF,
    0 0 0 1px rgba(64,64,64,.10);
  --sh-btn-light-hover:
    0 1px 1px rgba(0,0,0,.06),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(64,64,64,.14);
  --sh-btn-dark:
    0 0 0 1px rgba(50,40,30,.16),
    inset 0 2px 0 0 rgba(255,255,255,.24),
    inset 0 -0.5px 2px 0 rgba(0,0,0,.30),
    0 2px 8px rgba(0,0,0,.04),
    0 3px 4px rgba(0,0,0,.16);
  --sh-pill:
    0 1px 1px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.23);
  --sh-card:
    0 0 0 1px rgba(28,28,32,.06),
    0 0 14px rgba(28,28,32,.03),
    0 8px 22px rgba(28,28,32,.05);
  --sh-card-elev:
    0 0 0 1px rgba(28,28,32,.07),
    inset 0 1px 0 0 rgba(255,255,255,.92),
    0 1px 1px rgba(28,28,32,.05),
    0 12px 28px rgba(28,28,32,.06),
    0 28px 56px rgba(28,28,32,.07);
  --sh-ring-soft:
    0 0 0 4px rgba(232,232,236,.4);
  --sh-glass:
    inset 0 -1px 0 0 rgba(0,0,0,.12),
    inset 0 -1px 2px rgba(0,0,0,.10),
    inset 0 1px 1px rgba(255,255,255,.55);

  /* the signature outer-halo ring — wraps a panel with a soft 5px brand-cream
     halo. Used on premium hero elements. */
  --sh-halo-ring:
    0 0 0 5px rgba(232,232,236,.32),
    0 0 0 1px rgba(28,28,32,.06),
    inset 0 1px 0 0 rgba(255,255,255,.92),
    0 1px 1px rgba(28,28,32,.04),
    0 16px 32px rgba(28,28,32,.06);

  /* neumorphic icon container — inset light from one side, dark from other.
     For pillar icon tiles. */
  --sh-neumorphic:
    inset 4px 4px 6px rgba(28,28,32,.08),
    inset -4px -4px 6px rgba(255,255,255,.92);

  /* alt neumorphic — pressed / active state */
  --sh-neumorphic-pressed:
    inset 2px 2px 4px rgba(28,28,32,.10),
    inset -2px -2px 4px rgba(255,255,255,.85);

  /* "raised pill" shadow — same skeuomorphic recipe the .chip uses, scaled
     up for cards. Applied to mock cards (.trio-rec, .m-card, .m-rec, .m-prompt)
     so they feel like elevated tiles floating on the sky bg. */
  --sh-raised-card:
    0 0 0 0.7px rgba(28,28,32,.07),
    inset 0 1px 0 0 rgba(255,255,255,.92),
    inset 0 -1px 2px 0 rgba(28,28,32,.08),
    0 1px 2px rgba(28,28,32,.05),
    0 4px 10px rgba(28,28,32,.06),
    0 8px 22px rgba(28,28,32,.05);

  /* orch-panel recipe — sub-pixel inner
     ring + sub-pixel outer ring + 4-stage drop. The off-pixel values
     (.714px, 14.284px, 7.142px) are the signature designer-detail. */
  --sh-orch:
    inset 0 0 0 0.714px rgba(255,255,255,.92),
    0 0 0 0.714px rgba(28,28,32,.08),
    0 0 14.284px rgba(28,28,32,.04),
    0 16.427px 19.998px rgba(28,28,32,.025),
    0 7.142px 14.284px rgba(28,28,32,.04),
    0 2.143px 7.856px rgba(28,28,32,.05);

  /* motion */
  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --d-fast:   .14s;
  --d-mid:    .26s;
  --d-slow:   .56s;
}

/* ==========================================================================
   reset + base
   ========================================================================== */

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-72);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: 0.005em;
  -webkit-font-feature-settings: "ss01","cv11","dlig";
  font-feature-settings: "ss01","cv11","dlig";
  font-variant-numeric: lining-nums tabular-nums;
  background-image:
    radial-gradient(circle at 10% 0%, rgba(74,110,224,.025) 0%, transparent 35%),
    radial-gradient(circle at 90% 100%, rgba(26,154,90,.025) 0%, transparent 40%);
  min-height: 100dvh;
}

/* ==========================================================================
   sky — WebGL shader (Three.js + fBM noise) painted onto a canvas inserted
   into each host element by app.js (.hero-sky, .dept-mock, .closing-card,
   .site-footer). Each section gets its own time offset so no two crops match.
   The CSS layered-gradient fallback below shows when WebGL is unavailable
   or while Three.js is still loading — keeps the page looking like a sky
   with cloud highlights instead of flat blue.
   ========================================================================== */

/* CSS-only sky fallback shared across all four hosts. Layered radial
   gradients in white at low alpha simulate soft cirrus highlights on the
   blue base. The opaque WebGL canvas (alpha:false) paints OVER this when
   the shader is running, so this is invisible in the happy path. */
.hero-sky,
.dept-mock,
.closing-card,
.site-footer {
  background-image:
    radial-gradient(ellipse 50% 30% at 22% 18%, rgba(255,255,255,.55) 0%, transparent 65%),
    radial-gradient(ellipse 45% 28% at 70% 26%, rgba(255,255,255,.45) 0%, transparent 65%),
    radial-gradient(ellipse 60% 32% at 48% 60%, rgba(255,255,255,.30) 0%, transparent 65%),
    radial-gradient(ellipse 38% 24% at 88% 70%, rgba(255,255,255,.28) 0%, transparent 65%);
}

/* ─── hero sky (canvas inserted by JS; fade-to-white handled by shader) ── */
.hero-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-color: #79b8f3; /* fallback before WebGL boots / on failure */
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6,p { margin: 0; }
code { font-family: var(--font-mono); font-size: .92em; }

::selection { background: var(--clay); color: #FFFFFF; }

/* ==========================================================================
   typography helpers 
   ========================================================================== */

.title-strong  { color: var(--ink-92); }
.title-soft    { color: var(--ink-45); }

.eyebrow--mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  background: rgba(250,250,252,.8);
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(28,28,32,.06),
    inset 0 1px 0 0 rgba(255,255,255,.95),
    0 1px 1px rgba(28,28,32,.03);
}

.dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--ink-30);
  position: relative;
}
.dot--clay  { background: var(--clay);  box-shadow: 0 0 0 3px rgba(74,110,224,.12), 0 0 6px rgba(74,110,224,.4); }
.dot--ship  { background: var(--ship);  box-shadow: 0 0 0 3px rgba(26,154,90,.10),  0 0 6px rgba(26,154,90,.4); }
.dot--watch { background: var(--watch); box-shadow: 0 0 0 3px rgba(217,119,6,.12),0 0 6px rgba(217,119,6,.4); }
.dot--soft  { background: var(--ink-30); }
.dot--clay::before {
  content:""; position:absolute; inset:-3px;
  border-radius:999px;
  background: var(--clay);
  opacity:.18;
  animation: pulse 2.4s var(--ease-out) infinite;
}

@keyframes pulse {
  0%   { transform: scale(.9); opacity:.35; }
  60%  { transform: scale(2.2); opacity:0; }
  100% { transform: scale(2.4); opacity:0; }
}

.arrow-mono { font-family: var(--font-mono); font-weight: 500; }
.rail-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-72);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.rail-mono:hover { color: var(--clay); }

/* ==========================================================================
   chips (decision stage markers — bevel-original)
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  line-height: 1;
  border: 1px solid transparent;
  height: 20px;
  box-shadow:
    0 0 0 0.7px rgba(0,0,0,.06),
    inset 0 1px 0 0 rgba(255,255,255,.7),
    inset 0 -0.5px 1.5px 0 rgba(0,0,0,.1),
    0 1px 2px rgba(0,0,0,.06),
    0 2px 4px rgba(0,0,0,.04);
}
.chip-lg {
  font-size: 12px;
  padding: 6px 10px;
  height: 26px;
}
.chip-ship {
  background: var(--ship-bg);
  color: var(--ship);
  border-color: rgba(26,154,90,.18);
}
.chip-skip {
  background: var(--skip-soft);
  color: var(--skip);
  border-color: rgba(107,97,87,.22);
}
.chip-watch {
  background: var(--watch-bg);
  color: var(--watch);
  border-color: rgba(217,119,6,.22);
}
.chip-override {
  background: var(--override-soft);
  color: var(--override);
  border-color: rgba(124,63,135,.22);
}
/* severity chips matching real Bevel app palette */
.chip-high {
  background: rgba(217,68,68,.08);
  color: #B53B3B;
  border-color: rgba(217,68,68,.22);
}
.chip-med {
  background: rgba(217,119,6,.08);
  color: #B25A05;
  border-color: rgba(217,119,6,.22);
}
.chip-low {
  background: rgba(26,154,90,.08);
  color: #178452;
  border-color: rgba(26,154,90,.22);
}

/* ==========================================================================
   buttons — 
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 10px 14px;
  height: 38px;
  border-radius: var(--r-lg);
  position: relative;
  transition: background-color .14s var(--ease-out), box-shadow .14s var(--ease-out), transform .14s var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.btn-md { height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 14.5px; gap: 10px; }
.btn-block { display: flex; width: 100%; }

/* Bevel-signature buttons — quintic ease, 10px corners, blue-cast ambient,
   active scale-down for the tactile press. Aligned with /app palette. */
.btn-light {
  background: var(--surface);
  color: var(--ink-92);
  border: 0;
  border-radius: 10px;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.04),
    0 1px 1px rgba(28,40,80,.04);
  transition:
    background-color .18s cubic-bezier(.22,1,.36,1),
    box-shadow .18s cubic-bezier(.22,1,.36,1),
    transform .18s cubic-bezier(.22,1,.36,1);
}
.btn-light:hover {
  background: #FAFAFC;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.16),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.05),
    0 2px 4px rgba(28,40,80,.06);
}
.btn-light:active { transform: translateY(.5px) scale(.985); }

.btn-dark {
  color: #F8F8FA;
  border: 0;
  border-radius: 10px;
  background: #1A1A1F;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.14),
    inset 0 1px 0 0 rgba(255,255,255,.16),
    inset 0 -.5px 1.5px 0 rgba(0,0,0,.22),
    0 1px 1px rgba(28,40,80,.06),
    0 2px 6px rgba(28,40,80,.10);
  transition:
    background-color .18s cubic-bezier(.22,1,.36,1),
    box-shadow .18s cubic-bezier(.22,1,.36,1),
    transform .18s cubic-bezier(.22,1,.36,1);
}
.btn-dark:hover {
  background: #000000;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18),
    inset 0 1px 0 0 rgba(255,255,255,.20),
    inset 0 -.5px 1.5px 0 rgba(0,0,0,.26),
    0 1px 1px rgba(28,40,80,.08),
    0 6px 14px rgba(28,40,80,.16);
}
.btn-dark:active { transform: translateY(.5px) scale(.985); }

/* Accent — Bevel blue (was implicit; now first-class) */
.btn-accent {
  color: #FFFFFF;
  border: 0;
  border-radius: 10px;
  background: var(--clay);
  box-shadow:
    0 0 0 1px rgba(48,80,196,.30),
    inset 0 1px 0 0 rgba(255,255,255,.28),
    inset 0 -.5px 1.5px 0 rgba(0,0,0,.14),
    0 1px 1px rgba(74,110,224,.16),
    0 3px 8px rgba(74,110,224,.20);
  transition:
    background-color .18s cubic-bezier(.22,1,.36,1),
    box-shadow .18s cubic-bezier(.22,1,.36,1),
    transform .18s cubic-bezier(.22,1,.36,1);
}
.btn-accent:hover {
  background: #3A5CC4;
  box-shadow:
    0 0 0 1px rgba(48,80,196,.40),
    inset 0 1px 0 0 rgba(255,255,255,.34),
    inset 0 -.5px 1.5px 0 rgba(0,0,0,.18),
    0 1px 1px rgba(74,110,224,.22),
    0 6px 14px rgba(74,110,224,.30);
}
.btn-accent:active { transform: translateY(.5px) scale(.985); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink-85);
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.04),
    0 1px 1px rgba(28,40,80,.04);
  transition:
    background-color .18s cubic-bezier(.22,1,.36,1),
    box-shadow .18s cubic-bezier(.22,1,.36,1),
    transform .18s cubic-bezier(.22,1,.36,1);
}
.btn-ghost:hover {
  background: #FAFAFC;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.16),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.05),
    0 2px 4px rgba(28,40,80,.06);
}
.btn-ghost:active { transform: translateY(.5px) scale(.985); }

.btn-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1;
}

.copy-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-58);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: color .14s, background-color .14s;
}
.copy-btn:hover { color: var(--ink-92); background: var(--surface-darker); }

/* ==========================================================================
   header (sticky pill nav · parallel to .site-header)
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 14px 24px;
  transition: backdrop-filter .2s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.site-header.is-scrolled {
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  background: rgba(250,250,252,.78);
  border-bottom: 0.7px solid var(--bd-soft);
}
.header-inner {
  width: 100%;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-92);
}
.logo-mark { color: var(--clay); }
.logo-word {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1;
}
.logo-word--big { font-size: 30px; }

/* Glass nav pill — uses the glass-pill recipe (light variant
   for warm-cream surface). Backdrop blur + saturate, sub-pixel inset
   highlight, dark inset bottom for "pressed-into-glass" feel. */
.header-nav {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.28) 100%);
  border: 0.7px solid rgba(28,28,32,.06);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(1.19);
  backdrop-filter: blur(16px) saturate(1.19);
  box-shadow:
    inset 0 -1px 0 0 rgba(28,28,32,.08),
    inset 0 -1px 2px 0 rgba(28,28,32,.06),
    inset 0 1px 1px 0 rgba(255,255,255,.65);
}
.header-nav a {
  font-size: 13.5px;
  font-weight: 460;
  color: var(--ink-72);
  padding: 6px 6px;
  letter-spacing: -.005em;
  transition: color .14s var(--ease-out), font-weight .14s var(--ease-out);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.header-nav a:hover { color: var(--ink-92); font-weight: 530; }
/* No-shift bold-on-hover trick — pre-allocates space for the bolder weight
   via an invisible :after pseudo with the full text. No-shift bold-on-hover trick. */
.header-nav a::after {
  content: attr(data-text);
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  height: 0;
  font-weight: 530;
  overflow: hidden;
}
.nav-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-45);
  padding-right: 4px;
  margin-right: 2px;
}
.nav-sep {
  color: var(--ink-30);
  font-size: 12px;
  font-weight: 300;
  user-select: none;
}
.nav-pricing, .nav-changelog { padding-left: 12px; padding-right: 6px; }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 880px) {
  .header-nav { display: none; }
  .header-cta .btn-ghost { display: none; }
}

/* ==========================================================================
   hero
   ========================================================================== */

.hero {
  position: relative;
  padding: 156px 24px 120px;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(28,28,32,.07) 1px, transparent 1px),
    radial-gradient(rgba(28,28,32,.04) 1px, transparent 1px);
  background-size: 28px 28px, 14px 14px;
  background-position: 0 0, 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  z-index: 0;
}
.hero::before {
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(74,110,224,.05) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(26,154,90,.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.signal-field, .signal-lines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.signal-lines { width: 100%; height: 100%; }
.signal-lines path { fill: none; stroke: var(--ink-18); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0; }
.hero.is-loaded .signal-lines path {
  opacity: 1;
  animation: dash 1.4s var(--ease-out) forwards;
}
@keyframes dash {
  from { stroke-dashoffset: 200; opacity: 0; }
  to   { stroke-dashoffset: 0;   opacity: 1; }
}

.signal-frag {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(calc(-50% + var(--x)), calc(0px + var(--y) + var(--py, 0px)));
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 12px;
  background: rgba(250,250,252,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--r-md);
  box-shadow:
    0 0 0 1px rgba(28,28,32,.06),
    inset 0 1px 0 0 rgba(255,255,255,.96),
    inset 0 -0.5px 1px 0 rgba(0,0,0,.05),
    0 1px 1px rgba(28,28,32,.04),
    0 4px 10px rgba(28,28,32,.04);
  font-size: 11px;
  line-height: 1.3;
  width: 220px;
  opacity: 0;
  animation: fragRise 1.1s var(--ease-out) forwards var(--d, 0s);
  pointer-events: none;
}
.frag-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.frag-val {
  color: var(--ink-72);
  font-size: 11.5px;
  font-weight: 450;
}
@keyframes fragRise {
  from { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(0px + var(--y) + 16px)); filter: blur(4px); }
  to   { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(0px + var(--y))); filter: blur(0); }
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(25px, 3.1vw, 37px);
  line-height: 1.04;
  letter-spacing: -0.038em;
  margin-top: 0;
  /* Was 36px — too much air between the headline and the lede beneath
     it. 14px sits the supporting line right under the title without
     making the block feel cramped. */
  margin-bottom: 14px;
  max-width: 920px;
  -webkit-font-smoothing: antialiased;
}
.hero-title .title-strong, .hero-title .title-soft { display: block; }
/* hero title sits on the saturated sky shader — invert to white. soft drop
   shadow keeps it crisp where a brighter cloud streak passes behind it. */
.hero-title .title-strong {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(20, 60, 110, .18), 0 2px 8px rgba(20, 60, 110, .10);
}
.hero-title .title-soft {
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 2px rgba(20, 60, 110, .14);
}

.hero-sub {
  max-width: 600px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-72);
  margin-bottom: 32px;
}

.hero-cta {
  display: inline-flex;
  gap: 12px;
  margin-bottom: 64px;
}

/* hero URL form — mirrors the actual Bevel onboarding entry */
.hero-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 0 0 18px;
  align-items: stretch;
}
.hero-input {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  background: var(--elevated);
  border: 1px solid var(--bd-mid);
  border-radius: var(--r-lg);
  padding: 0 4px 0 14px;
  height: 44px;
  box-shadow: var(--sh-btn-light);
  transition: border-color .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.hero-input:focus-within {
  border-color: rgba(74,110,224,.6);
  box-shadow: 0 0 0 3px rgba(74,110,224,.12), var(--sh-btn-light);
}
.input-prefix {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-45);
  margin-right: 6px;
}
.hero-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-92);
  letter-spacing: .01em;
}
.hero-input input::placeholder { color: var(--ink-30); }

.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-45);
  margin-bottom: 56px;
}
.hero-meta-quiet {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--ink-45);
  margin: 0 0 56px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-meta-sep { color: var(--ink-18); }

/* Hero focal card — one rec, mirrored from the real /app RecCard. */
.hero-card {
  width: 100%;
  max-width: 660px;
  text-align: left;
  background: var(--elevated);
  border: 0.7px solid rgba(28,28,32,.07);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-halo-ring);
  overflow: hidden;
  font-family: var(--font-sans);
}
.hc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(180deg, #FAFAFC 0%, #F2F2F5 100%);
  border-bottom: 0.7px solid rgba(28,28,32,.07);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.85);
}
.hc-stamp { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-72); }
.hc-stamp svg { color: var(--clay); }
.hc-meta { color: var(--ink-45); }
.hc-body { padding: 18px 22px 20px; }
.hc-row-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hc-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-92);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
}
.hc-evidence {
  font-size: 14px;
  color: var(--ink-58);
  line-height: 1.55;
  margin: 0 0 14px;
}
.hc-evidence strong { color: var(--ship); font-weight: 600; }
.hc-prompt {
  background: var(--surface-2);
  border: 1px solid rgba(28,28,32,.05);
  border-radius: var(--r-md);
  overflow: hidden;
}
.hc-prompt-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-58);
  letter-spacing: .03em;
  border-bottom: 1px dashed rgba(28,28,32,.05);
}
.hc-prompt-icon { color: var(--clay); font-size: 12px; }
.hc-prompt-meta { margin-left: auto; color: var(--ink-45); font-size: 10px; }
.hc-prompt-body {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-72);
  margin: 0;
  padding: 10px 12px 12px;
  white-space: pre-wrap;
}

/* Hero DEMO — agent scans → ranks → recs land.
   Total runtime ~3.4s, then idles. Respects reduced-motion. */
.hero-demo {
  width: 100%;
  max-width: 720px;
  text-align: left;
  font-family: var(--font-sans);
  position: relative;
}

/* The scan-trace block above the trio. Runs once, fades back when done. */
.demo-trace {
  list-style: none;
  margin: 0 0 14px;
  padding: 14px 16px 12px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.06),
    inset 0 1px 0 0 rgba(255,255,255,.85),
    0 1px 1px rgba(28,40,80,.04);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .015em;
  display: flex; flex-direction: column; gap: 5px;
  /* fade the whole trace to recede once the trio appears */
  animation: trace-recede .5s cubic-bezier(.22,1,.36,1) forwards 3.0s;
}
.t-line {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink-58);
  opacity: 0;
  animation: line-in .35s cubic-bezier(.22,1,.36,1) forwards;
}
.t-line--rank { color: var(--ink-92); font-weight: 500; }
.t-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--clay);
  /* pulse while the line is "running" */
  box-shadow: 0 0 0 2px rgba(74,110,224,.18), 0 0 6px rgba(74,110,224,.4);
  animation: dot-pulse 1.2s cubic-bezier(.4,0,.6,1) infinite;
}
/* Stagger each line. Once a later line starts, the previous dot resolves to a
   muted "complete" state so attention rolls down the trace. */
.t-line:nth-child(1)        { animation-delay: .15s; }
.t-line:nth-child(2)        { animation-delay: .80s; }
.t-line:nth-child(3)        { animation-delay: 1.45s; }
.t-line:nth-child(4)        { animation-delay: 2.10s; }
.t-line:nth-child(1) .t-dot { animation: dot-pulse 1.2s cubic-bezier(.4,0,.6,1) infinite, dot-resolve .4s cubic-bezier(.22,1,.36,1) forwards .80s; }
.t-line:nth-child(2) .t-dot { animation: dot-pulse 1.2s cubic-bezier(.4,0,.6,1) infinite, dot-resolve .4s cubic-bezier(.22,1,.36,1) forwards 1.45s; }
.t-line:nth-child(3) .t-dot { animation: dot-pulse 1.2s cubic-bezier(.4,0,.6,1) infinite, dot-resolve .4s cubic-bezier(.22,1,.36,1) forwards 2.10s; }
.t-line:nth-child(4) .t-dot { animation: dot-pulse 1.2s cubic-bezier(.4,0,.6,1) infinite, dot-rank .5s cubic-bezier(.34,1.56,.64,1) forwards 2.50s; }

@keyframes line-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(74,110,224,.18), 0 0 6px rgba(74,110,224,.4); }
  50%      { box-shadow: 0 0 0 3px rgba(74,110,224,.10), 0 0 8px rgba(74,110,224,.6); }
}
@keyframes dot-resolve {
  to {
    background: var(--ship);
    box-shadow: 0 0 0 2px rgba(26,154,90,.15);
    transform: scale(0.85);
  }
}
@keyframes dot-rank {
  to {
    background: var(--ship);
    box-shadow: 0 0 0 3px rgba(26,154,90,.18), 0 0 8px rgba(26,154,90,.4);
    transform: scale(1.1);
  }
}
@keyframes trace-recede {
  to { opacity: .55; transform: translateY(-2px); }
}

/* Hero TRIO — three compact recs, "three things to ship" made literal.
   Each lands on its own delay so the page reads as the artifact arriving. */
/* Carousel clip — shows only 3 items; the 4th sits below, ready to roll up.
   Inner .hero-trio is the moving stream; JS animates its translateY. */
.hero-trio-clip {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  /* room for exactly 3 trio-rec items (each ~74px tall + 8px margin between) */
  /* the 4th item lives below this clip and slides in on rotation */
  overflow: hidden;
  /* a soft horizon at the bottom of the clip so the 4th item peeks in
     gradually rather than popping at a hard edge */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
}
.hero-trio {
  width: 100%;
  max-width: 720px;
  text-align: left;
  font-family: var(--font-sans);
  /* JS toggles transform/transition on this for the slide-up rotation */
  will-change: transform;
}
.trio-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 4px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-45);
  opacity: 0;
  animation: trio-fade .5s cubic-bezier(.22,1,.36,1) forwards 2.85s;
}
.trio-stamp { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-72); }
.trio-stamp svg { color: var(--clay); }
.trio-meta { color: var(--ink-45); }
.trio-rec {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 8px;
  column-gap: 14px;
  padding: 13px 18px;
  background: var(--elevated);
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: var(--sh-raised-card);
  opacity: 0;
  transform: translateY(8px);
  animation: trio-rise .6s cubic-bezier(.22,1,.36,1) forwards;
  transition: box-shadow .2s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1);
}
/* Inside the carousel, JS owns animation. Don't run the per-item entrance. */
[data-rec-carousel] .trio-rec {
  opacity: 1;
  transform: none;
  animation: none;
}
.trio-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.m-rec-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.trio-rec:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 1px 0 0 rgba(255,255,255,.95),
    inset 0 -1px 2px 0 rgba(28,28,32,.08),
    0 2px 4px rgba(28,28,32,.06),
    0 6px 14px rgba(28,40,80,.10),
    0 14px 30px rgba(28,40,80,.06);
}
.trio-rec--1 { animation-delay: 2.95s; }
.trio-rec--2 { animation-delay: 3.10s; }
.trio-rec--3 { animation-delay: 3.25s; }
.trio-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-92);
  line-height: 1.4;
  letter-spacing: -0.005em;
  min-width: 0;
}
@keyframes trio-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes trio-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .trio-head, .trio-rec { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .hero-trio { max-width: 100%; }
  .trio-rec { grid-template-columns: 1fr; row-gap: 4px; padding: 11px 14px; }
  .trio-title { font-size: 13.5px; }
}

@media (max-width: 720px) {
  .hero-card { max-width: 100%; }
  .hc-title { font-size: 15px; }
  .hc-prompt-body { font-size: 10.5px; }
}
.meta-dot {
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--ink-30);
}

/* severity-tinted accents on hero packet rows */
.packet-row--high {
  border-color: rgba(217,68,68,.20);
  background: linear-gradient(180deg, rgba(217,68,68,.025) 0%, var(--elevated) 60%);
}
.packet-row--high .row-num   { color: #B53B3B; }
.packet-row--high .action-arrow { color: #B53B3B; }
.packet-row--med  .action-arrow { color: #B25A05; }
.packet-row--low  .action-arrow { color: #178452; }

/* receipt source pill colors (extended for new sources) */
.r-tag--posthog { color: #FF6F2C; padding-right: 6px; border-right: 1px solid var(--bd-mid); }
.r-tag--web     { color: #6E5FBE; padding-right: 6px; border-right: 1px solid var(--bd-mid); }
.r-tag--repo    { color: #5A4F3D; padding-right: 6px; border-right: 1px solid var(--bd-mid); }
.r-tag--sentry  { color: #B45CA0; padding-right: 6px; border-right: 1px solid var(--bd-mid); }
.r-tag--vercel  { color: var(--ink-92); padding-right: 6px; border-right: 1px solid var(--bd-mid); }
.r-tag--memory  { color: var(--clay); padding-right: 6px; border-right: 1px solid var(--bd-mid); }

/* signal frag dot colors */
.frag-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.frag-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
}
.frag-dot--posthog { background: #FF6F2C; }
.frag-dot--github  { background: #1B1816; }
.frag-dot--sentry  { background: #B45CA0; }
.frag-dot--web     { background: #6E5FBE; }
.frag-dot--vercel  { background: var(--ink-92); }
.frag-dot--linear  { background: #6E5FBE; }

.r-pill--web      { background: #E5E1F4; color: #4F4582; border-color: rgba(79,69,130,.18); }
.r-pill--vercel   { background: #DCD9D2; color: #1A1816; border-color: rgba(28,28,32,.18); }

/* hero packet */
.hero-packet {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  perspective: 1200px;
}
.packet-shadow {
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--bd-soft);
  box-shadow: var(--sh-card);
}
.packet-shadow--1 { transform: translateY(8px) scale(.985); z-index: -1; opacity: .6; }
.packet-shadow--2 { transform: translateY(16px) scale(.97);  z-index: -2; opacity: .35; }

.packet-window {
  position: relative;
  background: var(--elevated);
  border: 1px solid rgba(28,28,32,.06);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-physical-strong);
  overflow: hidden;
  text-align: left;
}
.packet-window::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(28,28,32,.02) 100%);
  z-index: 1;
  mix-blend-mode: normal;
}
.window-chrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 11px 16px;
  background: linear-gradient(180deg, #FAFAFC, #EEEEF1);
  border-bottom: 0.7px solid var(--bd-soft);
}
.window-dots { display: flex; gap: 6px; }
.window-dots span {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--ink-18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.window-dots span:nth-child(1) { background: #E2A698; }
.window-dots span:nth-child(2) { background: #DCC68C; }
.window-dots span:nth-child(3) { background: #A6BA9A; }
.window-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-58);
}
.window-title svg { color: var(--clay); }
.window-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-45);
  text-align: right;
}

.packet-body {
  padding: 4px;
  background: var(--surface);
}
.packet-row {
  display: grid;
  grid-template-columns: 36px 70px 1fr 24px;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--elevated);
  border-radius: var(--r-lg);
  border: 1px solid var(--bd-soft);
  margin: 4px;
  transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.packet-row + .packet-row { margin-top: 4px; }
.packet-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--bd-mid), 0 4px 14px rgba(28,28,32,.05);
}

/* task-row-in entrance animation —  */
@media (prefers-reduced-motion: no-preference) {
  .is-loaded .packet-row {
    will-change: transform, opacity, filter;
    animation: task-row-in .56s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .is-loaded .packet-row:nth-child(1) { animation-delay: .85s; }
  .is-loaded .packet-row:nth-child(2) { animation-delay: 1.0s; }
  .is-loaded .packet-row:nth-child(3) { animation-delay: 1.15s; }
}

@keyframes task-row-in {
  0%   { opacity: 0; filter: blur(3px); transform: translateY(8px); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

/* hero entrance — soft animations that animate IN; default state is visible
   (so static screenshots, reduced-motion users, and no-JS visitors see the
   page at full opacity from the first paint) */
@media (prefers-reduced-motion: no-preference) {
  .hero.is-loaded > .hero-inner > .eyebrow { animation: hero-fade-in .8s var(--ease-out) forwards .04s; }
  .hero.is-loaded .hero-title              { animation: hero-fade-in .9s var(--ease-out) forwards .14s; }
  .hero.is-loaded .hero-sub                { animation: hero-fade-in .9s var(--ease-out) forwards .26s; }
  .hero.is-loaded .hero-form               { animation: hero-fade-in .9s var(--ease-out) forwards .38s; }
  .hero.is-loaded .hero-meta               { animation: hero-fade-in .9s var(--ease-out) forwards .50s; }
  .hero.is-loaded .hero-packet             { animation: hero-fade-in 1.1s var(--ease-out) forwards .60s; }
  .hero.is-loaded .hero-quiet              { animation: hero-fade-in .9s var(--ease-out) forwards 1.10s; }
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.row-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-30);
  padding-top: 3px;
}
.row-stage { padding-top: 2px; }
.row-body { min-width: 0; }
.row-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 550;
  color: var(--ink-92);
  line-height: 1.35;
  margin-bottom: 5px;
  letter-spacing: -0.005em;
}
.row-why {
  font-size: 13.5px;
  color: var(--ink-58);
  line-height: 1.45;
  margin-bottom: 9px;
}
.row-receipts { display: flex; flex-wrap: wrap; gap: 6px; }
.receipt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ink-58);
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-sm);
}
.r-tag {
  font-weight: 500;
  color: var(--ink-92);
  padding-right: 6px;
  border-right: 1px solid var(--bd-mid);
}

.row-action { color: var(--ink-30); font-family: var(--font-mono); padding-top: 3px; text-align: center; }
.action-arrow { font-size: 16px; line-height: 1; }
.packet-row--ship .action-arrow { color: var(--ship); }

.packet-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 11px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--bd-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-58);
}
.pf-key { color: var(--ink-30); margin-right: 5px; }
.pf-divider { color: var(--ink-18); }
.pf-link { margin-left: auto; cursor: pointer; transition: color .14s; }
.pf-link:hover { color: var(--clay); }

.hero-quiet {
  margin-top: 60px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-58);
  flex-wrap: wrap;
  justify-content: center;
}
.hero-quiet strong { color: var(--ink-92); font-weight: 500; }
.quiet-sep { color: var(--ink-18); }
.quiet-text { display: inline-flex; align-items: center; gap: 6px; }

/* shimmer text —  */
.shimmer {
  color: var(--ink-18);
  -webkit-text-fill-color: transparent;
  background-color: var(--ink-30);
  background-image: linear-gradient(90deg, var(--ink-30), var(--ink-92) 50%, var(--ink-30));
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 50px 100%;
  -webkit-background-clip: text;
  background-clip: text;
  margin-left: -60px;
  margin-right: -60px;
  padding-left: 60px;
  padding-right: 60px;
  animation: shimmer 2.8s infinite;
  display: inline;
}
@keyframes shimmer {
  0%  { background-position: 0 0; }
  80% { background-position: 100% 0; }
  100%{ background-position: 100% 0; }
}

/* hero scroll indicator — subtle bouncing arrow at bottom of hero */
.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink-30);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  animation: hero-scroll-fade 1s var(--ease-out) 1.2s forwards;
  z-index: 2;
}
.hero-scroll svg {
  animation: scroll-arrow 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-fade {
  to { opacity: 1; }
}
@keyframes scroll-arrow {
  0%, 100% { opacity: .4; transform: translateY(-2px); }
  50%      { opacity: 1;  transform: translateY(2px); }
}

/* horizon glow at bottom of hero — horizon glow at bottom of hero */
.hero-horizon {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(74,110,224,.04) 60%, rgba(74,110,224,.07) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
}
.hero-horizon::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(74,110,224,.4) 50%, transparent 100%);
}

/* ==========================================================================
   tab graveyard strip
   ========================================================================== */

.strip {
  position: relative;
  padding: 100px 24px 80px;
  text-align: center;
  background:
    linear-gradient(180deg, #FFFFFF 0%, var(--surface-2) 60%, var(--bg) 100%);
}
.strip-inner { max-width: 1100px; margin: 0 auto; }
.strip-eyebrow { display: inline-flex; }
.strip-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.030em;
  margin: 22px auto 36px;
  max-width: 760px;
}
.strip-title .title-strong, .strip-title .title-soft { display: block; }

.tabs-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  gap: 0;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--bd-mid);
  margin-bottom: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 6px 11px 7px;
  background: var(--surface);
  border: 1px solid var(--bd-soft);
  border-bottom: none;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  font-size: 12.5px;
  color: var(--ink-72);
  font-family: var(--font-sans);
  position: relative;
  margin-right: 2px;
  max-width: 220px;
}
.tab + .tab { margin-left: -1px; }
.tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-fav {
  width: 10px; height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.tab-fav--posthog { background: #FF6F2C; }
.tab-fav--gh      { background: #1B1816; }
.tab-fav--linear  { background: #6E5FBE; }
.tab-fav--sentry  { background: #B45CA0; }
.tab-fav--reddit  { background: #FF6034; }
.tab-fav--x       { background: #1A1816; }
.tab-fav--hn      { background: #C2611C; }
.tab-fav--notion  { background: #5C5249; border-radius: 50%; }
.tab-fav--more {
  width: auto; height: auto;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-30);
}
.tab-x { color: var(--ink-30); font-size: 13px; padding-left: 4px; cursor: pointer; }
.tab:hover { color: var(--ink-92); background: var(--elevated); }
.tab-fade { opacity: .55; font-style: italic; }

.strip-foot {
  max-width: 620px;
  margin: 0 auto;
  font-size: 14.5px;
  color: var(--ink-58);
  line-height: 1.5;
}

/* ==========================================================================
   section base
   ========================================================================== */

.section {
  padding: 120px 24px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.section-head {
  max-width: 760px;
  margin-bottom: 56px;
}
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.034em;
  margin: 20px 0 20px;
}
.section-title--center { text-align: center; }
.section-title .title-strong, .section-title .title-soft { display: block; }
.section-sub {
  font-size: 16px;
  color: var(--ink-58);
  line-height: 1.6;
  max-width: 620px;
}
.section-sub--center { margin-left: auto; margin-right: auto; }
.section-sub--small { font-size: 14px; max-width: 540px; }

/* ==========================================================================
   packet section (parallel to org-chart section)
   ========================================================================== */

.section-packet { padding-top: 90px; }
.packet-stage {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}
.packet-stage--single {
  display: block;
  max-width: 880px;
  margin: 0 auto;
}
.packet-rail {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rail-card {
  background: var(--surface);
  border: 1px solid rgba(28,28,32,.05);
  border-radius: var(--r-xl);
  box-shadow:
    0 0 0 1px rgba(28,28,32,.03),
    inset 0 1px 0 0 rgba(255,255,255,.85),
    0 1px 1px rgba(28,28,32,.04);
  padding: 16px 18px;
}
.rail-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .03em;
  padding: 5px 0;
  border-bottom: 1px dashed var(--bd-soft);
}
.rail-row:last-child { border-bottom: 0; }
.rail-key { color: var(--ink-45); text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; }
.rail-val { color: var(--ink-92); }

.rail-card--legend { padding: 14px 18px; }
.legend-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0;
}
.legend-desc {
  font-size: 12.5px;
  color: var(--ink-58);
}
.rail-foot { padding: 6px 4px 0; }

.packet-full {
  background: var(--elevated);
  border: 1px solid rgba(28,28,32,.06);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-physical-strong);
  padding: 32px 36px;
  position: relative;
}
.full-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.full-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-45);
}
.full-stage { display: flex; align-items: center; gap: 12px; }
.full-conf {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-72);
}
.full-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--ink-92);
  margin-bottom: 14px;
}
.full-why {
  font-size: 15.5px;
  color: var(--ink-58);
  line-height: 1.55;
  margin-bottom: 30px;
  max-width: 760px;
}
.full-why strong { color: var(--ship); font-weight: 600; }

.full-section { margin-bottom: 28px; }
.full-label {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}

.receipts-list { display: flex; flex-direction: column; gap: 6px; }
.receipt-row {
  display: grid;
  grid-template-columns: 100px 1fr 28px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-md);
  transition: background .14s var(--ease-out);
}
.receipt-row:hover { background: var(--surface); }
.r-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  color: var(--ink-92);
  background: var(--elevated);
  border: 1px solid var(--bd-soft);
  text-align: center;
  width: fit-content;
  height: 19px;
  display: inline-flex; align-items: center;
}
.r-pill--posthog  { background: #FFE7D6; color: #B5520F; border-color: rgba(181,82,15,.18); }
.r-pill--reddit   { background: #FFE0CE; color: #C04416; border-color: rgba(192,68,22,.18); }
.r-pill--repo     { background: #E5E0CE; color: #5A4F3D; border-color: rgba(90,79,61,.20); }
.r-pill--memory   { background: var(--clay-soft); color: var(--clay); border-color: rgba(74,110,224,.18); }
.r-pill--linear   { background: #E0DCEE; color: #4F4582; border-color: rgba(79,69,130,.18); }
.r-pill--sentry   { background: #E9D6E5; color: #7C2F6F; border-color: rgba(124,47,111,.18); }
.r-pill--x        { background: #DCD9D2; color: #1A1816; border-color: rgba(28,28,32,.18); }
.r-pill--hn       { background: #FFD7BE; color: #B5520F; border-color: rgba(181,82,15,.18); }
.r-pill--releases { background: var(--ship-soft); color: var(--ship); border-color: rgba(26,154,90,.18); }

.r-text { font-size: 13.5px; color: var(--ink-72); }
.r-text strong { color: var(--ink-92); font-weight: 600; }
.r-text code {
  background: var(--elevated);
  border: 1px solid var(--bd-soft);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  font-size: 11.5px;
  color: var(--ink-92);
}
.r-arrow { color: var(--ink-30); text-align: center; }
.receipt-row:hover .r-arrow { color: var(--clay); }

.files-row { display: flex; flex-wrap: wrap; gap: 6px; }
.file-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--ink-92);
  background: var(--surface-2);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-sm);
  padding: 5px 9px;
}
.file-pill--soft { color: var(--ink-58); }
.file-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--clay); }
.file-dot--soft { background: var(--ink-30); }
.file-meta { color: var(--ink-30); font-size: 11px; }

.codeblock {
  background: #1B1816;
  color: #F0E9D7;
  border-radius: var(--r-md);
  border: 1px solid #0F0F12;
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: .005em;
  overflow-x: auto;
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 14px 30px rgba(28,28,32,.18);
}
.code-line { display: block; }
.code-comment { color: #9C8770; font-style: italic; }
.code-str { color: #E59A6F; }

.full-foot {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-top: 22px;
  border-top: 1px solid var(--bd-soft);
}
.full-foot-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-45);
  letter-spacing: .03em;
}

@media (max-width: 1080px) {
  .packet-stage { grid-template-columns: 1fr; }
  .packet-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .packet-rail .rail-card { flex: 1 1 240px; }
}

/* ==========================================================================
   bevel app demo — three-pane mockup of the actual product surface
   ========================================================================== */

.section-app { padding-top: 80px; padding-bottom: 80px; }
.app-frame {
  background: #FFFFFF;
  border: 0;
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-orch);
  overflow: hidden;
  margin-top: 30px;
  position: relative;
}
.app-chrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 11px 16px;
  background: linear-gradient(180deg, #F8F8FA, #F0F0F4);
  border-bottom: 1px solid #E8E8EC;
}
/* Real dashboard chrome — mirrors the actual top bar in /app */
.app-chrome--real {
  display: flex;
  justify-content: space-between;
  padding: 9px 14px;
  background: #F8F8FA;
}
.ac-left { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); }
.ac-logo { color: #4A6EE0; display: inline-flex; }
.ac-name { font-size: 13px; font-weight: 600; color: #1A1A1F; letter-spacing: -0.01em; }
.ac-sep  { color: #C4C4CC; font-size: 12px; }
.ac-ws {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #6B6B76;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(26,154,90,.06);
}
.ac-right { display: inline-flex; align-items: center; gap: 8px; }
.ac-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #6B6B76;
  padding: 4px 8px;
  border-radius: 4px;
}
.ac-scan {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #6B6B76;
  padding: 4px 9px;
  background: #FFFFFF;
  border: 1px solid #E8E8EC;
  border-radius: 4px;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.ac-scan:hover { background: #F0F0F4; border-color: #D8D8DE; color: #1A1A1F; }
.app-chrome .window-title { color: #6B6B76; }
.app-chrome .window-title svg { color: #4A6EE0; }
.app-chrome .window-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #9B9BA6;
  letter-spacing: .04em;
  justify-self: end;
}
.status-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #1A9A5A;
  box-shadow: 0 0 0 3px rgba(26,154,90,.15), 0 0 6px rgba(26,154,90,.5);
}

/* Timeline (replicates the dashboard.tsx component) */
.app-timeline {
  padding: 12px 20px;
  border-bottom: 1px solid #E8E8EC;
  background: #FFFFFF;
}
.tl-zoom { display: inline-flex; gap: 4px; margin-bottom: 8px; }
.tl-zoom-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  background: transparent;
  color: #C4C4CC;
  border: 1px solid transparent;
  border-radius: 3px;
  letter-spacing: .04em;
}
.tl-zoom-btn.is-active {
  color: #1A1A1F;
  background: #F8F8FA;
  border-color: #E8E8EC;
}
.tl-rail {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
}
.tl-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: #E8E8EC;
}
.tl-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  transition: transform .14s var(--ease-out);
}
.tl-dot:hover { transform: translateX(-50%) scale(1.8); }
.tl-dot--scan   { background: #4A6EE0; }
.tl-dot--signal { background: #D97706; }
.tl-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #C4C4CC;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* Three-pane grid: left rail (signals) | center (chat) | right rail (opps) */
.app-grid {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  min-height: 520px;
  background: #FFFFFF;
}
.app-rail, .app-opps {
  background: #F8F8FA;
  padding: 16px 14px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.app-rail  { border-right: 1px solid #E8E8EC; }
.app-opps  { border-left:  1px solid #E8E8EC; }

.rail-head {
  color: #9B9BA6;
  padding-bottom: 8px;
  border-bottom: 1px solid #E8E8EC;
  margin-bottom: 4px;
}
.rail-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #E8E8EC;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6B6B76;
  cursor: pointer;
  transition: color .14s;
}
.rail-foot:hover { color: #4A6EE0; }

.signal-list { display: flex; flex-direction: column; gap: 1px; }
.sig {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: 4px;
  transition: background .14s;
}
.sig:hover { background: #F0F0F4; }
.sig-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  margin-left: 3px;
}
.sig-dot--posthog { background: #FF6F2C; }
.sig-dot--github  { background: #1A1A1F; }
.sig-dot--sentry  { background: #B45CA0; }
.sig-dot--web     { background: #6E5FBE; }
.sig-dot--vercel  { background: #1A1A1F; }
.sig-dot--linear  { background: #6E5FBE; }
.sig-txt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #6B6B76;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sig-src {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #C4C4CC;
  letter-spacing: .04em;
  text-transform: lowercase;
}
.sig-faded { opacity: .45; }

/* Chat */
.app-chat {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  min-width: 0;
}
.chat-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #E8E8EC;
}
.ch-tabs { display: inline-flex; gap: 2px; }
.ch-tab {
  padding: 6px 10px;
  font-size: 12px;
  color: #6B6B76;
  border-radius: 4px;
  transition: background .14s, color .14s;
}
.ch-tab:hover { background: #F0F0F4; color: #1A1A1F; }
.ch-tab.is-active {
  background: #F8F8FA;
  color: #1A1A1F;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px #E8E8EC;
}
.ch-newchat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9B9BA6;
  padding: 4px 8px;
}
.ch-newchat:hover { color: #4A6EE0; }

.chat-body {
  flex: 1;
  padding: 18px 20px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 18px;
}
.msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 100%;
}
.msg-avatar {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.msg-avatar--user {
  background: #F0F0F4;
  color: #6B6B76;
  border: 1px solid #E8E8EC;
}
.msg-avatar--bevel {
  background: #4A6EE0;
  color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(74,110,224,.12);
}
.msg-bubble {
  flex: 1;
  min-width: 0;
}
.msg--user .msg-bubble {
  background: #F8F8FA;
  border: 1px solid #E8E8EC;
  border-radius: var(--r-md);
  padding: 9px 14px;
  font-size: 13.5px;
  color: #1A1A1F;
  display: inline-block;
  width: auto;
}

.msg-trace {
  background: #F8F8FA;
  border: 1px solid #E8E8EC;
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex; flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #6B6B76;
}
.trace-line { display: flex; align-items: center; gap: 8px; }
.trace-icon {
  width: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.trace-icon--done { color: #1A9A5A; }
.trace-icon--running {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 2px solid #4A6EE0;
  border-top-color: transparent;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.msg-text {
  font-size: 13.5px;
  color: #1A1A1F;
  line-height: 1.55;
  margin-bottom: 10px;
}
.msg-recs {
  display: flex; flex-direction: column;
  gap: 6px;
  background: #F8F8FA;
  border: 1px solid #E8E8EC;
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin: 0 0 12px;
  list-style: none;
  counter-reset: rec-counter;
}
.msg-recs li {
  display: flex; align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #1A1A1F;
}
.rec-pill { flex-shrink: 0; }
.rec-title { line-height: 1.4; }

.msg-cta-row {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.msg-cta {
  font-size: 12px;
  padding: 6px 11px;
  border-radius: var(--r-md);
  background: #FFFFFF;
  color: #6B6B76;
  border: 1px solid #E8E8EC;
  transition: background .14s, color .14s;
}
.msg-cta:hover { background: #F0F0F4; color: #1A1A1F; }
.msg-cta--primary {
  background: #1A1A1F;
  color: #FFFFFF;
  border-color: #1A1A1F;
}
.msg-cta--primary:hover { background: #333; color: #FFFFFF; }

.chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #E8E8EC;
  background: #F8F8FA;
}
.chat-input input {
  flex: 1;
  border: 1px solid #E8E8EC;
  background: #FFFFFF;
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: 13px;
  outline: 0;
  color: #1A1A1F;
  font-family: var(--font-sans);
  transition: border-color .14s, box-shadow .14s;
}
.chat-input input:focus { border-color: rgba(74,110,224,.5); box-shadow: 0 0 0 3px rgba(74,110,224,.12); }
.chat-input input::placeholder { color: #C4C4CC; }
.ci-send {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: #1A1A1F;
  color: #FFFFFF;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Right rail: opportunities */
.opp-card {
  background: #FFFFFF;
  border: 0.7px solid rgba(0,0,0,.06);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 5px;
  position: relative;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.9),
    0 1px 1px rgba(0,0,0,.04);
  transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.opp-card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    inset 0 1px 0 0 rgba(255,255,255,.95),
    0 4px 10px rgba(0,0,0,.04);
}
.opp-card--high { border-left: 3px solid #D94444; }
.opp-card--med  { border-left: 3px solid #D97706; }
.opp-card--low  { border-left: 3px solid #1A9A5A; }
.opp-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #C4C4CC;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.opp-title {
  font-size: 12.5px;
  font-weight: 500;
  color: #1A1A1F;
  line-height: 1.35;
}
.opp-meta { display: flex; align-items: center; gap: 8px; }
.opp-conf {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #9B9BA6;
  letter-spacing: .04em;
}
.opp-spark {
  height: 22px;
  margin-top: 2px;
}
.opp-foot {
  color: #C4C4CC;
  font-size: 9px;
  letter-spacing: .12em;
}

.app-foot {
  text-align: center;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-45);
  letter-spacing: .04em;
}

/* Left-rail blocks (sources + memory) — mirror dashboard.tsx LeftPanel */
.rail-block + .rail-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid #E8E8EC; }
.src-list { display: flex; flex-direction: column; gap: 1px; }
.src-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #1A1A1F;
  padding: 4px 0;
  letter-spacing: .02em;
}
.src-item .src-pin {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid #C4C4CC;
}
.src-item.is-on .src-pin {
  background: #1A9A5A;
  border-color: #1A9A5A;
  box-shadow: 0 0 0 2px rgba(26,154,90,.15);
}
.src-item.is-add {
  color: #9B9BA6;
  cursor: pointer;
  padding: 5px 0;
  margin-top: 4px;
  font-size: 10.5px;
  letter-spacing: .06em;
  transition: color .14s;
}
.src-item.is-add:hover { color: #4A6EE0; }

/* Recommendations stack — mirrors RecCard in dashboard.tsx */
.app-recs {
  background: #FFFFFF;
  display: flex; flex-direction: column;
  min-width: 0;
}
.recs-head {
  padding: 10px 18px;
  border-bottom: 1px solid #E8E8EC;
  display: flex; align-items: baseline; gap: 10px;
  background: #FAFAFC;
}
.recs-title { font-size: 12px; font-weight: 600; color: #1A1A1F; font-family: var(--font-sans); }
.recs-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #9B9BA6;
  letter-spacing: .03em;
  margin-left: auto;
}
.rec-stack {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.rec-card {
  background: #FFFFFF;
  border: 0.7px solid #E8E8EC;
  border-radius: 8px;
  padding: 10px 12px;
  transition: background .14s, border-color .14s;
  font-family: var(--font-sans);
}
.rec-card:hover { background: #FBFBFC; border-color: #D8D8DE; }
.rec-card--open {
  background: #FFFFFF;
  border-color: rgba(74,110,224,.32);
  box-shadow: 0 0 0 3px rgba(74,110,224,.06);
  padding: 13px 14px 12px;
}
.rec-head {
  display: flex; align-items: baseline; gap: 8px;
  cursor: pointer;
}
.rec-caret { color: #C4C4CC; font-size: 10px; line-height: 1; transform: translateY(2px); }
.rec-card--open .rec-caret { color: #6B6B76; }
.rec-title-real {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: #1A1A1F;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
}
.rec-age {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #C4C4CC;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.rec-summary {
  font-size: 11px;
  color: #9B9BA6;
  margin: 3px 0 0 16px;
  line-height: 1.45;
  font-family: var(--font-sans);
}
.rec-body { margin-top: 10px; }
.rec-evidence {
  border-left: 2px solid #E8E8EC;
  padding: 0 0 0 10px;
  margin-bottom: 10px;
}
.rec-evidence p {
  font-size: 11.5px;
  color: #6B6B76;
  line-height: 1.55;
  margin: 0;
}
.rec-prompt {
  border: 1px solid #E8E8EC;
  border-radius: 6px;
  background: #F8F8FA;
  margin-bottom: 10px;
  overflow: hidden;
}
.rec-prompt-head {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #9B9BA6;
  letter-spacing: .02em;
}
.rp-caret { font-size: 9px; transform: rotate(90deg); transform-origin: center; }
.rp-icon { font-size: 11px; color: #6B6B76; }
.rp-label { color: #6B6B76; }
.rp-copy {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #9B9BA6;
  background: #FFFFFF;
  border: 1px solid #E8E8EC;
  border-radius: 3px;
  padding: 2px 7px;
  cursor: pointer;
  letter-spacing: .04em;
}
.rp-copy:hover { color: #1A9A5A; border-color: rgba(26,154,90,.4); background: #EAF7F0; }
.rec-prompt-body {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  color: #6B6B76;
  white-space: pre-wrap;
  margin: 0;
  padding: 0 10px 10px;
}
.rec-actions {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
}
.rec-actions .flex-1 { flex: 1; }
.rec-btn, .rec-btn-ghost {
  font-size: 11px;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  border: 0;
  transition: background-color .18s cubic-bezier(.22,1,.36,1), box-shadow .18s cubic-bezier(.22,1,.36,1), transform .18s cubic-bezier(.22,1,.36,1);
}
.rec-btn:active { transform: translateY(.5px) scale(.985); }
.rec-btn--primary {
  background: #1A1A1F; color: #FFFFFF;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.14),
    inset 0 1px 0 0 rgba(255,255,255,.16),
    inset 0 -.5px 1.5px 0 rgba(0,0,0,.22),
    0 1px 1px rgba(28,40,80,.06),
    0 2px 6px rgba(28,40,80,.10);
}
.rec-btn--primary:hover { background: #000; }
.rec-btn--accent {
  background: #4A6EE0; color: #FFFFFF;
  box-shadow:
    0 0 0 1px rgba(74,110,224,.2),
    inset 0 1px 0 0 rgba(255,255,255,.2),
    inset 0 -.5px 1.5px 0 rgba(0,0,0,.18),
    0 1px 1px rgba(28,40,80,.06),
    0 2px 6px rgba(74,110,224,.15);
}
.rec-btn--accent:hover { background: #3a5cc4; }
.rec-btn-ghost {
  background: transparent;
  color: #9B9BA6;
  padding: 5px 8px;
}
.rec-btn-ghost:hover { color: #1A1A1F; }
.rec-btn--ask { color: #4A6EE0; }
.rec-btn--ask:hover { color: #3a5cc4; }

/* Right-rail chat suggestions — mirror dashboard.tsx ChatPanel chips */
.chip-stack {
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: auto;
}
.sug-chip {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: #1A1A1F;
  background: #FFFFFF;
  border: 1px solid #E8E8EC;
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  line-height: 1.35;
  transition: background .14s, border-color .14s, color .14s;
}
.sug-chip:hover { background: #F8F8FA; border-color: #D8D8DE; color: #4A6EE0; }
.chat-mini {
  display: flex; gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #E8E8EC;
}
.chat-mini input {
  flex: 1;
  border: 1px solid #E8E8EC;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11.5px;
  outline: 0;
  color: #1A1A1F;
  font-family: var(--font-sans);
}
.chat-mini input:focus { border-color: rgba(74,110,224,.5); box-shadow: 0 0 0 3px rgba(74,110,224,.10); }
.chat-mini input::placeholder { color: #C4C4CC; }
.chat-mini .ci-send {
  width: 28px; height: 28px;
  background: #1A1A1F;
  color: #FFFFFF;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}

@media (max-width: 1080px) {
  .app-grid { grid-template-columns: 1fr; }
  .app-rail, .app-opps {
    border: 0;
    border-bottom: 1px solid #E8E8EC;
  }
}

/* ==========================================================================
   loop section
   ========================================================================== */

.section-loop { padding-top: 100px; padding-bottom: 100px; }
.loop-stage {
  position: relative;
  margin-top: 30px;
  padding: 60px 30px 40px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, var(--surface) 0%, transparent 70%),
    var(--surface-2);
  border-radius: var(--r-3xl);
  border: 1px solid var(--bd-soft);
  box-shadow: var(--sh-card);
}
.loop-stage::before {
  content:"";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(28,28,32,.05) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 0%, #000 70%);
  mask-image: radial-gradient(ellipse at center, transparent 0%, #000 70%);
}
.loop-rail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 260px;
  top: 60px;
  z-index: 0;
  pointer-events: none;
}
.loop-rail path {
  stroke: var(--ink-18);
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 4 5;
  marker-end: url(#arrowHead);
}
#loopDot { fill: var(--clay); filter: drop-shadow(0 0 4px rgba(74,110,224,.6)); }

.loop-nodes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.loop-node {
  background: var(--elevated);
  border: 1px solid var(--bd-soft);
  border-radius: var(--r-xl);
  padding: 22px 20px;
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.loop-node:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-card-elev);
}
.loop-node.is-active {
  border-color: var(--clay);
  box-shadow: 0 0 0 1px var(--clay), 0 0 0 5px rgba(74,110,224,.10), 0 12px 24px rgba(28,28,32,.05);
}
.node-num { color: var(--ink-30); }
.node-icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--bd-soft);
  color: var(--clay);
  margin-bottom: 4px;
}
.node-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-92);
  letter-spacing: -.005em;
}
.node-desc {
  font-size: 13.5px;
  color: var(--ink-58);
  line-height: 1.5;
}
.node-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--bd-soft);
  color: var(--ink-45);
}
.loop-foot { text-align: center; margin-top: 28px; position: relative; z-index: 1; }

@media (max-width: 980px) {
  .loop-nodes { grid-template-columns: repeat(2, 1fr); }
  .loop-rail { display: none; }
}

/* ==========================================================================
   pillars 
   ========================================================================== */

.section-pillars { padding-top: 60px; padding-bottom: 60px; }
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  border-top: 1px solid var(--bd-soft);
  border-bottom: 0.7px solid var(--bd-soft);
  padding: 56px 0;
}
.pillar { display: flex; flex-direction: column; gap: 14px; }
.pillar-tile {
  width: 64px;
  height: 64px;
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  border: 0;
  background: var(--surface);
  box-shadow: var(--sh-neumorphic);
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.pillar:hover .pillar-tile {
  box-shadow: var(--sh-neumorphic-pressed);
  transform: scale(.98);
}
.pillar-tile--clay  { color: var(--clay); }
.pillar-tile--ink   { color: var(--ink-85); }
.pillar-tile--ship  { color: var(--ship); }

.pillar-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.022em;
  color: var(--ink-92);
}
.pillar-body { font-size: 14.5px; line-height: 1.55; color: var(--ink-58); }

@media (max-width: 880px) {
  .pillars-grid { grid-template-columns: 1fr; gap: 36px; padding: 36px 0; }
}

/* ==========================================================================
   sources panel
   ========================================================================== */

.section-sources { padding-top: 100px; }

.noise-floor {
  position: relative;
  margin: 32px auto 22px;
  height: 56px;
  border-top: 1px solid var(--bd-soft);
  border-bottom: 0.7px solid var(--bd-soft);
  background: var(--surface-2);
  overflow: hidden;
}
.noise-row {
  position: absolute;
  left: 0; right: 0;
  height: 18px;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--ink-30);
  white-space: nowrap;
  will-change: transform;
}
#noiseRowA { top: 2px; }
#noiseRowB { top: 19px; color: var(--ink-45); }
#noiseRowC { top: 36px; }

.sources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.source-card {
  background: var(--surface-raised, #FBFBF8);
  border: 0.7px solid rgba(28,28,32,.06);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.85),
    0 1px 1px rgba(28,28,32,.04);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.source-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(28,28,32,.06),
    inset 0 1px 0 0 rgba(255,255,255,.95),
    0 1px 1px rgba(28,28,32,.04),
    0 8px 18px rgba(28,28,32,.06),
    0 16px 32px rgba(28,28,32,.05);
}
.src-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.src-dot {
  width: 9px; height: 9px;
  border-radius: 999px;
}
.src-dot--posthog  { background: #FF6F2C; }
.src-dot--repo     { background: #5A4F3D; }
.src-dot--linear   { background: #6E5FBE; }
.src-dot--sentry   { background: #B45CA0; }
.src-dot--reddit   { background: #FF6034; }
.src-dot--x        { background: var(--ink-92); }
.src-dot--hn       { background: #C2611C; }
.src-dot--releases { background: var(--ship); }

.src-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-92);
  letter-spacing: -.005em;
}
.src-meta { color: var(--ink-30); font-size: 9.5px; }
.src-quote {
  font-size: 12.5px;
  color: var(--ink-72);
  line-height: 1.45;
}
.src-quote code {
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  font-size: 11px;
}
.src-quote strong { color: var(--ink-92); font-weight: 600; }
.src-spark {
  height: 28px;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.sources-foot {
  margin-top: 26px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-58);
}
.sources-foot .rail-mono { margin-left: 8px; cursor: pointer; }

@media (max-width: 1080px) {
  .sources-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   memory section
   ========================================================================== */

.section-memory { padding-top: 100px; }
.memory-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}
.memory-copy { padding-top: 30px; }
.memory-copy .section-title { margin-top: 18px; }
.memory-stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 26px 0;
  padding: 18px 0;
  border-top: 1px solid var(--bd-soft);
  border-bottom: 0.7px solid var(--bd-soft);
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--ink-92);
  letter-spacing: -.01em;
}
.stat-label { color: var(--ink-45); margin-top: 4px; }
.memory-link { display: inline-flex; }

.memory-card {
  background: var(--elevated);
  border: 1px solid rgba(28,28,32,.06);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-physical-strong);
  overflow: hidden;
}
.memory-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  background: linear-gradient(180deg, #FAFAFC, #EEEEF1);
  border-bottom: 0.7px solid var(--bd-soft);
}
.mh-left { display: flex; align-items: center; gap: 10px; }
.mh-dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--ship);
  box-shadow: 0 0 0 3px rgba(26,154,90,.10), 0 0 6px rgba(26,154,90,.4);
}
.mh-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-92);
}
.mh-right { color: var(--ink-45); }

.ledger {
  padding: 8px 0;
}
.ledger-row {
  display: grid;
  grid-template-columns: 64px 60px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 20px;
  border-bottom: 0.7px solid var(--bd-soft);
  transition: background .14s var(--ease-out);
}
.ledger-row:hover { background: var(--surface-2); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row--faded { opacity: .55; }
.led-wk { color: var(--ink-45); }
.led-title { font-size: 13.5px; color: var(--ink-92); font-weight: 500; }
.led-meta { color: var(--ink-58); font-size: 10.5px; }

.memory-graph {
  padding: 16px 20px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--bd-soft);
}
.mg-label { color: var(--ink-45); margin-bottom: 6px; }
.mg-svg { width: 100%; height: 80px; }
.mg-area { fill: rgba(26,154,90,.10); }
.mg-line { fill: none; stroke: var(--ship); stroke-width: 1.6; }
.mg-dot  { fill: var(--ship); }

@media (max-width: 980px) {
  .memory-grid { grid-template-columns: 1fr; }
  .memory-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   compare table
   ========================================================================== */

.section-compare { padding-top: 100px; }
.compare-card {
  background: var(--elevated);
  border: 1px solid rgba(28,28,32,.06);
  border-radius: var(--r-2xl);
  box-shadow:
    0 0 0 1px rgba(28,28,32,.04),
    inset 0 1px 0 0 rgba(255,255,255,.92),
    0 1px 1px rgba(28,28,32,.04),
    0 12px 28px rgba(28,28,32,.05),
    0 28px 56px rgba(28,28,32,.06);
  overflow: hidden;
  margin-top: 20px;
}
.compare-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  align-items: stretch;
  background: linear-gradient(180deg, #FAFAFC, #EEEEF1);
  border-bottom: 0.7px solid var(--bd-soft);
}
.ch-cell {
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
  border-right: 0.7px solid var(--bd-soft);
}
.ch-cell:last-child { border-right: 0; }
.ch-cell--label { color: var(--ink-30); }
.ch-cell--bevel { background: var(--clay-bg); }
.ch-name { font-family: var(--font-display); font-size: 22px; color: var(--ink-92); }
.ch-cell--bevel .ch-name { color: var(--clay); }
.ch-tag { color: var(--ink-45); }
.ch-cell--bevel .ch-tag { color: var(--clay); opacity: .8; }

.compare-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  align-items: center;
  border-bottom: 0.7px solid var(--bd-soft);
}
.compare-row:last-child { border-bottom: 0; }
.cr-label, .cr-cell {
  padding: 14px 16px;
  font-size: 13.5px;
  border-right: 0.7px solid var(--bd-soft);
  height: 100%;
  display: flex;
  align-items: center;
}
.cr-cell { justify-content: center; color: var(--ink-30); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.cr-cell:last-child { border-right: 0; }
.cr-cell--yes { color: var(--ship); font-size: 14px; }
.cr-label { color: var(--ink-72); }

.compare-foot {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-58);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .compare-head, .compare-row { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; font-size: 12px; }
  .ch-name { font-size: 16px; }
  .cr-label, .cr-cell { padding: 10px 8px; font-size: 11.5px; }
}

/* ==========================================================================
   pricing
   ========================================================================== */

.section-pricing { padding-top: 100px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.price-card {
  background: var(--elevated);
  border: 1px solid rgba(28,28,32,.05);
  border-radius: var(--r-2xl);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow:
    0 0 0 1px rgba(28,28,32,.04),
    inset 0 1px 0 0 rgba(255,255,255,.9),
    0 1px 1px rgba(28,28,32,.04),
    0 8px 18px rgba(28,28,32,.04);
  position: relative;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.price-card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(28,28,32,.06),
    inset 0 1px 0 0 rgba(255,255,255,.95),
    0 2px 2px rgba(28,28,32,.04),
    0 14px 28px rgba(28,28,32,.06);
}
.price-card--featured {
  border: 1px solid rgba(74,110,224,.30);
  box-shadow:
    0 0 0 1px rgba(74,110,224,.18),
    inset 0 1px 0 0 rgba(255,255,255,.95),
    0 1px 1px rgba(28,28,32,.05),
    0 12px 24px rgba(74,110,224,.06),
    0 28px 48px rgba(28,28,32,.06);
  background:
    linear-gradient(180deg, #F0F4FE 0%, var(--elevated) 55%);
}
.price-card--featured:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(74,110,224,.24),
    inset 0 1px 0 0 rgba(255,255,255,1),
    0 1px 1px rgba(28,28,32,.05),
    0 18px 32px rgba(74,110,224,.08),
    0 36px 60px rgba(28,28,32,.08);
}
.price-feature-tag {
  position: absolute;
  top: -10px;
  left: 22px;
  background: var(--clay);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 4px 10px;
  letter-spacing: .14em;
  height: 20px;
  display: inline-flex; align-items: center;
  font-size: 9.5px;
}
/* coming-soon plans — slightly dimmed price + muted feature tag so the
   only currently-available plan (free beta) reads as the actionable one. */
.price-card--coming .num-int,
.price-card--coming .num-currency { color: var(--ink-58); }
.price-card--coming .num-suffix { color: var(--ink-30); }
.price-card--coming .price-pitch,
.price-card--coming .price-list { opacity: .82; }
.price-card--coming.price-card--featured .price-feature-tag {
  background: var(--ink-58);
  letter-spacing: .12em;
}
/* fills the slot where the CTA would be — keeps card heights aligned */
.price-coming-note {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--ink-45);
  padding: 12px 0 4px;
  margin-top: auto;
  border-top: 0.7px dashed rgba(28,28,32,.10);
}
.price-head {
  display: flex; justify-content: space-between; align-items: center;
}
.price-name {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink-92);
}
.price-tag { color: var(--ink-45); }
.price-num {
  display: flex; align-items: baseline; gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--bd-soft);
  border-bottom: 0.7px solid var(--bd-soft);
}
.num-currency {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink-58);
}
.num-int {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 60px;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--ink-92);
  letter-spacing: -0.025em;
}
.num-suffix {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-45);
  letter-spacing: .04em;
}
.price-pitch { font-size: 14px; color: var(--ink-58); line-height: 1.55; }
.price-list { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--ink-72); }
.price-list li {
  position: relative;
  padding-left: 16px;
  line-height: 1.45;
}
.price-list li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--clay);
  box-shadow: 0 0 0 3px rgba(74,110,224,.10);
}

.pricing-foot {
  margin-top: 26px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-58);
}

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

/* ==========================================================================
   closing CTA
   ========================================================================== */

.closing {
  position: relative;
  /* no padding-bottom — closing card sits flush with the footer so the sky
     in the card flows directly into the saturated sky in the footer with
     only the small footer fadeTop ribbon between them. */
  padding: 100px 24px 0;
  margin: 0 auto;
  max-width: 1280px;
  isolation: isolate;
}
.closing-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(28,28,32,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}
.closing-card {
  background-color: #79b8f3; /* fallback */
  border: 1px solid rgba(28,28,32,.06);
  border-radius: var(--r-3xl);
  padding: 96px 40px 88px;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(28,28,32,.06),
    inset 0 1px 0 0 rgba(255,255,255,.55),
    0 1px 1px rgba(28,28,32,.04),
    0 14px 32px rgba(28,28,32,.05),
    0 36px 64px rgba(28,28,32,.07);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.closing-stamp {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--clay);
  position: relative;
  z-index: 1;
}
.closing-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-bottom: 24px;
}
.closing-title {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.036em;
  margin-bottom: 22px;
}
.closing-title .title-strong, .closing-title .title-soft { display: block; }
.closing-sub {
  position: relative; z-index: 1;
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 15.5px;
  color: var(--ink-58);
  line-height: 1.6;
}
.closing-cta {
  position: relative; z-index: 1;
  display: flex; gap: 16px; justify-content: center; align-items: center;
  flex-wrap: wrap;
}
.closing-link { color: var(--ink-58); transition: color .14s; }
.closing-link:hover { color: var(--clay); }

/* ==========================================================================
   footer
   ========================================================================== */

.site-footer {
  background-color: #79b8f3; /* fallback before WebGL boots — matches hero/dept */
  border-top: none;
  /* footer is now its own start-of-page-end region. Some breathing room
     above so the section above (pricing) doesn't crash into it. */
  margin-top: 60px;
  /* the closing CTA sits inside the footer now, so we add room at the top
     for the big title and the button */
  padding: 0 24px 56px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* closing CTA — first child of footer, sits on the same sky canvas */
.footer-closing {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 96px 16px 88px;
  max-width: 900px;
  margin: 0 auto;
}
.footer-closing .closing-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.036em;
  margin-bottom: 22px;
}
.footer-closing .closing-title .title-strong { display: block; color: var(--ink-92); }
.footer-closing .closing-title .title-soft   { display: block; color: rgba(28,28,32,.55); }
.footer-closing .closing-cta {
  display: flex; gap: 16px; justify-content: center; align-items: center;
  flex-wrap: wrap;
}
/* thin horizon between closing CTA and the link columns below */
.footer-closing + .footer-inner {
  padding-top: 56px;
  border-top: 0.7px solid rgba(255,255,255,.22);
}
/* lift footer content above the sky pseudo layers */
.site-footer > * { position: relative; z-index: 1; }
/* footer text on saturated sky bg — pure white for max contrast.
   subtle text-shadow keeps small text legible if it overlaps a brighter
   cloud streak. */
.site-footer .ff-mono,
.site-footer .fc-head { color: rgba(255,255,255,.85); }
.site-footer .footer-col a,
.site-footer .footer-foot,
.site-footer .ff-icon,
.site-footer .logo,
.site-footer .logo-mark,
.site-footer .logo-word { color: #FFFFFF; }
.site-footer .footer-col a,
.site-footer .fc-head,
.site-footer .ff-mono { text-shadow: 0 1px 2px rgba(0,40,90,.18); }
.site-footer .footer-col a:hover,
.site-footer .ff-icon:hover { color: #FFFFFF; opacity: 1; }
.site-footer .footer-col a { opacity: 1; }
.site-footer .footer-foot { border-top-color: rgba(255,255,255,.22); }
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 56px;
  position: relative;
}
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.fc-head { color: var(--ink-30); padding-bottom: 4px; }
.footer-col a {
  font-size: 13.5px;
  color: var(--ink-72);
  transition: color .2s ease-out;
  position: relative;
  isolation: isolate;
  display: inline-block;
  width: fit-content;
}
.footer-col a::before {
  content: "";
  opacity: 0;
  z-index: -1;
  background: rgba(226,226,231,.5);
  border-radius: 4px;
  transition: opacity .2s ease-out;
  position: absolute;
  inset: -2px -6px;
}
.footer-col a:hover { color: var(--ink-92); }
.footer-col a:hover::before { opacity: 1; }

.footer-foot {
  grid-column: 1 / -1;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--bd-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ff-mono { color: var(--ink-45); }
.ff-icons { display: flex; gap: 12px; }
.ff-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--elevated);
  border: 1px solid var(--bd-soft);
  color: var(--ink-72);
  box-shadow: var(--sh-btn-light);
  transition: color .14s, transform .14s;
}
.ff-icon:hover { color: var(--clay); transform: translateY(-1px); }

@media (max-width: 980px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .footer-foot { flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* ==========================================================================
   responsive — coarse tuning
   ========================================================================== */

@media (max-width: 720px) {
  .section { padding: 80px 20px; }
  .closing { padding: 60px 20px; }
  .closing-card { padding: 60px 22px; }
  .signal-frag { display: none; }
  .signal-lines { display: none; }
  .hero { padding: 110px 18px 60px; min-height: 0; }
  .hero-cta { flex-direction: column; gap: 10px; align-items: stretch; width: 100%; max-width: 320px; }
  .pillars-grid { gap: 24px; }
  .ledger-row { grid-template-columns: 50px 56px 1fr; }
  .led-meta { display: none; }
}

/* ==========================================================================
   reveal-on-scroll
   ========================================================================== */

/* Reveal-on-scroll — non-blocking polish. Only the small lift+fade applied
   to elements that are JUST about to enter the viewport — and only on the
   tail edge (so above-fold content always paints fully visible). */
.is-revealed {
  animation: reveal-up .6s var(--ease-out) both;
}
@keyframes reveal-up {
  from { opacity: .4; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   THE LOOP — 4 dept blocks 
   ========================================================================== */

.section-loop-intro {
  padding: 100px 24px 60px;
  max-width: 1280px;
  margin: 0 auto;
}
.section-loop-intro .section-head { margin-bottom: 0; }

/* More breathing room between dept blocks ("Writes the next ticket",
   "Hands you the prompt", "The path you're on"). Each dept gets 96px top
   + 96px bottom (was 56px + reset top), so neighbouring sections have
   ~192px between titles instead of ~56px. */
.dept {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 32px;
  position: relative;
}
.dept + .dept { padding-top: 0; }
.dept-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) 1.2fr;
  gap: 80px;
  align-items: center;
  position: relative;
}
.dept-grid--reverse { grid-template-columns: 1.2fr minmax(280px, 0.78fr); }
.dept-grid--reverse .dept-copy { order: 2; }
.dept-grid--reverse .dept-mock { order: 1; }
/* Vertical hairline divider between copy + mock —  */
.dept-grid::before {
  content: "";
  position: absolute;
  top: 8%; bottom: 8%;
  left: calc((100% - 80px) * (0.78 / (0.78 + 1.2)) + 40px);
  width: 0.7px;
  background: rgba(28,28,32,.10);
  pointer-events: none;
}
.dept-grid--reverse::before {
  left: calc((100% - 80px) * (1.2 / (0.78 + 1.2)) + 40px);
}

.dept-copy {
  display: flex; flex-direction: column; gap: 20px; max-width: 420px;
}
.dept-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 0;
}
.dept-title .title-strong, .dept-title .title-soft { display: block; }
.dept-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-58);
  margin: 0;
  max-width: 380px;
}
.dept-link {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-72);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  transition: color .14s var(--ease-out);
}
.dept-link-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-58);
}
.dept-link:hover { color: var(--clay); }
.dept-link:hover .dept-link-mono { color: var(--clay); }

/* Every dept-mock blue box is the same fixed height (440px) and centers
   its content vertically. That way the three demos ("Writes the next
   ticket", "Hands you the prompt", "The path you're on") line up at the
   same height regardless of the white card inside. Content overflowing
   the box clips (overflow:hidden) — the mocks are sized to fit. */
.dept-mock {
  display: flex; flex-direction: column; gap: 12px;
  justify-content: center;
  align-items: stretch;
  position: relative;
  isolation: isolate;
  padding: 28px;
  height: 440px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #79b8f3; /* fallback */
  box-shadow:
    0 0 0 1px rgba(28,28,32,.06),
    0 1px 1px rgba(28,28,32,.04),
    0 12px 28px rgba(28,28,32,.06);
}
.dept-mock > * { position: relative; z-index: 1; }

/* ── Common mock-card chrome ─────────────────────────────────────────── */
.m-card {
  background: var(--surface-raised, #FBFBF8);
  border-radius: var(--r-lg);
  padding: 14px 16px 16px;
  box-shadow: var(--sh-raised-card);
  font-family: var(--font-sans);
}
.m-card-head {
  display: flex; align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-45);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.m-card-head--alt { margin-top: 14px; }
.m-card-title { color: var(--ink-72); font-weight: 500; }
.m-card-meta { margin-left: auto; color: var(--ink-30); text-transform: none; letter-spacing: .02em; font-size: 10px; }
.m-divider {
  height: 0.7px;
  background: rgba(28,28,32,.06);
  margin: 6px -16px 0;
}

/* ── I. Watch mock — sources panel + timeline ────────────────────────── */
.m-src-list { display: flex; flex-direction: column; gap: 1px; }
.m-src {
  display: grid;
  grid-template-columns: 14px auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .015em;
}
.m-src .m-pin {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid #C4C4CC;
  margin-left: 3px;
}
.m-src.is-on .m-pin {
  background: #1A9A5A;
  border-color: #1A9A5A;
  box-shadow: 0 0 0 2px rgba(26,154,90,.15);
}
.m-src-name { color: var(--ink-92); font-weight: 500; }
.m-src:not(.is-on) .m-src-name { color: var(--ink-45); }
.m-src-meta { margin-left: auto; color: var(--ink-45); font-size: 10.5px; letter-spacing: .015em; text-align: right; }

.m-timeline {
  position: relative;
  height: 16px;
  margin-top: 8px;
}
.m-tl-line {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 0.7px;
  background: rgba(28,28,32,.10);
}
.m-tl-dot {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 999px;
}
.m-tl-dot--scan { background: #4A6EE0; box-shadow: 0 0 0 2px rgba(74,110,224,.18); }
.m-tl-dot--signal { background: #D97706; box-shadow: 0 0 0 2px rgba(217,119,6,.18); }

/* ── II. Rank mock — rec stack ───────────────────────────────────────── */
.m-stack { display: flex; flex-direction: column; gap: 8px; }
.m-rec {
  background: var(--elevated);
  border: 0.7px solid rgba(28,28,32,.06);
  border-radius: var(--r-lg);
  padding: 11px 13px;
  font-family: var(--font-sans);
  box-shadow: var(--sh-raised-card);
  transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.m-rec--top {
  border-color: rgba(74,110,224,.32);
  box-shadow:
    0 0 0 3px rgba(74,110,224,.10),
    0 0 0 0.7px rgba(28,28,32,.07),
    inset 0 1px 0 0 rgba(255,255,255,.95),
    inset 0 -1px 2px 0 rgba(28,28,32,.08),
    0 1px 2px rgba(28,28,32,.05),
    0 4px 10px rgba(28,28,32,.06),
    0 8px 22px rgba(28,28,32,.05);
}
.m-rec-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.m-rec-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-30);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.m-rec-age {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-30);
  margin-left: auto;
}
.m-rec-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-92);
  line-height: 1.35;
  margin: 0 0 3px;
}
.m-rec-line {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-58);
  letter-spacing: .015em;
  margin: 0;
}

/* ── III. Ship mock — claude code prompt + actions + impact ──────────── */
.m-prompt {
  background: var(--surface-raised, #FBFBF8);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-raised-card);
}
.m-prompt-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-58);
  letter-spacing: .03em;
  border-bottom: 0.7px solid rgba(28,28,32,.06);
}
.m-prompt-icon { color: var(--clay); font-size: 12px; }
.m-prompt-label { color: var(--ink-72); }
.m-prompt-meta { color: var(--ink-45); font-size: 10px; }
.m-prompt-copy {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-45);
  background: var(--elevated);
  border: 0.7px solid rgba(28,28,32,.08);
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  letter-spacing: .04em;
}
.m-prompt-copy:hover { color: var(--ship); border-color: rgba(26,154,90,.4); background: var(--ship-bg); }
.m-prompt-body {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-72);
  margin: 0;
  padding: 12px 14px 14px;
  white-space: pre-wrap;
}
.m-actions { display: flex; gap: 8px; margin-top: 4px; }
.m-act {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  border: 0;
  cursor: pointer;
}
.m-act--primary {
  background: var(--ink);
  color: #F8F8FA;
  box-shadow: var(--sh-btn-dark);
}
.m-act--primary:hover { background: #000; }
.m-act--ghost {
  background: var(--surface);
  color: var(--ink-58);
  border: 0;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.04),
    0 1px 1px rgba(28,40,80,.04);
  transition: background-color .18s cubic-bezier(.22,1,.36,1), box-shadow .18s cubic-bezier(.22,1,.36,1), transform .18s cubic-bezier(.22,1,.36,1);
}
.m-act--ghost:hover { color: var(--ink-92); box-shadow: 0 0 0 0.7px rgba(28,28,32,.16), inset 0 1px 0 0 #FFFFFF, inset 0 -0.5px 0 0 rgba(0,0,0,.05), 0 2px 4px rgba(28,40,80,.06); }
.m-act--ghost:active { transform: translateY(.5px) scale(.985); }
.m-impact {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ship);
  background: var(--ship-bg);
  border: 0.7px solid rgba(26,154,90,.20);
  border-radius: 999px;
  letter-spacing: .015em;
  margin-top: 4px;
  width: fit-content;
}
.m-impact-dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--ship);
  box-shadow: 0 0 0 2px rgba(26,154,90,.18), 0 0 6px rgba(26,154,90,.4);
  animation: pulse 2.4s var(--ease-out) infinite;
}
.m-impact-text strong { font-weight: 600; }

/* ── IV. Remember mock — decision ledger ─────────────────────────────── */
.m-ledger { display: flex; flex-direction: column; gap: 0; }
.m-led {
  display: grid;
  grid-template-columns: 42px 60px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 0.7px solid rgba(28,28,32,.05);
}
.m-led:last-child { border-bottom: 0; }
.m-led-wk {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-45);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.m-led-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-92);
  line-height: 1.4;
}
.m-led-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-58);
  letter-spacing: .015em;
  text-align: right;
}

/* Responsive collapse */
@media (max-width: 980px) {
  .dept-grid, .dept-grid--reverse {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .dept-grid--reverse .dept-copy { order: 1; }
  .dept-grid--reverse .dept-mock { order: 2; }
  .dept-grid::before, .dept-grid--reverse::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BEVEL SIGNATURE — the marks that make this distinctly bevel
   These build on top of the design tokens already above
   to inject Bevel's distinct identity: the literal beveled corner,
   the clay (clay #C84A1F) accent over neutral, CLI prompt prefixes,
   the 12h cron rhythm motif, and the artisan workshop wax-seal.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. The literal BEVEL — diagonal corner cut on focal elements.
   The top-right corner is sliced at 45° to make the product name visual.
   Subtle (8px), not gimmicky. ── */
.bevel-cut {
  --cut: 14px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    0 100%
  );
}

/* The bevel edge gets its own thin highlight stripe so the cut reads as
   intentional craftsmanship, not a clipping accident. */
.bevel-cut-frame {
  position: relative;
}
.bevel-cut-frame::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 49.4%, var(--clay) 49.4%, var(--clay) 50.6%, transparent 50.6%);
  opacity: 0.7;
  z-index: 2;
}

/* ── 2. CLAY-tinted focus + interaction — Bevel's warm spark ── */
.hero-input:focus-within {
  border-color: rgba(74,110,224, 0.55) !important;
  box-shadow:
    0 0 0 3px rgba(74,110,224, 0.10),
    var(--sh-btn-light) !important;
}
.dept-link:hover .arrow-mono { color: var(--clay); }

/* ── 3. CLI prompt prefix — Bevel's terminal voice. The `>` glyph
   appears before key mono labels (claude code prompt, file paths, etc.)
   without changing the markup — purely typographic. ── */
.cli-prompt::before {
  content: "› ";
  color: var(--clay);
  font-weight: 600;
  letter-spacing: 0;
}

/* Stronger CLI marker for prompt block headers — `$` like a real shell. */
.cli-shell::before {
  content: "$ ";
  color: var(--ink-45);
  font-weight: 500;
}

/* ── 4. The 12-TICK CRON RHYTHM — a tiny visual heartbeat below the
   "watching, every 12h" eyebrow that recurs across the page. 12 short
   tick marks, the 12th highlighted clay. Always-on motif. ── */
.cron-rhythm {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 6px;
  margin-left: 10px;
  opacity: 0.6;
}
.cron-rhythm span {
  width: 1px;
  height: 4px;
  background: var(--ink-30);
  border-radius: 0.5px;
}
.cron-rhythm span:nth-child(12n) {
  background: var(--clay);
  height: 6px;
}
.cron-rhythm span:nth-child(6n) { height: 5px; }

/* ── 5. WAX-SEAL stamp — a circular pressed mark for "shipped" /
   "stamped & delivered" surfaces. Sits in a corner like an artisan's
   workshop mark. ── */
.wax-seal {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.4) 0%, transparent 40%),
    linear-gradient(135deg, #C84A1F 0%, #9C3618 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  text-shadow: 0 0.5px 0.5px rgba(0,0,0,.18);
  transform: rotate(-8deg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.16),
    inset 0 1px 1px rgba(255,255,255,.32),
    inset 0 -1px 2px rgba(0,0,0,.20),
    0 4px 8px rgba(74,110,224,.18),
    0 8px 16px rgba(28,28,32,.06);
}
.wax-seal::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 0.7px solid rgba(255,255,255,.30);
  pointer-events: none;
}

/* ── 6. THE LOOP RIBBON — Bevel's signature 4-stage cycle as a footer
   ribbon. "watch ▸ rank ▸ ship ▸ remember" persistent reminder that
   the product IS the loop. ── */
.loop-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-45);
}
.loop-ribbon-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.loop-ribbon-stage::before {
  content: "▸";
  color: var(--clay);
  font-size: 9px;
}
.loop-ribbon-stage:hover { color: var(--ink-92); }
.loop-ribbon-stage:hover::before { color: var(--clay); }

/* ── 7. NOTEBOOK-MARGIN motif on long content blocks — a subtle dashed
   left-edge line that evokes a college-rule notebook page. Bevel keeps
   logs; this is the visual nod. ── */
.notebook-margin {
  border-left: 0.7px dashed var(--bd-mid);
  padding-left: 18px;
}

/* ── 8. ASYMMETRIC HOVER on rec-card / packet-row — when hovering, the
   left-stripe widens into a clay tongue. Custom to bevel:
   even hover lift. ── */
.rec-card-bevel,
.packet-row {
  position: relative;
}
.rec-card-bevel::before,
.packet-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 0;
  background: var(--clay);
  border-radius: 0 1px 1px 0;
  transition: width 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.rec-card-bevel:hover::before,
.packet-row:hover::before {
  width: 2px;
}

/* Footer loop ribbon spacing */
.footer-loop {
  padding: 22px 0 18px;
  border-top: 0.7px dashed var(--bd-mid);
  border-bottom: 0.7px dashed var(--bd-mid);
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════════
   COCKPIT REDESIGN — autopilot tickets, the path heatmap, full cockpit mock.
   Added when the app pivoted from "monday packet" → "autopilot cockpit."
   Mirrors agent-ux-mock-v4 (the new production /app).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero trio: ticket icons (verb prefix) ───────────────────────────── */
.trio-rec {
  position: relative;
}
/* Uniform muted-stone verb icons, like the real action-panel.tsx —
   the icon's shape carries the verb, not its color. No tinted backgrounds. */
.trio-kind {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a8a29e;          /* stone-400, matches /app verb icons */
}
/* Push title right to make room for the icon */
.trio-rec .trio-title {
  padding-left: 28px;
}

/* ── Watch section: connection pins by source ───────────────────────── */
.m-pin--posthog { background: #f59e0b; }
.m-pin--gh      { background: #1a1a1f; }
.m-pin--vercel  { background: #1a1a1f; }

/* Activity stream inside the watch mock */
.m-activity {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-act-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ink-72);
  font-weight: 450;
}
.m-act-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  margin-top: 6px;
  background: var(--clay);
}
.m-act-dot--scan    { background: var(--clay); }
.m-act-dot--scanned { background: var(--clay); }
.m-act-dot--signal  { background: var(--watch); }
.m-act-dot--ship    { background: var(--ship); }
.m-act-txt {
  font-family: var(--font-sans);
  letter-spacing: -0.005em;
}
.m-act-when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-45);
  font-feature-settings: "tnum";
}

/* ── Write section: the autopilot mock — pixel-faithful action-panel.tsx
   chrome. White panel, mono labels, muted stone-400 icons, UPPERCASE mono
   chips with the recessed-glass shadow recipe, tight 4-ticket density. */
.m-autopilot {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
    rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
    rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}
.m-ap-head {
  display: flex;
  align-items: center;
  padding: 16px 16px 12px;
}
.m-ap-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a8a29e;     /* stone-400 */
}
.m-ap-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #d6d3d1;     /* stone-300 */
  letter-spacing: 0.04em;
}
.m-ap-pulse {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fbbf24;     /* amber-400, matches action-panel.tsx */
  animation: bevelLandPulse 1.6s infinite ease-in-out;
}
@keyframes bevelLandPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Section headers + bodies inside the panel. */
.m-ap-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a8a29e;
  padding: 0 24px 6px;
}
.m-ap-sub--alt {
  padding-top: 14px;
  margin-top: 0;
  border-top: 1px solid #f5f5f4;
}

/* Tickets stack — much tighter rows than v0, no boxed-in card chrome.
   The fresh-tint background applies to the first ticket only. */
.m-ap-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 16px 0;
}
.m-ap-tk {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  padding: 8px 8px;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  transition: background-color 500ms;
}
.m-ap-tk:first-child {
  background: #f0f7ff;      /* fresh sky-blue tint per action-panel.tsx */
}
.m-ap-tk:hover { background: #fafaf9; }
.m-ap-tk:first-child:hover { background: #f0f7ff; }

.m-ap-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a8a29e;          /* muted stone-400, matches /app exactly */
  margin-top: 3px;
}
/* No tinted icon backgrounds — icons are monoline only, color encoded
   via the icon shape itself, not its container. */
.m-ap-icon--code,
.m-ap-icon--post,
.m-ap-icon--outreach,
.m-ap-icon--research,
.m-ap-icon--watch { color: #a8a29e; }
.m-ap-icon--sm {
  width: 18px;
  height: 18px;
  margin-top: 0;
}
.m-ap-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.m-ap-title {
  font-size: 12px;
  font-weight: 400;
  color: #1c1917;          /* stone-900 */
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.m-ap-hint {
  font-size: 10.5px;
  color: #a8a29e;
  line-height: 1.4;
  margin-top: 2px;
}
.m-ap-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* UPPERCASE mono chips with recessed-glass shadow — matches the real
   action-panel.tsx TicketChip recipe character-for-character. */
.m-ap-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: default;
  box-shadow:
    0 0 0 0.7px rgba(0,0,0,0.06),
    inset 0 1px 0 0 rgba(255,255,255,0.7),
    inset 0 -0.5px 1.5px 0 rgba(0,0,0,0.1),
    0 1px 2px rgba(0,0,0,0.06);
  transition: background-color 150ms;
}
.m-ap-chip--start {
  background: #EAF7F0;
  color: #1A9A5A;
  border-color: rgba(26,154,90,0.18);
}
.m-ap-chip--start:hover { background: #dcefe3; }
.m-ap-chip--dismiss {
  background: #E6E6EB;
  color: #6B6B76;
  border-color: rgba(107,97,87,0.22);
}
.m-ap-chip--dismiss:hover { background: #d8d8de; }

/* generate-more footer — copy on top, light button below.
   Matches DoNextFooter (action-panel.tsx). */
.m-ap-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 24px 16px;
}
.m-ap-genmeta {
  font-size: 11px;
  color: #a8a29e;
  line-height: 1.5;
  margin: 0;
}
.m-ap-genmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #1c1917;
  background: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.04),
    0 1px 1px rgba(28,40,80,.04);
  transition: background-color 150ms;
}
.m-ap-genmore:hover { background: #fafaf9; }

/* Quick actions — lighter rows, full-row hover target, no chips. */
.m-ap-qa {
  list-style: none;
  padding: 0 16px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-ap-qa li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  font-size: 12px;
  color: #44403c;          /* stone-700 */
  border-radius: 6px;
  cursor: default;
  letter-spacing: -0.005em;
  transition: background-color 150ms;
}
.m-ap-qa li:hover { background: #fafaf9; }
.m-ap-qa li:hover .m-ap-icon { color: #57534e; }

/* ── Ship section: extra button variant (mark shipped) ──────────────── */
.m-act--light {
  background: var(--surface);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--bd-mid),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.m-act--light:hover {
  background: var(--surface-2);
}

/* ── The path: GitHub-style shipping heatmap ─────────────────────────── */
.m-card--path { padding-bottom: 14px; }
.m-heatmap {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  gap: 8px 6px;
  padding: 8px 4px 4px;
}
.m-hm-months {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.m-hm-days {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-items: center;
  line-height: 1;
}
.m-hm-grid {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 2.5px;
  grid-auto-flow: column;
}
.m-hm-cell {
  background: var(--surface-darker);
  border-radius: 2px;
  aspect-ratio: 1;
}
.m-hm-cell--1 { background: #c5d4f7; }
.m-hm-cell--2 { background: #9bb1ef; }
.m-hm-cell--3 { background: #5d80e5; }
.m-hm-cell--4 { background: #2f56c8; }
.m-hm-cell--out { opacity: 0.4; }
.m-hm-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-45);
}
.m-hm-lg-label {
  letter-spacing: 0.06em;
}
.m-hm-lg-cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--surface-darker);
}
.m-hm-lg-cell.m-hm-cell--1 { background: #c5d4f7; }
.m-hm-lg-cell.m-hm-cell--2 { background: #9bb1ef; }
.m-hm-lg-cell.m-hm-cell--3 { background: #5d80e5; }
.m-hm-lg-cell.m-hm-cell--4 { background: #2f56c8; }
.m-hm-lg-spacer {
  flex: 1;
}
.m-hm-lg-count {
  color: var(--ink-72);
  letter-spacing: -0.005em;
  font-size: 11px;
  font-family: var(--font-sans);
}

/* ════════════════════════════════════════════════════════════════════════
   THE COCKPIT — full app demo: sidebar + chat thread + autopilot panel.
   Mirrors agent-ux-mock-v4 layout: 280px sidebar | flex center | 280px right.
   ════════════════════════════════════════════════════════════════════════ */

.app-frame--cockpit {
  background: var(--surface);
  border-radius: var(--r-3xl);
  box-shadow: var(--sh-physical-strong);
  overflow: hidden;
  margin-top: 28px;
}

/* The path: collapsed memo pill above the cockpit grid */
.app-path {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--bd-soft);
}
.app-path .ap-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
  flex-shrink: 0;
}
.app-path .ap-text {
  font-size: 12.5px;
  color: var(--ink-72);
  flex: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-path .ap-caret {
  font-size: 10px;
  color: var(--ink-45);
}

.app-cockpit {
  display: grid;
  grid-template-columns: 248px 1fr 268px;
  min-height: 540px;
  background: #fafaf8;
}
@media (max-width: 900px) {
  .app-cockpit { grid-template-columns: 1fr; }
  .ck-sidebar, .ck-autopilot { display: none; }
}

/* ── Left sidebar: bevel mark + connections + chats + footer ──────── */
.ck-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--bd-soft);
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
.ck-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bd-soft);
}
.ck-side-mark { color: var(--ink); }
.ck-side-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: -0.005em;
}
.ck-side-flex { flex: 1; }
.ck-side-new {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--ink-58);
  font-size: 15px;
  cursor: default;
  transition: background var(--d-fast);
}
.ck-side-new:hover { background: var(--surface-2); }

.ck-side-section {
  padding: 14px 14px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.ck-cnx {
  list-style: none;
  padding: 0 6px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ck-cnx-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--r-md);
  cursor: default;
  transition: background var(--d-fast);
}
.ck-cnx-row:hover { background: var(--surface-2); }
.ck-cnx-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ink-45);
  justify-self: center;
}
.ck-cnx-dot--posthog { background: #f59e0b; }
.ck-cnx-dot--gh      { background: var(--ink); }
.ck-cnx-dot--vercel  { background: var(--ink); }
.ck-cnx-name {
  font-weight: 500;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: -0.005em;
}
.ck-cnx-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-45);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100px;
}

.ck-chats {
  list-style: none;
  padding: 0 6px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  overflow: hidden;
}
.ck-chat-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  cursor: default;
  transition: background var(--d-fast);
}
.ck-chat-row:hover { background: var(--surface-2); }
.ck-chat-row.is-current { background: var(--surface-2); }
.ck-chat-row.is-current .ck-chat-title { color: var(--ink); }
.ck-chat-title {
  flex: 1;
  font-size: 12px;
  color: var(--ink-72);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-chat-when {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-45);
  flex-shrink: 0;
}

.ck-side-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-top: 1px solid var(--bd-soft);
}
.ck-side-ava {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.ck-side-acct {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.ck-side-mail {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.ck-side-plan {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-45);
  letter-spacing: 0.04em;
}
.ck-side-gear {
  color: var(--ink-45);
  font-size: 13px;
  cursor: default;
}
.ck-side-gear:hover { color: var(--ink); }

/* ── Center: chat thread ─────────────────────────────────────────────── */
.ck-thread {
  padding: 22px 28px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  position: relative;
}

.ck-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 580px;
}
.ck-msg--bevel { align-self: flex-start; }
.ck-msg--user  { align-self: flex-end; max-width: 480px; }

.ck-msg-who {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-45);
  text-transform: lowercase;
}
.ck-msg-think {
  color: var(--watch);
  animation: bevelLandPulse 1.6s infinite ease-in-out;
}
.ck-msg-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ck-msg-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink);
  letter-spacing: -0.002em;
}
.ck-msg-body code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--bd-soft);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.ck-msg-bubble {
  align-self: flex-end;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  padding: 8px 14px;
  border-radius: 18px 18px 6px 18px;
  box-shadow: var(--sh-tile-soft);
  letter-spacing: -0.005em;
  max-width: 440px;
}

.ck-msg-trace {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 0 0;
}
.ck-tr-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-58);
}
.ck-tr-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink-30);
}
.ck-tr-dot--done { background: var(--ship); }

.ck-prompt {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--bd-soft);
  overflow: hidden;
}
.ck-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--bd-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-72);
}
.ck-prompt-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-58);
  background: none;
  border: none;
  cursor: pointer;
}
.ck-prompt-copy:hover { color: var(--ink); }
.ck-prompt-body {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink);
  padding: 12px;
  margin: 0;
  white-space: pre;
  overflow-x: auto;
}

.ck-msg-actions {
  display: flex;
  gap: 8px;
  padding: 4px 0;
}
.ck-action {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-md);
  cursor: default;
  border: none;
  letter-spacing: -0.005em;
  transition: background var(--d-fast);
}
.ck-action--primary {
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--sh-btn-dark);
}
.ck-action--light {
  background: var(--surface);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--bd-mid),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ck-action--ghost {
  background: transparent;
  color: var(--ink-58);
}
.ck-action--ghost:hover { color: var(--ink); }

.ck-caret {
  display: inline-block;
  width: 6px;
  height: 13px;
  background: var(--ink);
  vertical-align: -2px;
  margin-left: 2px;
  animation: ckBlink 1s infinite;
}
@keyframes ckBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Composer — anchored inside the demo */
.ck-composer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-tile-soft);
  align-self: center;
  width: 100%;
  max-width: 480px;
}
.ck-attach {
  color: var(--ink-45);
  font-size: 14px;
}
.ck-composer input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ck-composer input::placeholder { color: var(--ink-45); }
.ck-send {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: var(--sh-btn-dark);
  cursor: pointer;
}

/* ── Right: autopilot panel ─────────────────────────────────────────── */
.ck-autopilot {
  background: var(--surface);
  border-left: 1px solid var(--bd-soft);
  display: flex;
  flex-direction: column;
  padding: 12px 12px 14px;
  gap: 8px;
}
.ck-ap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 10px;
  border-bottom: 1px solid var(--bd-soft);
}
.ck-ap-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.ck-ap-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--watch);
  letter-spacing: 0.04em;
}
.ck-ap-pulse {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--watch);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
  animation: bevelLandPulse 1.6s infinite ease-in-out;
}
.ck-ap-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
  padding: 6px 4px 2px;
}
.ck-ap-sub--alt {
  border-top: 1px solid var(--bd-soft);
  margin-top: 6px;
  padding-top: 12px;
}
.ck-ap-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ck-tk {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 10px 10px 10px 8px;
  border-radius: var(--r-md);
  background: rgba(74, 110, 224, 0.04);
  box-shadow: inset 0 0 0 1px rgba(74, 110, 224, 0.08);
}
.ck-tk-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin-top: 1px;
}
.ck-tk-icon--code     { color: var(--clay); }
.ck-tk-icon--outreach { color: var(--ship); }
.ck-tk-icon--research { color: var(--watch); }
.ck-tk-icon--post     { color: var(--override); }
.ck-tk-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ck-tk-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.ck-tk-hint {
  font-size: 10.5px;
  color: var(--ink-58);
  line-height: 1.4;
}
.ck-tk-chips {
  display: flex;
  gap: 5px;
  margin-top: 3px;
}
.ck-tk-chip {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--r-md);
  letter-spacing: -0.005em;
  cursor: default;
}
.ck-tk-chip--start {
  background: var(--ship-bg);
  color: var(--ship);
  box-shadow:
    inset 0 0 0 1px rgba(26, 154, 90, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ck-tk-chip--dismiss {
  background: #E6E6EB;
  color: var(--skip);
  box-shadow:
    inset 0 0 0 1px rgba(28, 28, 32, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ck-ap-gen {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px 4px;
}
.ck-ap-gen-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-72);
}
.ck-ap-gen-meta {
  font-size: 10px;
  color: var(--ink-45);
  line-height: 1.4;
}
.ck-ap-qa {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ck-ap-qa li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  font-size: 12px;
  color: var(--ink-72);
  border-radius: var(--r-md);
  cursor: default;
  letter-spacing: -0.005em;
  transition: background var(--d-fast);
}
.ck-ap-qa li:hover { background: var(--surface-2); }
.ck-ap-qa-ic {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clay);
}

/* Mobile collapse — hide rails, stack content */
@media (max-width: 760px) {
  .app-path { font-size: 11px; padding: 10px 14px; }
  .app-path .ap-text { font-size: 11.5px; }
  .ck-thread { padding: 18px; }
  .ck-msg-body p { font-size: 13px; }
  .ck-prompt-body { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE FINDING CARD — single-card demo that replaces the 3-pane cockpit.
   The "omg" lands in 4 lines: bevel headline + 3 evidence bullets + a
   collapsed claude code prompt + the three lifecycle buttons. Subtle
   sky-blue "fresh ticket" tint, mono inline code spans for the real
   repo/url references, staggered bullet fade-in. Zero chat chrome.
   ════════════════════════════════════════════════════════════════════════ */

.section-finding {
  padding: 120px 24px 100px;
  position: relative;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(74,110,224,0.04) 0%, transparent 70%),
    var(--bg);
  border-top: 1px solid var(--bd-soft);
  border-bottom: 1px solid var(--bd-soft);
}

.section-finding .section-head {
  margin-bottom: 56px;
}

.finding-card {
  max-width: 640px;
  margin: 0 auto;
  background: #f7faff;                        /* subtle sky-blue, same family as /app's #f0f7ff fresh-ticket */
  border: 1px solid rgba(74, 110, 224, 0.16);
  border-radius: 18px;
  padding: 28px 30px 22px;
  box-shadow:
    rgba(14, 63, 126, 0.05) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(74, 110, 224, 0.06) 0px 8px 16px -8px,
    rgba(14, 63, 126, 0.08) 0px 28px 48px -20px;
  position: relative;
  text-align: left;
  /* Soft fade-in for the whole card on viewport entry. */
  animation: finding-card-in 600ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes finding-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.finding-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.finding-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clay);                          /* bevel blue */
  background: rgba(74, 110, 224, 0.12);
  box-shadow: inset 0 0 0 1px rgba(74, 110, 224, 0.22);
  flex-shrink: 0;
}
.finding-title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink-92);
  margin: 0;
  font-weight: 500;
}

/* Bullets — each fades in with a 200ms stagger after the card lands.
   Mono inline code spans inside read as real repo/URL references. */
.finding-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.finding-bullets li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-85);
  font-weight: 450;
  letter-spacing: -0.005em;
  opacity: 0;
  animation: finding-bullet-in 480ms cubic-bezier(.22,1,.36,1) both;
}
.finding-bullets li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--clay);
  margin-top: 8px;
}
.finding-bullets li:nth-child(1) { animation-delay: 300ms; }
.finding-bullets li:nth-child(2) { animation-delay: 500ms; }
.finding-bullets li:nth-child(3) { animation-delay: 700ms; }
@keyframes finding-bullet-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Inline code spans — matches /app's markdown.tsx inline code recipe:
   mono, bg-stone-100, hairline border, stone-800 text. Reads as real
   code from a real repo, not marketing text. */
.finding-bullets code,
.finding-cta-line code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.85);     /* slightly translucent over the sky bg */
  border: 1px solid rgba(28, 28, 32, 0.08);
  color: #292524;                             /* stone-800 */
  letter-spacing: -0.005em;
  word-break: break-word;
}

.finding-cta-line {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-58);
  margin: 0 0 12px;
  font-weight: 450;
  letter-spacing: -0.005em;
}

/* Collapsed claude code prompt — same chrome recipe as the cp-prompt
   block (matches /app's CollapsibleCodeBlock). Sits on a clean stone
   surface inside the sky-tinted card so it reads as a distinct artifact. */
.finding-prompt {
  background: #fafaf9;                       /* stone-50 */
  border: 1px solid #e7e5e4;                 /* stone-200 */
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 18px;
}
.finding-prompt summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(231, 229, 228, 0.7);
  transition: background-color 150ms;
}
.finding-prompt summary::-webkit-details-marker { display: none; }
.finding-prompt summary:hover { background: #f5f5f4; }
.finding-prompt-caret {
  color: #a8a29e;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(.22,1,.36,1);
}
.finding-prompt[open] .finding-prompt-caret { transform: rotate(90deg); }
.finding-prompt-lang {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a8a29e;
  flex-shrink: 0;
}
.finding-prompt-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #a8a29e;
  margin-left: auto;
  padding-right: 8px;
}
.finding-prompt-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f5f5f4;
  border: 1px solid #e7e5e4;
  color: #78716c;
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.finding-prompt-copy:hover {
  background: #e7e5e4;
  color: #44403c;
}
.finding-prompt-body {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: #292524;
  white-space: pre;
  overflow-x: auto;
}

/* Three action buttons — match /app's ChatActions trio exactly
   (track impact = dark, mark done = light, skip = ghost). */
.finding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.finding-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: none;
  cursor: default;        /* non-interactive demo button */
  transition: background-color 180ms cubic-bezier(.22,1,.36,1), transform 180ms;
}
.finding-btn--dark {
  background: #1A1A1F;
  color: #F8F8FA;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.14),
    inset 0 1px 0 0 rgba(255,255,255,0.16),
    inset 0 -0.5px 1.5px 0 rgba(0,0,0,0.22),
    0 1px 2px rgba(0,0,0,0.08);
}
.finding-btn--dark:hover { background: #2a2a30; }
.finding-btn--light {
  background: #ffffff;
  color: #1c1917;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.04),
    0 1px 1px rgba(28,40,80,.04);
}
.finding-btn--light:hover { background: #fafaf9; }
.finding-btn--ghost {
  background: transparent;
  color: #57534e;
  box-shadow: 0 0 0 1px rgba(28,28,32,0.06);
}
.finding-btn--ghost:hover { background: #fafaf9; color: #1c1917; }

/* Respect reduced-motion — kill the stagger animations for users who
   ask for less movement, fall back to static layout. */
@media (prefers-reduced-motion: reduce) {
  .finding-card,
  .finding-bullets li {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Mobile collapse */
@media (max-width: 640px) {
  .finding-card { padding: 22px 20px 18px; max-width: 100%; }
  .finding-title { font-size: 17px; }
  .finding-bullets li { font-size: 13.5px; }
  .finding-actions { flex-direction: column; align-items: stretch; }
  .finding-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   .cp-* — PIXEL-FAITHFUL agent-ux-mock-v4 cockpit demo.
   Mirrors the real /app: bg #fafaf8 canvas, three windowed panels (sidebar,
   center, action) with the same shadow recipe, exact typography, exact
   button chrome. Drop-in replacement for the previous .app-cockpit demo.
   ════════════════════════════════════════════════════════════════════════ */

/* The whole cockpit sits on a warm stone canvas (matches bg-[#fafaf8] in
   page.tsx) and is bounded so the demo fits inside the landing page width. */
/* The cockpit demo carries the same pixel sizes as the real /app
   (300px sidebars, 13.5px chat text, 14px buttons) so structurally it's
   a perfect clone. But /app runs on a ~1480px viewport while this
   landing's demo container is ~1180px, so those native pixel sizes
   end up looking proportionally too BIG inside the demo. `zoom`
   scales the whole cockpit (including layout flow + heights) so it
   reads as a true 1:1 screenshot of /app, sized down to fit the page. */
.cp {
  position: relative;
  margin: 36px auto 0;
  max-width: 1280px;
  height: 640px;
  zoom: 0.86;
  background: #fafaf8;
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(28,28,32,0.08),
    inset 0 1px 0 0 rgba(255,255,255,0.7),
    0 18px 48px -28px rgba(20,30,60,0.18),
    0 36px 80px -40px rgba(20,30,60,0.16);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  padding: 12px;
}

/* On desktop, three positioned panels mirror the fixed `left-3` /
   `right-3` layout of the real cockpit. */
@media (min-width: 980px) {
  .cp {
    grid-template-columns: 300px 1fr 300px;
    column-gap: 12px;
    padding: 12px;
  }
}

/* ── Shared: windowed panel chrome ─────────────────────────────────────── */
.cp-sidebar,
.cp-action {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
    rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
    rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Shared section: mono uppercase label inside both panels ───────────── */
.cp-section {
  padding: 0 12px;
  margin-bottom: 12px;
}
.cp-section-head {
  padding: 6px 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cp-section-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a8a29e;     /* stone-400 */
  font-weight: 400;
}
.cp-section-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  color: #d6d3d1;     /* stone-300 */
}

/* ───────────────────────────────────────────────────────────────────────
   LEFT SIDEBAR — sidebar.tsx
   ─────────────────────────────────────────────────────────────────────── */
.cp-sidebar { display: none; }
@media (min-width: 980px) { .cp-sidebar { display: flex; } }

.cp-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
  flex-shrink: 0;
}
.cp-side-mark { color: #1c1917; }   /* stone-900 */
.cp-side-name {
  font-size: 13px;
  font-weight: 500;
  color: #1c1917;
  letter-spacing: -0.005em;
}
.cp-side-new {
  margin-left: auto;
  height: 28px;
  width: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a8a29e;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
.cp-side-new:hover {
  background: #fafaf9;   /* stone-50 */
  color: #1c1917;
}

.cp-side-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px 12px;
}

/* Connection + chat rows live in shared `cp-side-list` ul */
.cp-side-list {
  list-style: none;
  padding: 0 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-cnx,
.cp-chat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms;
}
.cp-cnx:hover,
.cp-chat:hover { background: #fafaf9; }
.cp-chat.is-current { background: #fafaf9; }

.cp-cnx-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.cp-cnx-name {
  font-size: 12px;
  color: #1c1917;
  letter-spacing: -0.005em;
}
.cp-cnx-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #a8a29e;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Past chat row — matches /app PastChatRow exactly: title block (stone-800)
   + age block (mono 10px stone-400) stacked, hover bg-stone-50, hover
   title color stone-900. No "is-current" highlight; /app doesn't track it. */
.cp-chat {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 6px 8px;
}
.cp-chat-title {
  font-size: 12px;
  color: #292524;       /* stone-800, matches /app */
  letter-spacing: -0.005em;
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  transition: color 150ms;
}
.cp-chat:hover .cp-chat-title { color: #1c1917; }   /* stone-900 on hover */
.cp-chat-age {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #a8a29e;
}

/* Account footer */
.cp-side-foot {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid #f5f5f4;     /* stone-100 */
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-side-ava {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #e7e5e4;
  color: #44403c;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.cp-side-acct {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cp-side-handle {
  font-size: 12px;
  color: #1c1917;
  letter-spacing: -0.005em;
}
.cp-side-plan {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #a8a29e;
}
.cp-side-gear {
  height: 28px;
  width: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a8a29e;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
.cp-side-gear:hover {
  background: #fafaf9;
  color: #1c1917;
}

/* ───────────────────────────────────────────────────────────────────────
   CENTER COLUMN — the path memo pill + thread + composer
   ─────────────────────────────────────────────────────────────────────── */
.cp-center {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  gap: 12px;
}

/* the path collapsed pill (roadmap-memo.tsx collapsed state) */
.cp-path {
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e7e5e4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  align-self: center;
  width: 100%;
  max-width: 760px;
  cursor: pointer;
  transition: background-color 150ms;
  box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px;
}
.cp-path:hover { background: #fafaf9; }
.cp-path-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a8a29e;
  flex-shrink: 0;
}
.cp-path-text {
  font-size: 12px;
  color: #1c1917;
  font-weight: 500;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.cp-path-day {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8a29e;
  flex: 1;
  text-align: right;
  margin-left: auto;
  flex-shrink: 0;
}
.cp-path-caret {
  color: #a8a29e;
  flex-shrink: 0;
}

/* The thread itself — bg #fafaf8 with masked top edge. Sits flex:1 so
   the composer pins to the bottom; no overflow since we trimmed the
   content to one user pill + one bevel response with collapsed prompt. */
.cp-thread {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 20px 8px;
  background: #fafaf8;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20px, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20px, black 100%);
}

/* A row holds one bubble. User aligns right, bevel aligns left. */
.cp-row {
  display: flex;
  width: 100%;
}
.cp-row--user  { justify-content: flex-end; }
.cp-row--bevel { justify-content: flex-start; }

/* User text bubble = dark stone-900 pill rounded except bottom-right. */
.cp-bubble--user {
  background: #1c1917;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 16px 16px 6px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 88%;
  letter-spacing: -0.002em;
}

/* User click action (verb chip / ticket start) = light pill with verb icon. */
.cp-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #ffffff;
  color: #44403c;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.04),
    0 1px 1px rgba(28,40,80,.04);
}
.cp-action-pill svg { color: #78716c; }

/* Bevel bubble = no background, just text + trace + actions. */
.cp-bubble--bevel {
  max-width: 88%;
  color: #292524;     /* stone-800 */
  font-size: 13.5px;
  line-height: 1.6;
}
.cp-bubble--bevel p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.62;
  color: #292524;
}
.cp-bubble--bevel p:last-child { margin-bottom: 0; }
.cp-bubble--bevel code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: #f5f5f4;
  border: 1px solid #e7e5e4;
  padding: 1px 5px;
  border-radius: 4px;
  color: #1c1917;
}
.cp-bubble--bevel strong {
  font-weight: 600;
  color: #1c1917;          /* stone-900 — bolder than body for emphasis */
}
/* Bullets inside a bevel bubble — matches markdown.tsx's ul renderer:
   list-disc list-outside, ml-5, mb-2.5, space-y-1, li text-[13.5px]. */
.cp-bullets {
  list-style: disc outside;
  padding-left: 20px;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-bullets li {
  font-size: 13.5px;
  line-height: 1.6;
  color: #292524;       /* stone-800 */
  letter-spacing: -0.002em;
}
.cp-bullets li::marker {
  color: #a8a29e;        /* stone-400 — muted dot, not loud */
}

.cp-msg-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.cp-msg-who {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a8a29e;
}
.cp-msg-think {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #a8a29e;
  animation: cp-pulse 1.5s infinite ease-in-out;
}
@keyframes cp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Trace stack — character-for-character match to /app's TraceStack.
   `mb-2` (8px) before the body, `space-y-1.5` (6px) between rows.
   Tool rows: items-baseline + gap-1.5 + mono 10px stone-400 + 4px dot
   at mt-[5px] (baseline-aligned with the text). Text rows: italic
   stone-600 12.5px with a 2px left border. */
.cp-trace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.cp-trace-tool {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: #a8a29e;     /* stone-400 */
}
.cp-trace-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #d6d3d1;     /* stone-300 */
  flex-shrink: 0;
  margin-top: 5px;          /* /app uses mt-[5px] for baseline align */
}
.cp-trace-text {
  margin: 0;
  padding-left: 8px;
  border-left: 2px solid #e7e5e4;     /* stone-200 */
  font-size: 12.5px;
  line-height: 1.55;
  color: #57534e;        /* stone-600 */
  font-style: italic;
}

/* Code block (```prompt) inside a bevel bubble */
.cp-codeblock {
  background: #f5f5f4;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0;
  display: block;
  padding: 0;
  font-family: var(--font-mono);
}
.cp-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e7e5e4;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #78716c;
}
.cp-code-lang::before {
  content: "$ ";
  color: #4a6ee0;
  font-weight: 600;
}
.cp-code-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #a8a29e;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.cp-code-copy:hover { color: #1c1917; }
.cp-code-body {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: #292524;
  padding: 12px;
  white-space: pre;
  overflow-x: auto;
}

/* Chat actions (track impact / mark shipped / not shipping) */
.cp-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms, transform 180ms;
  border: none;
}
.cp-btn--dark {
  background: #1A1A1F;
  color: #F8F8FA;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.14),
    inset 0 1px 0 0 rgba(255,255,255,0.16),
    inset 0 -0.5px 1.5px 0 rgba(0,0,0,0.22),
    0 1px 2px rgba(0,0,0,0.08);
}
.cp-btn--dark:hover { background: #2a2a30; }
.cp-btn--light {
  background: #ffffff;
  color: #1c1917;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.04),
    0 1px 1px rgba(28,40,80,.04);
}
.cp-btn--light:hover { background: #fafaf9; }
.cp-btn--ghost {
  background: transparent;
  color: #57534e;
  box-shadow: 0 0 0 1px rgba(28,28,32,0.06);
}
.cp-btn--ghost:hover {
  background: #fafaf9;
  color: #1c1917;
}

/* NEXT chips — small light pills with → glyph */
.cp-next-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.cp-next-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #ffffff;
  color: #44403c;
  font-size: 11.5px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: color 150ms;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 1px 0 0 rgba(255,255,255,.6),
    0 1px 1px rgba(28,40,80,.04);
}
.cp-next-chip:hover { color: #1c1917; }
.cp-next-arrow { color: #a8a29e; }

.cp-caret {
  display: inline-block;
  width: 6px;
  height: 13px;
  background: #1c1917;
  vertical-align: -2px;
  margin-left: 2px;
  animation: cp-blink 1s infinite;
}
@keyframes cp-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Composer wrap — outer container holding the white composer card and
   the USAGE meter as siblings. Matches chat-thread.tsx layout: card
   first, UsageHint underneath, on the page background. */
.cp-composer-wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-composer {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  padding: 6px 6px 6px 12px;
  box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px;
}
.cp-composer-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cp-composer-attach {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #78716c;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms, color 150ms;
}
.cp-composer-attach:hover {
  background: #f5f5f4;
  color: #1c1917;
}
.cp-composer-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: #1c1917;
  padding: 6px 0;
  letter-spacing: -0.005em;
}
.cp-composer-input::placeholder { color: #a8a29e; }
.cp-composer-send {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #1A1A1F;
  color: #F8F8FA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.14),
    inset 0 1px 0 0 rgba(255,255,255,0.16),
    inset 0 -0.5px 1.5px 0 rgba(0,0,0,0.22),
    0 1px 2px rgba(0,0,0,0.08);
  transition: background-color 180ms, transform 180ms;
}
.cp-composer-send:hover { background: #2a2a30; }
.cp-composer-send:active { transform: translateY(0.5px) scale(.985); }

/* USAGE meter — sibling of the white composer card. Centered horizontally,
   on the page background. Matches UsageHint in chat-thread.tsx exactly:
   mono "USAGE" + 64×3px bar. */
.cp-usage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cp-usage-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8a29e;
}
.cp-usage-bar {
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: rgba(231, 229, 228, 0.7);
  overflow: hidden;
}
.cp-usage-fill {
  height: 100%;
  width: 28%;
  background: #78716c;
  border-radius: 999px;
}

/* ───────────────────────────────────────────────────────────────────────
   RIGHT: ACTION PANEL — action-panel.tsx
   ─────────────────────────────────────────────────────────────────────── */
.cp-action { display: none; }
@media (min-width: 980px) { .cp-action { display: flex; } }

.cp-action-head {
  display: flex;
  align-items: center;
  padding: 16px 16px 12px;
  flex-shrink: 0;
}
.cp-action-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a8a29e;
}
.cp-action-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #d6d3d1;
}
.cp-action-pulse {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fbbf24;     /* amber-400 */
  animation: cp-pulse 1.5s infinite ease-in-out;
}

.cp-action-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px 8px;
}

/* Tickets list — fresh rows have soft sky tint */
.cp-tickets {
  list-style: none;
  padding: 0 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18px, black calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 18px, black calc(100% - 18px), transparent 100%);
}

.cp-tk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 500ms;
}
.cp-tk.is-fresh { background: #f0f7ff; }

.cp-tk-icon {
  flex-shrink: 0;
  color: #a8a29e;
  margin-top: 3px;
}

.cp-tk-body {
  flex: 1;
  min-width: 0;
}
.cp-tk-title {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: #1c1917;
  margin: 0;
}
.cp-tk-hint {
  display: block;
  font-size: 10.5px;
  line-height: 1.4;
  color: #a8a29e;
  margin: 2px 0 0;
}
.cp-tk-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* TicketChip — UPPERCASE mono pill with the recessed-glass shadow */
.cp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms;
  box-shadow:
    0 0 0 0.7px rgba(0,0,0,0.06),
    inset 0 1px 0 0 rgba(255,255,255,0.7),
    inset 0 -0.5px 1.5px 0 rgba(0,0,0,0.1),
    0 1px 2px rgba(0,0,0,0.06);
}
.cp-chip--start {
  background: #EAF7F0;
  color: #1A9A5A;
  border-color: rgba(26,154,90,0.18);
}
.cp-chip--start:hover { background: #dcefe3; }
.cp-chip--dismiss {
  background: #E6E6EB;
  color: #6B6B76;
  border-color: rgba(107,97,87,0.22);
}
.cp-chip--dismiss:hover { background: #d8d8de; }

/* Generate-more footer */
.cp-gen {
  padding: 12px 8px 4px;
}
.cp-gen-copy {
  font-size: 11px;
  line-height: 1.5;
  color: #a8a29e;
  margin: 0 0 8px;
}
.cp-gen-btn {
  width: 100%;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #1c1917;
  background: #ffffff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 150ms;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.04),
    0 1px 1px rgba(28,40,80,.04);
}
.cp-gen-btn:hover { background: #fafaf9; }

/* Quick actions: lighter rows, no chips, full-row click */
.cp-qa {
  list-style: none;
  padding: 0 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-qa-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #44403c;
  transition: background-color 150ms;
  letter-spacing: -0.005em;
}
.cp-qa-row:hover { background: #fafaf9; }
.cp-qa-row:hover .cp-qa-ic { color: #57534e; }
.cp-qa-ic {
  color: #a8a29e;
  flex-shrink: 0;
  transition: color 150ms;
}

/* ════════════════════════════════════════════════════════════════════════
   .hm-* — PIXEL-FAITHFUL decisions-heatmap. Replaces the old .m-hm-* mock.
   Bevel-blue palette, 52-week × 7-day grid with Mon-Sun column-major order,
   "less / more" legend, hover detail strip with kind-colored dots.
   ════════════════════════════════════════════════════════════════════════ */

.hm-card {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  padding: 20px 24px 18px;
  box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px;
  max-width: 720px;
}
.hm-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.hm-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a8a29e;
}
.hm-count {
  font-size: 12.5px;
  color: #44403c;
  letter-spacing: -0.005em;
}
.hm-cal { position: relative; }
.hm-months {
  position: relative;
  padding-left: 18px;
  height: 12px;
  margin-bottom: 4px;
}
.hm-months span {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a8a29e;
  top: 0;
}
.hm-grid-row {
  display: flex;
  gap: 2px;
}
.hm-days {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hm-days span {
  height: 11px;
  width: 16px;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a8a29e;
  line-height: 1;
}
.hm-cells {
  display: flex;
  gap: 2px;
}
/* JS injects week-columns inside .hm-cells, each is .hm-week */
.hm-week {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hm-cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #f1f1ef;          /* lvl 0 (matches v4 PALETTE) */
  transition: transform 150ms;
  cursor: default;
}
.hm-cell--1 { background: #c5d4f7; }
.hm-cell--2 { background: #9bb1ef; }
.hm-cell--3 { background: #5d80e5; }
.hm-cell--4 { background: #2f56c8; }
.hm-cell.is-today  { box-shadow: 0 0 0 1px rgba(28,28,32,0.4); }
.hm-cell.is-future { background: transparent; border: 1px dashed rgba(0,0,0,0.06); }
.hm-cell.is-out    { opacity: 0.4; border: 1px dashed rgba(0,0,0,0.04); background: transparent; }
.hm-cell:hover:not(.is-future):not(.is-out) { transform: scale(1.35); }

.hm-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-left: 18px;
}
.hm-lg-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a8a29e;
}

.hm-detail {
  margin-top: 14px;
  padding-left: 18px;
}
.hm-detail-meta {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #78716c;
}
.hm-detail-pin {
  margin-left: 6px;
  color: #d6d3d1;
  text-transform: none;
  letter-spacing: normal;
}
.hm-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hm-detail-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #44403c;
}
.hm-detail-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #5d80e5;       /* matches rec_acted kind color */
  flex-shrink: 0;
  margin-top: 6px;
}

/* Hide the cockpit on small screens — sidebars don't make sense at <980px */
@media (max-width: 979px) {
  .cp {
    height: auto;
    padding: 12px;
  }
  .cp-center {
    width: 100%;
  }
  .cp-thread {
    min-height: 280px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   VIBE PRODUCTING POSITIONING — hero eyebrow + lede + dedicated pivot
   section ("claude code is vibe coding. bevel is vibe producting.").
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero lede ──────────────────────────────────────────────────────── */
.hero-lede {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  /* 14px above (close to the title) + 28px below (clear breathing
     room before the URL form). Reads as a paragraph that belongs to
     the title, not a divider between two blocks. */
  margin: 14px auto 28px;
  max-width: 60ch;
  text-shadow: 0 1px 4px rgba(0,0,0,0.22);
}

/* ── New chip recipe for the hero trio (UPPERCASE mono, matches /app) ── */
.rec-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow:
    0 0 0 0.7px rgba(0,0,0,0.06),
    inset 0 1px 0 0 rgba(255,255,255,0.7),
    inset 0 -0.5px 1.5px 0 rgba(0,0,0,0.1),
    0 1px 2px rgba(0,0,0,0.06);
  transition: background-color 150ms;
}
.rec-chip--start {
  background: #EAF7F0;
  color: #1A9A5A;
  border-color: rgba(26,154,90,0.18);
}
.rec-chip--start:hover { background: #dcefe3; }
.rec-chip--dismiss {
  background: #E6E6EB;
  color: #6B6B76;
  border-color: rgba(107,97,87,0.22);
}
.rec-chip--dismiss:hover { background: #d8d8de; }

/* ── Vibe pivot section — explicit "claude code is vibe coding,
   bevel is vibe producting" framing. Two cards side-by-side with
   a brand-blue "+" arrow between them. Sits on a soft warm bg. */
.section-vibe {
  padding: 110px 24px 90px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(74,110,224,0.06) 0%, transparent 70%),
    var(--bg);
  border-top: 1px solid var(--bd-soft);
  border-bottom: 1px solid var(--bd-soft);
  text-align: center;
  position: relative;
}
.vibe-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.vibe-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 18px;
}
/* Title weight + tracking match the rest of the landing (.section-title,
   .dept-title, .strip-title): font-weight 500, tight tracking, 1.04
   line-height. Avoids the visual jump where this section reads heavier
   than every other heading on the page. */
.vibe-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.034em;
  font-weight: 500;
  margin: 0 auto;
  max-width: 22ch;
}
.vibe-title .title-strong { display: block; color: var(--ink-92); }
.vibe-title .title-soft   { display: block; color: var(--ink-45); }

.vibe-lede {
  max-width: 56ch;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-58);
  font-weight: 450;
}

.vibe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 56px auto 40px;
  max-width: 920px;
  align-items: stretch;
}
@media (min-width: 880px) {
  .vibe-grid {
    grid-template-columns: 1fr 56px 1fr;
    gap: 0;
  }
}
.vibe-card {
  background: var(--surface);
  border: 1px solid var(--bd-soft);
  border-radius: 14px;
  padding: 20px 22px 18px;
  text-align: left;
  box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
    rgba(14, 63, 126, 0.04) 0px 18px 24px -10px;
  display: flex;
  flex-direction: column;
}
.vibe-card--coding {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f5 100%);
}
.vibe-card--producting {
  background: linear-gradient(180deg, #ffffff 0%, #f0f4fb 100%);
  border-color: rgba(74, 110, 224, 0.22);
  box-shadow:
    rgba(14, 63, 126, 0.06) 0px 0px 0px 1px,
    rgba(74, 110, 224, 0.06) 0px 1px 1px -0.5px,
    rgba(74, 110, 224, 0.08) 0px 6px 6px -3px,
    rgba(74, 110, 224, 0.10) 0px 24px 32px -12px;
}
.vibe-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.vibe-card-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-72);
  box-shadow: inset 0 0 0 1px var(--bd-soft);
}
.vibe-card-icon--brand {
  background: rgba(74, 110, 224, 0.12);
  color: var(--clay);
  box-shadow: inset 0 0 0 1px rgba(74, 110, 224, 0.28);
}
.vibe-card-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.vibe-card-tag--brand { color: var(--clay); }

/* Card title: same family + weight pattern as .dept-title, just sized
   down. Matches the rest of the landing's heading rhythm exactly. */
.vibe-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--ink-92);
  margin: 0 0 10px;
  font-weight: 500;
}
.vibe-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-58);
  margin: 0 0 14px;
  font-weight: 450;
}
.vibe-card-body em {
  font-style: italic;
  color: var(--ink-85);
  font-weight: 500;
}
.vibe-card-list {
  list-style: none;
  padding: 10px 0 0;
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--bd-soft);
}
.vibe-card-list li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-58);
}

/* Tool stack — three small overlapping logo cards (claude / cursor /
   codex) replacing the placeholder code-icon on the vibe-coding card.
   Each card is a tiny rounded square with the brand's mark inside.
   They tilt slightly + overlap to read as "a stack of tools". */
.tool-stack {
  display: inline-flex;
  align-items: center;
  padding-right: 4px;     /* counter the negative margin of the last card */
}
.tool-card {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(28,28,32,0.08),
    inset 0 1px 0 0 rgba(255,255,255,0.8),
    0 1px 2px rgba(28,40,80,0.06),
    0 6px 12px -6px rgba(28,40,80,0.10);
  position: relative;
  z-index: 1;
  transition: transform 250ms cubic-bezier(.22,1,.36,1), z-index 0s;
}
.tool-card + .tool-card { margin-left: -8px; }
.tool-card[data-tool="claude"]  { transform: rotate(-4deg); z-index: 3; }
.tool-card[data-tool="cursor"]  { transform: rotate(0deg);  z-index: 2; }
.tool-card[data-tool="codex"]   { transform: rotate(4deg);  z-index: 1; }
.tool-stack:hover .tool-card[data-tool="claude"]  { transform: rotate(-6deg) translateX(-2px); }
.tool-stack:hover .tool-card[data-tool="codex"]   { transform: rotate(6deg)  translateX(2px); }

.vibe-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink-30);
  position: relative;
}
@media (min-width: 880px) { .vibe-arrow { display: inline-flex; } }
.vibe-arrow-glyph {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--bd-soft),
    0 1px 1px rgba(28,40,80,.04),
    0 8px 16px -10px rgba(28,40,80,0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink-45);
}

.vibe-foot {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ════════════════════════════════════════════════════════════════════════
   THE MOAT — three-card section between the loop dept story and the
   cockpit demo. Same skeletal pattern as .section-vibe (eyebrow + two-
   tone title + lede + grid), three cards each with a small artifact
   under the body. Matches landing typography conventions exactly
   (font-weight 500 titles, tight tracking, ink-92/58 hierarchy).
   ════════════════════════════════════════════════════════════════════════ */

.section-moat {
  padding: 110px 24px 100px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(74,110,224,0.05) 0%, transparent 70%),
    var(--bg);
  border-top: 1px solid var(--bd-soft);
  border-bottom: 1px solid var(--bd-soft);
  text-align: center;
  position: relative;
}
.moat-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.moat-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 18px;
}
.moat-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.034em;
  font-weight: 500;
  margin: 0 auto;
  max-width: 22ch;
}
.moat-title .title-strong { display: block; color: var(--ink-92); }
.moat-title .title-soft   { display: block; color: var(--ink-45); }

.moat-lede {
  max-width: 56ch;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-58);
  font-weight: 450;
}

.moat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 56px auto 0;
  max-width: 1100px;
  align-items: stretch;
}
@media (min-width: 880px) {
  .moat-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.moat-card {
  background: var(--surface);
  border: 1px solid var(--bd-soft);
  border-radius: 14px;
  padding: 22px 22px 20px;
  text-align: left;
  box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
    rgba(14, 63, 126, 0.04) 0px 18px 24px -10px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.moat-card--brand {
  background: linear-gradient(180deg, #ffffff 0%, #f0f4fb 100%);
  border-color: rgba(74, 110, 224, 0.22);
  box-shadow:
    rgba(14, 63, 126, 0.06) 0px 0px 0px 1px,
    rgba(74, 110, 224, 0.06) 0px 1px 1px -0.5px,
    rgba(74, 110, 224, 0.08) 0px 6px 6px -3px,
    rgba(74, 110, 224, 0.10) 0px 24px 32px -12px;
}

.moat-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.moat-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-30);
  font-feature-settings: "tnum";
}
.moat-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-58);
}
.moat-tag--brand { color: var(--clay); }

.moat-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--ink-92);
  margin: 0 0 10px;
  font-weight: 500;
}
.moat-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-58);
  margin: 0 0 16px;
  font-weight: 450;
}

/* Artifact area at the bottom of each card, pinned with margin-top:auto
   so cards stay vertically balanced even when bodies differ in length. */
.moat-art {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--bd-soft);
}

/* 01 · named prospects list */
.moat-art--names {
  list-style: none;
  padding: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.moat-art--names li {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 8px;
  align-items: center;
}
.moat-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink-30);
}
.moat-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-72);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moat-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-30);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 02 · check-in followup pill */
.moat-art--followup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
}
.followup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.followup-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  background: rgba(74, 110, 224, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(74, 110, 224, 0.18);
}
.followup-tick {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--clay);
  line-height: 1;
}
.followup-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-72);
  font-style: italic;
  letter-spacing: -0.002em;
}

/* 03 · five verb chips */
.moat-art--verbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 14px;
}
.moat-verb {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-58);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--bd-soft);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
   COLLAPSED PROMPT BLOCK — used inside the cockpit demo bevel reply.
   Mirrors markdown.tsx's ```prompt rendering: a chevron + "claude code
   prompt" + line count + copy button, with the pre hidden by default.
   ════════════════════════════════════════════════════════════════════════ */
/* Collapsible prompt block — pixel-faithful to markdown.tsx's
   CollapsibleCodeBlock:
     - Wrapper: rounded-xl bg-stone-50 border-stone-200, my-3
     - Summary: px-3.5 py-2 gap-2, border-b-stone-200/70
     - Chevron: 10px, stone-400, rotates 90 when [open]
     - Lang label: text-[9px] mono uppercase tracking-wider stone-400
     - Line count: text-[10.5px] mono stone-400, ml-auto pr-2
     - Copy button: pill (bg-stone-100, border, icon + text, 9px mono) */
.cp-prompt {
  background: #fafaf9;             /* stone-50 */
  border: 1px solid #e7e5e4;       /* stone-200 */
  border-radius: 12px;             /* rounded-xl */
  overflow: hidden;
  margin: 12px 0;                  /* my-3 */
}
.cp-prompt summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;                        /* gap-2 */
  padding: 8px 14px;               /* py-2 px-3.5 */
  border-bottom: 1px solid rgba(231, 229, 228, 0.7);  /* stone-200/70 */
  transition: background-color 150ms;
}
.cp-prompt summary::-webkit-details-marker { display: none; }
.cp-prompt summary:hover { background: #f5f5f4; }    /* stone-100 hover */
.cp-prompt-caret {
  color: #a8a29e;                  /* stone-400 */
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(.22,1,.36,1);
}
.cp-prompt[open] .cp-prompt-caret { transform: rotate(90deg); }
.cp-prompt-lang {
  font-family: var(--font-mono);
  font-size: 9px;                  /* text-[9px] */
  letter-spacing: 0.05em;          /* tracking-wider */
  text-transform: uppercase;
  color: #a8a29e;                  /* stone-400 — NOT stone-900 */
  flex-shrink: 0;
}
.cp-prompt-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;               /* text-[10.5px] */
  color: #a8a29e;                  /* stone-400 */
  margin-left: auto;               /* ml-auto, right-aligned */
  padding-right: 8px;              /* pr-2 */
}
.cp-prompt-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;                  /* text-[9px] */
  padding: 4px 8px;                /* px-2 py-1 */
  border-radius: 6px;              /* rounded-md */
  background: #f5f5f4;             /* bg-stone-100 */
  border: 1px solid #e7e5e4;       /* border-stone-200 */
  color: #78716c;                  /* stone-500 */
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.cp-prompt-copy:hover {
  background: #e7e5e4;             /* stone-200 */
  color: #44403c;                  /* stone-700 */
}
.cp-prompt-body {
  margin: 0;
  padding: 12px 14px;              /* px-3.5 py-3 */
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: #292524;                  /* stone-800 */
  white-space: pre;
  overflow-x: auto;
}

/* ════════════════════════════════════════════════════════════════════════
   SHIP DEPT-MOCK — the in-chat shot that mirrors what bevel emits after
   it writes a ticket. "bevel" label + short prose + collapsed prompt
   card + 3 chat actions. Same /app chrome as the cockpit demo.
   ════════════════════════════════════════════════════════════════════════ */
.shotchat {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  padding: 20px 22px 18px;
  box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
    rgba(14, 63, 126, 0.04) 0px 18px 24px -10px;
}
.shot-who {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a8a29e;
  display: inline-block;
  margin-bottom: 8px;
}
.shot-body {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #292524;
  letter-spacing: -0.002em;
}

.shot-prompt {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  overflow: hidden;
}
.shot-prompt summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f5f5f4;
  border-bottom: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #44403c;
  transition: background-color 150ms;
}
.shot-prompt summary::-webkit-details-marker { display: none; }
.shot-prompt summary:hover { background: #f0f0ef; }
.shot-prompt-caret {
  color: #a8a29e;
  flex-shrink: 0;
  transition: transform 180ms cubic-bezier(.22,1,.36,1);
}
.shot-prompt[open] .shot-prompt-caret { transform: rotate(90deg); }
.shot-prompt[open] summary { border-bottom-color: #e7e5e4; }
.shot-prompt-lang {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1c1917;
  font-weight: 500;
}
.shot-prompt-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #a8a29e;
}
.shot-prompt-copy {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #a8a29e;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.shot-prompt-copy:hover { color: #1c1917; }
.shot-prompt-body {
  margin: 0;
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: #1c1917;
  white-space: pre;
  overflow-x: auto;
  background: #ffffff;
}

.shot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.shot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(.22,1,.36,1);
}
.shot-btn--dark {
  background: #1A1A1F;
  color: #F8F8FA;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.14),
    inset 0 1px 0 0 rgba(255,255,255,0.16),
    inset 0 -0.5px 1.5px 0 rgba(0,0,0,0.22),
    0 1px 2px rgba(0,0,0,0.08);
}
.shot-btn--dark:hover { background: #2a2a30; }
.shot-btn--light {
  background: #ffffff;
  color: #1c1917;
  box-shadow:
    0 0 0 0.7px rgba(28,28,32,.10),
    inset 0 0 .357px 1.5px rgba(255,255,255,.6),
    inset 0 1px 0 0 #FFFFFF,
    inset 0 -0.5px 0 0 rgba(0,0,0,.04),
    0 1px 1px rgba(28,40,80,.04);
}
.shot-btn--light:hover { background: #fafaf9; }
.shot-btn--ghost {
  background: transparent;
  color: #57534e;
  box-shadow: 0 0 0 1px rgba(28,28,32,0.06);
}
.shot-btn--ghost:hover { background: #fafaf9; color: #1c1917; }

/* ════════════════════════════════════════════════════════════════════════
   .path-* — landing mock of the direction picker (the path).
   Mirrors src/app/(app)/agent-ux-mock-v4/direction-picker.tsx structure:
   three preset cards (distribution-first / expansion / product perfection),
   one marked active with a "day N of M" header.
   ════════════════════════════════════════════════════════════════════════ */
.path-card {
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 16px;
  padding: 18px 20px 14px;
  box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px;
  max-width: 520px;
}
.path-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f4;
}
.path-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a8a29e;
}
.path-day {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8a29e;
}
.path-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.path-pick {
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  padding: 12px 14px;
  background: #ffffff;
  transition: background-color 150ms;
}
.path-pick:hover { background: #fafaf9; }
.path-pick--active {
  border-color: #4a80e4;
  background: rgba(74, 128, 228, 0.04);
}
.path-pick--active:hover { background: rgba(74, 128, 228, 0.06); }
.path-pick-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.path-pick-name {
  font-size: 13px;
  font-weight: 500;
  color: #1c1917;
  letter-spacing: -0.005em;
}
.path-pick-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a8a29e;
  border: 1px solid #e7e5e4;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: auto;
}
.path-pick-tag--active {
  color: #4a80e4;
  border-color: rgba(74, 128, 228, 0.35);
  background: rgba(74, 128, 228, 0.06);
}
.path-pick-body {
  font-size: 12.5px;
  color: #44403c;
  line-height: 1.45;
  margin: 0 0 4px;
}
.path-pick-skip {
  font-size: 11px;
  color: #a8a29e;
  line-height: 1.4;
  margin: 0;
}
.path-foot {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #a8a29e;
  margin: 12px 0 0;
  letter-spacing: 0.02em;
}