/* ───────────────────────────────────────────────────────────────────────────
   Synterra Innovations Ltd — site theme
   Tokens are the brand's own block, taken verbatim from the field guide
   (customization/synterra/brandbook.html). Style through the variables and
   never inside the media query, or a page renders one theme's text on the
   other's ground.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* brand */
  --syn-ink: #0B1723;      /* the ground */
  --syn-isoline: #122232;
  --syn-gold: #FFC75C;     /* seam, top    — on ink only */
  --syn-ember: #FF7A4D;    /* seam, bottom — on ink only */
  --syn-copper: #C2410C;   /* the accent that works on paper */
  --syn-seam: linear-gradient(160deg, #FFC75C, #FF7A4D);
  --seam-edge: #C2410C;   /* the 3px edge, on a light ground */

  /* surfaces — light */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #EDF0F3;
  --border: #DCE2E8;
  --border-strong: #C3CCD6;
  --text: #101C28;
  --text-muted: #5C6B7A;   /* 5.5:1 — body copy */
  --text-faint: #7A8896;   /* 3.6:1 — labels only */
  --accent: #C2410C;
  --on-accent: #FFFFFF;

  /* semantic — separate from the accent, on purpose */
  --ok: #1F7A56;
  --warn: #8A5D10;
  --danger: #A3301A;
  --ok-wash: rgb(31 122 86 / .15);
  --danger-wash: rgb(163 48 26 / .15);

  /* data series — cool to warm, so the accent lands on the series that matters */
  --series-1: #1E4C6B;
  --series-2: #4E7E8C;
  --series-3: #7A8896;
  --series-4: #B4780F;
  --series-5: #C2410C;

  /* type */
  --font-display: "Jost", "Avenir Next", Avenir, "Century Gothic", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* shape */
  --radius-card: 10px;
  --radius-control: 7px;
  --shadow: 0 1px 2px rgb(11 23 35 / .06), 0 8px 24px -12px rgb(11 23 35 / .18);

  --measure: 68ch;
  --page: 1140px;
}

/* dark, when the OS asks and nothing overrides it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080F17;
    --surface: #0E1B27;
    --surface-2: #14232F;
    --border: #1E2F3D;
    --border-strong: #2C4152;
    --text: #E8EDF2;
    --text-muted: #9BABB9;
    --text-faint: #7A8896;
    --accent: #FF7A4D;      /* 7.0:1 on ink */
    --on-accent: #0B1723;
    --ok: #7FD4A8;
    --warn: #FFC75C;
    --danger: #FF8A6B;
    --ok-wash: rgb(127 212 168 / .16);
    --danger-wash: rgb(255 138 107 / .16);
    --series-1: #6FA8CC;
    --series-2: #8FC3C9;
    --series-3: #9BABB9;
    --series-4: #FFC75C;
    --series-5: #FF7A4D;
    --seam-edge: linear-gradient(160deg, #FFC75C, #FF7A4D);
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
  }
}

