/*
 * Milestone Ledger marketing site. Ledger & Stamp design system (see web/DESIGN.md).
 * Colour comes only from the tokens in themes.css (generated and contrast-checked in the web app);
 * nothing here declares a colour of its own. Non-colour tokens are in tokens.css.
 */

/* ---------- Reset and document typography (from web/src/design/base.css) ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem; /* keeps focused targets clear of the sticky header (WCAG 2.4.11) */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-variant-numeric: lining-nums;
  font-synthesis: none;
  overflow-wrap: break-word; /* long emails and hashes wrap instead of widening the page (WCAG 1.4.10) */
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-family: var(--font-ui); font-weight: 700; }

main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

p { margin: 0 0 var(--space-3); max-width: var(--measure); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--space-3); padding-left: 1.25rem; max-width: var(--measure); }
li + li { margin-top: var(--space-1); }

a {
  color: var(--text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

code, kbd, samp, .figures {
  font-family: var(--font-figures);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums slashed-zero;
}
code { background: var(--surface-sunken); padding: 0 0.25em; border-radius: var(--radius); }

mark { background: var(--highlight); color: var(--on-highlight); padding: 0 0.15em; }
::selection { background: var(--highlight); color: var(--on-highlight); }

hr { border: 0; border-top: var(--rule) solid var(--rule-hairline); margin: var(--space-5) 0; }

table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 700; }

button, input, select, textarea { font: inherit; color: inherit; }

/* One focus style everywhere. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
}

img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
.glyph { display: inline-block; vertical-align: -0.15em; }

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

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -10rem;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-weight: 700;
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Chrome: ribbon, header, nav, footer (from web/src/app/Layout.module.css) ---------- */
.ribbon {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-1) var(--gutter); background: var(--surface-inverse); color: var(--text-inverse);
  font-family: var(--font-figures); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  text-align: center;
}

.site-header {
  position: relative; z-index: 20;
  background: var(--surface-page);
  border-bottom: var(--rule) solid var(--rule-strong);
}
/* Sticky only where there's room for it; on small screens a sticky header would hide what has focus (WCAG 2.4.11). */
@media (min-width: 60rem) and (min-height: 40rem) { .site-header { position: sticky; top: 0; } }
.header-inner {
  max-width: var(--page-max); margin: 0 auto; padding: var(--space-2) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600;
  color: var(--text-primary); text-decoration: none; margin-right: auto; min-height: var(--target-min);
}
.brand-mark {
  font-family: var(--font-figures); font-size: var(--text-xs); letter-spacing: var(--tracking-stamp);
  color: var(--text-secondary); border: var(--rule) solid var(--border-control); padding: 0 0.4em; text-transform: uppercase;
}
.site-nav {
  display: flex; flex-wrap: wrap; gap: var(--space-1); order: 3; width: 100%;
  border-top: var(--rule) solid var(--rule-hairline); padding-top: var(--space-1); margin-bottom: calc(-1 * var(--space-2));
}
.nav-link {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--target-min); padding: var(--space-1) var(--space-3);
  color: var(--text-secondary); font-weight: 600; text-decoration: none; border-radius: var(--radius);
  border-bottom: var(--rule-thick) solid transparent;
}
.nav-link:hover { color: var(--text-primary); background: var(--surface-sunken); }
.nav-link[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--rule-strong); border-radius: var(--radius) var(--radius) 0 0; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.theme-select {
  min-height: var(--target-min); padding: 0 var(--space-3);
  border: var(--rule) solid var(--border-control); border-radius: var(--radius);
  background: var(--surface-sheet); color: var(--text-primary); font-weight: 600; cursor: pointer;
  max-width: 14rem;
}
.theme-select:hover { background: var(--surface-sunken); }

.site-main { flex: 1; width: 100%; max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-8); outline: none; }

