/* ============================================================
   BURROW, burrow-cloud.dev marketing site
   Single stylesheet. Built only from Burrow design tokens.
   Ships into a Go html/template app: link this one file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------ */
:root {
  /* brand: navy (hoodie) */
  --navy-50:#eef1f6; --navy-100:#d8dfeb; --navy-200:#b3c0d4; --navy-300:#8598b6;
  --navy-400:#5a6e90; --navy-500:#3c5074; --navy-600:#2c3c5a; --navy-700:#232f47;
  --navy-800:#1b2433; --navy-900:#141a26; --navy-950:#0d111a;

  /* accent: orange (drawstrings) */
  --orange-50:#fdf2e7; --orange-100:#fbdfc4; --orange-200:#f6c094; --orange-300:#f19e5d;
  --orange-400:#ed8534; --orange-500:#e8741a; --orange-600:#cf6112; --orange-700:#a94d11;
  --orange-800:#843d12; --orange-900:#6a3211;

  /* warm neutrals: sand */
  --sand-25:#fbf8f3; --sand-50:#f7f2e9; --sand-100:#efe7d8; --sand-150:#e6dac6;
  --sand-200:#d9c9af; --sand-300:#c4ae8e; --sand-400:#a89072; --sand-500:#8a735a;
  --sand-600:#6b5945; --sand-700:#514435; --sand-800:#382f25; --sand-900:#241e17;

  /* cool neutrals: ink */
  --ink-50:#eef0f3; --ink-100:#d6dae1; --ink-200:#aab2bf; --ink-300:#76808f;
  --ink-400:#4b5563; --ink-500:#353e4c; --ink-600:#29313d; --ink-700:#1f2632;
  --ink-800:#181e28; --ink-850:#141a23; --ink-900:#11151c; --ink-950:#0c0f15;

  /* semantic hues */
  --green-100:#d8ead8; --green-300:#8cc497; --green-500:#3f9d5d; --green-600:#318049; --green-700:#27623a; --green-900:#18301f;
  --amber-100:#fbeec7; --amber-300:#f3cf6b; --amber-500:#e0a92b; --amber-600:#bd8a1c; --amber-700:#8f681a; --amber-900:#45330f;
  --red-100:#f6d8d2; --red-300:#e69a8c; --red-500:#d24c39; --red-600:#b33b2b; --red-700:#8a2e22; --red-900:#421712;
  --teal-100:#cfe6ea; --teal-300:#7cc0cb; --teal-500:#2f97a8; --teal-600:#257886; --teal-700:#1d5d68; --teal-900:#112e34;

  --white:#ffffff; --black:#0a0c10;

  /* type */
  --font-sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono","Menlo","Cascadia Code",Consolas,monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:2.875rem; --text-4xl:3.75rem; --text-5xl:4.75rem;
  --leading-none:1; --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.55; --leading-relaxed:1.7;
  --tracking-tighter:-0.03em; --tracking-tight:-0.015em; --tracking-normal:0; --tracking-wide:0.02em; --tracking-caps:0.08em;

  /* spacing */
  --space-0_5:.125rem; --space-1:.25rem; --space-1_5:.375rem; --space-2:.5rem; --space-2_5:.625rem;
  --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;
  --container-xl:75rem;
  --control-sm:2rem; --control-md:2.5rem; --control-lg:3rem;

  /* radius */
  --radius-xs:3px; --radius-sm:5px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:22px; --radius-pill:999px;

  /* motion */
  --ease-standard:cubic-bezier(0.2,0,0,1); --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in:cubic-bezier(0.4,0,1,1);
  --dur-instant:80ms; --dur-fast:140ms; --dur-base:200ms; --dur-slow:320ms;
}

