/* Autovest "Ledger" theme: dark editorial, black and red.
   Fraunces (display), IBM Plex Sans (body), JetBrains Mono (labels).
   Dark is the default (these :root tokens), also without JavaScript.
   html.light-mode (set by the header toggle) overrides the color tokens. */

:root {
  color-scheme: dark;
  --bg: #0A0A0B;
  --surface: #121214;
  --footer-bg: #050505;
  --fg: #F2EFEA;
  --fg-2: #C9C4BB;
  --muted: #A8A39B;
  --faint: #8C877F;
  --rule: rgba(242, 239, 234, 0.14);
  --rule-strong: rgba(242, 239, 234, 0.22);
  --red: #C40F30;        /* brand red: fills, buttons (white text on it passes AA) */
  --red-hover: #A80C28;
  --red-text: #F0405C;   /* lighter red for text on the dark ground (passes AA) */
  --success: #3FA36B;
  --error: #F0405C;
  --error-bg: rgba(240, 64, 92, 0.08);
  --focus-ring: rgba(240, 64, 92, 0.35);
  --link-hover: #FF7088;
  --rule-soft: rgba(242, 239, 234, 0.08);
  --outline: rgba(242, 239, 234, 0.35);
  --input-bg: rgba(242, 239, 234, 0.05);
  --input-bg-focus: rgba(242, 239, 234, 0.08);
  --notice-border: rgba(240, 64, 92, 0.45);
  --toast-bg: #1A1A1D;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --watermark-opacity: 0.07;
  --watermark-v: #FF4D68;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Motion: one easing and three durations for the whole site. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-enter: 400ms;
  --dur-exit: 200ms;

  /* Sticky header height on desktop; anchors and focus scroll clear of it. */
  --header-h: 86px;
}

/* Light theme: warm paper ground, black text, the same brand red.
   Every text color here passes WCAG AA on --bg and --surface. */
html.light-mode {
  color-scheme: light;
  --bg: #FCFBF8;          /* near white, slightly warm */
  --surface: #FFFFFF;
  --footer-bg: #F3F0EA;
  --fg: #0A0A0B;
  --fg-2: #3A3733;
  --muted: #5E5952;
  --faint: #625D56;
  --rule: rgba(10, 10, 11, 0.12);
  --rule-strong: rgba(10, 10, 11, 0.22);
  --red-text: #B00D2B;   /* darker red for text on the light ground */
  --success: #1E6F4A;
  --error: #B00D2B;
  --error-bg: rgba(176, 13, 43, 0.06);
  --focus-ring: rgba(176, 13, 43, 0.25);
  --link-hover: #8E0A22;
  --rule-soft: rgba(10, 10, 11, 0.08);
  --outline: rgba(10, 10, 11, 0.35);
  --input-bg: #FFFFFF;
  --input-bg-focus: #FFFFFF;
  --notice-border: rgba(176, 13, 43, 0.40);
  --toast-bg: #FFFFFF;
  --shadow: 0 12px 32px rgba(10, 10, 11, 0.12);
  --watermark-opacity: 0.04;
  --watermark-v: #C40F30;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red-text); transition: color var(--dur-fast) ease; }
a:hover { color: var(--link-hover); }
a, button { touch-action: manipulation; }

:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 350; margin: 0; text-wrap: balance; }
p { margin: 0; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wrap-anywhere { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }  /* phone numbers: never break at a hyphen */

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 50;
  background: var(--fg); color: var(--bg); padding: 10px 16px; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow--red { color: var(--red-text); }

.accent { font-style: italic; color: var(--red-text); }

/* ---------- Icons (fragments/icons.html) ---------- */
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border: 1px solid var(--rule-strong); border-radius: 4px;
  color: var(--red-text);
}
.icon-tile .icon { width: 22px; height: 22px; }

