/* ============================================================================
   Faro Bookkeeping — Design System
   ----------------------------------------------------------------------------
   Concept: "The Beacon." Deep navy ground, one warm brass light, ledger
   hairlines. Serif display type over a neutral sans body — the visual grammar
   of an established professional firm, not a SaaS landing page.

   Engineering constraints (deliberate):
   - ZERO external requests. No CDN, no webfont, no icon library, no tracker.
     This is what makes the site fast on a bad mobile connection AND lets the
     Content-Security-Policy stay locked to 'self' with no unsafe-inline.
   - No inline style attributes anywhere in the HTML, for the same CSP reason.
   - WCAG 2.2 AA: contrast verified, 44x44 touch targets, visible focus,
     reduced-motion honored, forced-colors honored.
   ========================================================================= */

/* ----------------------------------------------------------------- fonts - */
/* Self-hosted, subset WOFF2 (SIL Open Font License — see LICENSE files in
   /assets/fonts/). Self-hosting is what gives every visitor the same
   typography on every OS and browser: the previous ui-serif/system stacks
   rendered a different typeface on macOS, Windows, and Android. Three files,
   ~93 KB total, served from this origin so the CSP stays font-src 'self'
   with zero third-party requests. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-italic.woff2") format("woff2");
}

/* Metric-adjusted local fallbacks: while the WOFF2 loads (or if it ever
   fails), text renders in a system face scaled to the webfont's metrics, so
   the swap causes almost no layout shift (CLS). */
@font-face {
  font-family: "Inter-fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "SS4-fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 100.3%;
  ascent-override: 103.6%;
  descent-override: 33.5%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- tokens - */
:root {
  /* Navy — the ground */
  --navy-950: #05131F;
  --navy-900: #08203A;
  --navy-800: #0C2C4E;
  --navy-700: #123C69;
  --navy-600: #1B5289;

  /* Brass — the beacon. One accent, used sparingly. */
  --brass-300: #F0D3A0;
  --brass-400: #E3B265;
  --brass-500: #CE9235;
  --brass-600: #8F6614;   /* verified AA on white AND on --mist */

  /* Neutrals */
  --ink:        #131C26;
  --ink-soft:   #33414F;
  --slate:      #566575;   /* verified AA on white and on --mist */
  --line:       #E1E7EE;
  --line-soft:  #EDF1F5;
  --mist:       #F6F8FB;
  --paper:      #FFFFFF;

  /* On dark */
  --on-dark:        #EAF0F7;
  --on-dark-muted:  #A8BCD1;   /* AA on --navy-900 */
  --on-dark-line:   rgba(255,255,255,.13);

  /* Semantic */
  --ok:    #1D6F4F;
  --warn:  #8A5A00;
  --err:   #A62A25;

  /* Type — one hosted serif for display, one hosted sans for everything
     else, so the site is typographically identical on every device. */
  --font-display: "Source Serif 4", "SS4-fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Inter-fallback", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Rhythm */
  --shell: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(8,32,58,.06), 0 2px 8px rgba(8,32,58,.05);
  --shadow-md: 0 2px 4px rgba(8,32,58,.05), 0 12px 32px rgba(8,32,58,.09);
  --shadow-lg: 0 4px 8px rgba(8,32,58,.05), 0 24px 60px rgba(8,32,58,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
  --speed: .22s;
}

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

html {
  -webkit-text-size-adjust: 100%;   /* stop iOS Safari inflating text in landscape */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;         /* so #anchors clear the sticky header */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(18,60,105,.15);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Arrows inside running text (e.g. "More on real estate ->") must flow inline;
   the global svg{display:block} above would otherwise drop them onto their own
   line. Inside .btn/.link-arrow flex rows this is equivalent, so it is safe
   everywhere. */
svg.arrow { display: inline-block; vertical-align: -.09em; }

::selection { background: var(--brass-300); color: var(--navy-950); }

/* Headings — serif display, tight, dark navy */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--navy-900);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;   /* progressive enhancement; ignored where unsupported */
}
h1 { font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.75rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);  letter-spacing: -.018em; }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p  { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(18,60,105,.35);
  transition: color var(--speed) var(--ease),
              text-decoration-color var(--speed) var(--ease);
}
a:hover { color: var(--brass-600); text-decoration-color: currentColor; }