/* semantic aliases, light (default) */
:root, [data-theme="light"] {
  color-scheme:light;
  --bg-app:var(--sand-50); --bg-subtle:var(--sand-100); --surface:var(--sand-25);
  --surface-raised:var(--white); --surface-sunken:var(--sand-100); --surface-inverse:var(--navy-900);
  --text-strong:var(--navy-900); --text-body:var(--sand-800); --text-muted:var(--sand-600);
  --text-subtle:var(--sand-500); --text-on-brand:var(--white); --text-on-accent:var(--white);
  --text-inverse:var(--sand-50); --text-link:var(--orange-600);
  --border:var(--sand-200); --border-strong:var(--sand-300); --border-subtle:var(--sand-150); --ring:var(--orange-500);
  --brand:var(--navy-800); --brand-hover:var(--navy-700); --brand-active:var(--navy-900); --brand-subtle:var(--navy-50); --on-brand:var(--white);
  --accent:var(--orange-500); --accent-hover:var(--orange-600); --accent-active:var(--orange-700); --accent-subtle:var(--orange-50); --on-accent:var(--white);
  --success:var(--green-600); --success-text:var(--green-700); --success-subtle:var(--green-100);
  --warning:var(--amber-600); --warning-text:var(--amber-700); --warning-subtle:var(--amber-100);
  --danger:var(--red-600); --danger-text:var(--red-700); --danger-subtle:var(--red-100);
  --info:var(--teal-600); --info-text:var(--teal-700); --info-subtle:var(--teal-100);
  --code-bg:var(--navy-900); --code-text:var(--sand-100); --code-border:var(--navy-700);

  --shadow-xs:0 1px 2px rgba(36,30,23,.06);
  --shadow-sm:0 1px 2px rgba(36,30,23,.06),0 2px 6px rgba(36,30,23,.06);
  --shadow-md:0 2px 4px rgba(36,30,23,.05),0 6px 16px rgba(36,30,23,.08);
  --shadow-lg:0 4px 8px rgba(36,30,23,.06),0 16px 36px rgba(36,30,23,.12);
  --shadow-xl:0 8px 16px rgba(36,30,23,.08),0 28px 64px rgba(36,30,23,.16);
  --shadow-ring:0 0 0 3px color-mix(in oklab,var(--ring) 35%,transparent);
}

/* semantic aliases, dark (developers live here) */
[data-theme="dark"] {
  color-scheme:dark;
  --bg-app:var(--ink-900); --bg-subtle:var(--ink-950); --surface:var(--ink-800);
  --surface-raised:var(--ink-700); --surface-sunken:var(--ink-950); --surface-inverse:var(--sand-50);
  --text-strong:var(--sand-50); --text-body:var(--ink-100); --text-muted:var(--ink-200);
  --text-subtle:var(--ink-300); --text-on-brand:var(--white); --text-on-accent:var(--navy-950);
  --text-inverse:var(--navy-900); --text-link:var(--orange-400);
  --border:var(--ink-600); --border-strong:var(--ink-500); --border-subtle:var(--ink-700); --ring:var(--orange-400);
  /* dark: navy is the background, so orange carries primary action */
  --brand:var(--orange-500); --brand-hover:var(--orange-400); --brand-active:var(--orange-600);
  --brand-subtle:color-mix(in oklab,var(--orange-500) 16%,var(--ink-800)); --on-brand:var(--navy-950);
  --accent:var(--orange-500); --accent-hover:var(--orange-400); --accent-active:var(--orange-600);
  --accent-subtle:color-mix(in oklab,var(--orange-500) 14%,var(--ink-800)); --on-accent:var(--navy-950);
  --success:var(--green-500); --success-text:var(--green-300); --success-subtle:color-mix(in oklab,var(--green-500) 18%,var(--ink-800));
  --warning:var(--amber-500); --warning-text:var(--amber-300); --warning-subtle:color-mix(in oklab,var(--amber-500) 18%,var(--ink-800));
  --danger:var(--red-500); --danger-text:var(--red-300); --danger-subtle:color-mix(in oklab,var(--red-500) 18%,var(--ink-800));
  --info:var(--teal-500); --info-text:var(--teal-300); --info-subtle:color-mix(in oklab,var(--teal-500) 18%,var(--ink-800));
  --code-bg:var(--ink-950); --code-text:var(--ink-100); --code-border:var(--ink-700);

  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.35);
  --shadow-md:0 2px 6px rgba(0,0,0,.45),0 8px 22px rgba(0,0,0,.45);
  --shadow-lg:0 6px 14px rgba(0,0,0,.5),0 20px 44px rgba(0,0,0,.55);
  --shadow-xl:0 10px 24px rgba(0,0,0,.55),0 32px 72px rgba(0,0,0,.6);
  --shadow-ring:0 0 0 3px color-mix(in oklab,var(--ring) 45%,transparent);
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg-app); color:var(--text-body);
  font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
