/* ============================================================
   AgentPeek - site.css
   Dark marketing CSS. Mobile-first.
   ============================================================ */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Geist Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/GeistMono-Regular.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  /* Palette */
  --canvas: #0a0a0a;
  --canvas-soft: #111111;
  --surface-card: #141414;
  --surface-strong: #1c1c1c;
  --hairline: #232323;
  --hairline-soft: #1a1a1a;
  --hairline-strong: #2e2e2e;
  --ink: #f5f5f4;
  --body: #a8a8a4;
  --muted: #6e6e6a;
  --on-primary: #0a0a0a;
  --success: #1f8a65;
  --error: #cf2d56;

  /* Spacing (4-base) */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-base: 16px;
  --s-md: 20px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 80px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  /* Layout */
  --container: 1240px;
  --container-narrow: 880px;
  --nav-h: 64px;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Liquid glass perimeter (mirrors the desktop settings boardPanel rim) */
  --glass-tint: rgba(20, 21, 26, 0.55);
  --glass-rim-light: rgba(255, 255, 255, 0.18);
  --glass-rim-shadow: rgba(0, 0, 0, 0.30);
  /* Static indigo stand-in for the hero/footer shader: shows while the shader
     loads and if WebGPU is unavailable, painted behind the canvas. */
  --shader-fallback:
    radial-gradient(70% 60% at 92% 12%, #4036ff 0%, rgba(64, 54, 255, 0) 55%),
    radial-gradient(130% 120% at 32% 30%, #2a23d9 0%, #0d00ff 58%, #060417 100%);

  /* Liquid-glass shimmer glints on the black download pills */
  --shim-1: rgba(255, 255, 255, 0.95);
  --shim-2: rgba(150, 185, 255, 0.85);
  --shim-3: rgba(214, 222, 240, 0.78);
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-xs); }

/* ---------- Base ---------- */

html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }
body > .site-footer { flex: 0 0 auto; margin-top: auto; }

::selection { background: var(--ink); color: var(--canvas); }

/* ---------- Typography ---------- */