strong, b { font-weight: 650; color: var(--navy-900); }
small { font-size: .875rem; }

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 40px 0;
}

/* ------------------------------------------------------------ a11y utils - */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter); top: -100px;
  z-index: 999;
  background: var(--navy-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--speed) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

:focus-visible {
  outline: 3px solid var(--brass-500);
  outline-offset: 2px;
  border-radius: 3px;
}
.bg-navy :focus-visible,
.site-footer :focus-visible { outline-color: var(--brass-400); }

/* --------------------------------------------------------------- layout - */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-narrow { max-width: 760px; }

section { padding-block: clamp(56px, 7vw, 104px); }
section.pad-sm { padding-block: clamp(40px, 5vw, 64px); }

.bg-mist  { background: var(--mist); }
.bg-navy  { background: var(--navy-900); color: var(--on-dark); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-navy p, .bg-navy li { color: var(--on-dark-muted); }
.bg-navy a:not(.btn) { color: var(--brass-300); text-decoration-color: rgba(240,211,160,.4); }
.bg-navy a:not(.btn):hover { color: #fff; }
.bg-navy strong { color: #fff; }

.centered { text-align: center; }
.centered .lede, .centered .section-head { margin-inline: auto; }

/* Eyebrow — small caps label above a heading */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass-600);
  margin-bottom: 14px;
}
.bg-navy .eyebrow { color: var(--brass-400); }

.section-head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head p { color: var(--slate); font-size: 1.075rem; }
.bg-navy .section-head p { color: var(--on-dark-muted); }

.lede {
  font-size: clamp(1.075rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}
.bg-navy .lede { color: var(--on-dark-muted); }

.muted { color: var(--slate); }
.bg-navy .muted { color: var(--on-dark-muted); }

/* --------------------------------------------------------------- buttons - */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;            /* WCAG 2.2 target size, comfortably exceeded */
  padding: 12px 26px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-sans);
  font-size: .975rem;
  font-weight: 650;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--speed) var(--ease),
              color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--brass-400);
  color: var(--navy-950);
  box-shadow: 0 1px 2px rgba(5,19,31,.16), 0 8px 22px rgba(206,146,53,.28);
}
.btn-primary:hover {
  background: var(--brass-300);
  color: var(--navy-950);
  box-shadow: 0 2px 4px rgba(5,19,31,.18), 0 12px 30px rgba(206,146,53,.34);
}

.btn-solid { background: var(--navy-800); color: #fff; }
.btn-solid:hover { background: var(--navy-700); color: #fff; }

.btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,.32);
  color: #fff;
}
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.55); color: #fff; }

.btn-line {
  background: transparent;
  border-color: var(--line);
  color: var(--navy-800);
}
.btn-line:hover { border-color: var(--navy-700); background: var(--mist); color: var(--navy-900); }

.btn-sm { min-height: 42px; padding: 8px 18px; font-size: .9rem; }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.centered .btn-row { justify-content: center; }

/* Arrow that nudges on hover — small, restrained motion */
.btn .arrow { transition: transform var(--speed) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Plain text link that reads as an action */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 650;
  text-decoration: none;
  color: var(--navy-700);
}
.link-arrow:hover { color: var(--brass-600); }
.link-arrow .arrow { transition: transform var(--speed) var(--ease); }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------- header - */
.topbar {
  background: var(--navy-950);
  color: var(--on-dark-muted);
  font-size: .84rem;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}
.topbar a { color: var(--brass-300); font-weight: 600; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brass-400); flex: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(255,255,255,.96); }

.nav-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
.brand:hover { color: inherit; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--navy-900);
}
.brand-sub {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
}
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: var(--on-dark-muted); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
}
.nav-links a {
  font-size: .945rem;
  font-weight: 550;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
}
.nav-links a:hover { color: var(--navy-900); }
.nav-links a[aria-current="page"] { color: var(--navy-900); font-weight: 650; }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--brass-500);
  border-radius: 2px;
}

.nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Language toggle */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--paper);
}
.lang-switch a,
.lang-switch span {
  padding: 7px 13px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--slate);
  text-decoration: none;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.lang-switch a:hover { background: var(--mist); color: var(--navy-800); }
.lang-switch [aria-current="true"] { background: var(--navy-800); color: #fff; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  flex: none;
}
.nav-toggle:hover { background: var(--mist); }
.nav-toggle .bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle .bars span {
  position: absolute; left: 0;
  display: block; height: 2px; width: 100%;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 6px; }
.nav-toggle .bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }

  /* The mobile menu is position:fixed and lives inside .site-header.
     A backdrop-filter on an ancestor makes that ancestor the containing
     block for fixed-position descendants (CSS Filter Effects §Containing
     Block), which collapses the menu to the height of the header. Dropping
     the filter while the menu is open hands the containing block back to
     the viewport. The frosted-glass effect is invisible behind a full-screen
     opaque panel anyway, so nothing is lost. */
  body.nav-open .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--paper);
  }

  .nav-panel {
    position: fixed;
    inset: 0;
    top: var(--header-offset, 72px);
    background: var(--paper);
    padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--line);
  }
  .nav-panel.is-open { display: flex; }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links a {
    font-size: 1.15rem;
    font-family: var(--font-display);
    font-weight: 600;
    padding: 15px 0;
    border-bottom: 1px solid var(--line-soft);
    min-height: 52px;
    display: flex;
    align-items: center;
  }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--brass-600); }
  .nav-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 16px;
    margin-top: 26px;
  }
  .nav-actions .btn { width: 100%; }
  .lang-switch { align-self: flex-start; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 961px) {
  .nav-panel { display: flex !important; align-items: center; gap: clamp(16px, 2vw, 30px); flex: 1; }
}

/* ------------------------------------------------------------------ hero - */
.hero {
  position: relative;
  background: var(--navy-900);
  color: var(--on-dark);
  overflow: hidden;
  padding-block: clamp(60px, 8vw, 110px);
}
/* The beacon: a soft warm light cast from the upper right. Pure CSS. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: min(880px, 105vw);
  aspect-ratio: 1;
  background:
    conic-gradient(from 198deg at 62% 34%,
      transparent 0deg,
      rgba(240,211,160,.10) 10deg,
      rgba(240,211,160,.035) 24deg,
      transparent 34deg),
    radial-gradient(circle at 62% 34%,
      rgba(227,178,101,.30) 0%,
      rgba(227,178,101,.13) 26%,
      rgba(18,60,105,.16) 52%,
      transparent 72%);
  pointer-events: none;
}
/* Ledger hairlines — a whisper of accounting paper */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0px,
    rgba(255,255,255,.035) 1px,
    transparent 1px,
    transparent 34px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent);
}
.hero > .shell { position: relative; z-index: 1; }

/* Text links inside hero copy sit on navy but .bg-navy link colors don't
   apply (the hero paints its own background). Without this they render in
   dark navy-700 — nearly invisible. */
.hero .lede a {
  color: var(--brass-300);
  text-decoration-color: rgba(240,211,160,.45);
}
.hero .lede a:hover { color: #fff; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.hero h1 { color: #fff; margin-bottom: .38em; }
.hero .lede { color: var(--on-dark-muted); font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
.hero .btn-row { margin-top: 32px; }

/* Trust strip under the hero CTAs */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--on-dark-line);
  list-style: none;
  padding-left: 0;
}
.hero-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--on-dark-muted);
}
.hero-facts .tick { color: var(--brass-400); flex: none; }

/* The panel on the right of the hero — a "sample month" card */
.hero-panel {
  background: rgba(255,255,255,.055);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 30px);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.hero-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--on-dark-line);
}
.hero-panel-head h2 {
  font-size: 1.02rem;
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: 0;
  color: #fff;
  margin: 0;
}
.hero-panel-head .stamp {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-400);
  border: 1px solid rgba(227,178,101,.4);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .93rem;
}
.ledger-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ledger-row .label { color: var(--on-dark-muted); }
.ledger-row .value {
  font-family: var(--font-sans);
  font-size: .84rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}