h1,h2,h3,h4 { color:var(--text-strong); font-weight:var(--fw-extrabold); margin:0; text-wrap:balance; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::selection { background:color-mix(in oklab,var(--accent) 30%,transparent); }
:focus-visible { outline:none; box-shadow:var(--shadow-ring); border-radius:var(--radius-sm); }
.mono { font-family:var(--font-mono); }
.container { max-width:var(--container-xl); margin:0 auto; padding-left:var(--space-6); padding-right:var(--space-6); width:100%; }
.eyebrow {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-subtle);
}

/* ------------------------------------------------------------
   BUTTON
   ------------------------------------------------------------ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:var(--control-md); padding:0 var(--space-4);
  font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-tight); line-height:1; white-space:nowrap; user-select:none;
  border:1px solid transparent; border-radius:var(--radius-md); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
}
.btn:active { transform:translateY(0.5px); }
.btn .icon { width:17px; height:17px; flex-shrink:0; }
.btn-sm { height:var(--control-sm); padding:0 var(--space-3); font-size:var(--text-sm); }
.btn-sm .icon { width:15px; height:15px; }
.btn-lg { height:var(--control-lg); padding:0 var(--space-6); font-size:var(--text-md); }
.btn-lg .icon { width:19px; height:19px; }

.btn-primary { background:var(--brand); color:var(--on-brand); }
.btn-primary:hover { background:var(--brand-hover); }
.btn-primary:active { background:var(--brand-active); }
.btn-accent { background:var(--accent); color:var(--on-accent); }
.btn-accent:hover { background:var(--accent-hover); }
.btn-accent:active { background:var(--accent-active); }
.btn-secondary { background:var(--surface); color:var(--text-strong); border-color:var(--border-strong); }
.btn-secondary:hover { background:var(--bg-subtle); }
.btn-secondary:active { background:var(--surface-sunken); }
.btn-ghost { background:transparent; color:var(--text-body); }
.btn-ghost:hover { background:var(--bg-subtle); }

/* ------------------------------------------------------------
   BADGE
   ------------------------------------------------------------ */
.badge {
  display:inline-flex; align-items:center; gap:var(--space-1_5);
  height:22px; padding:0 var(--space-2); font-family:var(--font-sans);
  font-size:var(--text-xs); font-weight:var(--fw-semibold); line-height:1;
  letter-spacing:var(--tracking-wide); border:1px solid transparent;
  border-radius:var(--radius-sm); white-space:nowrap;
}
.badge .dot { width:6px; height:6px; border-radius:var(--radius-pill); background:currentColor; flex-shrink:0; }
.badge-neutral { background:var(--bg-subtle); color:var(--text-muted); border-color:var(--border); }
.badge-brand { background:var(--brand-subtle); color:var(--brand); }
.badge-accent { background:var(--accent-subtle); color:var(--accent-active); }
.badge-success { background:var(--success-subtle); color:var(--success-text); }
.badge-warning { background:var(--warning-subtle); color:var(--warning-text); }
.badge-info { background:var(--info-subtle); color:var(--info-text); }

/* ------------------------------------------------------------
   CARD
   ------------------------------------------------------------ */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.card-interactive:hover {
  box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-1px);
}

/* ------------------------------------------------------------
   TERMINAL + CODEBLOCK (signature surfaces)
   ------------------------------------------------------------ */