/* dark, when something explicitly asks for it */
:root[data-theme="dark"] {
  --bg: #080F17;
  --surface: #0E1B27;
  --surface-2: #14232F;
  --border: #1E2F3D;
  --border-strong: #2C4152;
  --text: #E8EDF2;
  --text-muted: #9BABB9;
  --text-faint: #7A8896;
  --accent: #FF7A4D;
  --on-accent: #0B1723;
  --ok: #7FD4A8;
  --warn: #FFC75C;
  --danger: #FF8A6B;
  --ok-wash: rgb(127 212 168 / .16);
  --danger-wash: rgb(255 138 107 / .16);
  --series-1: #6FA8CC;
  --series-2: #8FC3C9;
  --series-3: #9BABB9;
  --series-4: #FFC75C;
  --series-5: #FF7A4D;
  --seam-edge: linear-gradient(160deg, #FFC75C, #FF7A4D);
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
}

/* A panel that is ink on every ground. The masthead, the footer, anything meant
   to be taken away. Inside it the accent is the seam's own colours, which are
   only legible here — gold is 1.55:1 on white and must never leave this scope. */
.on-ink {
  --bg: #0B1723;
  --surface: #0E1B27;
  --surface-2: #14232F;
  --border: #1E2F3D;
  --border-strong: #2C4152;
  --text: #E8EDF2;
  --text-muted: #9BABB9;
  --text-faint: #7A8896;
  --accent: #FF7A4D;
  --accent-quiet: #FFC75C;
  --seam-edge: linear-gradient(160deg, #FFC75C, #FF7A4D);
  --on-accent: #0B1723;
  --ok: #7FD4A8;
  --warn: #FFC75C;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
  background: var(--syn-ink);
  color: var(--text);
}

/* ────────────────────────────────────────────────────────────────── base */

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

[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);   /* explicit: a transparent body borrows its host's ground */
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem); letter-spacing: -.015em; line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); line-height: 1.2; }
h3 { font-size: 1.075rem; letter-spacing: .005em; }
h4 { font-size: .95rem; letter-spacing: .005em; }

p { margin: 0; max-width: var(--measure); }
ul, ol { margin: 0; padding-left: 1.15em; max-width: var(--measure); }
li + li { margin-top: .3em; }

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

code, kbd, samp { font-family: var(--font-mono); font-size: .875em; }
strong { font-weight: 600; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.muted { color: var(--text-muted); }
.tabular { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .688rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--text);
  padding: 10px 16px; border-radius: var(--radius-control); z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

/* ─────────────────────────────────────────────────────────────── layout */

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 28px; }

section { padding: 84px 0; scroll-margin-top: 76px; }
section + section { border-top: 1px solid var(--border); }
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; max-width: var(--measure); }

.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }

@media (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  section { padding: 60px 0; }
  .wrap { padding: 0 20px; }
}

/* ───────────────────────────────────────────────────────────── masthead */

.masthead {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid #1E2F3D;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  background: rgb(11 23 35 / .88);
}
/* The seam, kept thin: 3px against the header's edge is its whole appearance
   in the chrome. Its power comes from how little of it there is. */
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--syn-seam); opacity: .9;
}

.nav { display: flex; align-items: center; gap: 28px; height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #E8EDF2; }
.brand img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.brand-name {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
  letter-spacing: .01em; line-height: 1;
}
.brand-name b { font-weight: 500; color: var(--syn-gold); }

.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }

/* Scoped to the top-level link rather than every `a` under .nav-links: the
   sign-in button and the dropdown items live in here too, and a descendant
   selector beats their own single-class rules on specificity. */
