/* IG Pilot — marketing site.
   Built on the extension's own design system (src/styles.css): warm neutrals,
   one blue accent, amber for Live, green for OK, system fonts, the same
   radii, shadows, buttons, switches, chips and cards. Light by default; dark
   follows the computer unless the Light / Dark / Auto switch picks one
   (<html data-theme>, stored in localStorage by assets/site.js). */

/* ── Tokens (light) ─────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --bg: #faf9f5;
  --surface: #ffffff;
  --surface-2: #f4f2ec;
  --surface-3: #eae7df;
  --border: #e6e3da;
  --border-strong: #cdc9be;

  --text: #1f1e1c;
  --text-2: #4b4944;
  --text-3: #66635c;

  --accent: #2f5bd0;
  --accent-hover: #2850b8;
  --accent-soft: #ebf0fc;
  --accent-soft-text: #2a52bd;
  --accent-border: #b8c8f2;
  --on-accent: #ffffff;

  --live: #b45309;
  --live-soft: #fff4e5;
  --live-text: #8f4106;
  --live-border: #f0c48c;
  --warn-soft: #fdf3dc;
  --warn-text: #7a5000;

  --danger: #c22f2f;
  --danger-soft: #fdeeee;
  --danger-text: #a82626;

  --ok: #1a7348;
  --ok-soft: #e7f5ed;
  --ok-text: #155f3b;

  --seg-active: #ffffff;
  --toggle-off: #8b877d;
  --bubble: #efece4;
  --logo-tile: #2f5bd0;
  --backdrop: rgba(31, 30, 28, 0.42);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
  --shadow-shot: 0 1px 2px rgba(16, 24, 40, 0.06), 0 18px 48px -12px rgba(16, 24, 40, 0.22);

  /* Site only */
  --wash: radial-gradient(1200px 520px at 78% -8%, #ebf0fc 0%, rgba(235, 240, 252, 0) 62%),
    radial-gradient(900px 420px at 4% 8%, #f4efe2 0%, rgba(244, 239, 226, 0) 60%);
  --frame-bar: #f4f2ec;
  --dot: #d9d5cb;

  --radius: 10px;
  --radius-sm: 8px;
  --radius-card: 14px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, "New York", "Iowan Old Style", Charter, "Bitstream Charter", Georgia, Cambria, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: 24px;
  --max: 1140px;
  --header-h: 60px;
}

/* ── Tokens (dark): the extension's dark palette ────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #262624;
    --surface: #2f2f2c;
    --surface-2: #383834;
    --surface-3: #43423e;
    --border: #3d3c38;
    --border-strong: #58564f;
    --text: #f2f0e9;
    --text-2: #c9c6bd;
    --text-3: #a5a298;
    --accent: #8ab0ff;
    --accent-hover: #a3c1ff;
    --accent-soft: #1f2a44;
    --accent-soft-text: #a9c3ff;
    --accent-border: #3b4f80;
    --on-accent: #0f1a33;
    --live: #f5b25c;
    --live-soft: #3a2a14;
    --live-text: #f5b25c;
    --live-border: #6b4a1c;
    --warn-soft: #33290f;
    --warn-text: #ffd27a;
    --danger: #ff8a8a;
    --danger-soft: #3a1c1e;
    --danger-text: #ff9c9c;
    --ok: #6fd3a0;
    --ok-soft: #173326;
    --ok-text: #7fdcaa;
    --seg-active: #4a4944;
    --toggle-off: #85827a;
    --bubble: #3a3936;
    --logo-tile: #3a66d8;
    --backdrop: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-shot: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 56px -14px rgba(0, 0, 0, 0.7);
    --wash: radial-gradient(1200px 520px at 78% -8%, rgba(58, 102, 216, 0.16) 0%, rgba(58, 102, 216, 0) 62%),
      radial-gradient(900px 420px at 4% 8%, rgba(245, 178, 92, 0.06) 0%, rgba(245, 178, 92, 0) 60%);
    --frame-bar: #2b2b29;
    --dot: #4a4944;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #262624;
  --surface: #2f2f2c;
  --surface-2: #383834;
  --surface-3: #43423e;
  --border: #3d3c38;
  --border-strong: #58564f;
  --text: #f2f0e9;
  --text-2: #c9c6bd;
  --text-3: #a5a298;
  --accent: #8ab0ff;
  --accent-hover: #a3c1ff;
  --accent-soft: #1f2a44;
  --accent-soft-text: #a9c3ff;
  --accent-border: #3b4f80;
  --on-accent: #0f1a33;
  --live: #f5b25c;
  --live-soft: #3a2a14;
  --live-text: #f5b25c;
  --live-border: #6b4a1c;
  --warn-soft: #33290f;
  --warn-text: #ffd27a;
  --danger: #ff8a8a;
  --danger-soft: #3a1c1e;
  --danger-text: #ff9c9c;
  --ok: #6fd3a0;
  --ok-soft: #173326;
  --ok-text: #7fdcaa;
  --seg-active: #4a4944;
  --toggle-off: #85827a;
  --bubble: #3a3936;
  --logo-tile: #3a66d8;
  --backdrop: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-shot: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 56px -14px rgba(0, 0, 0, 0.7);
  --wash: radial-gradient(1200px 520px at 78% -8%, rgba(58, 102, 216, 0.16) 0%, rgba(58, 102, 216, 0) 62%),
    radial-gradient(900px 420px at 4% 8%, rgba(245, 178, 92, 0.06) 0%, rgba(245, 178, 92, 0) 60%);
  --frame-bar: #2b2b29;
  --dot: #4a4944;
}

/* Light/dark screenshots: one of each pair shows. */
.img-dark { display: none !important; }
:root[data-theme="dark"] .img-light { display: none !important; }
:root[data-theme="dark"] .img-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .img-light { display: none !important; }
  :root:not([data-theme="light"]) .img-dark { display: block !important; }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 { margin: 0; color: var(--text); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

code { font-family: var(--font-mono); font-size: 0.88em; }

b, strong { font-weight: 600; }

.i { width: 18px; height: 18px; flex: 0 0 auto; }

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

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--bg); }

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: calc(820px + var(--gutter) * 2); }

