/* =========================================================================
   Control Panel — marketing site
   -------------------------------------------------------------------------
   One stylesheet, no build step, no framework. The palette is lifted from the
   product's own tokens (web/static/css/panel-v2.css) on purpose: the site and
   the console should look like the same piece of software.

   Sections:
     1. tokens        2. reset/base     3. layout        4. typography
     5. buttons       6. header/nav     7. hero          8. cards & grids
     9. app mockup   10. tabs          11. pricing      12. accordion
    13. tables       14. footer        15. utilities    16. responsive
   ========================================================================= */

/* ---------- 1. tokens ---------- */
:root {
  /* dark is the default: this is an operations tool */
  --bg:         #0b0f14;
  --bg-sunk:    #070b0f;
  --surface:    #111820;
  --surface-2:  #0d141c;
  --surface-3:  #16202b;
  --line:       #1e2833;
  --line-soft:  #161e27;
  --text:       #e6edf3;
  --text-dim:   #9aa7b4;
  --text-mute:  #6d7987;
  --accent:     #5eb0ef;
  --accent-hi:  #8ecbff;
  --accent-ink: #061019;
  --accent-dim: rgba(94, 176, 239, 0.12);
  --violet:     #a78bfa;
  --ok:         #3fb950;
  --ok-dim:     rgba(63, 185, 80, 0.13);
  --warn:       #d29922;
  --danger:     #f85149;

  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  18px;

  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 80px -32px rgba(0, 0, 0, 0.85);

  --maxw: 1160px;
  --gutter: 24px;
  --nav-h: 62px;
}

:root[data-theme="light"] {
  --bg:         #f6f7f8;
  --bg-sunk:    #ffffff;
  --surface:    #ffffff;
  --surface-2:  #fbfbfa;
  --surface-3:  #f1f3f5;
  --line:       #e0e3e7;
  --line-soft:  #eef0f2;
  --text:       #12161b;
  --text-dim:   #4d545c;
  --text-mute:  #7b838c;
  --accent:     #1662b4;
  --accent-hi:  #0f4d92;
  --accent-ink: #ffffff;
  --accent-dim: rgba(22, 98, 180, 0.09);
  --violet:     #6d47d9;
  --ok:         #1f7a3d;
  --ok-dim:     rgba(31, 122, 61, 0.1);
  --warn:       #8a5d0d;
  --danger:     #b3261e;

  --shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.06);
  --shadow:    0 12px 28px -14px rgba(16, 24, 32, 0.24);
  --shadow-lg: 0 36px 72px -36px rgba(16, 24, 32, 0.3);
}

/* ---------- 2. reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--line-soft); border-radius: 5px;
  padding: 1px 5px; white-space: nowrap;
}
.code code, .cmd code, pre code { background: none; border: 0; padding: 0; font-size: inherit; }
mark { background: rgba(210, 153, 34, 0.28); color: var(--text); border-radius: 3px; padding: 0 2px; }
a:hover { color: var(--accent-hi); }
hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
::selection { background: var(--accent); color: var(--accent-ink); }

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

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { left: 16px; }

/* ---------- 3. layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 780px; }
.wrap-wide { max-width: 1320px; }

section { position: relative; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-tight { padding: 48px 0; }
.section-sunk { background: var(--bg-sunk); border-block: 1px solid var(--line-soft); }
.section-surface { background: var(--surface-2); border-block: 1px solid var(--line-soft); }

.stack > * + * { margin-top: 16px; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* subtle grid backdrop, used behind the hero and final CTA */
.gridlines::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
  opacity: 0.7;
}
/* The glow is a 1100px-wide radial blur. On a phone it is wider than the
   viewport, so the section that carries it has to clip — otherwise the page
   itself scrolls sideways by 360px of invisible gradient. */
.glow { overflow: hidden; }
.glow::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -280px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,176,239,0.16), transparent 62%);
  filter: blur(20px);
}
:root[data-theme="light"] .glow::after { background: radial-gradient(circle, rgba(22,98,180,0.11), transparent 62%); }
.gridlines > *, .glow > * { position: relative; z-index: 1; }