.nav-item { position: relative; display: flex; align-items: center; height: 68px; }
button.btn-nav { font-family: var(--font-body); cursor: pointer; }
.nav-item > a {
  font-size: .9rem; color: #9BABB9; text-decoration: none;
  padding: 7px 12px; border-radius: var(--radius-control);
  transition: color .15s, background-color .15s;
}
.nav-item:hover > a, .nav-item:focus-within > a { color: #E8EDF2; background: #14232F; }
.nav-item > a[aria-current="page"] { color: #E8EDF2; }
.nav-item > a[aria-current="page"]::after {
  content: ""; display: block; height: 1px; margin-top: 4px;
  background: var(--syn-seam);
}

/* ── the dropdown ──────────────────────────────────────────────────────────
   Opens on hover and on keyboard focus, because a menu that only answers to a
   pointer is a menu half the people cannot reach. The ::before is a
   transparent bridge across the gap under the header - without it the panel
   closes while the cursor is still travelling towards it. */
.nav-menu {
  position: absolute; top: calc(100% + 3px); left: 0;
  min-width: 236px; padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
  background: #0E1B27; border: 1px solid #1E2F3D;
  border-radius: var(--radius-control);
  box-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 34px -14px rgb(0 0 0 / .75);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index: 60;
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu,
.nav-item[data-open] > .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* On a device with no hover the menu is driven entirely by [data-open], set on
   tap. The :hover rule is explicitly undone here: mobile browsers synthesise a
   lingering hover on the last-tapped element, which would hold a menu open
   that the toggle believes it has closed. */
@media (hover: none) {
  .nav-item:hover > .nav-menu {
    opacity: 0; visibility: hidden; transform: translateY(-5px);
  }
  .nav-item[data-open] > .nav-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
}

.nav-menu a {
  display: flex; align-items: center; gap: 10px;
  font-size: .875rem; color: #9BABB9; text-decoration: none;
  padding: 8px 12px; border-radius: 5px; white-space: nowrap;
  transition: color .12s, background-color .12s;
}
.nav-menu a svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.nav-menu a:hover svg { opacity: 1; }

/* The sign-in menu hangs off the right-hand end of the bar, so it opens
   leftwards rather than running off the edge of the viewport. */
.nav-menu-right { left: auto; right: 0; }
.nav-menu a:hover, .nav-menu a:focus-visible { color: #E8EDF2; background: #14232F; }

@media (prefers-reduced-motion: reduce) { .nav-menu { transition: none; } }

.nav-tail { display: flex; align-items: center; gap: 10px; margin-left: 12px; }

.theme-toggle {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  background: transparent; color: #9BABB9;
  border: 1px solid #1E2F3D; border-radius: var(--radius-control);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: #E8EDF2; border-color: #2C4152; }
.theme-toggle svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .icon-sun, .icon-moon { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-moon { display: block; }
}

/* Client sign-in. Deliberately a quiet outline rather than a filled accent:
   the one primary button on a page belongs to the thing we want a stranger to
   do, and an existing client looking for the door does not need persuading.
   It also keeps the masthead to a single warm element - the seam under it. */
.btn-nav {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: .875rem; font-weight: 500;
  color: #E8EDF2; text-decoration: none; white-space: nowrap;
  padding: 7px 15px; border-radius: var(--radius-control);
  border: 1px solid #2C4152; background: transparent;
  transition: border-color .15s, background-color .15s;
}
.nav-item:hover > .btn-nav, .nav-item:focus-within > .btn-nav { border-color: #3D586E; background: #14232F; }
.btn-nav:hover { border-color: #3D586E; background: #14232F; }
.btn-nav svg { width: 13px; height: 13px; opacity: .75; }
.btn-nav .chev { width: 11px; height: 11px; opacity: .6; margin-left: 1px; }
.nav-item:hover > .btn-nav .chev, .nav-item:focus-within > .btn-nav .chev { opacity: .9; }

.nav-toggle { display: none; }

/* The section chevron belongs to the collapsed menu only; the bar opens on
   hover and on tap, and a row of chevrons across the header is noise. */
.nav-expand { display: none; }

@media (max-width: 880px) {
  .nav-toggle {
    display: inline-grid; place-items: center; width: 34px; height: 34px;
    margin-left: auto; background: transparent; color: #9BABB9;
    border: 1px solid #1E2F3D; border-radius: var(--radius-control); cursor: pointer;
  }
  .nav-toggle svg { width: 17px; height: 17px; }
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--syn-ink); border-bottom: 1px solid #1E2F3D;
    padding: 8px 20px 16px;
  }
  .nav-links[hidden] { display: none; }
  /* The collapsed menu is an accordion, not a list of everything. Expanded by
     default it ran to 1210px of 24 links on a 667px screen - two full screens
     of scrolling to reach the last item, with the sign-in button below all of
     it. Collapsed, the whole thing is four rows and fits without scrolling. */
  .nav-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; height: auto;
  }
  .nav-item > a { display: flex; padding: 11px 8px; }
  .nav-item > a[aria-current="page"]::after { display: none; }

  .nav-expand {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; padding: 0;
    background: transparent; color: #7A8896;
    border: 0; border-radius: var(--radius-control); cursor: pointer;
    transition: color .15s, transform .18s;
  }
  .nav-expand svg { width: 15px; height: 15px; }
  .nav-expand:hover { color: #E8EDF2; }
  .nav-item[data-open] > .nav-expand { color: #E8EDF2; transform: rotate(180deg); }

  .nav-menu {
    grid-column: 1 / -1;
    position: static; transform: none; display: none;
    background: transparent; border: 0; box-shadow: none;
    min-width: 0; padding: 2px 0 10px; margin: 0 0 0 10px;
    border-left: 1px solid #1E2F3D;
  }
  .nav-item[data-open] > .nav-menu { display: flex; opacity: 1; visibility: visible; }
  .nav-menu::before { display: none; }
  .nav-menu a { padding: 8px 14px; font-size: .82rem; }

  /* In landscape the panel is taller than the screen, so it scrolls itself
     rather than running off the bottom with no way back. */
  .nav-links {
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-tail { justify-content: space-between; width: 100%; margin-top: 10px;
              padding-top: 12px; border-top: 1px solid #1E2F3D; }
  .btn-nav { flex: 1; justify-content: center; padding: 11px 15px; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-tail { margin-left: 0; }
}

/* ───────────────────────────────────────────────── touch tap targets

   A pointer that is a fingertip needs roughly 44px of anything to hit it
   reliably; several controls here were drawn for a mouse and came out at 34.
   Keyed off (pointer: coarse) rather than a width, because a 1024px tablet is
   still a fingertip and a 400px desktop window is still a mouse. */

@media (pointer: coarse) {
  .nav-toggle, .theme-toggle { width: 44px; height: 44px; }
  .nav-toggle svg { width: 20px; height: 20px; }
  .theme-toggle svg { width: 18px; height: 18px; }

  .nav-item > a,
  .nav-menu a,
  .footer-links a { min-height: 44px; display: flex; align-items: center; }

  .btn-nav { min-height: 44px; }
  .rate-tabs button { min-height: 44px; }
  summary { padding: 18px 0; }
}

/* ───────────────────────────────────────────────────────────────── hero */

.hero { padding: 108px 0 96px; position: relative; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lede { font-size: 1.125rem; color: var(--text-muted); margin-top: 20px; max-width: 54ch; }
.hero .actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero-sub { padding: 56px 0 52px; }
.hero-sub h1 { max-width: 20ch; }
.hero-sub .lede { font-size: 1.05rem; color: var(--text-muted); margin-top: 16px; max-width: 60ch; }

@media (max-width: 900px) { .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; } .hero { padding: 72px 0 68px; } }

/* ────────────────────────────────────────────────────────────── controls */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: .9rem; font-weight: 500;
  padding: 10px 18px; border-radius: var(--radius-control);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .688rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted); background: var(--surface);
  white-space: nowrap;
}
.pill-seam { border: 0; background: var(--syn-seam); color: var(--syn-ink); }
.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ok); }

/* ─────────────────────────────────────────────────────────────── cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.card h3 { margin-bottom: 2px; }
.card p { font-size: .938rem; color: var(--text-muted); }
.card .eyebrow { margin-bottom: 4px; }

/* One warm edge, 3px, on the cards that lead. Drawn as an inset rule rather than
   a border-image, which would paint the gradient around all four sides and turn a
   seam into a frame. Copper on paper, the gradient on ink. */
.card-lead { position: relative; padding-left: 27px; }
.card-lead::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--seam-edge);
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.numbered { counter-reset: step; }
.numbered .card::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .688rem; letter-spacing: .14em;
  color: var(--accent);
}

/* ──────────────────────────────────────────────────────── the step flow

   Four stages of one relationship. The rule that joins them is the border
   token, not the seam: the seam marks the thing that matters, and here the
   thing that matters is the stages, not the line between them. */

.steps {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  counter-reset: stage;
}
.steps > li {
  position: relative; margin: 0;
  padding: 40px 26px 26px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.steps > li + li { padding-left: 26px; }
.steps > li + li::after {
  content: ""; position: absolute; left: 0; top: 46px; bottom: 26px;
  width: 1px; background: var(--border);
}
.steps > li::before {
  counter-increment: stage; content: counter(stage, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: .688rem; font-weight: 500;
  letter-spacing: .14em; color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px; padding: 3px 10px;
}
.steps > li + li::before { left: 26px; }
.steps h3 { font-size: 1rem; }
.steps p:not(.eyebrow) { font-size: .938rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 0; }
  .steps > li:nth-child(odd) { padding-left: 0; }
  .steps > li:nth-child(odd)::before { left: 0; }
  .steps > li:nth-child(odd)::after { display: none; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps > li, .steps > li + li { padding-left: 0; padding-right: 0; }
  .steps > li::before, .steps > li + li::before { left: 0; }
  .steps > li + li::after { display: none; }
  .steps > li + li { border-top: 1px solid var(--border); }
}

/* ───────────────────────────────────────────────────────── the board

   Seats, not headshots. Each card leads with the office because the office is
   what carries the responsibility; the person filling it is named beneath. */

.board {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.board > li { margin: 0; }
/* Two classes, because `.card p` lands first and would otherwise win on
   specificity - the name has to read louder than the card body, not quieter. */
.board .board-name {
  font-family: var(--font-display); font-size: 1.075rem; font-weight: 500;
  color: var(--text); margin: 2px 0 0;
}
.board .board-for {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
  margin: 0 0 8px;
}
/* A seat whose holder is not yet published: the line is a placeholder, and it
   should look like one rather than like a name. */
.board .board-name .tbd { font-family: var(--font-display); font-size: 1rem; }

@media (max-width: 900px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .board { grid-template-columns: minmax(0, 1fr); } }

/* ────────────────────────────────────────────────── partner product marks

   Someone else's logo is not ours to restyle, so each one sits on its own
   near-white tile rather than being recoloured to suit the ground it lands on.
   Both marks are drawn for white; giving them white is the faithful option and
   it happens to be the one that survives a theme switch. The name beside the
   mark is set in our own type and is a caption, not a reconstruction of their
   wordmark. */

.partner-strip { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.partner-strip .eyebrow { margin-bottom: 8px; }

.partners {
  display: flex; flex-wrap: wrap; gap: 12px;
  list-style: none; margin: 0; padding: 0; max-width: none;
}
.partners > li { margin: 0; }
.partner {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
a.partner:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.partner-tile {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radius-control);
  background: #FFFFFF;                 /* the ground both marks are drawn for */
  border: 1px solid var(--border);
}
.partner-tile img { width: 36px; height: 36px; display: block; border-radius: 6px; }
.partner-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.partner-name {
  font-family: var(--font-display); font-size: 1rem; font-weight: 500;
  letter-spacing: .01em; color: var(--text);
}
.partner-role {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
}

@media (max-width: 480px) {
  .partners > li, .partner { width: 100%; }
}

/* ──────────────────────────────────────────────────────── legal document

   A document, not a marketing page: one column at reading measure, numbered
   clauses that can be cited, and no accent anywhere except the rule beside a
   clause number. Nothing here should look persuasive. */

.doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .doc { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.doc-rail { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; font-size: .875rem; }
.doc-rail .rail-head {
  font-family: var(--font-mono); font-size: .688rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); padding: 0 10px 8px;
}
.doc-rail a {
  color: var(--text-muted); text-decoration: none; padding: 5px 10px;
  border-left: 2px solid transparent; transition: color .15s, border-color .15s;
}
.doc-rail a:hover { color: var(--text); border-left-color: var(--border-strong); }
@media (max-width: 900px) { .doc-rail { position: static; } }

.clauses { list-style: none; margin: 0; padding: 0; max-width: none; counter-reset: clause; }
.clauses > li { margin: 0; padding: 0 0 34px 46px; position: relative; scroll-margin-top: 92px; }
.clauses > li:last-child { padding-bottom: 0; }
.clauses > li::before {
  counter-increment: clause; content: counter(clause);
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-mono); font-size: .82rem; color: var(--accent);
  width: 30px; text-align: right;
}
.clauses h2 { font-size: 1.15rem; margin-bottom: 12px; }
.clauses p { font-size: .95rem; color: var(--text-muted); }
.clauses p + p { margin-top: 11px; }
.clauses ul { margin-top: 11px; font-size: .95rem; color: var(--text-muted); }

/* A notice that the document itself is not yet settled. Uses the warn token,
   which is separate from the accent on purpose - this is a state, not a brand
   flourish, and it comes off the page in one edit. */
.doc-review {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--border-strong); border-left: 3px solid var(--warn);
  border-radius: var(--radius-card); background: var(--surface-2);
  padding: 16px 20px; margin-bottom: 40px;
}
.doc-review p { font-size: .875rem; color: var(--text-muted); }
.doc-review strong { color: var(--text); }

.doc-meta {
  font-family: var(--font-mono); font-size: .688rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
  padding-top: 26px; margin-top: 34px; border-top: 1px solid var(--border);
}

/* ────────────────────────────────────────────────────────── the rate board

   A dealing board: one fixed pair of prices per currency, held for the day.
   Reuses .table-wrap/table, so inside .on-ink it takes the ink tokens without
   a second set of rules. The seam is the panel's top edge and nothing else -
   a column of gold numerals would make a fifth of the hero warm. */

.rate-board {
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.rate-board::before { content: ""; display: block; height: 3px; background: var(--seam-edge); }

.rate-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 20px 22px 16px;
}
.rate-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; margin-top: 5px; }

/* Tabs as an underlined bar rather than filled pills: the seam is a 2px rule
   under the live board and nothing else, which is the whole of the accent this
   panel gets beyond its top edge. */
.rate-tabs {
  display: flex; gap: 24px; padding: 0 22px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.rate-tabs::-webkit-scrollbar { display: none; }
.rate-tabs button {
  position: relative; flex: none;
  font-family: var(--font-body); font-size: .85rem; font-weight: 500;
  color: var(--text-muted); background: none; border: 0;
  padding: 13px 0 12px; cursor: pointer; white-space: nowrap;
  transition: color .14s;
}
.rate-tabs button:hover { color: var(--text); }
.rate-tabs button[aria-selected="true"] { color: var(--text); }
.rate-tabs button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--seam-edge);
}
.rate-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.rate-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-card); }
.rate-blurb {
  padding: 14px 22px 0; margin: 0; max-width: none;
  font-size: .82rem; color: var(--text-faint);
}

.rate-board .table-wrap { border: 0; border-radius: 0; border-top: 1px solid var(--border); background: transparent; }
.rate-board table { min-width: 480px; }
.rate-board td.tabular { font-size: 1rem; color: var(--text); }
.rate-board tbody th { font-family: var(--font-mono); font-size: .875rem; font-weight: 500; color: var(--text); }

/* The header says what the desk does; the line under it says what that means
   for the reader, who is on the other side of every one of these trades. */
.rate-sub {
  display: block; font-family: var(--font-body); font-size: .688rem;
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--text-faint); margin-top: 3px;
}