.display-mega,
.display-lg,
.display-md,
.display-sm {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.display-mega {
  font-size: clamp(36px, 8vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.display-lg {
  font-size: clamp(28px, 4.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.display-md {
  font-size: clamp(22px, 3vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.display-sm {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.title-md { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.title-sm { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink); }

.body, p { color: var(--body); font-size: 16px; line-height: 1.55; }
.body-lg { color: var(--body); font-size: 18px; line-height: 1.55; }
.body-sm { color: var(--body); font-size: 14px; line-height: 1.5; }
.caption { color: var(--muted); font-size: 13px; line-height: 1.4; }
.eyebrow {
  display: inline-block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.088em;
  text-transform: uppercase;
}
.mono { font-family: var(--font-mono); font-size: 13px; }

/* ---------- Layout primitives ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-lg);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--s-lg);
}

.section {
  padding-block: 56px;
}

.section-tight {
  padding-block: 40px;
}

@media (min-width: 768px) {
  .container, .container-narrow { padding-inline: var(--s-xl); }
  .section { padding-block: var(--s-section); }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  cursor: pointer;
  user-select: none;
}

.btn-primary {
  background: var(--ink);
  color: var(--on-primary);
}
.btn-primary:hover { background: #ffffff; }
.btn-primary:active { background: #e8e6e2; transform: translateY(1px); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn-secondary:hover { background: var(--surface-card); border-color: var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  height: 40px;
  padding: 0 12px;
}
.btn-ghost:hover { background: var(--surface-card); }

.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }

.btn .icon { width: 14px; height: 14px; }
.apple-logo { width: auto; height: 15px; margin-top: -2px; flex: none; }

/* ---------- White glass buttons (nav Buy + pricing Get a license) ----------
   Real depth, the white-glass counterpart to the black download pills: a convex
   gradient body, a glossy top sheen, a specular rim, and a layered contact +
   ambient shadow. :active presses in with an inner shadow so the click reads as
   tactile. The sheen/rim pseudo-elements sit at z-index:-1 inside the button's
   own stacking context (isolation), so they ride above the gradient yet stay
   behind the label without needing a content wrapper. */
.btn-buy {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #f6f5f2 46%, #e7e4dd 100%);
  color: #0a0a0a;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(0, 0, 0, 0.12),
    0 1px 1px rgba(0, 0, 0, 0.34),
    0 4px 10px -4px rgba(0, 0, 0, 0.45),
    0 12px 26px -10px rgba(0, 0, 0, 0.55);
  transition: transform 150ms ease, box-shadow 220ms ease, background 220ms ease;
}
/* Glossy top sheen — bright at the crown, gone by the middle. */
.btn-buy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.35) 34%,
    rgba(255, 255, 255, 0) 60%);
}
/* Specular rim — light top edge melting to a faint dark base, like the demo glass. */
.btn-buy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0) 46%,
    rgba(0, 0, 0, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.btn-buy:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f8f7f4 46%, #ebe8e1 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.34),
    0 8px 18px -6px rgba(0, 0, 0, 0.5),
    0 20px 38px -14px rgba(0, 0, 0, 0.55);
}
.btn-buy:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #ececea 0%, #f4f3f0 100%);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 1px rgba(0, 0, 0, 0.3);
}

/* ---------- Download buttons: glossy black + liquid-glass shimmer ----------
   Every download CTA flips to a black pill with a constant liquid-glass shimmer
   chasing its perimeter. Three masked conic rings drift at different speeds and
   directions so a handful of bright glints cross around the border, never one
   uniform sweep. JS wraps the label in .btn-content and injects the rings. */
.btn-download {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #1b1b1d 0%, #0b0b0c 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 8px 22px -10px rgba(0, 0, 0, 0.8);
}
.btn-download:hover { background: linear-gradient(180deg, #242427 0%, #101012 100%); }
.btn-download:active { transform: translateY(1px); }
.btn-download .btn-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
}

/* Registered so the conic start-angle can interpolate during the animation. */
@property --ap-shim-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ap-shim {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  /* Show only the border band. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  /* A touch of blur for the liquid feel. */
  filter: blur(0.5px);
}
/* Layer A — three bright white glints, drifting clockwise. */
.ap-shim-a {
  background: conic-gradient(
    from var(--ap-shim-angle),
    transparent 0deg,
    var(--shim-1) 16deg,
    transparent 44deg,
    transparent 128deg,
    var(--shim-1) 150deg,
    transparent 182deg,
    transparent 258deg,
    var(--shim-1) 280deg,
    transparent 312deg,
    transparent 360deg
  );
  animation: ap-shim-spin 7s linear infinite;
}
/* Layer B — two cool-blue glints, slower and counter-rotating. */
.ap-shim-b {
  background: conic-gradient(
    from var(--ap-shim-angle),
    transparent 0deg,
    var(--shim-2) 70deg,
    transparent 112deg,
    transparent 210deg,
    var(--shim-2) 250deg,
    transparent 300deg,
    transparent 360deg
  );
  animation: ap-shim-spin 11s linear infinite reverse;
  opacity: 0.7;
}
/* Layer C — two soft silver glints at a third cadence for a fuller crossing. */
.ap-shim-c {
  background: conic-gradient(
    from var(--ap-shim-angle),
    transparent 0deg,
    var(--shim-3) 30deg,
    transparent 70deg,
    transparent 188deg,
    var(--shim-3) 214deg,
    transparent 250deg,
    transparent 360deg
  );
  animation: ap-shim-spin 15s linear infinite;
  opacity: 0.6;
}
@keyframes ap-shim-spin {
  to { --ap-shim-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-shim { animation: none !important; }
}

/* ---------- Top nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.nav-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.nav-links {
  display: none;
  gap: var(--s-xs);
  align-items: center;
}
.nav-links a {
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-md);
  transition: color 120ms ease, background 120ms ease;
}
.nav-links a:hover { color: var(--ink); background: var(--surface-card); }

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  color: var(--ink);
}
.nav-toggle:hover { background: var(--surface-card); }
.nav-toggle svg { width: 20px; height: 20px; }

@media (min-width: 880px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}
@media (max-width: 359px) {
  .nav { gap: var(--s-sm); }
  .nav-right > .btn { display: none; }
}

/* Mobile drawer */
.nav-drawer {
  /* Anchored to the header (its containing block — the header's backdrop-filter
     traps fixed descendants), so size explicitly instead of inset:0. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100dvh - var(--nav-h));
  background-color: #0a0a0a;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--hairline);
  padding: var(--s-lg);
  display: none;
  flex-direction: column;
  gap: var(--s-xs);
  z-index: 49;
}
.nav-drawer[data-open="true"] { display: flex; }
.nav-drawer a {
  padding: 14px 12px;
  font-size: 16px;
  color: var(--body);
  border-radius: var(--r-md);
}
.nav-drawer a:hover { color: var(--ink); background: var(--surface-card); }
.nav-drawer .btn-primary { width: 100%; margin-top: var(--s-sm); }
@media (min-width: 880px) {
  .nav-drawer { display: none !important; }
}

/* ---------- Hero ---------- */

/* Full-bleed stage that holds the cursor-reactive dither shader behind the hero
   content. overflow:clip keeps the 100%-wide canvas from spilling a scrollbar. */
.hero-wrap {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-fx-canvas {
  position: absolute;
  inset: 0;
  /* !important defeats the shader runtime's inline width/height: it pins the
     canvas to a GPU-clamped pixel width (~1512px) that ignores the viewport, so
     without this the right half of an ultrawide screen is left unpainted. */
  width: 100% !important;
  height: 100% !important;
  display: block;
  /* Fallback paints behind the canvas; the shader covers it once it loads. */
  background: var(--shader-fallback);
  /* Vertical fade (in under the sticky header, short fade at the base) is
     intersected with a horizontal fade that only engages past ~1920px wide, so
     on ultrawide the field reads as a centered band dissolving into the page
     instead of a hard-edged slab. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 90px, #000 90%, transparent 100%),
    linear-gradient(to right, transparent calc(50% - 1100px), #000 calc(50% - 960px), #000 calc(50% + 960px), transparent calc(50% + 1100px));
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 90px, #000 90%, transparent 100%),
    linear-gradient(to right, transparent calc(50% - 1100px), #000 calc(50% - 960px), #000 calc(50% + 960px), transparent calc(50% + 1100px));
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Same legibility scrim as the cards/footer, masked to match the canvas fade. */
.hero-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0.28), rgba(8, 9, 12, 0.52));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 90px, #000 90%, transparent 100%);
}

.hero {
  position: relative;
  z-index: 1;
  /* No bottom padding: the demo runs to the bottom edge of the shader. */
  padding-block: 64px 0;
  text-align: center;
}
@media (min-width: 768px) {
  .hero { padding-block: 96px 0; }
}

.hero h1 {
  margin-top: var(--s-base);
  max-width: 100%;
  margin-inline: auto;
}
.hero h1 br { display: none; }
@media (min-width: 900px) {
  .hero h1 br { display: inline; }
}

.hero .lead {
  margin-top: var(--s-lg);
  max-width: 60ch;
  margin-inline: auto;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--body);
  line-height: 1.55;
  text-wrap: balance;
}

.hero-cta {
  margin-top: var(--s-xl);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-sm);
}

.hero-meta {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Liquid-glass perimeter around the demo: a glass sheet (blurs the shader
   behind it) with a top sheen and a silver specular rim on the top, left, and
   right only. The bottom carries no glass and no line; it fades out into the
   page in step with the hero shader dissolving at its own base, so the demo and
   the background fade together at the bottom edge. Fills the container so its
   outer edge aligns with the feature sections below. */
.hero-video {
  position: relative;
  margin: var(--s-xxl) auto 0;
  width: 100%;
  /* Side/top glass frame matches the feature cards' 18px inset for symmetry;
     no bottom padding, the bottom edge fades out (mask below). */
  padding: 18px 18px 0;
  border-radius: 8px 8px 0 0;
  background: var(--glass-tint);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
          backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, 0.7),
    0 6px 18px -8px rgba(0, 0, 0, 0.5);
  isolation: isolate;
  /* Soft bottom fade, symmetric with the hero shader dissolving at its base. */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}
/* Top sheen. */
.hero-video::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.10), transparent 42%);
  z-index: 2;
}
/* Silver specular rim: a 1px gradient ring on the top, left, and right. Bottom
   padding 0 leaves the content box flush at the base, so the xor mask paints no
   rim along the open bottom edge. */
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px 1px 0;
  background: linear-gradient(to bottom, var(--glass-rim-light), transparent 50%, var(--glass-rim-shadow));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 3;
}
.hero-video img,
.hero-video video {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3324 / 2160;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 8px 8px 0 0;
  background: var(--canvas-soft);
}