.terminal {
  background:var(--code-bg); border:1px solid var(--code-border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  font-family:var(--font-mono);
}
.terminal-bar {
  display:flex; align-items:center; gap:var(--space-2);
  padding:10px 14px; border-bottom:1px solid var(--code-border);
  background:color-mix(in oklab, var(--code-bg) 80%, #000);
}
.terminal-dots { display:inline-flex; gap:6px; margin-right:4px; }
.terminal-dots span { width:11px; height:11px; border-radius:50%; opacity:.9; }
.terminal-dots .d-r { background:#e05c4a; }
.terminal-dots .d-y { background:#e0a92b; }
.terminal-dots .d-g { background:#3f9d5d; }
.terminal-title { font-size:var(--text-xs); color:var(--ink-300); font-weight:var(--fw-medium); letter-spacing:var(--tracking-wide); }
.terminal-copy {
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; border:1px solid var(--code-border); border-radius:var(--radius-xs);
  background:transparent; color:var(--ink-300); font-family:var(--font-mono); font-size:var(--text-2xs);
  cursor:pointer; transition:color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.terminal-copy:hover { color:var(--ink-100); border-color:var(--ink-500); }
.terminal-copy.is-copied { color:var(--green-300); }
.terminal-body {
  padding:var(--space-4); font-size:var(--text-sm); line-height:var(--leading-relaxed); overflow-x:auto;
}
.terminal-body.terminal-body-lg { padding:var(--space-5) var(--space-6); font-size:var(--text-base); }
.term-line { display:flex; gap:8px; white-space:pre; color:var(--ink-100); }
.term-line .prompt { color:var(--orange-400); user-select:none; flex-shrink:0; }
.term-command { color:var(--sand-50); }
.term-output { color:var(--ink-100); }
.term-comment { color:var(--ink-300); }
.term-success { color:var(--green-300); }
.term-error { color:var(--red-300); }
.term-accent { color:var(--orange-400); }
.term-muted { color:var(--ink-300); }
.term-gap { height:var(--space-3); }

/* ------------------------------------------------------------
   AGENT COMPARISON (unsupervised vs. on Burrow)
   ------------------------------------------------------------ */
.compare-quote {
  font-family:var(--font-sans); font-weight:var(--fw-extrabold);
  font-size:var(--text-3xl); line-height:1.06; letter-spacing:-0.035em;
  color:var(--text-strong); text-wrap:balance; margin:0;
}
.compare-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6);
  align-items:start; margin-top:var(--space-12);
}
/* color-code the whole frame so good/bad reads before a word is parsed */
.terminal.is-fail {
  border-color:color-mix(in oklab, var(--danger) 42%, var(--code-border));
}
.terminal.is-fail .terminal-bar {
  background:color-mix(in oklab, var(--danger) 15%, var(--code-bg));
  border-bottom-color:color-mix(in oklab, var(--danger) 34%, var(--code-border));
}
.terminal.is-safe {
  border-color:color-mix(in oklab, var(--success) 48%, var(--code-border));
  box-shadow:var(--shadow-lg), 0 0 0 4px color-mix(in oklab, var(--success) 12%, transparent);
}
.terminal.is-safe .terminal-bar {
  background:color-mix(in oklab, var(--success) 15%, var(--code-bg));
  border-bottom-color:color-mix(in oklab, var(--success) 34%, var(--code-border));
}
/* status marker in the bar (replaces the copy button on these narrative panels) */
.bar-status {
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
}
.bar-status .icon { width:15px; height:15px; }
.is-fail .bar-status { color:var(--danger-text); }
.is-safe .bar-status { color:var(--success-text); }
/* the payoff line: brightest thing in either panel */
.term-win { color:var(--green-300); font-weight:var(--fw-semibold); }
[data-theme="dark"] .term-win { color:var(--green-200, var(--green-300)); }
.term-prompt { color:var(--orange-400); user-select:none; flex-shrink:0; }
/* narrative panels carry prose, not commands: flow as blocks so long
   sentences wrap cleanly (flex rows + pre-wrap collide) */
.compare-grid .term-line { display:block; white-space:pre-wrap; word-break:break-word; }
.compare-grid .term-prompt { margin-right:8px; }

/* claude-code style conversation inside the compare panels:
   user turns sit on a lighter block; the agent speaks with a ⏺ bullet */
.term-user {
  display:block; margin:0 0 9px; padding:8px 12px; border-radius:7px;
  background:color-mix(in oklab, var(--sand-50) 10%, transparent);
  color:var(--sand-50); font-weight:var(--fw-medium);
}
.term-user .term-prompt { color:var(--orange-400); margin-right:8px; }
.term-agent { display:block; color:var(--sand-100); padding-left:1.5em; }
.term-agent .term-bullet { display:inline-block; width:1.5em; margin-left:-1.5em; color:var(--orange-400); user-select:none; }
.term-cont { display:block; color:var(--sand-100); padding-left:1.5em; }
.compare-grid .term-muted { padding-left:1.5em; }

@media (max-width: 860px) {
  .compare-grid { grid-template-columns:1fr; }
  .compare-quote { font-size:var(--text-2xl); }
}

.codeblock {
  background:var(--code-bg); border:1px solid var(--code-border);
  border-radius:var(--radius-lg); overflow:hidden; font-family:var(--font-mono);
}
.codeblock pre { margin:0; padding:var(--space-4); font-size:var(--text-sm); line-height:var(--leading-relaxed); color:var(--ink-100); overflow-x:auto; }

/* ------------------------------------------------------------
   NAV
   ------------------------------------------------------------ */
.nav {
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--border);
  background:color-mix(in oklab, var(--bg-app) 82%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.nav-inner { display:flex; align-items:center; gap:var(--space-8); height:64px; }
.brand { display:flex; align-items:center; gap:9px; }
.brand img { width:38px; height:38px; border-radius:7px; }
.brand-word { font-size:21px; font-weight:var(--fw-extrabold); letter-spacing:-0.035em; color:var(--text-strong); }
.nav-links { display:flex; gap:var(--space-6); margin-left:var(--space-2); }
.nav-links a { font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-muted); transition:color var(--dur-fast) var(--ease-standard); }
.nav-links a:hover { color:var(--text-strong); }
.nav-actions { margin-left:auto; display:flex; align-items:center; gap:var(--space-3); }
.gh-link { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-muted); transition:color var(--dur-fast) var(--ease-standard); }
.gh-link:hover { color:var(--text-strong); }
.gh-link .icon, .gh-link .gh-icon { width:16px; height:16px; }
.gh-icon { flex-shrink:0; }
.gh-link .stars { font-family:var(--font-mono); font-size:12px; }
.theme-toggle {
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface); color:var(--text-muted); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.theme-toggle:hover { color:var(--text-strong); background:var(--bg-subtle); }
.theme-toggle .icon { width:17px; height:17px; }
.theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero { position:relative; overflow:hidden; }
.hero-inner {
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--space-12);
  align-items:center; padding-top:var(--space-20); padding-bottom:var(--space-16);
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px; margin-bottom:var(--space-6);
  border-radius:var(--radius-pill); background:var(--accent-subtle);
  border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  font-size:13px; font-weight:var(--fw-semibold); color:var(--accent-active);
}
.hero-eyebrow .icon { width:15px; height:15px; }
.hero h1 { font-size:var(--text-4xl); line-height:1.04; letter-spacing:-0.035em; }
.hero .lede { margin-top:var(--space-5); font-size:var(--text-md); line-height:1.5; color:var(--text-muted); max-width:30rem; }
.hero-cta { display:flex; gap:var(--space-3); margin-top:var(--space-8); flex-wrap:wrap; }
.hero-trust { display:flex; align-items:center; gap:var(--space-5); margin-top:var(--space-6); font-size:13px; color:var(--text-subtle); flex-wrap:wrap; }
.hero-trust span { display:inline-flex; align-items:center; gap:6px; }
.hero-trust .icon { width:15px; height:15px; color:var(--success); }

.hero-visual {
  position:relative; display:flex; align-items:flex-end; justify-content:center;
  min-height:440px;
}
/* soft radial den glow behind the mascot */
.hero-glow {
  position:absolute; inset:2% 2% 6% 2%; z-index:0; border-radius:50%;
  background:radial-gradient(52% 52% at 50% 46%, color-mix(in oklab, var(--navy-800) 82%, var(--orange-500)) 0%, color-mix(in oklab, var(--navy-900) 88%, transparent) 46%, transparent 72%);
  filter:blur(6px); opacity:.92;
}
[data-theme="dark"] .hero-glow {
  background:radial-gradient(52% 52% at 50% 44%, color-mix(in oklab, var(--orange-500) 30%, var(--ink-950)) 0%, color-mix(in oklab, var(--ink-900) 80%, transparent) 48%, transparent 74%);
  opacity:1;
}
/* elliptical den floor the mascot sits on */
.hero-den {
  position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
  width:64%; height:44px; z-index:0; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--navy-950) 55%, transparent) 0%, transparent 78%);
  filter:blur(3px);
}
[data-theme="dark"] .hero-den {
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.55) 0%, transparent 78%);
}
.hero-mascot {
  position:relative; z-index:2; width:340px; max-width:78%;
  filter:drop-shadow(0 22px 34px rgba(13,17,26,0.34));
  pointer-events:none;
}
[data-theme="dark"] .hero-mascot { filter:drop-shadow(0 24px 40px rgba(0,0,0,0.55)); }
/* floating status chips give the sentinel life without a competing terminal */
.hero-chip {
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:var(--space-2);
  padding:8px 13px; border-radius:var(--radius-pill);
  background:color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border); box-shadow:var(--shadow-md);
  font-size:13px; font-weight:var(--fw-semibold); color:var(--text-strong); white-space:nowrap;
}
.hero-chip .icon { width:16px; height:16px; color:var(--accent); }
.hero-chip .dot { width:8px; height:8px; border-radius:var(--radius-pill); flex-shrink:0; }
.hero-chip .dot-success { background:var(--success); box-shadow:0 0 0 3px color-mix(in oklab, var(--success) 24%, transparent); }
.hero-chip-top { top:14%; left:-2%; }
.hero-chip-bottom { bottom:16%; right:-1%; }