.ledger-row .value.done { color: var(--brass-300); }

/* Page hero (interior pages) — same beacon, shorter */
.page-hero { padding-block: clamp(46px, 5.5vw, 76px); }
.page-hero .lede { max-width: 56ch; }

/* --------------------------------------------------------------- proof -- */
.proof-strip {
  border-block: 1px solid var(--line);
  background: var(--paper);
  padding-block: 26px;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.proof-grid > div {
  padding: 8px clamp(14px, 2vw, 26px);
  border-left: 1px solid var(--line);
}
.proof-grid > div:first-child { border-left: 0; padding-left: 0; }
.proof-k {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.proof-v { font-size: .85rem; color: var(--slate); margin-top: 3px; }
@media (max-width: 760px) {
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .proof-grid > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------- grids - */
.grid { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* display:grid is set here, not only on .grid — these two are used directly
   on .shell containers (contact, security, services), and without it every
   "two-column" section silently stacks. */
.split, .split-wide { display: grid; }
.split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,5vw,64px); align-items: start; }
.split-wide { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(32px,5vw,64px); align-items: start; }

@media (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px)  {
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split, .split-wide { grid-template-columns: 1fr; }
}
@media (max-width: 620px)  { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- cards - */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.5vw, 30px);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.card h3 { margin-bottom: .45em; }
.card p { color: var(--slate); font-size: .975rem; }
.card-hover:hover { border-color: rgba(206,146,53,.55); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bg-mist .card { background: var(--paper); }
.bg-navy .card {
  background: rgba(255,255,255,.05);
  border-color: var(--on-dark-line);
}
.bg-navy .card p { color: var(--on-dark-muted); }
/* Lists inside cards on navy would otherwise inherit dark ink — unreadable. */
.bg-navy .plan-list li { color: var(--on-dark); }
.bg-navy .plan-list .tick { color: var(--brass-400); }

/* Card with a numbered index in the corner */
.card-num { position: relative; }
.card-num .idx {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brass-600);
  display: block;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- ledger feature -- */
/* A hairline-ruled list. The signature layout element of the site. */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.ledger > li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 8px clamp(20px, 4vw, 56px);
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.ledger .l-term {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--navy-900);
  letter-spacing: -.01em;
}
.ledger .l-desc { color: var(--slate); font-size: 1rem; }
@media (max-width: 720px) {
  .ledger > li { grid-template-columns: 1fr; gap: 6px; }
}
.bg-navy .ledger, .bg-navy .ledger > li { border-color: var(--on-dark-line); }
.bg-navy .ledger .l-term { color: #fff; }
.bg-navy .ledger .l-desc { color: var(--on-dark-muted); }

/* ------------------------------------------------------------- timeline - */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline > li {
  position: relative;
  padding-left: 56px;
  padding-bottom: clamp(28px, 3.5vw, 40px);
}
.timeline > li::before {
  content: attr(data-step);
  position: absolute;
  left: 0; top: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--brass-400);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.timeline > li::after {
  content: "";
  position: absolute;
  left: 18.5px; top: 44px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--line), var(--line-soft));
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li:last-child::after { display: none; }
.timeline h3 { margin-bottom: .3em; }
.timeline p { color: var(--slate); margin-bottom: 0; }
.timeline .when {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-600);
  margin-bottom: 6px;
}
.bg-navy .timeline > li::before { background: var(--brass-400); color: var(--navy-950); }
.bg-navy .timeline > li::after { background: var(--on-dark-line); }
.bg-navy .timeline .when { color: var(--brass-400); }

/* --------------------------------------------------------------- pricing - */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* A column pairing an optional "fits you if" banner with its plan card, so
   the pair stays together in every layout — on phones each banner sits
   directly above its own plan instead of all three stacking first. */
.plan-col { display: flex; flex-direction: column; gap: 14px; }
.plan-col > .plan { flex: 1; }

.plan {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 32px);
  position: relative;
}
.plan.is-featured {
  border-color: var(--brass-500);
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}
.plan-flag {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--brass-400);
  color: var(--navy-950);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.plan-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy-900);
  margin: 0 0 4px;
}
.plan-for { font-size: .92rem; color: var(--slate); margin-bottom: 20px; min-height: 2.8em; }
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.plan-price .from { font-size: .8rem; color: var(--slate); font-weight: 600; width: 100%; margin-bottom: 2px; }
.plan-price .amt {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.plan-price .per { font-size: .92rem; color: var(--slate); font-weight: 600; }
.plan-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.plan-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  font-size: .945rem;
  color: var(--ink-soft);
  align-items: start;
}
.plan-list .tick { color: var(--brass-600); margin-top: 3px; }
.plan .btn { margin-top: auto; }

