/* Alpine World landing page.
   Values mirror the design reference (Alpine World Landing.dc.html) exactly;
   no reset is applied on purpose so boxes size the same way as in the design. */

/* ---------- Fonts: self-hosted variable faces (SIL OFL 1.1, see fonts/LICENSE-*.txt) ---------- */
@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');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-vietnamese-wght-normal.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Serif 4 with the optical-size axis (opsz 8–60), as in the design. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-ext-opsz-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --page: #FDF9F4;
  --card: #FFFFFF;
  --band: #F9EFE4;
  --tx: #2D2F34;
  --tx2: #5E646E;
  --bd: #ECEDEF;
  --bd2: #D9DDE6;
  --ember: #F67748;
  --emberh: #E8683A;
  --link: #C04A25;
  --ok: #2F7A3B;
  --okbg: #E7F2E8;
  --warnbg: #FBEBD9;
  --warn: #8A4B12;
  --shadow: 0 1px 2px rgba(45,47,52,.06), 0 24px 48px -16px rgba(45,47,52,.18);
  --serif: 'Source Serif 4', Georgia, serif;
  --mono: 'JetBrains Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #1B1A18;
    --card: #242220;
    --band: #2D2A26;
    --tx: #F2EDE6;
    --tx2: #D6CFC5;
    --bd: #34312D;
    --bd2: #45413C;
    --link: #F88A60;
    --ok: #7FC98A;
    --okbg: #22332A;
    --warnbg: #3A2E22;
    --warn: #F2C08F;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 24px 48px -16px rgba(0,0,0,.6);
  }
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--tx);
  font: 400 16px/1.6 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--tx); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }

/* Icons are inline Lucide SVGs. Flex-item icons keep the box the icon font had
   (font-size wide, font-size × line-height tall) so rows keep their height. */
.ic { flex: none; }

.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.r { text-align: right; }
.balance { text-wrap: balance; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.btn-primary { background: var(--ember); color: #2D2F34; }
.btn-primary:hover { background: var(--emberh); color: #2D2F34; }
.btn-outline { border: 1px solid var(--bd2); color: var(--tx); }
.btn-outline:hover { color: var(--tx); }
.btn-lg { height: 48px; padding: 0 28px; }
.btn-lg.btn-outline { padding: 0 24px; }
.btn-nav { height: 40px; padding: 0 20px; font-size: 15px; white-space: nowrap; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 8px 16px;
  background: var(--card);
  border-radius: 999px;
}
.skip:focus { left: 16px; z-index: 50; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--page);
  border-bottom: 1px solid var(--bd);
}
.nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tx);
  text-decoration: none;
  flex: none;
}
.brand:hover { color: var(--tx); }
.brand-logo { width: 32px; height: 32px; border-radius: 8px; display: block; flex: none; }
.brand-name { font-weight: 600; font-size: 16px; white-space: nowrap; }
.nav-links { display: flex; gap: 28px; flex: 1; font-size: 15px; }
.nav-links a { color: var(--tx2); text-decoration: none; }
.nav-links a:hover { color: var(--tx); }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.nav-signin { color: var(--tx); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-signin:hover { color: var(--link); }
.nav-spacer { flex: 1; }
.menu-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--bd2);
  background: transparent;
  color: var(--tx);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.menu-btn .ic { width: 18px; height: 18px; grid-area: 1 / 1; }
.menu-btn[aria-expanded="true"] .ic-menu,
.menu-btn:not([aria-expanded="true"]) .ic-x { display: none; }