/* ---------- Section header ---------- */

.section-head {
  text-align: left;
  margin-bottom: var(--s-xl);
  max-width: 60ch;
}
.section-head h2 { letter-spacing: -0.025em; }
.section-head p {
  margin-top: var(--s-xs);
  color: var(--body);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.4;
  text-wrap: balance;
}
.section-head.center { text-align: center; margin-inline: auto; }
.section-head.center h2 { max-width: 24ch; margin-inline: auto; }
.section-head.center p { max-width: 60ch; margin-inline: auto; }

/* ---------- Feature grid ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s-sm);
}
@media (min-width: 720px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Top/left/right padding only - the inner panel (.feature-shot) bleeds off the
     bottom edge, clipped by the card's rounded corners (overflow:hidden). */
  position: relative;
  padding: var(--s-base) 18px 0;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  height: 540px;
}

.feature-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  max-width: 38ch;
}
.feature-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.feature-body p {
  color: var(--body);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: balance;
}

.feature-shot {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  flex: 1 1 auto;
  min-width: 0;
  /* The app visual itself is OLED black; it sits on the dark card frame. */
  background: #000;
  border: 1px solid var(--hairline);
  /* Top corners only - the panel bleeds past the card's bottom edge. */
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- Card mockups (1:1 with the Swift app) ---------- */

/* Shared utilities */
.m-divider { height: 1px; background: rgba(255, 255, 255, 0.06); }
.m-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.m-btn-primary { background: #ffffff; color: #000000; }
.m-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.m-btn-warn {
  background: rgba(240, 160, 80, 0.12);
  color: #f0a050;
  border: 1px solid rgba(240, 160, 80, 0.45);
}
.m-btn-key {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  opacity: 0.55;
}

/* 1. Token Usage */
.mock-tokens {
  padding: 28px 22px;
  gap: 32px;
  justify-content: space-evenly;
}
.m-agent { display: flex; flex-direction: column; gap: 12px; }
.m-agent-head { display: flex; align-items: center; gap: 10px; }
.m-avatar {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.m-avatar svg, .m-avatar img { width: 20px; height: 20px; display: block; }
.m-agent-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.m-gauge {
  display: grid;
  grid-template-columns: 24px 1fr 40px 150px;
  align-items: center;
  gap: 12px;
}
.m-gauge-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.32);
  text-align: center;
}
.m-gauge-pct {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.m-gauge-reset {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.32);
  text-align: right;
  white-space: nowrap;
}
.m-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.m-bar i {
  display: block;
  height: 100%;
  background: #d97757;
  border-radius: 999px;
}
.m-bar.m-codex-bar i { background: #6cb4e6; }

/* 2. Server Management */
.mock-servers {
  padding: 14px 16px;
  justify-content: flex-start;
}
.m-srv-row { padding: 10px 0; }
.m-srv-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.m-srv-host {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.m-srv-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}
.m-srv-sep { color: rgba(255, 255, 255, 0.32); font-family: var(--font-mono); font-size: 12px; }
.m-srv-tag.node,
.m-srv-tag.deno { color: #69d585; }
.m-srv-tag.python,
.m-srv-tag.go { color: #6cb4e6; }
.m-srv-tag.ruby { color: #e36a6a; }
.m-srv-tag.rust { color: #d97757; }
.m-srv-tag.bun { color: #f3cc4b; }
.m-srv-tag.generic { color: rgba(255, 255, 255, 0.55); }
.m-srv-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.32);
}
.m-srv-sub svg { width: 11px; height: 11px; opacity: 0.7; }
.m-srv-up { margin-left: auto; }
.m-srv-actions { display: flex; gap: 4px; margin-left: 8px; }
.m-srv-actions button,
.m-srv-actions span.m-srv-btn {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.m-srv-actions .m-srv-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); border-color: rgba(255, 255, 255, 0.12); }
.m-srv-actions .m-srv-btn.kill:hover { color: #e36a6a; border-color: rgba(227, 106, 106, 0.35); background: rgba(227, 106, 106, 0.08); }
.m-srv-actions svg { width: 11px; height: 11px; }

/* 3. Quick Routes - two agent-colored folder rows (mirrors GlassFolderIcon) */
.mock-routes {
  padding: 26px 18px;
  align-items: stretch;
  justify-content: space-evenly;
  gap: 0;
}
.m-qr-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
}
.m-qr-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  position: relative;
}
.m-qr-folder {
  position: relative;
  width: 100%;
  max-width: 46px;
  aspect-ratio: 1 / 0.84;
  transition: transform 160ms ease;
}
.m-qr-tile:hover .m-qr-folder { transform: translateY(-3px) scale(1.06); }
.m-qr-tab {
  position: absolute;
  top: 0;
  left: 7%;
  width: 42%;
  height: 17%;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--qr-light), var(--qr-mid));
}
.m-qr-body {
  position: absolute;
  left: 0;
  top: 10%;
  width: 100%;
  height: 90%;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--qr-light), var(--qr-dark));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
}
.m-qr-body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.02) 55%);
  pointer-events: none;
}
.m-qr-glyph {
  position: relative;
  z-index: 1;
  width: auto;
  height: 54%;
  color: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.32));
}
/* Optical size normalization: the SF-equivalent paths fill their 24x24 box
   differently (sparkles is sparse, puzzle/gear dense), so match by eye. */