.site-footer { border-top: var(--rule) solid var(--rule-hairline); color: var(--text-secondary); font-size: var(--text-sm); }
.footer-inner {
  max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-4);
  display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.footer-heading { font-family: var(--font-figures); font-size: var(--text-xs); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--text-secondary); }
.footer-col a:hover { color: var(--text-primary); }
.footer-line {
  max-width: var(--page-max); margin: 0 auto; padding: var(--space-4) var(--gutter);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); border-top: var(--rule) solid var(--rule-hairline);
}
.footer-line a { color: var(--text-secondary); }

/* ---------- Buttons (from Button.module.css) ---------- */
.button {
  --_bg: transparent; --_fg: var(--text-primary); --_border: var(--border-control);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--target-min); min-width: var(--target-min); padding: 0 var(--space-4);
  border: var(--rule) solid var(--_border); border-radius: var(--radius);
  background: var(--_bg); color: var(--_fg);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-md); line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
}
.button:active { transform: translateY(1px); }
.button-primary { --_bg: var(--accent); --_fg: var(--on-accent); --_border: var(--accent); }
.button-primary:hover { --_bg: var(--accent-hover); --_border: var(--accent-hover); }
.button-secondary { --_bg: var(--surface-sheet); }
.button-secondary:hover { --_bg: var(--surface-sunken); }
.button-lg { min-height: 3.25rem; padding: 0 var(--space-5); font-size: var(--text-lg); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Stamps (from Stamp.module.css): the word and the glyph carry the meaning, never the colour alone ---------- */
.stamp {
  --_ink: var(--stamp-neutral-ink); --_surface: var(--stamp-neutral-surface); --_edge: var(--stamp-neutral-edge);
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.2em 0.55em 0.18em;
  border: var(--rule-thick) solid var(--_edge); border-radius: var(--radius);
  background: var(--_surface); color: var(--_ink);
  font-family: var(--font-figures); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-stamp); text-transform: uppercase; line-height: 1.2; white-space: nowrap;
  transform: rotate(-1.5deg); vertical-align: middle;
}
.stamp-final { border-style: double; border-width: 4px; padding: 0.12em 0.5em 0.1em; }
.stamp-flat { transform: none; }
.stamp-lg { font-size: var(--text-sm); padding: 0.3em 0.7em 0.26em; }
.stamp-settled { --_ink: var(--stamp-settled-ink); --_surface: var(--stamp-settled-surface); --_edge: var(--stamp-settled-edge); }
.stamp-held { --_ink: var(--stamp-held-ink); --_surface: var(--stamp-held-surface); --_edge: var(--stamp-held-edge); }
.stamp-review { --_ink: var(--stamp-review-ink); --_surface: var(--stamp-review-surface); --_edge: var(--stamp-review-edge); }
.stamp-alert { --_ink: var(--stamp-alert-ink); --_surface: var(--stamp-alert-surface); --_edge: var(--stamp-alert-edge); }

/* ---------- Sheets and callouts (from Surface.module.css) ---------- */
.sheet {
  background: var(--surface-sheet);
  border: var(--rule) solid var(--rule-hairline);
  border-radius: var(--radius);
  box-shadow: var(--sheet-shadow);
  padding: var(--space-5);
  min-width: 0;
}
.sheet > :last-child { margin-bottom: 0; }
.sheet h3 { margin-bottom: var(--space-2); }