/* Mobile menu panel: collapses with the 0fr → 1fr grid-row trick. */
.mnav {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 200ms ease, opacity 200ms ease, visibility 0s linear 200ms;
}
.mnav.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 200ms ease, opacity 200ms ease, visibility 0s;
}
.mnav.no-anim { transition: none; }
.mnav-clip { min-height: 0; overflow: hidden; }
.mnav-inner {
  border-top: 1px solid var(--bd);
  padding: 8px 24px 20px;
  display: flex;
  flex-direction: column;
}
.mnav-link,
.mnav-signin { padding: 12px 0; color: var(--tx); text-decoration: none; }
.mnav-link { border-bottom: 1px solid var(--bd); }
.mnav-signin { font-weight: 500; }
.mnav-link:hover,
.mnav-signin:hover { color: var(--tx); }
.mnav-start {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

/* wideNav / narrowNav: the design switches at a 860px window width. */
@media (min-width: 860px) {
  .nav-spacer, .menu-btn, .mnav { display: none; }
}
@media (max-width: 859.98px) {
  .nav-links, .nav-actions { display: none; }
}

/* ---------- Shared section pieces ---------- */
.wrap { max-width: 1200px; margin: 0 auto; }
.intro { max-width: 640px; }
.mock {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--link);
}
.h-section { margin: 0; font: 500 clamp(30px, 4vw, 40px)/1.15 var(--serif); }
.h-feature { margin: 0; font: 500 clamp(28px, 3.6vw, 36px)/1.2 var(--serif); text-wrap: balance; }
.lead { margin: 16px 0 0; font-size: 17px; color: var(--tx2); text-wrap: pretty; }
.chip { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; }
.chip-outline { border: 1px solid var(--bd2); }
.chip-solid { background: var(--tx); color: var(--page); }

/* Two-column feature rows */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.split-copy { max-width: 520px; }
.split-visual { min-width: 0; }
.checks {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--tx);
}
.checks li { display: flex; gap: 10px; }
.checks .ic { width: 16px; height: 25.6px; margin-top: 4px; color: var(--ok); }

/* ---------- Hero ---------- */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 112px) 24px clamp(72px, 10vw, 128px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(48px, 6vw, 80px);
  align-items: center;
}
.hero-copy { max-width: 560px; }
.hero h1 {
  margin: 0;
  font: 500 clamp(40px, 6vw, 64px)/1.08 var(--serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero-lead {
  margin: 24px 0 0;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--tx2);
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-actions .btn { white-space: nowrap; }
.hero-actions .btn-primary { padding: 0 26px; }
.hero-actions .btn-outline { gap: 8px; }
.hero-actions .btn-outline:hover { background: var(--band); }
.hero-actions .ic { width: 16px; height: 25.6px; }
.hero-meta { margin: 40px 0 0; font-size: 13px; letter-spacing: .02em; color: var(--tx2); }

.hero-visual { min-width: 0; padding: 8px; }
.hero-card { transform: rotate(2deg); overflow: hidden; }
.hc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--bd);
}
.hc-company { font-size: 13px; font-weight: 600; }
.hc-fy { font: 500 12px/1 var(--mono); color: var(--tx2); }
.hc-stats {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.hc-stat { padding: 14px; border-radius: 12px; background: var(--band); }
.hc-label { font-size: 12px; color: var(--tx2); }
.hc-value { font: 500 18px/1.4 var(--mono); font-variant-numeric: tabular-nums; margin-top: 4px; }
.hc-entries { padding: 0 20px 20px; }
.hc-title { font-size: 12px; font-weight: 600; color: var(--tx2); margin-bottom: 6px; }
.hc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--bd);
  font-size: 13px;
}
.hc-no { font: 400 12px/1 var(--mono); color: var(--tx2); }
.hc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-end { display: flex; align-items: center; gap: 8px; }
.hc-amt { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.status { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.status-posted { background: var(--tx); color: var(--page); border: 1px solid var(--tx); }
.status-draft { background: transparent; color: var(--tx2); border: 1px dashed var(--bd2); }

/* ---------- Accounting truths ---------- */
.truths { background: var(--band); padding: clamp(72px, 10vw, 120px) 24px; }
.truth-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}
.truth { background: var(--card); border: 1px solid var(--bd); border-radius: 16px; padding: 28px; }
/* The icon sat alone on a 35.62px line in the design: 6px above it, 7.62px below. */
.truth .ic { display: block; width: 22px; height: 22px; margin-top: 6px; color: var(--link); }
.truth h3 { margin: 27.62px 0 8px; font: 500 22px/1.3 var(--serif); }
.truth p { margin: 0; color: var(--tx2); text-wrap: pretty; }

/* ---------- Features ---------- */
.features {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(80px, 11vw, 128px) 24px 0;
  display: flex;
  flex-direction: column;
  gap: clamp(96px, 12vw, 128px);
}

/* Journal entry mock */
.je { overflow: hidden; }
.je-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--bd);
  flex-wrap: wrap;
}
.je-title { font-size: 14px; font-weight: 600; }
.pill-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--okbg);
  color: var(--ok);
}
.pill-ok .ic { width: 13px; height: 20.8px; }
.je-scroll { overflow-x: auto; }
.je-table { min-width: 420px; }
.je-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px 96px; gap: 12px; }
.je-th { padding: 10px 20px; font-size: 12px; font-weight: 600; color: var(--tx2); border-bottom: 1px solid var(--bd); }
.je-line { padding: 11px 20px; font-size: 13px; border-bottom: 1px solid var(--bd); align-items: center; }
.je-total { padding: 12px 20px; font-size: 13px; font-weight: 600; background: var(--band); }
.je-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.je-state { font-size: 12px; color: var(--tx2); }
.je-btns { display: flex; gap: 8px; }

