/* ─────────────────────────────────────────────────────────
   index.html — page-specific styles. Base tokens and shared
   chrome (nav, footer, buttons, terminal, tags, ...) come from
   styles.css / site-chrome.css, loaded before this file.
   ───────────────────────────────────────────────────────── */

/* ─── Layout primitives (page-specific) ────────────────── */
section {
  padding: clamp(40px, 5vw, 64px) 0;
  position: relative;
}
section + section { border-top: var(--border-hair); }

/* ─── Hero ─────────────────────────────────────────────── */
.hero {
  padding-top: clamp(36px, 5vw, 60px);
  padding-bottom: clamp(36px, 5vw, 60px);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
/* Grid items default to min-width: auto, which refuses to shrink a track
   below its content's intrinsic minimum — the terminal's <pre> content
   (long pill text, unwrapped code lines) has a wide one, so without this
   the whole grid, and the whole page, overflows horizontally on mobile
   instead of the terminal's own overflow-x:auto handling it internally. */
.hero-inner > * { min-width: 0; }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
}
/* The hero h1 caps below the global 64px: at 64px in this column the headline
   ran to five or six lines and pushed the install command below the fold. */
.hero h1 { font-size: clamp(2.35rem, 4.5vw, 3.65rem); }
.hero h1 em { font-family: var(--font-display); font-style: normal; font-weight: 600; color: var(--violet); }
.hero-eyebrow { margin-bottom: 18px; max-width: 52ch; line-height: 1.5; }
.hero .lead { margin-top: 18px; }
/* The install command is the hero's primary artifact. .code-block's default
   is one scrolling line, which silently truncates the URL at the panel edge —
   a command you cannot read is not an invitation, so this one wraps instead. */
.hero-install { margin-top: 26px; }
.hero-install pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Platform coverage and the no-commitment path, in one line rather than a
   button pair plus a tag row. */
.hero-note { margin-top: 14px; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; max-width: var(--measure); }
.hero-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 22px 0 0;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
}
.hero-trust span { position: relative; }
.hero-trust span + span::before { content: "·"; position: absolute; left: -11px; color: var(--rule-strong); }
@media (max-width: 520px) {
  .hero-trust { flex-direction: column; gap: 5px; }
  .hero-trust span + span::before { display: none; }
}
.term-caption { margin: 14px 2px 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; }
.term-caption b { color: var(--ink); }
.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 28px;
}
/* Language coverage, shown where the reader actually asks it: next to the
   "run it on your repo" command, not stacked under the hero. */
.hero-works {
  position: relative;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.hero-works .hw-label {
  font-weight: 600;
  color: var(--ink-strong);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}
.hero-works .sep { color: var(--rule); }
.hero-works a { color: var(--accent); font-weight: 600; }
.hero-works a:hover { color: var(--accent-strong); }

/* ─── Where Enola fits beside the existing toolchain ──── */
#regressions { background: var(--paper-sunk); }
.toolchain-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  align-items: stretch;
  margin-top: 30px;
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  overflow: hidden;
}
.toolchain-side {
  min-width: 0;
  padding: 30px clamp(24px, 3vw, 38px);
}
.toolchain-side.enola-side { background: var(--accent-faint); }
.toolchain-label {
  display: block;
  margin-bottom: 18px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.toolchain-side h3 { margin-bottom: 18px; font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
.toolchain-side ul { list-style: none; margin: 0; padding: 0; }
.toolchain-side li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-top: var(--border-hair);
  color: var(--ink-muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.toolchain-side li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--font-mono);
}
.toolchain-bridge {
  display: grid;
  place-items: center;
  border-left: var(--border-hair);
  border-right: var(--border-hair);
  color: var(--violet);
  font-family: var(--font-mono);
  font-size: 18px;
}
.ratchet-callout {
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) auto minmax(150px, 0.65fr) minmax(260px, 1.4fr);
  gap: 22px;
  align-items: center;
  margin-top: 22px;
  padding: 22px 24px;
  background: var(--paper-raised);
  border: var(--border-hair);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}