/* ---------- Logo mark ---------- */
.logo-a { fill: var(--fg); }
.logo-v { fill: var(--red); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 2px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .icon:last-child { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--red); color: #FFFFFF; }
.btn--primary:hover { background: var(--red-hover); color: #FFFFFF; }
.btn--outline { border-color: var(--outline); color: var(--fg); background: transparent; }
.btn--outline:hover { border-color: var(--fg); color: var(--fg); }
.btn[disabled] { cursor: progress; }

/* Submit button: "Send" or, after a click, a spinner and "Sending…" (common.js). */
.btn__idle, .btn__busy { display: inline-flex; align-items: center; gap: 10px; }
.btn__busy { display: none; }
.btn--submit.is-busy .btn__idle { display: none; }
.btn--submit.is-busy .btn__busy { display: inline-flex; }
.btn--submit.is-busy .icon { animation: spin 0.9s linear infinite; transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--bg); }
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; padding-top: 22px; padding-bottom: 22px;
}
/* Navbar: the mark only; the full lockup is in the home hero. */
.brand { display: flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; }
.brand:hover { color: var(--fg); }
.brand__mark { width: 40px; height: 40px; flex: 0 0 auto; }

.site-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.site-header__toggles { display: flex; align-items: center; gap: 10px; }

/* Language toggle (same as the maa-web header button) */
.language-btn {
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--rule-strong); color: var(--fg-2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.language-btn:hover { color: var(--fg); border-color: var(--fg); }

/* Light/dark toggle (same as the maa-web header button). It shows the sun
   in dark mode (switch to light) and the moon in light mode. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: transparent; border: 1px solid var(--rule-strong); color: var(--fg-2); cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.icon-btn:hover { color: var(--fg); border-color: var(--fg); }
.icon-moon { display: none; }
.light-mode .icon-sun { display: none; }
.light-mode .icon-moon { display: inline; }

/* Touch screens: the header controls get the 44px minimum touch target. */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .language-btn { min-height: 44px; padding: 6px 16px; }
}

/* Spanish chosen earlier: hidden until translation.js runs (see fragments/head.html). */
.i18n-pending body { visibility: hidden; }

.nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 15px; }
.nav a { color: var(--fg-2); text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--red); }

/* Desktop: the header stays at the top. Phones keep it static: there it
   wraps to three rows and would cover too much of the screen. */
@media (min-width: 721px) {
  html { scroll-padding-top: calc(var(--header-h) + 48px); }  /* room for a field label too */
  .site-header { position: sticky; top: 0; z-index: 30; }
}

/* ---------- Scroll reveal (common.js adds .js-reveal) ---------- */
.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
.js-reveal .info-grid > :nth-child(odd) { transition-delay: 60ms; }

/* ---------- Hero (home) ---------- */
.hero { position: relative; overflow: hidden; }
/* Hero background lines (home): a fixed 2640x810 drawing, centered on the page
   (its x 0-1440 is the 1440 design frame; the extra width lets the lines fade out
   on wide screens). The drawing's top 86px sit behind the header, so its horizon
   (y=200) lands just above the logo lockup, as in the design canvas.
   The vanishing point is 1720px from the drawing's left edge. It sits 400px right
   of the page center, but never closer than --road-inset to the right edge: on
   narrow screens it stops there, so the middle of the road stays visible. */
.hero__lines {
  --road-inset: 20px;
  position: absolute; top: calc(-1 * var(--header-h));
  left: min(calc(50% - 1320px), calc(100% - 1720px - var(--road-inset)));
  width: 2640px; height: 810px; color: var(--fg); pointer-events: none;
}
.watermark {
  position: absolute; pointer-events: none; user-select: none; opacity: var(--watermark-opacity);
}
.watermark .logo-v { fill: var(--watermark-v); }
.hero__inner { position: relative; padding-top: 120px; padding-bottom: 96px; }
/* The full logo lockup is the page's h1: mark, AUTOVEST L.L.C., then the NMLS line.
   On small phones the mark goes above the text (see Responsive). */