.price-note {
  margin-top: 28px;
  font-size: .93rem;
  color: var(--slate);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

/* Comparison table */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
table.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: .95rem;
}
table.compare th, table.compare td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.compare thead th {
  background: var(--mist);
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-800);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.compare tbody th {
  font-weight: 550;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: .95rem;
}
table.compare td { text-align: center; color: var(--slate); }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare .yes { color: var(--brass-600); }
table.compare .no  { color: #5F6B78; }
.table-hint { font-size: .85rem; color: var(--slate); margin-top: 10px; }
@media (min-width: 761px) { .table-hint { display: none; } }

/* ------------------------------------------------------------------ FAQ - */
.faq { border-top: 1px solid var(--line); }
.faq:not(:last-child) { margin-bottom: clamp(36px, 5vw, 56px); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.2vw, 24px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem);
  font-weight: 600;
  color: var(--navy-900);
  letter-spacing: -.01em;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:hover { color: var(--navy-700); }
.faq .chev {
  flex: none;
  margin-top: 4px;
  color: var(--brass-600);
  transition: transform var(--speed) var(--ease);
}
.faq details[open] .chev { transform: rotate(180deg); }
.faq .answer { padding: 0 0 clamp(18px, 2.2vw, 24px); max-width: 72ch; }
.faq .answer p { color: var(--slate); }
.faq .answer p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- forms - */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: .875rem;
  font-weight: 650;
  color: var(--navy-900);
  margin-bottom: 7px;
}
.field .hint { font-weight: 400; color: var(--slate); }
.field .req { color: var(--err); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  font-size: 1rem;                 /* 16px+ prevents iOS Safari zoom-on-focus */
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #CBD5E1;
  border-radius: var(--r-sm);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23566575' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 42px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(18,60,105,.14);
  outline: none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--err);
}
.field .err-msg { display: none; color: var(--err); font-size: .85rem; margin-top: 6px; font-weight: 550; }
.field .err-msg.show { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

/* Honeypot — visually and programmatically hidden from real users, bots fill it */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: .885rem;
  color: var(--slate);
  line-height: 1.55;
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--navy-700);
  flex: none;
}