/* ── Type ───────────────────────────────────────────────────────────────── */
.display,
h1,
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.012em;
}

h1 { font-size: clamp(40px, 6.2vw, 64px); line-height: 1.04; }
h2, .h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.1; }
h3 { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; }

.accent-word { color: var(--accent); font-style: italic; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  color: var(--text-3);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
}
.eyebrow .i { width: 16px; height: 16px; color: var(--accent); }

.lede { margin-top: 18px; color: var(--text-2); font-size: 18.5px; line-height: 1.6; max-width: 40em; }
.fine { color: var(--text-3); font-size: 13px; line-height: 1.55; }
.muted { color: var(--text-3); }

/* ── Buttons (the extension's .igp-btn) ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 550; line-height: 1; white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn .i { width: 16px; height: 16px; }

.btn-primary { border-color: var(--text); background: var(--text); color: var(--bg); }
.btn-primary:hover { border-color: var(--text-2); background: var(--text-2); color: var(--bg); }

.btn-accent { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--on-accent); }

.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn-lg { height: 46px; padding: 0 20px; font-size: 16px; border-radius: var(--radius); }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-2);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ── Chips, tags, pills (the extension's .ap-chip and status tags) ──────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 4px 12px;
  border: 1px solid var(--accent-border); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-soft-text);
  font-size: 14px; font-weight: 550; line-height: 1.2;
}
.chip .i { width: 15px; height: 15px; }
.chip.plain { border-color: var(--border-strong); background: var(--surface); color: var(--text-2); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.6;
  background: var(--surface-2); color: var(--text-2);
}
.tag-ok { background: var(--ok-soft); color: var(--ok-text); }
.tag-wait { background: var(--accent-soft); color: var(--accent-soft-text); }
.tag-live { background: var(--live-soft); color: var(--live-text); }
.tag-skip { background: var(--surface-2); color: var(--text-3); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-sm);
  color: var(--text-2); font-size: 13.5px; font-weight: 550;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

/* ── Switch (the extension's .ap-switch) ────────────────────────────────── */
.switch {
  position: relative; display: inline-block; flex: 0 0 auto;
  width: 34px; height: 20px; border-radius: 999px;
  background: var(--toggle-off);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(14px); }

/* ── Light / Dark / Auto (the extension's drawer switch, .igp-theme) ───── */
.theme-switch {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.theme-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 28px; min-height: 26px; padding: 0 7px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--text-2);
  font-size: 12.5px; line-height: 1;
}
.theme-opt .i { width: 14px; height: 14px; }
.theme-opt:hover { color: var(--text); }
.theme-opt[aria-checked="true"] { background: var(--seg-active); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.theme-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-switch.compact .theme-opt span { display: none; }
.theme-switch.compact .theme-opt { padding: 0 6px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  transition: border-color 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--border); }

.nav { display: flex; align-items: center; gap: 20px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand-mark { width: 28px; height: 28px; }
.brand-name { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.nav-links a {
  padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 14.5px; font-weight: 500; text-decoration: none;
}
.nav-links a:hover { background: var(--surface-2); color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.menu-toggle { display: none; }
.menu-toggle .i-close { display: none; }
.menu-open .menu-toggle .i-menu { display: none; }
.menu-open .menu-toggle .i-close { display: block; }

.mobile-menu { display: none; }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-grid; }
  .nav-actions .nav-cta { display: none; }
  .mobile-menu {
    display: none; flex-direction: column; gap: 2px;
    padding: 8px var(--gutter) 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .menu-open .mobile-menu { display: flex; }
  .mobile-menu a:not(.btn) {
    padding: 10px 4px; border-bottom: 1px solid var(--border);
    color: var(--text); font-weight: 500; text-decoration: none;
  }
  .mobile-menu .btn { margin-top: 14px; }
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { padding: 104px 0; }
.section.tight { padding: 72px 0; }
.section-alt { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }
.section-head p:not(.eyebrow) { margin-top: 16px; color: var(--text-2); font-size: 18px; }
.section-head .chips { margin-top: 22px; }
.section-head.center .chips { justify-content: center; }
.section-head p.fine { margin-top: 10px; color: var(--text-3); font-size: 14.5px; }
.hero h1:first-child { margin-top: 0; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 72px 0 88px; overflow: hidden; }
.hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; background: var(--wash); pointer-events: none; }
.hero > .container, .page-hero > .container { position: relative; }
.hero h1 { margin-top: 22px; }
.hero .lede { font-size: 19.5px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; list-style: none; color: var(--text-2); font-size: 14.5px; }
.hero-notes li { display: inline-flex; align-items: center; gap: 7px; }
.hero-notes .i { width: 16px; height: 16px; color: var(--ok); }
.hero-visual { position: relative; display: flex; justify-content: center; }


/* ── Screenshot frames ──────────────────────────────────────────────────── */
/* The side panel: a tall card, like Chrome's side panel. */
.panel-frame {
  position: relative; width: 100%; max-width: 400px;
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow-shot);
}
.panel-frame img { width: 100%; }
.panel-frame.fade::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

/* The full-page app in a browser window. */
.app-frame {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg); box-shadow: var(--shadow-shot);
}
.frame-bar {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  border-bottom: 1px solid var(--border); background: var(--frame-bar);
}
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.frame-bar span {
  margin: 0 auto; padding: 2px 14px; border-radius: 6px;
  background: var(--surface); color: var(--text-3); font-size: 12px; font-style: normal;
  transform: translateX(-20px);
}
.app-frame img { width: 100%; }

figure { margin: 0; }
figcaption { margin-top: 14px; color: var(--text-3); font-size: 14px; line-height: 1.5; }
figcaption b { color: var(--text); }