.ratchet-callout div { min-width: 0; }
.ratchet-callout strong { display: block; color: var(--ink-strong); font-family: var(--font-mono); font-size: 22px; }
.ratchet-callout span { display: block; margin-top: 4px; color: var(--ink-muted); font-size: 12.5px; line-height: 1.4; }
.ratchet-callout > b { color: var(--violet); font-family: var(--font-mono); font-weight: 500; }
.ratchet-callout p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.55; }
@media (max-width: 900px) {
  .toolchain-compare { grid-template-columns: 1fr; }
  .toolchain-bridge { min-height: 44px; border: 0; border-top: var(--border-hair); border-bottom: var(--border-hair); }
  .ratchet-callout { grid-template-columns: 1fr auto 1fr; }
  .ratchet-callout p { grid-column: 1 / -1; padding-top: 16px; border-top: var(--border-hair); }
}
@media (max-width: 520px) {
  .ratchet-callout { grid-template-columns: 1fr; gap: 12px; }
  .ratchet-callout > b { transform: rotate(90deg); width: fit-content; }
}

/* ─── Try it read-only ────────────────────────────────── */
.explain-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 4vw, 48px); align-items: start; margin-top: 30px; }
.explain-grid > * { min-width: 0; }
@media (max-width: 950px) { .explain-grid { grid-template-columns: 1fr; } }
.explain-grid .code-block { margin-bottom: 18px; }
.explain-defs { border-top: var(--border-hair); }
.explain-def { padding: 16px 0; border-bottom: var(--border-hair); }
.explain-def b { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--ink-strong); margin-bottom: 5px; }
.explain-def p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.55; }
.explain-payoff { margin: 22px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.45; color: var(--ink-strong); }
/* Recorded run, full width under the grid. Width-constrained, never
   height-constrained — a fixed height would letterbox the capture. */
.explain-figure { margin: 34px 0 0; }
.explain-figure img { display: block; width: 100%; max-width: 1000px; height: auto; border: var(--border-hair); border-radius: var(--radius-md); background: var(--paper-ink); }
.explain-figure figcaption { margin: 14px 0 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; max-width: var(--measure); }
.explain-figure figcaption b { color: var(--ink); }

/* ─── Announcement bar ──────────────────────────────────── */
.announcement {
  background: var(--paper-ink-2);
  color: var(--ink-on-dark-muted);
  text-align: center;
  padding: 12px 16px;
  font-size: 14px;
}
.announcement a { color: var(--ink-on-dark); text-decoration: underline; font-weight: 600; margin-left: 4px; }

/* ─── Terminal block (base .term/.term-head/.term-body ────
   come from site-chrome.css) ─────────────────────────────── */
.term { display: flex; flex-direction: column; height: 100%; box-shadow: 0 0 0 1px rgba(28,27,23,0.04); }
.term-body { flex: 1; }
/* The hero's example terminal marks its lead dot to read as "live". */
.term-head .dots .dot-accent { background: var(--accent); }

/* ─── Product loop (Quality gate) ─────────────────────── */
/* The recorded session is the section's evidence, so it leads. The image is
   width-constrained rather than height-constrained: a fixed height would
   letterbox the terminal capture on narrow viewports. */
.loop-figure { margin: 28px 0 0; }
/* Capped at the capture's own pixel width: the container is wider than the
   recording, and upscaling a terminal GIF blurs every glyph in it. */
.loop-figure img {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background: var(--paper-ink);
}
.loop-figure figcaption { margin: 14px 0 0; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; max-width: var(--measure); }
.loop-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 28px;
}
.loop-columns > div {
  min-width: 0;
  padding: 24px;
  background: var(--paper-raised);
  border: var(--border-hair);
  border-radius: var(--radius-sm);
}
.loop-copy {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
}
.loop-copy:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .loop-columns { grid-template-columns: 1fr; }
}

.loop-steps {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: var(--border-hair);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  overflow: hidden;
}
@media (max-width: 900px) {
  .loop-steps { grid-template-columns: 1fr; }
}
.loop-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px clamp(22px, 3vw, 38px);
  border-left: var(--border-hair);
}
.loop-steps li:first-child { border-left: 0; }
.loop-steps li:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 1;
  right: -12px;
  top: 48px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: var(--border-hair);
  border-radius: 50%;
  background: var(--paper-raised);
  color: var(--violet);
  font-family: var(--font-mono);
  font-size: 13px;
}
.loop-number {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 16px;
}
.loop-steps h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); margin-bottom: 10px; }
.loop-steps p { font-size: 15px; line-height: 1.6; margin: 0; }
.loop-output {
  margin-top: auto;
  padding-top: 24px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.loop-output small {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.loop-return {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 22px);
  margin: 18px 0 22px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--accent-faint);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
}
.loop-return b { color: var(--violet); font-weight: 500; }
@media (max-width: 900px) {
  .loop-steps li { border-left: 0; border-top: var(--border-hair); padding: 26px; }
  .loop-steps li:first-child { border-top: 0; }
  .loop-steps li:not(:last-child)::after { display: none; }
}
@media (max-width: 680px) {
  .loop-return { align-items: flex-start; flex-direction: column; }
  .loop-return b { transform: rotate(90deg); margin-left: 5px; }
}
.enforcement {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: 36px;
  padding-top: 32px;
  border-top: var(--border-hair);
}
.enforcement-intro .col-title { display: block; }
.enforcement-intro p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.6; }
.enforcement-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.enforcement-items > div { padding: 16px 0; border-top: var(--border-hair); }
.enforcement-items > div:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
.enforcement-items b { display: block; margin-bottom: 5px; color: var(--ink-strong); font-size: 14.5px; }
.enforcement-items span { display: block; color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 900px) {
  .enforcement { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .enforcement-items { grid-template-columns: 1fr; }
  .enforcement-items > div:nth-child(2) { border-top: var(--border-hair); padding-top: 16px; }
}
/* Where the same verdict runs — three equal placements, not a hierarchy. */
.loop-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
@media (max-width: 900px) { .loop-places { grid-template-columns: 1fr; } }
.loop-places > * { min-width: 0; }
.loop-place { padding: 20px 22px; border-left: 3px solid var(--accent); background: var(--paper-raised); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.loop-place b { display: block; font-size: 15px; color: var(--ink-strong); margin-bottom: 6px; }
.loop-place p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.55; }

.col-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 16px 0;
}
/* ─── Install (three commands) ────────────────────────── */
#install { background: var(--paper-ink); color: var(--ink-on-dark); }
#install .eyebrow { color: var(--accent-on-dark); }
#install h2 { color: var(--ink-on-dark); }
#install .title-rule { background: var(--accent-on-dark); }
#install .lead { color: var(--ink-on-dark-faint); }
#install .uth-more { color: var(--accent-on-dark); }
/* .install-columns is a 2-col grid, but the intro (eyebrow/h2/lead)
   sits full-width above it — outside the grid — so the steps list and
   the command panel are guaranteed to start at the same y position,
   rather than the panel aligning with the intro block instead. */
.install-columns { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 44px; align-items: start; margin-top: 28px; }
@media (max-width: 900px) { .install-columns { grid-template-columns: 1fr; gap: 8px; } }
.install-columns > * { min-width: 0; }
.install-steps { display: flex; flex-direction: column; }
.install-step { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--rule-on-dark); align-items: start; }
.install-step:first-child { border-top: 0; }
.install-step b { font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--accent-on-dark); padding-top: 2px; }
.install-step strong { display: block; font-size: 16px; color: var(--ink-on-dark); }
.install-step p { margin: 5px 0 0; color: var(--ink-on-dark-muted); font-size: 14px; }
/* --accent sits too close to this section's ink background to read as a link. */
.install-step p a { color: var(--accent-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.install-setup { border: 1px solid var(--rule-on-dark); border-radius: var(--radius-md); overflow: hidden; background: rgba(0,0,0,0.15); }
.setup-row { padding: 16px 18px; border-top: 1px solid var(--rule-on-dark); overflow-x: auto; }
.setup-row:first-child { border-top: 0; }
.setup-row .setup-n { display: inline-block; min-width: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--accent-on-dark); margin-right: 10px; }
.setup-row code { font-family: var(--font-mono); font-size: 13px; color: var(--ink-on-dark); background: none; padding: 0; white-space: pre; }
.setup-row small { display: block; margin: 6px 0 0 26px; color: var(--ink-on-dark-muted); font-family: var(--font-mono); font-size: 11px; }
/* The CLI-only path, for readers who do not use a coding agent at all. */
.install-noagent { margin-top: 30px; padding: 22px 24px; border: 1px solid var(--rule-on-dark); border-radius: var(--radius-md); background: rgba(0,0,0,0.15); }
.install-noagent b { display: block; color: var(--ink-on-dark); font-size: 15px; margin-bottom: 6px; }
.install-noagent p { margin: 0; color: var(--ink-on-dark-muted); font-size: 14px; line-height: 1.6; max-width: var(--measure); }
#install .install-noagent .inline-code { background: rgba(255,255,255,0.08); border-color: var(--rule-on-dark); color: var(--ink-on-dark); }

/* ─── How (facts + policy cards) ──────────────────────── */
#how { background: var(--paper-sunk); }
.facts-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .facts-grid { grid-template-columns: 1fr; gap: 32px; } }
.facts-grid > * { min-width: 0; }
.facts-list { margin-top: 24px; border-top: var(--border-hair); }
.fact { display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding: 18px 0; border-bottom: var(--border-hair); align-items: start; }
.fact span { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.fact strong { display: block; font-size: 15.5px; color: var(--ink); }
.fact p { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.how-card { background: var(--paper-raised); border: var(--border-hair); border-radius: var(--radius-md); padding: 26px; }
.how-card + .how-card { margin-top: 14px; }
.how-card h3 { font-size: 17px; margin-bottom: 12px; }
.how-card p { color: var(--ink-muted); font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.how-card p:last-child { margin-bottom: 0; }
.how-code { display: block; margin: 14px 0; padding: 12px 14px; background: var(--paper-sunk); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; overflow-x: auto; color: var(--ink); }

/* ─── Polyglot band ───────────────────────────────────── */
/* Reuses the .evidence-* stat grid from the benchmark section below; the
   sunk background is what separates it from the hero above and the
   read-only section under it, both of which sit on plain paper. */
#polyglot { background: var(--paper-sunk); }

/* ─── Recorded clips ──────────────────────────────────── */
/* Sized by the intrinsic width/height on the element so the row does not
   reflow when the file lands; the dark poster matches the terminal frames
   either side of it, which keeps the band from flashing paper-white first. */
.demo-video { margin: 20px 0 0; }
.demo-video video {
  display: block; width: 100%; height: auto;
  border: var(--border-hair); border-radius: var(--radius-md);
  background: var(--paper-ink);
}
.demo-video figcaption {
  margin: 14px 2px 0; color: var(--ink-muted);
  font-size: var(--text-sm); line-height: 1.6; max-width: var(--measure);
}
.demo-video figcaption b { color: var(--ink); font-weight: 600; }
.demo-video figcaption a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ─── Benchmark evidence ──────────────────────────────── */
.evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--border-hair); border-radius: var(--radius-md); margin-top: 28px; background: var(--paper-raised); overflow: hidden; }
@media (max-width: 760px) { .evidence-grid { grid-template-columns: 1fr; } }
.evidence-grid > * { min-width: 0; }
.evidence-stat { padding: 26px; border-right: var(--border-hair); }
.evidence-stat:last-child { border-right: 0; }
@media (max-width: 760px) { .evidence-stat { border-right: 0; border-bottom: var(--border-hair); } .evidence-stat:last-child { border-bottom: 0; } }
.evidence-stat strong { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; display: block; color: var(--ink-strong); }
.evidence-stat span { font-size: 13.5px; line-height: 1.4; color: var(--ink-muted); display: block; margin-top: 10px; }
.evidence-honest { margin-top: 20px; padding: 18px 20px; border-left: 3px solid var(--accent); background: var(--paper-raised); border: var(--border-hair); border-left-width: 3px; border-radius: var(--radius-sm); font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.evidence-honest a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.evidence-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

/* ─── Shared "read more" link (Quality gate, Evidence) ──── */
.uth-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em;
  color: var(--accent); font-weight: 500;
}
.uth-more .arrow { transition: transform 200ms ease; }
.uth-more:hover .arrow { transform: translateX(3px); }

/* ─── Pricing (dark) ──────────────────────── */
.enterprise {
  background: var(--paper-ink);
  background-image: var(--gradient-mesh-violet);
  background-repeat: no-repeat;
  background-position: -10% 120%;
  background-size: 55% 140%;
  color: var(--ink-on-dark);
  padding: clamp(56px, 8vw, 96px) 0;
}
.enterprise .eyebrow { color: var(--accent-on-dark); }
.enterprise h2 { color: var(--ink-on-dark); }
/* .btn-ghost defaults to ink-muted text on a transparent, borderless fill
   — on a light page that reads as a subtle secondary button, but on this
   section's dark background it's dark text with no visible border, i.e.
   invisible. Override to a light-on-dark outline. .btn-primary is
   unaffected (gradient fill already reads fine on any background). */
.enterprise .btn.btn-ghost {
  background: transparent;
  color: var(--ink-on-dark);
  border-color: var(--rule-on-dark);
}
.enterprise .btn.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--ink-on-dark-muted); color: var(--ink-on-dark); }
.enterprise .title-rule { background: var(--accent-on-dark); }
.enterprise .lead { color: var(--ink-on-dark-faint); max-width: 640px; }

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
.pricing-grid > * { min-width: 0; }
.pricing-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule-on-dark);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
}
.pricing-card.featured { border-color: var(--accent-on-dark); box-shadow: var(--shadow-raised); }
.pricing-card .btn { align-self: flex-start; }
.pricing-tier {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-on-dark-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pricing-soon {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--violet-on-dark);
  border: 1px solid var(--violet-on-dark);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}
.pricing-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--ink-on-dark);
  margin-bottom: 8px;
}
.pricing-desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-on-dark-muted);
  margin-bottom: 22px;
}
.pricing-features {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.pricing-features li {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-on-dark-muted);
  position: relative;
  padding-left: 24px;
}
.pricing-features li::before {
  content: "✓"; color: var(--teal-on-dark); font-family: var(--font-mono);
  position: absolute; left: 0; top: 0;
}
.pricing-features code {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-on-dark);
  background: rgba(255,255,255,0.06); border-radius: var(--radius-xs); padding: 1px 5px;
}
.pricing-note {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-on-dark-muted);
  margin-top: 24px; text-align: center;
}

/* ─── Inline code chip (shared: How, install steps) ────── */
.inline-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--paper-sunk);
  border: var(--border-hair);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  color: var(--ink);
}

/* ─── Try it (final CTA) ──────────────────────────────── */
.try-it { background: var(--gradient-accent); padding: clamp(44px, 6vw, 64px) 0; }
.try-it .container { text-align: center; }
.try-it .eyebrow { color: rgba(255,255,255,0.85); }
.try-it h2 { color: white; max-width: 46ch; margin-left: auto; margin-right: auto; }
.try-it .title-rule { background: white; margin: 20px auto 24px; }
.try-it .lead { color: white; margin: 0 auto; max-width: 56ch; font-weight: 600; }
.try-it .btn-primary { background: white; color: var(--ink-strong); box-shadow: none; }
.try-it .btn-primary:hover { filter: none; background: white; opacity: 0.92; }
.try-it .btn-ghost { color: white; border-color: rgba(255,255,255,0.55); }
.try-it .btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: white; }
.try-it .uth-more { color: white; margin-top: 0; }
.try-it .hero-cta { justify-content: center; margin-top: 22px; }
.try-it-enterprise {
  max-width: 620px;
  margin: 32px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.3);
}
.try-it-enterprise p { color: rgba(255,255,255,0.78); margin-bottom: 8px; }
.try-it-enterprise a {
  color: white;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.try-it-enterprise .arrow { display: inline-block; transition: transform 200ms ease; }
.try-it-enterprise a:hover .arrow { transform: translateX(3px); }

/* ─── Newsletter ───────────────────────────────────────── */
.newsletter {
  background: var(--paper-ink);
  color: var(--ink-on-dark);
  position: relative;
  padding-bottom: 20px; /* extra clearance for browser validation tooltip */
}
.newsletter .container { position: relative; }
.newsletter .eyebrow { color: var(--accent-on-dark); }
.newsletter h2 { color: var(--ink-on-dark); }
.newsletter h2 em { color: var(--accent-on-dark); }
.newsletter .lead { color: var(--ink-on-dark-faint); max-width: 720px; margin-top: 24px; }
/* Modest clearance above the injected Beehiiv form; the section's extra
   padding-bottom (above) is what gives the browser's native validation
   tooltip room to render below the email input without being clipped. */
.newsletter-embed { margin-top: 20px; }

/* ─── Footer override (base footer/.footer-* rules come ───
   from site-chrome.css; index.html adds a top border since
   it follows the dark .newsletter section) ─────────────────── */
footer { border-top: 1px solid rgba(255,255,255,0.18); }

/* ─── Reveal-on-scroll utilities ──────────────────────────
   Reveal animations are JS-opt-in: only applied once <body> has
   .reveal-ready, so non-JS / pre-script paint shows content. ── */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-ready .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}
.delay-80 { transition-delay: 80ms; }
.delay-120 { transition-delay: 120ms; }
.delay-140 { transition-delay: 140ms; }
.delay-160 { transition-delay: 160ms; }

/* ─── Spacing utilities ────────────────────────────────── */
.lead-spaced { margin-top: 20px; }
.mt-24 { margin-top: 24px; }