.rate-note {
  padding: 15px 22px 18px; border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: .82rem; color: var(--text-muted);
}
.rate-note p { max-width: none; }
.rate-note p + p { margin-top: 7px; }

/* ── the tick ──────────────────────────────────────────────────────────────
   A price that moved says so and then gets out of the way. Semantic colour,
   not the accent: green and red here mean up and down, and the brand's one
   accent stays reserved for the seam. The global prefers-reduced-motion rule
   collapses these animations, which is the correct behaviour - the number has
   already changed, and the flash was only ever the announcement. */

@keyframes tick-up {
  from { background-color: var(--ok-wash); color: var(--ok); }
  to   { background-color: transparent;    color: var(--text); }
}
@keyframes tick-down {
  from { background-color: var(--danger-wash); color: var(--danger); }
  to   { background-color: transparent;        color: var(--text); }
}
.rate-board td.tick-up   { animation: tick-up   .9s ease-out; }
.rate-board td.tick-down { animation: tick-down .9s ease-out; }

.pill-warn { color: var(--warn); border-color: var(--border-strong); background: transparent; }

/* Live market data, but "live" is not "dealable" - this is the ok token, not
   the accent, because it reports a state rather than drawing the eye. */
.pill-live { color: var(--ok); border-color: var(--border-strong); background: transparent; }
.pill-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--ok); flex: none;
}