/* ------------------------------------------------------------
   SECTION SCAFFOLD
   ------------------------------------------------------------ */
.section { padding-top:var(--space-20); padding-bottom:var(--space-20); }
.section-tight { padding-top:var(--space-16); padding-bottom:var(--space-16); }
.section-head { max-width:44rem; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2 { font-size:var(--text-2xl); letter-spacing:-0.03em; }
.section-head .sub { margin-top:var(--space-3); font-size:var(--text-md); color:var(--text-muted); line-height:1.5; }

/* band: quiet inverse/sunken surface for rhythm */
.band { background:var(--bg-subtle); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ------------------------------------------------------------
   TALK TO YOUR AGENT (chips)
   ------------------------------------------------------------ */
.agent-layout { display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--space-12); align-items:center; }
.chips { display:flex; flex-direction:column; gap:var(--space-3); }
.chip {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs); transition:border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.chip:hover { border-color:var(--border-strong); transform:translateX(2px); }
.chip .prompt-glyph { color:var(--accent); font-family:var(--font-mono); font-weight:var(--fw-semibold); flex-shrink:0; }
.chip .chip-text { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--text-body); }

/* ------------------------------------------------------------
   ADDONS
   ------------------------------------------------------------ */
.addon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
.addon {
  display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-5); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.addon:hover { box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-1px); }
