/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: Cobalt · enrichment: Tier A HTML/SVG dashboard (sample data) · nav: N9 · footer: Ft2
 * tone: technical, instrument-panel · anchor hue: cobalt 256
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
h3 { font-size: var(--text-lg); letter-spacing: -0.015em; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.skip {
  position: absolute; left: var(--space-md); top: -3rem; z-index: var(--z-sticky);
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip:focus-visible { top: var(--space-md); }

/* ---------- Buttons + links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-sm);
  border: var(--rule-w) solid transparent;
  font: 500 var(--text-base)/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--sm { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; transform: none; }
.btn.is-loading { cursor: progress; opacity: 1; }
.btn.is-loading::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid var(--color-accent-ink); border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link {
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-2);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.link:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

.chip {
  display: inline-flex; align-items: center;
  font: 500 var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-muted);
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  white-space: nowrap;
}

/* ---------- Nav (N9 edge-aligned) ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-paper-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--rule-w) solid var(--color-rule);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 4rem; gap: var(--space-md);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font: 600 var(--text-lg)/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__mark {
  width: 0.7em; height: 0.7em; border-radius: 2px;
  background: var(--color-accent);
  box-shadow: inset 0 -0.28em 0 var(--color-series-2);
}

/* ---------- Hero (H2 split diptych, title-left / dashboard-right) ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-3xl);
}
.hero__copy { display: grid; gap: var(--space-lg); align-content: start; }
.display { font-size: var(--text-display); letter-spacing: -0.035em; line-height: 1.04; max-width: 12ch; }
.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.hero__note { font-size: var(--text-sm); color: var(--color-muted); max-width: 40ch; }

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-2xl);
    align-items: center;
    padding-block: var(--space-3xl);
  }
}

/* ---------- Dashboard figure (sample data, no fake browser chrome) ---------- */
.dash {
  margin: 0;
  background: var(--color-paper);
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: var(--space-md);
  display: grid; gap: var(--space-md);
  min-width: 0;
}
@media (min-width: 40rem) { .dash { padding: var(--space-lg); gap: var(--space-lg); } }
.dash__head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-sm); flex-wrap: wrap; }
.dash__title { font: 600 var(--text-base)/1.3 var(--font-display); color: var(--color-ink); letter-spacing: -0.01em; }
.dash__meta { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-3xs); }

.kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: var(--rule-w) solid var(--color-rule);
  border-left: var(--rule-w) solid var(--color-rule);
}
@media (min-width: 40rem) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi {
  padding: var(--space-sm);
  border-right: var(--rule-w) solid var(--color-rule);
  border-bottom: var(--rule-w) solid var(--color-rule);
  display: grid; gap: var(--space-2xs);
  min-width: 0;
}
.kpi dt { font-size: var(--text-xs); color: var(--color-muted); }
.kpi dd {
  margin: 0;
  font: 500 var(--text-lg)/1.1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.delta { font: 400 var(--text-xs)/1.2 var(--font-mono); color: var(--color-muted); }
.delta--up { color: var(--color-good); }
.delta--down { color: var(--color-bad); }

.chart { min-height: 10rem; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--color-rule); stroke-width: 1; }
.chart .axis text { font: 400 10px var(--font-mono); fill: var(--color-neutral); }
.chart .s1 { fill: var(--color-series-1); }
.chart .s2 { fill: var(--color-series-2); }
.chart .s3 { fill: var(--color-series-3); }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.legend .tnum { color: var(--color-ink); font-family: var(--font-mono); }
.sw { width: 0.65rem; height: 0.65rem; border-radius: 2px; }
.sw--1 { background: var(--color-series-1); }
.sw--2 { background: var(--color-series-2); }
.sw--3 { background: var(--color-series-3); }

/* ---------- Section heads ---------- */
.section { padding-block: var(--space-3xl); }
.section-head { display: grid; gap: var(--space-md); max-width: 40rem; margin-bottom: var(--space-xl); }
.section-head h2 { font-size: var(--text-xl); }
.section-head p { color: var(--color-muted); max-width: 56ch; }