/* ---------- 4. typography ---------- */
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 650; }
h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem); letter-spacing: -0.033em; }
h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }
h4 { font-size: 1rem; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6;
}
.center .eyebrow::after {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6;
}

.lede {
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.18rem);
  color: var(--text-dim);
  max-width: 62ch;
  margin: 20px 0 0;
}
.small { font-size: 0.86rem; color: var(--text-mute); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
/* Long unbroken strings (checksums, tokens): must wrap, or they push the page wider
   than the viewport. Overrides the nowrap on `code`. */
.hash-value { white-space: normal; overflow-wrap: anywhere; word-break: break-all; max-width: 100%; }
strong { color: var(--text); font-weight: 620; }

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; }

.gradient-text {
  background: linear-gradient(96deg, var(--text) 22%, var(--accent) 72%, var(--violet));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 5. buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 0.94rem; font-weight: 600; line-height: 1;
  padding: 13px 22px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.12s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 20px -10px rgba(94, 176, 239, 0.85);
}
.btn-primary:hover { background: var(--accent-hi); color: var(--accent-ink); box-shadow: 0 12px 26px -10px rgba(94, 176, 239, 0.95); }

.btn-secondary {
  background: var(--surface-3); color: var(--text); border-color: var(--line);
}
.btn-secondary:hover { background: var(--surface); border-color: var(--accent); color: var(--text); }

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

.btn-lg { padding: 15px 28px; font-size: 1rem; }
.btn-sm { padding: 9px 15px; font-size: 0.85rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .btn-row { justify-content: center; }

.textlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 0.93rem;
}
.textlink svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.textlink:hover svg { transform: translateX(3px); }

/* ---------- 6. header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 26px; height: var(--nav-h); }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 660; font-size: 1.02rem; letter-spacing: -0.02em;
  flex: none;
}
.brand:hover { color: var(--text); }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px;
  margin-left: 2px;
}

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav-links a {
  color: var(--text-dim); font-size: 0.91rem; font-weight: 550;
  padding: 8px 11px; border-radius: 6px;
}
.nav-links a:hover { color: var(--text); background: var(--surface-3); }
.nav-links a[aria-current="page"] { color: var(--text); }

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

.icon-btn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: transparent; border: 1px solid transparent; color: var(--text-dim);
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }

.nav-toggle { display: none; }

/* mobile drawer */
.nav-drawer {
  display: none;
  position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 20px var(--gutter) 40px; overflow-y: auto;
}
.nav-drawer.is-open { display: block; }
.nav-drawer a {
  display: block; padding: 14px 4px; font-size: 1.05rem; font-weight: 560;
  color: var(--text); border-bottom: 1px solid var(--line-soft);
}
.nav-drawer .btn-row { margin-top: 24px; }
.nav-drawer .btn { flex: 1; }
body.nav-open { overflow: hidden; }

/* announcement bar */
.announce {
  background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
  font-size: 0.84rem; color: var(--text-dim); text-align: center;
  padding: 9px var(--gutter);
}
.announce a { font-weight: 600; }
.announce .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); margin-right: 7px; vertical-align: 1px;
  box-shadow: 0 0 0 3px var(--ok-dim);
}

/* ---------- 7. hero ---------- */
.hero { padding: 84px 0 40px; overflow: hidden; }
.hero-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-inline: auto; font-size: clamp(1.05rem, 1rem + 0.45vw, 1.24rem); }
.hero .btn-row { margin-top: 34px; }
.hero-note {
  margin-top: 18px; font-size: 0.83rem; color: var(--text-mute);
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
}
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note svg { width: 14px; height: 14px; color: var(--ok); }

.pill-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 0.8rem; color: var(--text-dim); margin-bottom: 26px;
}
.pill-badge b {
  background: var(--accent-dim); color: var(--accent);
  padding: 3px 9px; border-radius: 999px; font-size: 0.74rem;
  font-weight: 650; letter-spacing: 0.02em;
}

/* install command */
.cmd {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 11px 11px 16px;
  font-family: var(--mono); font-size: 0.85rem; color: var(--text-dim);
  max-width: 100%; overflow: hidden;
}
.cmd code { color: var(--text); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.cmd code::-webkit-scrollbar { display: none; }
.cmd .prompt { color: var(--accent); user-select: none; }
.cmd-inline { display: inline-flex; margin: 8px 0; }
.copy-btn {
  margin-left: auto; flex: none;
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 6px; border: 1px solid var(--line); background: var(--surface-3);
  color: var(--text-dim); cursor: pointer; transition: all 0.15s ease;
}
.copy-btn:hover { color: var(--text); border-color: var(--accent); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn.copied { color: var(--ok); border-color: var(--ok); }

/* logo / stat strip */
.strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
}
.strip-item { background: var(--bg); padding: 26px 20px; text-align: center; }
.strip-item .n {
  font-family: var(--mono); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 600; color: var(--text); letter-spacing: -0.03em; line-height: 1.1;
}
.strip-item .l { font-size: 0.82rem; color: var(--text-mute); margin-top: 6px; }
.section-sunk .strip-item { background: var(--bg-sunk); }

/* ---------- 8. cards & grids ---------- */
.grid { display: grid; gap: 20px; }
/* Grid and flex items default to min-width:auto, which means a wide child (a
   table, a pre-formatted log line) can force the whole column past the
   viewport. Every layout container here is allowed to shrink instead; the
   wide child gets its own scroll or clip. */
.grid > *, .split > *, .price-grid > *, .footer-grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* main column + narrow sidebar (contact page) */
.grid-aside { grid-template-columns: 1.45fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .grid-aside { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.card-hover:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 9px; }
.card p { color: var(--text-dim); font-size: 0.93rem; margin: 0; }
.card-icon {
  width: 38px; height: 38px; border-radius: 9px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.card-icon svg { width: 19px; height: 19px; }
.card ul.bullets { margin: 14px 0 0; padding: 0; list-style: none; }
.card ul.bullets li {
  position: relative; padding-left: 20px; font-size: 0.88rem;
  color: var(--text-dim); margin-bottom: 7px;
}
.card ul.bullets li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.7;
}

.tag {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-mute); border: 1px solid var(--line);
  border-radius: 4px; padding: 3px 7px;
}
.tag-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tag-accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* alternating feature rows */
.split {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center;
}
.split + .split { margin-top: 104px; }
.split.reverse .split-media { order: -1; }
.split-body h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); margin-bottom: 16px; }
.split-body p { color: var(--text-dim); }
.feature-list { margin: 22px 0 0; padding: 0; list-style: none; }
.feature-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
  font-size: 0.92rem; color: var(--text-dim);
}
.feature-list li svg { width: 17px; height: 17px; color: var(--ok); flex: none; margin-top: 3px; }
.feature-list li b { color: var(--text); font-weight: 600; }
/* A release with several bullets nests them under its heading, rather than
   repeating the same version heading once per line. */
.feature-list li ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.feature-list li ul li { display: list-item; border: 0; padding: 2px 0; font-size: 0.9rem; }

/* checklist */
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--text-dim); }
.checks li svg { width: 16px; height: 16px; color: var(--ok); flex: none; margin-top: 4px; }

/* quote */
.quote {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 22px;
  font-size: 1.05rem; color: var(--text); line-height: 1.55;
}
.quote footer { margin-top: 12px; font-size: 0.85rem; color: var(--text-mute); }

/* ---------- 9. app mockup ---------- */
.mock {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-2); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mock-chrome {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.mock-dots { display: flex; gap: 6px; }
.mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.mock-url {
  margin: 0 auto; font-family: var(--mono); font-size: 11px; color: var(--text-mute);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  padding: 3px 14px; border-radius: 999px;
}
.mock-body { display: grid; grid-template-columns: 168px 1fr; min-height: 380px; }
.mock-side {
  background: var(--bg-sunk); border-right: 1px solid var(--line);
  padding: 14px 10px; font-size: 12px;
}
.mock-side .grp {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-mute); padding: 12px 8px 6px;
}
.mock-side .grp:first-child { padding-top: 0; }
.mock-side a, .mock-side span.item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 6px; color: var(--text-dim); cursor: default;
}
.mock-side .item.on { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.mock-side .item svg { width: 14px; height: 14px; flex: none; }
.mock-main { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mock-topline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.mock-topline .t { font-weight: 620; font-size: 14px; }
.mock-topline .sp { margin-left: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-family: var(--mono); padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim);
  background: var(--surface);
}
.chip.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-dim); }
.chip.warnc { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.chip.env { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.dotled { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dotled.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.mock-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 11px 12px;
}
.tile .k { font-size: 10px; color: var(--text-mute); font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tile .v { font-size: 18px; font-weight: 620; font-family: var(--mono); letter-spacing: -0.02em; margin-top: 3px; }
.tile .v.ok { color: var(--ok); }
.tile .v.warn { color: var(--warn); }
.bar { height: 4px; border-radius: 2px; background: var(--line); margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.bar i.ok { background: var(--ok); }
.bar i.warn { background: var(--warn); }

.mock-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mock-table th {
  text-align: left; font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute);
  padding: 0 10px 8px; border-bottom: 1px solid var(--line);
}
.mock-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); }
.mock-table td:first-child { color: var(--text); font-weight: 550; }
.mock-table tr:last-child td { border-bottom: 0; }
.mock-table .mono { font-family: var(--mono); font-size: 11px; }

.logline {
  font-family: var(--mono); font-size: 11px; line-height: 1.75;
  color: var(--text-dim); white-space: pre; overflow: hidden;
}
.logline .t { color: var(--text-mute); }
.logline .i { color: var(--accent); }
.logline .w { color: var(--warn); }
.logline .e { color: var(--danger); }
.logline .g { color: var(--ok); }

.mock-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pane {
  background: var(--bg-sunk); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); overflow: hidden;
}
.pane-h {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
}
.pane-b { padding: 8px 10px; }

.spark { width: 100%; height: 34px; display: block; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.spark .area { fill: var(--accent-dim); stroke: none; }

/* floating tilt for the hero mockup */
.mock-float {
  position: relative;
  transform: perspective(2200px) rotateX(4deg);
  transform-origin: center top;
}
.mock-float::after {
  content: ""; position: absolute; inset: auto 6% -34px 6%; height: 60px;
  background: radial-gradient(ellipse at center, rgba(94,176,239,0.2), transparent 70%);
  filter: blur(22px); z-index: -1;
}

/* ---------- 10. tabs ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; justify-content: center; }
.tab {
  font-family: inherit; font-size: 0.88rem; font-weight: 570;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  transition: all 0.15s ease;
}
.tab:hover { color: var(--text); border-color: var(--text-mute); }
.tab[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.tabpanel[hidden] { display: none; }

/* ---------- 11. pricing ---------- */
.billing-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  margin: 26px auto 0;
}
.billing-toggle button {
  font-family: inherit; font-size: 0.86rem; font-weight: 600;
  padding: 8px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--text-dim);
}
.billing-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.billing-toggle .save {
  font-size: 0.72rem; color: var(--ok); font-weight: 600;
  padding-right: 12px; padding-left: 4px;
}

.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px; position: relative;
}
.plan.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
  background: linear-gradient(180deg, var(--accent-dim), transparent 180px), var(--surface);
}
.plan-flag {
  position: absolute; top: -11px; left: 22px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.plan-name { font-size: 1.05rem; font-weight: 650; }
.plan-why { font-size: 0.84rem; color: var(--text-mute); margin-top: 5px; min-height: 40px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 4px; }
.plan-price .amt {
  font-family: var(--mono); font-size: 2.2rem; font-weight: 620;
  letter-spacing: -0.04em; color: var(--text); line-height: 1;
}
.plan-price .per { font-size: 0.82rem; color: var(--text-mute); }
.plan-billed { font-size: 0.76rem; color: var(--text-mute); min-height: 18px; }
.plan .btn { margin: 20px 0 18px; }
.plan-feats { margin: 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line-soft); }
.plan-feats li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 0.86rem; color: var(--text-dim); margin-bottom: 10px;
}
.plan-feats li svg { width: 15px; height: 15px; color: var(--ok); flex: none; margin-top: 3px; }
.plan-feats li.muted { color: var(--text-mute); }
.plan-feats li.muted svg { color: var(--text-mute); opacity: 0.5; }
.plan-feats .head {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-mute); margin: 4px 0 12px; display: block;
}

/* ---------- 12. accordion ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 20px 0; font-weight: 600; font-size: 1rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-family: var(--mono);
  font-size: 1.3rem; font-weight: 400; color: var(--text-mute); line-height: 1;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq summary:hover { color: var(--accent); }
.faq .answer { padding: 0 0 22px; color: var(--text-dim); font-size: 0.94rem; max-width: 74ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- 13. tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.compare { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.9rem; }
table.compare th, table.compare td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.compare thead th {
  background: var(--surface-2); font-size: 0.82rem; font-weight: 650;
  color: var(--text); position: sticky; top: 0;
}
table.compare tbody th { font-weight: 550; color: var(--text-dim); width: 34%; }
table.compare td { color: var(--text-dim); text-align: center; }
table.compare td.yes { color: var(--ok); }
table.compare td.no { color: var(--text-mute); }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }
table.compare tbody tr:hover { background: var(--surface-2); }
table.compare caption {
  caption-side: top; text-align: left; padding: 14px 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-mute);
  background: var(--surface); border-bottom: 1px solid var(--line);
}

/* code block */
.code {
  background: var(--bg-sunk); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.code-h {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-mute);
}
.code pre {
  margin: 0; padding: 16px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: var(--text-dim);
}
.code pre .c { color: var(--text-mute); }
.code pre .k { color: var(--accent); }
.code pre .s { color: var(--ok); }

/* callout */
.callout {
  display: flex; gap: 14px; padding: 18px 20px;
  background: var(--accent-dim); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius); font-size: 0.92rem; color: var(--text-dim);
}
.callout svg { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 2px; }
.callout b { color: var(--text); }

/* form */
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.field label .opt { color: var(--text-mute); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.94rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 13px; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
.field .hint { font-size: 0.78rem; color: var(--text-mute); }

/* ---------- 14. footer ---------- */
.site-footer {
  background: var(--bg-sunk); border-top: 1px solid var(--line);
  padding: 64px 0 34px; margin-top: 0;
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px 28px;
}
.footer-brand p { color: var(--text-mute); font-size: 0.86rem; max-width: 34ch; margin-top: 14px; }
.footer-col h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 14px;
}
.footer-col a {
  display: block; color: var(--text-dim); font-size: 0.88rem; padding: 5px 0;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  font-size: 0.82rem; color: var(--text-mute);
}
.footer-bottom .sp { margin-left: auto; }
.footer-bottom a { color: var(--text-mute); }
.footer-bottom a:hover { color: var(--text); }

/* ---------- 15. utilities ---------- */
/* Scoped to :root.js — set by the inline head script — so a visitor with
   JavaScript off, or a crawler that never runs it, gets the content instead of
   a page of invisible boxes. */
:root.js .reveal { opacity: 0; transform: translateY(14px); }
:root.js .reveal.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { :root.js .reveal { opacity: 1; transform: none; } }

.hidden { display: none !important; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }

/* page hero (inner pages) */
.page-hero { padding: 72px 0 48px; text-align: center; }
.page-hero .lede { margin-inline: auto; }

/* ---------- 16. responsive ---------- */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split.reverse .split-media { order: 0; }
  .split + .split { margin-top: 72px; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-grid; }
  .nav-right .btn-signin { display: none; }
  .section { padding: 68px 0; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .mock-tiles { grid-template-columns: repeat(2, 1fr); }
  .mock-panes { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  /* A 5-column table cannot shrink below its min-content width, and it is the
     one thing on these pages that would push the whole page sideways. Let it
     scroll inside its own box instead. */
  .mock-table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }
  .nav { gap: 10px; }
  .brand-tag { display: none; }
  .nav-right { gap: 4px; }
  .site-header .theme-toggle { display: none; }  /* lives in the drawer here */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero { padding: 52px 0 26px; }
  .btn-row .btn { width: 100%; }
  .hero-note { gap: 10px; }
  .mock-float { transform: none; }
}

/* ------------------------------------------------------------- back to top
   A real in-page link, so the jump itself needs no JavaScript: `#top` is the
   fragment HTML reserves for the top of the document, and the global
   `scroll-behavior: smooth` above — already switched off under
   prefers-reduced-motion — does the travelling. Script only decides when the
   control is worth showing, so with JS off it simply never appears rather
   than sitting there permanently.
   Below the drawer in the stack, and hidden outright while the drawer is
   open: on a phone it would otherwise float over the open menu. */
.to-top {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 98;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.35);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s,
              background 0.15s ease, color 0.15s ease;
}
.to-top svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.to-top:hover { background: var(--surface-3); color: var(--text); border-color: var(--accent); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
body.nav-open .to-top { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* -------------------------------------------------------------- shot frame
   A real screenshot of the product. The panel only ships a dark UI worth
   showing, so the frame carries its own dark ground in both themes rather
   than letting a dark image sit on a white page looking pasted on. */
.shot {
  margin: 32px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0b0f14;
  padding: 10px;
  overflow: hidden;
}
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.shot figcaption {
  margin: 12px 4px 2px;
  font-size: 0.86rem; line-height: 1.5; color: var(--text-dim);
}
:root[data-theme="light"] .shot { border-color: #d7dbe0; }

/* -------------------------------------------------------------- hero shot
   The screenshot that replaced the drawn dashboard. It keeps the float and
   the glow the mock had so the hero composition is unchanged, and carries its
   own dark ground for the light theme the way .shot does. */
.hero-shot {
  margin: 48px auto 0;
  max-width: 1100px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #0b0f14;
  padding: 8px;
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.45);
  transform: perspective(1400px) rotateX(1.6deg);
}
.hero-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
:root[data-theme="light"] .hero-shot {
  border-color: #d7dbe0;
  box-shadow: 0 30px 70px rgb(15 23 42 / 0.18);
}
@media (prefers-reduced-motion: reduce) { .hero-shot { transform: none; } }
@media (max-width: 720px) { .hero-shot { transform: none; margin-top: 32px; } }

/* ---------------------------------------------------------------- screens
   The hero's view switcher: one real screenshot per console section, so the
   breadth is shown rather than claimed. Only the first image is eager; the
   rest are lazy, so five extra screenshots cost nothing until asked for.
   Without script the tablist is hidden and the first screenshot stands alone,
   which is what the hero showed before the switcher existed. */
.screens { max-width: 1100px; margin-inline: auto; }
.screen-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-bottom: 16px;
}
.screen-tab {
  font: inherit; font-size: 0.86rem; font-weight: 550;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.screen-tab:hover { color: var(--text); border-color: var(--text-mute); }
.screen-tab.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.screen-panel {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #0b0f14; padding: 8px;
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.45);
  margin: 0;
}
.screen-panel img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.screen-panel figcaption {
  margin: 12px 6px 4px; text-align: center;
  font-size: 0.86rem; color: var(--text-dim);
}
:root[data-theme="light"] .screen-panel {
  border-color: #d7dbe0; box-shadow: 0 30px 70px rgb(15 23 42 / 0.18);
}
:root:not(.js) .screen-tabs { display: none; }

/* At the tour's pace a bare swap reads as a flicker, so the incoming frame
   fades up. Short enough not to be in the way of the next one, and skipped
   entirely for anyone who asked for less motion. */
@keyframes shot-in { from { opacity: 0.35; } to { opacity: 1; } }
.screen-panel.is-on { animation: shot-in 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) { .screen-panel.is-on { animation: none; } }