/* ── Feature rows ───────────────────────────────────────────────────────── */
.feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.feature + .feature { margin-top: 112px; }
.feature.flip > :first-child { order: 2; }
.feature.panel-right { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.feature-media { min-width: 0; }
.feature-media.center { display: flex; justify-content: center; }

.checks { display: grid; gap: 14px; margin-top: 28px; list-style: none; }
.checks li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.checks li b { color: var(--text); }
.checks .ic, .ic {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent);
}
.checks .ic .i, .ic .i { width: 17px; height: 17px; }

/* Facts list: label · value rows (schedules, limits) */
.facts {
  margin-top: 26px; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); overflow: hidden;
}
.facts > div { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.facts > div + div { border-top: 1px solid var(--border); }
.facts .k { flex: 1 1 auto; min-width: 0; }
.facts .k b { display: block; color: var(--text); font-size: 15px; font-weight: 600; }
.facts .k span { color: var(--text-3); font-size: 13.5px; }

.people-points { margin-top: 40px; }
.people-points .checks { margin-top: 0; }

/* ── Cards / grids ──────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.grid { display: grid; gap: 16px; list-style: none; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tile { padding: 22px 22px 24px; }
.tile .ic { margin-bottom: 16px; }
.tile h3 { margin-bottom: 6px; }
.tile p { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.tile .chips { margin-top: 12px; }
.tile .chip { min-height: 26px; padding: 2px 10px; font-size: 12.5px; }

/* ── Hero live demo: the Instagram tab while IG Pilot works (illustration) ──
   Two layouts with fixed sizes so the cursor's targets are known:
   wide (> 1000px): Instagram's post view (photo | details) over the dimmed grid;
   narrow: one feed post card. Both run one 14 s timeline, all parts together:
   15% like (heart, likes +1)   18% "Liked" row
   31% Follow                   34% "Followed" row
   46% click the comment box, 48–64% typing, 72% Post (comment appears)   75% "Commented" row
   95–100% reset. The static values below are the END state (shown with
   reduced motion); the animations only replay how it got there. */
.hero-live { padding: 36px 0 64px; }
.hero-stack { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-live h1 { margin-top: 0; font-size: clamp(30px, 4.6vw, 56px); text-wrap: balance; }
.section-head h2, .cta-final h2 { text-wrap: balance; }
.hero-sub .lede { margin: 12px auto 0; }
.hero-sub .cta-row { justify-content: center; margin-top: 20px; }
.hero-notes.center { justify-content: center; margin-top: 22px; }

.live-demo {
  position: relative; width: 100%; max-width: 1100px; margin-top: 28px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--shadow-shot); text-align: left;
}
.ld-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.ld-page { position: relative; min-height: 424px; padding: 64px 0 40px; overflow: hidden; background: #111; }

/* Dimmed grid behind the post, as when a post opens over a profile grid. */
.ld-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 4px; }
.ld-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ld-grid::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); }