.callout {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--rule) solid var(--_edge, var(--rule-strong)); border-left-width: 6px; border-radius: var(--radius);
  background: var(--_surface, var(--surface-sheet)); color: var(--text-primary);
  max-width: var(--measure);
}
.callout > svg { margin-top: 0.25em; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout-title { font-weight: 700; margin: 0 0 var(--space-1); }
.callout-body { min-width: 0; }
.callout-info { --_edge: var(--callout-held-edge); --_surface: var(--callout-held-surface); }
.callout-warning { --_edge: var(--callout-review-edge); --_surface: var(--callout-review-surface); }
.callout-note { --_edge: var(--callout-neutral-edge); --_surface: var(--callout-neutral-surface); }
.callout-success { --_edge: var(--callout-settled-edge); --_surface: var(--callout-settled-surface); }

.eyebrow {
  font-family: var(--font-figures); font-size: var(--text-xs); letter-spacing: var(--tracking-stamp);
  text-transform: uppercase; color: var(--text-secondary); margin: 0 0 var(--space-2);
}
.lede { color: var(--text-secondary); font-size: var(--text-lg); max-width: var(--measure); }
.muted { color: var(--text-secondary); }
.small { font-size: var(--text-sm); }

/* ---------- Home page ---------- */
.section { padding: var(--space-7) 0; border-top: var(--rule) solid var(--rule-hairline); }
.section:first-child { border-top: 0; padding-top: 0; }
.section-head { max-width: var(--measure); margin-bottom: var(--space-5); }
.section-head h2 { margin-bottom: var(--space-2); }

.hero { display: grid; gap: var(--space-6); align-items: start; padding-bottom: var(--space-7); }
@media (min-width: 64rem) { .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); } }
.hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); margin-bottom: var(--space-4); }
.hero .lede { margin-bottom: var(--space-5); }
.hero-note { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); }

/* A ledger: № numerals, ruled rows, tabular money, a total with accounting rules (single above, double below). */
.ledger { list-style: none; margin: 0; padding: 0; max-width: none; }
.ledger-head, .ledger-row, .ledger-total {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center;
  padding: var(--space-3) 0; border-bottom: var(--rule) solid var(--rule-hairline); margin: 0;
}
.ledger-head { font-family: var(--font-figures); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); padding-top: 0; }
.ledger-no { font-family: var(--font-figures); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ledger-title { display: grid; gap: 2px; min-width: 0; }
.ledger-title strong { font-weight: 700; }
.ledger-title span { color: var(--text-secondary); font-size: var(--text-sm); }
.ledger-amount { display: grid; justify-items: end; gap: var(--space-1); text-align: right; }
.money { font-family: var(--font-figures); font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; }
.ledger-total { border-top: var(--rule) solid var(--rule-strong); border-bottom: 3px double var(--rule-strong); font-weight: 700; }
.ledger-total .ledger-no { color: var(--text-primary); }
.ledger-caption { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); font-family: var(--font-display); font-style: italic; }
.ledger-split { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); }
@media (max-width: 30rem) {
  .ledger-head, .ledger-row, .ledger-total { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .ledger-amount { grid-column: 2; justify-items: start; text-align: left; }
  .ledger-head > :last-child { display: none; }
}

/* Steps: the five stages, numbered the way tranches are. */
.steps { list-style: none; margin: 0; padding: 0; max-width: none; counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-4);
  padding: var(--space-5) 0; border-top: var(--rule) solid var(--rule-hairline); margin: 0;
}
.step:last-child { border-bottom: var(--rule) solid var(--rule-hairline); }
.step::before {
  content: "№ " counter(step);
  font-family: var(--font-figures); font-size: var(--text-sm); letter-spacing: var(--tracking-caps); color: var(--text-secondary); padding-top: 0.35em;
}
.step-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.step-head h3 { margin: 0; }
.step p:last-child { margin-bottom: 0; }
@media (min-width: 48rem) { .step { grid-template-columns: 4.5rem minmax(0, 1fr); } }

.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.sheet ul { padding-left: 1.1rem; }

.inks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); max-width: none; }
.inks li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-3); align-items: center; margin: 0; }
@media (max-width: 30rem) { .inks li { grid-template-columns: 1fr; gap: var(--space-1); } }