/* ──────────────────────────────── the rate board on a narrow screen

   Five columns do not fit a phone, and a table that scrolls sideways hides
   the two numbers the whole board exists to show. Below 560px each pair
   becomes its own block with the column headings carried down as labels, so
   nothing is off-screen and nothing has to be scrolled to be read.

   The cells keep their data-cell hooks, so rates.js writes to exactly the same
   elements either way - the layout changes, the feed does not know. */

@media (max-width: 560px) {
  .rate-board table { min-width: 0; }

  /* Wrap the tabs rather than scrolling them. A scrolling tab bar with the
     third tab off the edge needs a swipe nobody is told about; wrapped, all
     three are simply there. */
  .rate-tabs { flex-wrap: wrap; gap: 0 20px; padding: 0 18px; }
  .rate-tabs button { padding: 11px 0 10px; }

  /* Headings move onto each cell; hide the row without hiding it from
     assistive technology, which still reads the association. */
  .rate-board thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  .rate-board tbody tr {
    display: block;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
  }
  .rate-board tbody tr:last-child { border-bottom: 0; }

  .rate-board tbody th {
    display: block; padding: 0 0 8px; border: 0;
    font-size: .95rem; letter-spacing: .04em;
  }
  .rate-board tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 4px 0; border: 0;
  }
  .rate-board tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: .625rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-faint); flex: none;
  }
  .rate-board td.tabular { font-size: .95rem; }

  /* The tick flash reads as a band across the row at this size. */
  .rate-board td.tick-up, .rate-board td.tick-down {
    margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 4px;
  }
}