.addon-icon {
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:var(--radius-md); background:var(--brand-subtle); color:var(--accent);
}
.addon-icon .icon { width:20px; height:20px; }
.addon-title { font-size:var(--text-md); font-weight:var(--fw-bold); color:var(--text-strong); letter-spacing:-0.01em; display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.addon-body { font-size:var(--text-sm); line-height:1.5; color:var(--text-muted); }

.guardrails-layout { display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--space-12); align-items:center; margin-top:var(--space-12); }

/* feature list in guardrails intro */
.feature-list { display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-6); }
.feature-item { display:flex; gap:var(--space-3); }
.feature-item .icon { width:20px; height:20px; color:var(--accent); flex-shrink:0; margin-top:2px; }
.feature-item .ft-title { font-weight:var(--fw-semibold); color:var(--text-strong); }
.feature-item .ft-body { font-size:var(--text-sm); color:var(--text-muted); line-height:1.5; margin-top:2px; }

/* ------------------------------------------------------------
   CTA BAND
   ------------------------------------------------------------ */
.cta-band { background:var(--navy-900); position:relative; overflow:hidden; border-top:1px solid var(--border-subtle); }
.cta-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-10); align-items:center; padding-top:var(--space-16); padding-bottom:var(--space-16); }
.cta-inner h2 { color:var(--sand-50); font-size:var(--text-2xl); letter-spacing:-0.03em; }
.cta-inner .sub { color:var(--sand-200); font-size:var(--text-md); margin-top:var(--space-3); line-height:1.5; max-width:34rem; }
.cta-actions { display:flex; gap:var(--space-3); margin-top:var(--space-6); flex-wrap:wrap; }
.cta-figure { position:relative; display:flex; align-items:center; justify-content:center; margin-right:var(--space-6); }
.cta-figure-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0;
  width:185%; height:185%; border-radius:50%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--orange-500) 20%, transparent) 0%, transparent 66%);
}
.cta-mascot { position:relative; z-index:1; width:260px; filter:drop-shadow(0 14px 26px rgba(0,0,0,0.4)); }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer { background:var(--bg-app); border-top:1px solid var(--border); padding-top:var(--space-16); padding-bottom:var(--space-10); }
.footer-top { display:flex; justify-content:space-between; gap:var(--space-10); flex-wrap:wrap; }
.footer-brand { max-width:22rem; }
.footer-brand .brand { margin-bottom:var(--space-4); }
.footer-brand p { font-size:var(--text-sm); color:var(--text-muted); line-height:1.55; }
.footer-cols { display:flex; gap:var(--space-16); flex-wrap:wrap; }
.footer-col h4 { font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-subtle); font-weight:var(--fw-semibold); margin-bottom:var(--space-4); }
.footer-col a { display:block; font-size:var(--text-sm); color:var(--text-muted); margin-bottom:var(--space-2_5); transition:color var(--dur-fast) var(--ease-standard); }
.footer-col a:hover { color:var(--text-strong); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--border-subtle);
  font-size:var(--text-sm); color:var(--text-subtle); flex-wrap:wrap;
}
.footer-bottom a { color:var(--text-link); font-weight:var(--fw-medium); }
.footer-bottom .mono { font-family:var(--font-mono); }