.m-qr-tile:nth-child(1) .m-qr-glyph { height: 60%; } /* sparkles */
.m-qr-tile:nth-child(2) .m-qr-glyph { height: 52%; } /* puzzle */
.m-qr-tile:nth-child(3) .m-qr-glyph { height: 55%; } /* gear */
.m-qr-tile:nth-child(4) .m-qr-glyph { height: 53%; } /* doc */
.m-qr-tile:nth-child(5) .m-qr-glyph { height: 55%; } /* house */
.m-qr-path {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.32);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}
.m-qr-tile:hover .m-qr-path { opacity: 1; }
.m-qr-claude { --qr-light: #f29e7d; --qr-mid: #d97757; --qr-dark: #8c452e; }
.m-qr-codex  { --qr-light: #5a97ff; --qr-mid: #1f6fff; --qr-dark: #0040a8; }
.m-qr-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
}

/* 4. Questions */
.mock-questions {
  padding: 18px;
  gap: 14px;
  justify-content: flex-start;
}
.m-q-head { display: flex; align-items: center; gap: 8px; }
.m-q-spacer { flex: 1; }
.m-q-terminal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}
.m-q-terminal svg { width: 11px; height: 11px; opacity: 0.8; }
.m-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f0a050;
  box-shadow: 0 0 8px rgba(240, 160, 80, 0.65);
  flex: 0 0 7px;
  animation: m-pulse-breathe 1.6s ease-in-out infinite;
}
@keyframes m-pulse-breathe {
  0%, 100% { opacity: 0.78; box-shadow: 0 0 4px rgba(240, 160, 80, 0.35); }
  50%      { opacity: 1;    box-shadow: 0 0 9px rgba(240, 160, 80, 0.75); }
}
@media (prefers-reduced-motion: reduce) { .m-pulse { animation: none; } }
.m-q-tag,
.m-p-tag,
.m-plan-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f0a050;
}
.m-q-title {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  margin-top: 2px;
}
.m-q-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}
.m-q-options { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.m-q-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.m-q-opt-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink); }
.m-q-opt-desc { font-family: var(--font-sans); font-size: 10px; color: rgba(255, 255, 255, 0.55); line-height: 1.4; }
.m-q-opt.is-selected {
  background: rgba(240, 160, 80, 0.12);
  border-color: rgba(240, 160, 80, 0.45);
}
.m-q-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}
.m-q-field {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.32);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.m-q-send { flex: 0 0 auto; }