/* ─────────────────────────────────────────────────── the Post.Cash cheque

   A paper instrument, drawn with the surface tokens rather than a fixed white,
   so it belongs on both grounds. The one warm element is the seam at the top
   edge and the paid stamp - a cheque that has been redeemed is the one thing
   on the page worth landing on. */

.cheque {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-family: var(--font-mono);
}
.cheque::before { content: ""; display: block; height: 3px; background: var(--seam-edge); }

.cheque-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
}
.cheque-brand {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .08em; color: var(--text);
}
.cheque-brand span { color: var(--accent); }
.cheque-no { font-size: .688rem; letter-spacing: .12em; color: var(--text-faint); }

.cheque-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.cheque-line { display: flex; flex-direction: column; gap: 3px; }
.cheque-label {
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
}
.cheque-value {
  font-size: .875rem; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding-bottom: 5px;
}
.cheque-amount { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cheque-figures {
  font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; color: var(--text);
}
.cheque-box {
  font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  padding: 6px 12px; white-space: nowrap;
}

.cheque-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.cheque-auth { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.cheque-paid {
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); border: 2px solid var(--accent); border-radius: 4px;
  padding: 3px 12px; transform: rotate(-6deg); opacity: .9;
}

/* ───────────────────────────────────────────────────────────── the seam */

.seam-rule { height: 3px; background: var(--syn-seam); border: 0; margin: 0; }

/* ──────────────────────────────────────────────────────────────── table */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 520px; }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
  font-family: var(--font-mono); font-size: .688rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
  background: var(--surface-2);
}
tbody tr:last-child td { border-bottom: 0; }
td code { color: var(--text); }