.hero-brand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(20px, 3vw, 40px);
  font-weight: 400; text-wrap: initial;
}
.hero-brand__mark { width: clamp(84px, 11vw, 156px); height: auto; flex: 0 0 auto; }
.hero-brand__text { display: flex; flex-direction: column; gap: clamp(8px, 1.2vw, 16px); }
/* The font size fits "AUTOVEST L.L.C." between the content edge and the left
   red line of the road (.hero__lines), so L.L.C. never crosses the road.
   --road: the vanishing point, less a scrollbar. --beside: the mark and the gap
   when the mark is beside the text. --drop: how far the left road line moves
   left between the horizon and the text baseline. 7.9em is the width of
   "AUTOVEST L.L.C." plus that slope, in em of this font size. */
.hero-brand__name {
  --road: min(50vw + 392px, 100vw - 37px);
  --left: max(24px, 50vw - 596px);
  --beside: calc(clamp(84px, 11vw, 156px) + clamp(20px, 3vw, 40px));
  --drop: 0px;
  font-family: var(--font-display); font-weight: 500; line-height: 0.95;
  font-size: clamp(24px, calc((var(--road) - var(--left) - var(--beside) - var(--drop) - 24px) / 7.9), 128px);
  letter-spacing: 0.14em;
}
/* "L.L.C." stays on the line of the wordmark (a legal requirement), at a
   smaller size. */
.llc { white-space: nowrap; font-size: 0.32em; letter-spacing: 0.12em; }
.site-footer__brand .llc { font-size: 0.6em; }
.hero-brand__sub {
  font-family: var(--font-mono); font-size: clamp(12px, 1.5vw, 18px); line-height: 1.3;
  letter-spacing: 0.16em; color: var(--muted);
}
.hero__lead { margin-top: 36px; max-width: 620px; font-size: 20px; color: var(--fg-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }

/* How an account comes to Autovest: three steps joined by arrows, then the text.
   Below 860 px the steps stack and the arrows point down. */
.assign { margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--rule-strong); }
.assign__title { font-weight: 400; }
.path {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px;
}
.path__step {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  padding: 24px; border: 1px solid var(--rule); border-radius: 4px;
}
.path__step--us { border-color: var(--rule-strong); border-top: 2px solid var(--red); background: var(--surface); }
.path__icon { color: var(--muted); padding-top: 2px; }
.path__icon .icon { width: 24px; height: 24px; }
.path__mark { display: block; width: 28px; height: auto; }
.path__arrow {
  position: absolute; left: -42px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--red-text);
}
.path__arrow .icon { width: 28px; height: 28px; }
.path__name { font-size: 22px; line-height: 1.2; }
.path__note { margin-top: 6px; font-size: 14px; color: var(--muted); }
.assign__text { display: flex; flex-wrap: wrap; gap: 24px 80px; margin-top: 40px; }
.assign__context { flex: 1 1 280px; max-width: 46ch; font-size: 16px; color: var(--muted); }
.assign__lead {
  flex: 1 1 360px; max-width: 40ch;
  font-family: var(--font-display); font-size: 26px; font-weight: 350; line-height: 1.4;
}
@media (max-width: 860px) {
  .path { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .path__arrow { left: 50%; top: -38px; transform: translateX(-50%) rotate(90deg); }
}

/* ---------- Sections ---------- */
.split { display: flex; flex-wrap: wrap; gap: 32px 80px; }
.split__aside { flex: 1 1 280px; }
.split__main { flex: 999 1 600px; display: flex; flex-direction: column; gap: 32px; }

.about { padding-top: 128px; padding-bottom: 112px; }
.section-title { margin-top: 16px; font-size: clamp(44px, 5vw, 68px); line-height: 1; }
.lead-serif { max-width: 62ch; font-family: var(--font-display); font-size: 26px; line-height: 1.45; font-weight: 350; }
.body-muted { max-width: 68ch; color: var(--fg-2); }

/* An icon tile beside a paragraph (About Us). */
.feature { display: flex; gap: 24px; padding-top: 32px; border-top: 1px solid var(--rule); }

/* Licensing, as a row of credentials (home). */
.credentials {
  list-style: none; margin: 0; padding: 40px 0 112px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px;
  border-top: 1px solid var(--rule-strong);
}
.credential { display: flex; gap: 16px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.credential__icon { color: var(--red-text); padding-top: 2px; }
.credential__label {
  margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg);
}

.cta { border-top: 1px solid var(--rule); }
/* The button sits on the same row as the title; the sub-line goes under the title.
   Phones: title, sub-line, then the button. */
.cta__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title btn" "sub sub";
  align-items: center; column-gap: 32px;
  padding-top: 112px; padding-bottom: 112px;
}
.cta__title { grid-area: title; font-size: clamp(40px, 5vw, 72px); line-height: 1.05; }
.cta__btn { grid-area: btn; }
.cta__sub { grid-area: sub; margin-top: 20px; font-size: 20px; color: var(--fg-2); }