.form-status {
  border-radius: var(--r-sm);
  padding: 15px 18px;
  margin-bottom: 22px;
  font-size: .95rem;
  font-weight: 550;
  display: none;
}
.form-status.show { display: block; }
.form-status.ok  { background: #E8F5EF; border: 1px solid #B4DFCB; color: #15563C; }
.form-status.bad { background: #FDECEB; border: 1px solid #F5C4C1; color: #8E241F; }

.btn[aria-disabled="true"], .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------ contact aside */
.contact-card {
  background: var(--navy-900);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 340px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(227,178,101,.22), transparent 68%);
  pointer-events: none;
}
.contact-card > * { position: relative; }
.contact-card h2, .contact-card h3 { color: #fff; }
.contact-item { padding: 14px 0; border-bottom: 1px solid var(--on-dark-line); }
.contact-item:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-item .k {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 4px;
}
.contact-item .v { font-size: 1.02rem; color: #fff; }
.contact-item a { color: var(--brass-300); font-weight: 600; }
.contact-item a:hover { color: #fff; }

/* ------------------------------------------------------------- callouts - */
.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass-500);
  background: var(--mist);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  font-size: .95rem;
  color: var(--ink-soft);
}
.callout h3 { font-size: 1.02rem; margin-bottom: .35em; }
.callout p:last-child { margin-bottom: 0; }

.review-note {
  border: 1px solid #EBD9A8;
  border-left: 3px solid var(--brass-500);
  background: #FFFBF1;
  border-radius: var(--r-sm);
  padding: 16px 20px;
  font-size: .9rem;
  color: #5C4711;
}
.review-note strong { color: #4E3C0C; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(227,178,101,.14);
  border: 1px solid rgba(227,178,101,.42);
  color: var(--brass-300);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  font-size: .82rem;
  font-weight: 650;
  margin-bottom: 20px;
}
.badge.on-light {
  background: rgba(206,146,53,.1);
  border-color: rgba(206,146,53,.35);
  color: var(--brass-600);
}
.badge .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass-400);
  flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ------------------------------------------------------------ icon tiles - */
/* Small stroke icons in brass-tinted tiles: scanning anchors for the eye.
   All inline SVG, zero requests. */
.ico-tile {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 12px;
  background: rgba(206,146,53,.10);
  border: 1px solid rgba(206,146,53,.26);
  color: var(--brass-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ico-tile svg { width: 22px; height: 22px; }
.bg-navy .ico-tile {
  background: rgba(227,178,101,.12);
  border-color: rgba(227,178,101,.32);
  color: var(--brass-400);
}
.card .ico-tile { margin-bottom: 16px; }

/* Ledger list with an icon anchor column */
.ledger-ico > li {
  grid-template-columns: 44px minmax(0, 12.6rem) minmax(0, 1fr);
  align-items: start;
}
.ledger-ico .l-term { padding-top: 9px; }
.ledger-ico .l-desc { padding-top: 10px; }
@media (max-width: 720px) {
  .ledger-ico > li { grid-template-columns: 44px minmax(0, 1fr); }
  .ledger-ico .l-desc { grid-column: 2; padding-top: 0; }
}

/* ---------------------------------------------------------- founder band - */
.founder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 60px);
  align-items: center;
}
.founder-tile {
  width: clamp(150px, 15vw, 190px);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.founder blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.28rem, 1.08rem + .9vw, 1.7rem);
  line-height: 1.38;
  letter-spacing: -.012em;
  color: var(--navy-900);
  max-width: 30em;
  text-wrap: balance;
}
.founder blockquote p { margin: 0; }
.founder .who {
  margin-top: 18px;
  font-size: .98rem;
}
.founder .who .name { font-weight: 650; color: var(--navy-900); }
.founder .who .role { color: var(--slate); }
.founder-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chiplet {
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy-800);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  white-space: nowrap;
}
.founder .link-row { margin-top: 20px; }

/* Founder identity card on the About page */
.about-id .founder-tile { margin-inline: auto; width: 128px; box-shadow: none; }
.about-id .who { margin-top: 16px; line-height: 1.45; }
.about-id .who .name { font-weight: 650; color: var(--navy-900); }
.about-id .founder-meta { justify-content: center; margin-top: 12px; }
@media (max-width: 700px) {
  .founder { grid-template-columns: 1fr; gap: 24px; }
  .founder-tile { width: 138px; }
}

/* ------------------------------------------------------- next-steps list - */
.next-card h2 { font-size: 1.35rem; margin-bottom: .6em; }
.steps-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.steps-mini li {
  position: relative;
  padding: 13px 0 13px 46px;
  border-bottom: 1px solid var(--line);
  counter-increment: step;
  font-size: .95rem;
  color: var(--ink-soft);
}
.steps-mini li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps-mini li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 11px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--brass-400);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ jump chips - */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 17px;
  border-radius: var(--r-pill);
  border: 1px solid var(--on-dark-line);
  background: rgba(255,255,255,.06);
  color: var(--on-dark);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
}
.jump a:hover {
  border-color: rgba(227,178,101,.55);
  background: rgba(227,178,101,.12);
  color: #fff;
}