.cta {
  background: var(--surface-inverse); color: var(--text-inverse);
  border-radius: var(--radius); padding: var(--space-6) var(--space-5);
  display: grid; gap: var(--space-4);
}
.cta h2 { margin: 0; }
.cta p { color: var(--text-inverse); margin: 0; }
.cta .button-secondary { --_bg: var(--surface-page); --_fg: var(--text-primary); --_border: var(--surface-page); }
.cta .button-secondary:hover { --_bg: var(--surface-sunken); --_border: var(--surface-sunken); }
.cta .button-quiet { --_bg: transparent; --_fg: var(--text-inverse); --_border: var(--text-inverse); }
.cta .button-quiet:hover { --_bg: var(--text-inverse); --_fg: var(--surface-inverse); }
.cta a:not(.button) { color: var(--text-inverse); }
.cta a:focus-visible { box-shadow: 0 0 0 var(--focus-offset) var(--surface-inverse), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--text-inverse); }

/* ---------- Document pages (policies, security) ---------- */
.doc { display: grid; gap: var(--space-6); }
@media (min-width: 64rem) { .doc { grid-template-columns: minmax(0, 1fr) var(--margin-col); } }
.doc-head { grid-column: 1 / -1; display: grid; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: var(--rule) solid var(--rule-strong); }
.doc-head h1 { margin: 0; }
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; color: var(--text-secondary); font-size: var(--text-sm); }
.doc-body { min-width: 0; max-width: var(--measure); }
.doc-body h2 { margin-top: var(--space-7); padding-top: var(--space-4); border-top: var(--rule) solid var(--rule-hairline); }
.doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body h3 { margin-top: var(--space-5); }
.doc-body ul, .doc-body ol { max-width: none; }
.doc-body table { font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.doc-body caption { text-align: left; font-weight: 700; padding-bottom: var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); }
.doc-body th, .doc-body td { padding: var(--space-2) var(--space-3); border-bottom: var(--rule) solid var(--rule-hairline); vertical-align: top; }
.doc-body thead th { border-bottom: var(--rule) solid var(--rule-strong); }
.doc-body dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); }
.doc-body dt { font-weight: 700; }
.doc-body dd { margin: 0; min-width: 0; }
@media (max-width: 30rem) { .doc-body dl { grid-template-columns: 1fr; gap: 0; } .doc-body dd { margin-bottom: var(--space-2); } }
.table-wrap { overflow-x: auto; max-width: 100%; }

/* Marginalia: the table of contents sits in the margin like notes, and stays in reach on tall screens. */
.doc-toc { align-self: start; }
@media (min-width: 64rem) and (min-height: 40rem) { .doc-toc { position: sticky; top: 6rem; } }
.doc-toc h2 { font-family: var(--font-figures); font-size: var(--text-xs); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2); }
.doc-toc ol { list-style: none; padding: 0; margin: 0; border-left: var(--rule) solid var(--rule-hairline); }
.doc-toc li { margin: 0; }
.doc-toc a { display: block; padding: var(--space-2) var(--space-3); color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); min-height: var(--target-compact); }
.doc-toc a:hover { color: var(--text-primary); text-decoration: underline; }

/* 404 */
.lost { max-width: 34rem; margin: var(--space-7) auto; display: grid; gap: var(--space-4); }
.lost h1 { font-style: italic; font-weight: 400; }

/* ---------- Forced colours (Windows High Contrast): keep the boundaries the colours would have drawn ---------- */
@media (forced-colors: active) {
  :focus-visible { outline: var(--focus-width) solid Highlight; outline-offset: var(--focus-offset); box-shadow: none; }
  .stamp { border-color: CanvasText; color: CanvasText; background: Canvas; }
  .button { border-color: ButtonText; }
  .button-primary { background: ButtonText; color: ButtonFace; forced-color-adjust: none; }
  .callout, .sheet { border-color: CanvasText; }
  .cta { border: var(--rule) solid CanvasText; }
}

@media print {
  body { background: #fff; color: #000; }
  .ribbon, .site-header, .site-footer, .doc-toc, .cta { display: none !important; }
  .site-main { padding: 0; max-width: none; }
  a { color: #000; }
  .stamp { transform: none; }
}