/* small inline copy button (e.g. next to the contact email) */
.copy-inline {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-left:var(--space-1); vertical-align:middle;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:transparent; color:var(--text-subtle); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.copy-inline:hover { color:var(--text-strong); border-color:var(--border-strong); background:var(--bg-subtle); }
.copy-inline .icon { width:14px; height:14px; }
.copy-inline .icon-check { display:none; }
.copy-inline.is-copied { color:var(--success); border-color:var(--success); }
.copy-inline.is-copied .icon-copy { display:none; }
.copy-inline.is-copied .icon-check { display:block; }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
/* grid children must be allowed to shrink below their content, so wide
   terminals scroll inside their column instead of widening the page */
.hero-inner > *, .agent-layout > *, .cta-inner > *, .guardrails-layout > *, .compare-grid > * { min-width:0; }

@media (max-width:900px) {
  .hero-inner, .agent-layout, .cta-inner, .guardrails-layout { grid-template-columns:1fr; gap:var(--space-10); }
  .hero-visual { min-height:320px; }
  .hero-mascot { width:250px; }
  .hero-chip-top { left:2%; }
  .hero-chip-bottom { right:2%; }
  .cta-figure { display:none; }
  .addon-grid { grid-template-columns:repeat(2,1fr); }
  .nav-links { display:none; }
  .hero h1 { font-size:var(--text-3xl); }
}
@media (max-width:560px) {
  .addon-grid { grid-template-columns:1fr; }
  .footer-cols { gap:var(--space-10); }
}

/* On a phone the signature terminals wrap (like a real terminal) instead of
   scrolling horizontally, so no command or guardrail verdict is hidden. */
@media (max-width:640px) {
  .terminal-body { overflow-x:hidden; }
  .terminal-body.terminal-body-lg { font-size:var(--text-sm); padding:var(--space-4); }
  .term-line { white-space:pre-wrap; overflow-wrap:break-word; }
  .term-line > span { min-width:0; }
}