/* tranvoro.com — marketing site stylesheet (index, privacy, terms).
   Built 1:1 from the Claude Design handoff "Tranvoro Landing.dc.html". */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

:root {
  --ink: #142033;
  --muted: #5b6678;
  --faint: #8695ac;
  --line: #e3e8ef;
  --surface: #ffffff;
  --surface-subtle: #f6f8fb;
  --brand: #206ac5;
  --brand-hover: #1a56a0;
  --brand-soft: #eaf2fc;
  --brand-soft-line: #d3e2f6;
  --navy: #0b1628;
  --navy-2: #101c32;
  --navy-3: #152848;
  --navy-line: #22334f;
  --on-dark-muted: #afbdd2;
  --on-dark-soft: #c6d2e4;
  --on-dark-accent: #4c9af0;
  --on-dark-label: #5a6b85;
  --danger: #c43a3a;
  --font-sans: Inter, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --page: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 3px solid rgba(32,106,197,.45); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 7px; font-size: 14px; font-weight: 600; }
.skip:focus { top: 12px; color: #fff; }
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px; }
.sec { border-top: 1px solid var(--line); }
.sec--white { background: var(--surface); }
.sec--subtle { background: var(--surface-subtle); }
.sec--dark { background: var(--navy); color: #fff; border-top: 0; }
.pad-96 { padding-block: 96px; }
.pad-88 { padding-block: 88px; }
.pad-96--88 { padding-bottom: 88px; }
.sec--flush { border-top: 0; }

.mono-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--brand); text-transform: uppercase; }
.sec--dark .mono-label, .demo .mono-label { color: var(--on-dark-accent); }
.h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.14; letter-spacing: -0.03em; font-weight: 700; }
.h2--lg { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; }
.lede { font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); margin-top: 8px; flex: none; display: block; }
.bullets { display: flex; flex-direction: column; gap: 12px; }
.bullets li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-size: 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; border-radius: 8px; cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s; }
.btn--primary { color: #fff; background: var(--brand); }
.btn--primary:hover { color: #fff; background: var(--brand-hover); }
.btn--sm { font-size: 14px; padding: 9px 16px; border-radius: 7px; box-shadow: 0 1px 2px rgba(11,22,40,.18); }
.btn--lg { font-size: 15px; padding: 13px 24px; }
.btn--glow { box-shadow: 0 8px 20px -8px rgba(32,106,197,.8); }
.btn--ghost-dark { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.btn--ghost-dark:hover { color: #fff; background: rgba(255,255,255,.12); }
.btn--outline { color: var(--ink); background: #fff; border-color: var(--line); }
.btn--outline:hover { color: var(--ink); border-color: #cbd4e0; }
.btn--block { display: flex; width: 100%; }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head__inner { height: 64px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand svg { display: block; flex: none; }
.brand__word { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; }
.nav { display: flex; align-items: center; gap: 26px; flex: 1; min-width: 0; overflow-x: auto; }
.nav a { font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.head__actions { display: flex; align-items: center; gap: 16px; flex: none; margin-left: auto; }
.head__signin { font-size: 14px; font-weight: 500; color: var(--ink); }
.head__signin:hover { color: var(--brand); }
.burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); cursor: pointer; }

.mnav { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; background: #fff; }
.mnav[data-open="true"] { display: flex; }
.mnav__head { height: 64px; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--line); }
.mnav__close { display: inline-flex; margin-left: auto; }
.mnav__body { flex: 1; overflow-y: auto; padding: 12px 24px 32px; }
.mnav__link { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; color: var(--ink); }
.mnav__cta { margin-top: 24px; }

.mnav__cta2 { margin-top: 10px; }
.mnav__note { margin-top: 16px; font-size: 12.5px; color: var(--faint); text-align: center; }

@media (max-width: 1040px) { .head__actions { gap: 12px; } }
@media (max-width: 860px) {
  /* The secondary CTA folds away only HERE, at the same breakpoint the burger
     appears — otherwise there is a band where "Book a demo" is hidden from the
     bar and the menu that would hold it does not exist yet, leaving the demo
     path unreachable from the header. "Start free" stays on the bar because it
     is the primary path. */
  .nav, .head__signin, .head__demo { display: none; }
  .burger { display: inline-flex; }
  .head__actions { gap: 10px; }
}
@media (max-width: 340px) { .head__actions .btn--sm { display: none; } }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(180deg, #0b1628 0%, #101c32 55%, #152848 100%); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 380px at 50% -10%, rgba(32,106,197,.30), transparent 70%); }
.hero__inner { position: relative; padding-top: 88px; }
.hero__copy { max-width: 820px; }
.pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); padding: 6px 12px; border-radius: 999px; font-size: 12.5px; color: var(--on-dark-soft); letter-spacing: .01em; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark-accent); display: block; }
.hero h1 { margin-top: 24px; font-size: clamp(36px, 5vw, 60px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; }
.hero__sub { margin-top: 22px; max-width: 640px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--on-dark-muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pill--label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft); }
.hero__trial { margin-top: 16px; font-size: 13.5px; color: var(--on-dark-muted); }
.hero__explore { margin-top: 18px; font-size: 14px; }
.hero__explore a { color: var(--on-dark-accent); font-weight: 500; }
.hero__explore a:hover { color: #fff; }
.hero__explore span { display: inline-block; transition: transform .15s; }
.hero__explore a:hover span { transform: translateX(3px); }
.modes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 34px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.modes li + li::before { content: "•"; color: #3c4a63; margin-right: 18px; }
.hero__video { margin: 60px 0 88px; border-radius: 12px; border: 1px solid var(--navy-line); background: #0b1628; box-shadow: 0 -2px 0 rgba(255,255,255,.06), 0 40px 80px -24px rgba(3,9,20,.7); overflow: hidden; }
.hero__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0b1628; }
.shot img { display: block; width: 100%; height: auto; }
@media (min-width: 1080px) {
  .hero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding-bottom: 96px; }
  .hero h1 { font-size: clamp(40px, 3.6vw, 52px); }
  .hero__video { margin: 0; }
}

/* ── Operational record (steps) ─────────────────────────────────────── */
.intro { max-width: 720px; }
.intro .h2 { margin-top: 16px; }
.intro .lede { margin-top: 16px; font-size: 17px; }
.record { margin-top: 52px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #fff, var(--surface-subtle)); overflow: hidden; }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.step { padding: 28px 26px; background: linear-gradient(180deg, #fff, #f8fafd); }
.step__top { display: flex; align-items: center; gap: 10px; }
.step__icon { width: 28px; height: 28px; border-radius: 7px; background: var(--brand-soft); border: 1px solid var(--brand-soft-line); display: flex; align-items: center; justify-content: center; color: var(--brand); flex: none; }
.step__icon--dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.step__num { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.step h3 { margin-top: 16px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.step p { margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.step__team { margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--brand); }
.carried { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 18px 26px; background: #fff; border-top: 1px solid var(--line); }
.carried__label { font-size: 13px; color: var(--muted); }
.carried__tag { font-size: 12.5px; color: var(--ink); background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .steps { grid-template-columns: 1fr; } }

/* ── Feature rows ───────────────────────────────────────────────────── */
.feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.feature h3 { margin-top: 14px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; max-width: 460px; }
.feature__body > p { font-size: 16px; line-height: 1.62; color: var(--muted); }
.feature__body > .bullets, .feature__body > .chips, .feature__body > .facets { margin-top: 22px; }
.shot { margin-top: 40px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 28px 56px -32px rgba(16,32,58,.5); }
.divider { height: 1px; background: var(--line); margin: 80px 0; }
.facets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.facet { background: #fff; padding: 16px; }
.facet b { display: block; font-size: 14px; font-weight: 600; }
.facet span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; gap: 20px; }
  .divider { margin: 56px 0; }
}
@media (max-width: 520px) { .facets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Two-column split sections ──────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.split--48 { gap: 48px; }
.split .lede { margin-top: 16px; max-width: 460px; }
.outcomes li { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.outcomes li:last-child { border-bottom: 1px solid var(--line); }
.outcomes__num { font-family: var(--font-mono); font-size: 11px; color: var(--faint); padding-top: 3px; flex: none; }
.outcomes h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.outcomes p { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin-top: 5px; }
.fit { display: grid; gap: 14px; }
.fit li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; display: flex; gap: 13px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.fit .dot { width: 6px; height: 6px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* ── Capabilities (dark) ─────────────────────────────────────────────── */
.caps-head { max-width: 660px; }
.caps-head .h2 { margin-top: 16px; }
.caps { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cap { background: var(--navy); padding: 26px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; }
.cap h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.cap ul { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.cap li { font-size: 14px; color: var(--on-dark-muted); }

/* ── Pricing (markup generated by scripts/gen-landing-pricing.mjs) ──── */
.pricing__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pricing__intro { max-width: 640px; }
.pricing__intro .lede { margin-top: 14px; }
.pricing__toggle { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-subtle); }
.pricing__togglebtn { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 6px; padding: 7px 14px; cursor: pointer; }
.pricing__togglebtn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(11,22,40,.12); }
.plans { margin-top: 44px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.plan { border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px; background: #fff; display: flex; flex-direction: column; }
.plan--popular { border: 1.5px solid var(--brand); box-shadow: 0 20px 44px -26px rgba(32,106,197,.55); }
.plan--dark { border-color: var(--navy-line); background: var(--navy); color: #fff; }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan__name { font-size: 15px; font-weight: 600; }
.plan__tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); border-radius: 4px; padding: 4px 8px; }
.plan__blurb { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 4px; }
.plan .price { margin-top: 22px; display: flex; align-items: baseline; gap: 6px; }
.plan .price[hidden] { display: none; }
.price__amount { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; }
.price__per { font-size: 13px; color: var(--muted); }
.price__seat { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.plan__list { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.plan__cta { margin-top: auto; padding-top: 26px; }
.plan__cta .btn { font-size: 14px; padding: 11px 16px; border-radius: 7px; }
.plan--dark .plan__blurb, .plan--dark .plan__list, .plan--dark .price__per, .plan--dark .price__seat { color: var(--on-dark-muted); }
.btn--light { color: var(--navy); background: #fff; }
.btn--light:hover { color: var(--navy); background: #e9eef5; }
.pricing__notes { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 13.5px; color: var(--muted); }
.pricing__trial { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--brand); }
.plans--selfserve { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Enterprise — a band, not a fourth card. */
.enterprise { margin-top: 20px; border: 1px solid var(--navy-line); border-radius: 12px; background: var(--navy); color: #fff; padding: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.enterprise__copy { max-width: 720px; }
.enterprise__name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.enterprise__blurb { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--on-dark-muted); }
.enterprise__list { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 13.5px; color: var(--on-dark-soft); }
.enterprise__list li { position: relative; padding-left: 14px; }
.enterprise__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--on-dark-accent); }
.enterprise__cta { flex: none; }

@media (max-width: 1180px) { .plans, .plans--selfserve { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .enterprise { padding: 26px 22px; } .enterprise__cta, .enterprise__cta .btn { width: 100%; } }
@media (max-width: 620px) { .plans, .plans--selfserve { grid-template-columns: 1fr; } }

/* ── Controls ────────────────────────────────────────────────────────── */
.controls-head { max-width: 640px; }
.controls-head .h2 { margin-top: 16px; }
.controls { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.control { background: #fff; padding: 24px; }
.control h3 { font-size: 15px; font-weight: 600; }
.control p { font-size: 14px; color: var(--muted); line-height: 1.55; margin-top: 6px; }
@media (max-width: 900px) { .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .controls { grid-template-columns: 1fr; } }

/* ── Demo ────────────────────────────────────────────────────────────── */
.demo { background: linear-gradient(180deg, #0b1628, #101c32); color: #fff; }
.demo h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; }
.demo__lede { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--on-dark-muted); max-width: 480px; }
.demo .bullets { margin-top: 32px; }
.demo .bullets li { color: var(--on-dark-soft); }
.demo .dot { background: var(--on-dark-accent); }
/* The demo is one of two routes in, not the gate. */
.demo__selfserve { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--navy-line); font-size: 14.5px; color: var(--on-dark-muted); }
.demo__selfserve a { color: var(--on-dark-accent); font-weight: 600; }
.demo__selfserve a:hover { color: #fff; }
.demo__selfserve span { display: inline-block; transition: transform .15s; }
.demo__selfserve a:hover span { transform: translateX(3px); }
.formcard { min-width: 0; background: #fff; border-radius: 12px; padding: 32px; color: var(--ink); box-shadow: 0 34px 64px -30px rgba(3,9,20,.8); }
.formcard__title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.formcard__note { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.formgrid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.field input, .field textarea { margin-top: 6px; width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; font-size: 14px; font-family: var(--font-sans); color: var(--ink); outline: none; background: #fff; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--brand); }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--danger); }
.field__err { min-height: 16px; margin-top: 3px; font-size: 12px; color: var(--danger); }
.pot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formcard form .btn--primary { margin-top: 4px; font-size: 15px; padding: 13px 16px; }
.consent { margin-top: 12px; font-size: 12px; color: var(--faint); }
.formstate { padding-top: 12px; }
.formstate h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.formstate p { margin: 8px 0 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.formstate .btn { font-size: 14px; padding: 10px 16px; }
.formstate .btn + .btn { margin-left: 8px; }
@media (max-width: 460px) {
  .formcard { padding: 24px 20px; }
  .formgrid { grid-template-columns: 1fr; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.faq-layout .lede { margin-top: 14px; font-size: 15.5px; max-width: 340px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: flex-start; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq__q { flex: 1; min-width: 0; }
.faq__sign { font-size: 20px; color: var(--faint); line-height: 1; flex: none; width: 16px; text-align: center; font-weight: 400; }
.faq__sign::before { content: "+"; }
.faq details[open] .faq__sign::before { content: "\2212"; }
.faq__a { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 620px; padding: 0 0 22px; }
@media (max-width: 760px) { .faq-layout { grid-template-columns: 1fr; gap: 28px; } }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-foot { background: var(--navy); color: #fff; border-top: 1px solid var(--navy-line); }
.site-foot__inner { padding-top: 64px; padding-bottom: 40px; }
.foot__grid { display: grid; grid-template-columns: 1.7fr repeat(4, minmax(120px, .8fr)); gap: 40px; }
@media (max-width: 940px) { .foot__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; } }
.foot__brand { max-width: 320px; }
.foot__brand .brand, .foot__brand .brand:hover { color: #fff; }
.foot__brand .brand__word { font-size: 17px; }
.foot__desc { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--faint); }
.foot__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--on-dark-label); font-weight: 400; text-transform: uppercase; }
.foot__links { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.foot__links a { font-size: 14px; color: var(--on-dark-muted); }
.foot__links a:hover { color: #fff; }
.foot__bar { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; color: var(--on-dark-label); }

/* ── Legal pages (privacy, terms) ───────────────────────────────────── */
.legal { background: var(--surface); }
.legal__wrap { max-width: 760px; padding-block: 72px 96px; }
.legal__back { display: inline-block; font-size: 14px; font-weight: 500; color: var(--muted); }
.legal__back:hover { color: var(--ink); }
.legal h1 { margin-top: 14px; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; }
.legal__meta { margin-top: 12px; font-size: 14px; color: var(--faint); }
.legal__body { margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--line); }
.legal h2 { margin-top: 40px; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.7; color: #3a4658; }
.legal p { margin-top: 14px; }
.legal ul { margin-top: 14px; padding-left: 20px; list-style: disc; }
.legal li { margin-top: 8px; }
.legal li::marker { color: var(--brand); }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal .legal__back { text-decoration: none; }
.legal p.mono-label { margin-top: 40px; font-size: 11.5px; line-height: 1.4; color: var(--brand); }
.legal p.legal__meta { margin-top: 12px; font-size: 14px; color: var(--faint); }
.legal code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
/* LEGAL-001 — sub-heading and contents rail on the generated legal documents.
   The Terms run to 37 sections; a reader needs to be able to get back to one. */
.legal h3 { margin-top: 22px; font-size: 16px; line-height: 1.35; font-weight: 600; }
.legal__toc { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); }
.legal__toc-title { margin: 0 0 10px; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.legal__toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.legal__toc li { margin: 0 0 6px; break-inside: avoid; }
.legal__toc a { font-size: 13.5px; line-height: 1.45; text-decoration: none; color: var(--muted); }
.legal__toc a:hover { color: var(--brand); text-decoration: underline; }
.legal section { scroll-margin-top: 84px; }
@media (max-width: 640px) { .legal__toc ol { columns: 1; } }
.legal__table { margin-top: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.legal th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--faint); background: var(--surface-subtle); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.legal td { padding: 12px 16px; border-top: 1px solid var(--line); color: #3a4658; vertical-align: top; line-height: 1.55; }
.legal tr:first-child td { border-top: 0; }
.legal td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }

/* ── Motion ──────────────────────────────────────────────────────────── */
.rise { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
  .js .rise.is-in { opacity: 1; transform: none; }
}

/* ── Content pages: features, solutions, guides, templates (SEO-001) ────── */
.nav a[aria-current="page"] { color: var(--ink); }
.page-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(180deg, #0b1628 0%, #101c32 60%, #152848 100%); }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 320px at 30% -10%, rgba(32,106,197,.28), transparent 70%); }
.page-hero__inner { position: relative; padding-block: 56px 64px; max-width: 860px; }
.page-hero h1 { margin-top: 18px; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; }
.page-hero__sub { margin-top: 18px; max-width: 680px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--on-dark-muted); }
.page-hero .hero__cta { margin-top: 28px; }
.page-hero .hero__trial { margin-top: 14px; }
.page-hero__meta { margin-top: 18px; font-size: 13.5px; color: var(--on-dark-muted); }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--on-dark-muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #3c4a63; }
.crumbs a { color: var(--on-dark-soft); }
.crumbs a:hover { color: #fff; }

.sec-head { max-width: 760px; }
.sec-head .lede { margin-top: 14px; }

.prose { max-width: 780px; }
.prose h2 { margin-top: 56px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; scroll-margin-top: 84px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 30px; font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
.prose p, .prose li { font-size: 16px; line-height: 1.72; color: #3a4658; }
.prose p { margin-top: 14px; }
.prose ul, .prose ol { margin-top: 14px; padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 8px; }
.prose li::marker { color: var(--brand); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose a.btn { text-decoration: none; }
.prose strong { color: var(--ink); }

.toc { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); max-width: 780px; }
.toc__title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.toc ol { margin-top: 10px; padding-left: 20px; list-style: decimal; columns: 2; column-gap: 32px; }
.toc li { margin: 0 0 6px; font-size: 14px; line-height: 1.45; break-inside: avoid; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

.callout { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--brand-soft-line); border-left: 3px solid var(--brand); border-radius: 8px; background: var(--brand-soft); font-size: 15px; line-height: 1.6; color: #2b3a52; }
.callout strong { color: var(--ink); }
.callout--warn { border-color: #f0d9a8; border-left-color: #c58a1a; background: #fdf7ea; }

.cards { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards, .cards--2 { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
.card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.card__link { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; }
.card__kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }

.flow { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; counter-reset: flow; }
.flow li { position: relative; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 20px; counter-increment: flow; }
.flow li::before { content: counter(flow, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.flow h3 { margin-top: 8px; font-size: 16px; font-weight: 600; }
.flow p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }

.table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.data-table caption { caption-side: top; text-align: left; padding: 12px 14px 4px; font-size: 13px; color: var(--faint); }
.data-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--faint); background: var(--surface-subtle); padding: 11px 14px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; color: #3a4658; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tfoot td { font-weight: 600; color: var(--ink); background: var(--surface-subtle); }

.figure { margin: 32px 0 0; }
.figure .shot { margin-top: 0; }
.figure figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--faint); max-width: 780px; }

.split-media { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
@media (max-width: 960px) { .split-media { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.cta-band { background: var(--navy); color: #fff; }
.cta-band__inner { padding-block: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta-band h2 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; max-width: 640px; }
.cta-band p { margin-top: 10px; color: var(--on-dark-muted); font-size: 15.5px; line-height: 1.6; max-width: 640px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.download { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-subtle); }
.download__meta { font-size: 14px; color: var(--muted); line-height: 1.55; }
.download__meta strong { display: block; color: var(--ink); font-size: 15px; }

.related { margin-top: 20px; display: grid; gap: 10px; }
.related a { font-weight: 600; }

.slogan { margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--on-dark-soft); }
.pricing__more { margin-top: 28px; font-size: 15px; }
.pricing__more a { font-weight: 600; }

.consent-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 48px -16px rgba(11,22,40,.35); }
.consent-bar p { flex: 1 1 320px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.consent-bar a { text-decoration: underline; }
.consent-bar__actions { display: flex; gap: 10px; flex: none; }
.foot__consent { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--on-dark-muted); cursor: pointer; text-align: left; }
.foot__consent:hover { color: #fff; }

.hero__poster { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #0b1628; cursor: pointer; }
.hero__poster img { display: block; width: 100%; height: auto; }
.hero__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: rgba(11,22,40,.82); color: #fff; font: 600 15px var(--font-sans); border: 1px solid rgba(255,255,255,.22); }
.hero__poster:hover .hero__play { background: var(--brand); }
.hero__video video { display: block; width: 100%; height: auto; }

.notfound { padding-block: 96px; max-width: 640px; }
.notfound h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.notfound p { margin-top: 14px; color: var(--muted); line-height: 1.6; }
.notfound ul { margin-top: 22px; display: grid; gap: 10px; }

.more-link { margin-top: 18px; font-size: 14.5px; }
.more-link a { font-weight: 600; }