/* ---------- Workbench tour ---------- */
.tour { border-top: var(--rule-w) solid var(--color-rule); }
.shots { display: grid; gap: var(--space-3xl); }
.shot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
.shot__copy { display: grid; gap: var(--space-sm); align-content: start; max-width: 34rem; }
.shot__copy p { color: var(--color-ink-2); }
@media (min-width: 60rem) {
  .shot { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2xl); }
  .shot--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .shot--flip .shot__copy { order: 2; }
  .shot__copy { position: sticky; top: 6rem; padding-top: var(--space-md); }
}

.note {
  display: flex; gap: var(--space-sm); align-items: baseline;
  padding-top: var(--space-sm);
  border-top: var(--rule-w) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.pin {
  flex: none;
  display: inline-grid; place-items: center;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--color-accent); color: var(--color-accent-ink);
  font: 500 var(--text-xs)/1 var(--font-mono);
}

.frame {
  margin: 0;
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  min-width: 0;
}
.frame__bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-w) solid var(--color-rule);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: 500;
}

.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data th, .data td {
  padding: var(--space-sm) var(--space-md);
  text-align: right;
  border-bottom: var(--rule-w) solid var(--color-rule);
  white-space: nowrap;
}
.data th:first-child, .data td:first-child { text-align: left; white-space: normal; }
.data thead th { font: 500 var(--text-xs)/1.2 var(--font-mono); color: var(--color-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.data td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
.data td:first-child { font-family: var(--font-body); color: var(--color-ink); }
.data tbody tr:last-child td { border-bottom: 0; }
.data .neg { color: var(--color-bad); font-weight: 500; }
.data .pos { color: var(--color-good); }
.data tr.is-flag td { background: var(--color-bad-soft); }
.data tr.is-warn td { background: var(--color-warn-soft); }
.data .warn { color: var(--color-warn); font-weight: 500; }
.cell-pin { display: inline-flex; align-items: center; gap: var(--space-xs); }
.cell-pin .pin { width: 1.125rem; height: 1.125rem; font-size: 0.625rem; }
@media (max-width: 39.99rem) {
  .col-opt { display: none; }
  .data th, .data td { padding-inline: var(--space-sm); }
}

/* ROAS comparison bars */
.bars { display: grid; gap: var(--space-lg); padding: var(--space-md); }
@media (min-width: 40rem) { .bars { padding: var(--space-lg); } }
.bars__row { display: grid; gap: var(--space-xs); }
.bars__label { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink); flex-wrap: wrap; }
.bars__label .mono { font-size: var(--text-xs); color: var(--color-muted); }
.bar {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: var(--space-sm);
  font: 400 var(--text-xs)/1 var(--font-mono); color: var(--color-muted);
}
.bar__track { height: 0.625rem; background: var(--color-paper-3); border-radius: 2px; overflow: hidden; }
.bar__fill { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--color-series-3); }
.bar--real .bar__fill { background: var(--color-series-1); }
.bar__num { text-align: right; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.bar--real .bar__num { font-weight: 500; }
.bars__legend { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-xs); color: var(--color-muted); padding: 0 var(--space-md) var(--space-md); }
@media (min-width: 40rem) { .bars__legend { padding: 0 var(--space-lg) var(--space-lg); } }
.bars__legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }

.sticky-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  padding: var(--space-sm) var(--page-gutter) max(var(--space-sm), env(safe-area-inset-bottom));
  background: var(--color-paper-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: var(--rule-w) solid var(--color-rule);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.sticky-cta.is-shown { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-out), visibility 0s; }
@media (min-width: 60rem) { .sticky-cta { display: none; } }