/* ───────────────────────────────────────────────────── code / terminal */

.code {
  background: var(--syn-ink); color: #E8EDF2;
  border: 1px solid #1E2F3D; border-radius: var(--radius-card);
  overflow: hidden;
}
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid #1E2F3D; background: #0E1B27;
  font-family: var(--font-mono); font-size: .688rem; letter-spacing: .12em;
  text-transform: uppercase; color: #7A8896;
}
.code pre { margin: 0; padding: 18px 16px; overflow-x: auto; font-size: .82rem; line-height: 1.75; }
.code code { font-family: var(--font-mono); color: #E8EDF2; font-size: inherit; }
.tok-key { color: var(--syn-gold); }
.tok-str { color: #8FC3C9; }
.tok-com { color: #7A8896; }
.tok-fn  { color: var(--syn-ember); }

.copy {
  font-family: var(--font-mono); font-size: .688rem; letter-spacing: .1em;
  text-transform: uppercase; background: transparent; color: #9BABB9;
  border: 1px solid #1E2F3D; border-radius: 999px; padding: 3px 11px; cursor: pointer;
}
.copy:hover { color: #E8EDF2; border-color: #2C4152; }
.copy[data-done="1"] { color: var(--syn-gold); border-color: #2C4152; }

/* ────────────────────────────────────────────── the payment-page figure */

.figure {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden;
}
.figure-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.figure-bar .u { width: 8px; height: 8px; border-radius: 999px; background: var(--border-strong); }
.figure-bar .addr {
  margin-left: 6px; font-family: var(--font-mono); font-size: .688rem;
  color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.figure-body { padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.figure-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.figure-head span:not(.pill) { white-space: nowrap; }
.figure-head img { width: 26px; height: 26px; border-radius: 6px; }
.figure-head span { font-family: var(--font-display); font-size: .98rem; }
.amount { font-family: var(--font-mono); font-size: 1.85rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rows { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); }
/* The value wraps onto its own line rather than forcing the row wider than the
   card. A long unbreakable value - an email address at the full company domain
   is 27 characters - otherwise pushes the whole page sideways on a 320px
   screen, which is how this was found. */
.rows div {
  display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .875rem;
}
.rows dt, .rows .k { color: var(--text-muted); }
.rows .v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  margin-left: auto; text-align: right;
  word-break: break-word;        /* WebKit before 15.4 */
  overflow-wrap: anywhere;
}

/* ───────────────────────────────────────────────────────────── stat row */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.stat { background: var(--surface); padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.stat .n { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .l { font-size: .875rem; color: var(--text-muted); }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ─────────────────────────────────────────────────────────────── detail */

details {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); padding: 0 20px;
}
details + details { margin-top: 10px; }
summary {
  cursor: pointer; padding: 16px 0; font-family: var(--font-display);
  font-size: 1rem; font-weight: 500; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); font-size: 1.1rem; }
details[open] summary::after { content: "–"; }
details[open] summary { border-bottom: 1px solid var(--border); }
.details-body { padding: 16px 0 20px; display: flex; flex-direction: column; gap: 12px; }
.details-body p { font-size: .938rem; color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────── ink panel */

.ink-panel { border-radius: var(--radius-card); padding: 44px; border: 1px solid #1E2F3D; }
.ink-panel h2 { color: #E8EDF2; }
.ink-panel p { color: #9BABB9; }
@media (max-width: 620px) { .ink-panel { padding: 30px 24px; } }

/* ─────────────────────────────────────────────────── placeholder marker */

/* A value that is a stand-in in the deployment configuration and has not been
   issued yet. Marked rather than invented: a licence number typed in to look
   finished would print on this page as though a regulator had granted it. */
.tbd {
  font-family: var(--font-mono); font-size: .875em;
  border-bottom: 1px dashed var(--border-strong); color: var(--text-muted);
  cursor: help;
}

/* ─────────────────────────────────────────────────────────────── footer */

.footer { padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer h4 {
  font-family: var(--font-mono); font-size: .688rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #7A8896; margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { color: #9BABB9; font-size: .9rem; text-decoration: none; }
.footer-links a:hover { color: #E8EDF2; }
.footer .brand { margin-bottom: 14px; }
.legal {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid #1E2F3D;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: .82rem; color: #7A8896;
}
.legal p { max-width: none; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }