/* ════════════════════════════════════════════════════════════════
   tidepage — landing page
   Editorial-technical. Sea-biased slate surfaces, a single reserved
   tide accent (teal, never decorative), Newsreader serif headlines,
   precise 1px borders. Built on the vendored design tokens in
   tokens.css. No gradients (except the hero halo/fade), no emoji.

   Layout (rev 2 of the #249 concept): a centered section ritual —
   chip → headline with one accent word → one-line sub → visual —
   with one giant treated editor shot in the hero and the showcase
   documents as the recurring proof.
   ════════════════════════════════════════════════════════════════ */

/* ── Helpers ───────────────────────────────────────────────────── */
.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;
}
[hidden] { display: none !important; }
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--surface-card); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 8px 14px; font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus { top: 12px; }

/* Inline sprite icons (<i class="ic"><svg><use/></svg></i>): stroke-styled
   like Lucide, sized by the surrounding rules on `i`. */
.ic { display: inline-flex; }
.ic svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
i.ic { width: 16px; height: 16px; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
/* `clip` (not `hidden`): kills sideways scroll from decorative overhangs
   (hero halo, floating card) without creating a scroll container, so
   position: sticky (nav, FAQ header) keeps working. Needed on both the
   root and body — clipping only body still leaves html's scrollWidth wide. */
html, body { overflow-x: clip; }
body { background: var(--surface-page); }

/* ── Brand mark + wordmark ─────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark { display: inline-flex; flex: none; width: 30px; height: 30px; }
.brand-mark img { width: 100%; height: 100%; }
.brand-mark .brand-mark-light { display: block; }
.brand-mark .brand-mark-dark  { display: none; }
[data-theme="dark"] .brand-mark .brand-mark-light { display: none; }
[data-theme="dark"] .brand-mark .brand-mark-dark  { display: block; }
.brand-word {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-tracking);
  color: var(--text-primary); line-height: 1; white-space: nowrap;
}
.brand-flip-e { display: inline-block; transform: scaleX(-1); }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-medium);
  line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 0 16px; height: var(--control-md);
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
}
.btn i { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-glow); }
.btn-primary:active { background: var(--accent-pressed); transform: translateY(1px); box-shadow: none; }
.btn-secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.btn-secondary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.btn-lg { height: var(--control-lg); padding: 0 22px; font-size: var(--text-md); border-radius: var(--radius-md); }

/* ── Nav ───────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface-page) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-in {
  max-width: 1120px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  text-decoration: none; color: var(--text-secondary);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  transition: var(--transition-colors);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-signin {
  text-decoration: none; color: var(--text-secondary);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  transition: var(--transition-colors);
}
.nav-signin:hover { color: var(--text-primary); }

/* Mobile menu: burger toggle + a full-width panel under the nav bar. The
   desktop link row hides on small screens, so this is the phones' only path
   to /examples, Pricing, the blog and sign-in. */
.nav-burger { display: none; width: var(--control-md); padding: 0; }
.nav-burger i { width: 20px; height: 20px; }
.nav-menu {
  display: none; flex-direction: column; gap: 2px;
  padding: 8px 14px 14px; border-top: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-page) 96%, transparent);
}
.nav-menu a {
  text-decoration: none; color: var(--text-primary);
  font-size: var(--text-md); font-weight: var(--weight-medium);
  padding: 11px 10px; border-radius: var(--radius-md);
}
.nav-menu a:hover { background: var(--surface-hover); }
.nav.menu-open .nav-menu { display: flex; }

/* ── Wave-field background (brand signature) ─────────────────────
   A still field of equal wave-lines with a single teal "live" line.
   Drawn to a <canvas> by initWaveFields() in landing.js; theme-aware. */
.wave-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* ── Section primitives ────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 12px;
}
.h2 {
  font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
.accent { color: var(--accent); }
.accent-bright { color: var(--tide-bright); }

/* The centered section ritual: chip → H2 (one accent word) → one-line sub.
   Repeated on every section so the page reads as one designed system. */
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.sec-head--pad { padding: 72px 32px 0; margin-bottom: 8px; }
.sec-sub {
  margin: 14px auto 0; max-width: 56ch;
  font-size: var(--text-md); line-height: 1.6; color: var(--text-secondary);
}

/* ── Hero (centered) ───────────────────────────────────────────── */
.hero {
  position: relative;
  max-width: 1120px; margin: 0 auto; padding: 64px 32px 0;
  text-align: center;
}
.hero-text { position: relative; z-index: 1; }

.h1 {
  font-family: var(--font-display); font-size: clamp(38px, 4.8vw, 60px);
  font-weight: 600; line-height: 1.06; letter-spacing: -0.03em;
  max-width: 26ch; margin: 22px auto 0;
}
.lede {
  font-size: var(--text-lg); line-height: 1.6; color: var(--text-primary);
  max-width: 58ch; margin: 22px auto 0;
}
.hero-actions { display: flex; gap: 12px; margin: 30px 0 0; flex-wrap: wrap; justify-content: center; }

.try-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Risk-reversal microcopy under the CTAs. */
.assure {
  margin: 16px 0 0; font-size: var(--text-sm); color: var(--text-muted);
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
}
.assure span::before { content: "✓ "; color: var(--accent-text); }

/* ── The hero shot: the demo workspace, clickable ─────────────────
   A capture of the DEMO's Home screen (both themes), linking to /demo — the
   image is the door, and the hint bar says so. Treatment: teal halo, layered
   shadow, a lift on hover so it reads as pressable. */
.hero-stage { position: relative; max-width: 1010px; margin: 38px auto 0; z-index: 1; }
.hero-shot {
  position: relative; z-index: 1; display: block; overflow: hidden; text-decoration: none;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); line-height: 0;
  box-shadow:
    0 1px 2px rgba(15, 22, 20, 0.06),
    0 24px 48px -24px rgba(15, 22, 20, 0.35),
    0 64px 120px -48px color-mix(in srgb, var(--tide-600) 30%, transparent);
  transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.hero-shot:hover {
  transform: translateY(-3px); border-color: var(--accent-border);
  box-shadow:
    0 2px 4px rgba(15, 22, 20, 0.07),
    0 30px 56px -24px rgba(15, 22, 20, 0.4),
    0 72px 130px -48px color-mix(in srgb, var(--tide-600) 38%, transparent);
}
.hero-shot__img { display: block; width: 100%; height: auto; }
.hero-shot__hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 18px; border-radius: var(--radius-md); line-height: 1.2;
  background: var(--surface-card); border: 1px solid var(--border-default);
  color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  box-shadow: 0 14px 34px -12px rgba(15, 22, 20, 0.4);
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.hero-shot:hover .hero-shot__hint { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); }
.hero-shot__hint i.ic { width: 14px; height: 14px; color: var(--accent-text); }
.hero-halo {
  position: absolute; inset: -40px 0 auto; height: 380px; z-index: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 20%,
    color-mix(in srgb, var(--tide-400) 14%, transparent), transparent 70%);
  pointer-events: none;
}
/* ── Proof strip: the five documents in identical mini-chrome ────
   Our honest replacement for a logo wall. It used to overlap the hero
   shot's bottom fade; with a live editor above it the strip sits clear of
   the window instead of covering the thing you can click. The uniform
   tidepage frame keeps five loud document brands from fighting our own. -*/
.strip { position: relative; z-index: 3; max-width: 1010px; margin: 44px auto 0; padding: 0 32px 72px; }
.strip--inline { max-width: none; margin: 34px 0 0; padding: 0; }
.strip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.strip-card { text-decoration: none; color: inherit; min-width: 0; display: block; }
.mini-frame {
  display: block; background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 22, 20, 0.05), 0 14px 30px -18px rgba(15, 22, 20, 0.3);
  transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.strip-card:hover .mini-frame { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15,22,20,.06), 0 18px 34px -18px rgba(15,22,20,.35); }
.mini-bar {
  display: flex; align-items: center; gap: 5px; padding: 6px 9px;
  border-bottom: 1px solid var(--border-subtle); background: var(--surface-inset);
}
.mini-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-300); flex: none; }
.mini-bar em {
  font-style: normal; font-family: var(--font-mono); font-size: 8.5px;
  color: var(--text-faint); margin-left: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-shot { display: block; aspect-ratio: 16 / 10.5; overflow: hidden; }
.mini-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.strip-cap {
  display: block; margin-top: 8px; text-align: center;
  font-size: var(--text-xs); color: var(--text-secondary);
}
.strip-cap b { display: block; font-weight: var(--weight-semibold); color: var(--text-primary); font-size: var(--text-sm); }
.strip-note { text-align: center; margin: 22px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.strip-note a { color: var(--accent-text); font-weight: var(--weight-semibold); text-decoration: none; }
.strip-note a:hover { text-decoration: underline; }

/* ── "The document, upgraded" value cards ───────────────────────── */
.vals-sec { max-width: 1120px; margin: 0 auto; padding: 40px 32px 72px; }
.vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vals--4 { grid-template-columns: repeat(2, 1fr); max-width: 980px; margin: 0 auto; }
.val {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 26px;
}
.val .glyph {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius-md); margin-bottom: 16px;
  background: var(--accent-subtle); border: 1px solid var(--accent-border);
  color: var(--accent-text);
}
.val .glyph i { width: 18px; height: 18px; }
.val h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 8px; }
.val p { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* The one linked essay for readers who want the long-form argument. */
.featured-post {
  display: flex; align-items: center; gap: 14px; max-width: 720px; margin: 22px auto 0;
  padding: 14px 20px; text-decoration: none; text-align: left;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); color: var(--text-secondary); font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.featured-post:hover { border-color: var(--accent-border); }
.featured-post > i.ic { flex: none; width: 20px; height: 20px; color: var(--accent-text); }
.featured-post span { min-width: 0; }
.featured-post b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.featured-post em {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-style: normal; font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap;
}
.featured-post em i.ic { width: 14px; height: 14px; color: var(--accent-text); }

/* ── Pillars band (the kept pinned switcher, re-contented) ──────── */
.features { background: var(--surface-card); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.feature-switch { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.feature-sticky {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px 56px; align-items: center;
  grid-template-areas: "head head" "rail stage";
  padding: 44px 0;
}
/* The section heading pins WITH the rail and stage — it used to sit above the
   sticky region and scrolled away the moment the story started. */
.feature-head { grid-area: head; margin: 0 auto 14px; }
.feature-rail { grid-area: rail; }
.feature-stage { grid-area: stage; }
.feature-switch.is-pinned .feature-sticky {
  position: sticky; top: var(--nav-h, 64px); min-height: calc(100vh - var(--nav-h, 64px));
  padding: 24px 0; align-content: center;
}
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature {
  padding: 15px 0 15px 22px; border-left: 2px solid var(--border-subtle);
  transition: opacity var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.feature h3 {
  font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0;
  color: var(--text-primary); cursor: pointer;
}
.feature-desc {
  font-size: var(--text-base); color: var(--text-secondary); line-height: 1.5;
  margin: 5px 0 0; max-width: 44ch;
}
/* Dim inactive features only when JS drives the switch (.is-live), so with
   no JS every feature reads at full strength. */
.feature-switch.is-live .feature { opacity: .42; }
.feature-switch.is-live .feature.is-active { opacity: 1; border-left-color: var(--accent); }

/* The stage frame: visuals cross-fade, one shown at a time. */
.feature-stage { align-self: center; }
.feature-frame {
  /* The captures' own ratio (1400×875 = 16:10) — `cover` at 4:3 was shaving
     both sides off every screenshot. */
  position: relative; aspect-ratio: 16 / 10;
  background: var(--surface-inset); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
}
.feature-visual {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 0 24px; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.feature-visual::after {
  content: ""; position: absolute; inset: 18px; border-radius: var(--radius-md);
  border: 1px dashed var(--border-default); pointer-events: none;
}
.feature-visual.is-active { opacity: 1; }

/* Drop-in media: a real <img>/<video> inside a visual fills the frame and
   the placeholder chrome disappears. See landing/VISUAL_ASSETS_HANDOVER.md. */
.feature-visual > img, .feature-visual > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.feature-visual:has(img, video) > *:not(img):not(video) { display: none; }
.feature-visual:has(img, video)::after { display: none; }
.shot-video { display: block; width: 100%; height: auto; }

/* ── Pricing ────────────────────────────────────────────────────── */
.pricing { max-width: 1120px; margin: 0 auto; padding: 8px 32px 80px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 0 auto; }
.plan {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: 30px;
}
.plan.is-live { border-color: var(--accent-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tide-500) 8%, transparent); }
.plan-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-text);
}
.plan.is-later .plan-tag { color: var(--text-faint); }
.plan h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 10px 0 0; }
.price {
  font-family: var(--font-display); font-size: 40px; font-weight: 500;
  letter-spacing: -0.02em; margin: 12px 0 4px; color: var(--text-primary);
}
.price small { font-size: var(--text-sm); font-family: var(--font-sans); font-weight: var(--weight-regular); color: var(--text-muted); letter-spacing: normal; }
.plan > p { font-size: var(--text-base); color: var(--text-secondary); margin: 6px 0 0; }
.plan ul { list-style: none; margin: 16px 0 22px; padding: 0; }
.plan li { display: flex; gap: 9px; font-size: var(--text-base); color: var(--text-secondary); margin-top: 8px; line-height: 1.45; }
.plan li::before { content: "✓"; color: var(--accent-text); font-weight: 700; flex: none; }
.plan.is-later li::before { content: "·"; color: var(--text-faint); }

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--border-subtle); }
.faq-in {
  max-width: 1120px; margin: 0 auto; padding: 72px 32px;
  display: grid; grid-template-columns: 0.82fr 1.45fr; gap: 32px 72px; align-items: start;
}
.faq-head { position: sticky; top: 96px; }
.faq-head .h2 { margin-top: 12px; }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-item:first-child { border-top: 1px solid var(--border-subtle); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
  width: 18px; height: 18px; flex: none; color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item p {
  padding: 0 4px 22px; margin: 0; max-width: 64ch;
  font-size: var(--text-base); color: var(--text-secondary); line-height: 1.6;
}

/* ── From the blog ──────────────────────────────────────────────── */
.blogtease { max-width: 1120px; margin: 0 auto; padding: 56px 32px; }
.blogtease-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.blogtease-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.blogtease-all:hover { text-decoration: underline; }
.blogtease-all i { width: 17px; height: 17px; }
.blogtease-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blogtease-card {
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.blogtease-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blogtease-cat {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-text);
}
.blogtease-card h3 { font-size: 19px; line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
.blogtease-card p { font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); margin: 0; flex: 1; }
.blogtease-meta { font-size: 13px; color: var(--text-muted); }

/* ── Closing CTA ───────────────────────────────────────────────── */
.cta { padding: 24px 32px 96px; }
.cta-in {
  position: relative; overflow: hidden;
  max-width: 760px; margin: 0 auto; text-align: center;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-hairline), var(--shadow-sm);
  padding: 56px 40px;
}
.cta-in > *:not(.wave-bg) { position: relative; z-index: 1; }
.cta .eyebrow { text-align: center; }
.cta-sub { font-size: var(--text-lg); color: var(--text-secondary); margin: 14px auto 0; max-width: 54ch; }
.cta-actions { display: flex; gap: 12px; margin: 28px 0 0; flex-wrap: wrap; justify-content: center; }
.cta-tags { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-inset); color: var(--text-secondary);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  padding: 5px 12px; font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.tag i { width: 14px; height: 14px; color: var(--success); }

/* ── Footer (multi-column) ─────────────────────────────────────── */
.foot { border-top: 1px solid var(--border-subtle); background: var(--surface-inset); }
.foot-in {
  max-width: 1120px; margin: 0 auto; padding: 48px 32px 36px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
}
.foot-brand p { margin: 12px 0 0; font-size: var(--text-sm); color: var(--text-muted); max-width: 30ch; line-height: 1.5; }
.foot-col h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px;
  font-weight: var(--weight-medium);
}
.foot-col a {
  display: block; margin-top: 8px;
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary);
  text-decoration: none; transition: var(--transition-colors);
}
.foot-col a:hover { color: var(--text-primary); }
.foot-base {
  max-width: 1120px; margin: 0 auto; padding: 18px 32px 26px;
  border-top: 1px solid var(--border-subtle);
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--text-faint);
}
.foot-base span:last-child { margin-left: auto; }

/* ── Reveal on scroll (progressive enhancement) ──────────────────── */
.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ── Scroll "tideline" — a teal progress line that rises as you read. ── */
.scroll-tide {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  z-index: 40; pointer-events: none; will-change: transform;
}
.scroll-tide--nav { position: absolute; top: auto; bottom: -1px; z-index: 5; }
[data-theme="dark"] .scroll-tide { background: var(--tide-bright); }

/* ── Integrations ────────────────────────────────────────────────
   Two live, two announced. The status tags are square-cornered labels on
   purpose — the pill shape left this page. */
.integrations { max-width: 1120px; margin: 0 auto; padding: 72px 32px; }
.integr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; }
.integr {
  position: relative; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 26px;
}
.integr .glyph {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius-md); margin-bottom: 16px;
  background: var(--accent-subtle); border: 1px solid var(--accent-border);
  color: var(--accent-text);
}
.integr .glyph i { width: 18px; height: 18px; }
.integr h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 8px; }
.integr p { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.55; margin: 0; }
.integr > a {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  color: var(--accent-text); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  text-decoration: none;
}
.integr > a:hover { text-decoration: underline; }
.integr > a i.ic { width: 14px; height: 14px; }
.integr-status {
  position: absolute; top: 22px; right: 22px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-sm);
  color: var(--text-muted); background: var(--surface-inset); border: 1px solid var(--border-subtle);
}
.integr-status.is-live { color: var(--accent-text); background: var(--accent-subtle); border-color: var(--accent-border); }
.integr.is-coming .glyph { background: var(--surface-inset); border-color: var(--border-subtle); color: var(--text-muted); }
.integr.is-coming h3 { color: var(--text-secondary); }

/* ── Mission — the human line, signed ─────────────────────────── */
.mission { border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
.mission-in { max-width: 760px; margin: 0 auto; padding: 64px 32px; text-align: center; }
.mission-text {
  font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 24px); line-height: 1.55;
  color: var(--text-primary); margin: 0;
}
.mission-sig { margin: 20px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.mission-sig a { color: var(--accent-text); font-weight: var(--weight-semibold); text-decoration: none; }
.mission-sig a:hover { text-decoration: underline; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .hero { padding-top: 48px; }
  .integr-grid { grid-template-columns: 1fr; }
  .featured-post { flex-wrap: wrap; }
  .featured-post em { margin-left: 34px; }
  .vals, .vals--4 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  /* Proof strip becomes a swipeable row (5-up doesn't fit). */
  .strip { margin-top: 32px; }
  .strip-grid {
    display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .strip-grid::-webkit-scrollbar { display: none; }
  .strip-card { flex: 0 0 168px; scroll-snap-align: start; }
  /* Unpin the switcher: a sticky stage on top, captions beneath. */
  .feature-switch.is-pinned { height: auto !important; }
  .feature-sticky,
  .feature-switch.is-pinned .feature-sticky {
    position: static; min-height: 0; grid-template-columns: 1fr; grid-template-areas: "head" "stage" "rail"; gap: 22px; padding: 32px 0 28px;
  }
  .feature-stage { position: static; margin-bottom: 8px; }
  .faq-in { grid-template-columns: 1fr; gap: 24px; }
  .faq-head { position: static; }
  .foot-in { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .nav-links, .nav-signin { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-in, .hero, .strip, .vals-sec, .sec-head--pad, .feature-switch, .integrations,
  .mission-in, .pricing, .faq-in, .blogtease, .foot-in, .foot-base {
    padding-left: 20px; padding-right: 20px;
  }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .hero-shot__hint { position: static; transform: none; display: flex; justify-content: center; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .assure { gap: 10px; }
  .strip-card { flex: 0 0 148px; }
  .cta-in { padding: 40px 24px; }
  .blogtease-grid { grid-template-columns: 1fr; }
  .blogtease-head { flex-wrap: wrap; }
  .foot-in { grid-template-columns: 1fr; }
  .foot-base span:last-child { margin-left: 0; }
}
@media (max-width: 860px) {
  .blogtease-grid { grid-template-columns: 1fr; }
  .blogtease-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}