/* ---------- Inner page cover ---------- */
.page-cover { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.page-cover__watermark { right: clamp(-60px, 1vw, 20px); top: 50%; transform: translateY(-50%); width: clamp(240px, 30vw, 420px); height: auto; }
.page-cover__inner { position: relative; padding-top: 96px; padding-bottom: 72px; }
.page-cover__title { margin-top: 20px; font-size: clamp(48px, 6vw, 84px); line-height: 1; letter-spacing: -0.02em; }
.page-cover__rule { display: block; width: 64px; height: 3px; margin-top: 28px; background: var(--red); }
.page-cover__sub { margin-top: 28px; max-width: 60ch; font-size: 19px; color: var(--fg-2); }

.page-body { padding-top: 88px; padding-bottom: 112px; }

/* ---------- Licensing ---------- */
.disclosures__intro { max-width: 75ch; margin-bottom: 40px; color: var(--fg-2); }
.disclosures__scroll { overflow-x: auto; }
.disclosure-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--red); }
.disclosure-table th, .disclosure-table td {
  text-align: left; vertical-align: top; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--rule);
}
.disclosure-table td { color: var(--fg-2); }
.disclosure-table thead th {
  padding-top: 14px; padding-bottom: 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.disclosure-table__place { width: 20%; }
.disclosure-table tbody .disclosure-table__place { font-family: var(--font-display); font-size: 20px; font-weight: 350; color: var(--fg); }

/* ---------- Customers ---------- */
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.info-block {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: 32px; display: flex; flex-direction: column; gap: 12px;
}
.info-block--wide { grid-column: 1 / -1; }
.info-block--feature { box-shadow: inset 0 2px 0 var(--red); }
.info-block__head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.info-block__title { font-size: 28px; line-height: 1.2; }
.info-block__lead { color: var(--fg); }
.info-block__note { margin-top: 8px; font-size: 15px; }
.info-block p { color: var(--fg-2); max-width: 75ch; }
.info-block .strong { color: var(--fg); font-weight: 600; }
.info-block .btn { align-self: flex-start; margin-top: 8px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; color: var(--fg-2); }
.info-block .notice { max-width: none; }

/* RMAi certification block: Autovest mark | statement | RMAi certified mark.
   The RMAi image has a white background, so it sits on a white tile in both themes. */
.cert-block {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 24px clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 44px);
}
.cert-block__mark { width: clamp(88px, 9vw, 120px); height: auto; }
.cert-block__text { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; text-align: center; }
.cert-block__badge {
  display: block; width: clamp(140px, 14vw, 180px); padding: 8px;
  background: #FFFFFF; border-radius: 4px; border: 1px solid var(--rule);
}
.cert-block__badge img { display: block; width: 100%; height: auto; }
.notice {
  margin-top: 16px; padding: 28px 32px; border: 1px solid var(--notice-border); border-radius: 4px;
  font-size: 15px; color: var(--fg-2);
}

/* ---------- Contact ---------- */
.contact-grid { display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: flex-start; }
.contact-details { flex: 1 1 300px; display: flex; flex-direction: column; gap: 32px; }
.contact-details__item { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--rule-strong); }
.contact-details__label { display: flex; align-items: center; gap: 10px; font: inherit; color: var(--red-text); }
.contact-details__label .icon { width: 18px; height: 18px; }
.contact-details__value { font-family: var(--font-display); font-size: 22px; line-height: 1.4; color: var(--fg); }
.contact-details__value a { color: var(--fg); text-decoration: none; }
.contact-details__value a:hover { color: var(--red-text); }