/* ------------------------------------------------------- plan fit guide - */
.fit {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass-500);
  background: var(--paper);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  font-size: .95rem;
  color: var(--ink-soft);
}
.fit strong { display: block; margin-bottom: 3px; color: var(--navy-900); }
.fit p { margin: 0; color: var(--slate); }

/* ------------------------------------------------------------ utilities - */
.mt-md { margin-top: 26px; }
.mt-lg { margin-top: 40px; }
.link-row { margin-top: 30px; }
.form-note { margin-top: 16px; margin-bottom: 0; text-align: center; }
.form-note small { line-height: 1.5; display: block; }

/* Checked cell inside the comparison table */
table.compare .yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(206,146,53,.13);
  color: var(--brass-600);
}

/* --------------------------------------------------------------- prose -- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.prose h2:first-of-type { margin-top: 1.4em; }
.prose h3 { margin-top: 1.8em; font-size: 1.12rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--brass-600); }
.prose .updated { font-size: .9rem; color: var(--slate); }
.toc {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 26px;
  margin-bottom: 36px;
}
.toc h2 {
  font-size: .78rem !important;
  font-family: var(--font-sans) !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
}
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: 6px; font-size: .95rem; }

/* --------------------------------------------------------------- footer - */
.site-footer {
  background: var(--navy-950);
  color: var(--on-dark-muted);
  padding-top: clamp(48px, 6vw, 76px);
  font-size: .945rem;
}
.site-footer h2 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--brass-300); text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--on-dark-line);
}
.footer-grid nav { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-about p { color: var(--on-dark-muted); font-size: .93rem; max-width: 34ch; margin-top: 16px; }
.footer-lang { margin-top: 10px !important; }
.footer-lang a { color: var(--brass-300); font-weight: 600; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

.footer-legal {
  padding-block: 24px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  color: #93A9C0;
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-entity { font-size: .82rem; color: #93A9C0; padding-top: 28px; padding-bottom: 20px; max-width: 78ch; }

/* ------------------------------------------------------ sticky mobile CTA */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(8,32,58,.09);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-cta { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.mobile-cta .btn { flex: 1; min-height: 46px; font-size: .92rem; padding-inline: 14px; }
@media (max-width: 700px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 70px; }
  body.nav-open .mobile-cta { display: none; }
}

/* ------------------------------------------------------------ animation - */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* If JS never runs (blocked, error, crawler), content must still be visible. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------- Windows High Contrast Mode */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .card, .plan, .form-card, .table-wrap { border: 1px solid CanvasText; }
  .hero::before, .hero::after, .contact-card::before { display: none; }
  .plan.is-featured { border-width: 3px; }
}

/* ------------------------------------------------ cookie / tracking notice */
/* Injected by analytics.js, which only loads when tracking IDs are set — so
   this is never shown while the site is in its zero-third-party state. */
.cookie-notice {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  padding: 13px var(--gutter) calc(13px + env(safe-area-inset-bottom));
  background: var(--navy-900);
  border-top: 2px solid var(--brass-400);
  box-shadow: 0 -10px 30px rgba(5, 19, 31, .30);
  font-size: .9rem;
  line-height: 1.5;
}
.cookie-notice p { margin: 0; max-width: 66ch; color: var(--on-dark-muted); }
.cookie-notice a, .cookie-notice a:hover { color: var(--brass-300); }
.cookie-notice .cookie-actions { flex: 0 0 auto; }
body.has-cookie-notice { padding-bottom: 92px; }
@media (max-width: 700px) {
  .cookie-notice { bottom: calc(70px + env(safe-area-inset-bottom)); justify-content: flex-start; }
  body.has-cookie-notice { padding-bottom: 152px; }
}

/* ----------------------------------------------------------------- print - */
@media print {
  .site-header, .topbar, .mobile-cta, .cookie-notice, .site-footer, .btn, .nav-toggle { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; padding-bottom: 0; }
  .hero, .bg-navy { background: #fff !important; color: #000 !important; }
  .hero h1, .bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy p { color: #000 !important; }
  .hero::before, .hero::after { display: none; }
  section { padding-block: 18pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .faq details { open: true; }
}