/* ============================================================================
   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.
   ========================================================================= */

/* ---------------------------------------------------------------- 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 */
  --font-display: ui-serif, "Iowan Old Style", "Charter", "Palatino Linotype",
                  Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", 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; }

/* 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 { color: var(--brass-300); text-decoration-color: rgba(240,211,160,.4); }
.bg-navy a: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);
    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:
    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; }

.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-mono);
  font-size: .86rem;
  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)); }
.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); }

/* 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; } }

.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 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; } }

/* ------------------------------------------------------------ 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-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-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; }
}

/* ----------------------------------------------------------------- print - */
@media print {
  .site-header, .topbar, .mobile-cta, .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; }
}