.form-card {
  flex: 999 1 520px; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 22px;
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.field__req { color: var(--red-text); }
.field__optional { text-transform: none; letter-spacing: 0; }
.input, .textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 2px;
  background: var(--input-bg); border: 1px solid var(--rule-strong);
  color: var(--fg); font-family: var(--font-body); font-size: 16px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .textarea:focus {
  outline: none; border-color: var(--red-text); background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Server-side errors, and browser checks after the person leaves the field. */
.input--invalid, .input:user-invalid, .textarea:user-invalid { border-color: var(--error); }
.field__error { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; color: var(--error); }
.field__error .icon { width: 16px; height: 16px; margin-top: 3px; }
.form-card .btn { align-self: flex-start; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.error-summary {
  padding: 20px 24px; border: 1px solid var(--error); border-radius: 4px; background: var(--error-bg);
}
.error-summary__title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--error);
}
.error-summary__list { margin: 10px 0 0; padding-left: 30px; display: flex; flex-direction: column; gap: 4px; }
.error-summary__list a { color: var(--fg); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px);
  padding: 14px 18px 14px 20px; border-radius: 4px; background: var(--toast-bg);
  border: 1px solid var(--rule-strong); color: var(--fg); font-size: 15px;
  box-shadow: var(--shadow);
  animation: toast-in var(--dur-enter) var(--ease-out);
}
.toast--success { border-left: 4px solid var(--success); }
.toast--error { border-left: 4px solid var(--error); }
.toast--error .icon { color: var(--error); }
.toast__close {
  background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1;
  cursor: pointer; min-width: 32px; min-height: 32px;
}
.toast--hide { opacity: 0; transition: opacity var(--dur-exit) ease-in; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.site-footer__grid {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 48px;
  padding-top: 56px; padding-bottom: 40px;
}
.site-footer__col { display: flex; flex-direction: column; gap: 4px; }
.site-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; font-family: var(--font-display); font-size: 20px; letter-spacing: 0.16em; color: var(--fg); }
.site-footer__brand svg { width: 30px; height: 30px; }
.site-footer a { padding: 3px 0; color: var(--fg-2); text-decoration: none; }  /* 24px+ target */
.site-footer a:hover { color: var(--fg); }
.site-footer__copy {
  padding-top: 20px; padding-bottom: 32px; border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--faint);
}

/* ---------- Responsive ---------- */
/* Small phones: the mark goes above the text, so the wordmark gets the full
   width. The text is then lower, so the road line is farther left (--drop). */
@media (max-width: 480px) {
  .hero-brand__text { flex-basis: 100%; }
  .hero-brand__name { --beside: 0px; --drop: 50px; }
}
@media (max-width: 720px) {
  .hero__inner { padding-top: 72px; padding-bottom: 64px; }
  .hero__lines { top: calc(-1 * var(--header-h) - 60px); }  /* horizon above the smaller top padding */
  .assign { margin-top: 64px; }
  .assign__lead { font-size: 22px; }
  .about { padding-top: 80px; padding-bottom: 72px; }
  .feature { gap: 16px; }
  .credentials { padding-bottom: 72px; }
  .cta__inner {
    padding-top: 72px; padding-bottom: 72px;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "sub" "btn";
  }
  .cta__btn { justify-self: start; margin-top: 28px; }
  .page-cover__inner { padding-top: 64px; padding-bottom: 48px; }
  .page-body { padding-top: 56px; padding-bottom: 72px; }
  .disclosure-table thead { display: none; }
  .disclosure-table tr, .disclosure-table th, .disclosure-table td { display: block; width: auto; }
  .disclosure-table tbody .disclosure-table__place { padding-bottom: 4px; border-bottom: 0; }
  .disclosure-table td { padding-top: 0; }
  .lead-serif { font-size: 22px; }
  .info-grid { grid-template-columns: minmax(0, 1fr); }
  .info-block { padding: 24px; }
  .info-block__title { font-size: 24px; }
  .cert-block { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}