/* ---------- Dark band: process + data safety ---------- */
.band {
  background: var(--color-graphite);
  color: var(--color-on-dark-2);
  padding-block: var(--space-3xl);
}
.band h2, .band h3 { color: var(--color-on-dark); }
.band .section-head p { color: var(--color-on-dark-2); }
.band :focus-visible { outline-color: var(--color-accent-dark); }
.band__grid { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .band__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }

.steps { display: grid; }
.steps li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-lg);
  border-top: var(--rule-w) solid var(--color-graphite-rule);
}
.steps li:last-child { border-bottom: var(--rule-w) solid var(--color-graphite-rule); }
.stage { grid-row: span 2; font: 500 var(--text-sm)/1.6 var(--font-mono); color: var(--color-accent-dark); }
.steps h3 { font-size: var(--text-lg); }
.steps p { color: var(--color-on-dark-2); max-width: 52ch; }

.trust {
  background: var(--color-graphite-2);
  border: var(--rule-w) solid var(--color-graphite-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: grid; gap: var(--space-md);
}
@media (min-width: 60rem) { .trust { margin-top: calc(var(--text-xl) * 2.4 + var(--space-xl)); } }
.trust h3 { font-size: var(--text-lg); }
.trust ul { display: grid; gap: var(--space-md); }
.trust li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-xs); font-size: var(--text-sm); }
.trust li::before { content: "—"; color: var(--color-accent-dark); font-family: var(--font-mono); }
.trust strong { color: var(--color-on-dark); font-weight: 500; }

/* ---------- ROI calculator ---------- */
.roi__grid { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .roi__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; } }
.roi__form { display: grid; gap: var(--space-lg); }
.roi__out {
  display: grid; gap: var(--space-lg);
  border-top: 2px solid var(--color-ink);
  padding-top: var(--space-lg);
}
.roi__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.roi__num { display: grid; gap: var(--space-2xs); min-width: 0; }
.roi__num .big {
  font: 500 clamp(2rem, 3vw + 1rem, 3rem)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.roi__num .cap { font-size: var(--text-sm); color: var(--color-muted); }
.roi__verdict { color: var(--color-ink-2); max-width: 52ch; }
.roi__verdict strong { color: var(--color-ink); font-weight: 600; }

/* ---------- Fields (shared by ROI + lead form) ---------- */
.field { display: grid; gap: var(--space-xs); min-width: 0; align-content: start; }
.field__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.field__label .opt { font-weight: 400; color: var(--color-muted); }
.field__hint { font-size: var(--text-xs); color: var(--color-muted); }
.input, .select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-md);
  background-color: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  font: 400 var(--text-base)/1.2 var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-neutral); }
.input:hover, .select:hover { border-color: var(--color-neutral); }
.input:focus-visible, .select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-accent); }
.input[aria-invalid="true"] { border-color: var(--color-bad); }
.input:disabled, .select:disabled { background-color: var(--color-paper-2); color: var(--color-neutral); cursor: not-allowed; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: var(--space-xl);
}
.input--num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.field__error { font-size: var(--text-sm); color: var(--color-bad); }
.field__error:empty { display: none; }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: var(--space-xs); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip-check { position: relative; display: inline-flex; }
.chip-check input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-check span {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--space-md);
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip-check:hover span { border-color: var(--color-neutral); }
.chip-check input:checked + span { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-ink); }
.chip-check input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip-check input:disabled + span { opacity: 0.55; cursor: not-allowed; }

.consent { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; cursor: pointer; }
.consent input {
  width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.consent input[aria-invalid="true"] { outline: 2px solid var(--color-bad); outline-offset: 1px; }
.consent input:disabled { cursor: not-allowed; }
.consent .req { color: var(--color-bad); }
.consent .opt { color: var(--color-muted); }
.consent a { color: var(--color-ink); text-underline-offset: 0.2em; }
.consent a:hover { color: var(--color-accent); }
.consent-wrap { display: grid; gap: var(--space-2xs); }
.consent-wrap .field__error { padding-left: calc(1.25rem + var(--space-sm)); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pricing (F3 tabular rows) ---------- */
.plans { border-top: 2px solid var(--color-ink); }
.plans__head {
  display: none;
  padding-block: var(--space-sm);
  border-bottom: var(--rule-w) solid var(--color-rule);
  font: 500 var(--text-xs)/1.2 var(--font-mono); color: var(--color-muted); letter-spacing: 0.04em; text-transform: uppercase;
}
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-w) solid var(--color-rule);
}
.plan__name { display: grid; gap: var(--space-2xs); }
.plan__name h3 { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.plan__name p { font-size: var(--text-sm); color: var(--color-muted); }
.plan__inc { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.plan__inc li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--space-xs); }
.plan__inc li::before { content: "+"; font-family: var(--font-mono); color: var(--color-accent); }
.plan__prices { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
.plan__price { display: grid; gap: var(--space-3xs); align-content: start; }
.plan__price b { font: 500 var(--text-lg)/1.1 var(--font-mono); color: var(--color-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.plan__price span { font-size: var(--text-xs); color: var(--color-muted); }
.plan--pick .plan__name .chip { color: var(--color-accent); border-color: var(--color-accent); }
@media (min-width: 60rem) {
  .plans__head, .plan { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr); gap: var(--space-xl); }
  .plans__head { display: grid; }
  .plan { align-items: baseline; }
  .plan__prices { display: contents; }
  .plan__price .lbl-m { display: none; }
}
.pricing__foot { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: center; margin-top: var(--space-xl); }
.pricing__foot p { color: var(--color-muted); font-size: var(--text-sm); max-width: 48ch; }

/* ---------- Lead magnet ---------- */
.magnet { border-top: var(--rule-w) solid var(--color-rule); }
.magnet__grid { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .magnet__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; } }
.magnet__copy { display: grid; gap: var(--space-lg); align-content: start; }
.magnet__copy h2 { font-size: var(--text-xl); }
.magnet__copy > p { color: var(--color-ink-2); max-width: 44ch; }
.checklist { display: grid; gap: var(--space-sm); }
.checklist li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-xs); }
.checklist li::before {
  content: ""; width: 0.875rem; height: 0.5rem; margin-top: 0.45rem;
  border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}

.lead-card {
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-lift);
  padding: var(--space-lg);
}
@media (min-width: 40rem) { .lead-card { padding: var(--space-xl); } }
.lead { display: grid; gap: var(--space-lg); }
.lead[hidden] { display: none; }
.lead__row { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .lead__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lead__consents { display: grid; gap: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-w) solid var(--color-rule); }
.lead__fine { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.5; }
.form-status { font-size: var(--text-sm); color: var(--color-bad); }
.form-status:empty { display: none; }
.form-status a { color: inherit; }

.lead-done { display: grid; gap: var(--space-md); }
.lead-done[hidden] { display: none; }
.lead-done h3 { display: flex; align-items: center; gap: var(--space-sm); }
.lead-done h3::before {
  content: "✓"; flex: none;
  display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--color-good); color: var(--color-accent-ink);
  font: 600 var(--text-sm)/1 var(--font-body);
}
.lead-done p { color: var(--color-ink-2); }
.lead-done strong { color: var(--color-ink); font-weight: 500; overflow-wrap: anywhere; }
.fade-in { animation: fade-in var(--dur-slow) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- FAQ ---------- */
.faq__list { border-top: 2px solid var(--color-ink); max-width: 52rem; }
.faq__item { border-bottom: var(--rule-w) solid var(--color-rule); }
.faq__item summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  padding-block: var(--space-lg);
  font: 500 var(--text-lg)/1.3 var(--font-display);
  color: var(--color-ink);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none;
  font: 400 var(--text-lg)/1 var(--font-mono); color: var(--color-muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); color: var(--color-accent); }
.faq__item summary:hover { color: var(--color-accent); }
.faq__item p { padding-bottom: var(--space-lg); max-width: 62ch; color: var(--color-ink-2); }

/* ---------- Footer (Ft2 inline single line) ---------- */
.foot { border-top: var(--rule-w) solid var(--color-rule); padding-block: var(--space-xl) var(--space-4xl); }
@media (min-width: 60rem) { .foot { padding-bottom: var(--space-xl); } }
.foot__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.foot__line .wordmark { font-size: var(--text-base); }
.foot__line a:not(.wordmark) { color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.foot__line a:not(.wordmark):hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.foot__copy { margin-left: auto; }
@media (max-width: 39.99rem) { .foot__copy { margin-left: 0; width: 100%; } }

/* ---------- Legal page ---------- */
.legal { padding-block: var(--space-2xl) var(--space-3xl); max-width: 46rem; }
.legal h1 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.legal h2 { font-size: var(--text-lg); margin: var(--space-2xl) 0 var(--space-md); letter-spacing: -0.015em; }
.legal p, .legal li { color: var(--color-ink-2); }
.legal strong { color: var(--color-ink); font-weight: 600; }
.legal > p + p, .legal > ul + p, .legal > p + ul, .legal > .legal-table + p,
.legal > p + .legal-table, .legal > p + .contact-card { margin-top: var(--space-md); }
.legal > ul { display: grid; gap: var(--space-sm); padding-left: var(--space-lg); list-style: disc; }
.legal > ul li::marker { color: var(--color-neutral); }
.legal .meta { font: 400 var(--text-xs)/1.4 var(--font-mono); color: var(--color-muted); }
.legal a:not(.btn) { color: var(--color-ink); text-underline-offset: 0.2em; text-decoration-color: var(--color-rule-2); }
.legal a:not(.btn):hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

.summary {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: var(--rule-w) solid var(--color-rule-2);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
}
.summary h2 { margin: 0 0 var(--space-md); font-size: var(--text-base); }
.summary .checklist li { color: var(--color-ink); }

.contact-card {
  margin: 0;
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
}
.contact-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-w) solid var(--color-rule);
}
.contact-card > div:last-child { border-bottom: 0; }
.contact-card dt { font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.contact-card dd { margin: 0; color: var(--color-ink); font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .contact-card > div { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; gap: var(--space-md); }
}

.legal-table { border-top: 2px solid var(--color-ink); font-size: var(--text-sm); }
.legal-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-w) solid var(--color-rule);
}
.legal-table__row span { color: var(--color-ink-2); }
.legal-table__row span:first-child { color: var(--color-ink); font-weight: 500; }
.legal-table__head { display: none; }
.legal-table__head span { font: 500 var(--text-xs)/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted) !important; }
@media (max-width: 39.99rem) {
  .legal-table:not(.legal-table--2) .legal-table__row span:nth-child(2)::before { content: "Bắt buộc: "; color: var(--color-muted); }
}
@media (min-width: 40rem) {
  .legal-table__head { display: grid; }
  .legal-table__row { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-md); }
  .legal-table--2 .legal-table__row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
.unsub { display: grid; gap: var(--space-lg); justify-items: start; margin-top: var(--space-lg); max-width: 36rem; }
.unsub[hidden] { display: none; }
.legal .form-status { color: var(--color-bad); }
/* Headings focused from script (after submit) shouldn't show a ring; keyboard focus elsewhere still does */
[tabindex="-1"]:focus { outline: none; }
.unsub h2 { margin: 0; }
.legal__basis {
  margin-top: var(--space-2xl) !important;
  padding-top: var(--space-md);
  border-top: var(--rule-w) solid var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-muted) !important;
}
.legal .draft {
  margin-block: var(--space-lg);
  padding: var(--space-md);
  border: var(--rule-w) solid var(--color-warn);
  background: var(--color-warn-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .btn.is-loading::before { animation: none; border-right-color: var(--color-accent-ink); opacity: 0.6; }
}