/* 5. Permissions */
.mock-permissions {
  padding: 16px 18px 18px;
  gap: 9px;
  justify-content: flex-start;
}
.m-p-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 11px;
}
.m-p-crumb-avatar {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  flex: 0 0 18px;
}
.m-p-crumb-avatar img { width: 12px; height: 12px; }
.m-p-crumb-act { color: rgba(255, 255, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-p-crumb-dot { color: rgba(255, 255, 255, 0.32); }
.m-p-crumb-proj { color: rgba(255, 255, 255, 0.32); flex: 0 0 auto; }
.m-p-crumb-spacer { flex: 1; }
.m-p-crumb-time { color: rgba(255, 255, 255, 0.32); font-size: 10px; }
.m-p-crumb-esc {
  color: rgba(255, 255, 255, 0.32);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.m-p-head { display: flex; align-items: center; gap: 8px; }
.m-p-context {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.m-p-diff {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.42;
  overflow: hidden;
}
.m-p-diff-line {
  padding: 1px 12px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.55);
}
.m-p-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.m-p-add { color: rgb(184, 236, 203); }
.m-p-del { color: rgb(240, 181, 181); }
.m-p-stats-spacer { flex: 1; }
.m-p-suffix { color: rgba(255, 255, 255, 0.32); }
.m-p-diff-line.del { background: rgba(227, 106, 106, 0.08); color: rgb(240, 181, 181); }
.m-p-diff-line.add { background: rgba(105, 213, 133, 0.08); color: rgb(184, 236, 203); }
.m-p-context code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
.m-p-foot {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
  justify-content: center;
}

/* 6. Plans */
.mock-plans {
  padding: 18px;
  gap: 10px;
  justify-content: flex-start;
}
.m-plan-head { display: flex; align-items: center; gap: 8px; }
.m-plan-body {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  line-height: 1.55;
}
.m-plan-label { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.m-plan-h { font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.m-plan-body ol { list-style: none; padding: 0; margin: 0; counter-reset: plan; }
.m-plan-body li {
  counter-increment: plan;
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}
.m-plan-body li:last-child { margin-bottom: 0; }
.m-plan-body li::before {
  content: counter(plan) ".";
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.55);
}
.m-plan-foot {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: auto;
  padding-top: 8px;
}
.m-plan-sub { display: flex; justify-content: center; padding-top: 8px; }
.m-plan-link {
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.32);
  transition: color 140ms ease;
}
.m-plan-link:hover { color: rgba(255, 255, 255, 0.55); }

/* 7. Notch or Menubar - before/after compare slider */
.mock-notch {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
}
.m-nm-compare {
  position: absolute;
  inset: 0;
  --pos: 50%;
  user-select: none;
  touch-action: none;
}
.m-nm-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  will-change: clip-path;
}
.m-nm-layer.notch {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.m-nm-layer.menubar {
  clip-path: inset(0 0 0 var(--pos));
}
.m-nm-tag {
  position: absolute;
  top: 18px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.m-nm-layer.notch .notch-tag { left: 18px; }
.m-nm-layer.menubar .menubar-tag { right: 18px; }
.m-nm-display {
  position: relative;
  width: 200px;
  height: 128px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.m-nm-display::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 66px;
  height: 16px;
  background: #000;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 8px 8px;
}
.m-nm-display::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.m-nm-mbar {
  width: 248px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 10px;
}
@media (max-width: 359px) {
  .m-nm-mbar { width: calc(100% - 44px); }
}
.m-nm-mbar-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 14px;
}
.m-nm-mbar-app {
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  flex: 0 0 14px;
}
.m-nm-mbar-text {
  height: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.m-nm-mbar-text.sm { width: 28px; }
.m-nm-mbar-text.md { width: 44px; }
.m-nm-mbar-text.lg { width: 80px; }
.m-nm-mbar-text.xl { width: 108px; }
.m-nm-mbar-spacer { flex: 1; }
.m-nm-mbar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.m-nm-mbar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 2px 0;
}
.m-nm-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
  transform: translateX(-50%);
  pointer-events: none;
}
.m-nm-handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #111;
  display: grid;
  place-items: center;
  cursor: ew-resize;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  padding: 0;
  z-index: 2;
}
.m-nm-handle svg { width: 11px; height: 11px; }
.m-nm-handle:focus-visible {
  outline: 2px solid #6cb4e6;
  outline-offset: 2px;
}

/* 8. Parallel Sessions - matches SessionCardHeaderView.swift 1:1 */
.mock-sessions {
  padding: 0;
  justify-content: space-between;
}
.m-sess-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 10px 14px;
  flex: 1 1 0;
  min-height: 0;
}
.m-sess-row + .m-sess-row { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.m-sess-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.m-sess-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-sess-proj {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.m-sess-dot {
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
}
.m-sess-act {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.m-sess-act.exec  { color: #69d585; }
.m-sess-act.think { color: #6cb4e6; }
.m-sess-act.wait  { color: #f3cc4b; }
.m-sess-act.err   { color: #e36a6a; }
.m-sess-act.idle  { color: rgba(255, 255, 255, 0.32); }
.m-sess-act.dot { color: rgba(255, 255, 255, 0.25); margin-right: -2px; }
.m-sess-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.32);
  overflow: hidden;
  min-width: 0;
}
.m-sess-chip { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; flex-shrink: 0; }
.m-sess-chip svg { width: 10px; height: 10px; opacity: 0.75; flex-shrink: 0; }
.m-sess-chip .add { color: #69d585; }
.m-sess-chip .del { color: #e36a6a; }
.m-sess-chip.mcp { color: #6cb4e6; min-width: 0; }
.m-sess-chip.mcp svg { opacity: 0.9; }
.m-sess-tail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}
.m-sess-host {
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 9px;
  letter-spacing: 0.04em;
}
.m-sess-trash {
  display: none;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(227, 106, 106, 0.08);
  border: 1px solid rgba(227, 106, 106, 0.25);
  color: #e36a6a;
  cursor: pointer;
}
.m-sess-trash svg { width: 11px; height: 11px; }
.m-sess-row.idle:hover .m-sess-trash { display: inline-flex; }

/* 5x5 pixel-grid avatar - matches AgentAvatar.swift's PixelGridAvatar */
.m-px-avatar { width: 22px; height: 22px; display: block; }
.m-px-avatar rect { fill: currentColor; }
.m-px-avatar.claude { color: #d97757; }
.m-px-avatar.codex { color: #6cb4e6; }
.m-px-avatar.muted { color: rgba(255, 255, 255, 0.32); }
.m-px-avatar.err { color: #e36a6a; }
/* Per-cell fill-opacity is driven each frame by site.js - a diagonal wave for
   brand sessions, a clockwise spin for muted - mirroring AgentAvatar.swift.
   Under reduced motion the loop never starts and cells rest at 0.85. */

/* 9. Tool Call History */
.mock-history {
  padding: 14px 16px 16px;
  justify-content: flex-start;
  gap: 0;
}
.m-hist-reply {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.m-hist-timeline { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }
.m-hist-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.32);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.m-hist-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: 11px;
}
.m-hist-row > svg {
  width: 12px;
  height: 12px;
  align-self: center;
}
.m-hist-row.think > svg { color: #6cb4e6; }
.m-hist-row.exec > svg { color: #69d585; }
.m-hist-row.attn > svg { color: #f0a050; }
.m-hist-row.text3 > svg { color: rgba(255, 255, 255, 0.32); }
.m-hist-row > span:not(.m-hist-time) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-hist-summary { color: rgba(255, 255, 255, 0.55); }
.m-hist-detail { color: rgba(255, 255, 255, 0.32); margin-left: 6px; }
.m-hist-time { color: rgba(255, 255, 255, 0.32); font-size: 10px; }

/* Subtle bottom fade - communicates that the panel extends beyond the crop */
.mock-servers::after,
.mock-tokens::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%);
  pointer-events: none;
}

/* Compact tweaks at mobile */
@media (max-width: 480px) {
  .mock-tokens { padding: 16px 14px; }
  .mock-questions, .mock-permissions, .mock-plans { padding: 14px; }
  .mock-routes { padding: 18px 10px; }
  .m-qr-grid { gap: 5px; }
  .m-qr-folder { max-width: 50px; }
}

/* ---------- Detail grid ("the little things") ---------- */

.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}
@media (min-width: 600px) {
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .detail-grid { grid-template-columns: repeat(4, 1fr); }
}

.detail-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  padding: var(--s-lg);
  background: var(--surface-card);
}
.detail-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink);
}
.detail-icon svg { width: 17px; height: 17px; }
.detail-icon.is-green  { color: #69d585; }
.detail-icon.is-blue   { color: #6cb4e6; }
.detail-icon.is-amber  { color: #f0a050; }
.detail-icon.is-orange { color: #d97757; }

.detail-text { min-width: 0; }
.detail-text h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.detail-text p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
  text-wrap: balance;
}
.detail-key {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0;
  flex: 0 0 auto;
}

/* ---------- Pricing ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-lg);
  max-width: 420px;
  margin-inline: auto;
}

.price-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: var(--s-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-base);
}
.price-card.featured {
  background: var(--surface-strong);
  border-color: var(--hairline-strong);
}
/* The pricing card carries the hero/footer shader behind its content, the same
   way the feature cards once did, so the page's accent surfaces stay in sync.
   A slightly stronger scrim than the hero keeps the dense pricing copy legible. */
.price-card > .price-fx-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: var(--shader-fallback);
}
.price-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0.42), rgba(8, 9, 12, 0.66));
  pointer-events: none;
}
.price-card > :not(.price-fx-canvas) { position: relative; z-index: 2; }
.price-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sm); }
.price-card-head h3 { font-size: 18px; font-weight: 600; color: var(--ink); }
.price-card-head .pill {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.price-card .subtitle { color: var(--body); font-size: 14px; }
.price-card .amount {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1;
  margin-block: var(--s-xs);
}
.price-card .amount small {
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: var(--s-xs);
}
.price-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  margin-block: var(--s-base);
}
.price-card li {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  color: var(--body);
  font-size: 14.5px;
  text-wrap: pretty;
}
.price-card li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  flex: 0 0 6px;
}
.price-card .btn { width: 100%; margin-top: auto; }

.price-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  margin-top: var(--s-sm);
  color: var(--body);
  font-size: 14px;
  font-weight: 500;
  transition: color 150ms ease;
}
.price-download:hover { color: var(--ink); }

/* Activation flow */
.buy-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-base);
  max-width: 760px;
  margin: var(--s-xxl) auto 0;
}
@media (min-width: 720px) {
  .buy-flow { grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
}
.buy-flow li { display: flex; align-items: flex-start; gap: var(--s-sm); }
.buy-step-n {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-card);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}
.buy-step-text { display: flex; flex-direction: column; gap: 2px; }
.buy-step-text strong { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.buy-step-text span { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* ---------- FAQ ---------- */

.faq {
  max-width: 800px;
  margin-inline: auto;
  border-top: 1px solid var(--hairline);
}

.faq-item {
  border-bottom: 1px solid var(--hairline);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-base);
  padding: var(--s-md) 0;
  text-align: left;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  min-height: 56px;
}
.faq-q .chev {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform 180ms ease, color 180ms ease;
}
.faq-q:hover { color: var(--ink); }
.faq-q:hover .chev { color: var(--ink); }
.faq-item[data-open="true"] .chev { transform: rotate(45deg); color: var(--ink); }

.faq-a {
  display: none;
  padding: 0 0 var(--s-md) 0;
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 70ch;
}
.faq-item[data-open="true"] .faq-a { display: block; }

/* ---------- CTA band ---------- */

.cta-band {
  text-align: center;
  padding-block: 96px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cta-band h2 { margin-bottom: var(--s-sm); }
.cta-band p { margin-bottom: var(--s-xl); color: var(--body); text-wrap: balance; }

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: 64px var(--s-xl);
  color: var(--body);
  font-size: 14px;
}
/* container-type lets the wordmark below size to this column's width (cqw). */
.site-footer > .container { position: relative; z-index: 2; container-type: inline-size; }

/* Background shader (shaders.com) renders into this canvas; the fallback below
   shows while it loads or if WebGPU is unavailable. */
.footer-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.footer-fx-canvas {
  position: absolute;
  inset: 0;
  /* See .hero-fx-canvas: !important defeats the runtime's inline pixel width so
     the field fills an ultrawide footer instead of clipping to the left. */
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: var(--shader-fallback);
  /* Top fade-in from the page canvas (no seam), intersected with the same
     past-1920px horizontal fade as the hero so the field stays centered. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 160px),
    linear-gradient(to right, transparent calc(50% - 1100px), #000 calc(50% - 960px), #000 calc(50% + 960px), transparent calc(50% + 1100px));
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 160px),
    linear-gradient(to right, transparent calc(50% - 1100px), #000 calc(50% - 960px), #000 calc(50% + 960px), transparent calc(50% + 1100px));
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Same legibility scrim as the cards/hero, masked to fade with the texture. */
.footer-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0.28), rgba(8, 9, 12, 0.52));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 160px);
}

/* Oversized brand wordmark, faint, sized to the footer column width so it never
   clips on narrow screens (the container's max-width caps it on wide ones). */
.footer-wordmark {
  display: block;
  width: 100%;
  margin: clamp(40px, 5vw, 80px) 0 clamp(44px, 5vw, 76px);
  text-align: center;
  font-weight: 700;
  font-size: 19cqw;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: rgba(245, 245, 244, 0.07);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
  margin-bottom: 0;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: repeat(5, 1fr); }
}

.footer-brand .nav-brand { margin-bottom: var(--s-sm); }
.footer-brand p { color: var(--muted); font-size: 13px; max-width: 36ch; line-height: 1.5; }

.footer-col h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.088em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-base);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--s-sm); }
.footer-col a { color: var(--body); font-size: 14px; transition: color 120ms ease; }
.footer-col a:hover { color: var(--ink); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-base);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 13px;
}
.footer-base a { color: inherit; }
.footer-base a:hover { color: var(--ink); }
.footer-x { display: inline-flex; align-items: center; }
.footer-x svg { display: block; }

/* ---------- Docs ---------- */

.docs-hero {
  padding-block: 64px 24px;
  text-align: left;
}
@media (min-width: 768px) {
  .docs-hero { padding-block: 96px 32px; }
}
.docs-hero h1 { margin-top: var(--s-base); }
.docs-hero p { margin-top: var(--s-base); color: var(--body); max-width: 60ch; }

.docs-toc {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.docs-toc-inner {
  display: flex;
  gap: var(--s-xs);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--s-xs);
}
.docs-toc-inner::-webkit-scrollbar { display: none; }
.docs-toc a {
  color: var(--body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-md);
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.docs-toc a:hover { color: var(--ink); background: var(--surface-card); }

.docs-section {
  padding-block: var(--s-xxl);
  border-top: 1px solid var(--hairline-soft);
}
.docs-section:first-of-type { border-top: 0; }
.docs-section h2 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s-base);
  scroll-margin-top: calc(var(--nav-h) + 60px);
}
.docs-section p {
  color: var(--body);
  font-size: 16px;
  line-height: 1.65;
  margin-block: var(--s-sm);
  max-width: 72ch;
}
.docs-section ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  margin-top: var(--s-sm);
  max-width: 72ch;
}
.docs-section li {
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.6;
  padding-left: var(--s-base);
  position: relative;
}
.docs-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  background: var(--hairline-strong);
  border-radius: 50%;
}
.docs-section kbd {
  display: inline-block;
  background: var(--surface-card);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
}

/* ---------- Log ---------- */

.blog-section {
  padding-block: var(--s-xxl);
  border-top: 1px solid var(--hairline-soft);
}
.blog-section:first-of-type { border-top: 0; padding-top: var(--s-lg); }
.blog-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-base);
  margin-bottom: var(--s-lg);
}
.blog-section-head h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.blog-section-head .eyebrow {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  max-width: 860px;
}

.blog-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xs);
  padding: var(--s-lg);
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  color: var(--ink);
}
.blog-card:hover {
  border-color: var(--hairline-strong);
  background: var(--surface-strong);
}
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.blog-card-meta time { color: var(--muted); }
.blog-card-meta .blog-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-strong);
  color: var(--body);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.blog-card-meta .blog-pill.release { color: #d97757; border-color: rgba(217, 119, 87, 0.4); background: rgba(217, 119, 87, 0.08); }
.blog-card-meta .blog-pill.announcement { color: #6cb4e6; border-color: rgba(108, 180, 230, 0.4); background: rgba(108, 180, 230, 0.08); }
.blog-card-meta .blog-version {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  letter-spacing: 0;
}
.blog-card h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.35;
}
.blog-card p {
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 70ch;
}
.blog-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.blog-card li {
  color: var(--body);
  font-size: 14px;
  line-height: 1.55;
  padding-left: 14px;
  position: relative;
}
.blog-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  background: var(--hairline-strong);
  border-radius: 50%;
}

.blog-card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--body);
}
.blog-card:hover .blog-card-foot { color: var(--ink); }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

/* ---------- Non-macOS: disable download buttons (Mac-only app) ----------
   Gated on a platform class set by the inline detector in each page's <head>,
   not on viewport width, so the button stays live on a Mac at any window size
   and grays out on iPad/Windows/Linux/phone regardless of screen size. */
html.not-mac a.btn[href*="/download/"],
html.not-mac a.price-download[href*="/download/"] {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ---------- Mobile: tighten gap between FAQ and bottom CTA ---------- */
@media (max-width: 879px) {
  #faq.section { padding-bottom: var(--s-md); }
  .cta-band { padding-block: 48px; }
}

/* ---------- Capability feature pages (centered column, left-aligned text) ---------- */
.feat-page .docs-hero {
  text-align: center;
  padding-block: 88px 8px;
}
@media (min-width: 768px) {
  .feat-page .docs-hero { padding-block: 120px 12px; }
}
.feat-page .docs-hero p {
  margin-inline: auto;
  max-width: 56ch;
  font-size: 18px;
}
/* Wider reading column that matches the landing rail; long-form text inside
   stays capped at 72ch (see .docs-section) so line length stays readable. */
.feat-page main > .container { max-width: 1080px; }
/* Section headers are centered like the landing page. */
.feat-page .docs-section h2 { text-align: center; max-width: 32ch; margin-inline: auto; }
.feat-page .docs-section h3 { color: var(--ink); margin-top: var(--s-base); }
/* The reading column is centered under the centered headings: text stays left
   aligned inside a 72ch block that is itself centered in the wider rail, so it
   does not hug the far-left edge. */
.feat-page .docs-section > p,
.feat-page .docs-section > ul { margin-inline: auto; }
/* Detail-card grids read two-up inside the narrow column. */
.feat-page .docs-section .detail-grid { margin-top: var(--s-md); }
@media (min-width: 1024px) {
  .feat-page .docs-section .detail-grid { grid-template-columns: repeat(2, 1fr); }
}
/* FAQ accordion sits flush in the column, matching the landing component. */
.feat-page .docs-section .faq { margin-top: var(--s-md); }

/* App visual lifted from the landing feature cards, centered in the reading
   column directly under the first section heading. */
.feat-visual {
  max-width: 560px;
  margin: 24px auto 4px;
}
.feat-visual .feature-card { height: 460px; }