/* Invoicing: the visual goes below the text while the section is one column
   (two 420px columns + gap + gutters need 945px; the design used 900px). */
#invoicing { scroll-margin-top: 88px; }
.inv-visual { order: 0; }
@media (max-width: 944.98px) {
  .inv-visual { order: 1; }
}
.inv { display: flex; flex-direction: column; gap: 16px; }
.inv-doc { padding: 24px; }
.inv-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.inv-title { font: 500 20px/1.2 var(--serif); }
.inv-no { font: 400 12px/1.6 var(--mono); color: var(--tx2); }
.inv-to { font-size: 12px; color: var(--tx2); text-align: right; }
.inv-to span { color: var(--tx); font-weight: 600; }
.inv-lines { margin-top: 20px; display: flex; flex-direction: column; }
.inv-line,
.inv-sum { display: grid; gap: 12px; padding: 9px 0; border-top: 1px solid var(--bd); font-size: 13px; }
.inv-line { grid-template-columns: minmax(0, 1fr) 52px 96px; }
.inv-sum { grid-template-columns: minmax(0, 1fr) 96px; }
.inv-vat { color: var(--tx2); font-family: var(--mono); font-size: 12px; }
.inv-tax { color: var(--tx2); }
.inv-total { padding: 10px 0; border-top-color: var(--tx); font-size: 14px; font-weight: 600; }
.inv-note {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tx2);
}
.inv-note .ic { width: 14px; height: 22.4px; }
.inv-post {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.inv-issue { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.inv-issue .ic { width: 14px; height: 22.4px; color: var(--tx2); }
.inv-entries {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 400 12px/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  flex: 1;
  min-width: 220px;
}
.inv-cr { padding-left: 16px; }
.fr { float: right; }

/* Reports */
.formats { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.chip-format { padding: 6px 14px; }
.bs { padding: 28px; }
.bs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.bs-title { font: 500 22px/1.2 var(--serif); }
.bs-sub { font-size: 12px; color: var(--tx2); margin-top: 4px; }
.bs-logo {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--bd2);
  display: grid;
  place-items: center;
  font: 500 16px/1 var(--serif);
}
.bs-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 88px;
  gap: 4px 12px;
  font-size: 13px;
}
.bs-th { font-size: 11px; font-weight: 600; color: var(--tx2); }
.bs-c { padding: 6px 0; border-top: 1px solid var(--bd); }
.bs-sub-row { padding-left: 16px; }
.bs-n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bs-strong { font-weight: 600; }
.bs-prior { color: var(--tx2); font-weight: 400; }
.bs-total { border-top-color: var(--tx); }

/* ---------- AI-assisted import ---------- */
.ai { max-width: 1200px; margin: 0 auto; padding: clamp(96px, 12vw, 128px) 24px 0; }
.ai-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
  align-items: stretch;
}
.fig {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fig-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fig-name { font-size: 12px; font-weight: 600; color: var(--tx2); display: flex; align-items: center; gap: 6px; }
.fig-name .ic { width: 14px; height: 22.4px; }
.fig-tag { font-size: 12px; color: var(--tx2); }
.pdf {
  background: var(--band);
  border-radius: 10px;
  padding: 20px;
  flex: 1;
  font: 400 12px/2 var(--mono);
  font-variant-numeric: tabular-nums;
}
.pdf-title { font: 500 14px/1.4 var(--serif); margin-bottom: 8px; }
.pdf-row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--bd2); }
.map { display: flex; flex-direction: column; }
.map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--bd);
}
.map-main { min-width: 0; }
.map-name { font-size: 13px; }
.map-code { font-family: var(--mono); font-weight: 500; margin-right: 8px; }
.map-amt { font: 400 12px/1.4 var(--mono); color: var(--tx2); font-variant-numeric: tabular-nums; }
.conf { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.conf-high { background: var(--okbg); color: var(--ok); }
.conf-medium { background: var(--warnbg); color: var(--warn); }
.conf-review { background: var(--band); color: var(--tx); }
.ai-note { margin: 20px 0 0; font: 500 18px/1.4 var(--serif); text-align: center; }

/* ---------- Currencies and languages ---------- */
.fx { max-width: 1200px; margin: 0 auto; padding: clamp(96px, 12vw, 128px) 24px 0; }
.langs { display: flex; gap: 8px; margin-top: 24px; }
.lang { font: 500 14px/1 var(--mono); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--bd2); }
.fx-card { padding: 24px; max-width: 480px; margin: 0 auto; }
.fx-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.fx-title { font: 500 20px/1.2 var(--serif); }
.fx-date { font: 400 12px/1 var(--mono); color: var(--tx2); }
.fx-list { margin-top: 16px; }
.fx-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--bd);
}
.fx-code { font: 500 14px/1 var(--mono); }
.fx-name { font-size: 13px; color: var(--tx2); }
.fx-rate { font: 500 14px/1 var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Security ---------- */
.security {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(96px, 12vw, 128px) 24px 0;
  scroll-margin-top: 64px;
}
.sec-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0;
  border-top: 1px solid var(--bd2);
}
.sec-fact { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--bd); }
/* The icon sat alone on a 33.5px line in the design: 6px above it, 7.5px below. */
.sec-fact .ic { display: block; width: 20px; height: 20px; margin-top: 6px; color: var(--tx2); }
.sec-fact h3 { margin: 21.5px 0 6px; font-size: 16px; font-weight: 600; }
.sec-fact p { margin: 0; font-size: 15px; color: var(--tx2); text-wrap: pretty; }