.ld-post {
  position: relative; z-index: 1; display: grid; width: 600px; margin: 0 auto; overflow: hidden;
  grid-template-columns: 320px 280px; grid-template-rows: 52px 144px 40px 40px 44px;
  grid-template-areas: "photo head" "photo thread" "photo actions" "photo likes" "photo comment";
  border-radius: 6px; background: var(--surface); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.ld-photo { grid-area: photo; }
.ld-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld-head { grid-area: head; position: relative; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ld-av { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ld-head b { max-width: 136px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ld-follow { position: absolute; top: 50%; right: 14px; width: 72px; height: 20px; transform: translateY(-50%); font-weight: 600; }
.ld-follow span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; }
.ld-follow-off { color: #0095f6; opacity: 0; animation: ld-hide-31 14s infinite; }
.ld-follow-on { color: var(--text); animation: ld-show-31 14s infinite; }
.ld-thread { grid-area: thread; display: grid; align-content: start; gap: 8px; padding: 12px 14px; overflow: hidden; font-size: 13px; line-height: 1.4; }
.ld-thread b { margin-right: 4px; font-weight: 600; }
.ld-mine { animation: ld-show-72 14s infinite; }
.ld-actions { grid-area: actions; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-top: 1px solid var(--border); }
.ld-actions .i, .ld-save { width: 24px; height: 24px; }
.ld-save { margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ld-heart { position: relative; flex: none; width: 24px; height: 24px; }
.ld-heart svg { position: absolute; inset: 0; width: 24px; height: 24px; stroke-width: 1.9; stroke-linejoin: round; }
.ld-heart-off { fill: none; stroke: currentColor; opacity: 0; animation: ld-hide-15 14s infinite; }
.ld-heart-on { fill: #ff3040; stroke: #ff3040; animation: ld-heart 14s infinite; }
.ld-likes { grid-area: likes; position: relative; font-size: 13.5px; font-weight: 600; }
.ld-likes span { position: absolute; top: 4px; left: 14px; }
.ld-likes-off { opacity: 0; animation: ld-hide-15 14s infinite; }
.ld-likes-on { animation: ld-show-15 14s infinite; }
.ld-comment { grid-area: comment; position: relative; display: flex; align-items: center; padding: 0 14px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13.5px; white-space: nowrap; }
.ld-ph { animation: ld-ph 14s infinite; }
.ld-typed { position: absolute; left: 14px; color: var(--text); opacity: 0; animation: ld-type 14s infinite; }
.ld-postbtn { position: absolute; right: 14px; color: #0095f6; font-weight: 600; opacity: 0.4; animation: ld-postbtn 14s infinite; }

.ld-glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(225, 48, 108, 0.85), inset 0 0 36px 10px rgba(247, 119, 55, 0.35);
  animation: glow 2.4s ease-in-out infinite;
}
@keyframes glow { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
.ld-pill {
  position: absolute; top: 14px; left: 50%; z-index: 3; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px;
  border-radius: 999px; background: #111827; color: #f9fafb;
  font: 600 13px/1.2 var(--font); white-space: nowrap;
  box-shadow: 0 6px 20px rgba(225, 48, 108, 0.45);
}
.ld-pill span:last-child { padding: 4px 12px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; }
/* The agent's cursor, drawn as src/content/cursor.ts draws it: arrow in the brand blue, "IG Pilot" tag, click ripple. */
.ld-cursor {
  position: absolute; z-index: 4; left: calc(50% + 94px); top: 362px; width: 22px; height: 22px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  animation: ld-cursor-wide 14s ease-in-out infinite;
}
.ld-cursor svg { position: relative; display: block; }
.ld-tag { position: absolute; left: 18px; top: 18px; padding: 2px 7px; border-radius: 999px; background: #2f5bd0; color: #fff; font: 600 11px/1.4 var(--font); white-space: nowrap; }
.ld-ripple { position: absolute; left: 3px; top: 3px; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid #2f5bd0; background: rgba(47, 91, 208, 0.18); opacity: 0; animation: ld-ripple 14s ease-out infinite; }

/* The side panel: IG Pilot's Autopilot log. */
.ld-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; border-left: 1px solid var(--border); background: var(--bg); color: var(--text-2); font-size: 13px; line-height: 1.45; }
.ld-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-3); font-size: 12.5px; }
.ld-acct { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 550; }
.ld-acct i, .ld-status i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.ld-status { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 550; }
.ld-pause { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 10px; border-radius: 7px; background: var(--surface-2); font-size: 12px; }
.ld-pause .i { width: 12px; height: 12px; }
.ld-feed { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ld-feed li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; padding: 7px 8px; border-radius: 8px; }
.ld-feed .i { width: 16px; height: 16px; margin-top: 1px; color: var(--text-3); }
.ld-feed q { color: var(--text); }
.ld-r1 { animation: ld-row-18 14s infinite; }
.ld-r2 { animation: ld-row-34 14s infinite; }
.ld-r3 { animation: ld-row-75 14s infinite; }

/* Narrow: one feed post card (Instagram's single-column layout). */
@media (max-width: 1000px) {
  .ld-body { grid-template-columns: minmax(0, 1fr) 280px; }
  .ld-page { min-height: 0; padding: 64px 0 24px; background: var(--bg); }
  .ld-grid { display: none; }
  .ld-post {
    width: min(300px, 100%); border: 1px solid var(--border); border-radius: 10px; box-shadow: none;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px 220px 40px 24px 52px 44px;
    grid-template-areas: "head" "photo" "actions" "likes" "thread" "comment";
  }
  .ld-head { border-bottom: 0; }
  .ld-av { width: 28px; height: 28px; }
  .ld-thread { gap: 2px; padding: 2px 14px 6px; }
  .ld-thread p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ld-other { display: none; }
  .ld-actions { border-top: 0; }
  .ld-likes span { top: 2px; }
  .ld-cursor { left: calc(50% - 76px); top: 470px; animation-name: ld-cursor-narrow; }
}

@keyframes ld-cursor-wide {
  0%, 4% { left: calc(50% - 150px); top: 210px; }
  12%, 20% { left: calc(50% + 46px); top: 280px; }
  28%, 36% { left: calc(50% + 263px); top: 90px; }
  43%, 66% { left: calc(50% + 94px); top: 362px; }
  70%, 76% { left: calc(50% + 271px); top: 362px; }
  82%, 92% { left: calc(50% + 94px); top: 362px; }
  100% { left: calc(50% - 150px); top: 210px; }
}
@keyframes ld-cursor-narrow {
  0%, 4% { left: calc(50% + 10px); top: 190px; }
  12%, 20% { left: calc(50% - 124px); top: 352px; }
  28%, 36% { left: calc(50% + 113px); top: 88px; }
  43%, 66% { left: calc(50% - 76px); top: 470px; }
  70%, 76% { left: calc(50% + 121px); top: 470px; }
  82%, 92% { left: calc(50% - 76px); top: 470px; }
  100% { left: calc(50% + 10px); top: 190px; }
}
@keyframes ld-ripple {
  0%, 14% { opacity: 0; transform: scale(0.4); }
  15% { opacity: 1; transform: scale(0.4); }
  19% { opacity: 0; transform: scale(1.6); }
  30% { opacity: 0; transform: scale(0.4); }
  31% { opacity: 1; transform: scale(0.4); }
  35% { opacity: 0; transform: scale(1.6); }
  45% { opacity: 0; transform: scale(0.4); }
  46% { opacity: 1; transform: scale(0.4); }
  50% { opacity: 0; transform: scale(1.6); }
  71% { opacity: 0; transform: scale(0.4); }
  72% { opacity: 1; transform: scale(0.4); }
  76%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes ld-hide-15 { 0%, 14.9% { opacity: 1; } 15%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ld-show-15 { 0%, 14.9% { opacity: 0; } 15%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ld-heart { 0%, 14.9% { opacity: 0; transform: scale(1); } 15% { opacity: 1; transform: scale(1.3); } 18%, 95% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes ld-hide-31 { 0%, 30.9% { opacity: 1; } 31%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ld-show-31 { 0%, 30.9% { opacity: 0; } 31%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ld-show-72 { 0%, 71.9% { opacity: 0; } 72%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ld-ph { 0%, 45.9% { opacity: 1; } 46%, 71.9% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes ld-type {
  0%, 47.9% { opacity: 0; clip-path: inset(0 100% 0 0); }
  48% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(24, end); }
  64%, 71.9% { opacity: 1; clip-path: inset(0 0 0 0); }
  72%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes ld-postbtn { 0%, 47.9% { opacity: 0.4; } 48%, 71.9% { opacity: 1; } 72%, 100% { opacity: 0.4; } }
@keyframes ld-row-18 { 0%, 17.9% { opacity: 0; transform: translateY(6px); } 18% { opacity: 1; transform: none; background: var(--accent-soft); } 27%, 95% { opacity: 1; background: transparent; } 100% { opacity: 0; } }
@keyframes ld-row-34 { 0%, 33.9% { opacity: 0; transform: translateY(6px); } 34% { opacity: 1; transform: none; background: var(--accent-soft); } 43%, 95% { opacity: 1; background: transparent; } 100% { opacity: 0; } }
@keyframes ld-row-75 { 0%, 74.9% { opacity: 0; transform: translateY(6px); } 75% { opacity: 1; transform: none; background: var(--accent-soft); } 84%, 95% { opacity: 1; background: transparent; } 100% { opacity: 0; } }

/* The Chrome logo on "Add to Chrome" buttons (Google's mark, unmodified). */
.btn .chrome-logo { flex: none; width: 20px; height: 20px; }
.btn-sm .chrome-logo { width: 16px; height: 16px; }

/* ── People demo: the People table filling up (illustration) ─────────────
   Looks like the app's People view (src/app-page/people.css). The static
   styles are the finished table; the animations replay how it filled up on
   one 16s loop, which starts when the figure scrolls into view (.reveal.in).
   Rows sit in their final order and are moved up into place while they
   arrive: newest at the top, pushing the older ones down and out. */
.crm-fig { max-width: 920px; margin: 0 auto; }
.crm-demo {
  --cd-dur: 16s; --cd-row: 54px;
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg); box-shadow: var(--shadow-shot); text-align: left;
}
.cd-body { padding: 14px 16px 16px; }
.cd-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cd-bar > b { margin-right: auto; font-size: 17px; font-weight: 650; }
.cd-search, .cd-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-3); font-size: 13px; white-space: nowrap;
}
.cd-search { width: 200px; }
.cd-btn { color: var(--text); font-weight: 600; }
.cd-search .i, .cd-btn .i { width: 15px; height: 15px; }
.cd-table { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cd-row {
  display: grid; align-items: center; column-gap: 12px;
  grid-template-columns: 32px minmax(0, 1fr) 96px 64px 168px;
  grid-template-areas: "av handle stage contact when" "av bio stage contact when";
  height: var(--cd-row); padding: 0 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; line-height: 1.35;
}
.cd-headrow {
  grid-template-areas: none; height: 36px;
  background: var(--surface-2); color: var(--text-3); font-size: 11.5px; font-weight: 600;
}
.cd-table .cd-headrow > * { grid-area: auto; }
/* Five rows show; older ones are pushed out at the bottom as new ones arrive. */
.cd-rows { height: calc(var(--cd-row) * 5); margin-bottom: -1px; overflow: hidden; }
.cd-av {
  grid-area: av; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 650; letter-spacing: 0.02em;
}
.cd-av svg { width: 19px; height: 19px; fill: #fff; }
.av-cake { background: linear-gradient(140deg, #f4a0b9, #c93a6a); }
.av-mp { background: linear-gradient(140deg, #eba650, #a9520f); font-family: var(--font-display); font-size: 13px; }
.av-moon { background: linear-gradient(140deg, #8f9dff, #3c48b8); }
.av-mo { background: linear-gradient(140deg, #58c2ab, #1c6e5e); }
.av-wheat { background: linear-gradient(140deg, #bfca66, #5b7222); }
.av-sc { background: linear-gradient(140deg, #f3957d, #b9402a); }
.av-cup { background: linear-gradient(140deg, #b98c66, #6a4226); }
.av-rp { background: linear-gradient(140deg, #c48ad8, #77368f); }
.cd-handle, .cd-link { overflow: hidden; color: var(--accent); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cd-handle { grid-area: handle; align-self: end; }
.cd-bio { grid-area: bio; align-self: start; overflow: hidden; color: var(--text-3); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.cd-stage { grid-area: stage; }
.cd-contact { grid-area: contact; display: inline-flex; gap: 4px; }
.cd-contact i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-soft-text); }
.cd-contact .i { width: 14px; height: 14px; }
.cd-when { grid-area: when; overflow: hidden; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.cd-headrow .cd-when { color: inherit; }
.cd-chip {
  display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  transform-origin: left center;
}
.cd-chip.s-engaged { background: var(--accent-soft); color: var(--accent-soft-text); }
.cd-chip.s-replied, .cd-chip.s-interested { background: var(--warn-soft); color: var(--warn-text); }
.cd-chip.s-booked { background: var(--ok-soft); color: var(--ok-text); }
/* One person whose stage and last touch change: the versions sit on top of each other. */
.cd-chips, .cd-n2 .cd-when { display: inline-grid; justify-items: start; }
.cd-chips > *, .cd-n2 .cd-when > * { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; }
.cd-st1, .cd-st2, .cd-w1 { opacity: 0; }

/* The person's details, sliding in from the right for a moment. */
.cd-card {
  position: absolute; top: 8px; right: 8px; bottom: 8px; width: 270px; padding: 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-lg); font-size: 12.5px; line-height: 1.35;
  transform: translateX(calc(100% + 16px));
}
.cd-card-top { display: flex; align-items: center; gap: 10px; }
.cd-card-top .cd-av { width: 40px; height: 40px; flex: none; font-size: 14px; }
.cd-card-name { display: grid; min-width: 0; margin-right: auto; }
.cd-card-name b { font-size: 14px; }
.cd-card-top > .i { align-self: start; width: 16px; height: 16px; color: var(--text-3); }
.cd-card-bio { margin-top: 10px; color: var(--text-2); }
.cd-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; color: var(--text-3); }
.cd-fit { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok-text); font-size: 11.5px; font-weight: 600; }
.cd-card-contact, .cd-tl { display: grid; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); list-style: none; color: var(--text-2); }
.cd-card-contact li, .cd-tl li { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.cd-card-contact .i, .cd-tl .i { flex: none; width: 14px; height: 14px; color: var(--text-3); }
.cd-tl span { color: var(--text); font-weight: 600; }
.cd-tl time { margin-left: auto; color: var(--text-3); }

/* The loop (16s). Arrivals at 8%, 20% and 32%; @mesa.patisserie's DM at 46%;
   its details open 50–75% and it turns Interested at 60%; the table rests,
   then the rows fade out and back in at the start. */
.crm-demo .cd-old { animation: cd-old var(--cd-dur) ease-in-out infinite; }
.crm-demo .cd-n1 { animation: cd-n1 var(--cd-dur) ease-in-out infinite, cd-flash-8 var(--cd-dur) linear infinite; }
.crm-demo .cd-n2 { animation: cd-n2 var(--cd-dur) ease-in-out infinite, cd-hl-n2 var(--cd-dur) linear infinite; }
.crm-demo .cd-n3 { animation: cd-n3 var(--cd-dur) ease-in-out infinite, cd-flash-32 var(--cd-dur) linear infinite; }
.crm-demo .cd-st1 { animation: cd-st1 var(--cd-dur) linear infinite; }
.crm-demo .cd-st2 { animation: cd-st2 var(--cd-dur) linear infinite; }
.crm-demo .cd-st3 { animation: cd-st3 var(--cd-dur) linear infinite; }
.crm-demo .cd-w1 { animation: cd-w1 var(--cd-dur) linear infinite; }
.crm-demo .cd-w2 { animation: cd-w2 var(--cd-dur) linear infinite; }
.crm-demo .cd-card { animation: cd-card var(--cd-dur) cubic-bezier(0.3, 0.7, 0.3, 1) infinite; }
.crm-demo .cd-rows { animation: cd-reset var(--cd-dur) ease-in-out infinite; }
/* Wait at the start until it is on screen. */
.js .crm-fig:not(.in) .crm-demo * { animation-play-state: paused; }

@keyframes cd-old {
  0%, 8% { transform: translateY(calc(var(--cd-row) * -3)); }
  11%, 20% { transform: translateY(calc(var(--cd-row) * -2)); }
  23%, 32% { transform: translateY(calc(var(--cd-row) * -1)); }
  35%, 96% { transform: translateY(0); }
  96.5%, 100% { transform: translateY(calc(var(--cd-row) * -3)); }
}
@keyframes cd-n1 {
  0%, 8% { opacity: 0; transform: translate(-28px, calc(var(--cd-row) * -2)); }
  11%, 20% { opacity: 1; transform: translate(0, calc(var(--cd-row) * -2)); }
  23%, 32% { opacity: 1; transform: translate(0, calc(var(--cd-row) * -1)); }
  35%, 96% { opacity: 1; transform: translate(0, 0); }
  96.5%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes cd-n2 {
  0%, 20% { opacity: 0; transform: translate(-28px, calc(var(--cd-row) * -1)); }
  23%, 32% { opacity: 1; transform: translate(0, calc(var(--cd-row) * -1)); }
  35%, 96% { opacity: 1; transform: translate(0, 0); }
  96.5%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes cd-n3 {
  0%, 32% { opacity: 0; transform: translate(-28px, 0); }
  35%, 96% { opacity: 1; transform: translate(0, 0); }
  96.5%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes cd-flash-8 { 0%, 9% { background-color: transparent; } 11% { background-color: var(--accent-soft); } 22%, 100% { background-color: transparent; } }
@keyframes cd-flash-32 { 0%, 33% { background-color: transparent; } 35% { background-color: var(--accent-soft); } 46%, 100% { background-color: transparent; } }
@keyframes cd-hl-n2 {
  0%, 21% { background-color: transparent; } 23% { background-color: var(--accent-soft); } 33%, 45% { background-color: transparent; }
  47%, 74% { background-color: var(--accent-soft); } 79%, 100% { background-color: transparent; }
}
/* Back to the start: the rows fade out and in again, rather than rewinding. */
@keyframes cd-reset { 0%, 92% { opacity: 1; } 95%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cd-st1 { 0%, 45.9% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes cd-st2 { 0%, 45.9% { opacity: 0; } 46% { opacity: 1; transform: scale(1.15); } 48%, 59.9% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; } }
@keyframes cd-st3 { 0%, 59.9% { opacity: 0; } 60% { opacity: 1; transform: scale(1.15); } 62%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cd-w1 { 0%, 45.9% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes cd-w2 { 0%, 45.9% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes cd-card {
  0%, 50% { transform: translateX(calc(100% + 16px)); }
  54%, 71% { transform: translateX(0); }
  75%, 100% { transform: translateX(calc(100% + 16px)); }
}
@keyframes cd-card-up {
  0%, 50% { transform: translateY(calc(100% + 16px)); }
  54%, 71% { transform: translateY(0); }
  75%, 100% { transform: translateY(calc(100% + 16px)); }
}

/* ── Gallery (Inside the app) ───────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.tabs button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2);
  font-size: 14px; font-weight: 550;
}
.tabs button .i { width: 16px; height: 16px; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--seg-active); color: var(--text); box-shadow: var(--shadow-sm); }
.gallery-panel[hidden] { display: none; }
.gallery-panel figcaption { text-align: center; }

/* ── Safety ─────────────────────────────────────────────────────────────── */
.limits-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.limits-table th, .limits-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.limits-table thead th { color: var(--text-3); font-size: 13px; font-weight: 600; background: var(--surface-2); }
.limits-table tbody th { font-weight: 600; }
.limits-table td { font-variant-numeric: tabular-nums; color: var(--text-2); }
.limits-table tr:last-child th, .limits-table tr:last-child td { border-bottom: 0; }

.note {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 28px; padding: 16px 18px; border: 1px solid var(--live-border); border-radius: var(--radius-card);
  background: var(--live-soft); color: var(--live-text); font-size: 15px;
}
.note .i { margin-top: 3px; }
.note a { color: inherit; font-weight: 600; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
}
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 600; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--text-3); transition: transform 0.15s ease; }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq .answer { padding: 0 20px 18px; color: var(--text-2); font-size: 15.5px; }
.faq .answer p + p, .faq .answer p + ul, .faq .answer ul + p { margin-top: 10px; }
.faq .answer ul { padding-left: 20px; }
.faq .answer li + li { margin-top: 4px; }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.cta-final {
  position: relative; overflow: hidden; padding: 64px 32px; text-align: center;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow);
}
.cta-final::before { content: ""; position: absolute; inset: 0; background: var(--wash); pointer-events: none; }
.cta-final > * { position: relative; }
.cta-final p { margin: 14px auto 0; max-width: 34em; color: var(--text-2); font-size: 18px; }
.cta-final .cta-row { justify-content: center; }
.cta-final .fine { margin-top: 18px; font-size: 13.5px; }
.cta-logo { width: 52px; height: 52px; margin: 0 auto 22px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { margin-top: 104px; padding: 56px 0 40px; border-top: 1px solid var(--border); background: var(--surface-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.footer-brand p { margin-top: 12px; max-width: 30em; color: var(--text-2); font-size: 14.5px; }
.footer-brand .theme-switch { margin-top: 18px; }
.site-footer h2 { margin-bottom: 12px; font-family: var(--font); color: var(--text); font-size: 13.5px; font-weight: 600; letter-spacing: 0; }
.site-footer ul { display: grid; gap: 8px; list-style: none; }
.site-footer ul a { color: var(--text-2); font-size: 14.5px; text-decoration: none; }
.site-footer ul a:hover { color: var(--text); text-decoration: underline; }
.footer-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 13px; }

/* ── Page hero (inner pages) ────────────────────────────────────────────── */
.page-hero { position: relative; padding: 72px 0 40px; overflow: hidden; }
.page-hero.center { text-align: center; }
.page-hero.center .lede { margin-left: auto; margin-right: auto; }
.page-hero h1 { font-size: clamp(36px, 5.4vw, 56px); }
.crumbs { margin-bottom: 14px; color: var(--text-3); font-size: 14px; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.checked { margin-top: 16px; color: var(--text-3); font-size: 13.5px; }

/* ── Pricing ────────────────────────────────────────────────────────────── */
.billing { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-bottom: 32px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.seg button { min-height: 32px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font-size: 14px; font-weight: 550; }
.seg button[aria-pressed="true"] { background: var(--seg-active); color: var(--text); box-shadow: var(--shadow-sm); }
.save-note { color: var(--ok-text); font-size: 13.5px; font-weight: 600; }

.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 24px 22px; }
.plan.popular { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border), var(--shadow); }
.plan .badge { position: absolute; top: -11px; left: 22px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 650; }
.plan h3 { font-size: 18px; }
.plan .for { margin-top: 4px; min-height: 3em; color: var(--text-3); font-size: 14px; line-height: 1.45; }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.price .amt { font-family: var(--font-display); font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.price .per { color: var(--text-3); font-size: 14px; }
.price-sub { min-height: 1.6em; margin: 6px 0 18px; color: var(--text-3); font-size: 13.5px; }
.plan ul { display: grid; gap: 9px; margin-top: 20px; list-style: none; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.plan li .i { width: 16px; height: 16px; margin-top: 2px; color: var(--ok); }
.lifetime { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 18px 22px; }
.lifetime p { color: var(--text-2); }
.lifetime p b { color: var(--text); }
.price-foot { margin-top: 18px; text-align: center; color: var(--text-3); font-size: 14px; }

/* Tables (pricing, compare) */
/* position: relative keeps the screen-reader-only labels inside the scroll box. */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.table-wrap:focus-visible { outline-offset: 3px; }
.data-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.data-table caption { caption-side: bottom; padding: 12px 16px; text-align: left; color: var(--text-3); font-size: 13px; border-top: 1px solid var(--border); }
.data-table th, .data-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.data-table thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.data-table tbody th { font-weight: 500; color: var(--text); }
.data-table td { color: var(--text-2); }
.data-table tr:last-child > * { border-bottom: 0; }
.data-table .group th { padding-top: 18px; background: var(--surface); color: var(--text-3); font-size: 12.5px; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; }
.data-table .us { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.data-table thead .us { background: var(--accent-soft); color: var(--accent-soft-text); }
.yes, .no { display: inline-flex; align-items: center; gap: 6px; }
.yes::before, .no::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; }
.yes::before { background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7348' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.no::before { background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366635c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 10px no-repeat; }
.table-hint { display: none; margin-top: 10px; color: var(--text-3); font-size: 13px; text-align: center; }

/* ── Compare ────────────────────────────────────────────────────────────── */
.compare-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; }
.compare-card { display: flex; flex-direction: column; height: 100%; padding: 24px; color: var(--text); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.compare-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); color: var(--text); }
.compare-card .kicker { color: var(--text-3); font-size: 13px; font-weight: 600; }
.compare-card h2 { margin-top: 6px; font-family: var(--font); font-size: 19px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; }
.compare-card p { margin-top: 10px; color: var(--text-2); font-size: 15px; }
.compare-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; color: var(--accent); font-size: 14.5px; font-weight: 600; }
.compare-card .go .i { width: 15px; height: 15px; }

.tldr { margin-top: 26px; padding: 18px 20px; border: 1px solid var(--accent-border); border-radius: var(--radius-card); background: var(--accent-soft); }
.tldr .label { display: block; margin-bottom: 6px; color: var(--accent-soft-text); font-size: 13px; font-weight: 650; }
.tldr p { color: var(--text); font-size: 16px; }

.block + .block { margin-top: 56px; }
.block > h2 { margin-bottom: 18px; font-size: clamp(26px, 3.4vw, 32px); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-col .card { padding: 22px; }
.two-col .card h2 { margin-bottom: 12px; font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.two-col .card.us { border-color: var(--accent-border); }
.two-col ul, .pick ul, .tradeoffs ul, .prose ul { display: grid; gap: 8px; padding-left: 20px; color: var(--text-2); font-size: 15px; }
.two-col li b, .pick li b { color: var(--text); }
.tradeoffs { margin-top: 16px; padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-2); }
.tradeoffs > b { display: block; margin-bottom: 8px; }
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pick { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.pick h3 { margin-bottom: 10px; }
.sources { color: var(--text-3); font-size: 14px; }
.sources ul { display: grid; gap: 4px; margin-top: 10px; padding-left: 18px; }
.sources h2 { margin-bottom: 10px; font-size: 24px; }

/* ── Prose (privacy, terms) ─────────────────────────────────────────────── */
.prose { color: var(--text-2); font-size: 16px; line-height: 1.7; }
.prose h2 { margin: 48px 0 12px; font-size: 26px; }
.prose h3 { margin: 28px 0 8px; font-size: 17px; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 12px; }
.prose ul { margin-top: 10px; gap: 6px; font-size: 16px; }
.prose li b, .prose p b { color: var(--text); }
.prose a { word-break: break-word; }
.toc { margin-top: 28px; padding: 18px 22px; }
.toc b { display: block; margin-bottom: 8px; font-size: 14px; }
.toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; padding-left: 20px; color: var(--text-2); font-size: 14.5px; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; list-style: none; }
.summary-grid li { display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; padding: 18px; }
.summary-grid li b { color: var(--text); }
.summary-grid li span:last-child { grid-column: 2; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.notice { padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text-2); }

/* ── Claude and Codex (mcp.html) ────────────────────────────────────── */
.mcp-h { margin: 40px 0 12px; font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.mcp-panel .mcp-h { margin-top: 0; }
.mcp-clients { margin-top: 40px; }
.mcp-clients .tabs { margin-bottom: 16px; }
.mcp-panel { padding: 22px; }
.mcp-panel[hidden] { display: none; }
.mcp-panel .fine { margin-top: 14px; }
.steps { display: grid; gap: 12px; padding-left: 22px; color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.steps li b { color: var(--text); }
.steps .code-row { margin-top: 8px; }
.code-row { display: flex; align-items: flex-start; gap: 8px; }
.code-row .btn { flex: none; }
.code {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text);
  font: 13.5px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.code code { font-size: inherit; }
@media (max-width: 640px) {
  .mcp-panel { padding: 18px 16px; }
  .code-row { flex-direction: column; align-items: stretch; }
  .code-row .btn { align-self: flex-start; }
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: var(--radius); background: var(--text); color: var(--bg);
  font-size: 14.5px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Reveal ─────────────────────────────────────────────────────────────── */
/* site.js marks .reveal blocks with .in once they scroll into view. Nothing is
   hidden before that (no empty blocks while scrolling or after a theme switch);
   it only starts the People demo from the top. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ld-glow { animation: none; opacity: 1; }
  .live-demo *, .live-demo *::before, .crm-demo * { animation: none !important; }
  * { transition: none !important; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .section { padding: 80px 0; }
  .hero { padding: 44px 0 64px; }
  .feature, .feature.panel-right { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature.flip > :first-child { order: 0; }
  .feature + .feature { margin-top: 88px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  /* People demo: drop the contact icons before the names get squeezed. */
  .cd-row { grid-template-columns: 32px minmax(0, 1fr) 96px 150px; grid-template-areas: "av handle stage when" "av bio stage when"; }
  .cd-row .cd-contact { display: none; }
}

@media (max-width: 760px) {
  /* Live demo: the side panel goes under the page, with only the new rows. */
  .ld-body { grid-template-columns: minmax(0, 1fr); }
  .ld-panel { border-left: 0; border-top: 1px solid var(--border); }
  .ld-top, .ld-feed li:not(.ld-new) { display: none; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 56px; }
  body { font-size: 15.5px; }
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 32px; }
  .lede, .hero .lede { font-size: 17px; }
  .section-head p:not(.eyebrow) { font-size: 16.5px; }
  .grid-3, .grid-2, .grid-4, .price-grid, .compare-cards, .two-col, .pick-grid, .summary-grid { grid-template-columns: minmax(0, 1fr); }
  .toc ol { grid-template-columns: 1fr; }
  .cta-row .btn { flex: 1 1 auto; }
  .cta-final { padding: 44px 20px; }
  .hero-live { padding: 24px 0 56px; }
  /* Phones: the demo right under the headline; the line and button follow it. */
  .live-demo { order: 1; margin-top: 20px; }
  .hero-sub { order: 2; margin-top: 8px; }
  .hero-notes.center { order: 3; }
  /* People demo on phones: handle and last touch, stage on the right. */
  .crm-demo { --cd-row: 56px; }
  .cd-body { padding: 10px; }
  .cd-search { display: none; }
  .cd-row { grid-template-columns: 32px minmax(0, 1fr) 84px; grid-template-areas: "av handle stage" "av when stage"; column-gap: 10px; padding: 0 10px; }
  .cd-row .cd-bio, .cd-headrow .cd-when { display: none; }
  .cd-row .cd-stage { justify-self: end; }
  .cd-rows .cd-when { align-self: start; color: var(--text-3); font-size: 12.5px; }
  .cd-rows .cd-chips { justify-items: end; }
  .cd-rows .cd-chip { transform-origin: right center; }
  /* The details rise from the bottom, under @mesa.patisserie's row, so the top of the table stays in view. */
  .cd-card { top: calc(36px + var(--cd-row) * 2 + 4px); left: 8px; width: auto; padding: 12px; transform: translateY(calc(100% + 16px)); }
  .crm-demo .cd-card { animation-name: cd-card-up; }
  .cd-card-bio, .cd-tl { display: none; }
  .cd-card-contact { margin-top: 10px; padding-top: 10px; }
  .plan .for { min-height: 0; }
  .table-hint { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .site-footer { margin-top: 72px; }
  .tabs { width: 100%; }
  .tabs button { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: 13.5px; }
  .tabs button .i { display: none; }
  .frame-bar span { display: none; }
  /* Wide app captures: show the content side (not the app's left menu) bigger. */
  .app-frame.zoom img { aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--mx, 82%) 0; }
  .nav { gap: 10px; }
  .brand-name { font-size: 16px; }
  .theme-switch.compact .theme-opt { min-width: 26px; padding: 0 5px; }
}

/* Plain bullet lists (compare pages) */
.bullets { display: grid; gap: 8px; padding-left: 20px; color: var(--text-2); font-size: 15.5px; }
.bullets b { color: var(--text); }