/* ---------- Pricing ---------- */
.pricing {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(96px, 12vw, 128px) 24px 0;
  scroll-margin-top: 64px;
}
.price-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
}
.price-card .eyebrow { margin: 0; }
.price-card h2 { margin: 12px 0 0; font: 500 clamp(32px, 4.5vw, 44px)/1.1 var(--serif); }
.price-text { margin: 16px auto 0; max-width: 420px; color: var(--tx2); text-wrap: pretty; }
.price-card .btn { margin-top: 32px; }

/* ---------- FAQ ---------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(96px, 12vw, 128px) 24px clamp(96px, 12vw, 128px);
}
.faq > h2 { margin: 0 0 32px; }
.faq-list { border-top: 1px solid var(--bd2); }
.faq-item { border-bottom: 1px solid var(--bd2); }
.faq-item h3 { margin: 0; font: inherit; }
.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--tx);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font: 500 17px/1.4 Inter, system-ui, sans-serif;
  text-align: left;
}
.faq-chev { width: 18px; height: 25.2px; color: var(--tx2); transition: transform 200ms; }
.faq-item.is-open .faq-chev { transform: rotate(180deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 200ms ease, opacity 200ms ease, visibility 0s linear 200ms;
}
.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 200ms ease, opacity 200ms ease, visibility 0s;
}
.faq-clip { min-height: 0; overflow: hidden; }
.faq-a p { margin: 0 0 20px; max-width: 640px; color: var(--tx2); text-wrap: pretty; }

/* ---------- Final call to action ---------- */
.cta { background: var(--band); padding: clamp(80px, 11vw, 120px) 24px; text-align: center; }
.cta-inner { max-width: 640px; margin: 0 auto; }
.cta h2 { margin: 0; font: 500 clamp(32px, 4.5vw, 48px)/1.1 var(--serif); text-wrap: balance; }
.cta-text { margin: 16px 0 0; font-size: 17px; color: var(--tx2); }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cta-actions .btn-outline:hover { background: var(--card); }

/* ---------- Footer ---------- */
.site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  color: var(--tx2);
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 24px; height: 24px; border-radius: 6px; display: block; flex: none; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-nav a,
.footer-nav a:hover { color: var(--tx2); }

/* ---------- 404 page ---------- */
.nf {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(96px, 14vw, 160px) 24px;
  text-align: center;
}
.nf h1 { margin: 12px 0 0; font: 500 clamp(32px, 4.5vw, 48px)/1.1 var(--serif); text-wrap: balance; }
.nf .eyebrow { margin: 0; }

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .site-header { position: static; }
}