/* OneBox (1bx) — styles for a static landing page.
   No external resources: system fonts only, no imports, no images, no url() fetches.

   COLOUR. The page was two-tone: warm off-white plus one slate-teal accent. It now
   carries three accents over a layered surface scale so a grid of boxes is scannable
   rather than a wall of identical panels. The palette stays DELIBERATELY MUTED: this
   is an app for someone in a difficult situation, so there are no alarm reds, no
   security-vendor gradients, and no padlock or shield imagery anywhere.

   Every text colour here is MEASURED against its real background in both colour
   schemes by sites/audit-render.mjs. The dark scheme is not a hand-computed guess.

   THE CSP LIVES IN _headers AND FORBIDS INLINE STYLES (`style-src 'self'` with no
   'unsafe-inline'). So: no style="" attributes anywhere, and no <style> block inside
   an inlined SVG. sites/verify-sites.py fails the build if one appears. */

:root {
  --bg: #f7f6f4;
  --bg-soft: #f1efec;
  --surface: #ffffff;
  --surface-hi: #fbfaf9;
  --text: #23211f;
  --muted: #5b5751;
  --faint: #635e57;
  --line: #e2ded7;
  --rule: #e8e5df;

  --accent:   #35606a;  /* slate teal — primary */
  --accent-2: #44598a;  /* muted blue */
  --accent-3: #4f6647;  /* moss */
  --accent-4: #6f5470;  /* plum */

  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 40rem;
  --measure-wide: 62rem;
  --radius: 12px;
  --radius-sm: 8px;
  --pad: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181a;
    --bg-soft: #1b1d20;
    --surface: #1f2124;
    --surface-hi: #24272b;
    --text: #ecebe8;
    --muted: #a9a6a0;
    --faint: #918e88;
    --line: #33373b;
    --rule: #2a2e32;

    --accent:   #8fbdbd;
    --accent-2: #9fb4de;
    --accent-3: #a8c69a;
    --accent-4: #cfa8c4;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* ---------- shell ---------- */

.shell {
  width: 100%;
  max-width: calc(var(--measure-wide) + (var(--pad) * 2));
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Narrower column for prose so a wide container never yields a 100-character line.
   Both are used on the same page: wide for card grids, narrow for text. */
.prose {
  max-width: var(--measure);
}

/* The flex row lives on the SHELL, not the header, because `.shell` is the width
   container that every page wraps its content in. Putting `display:flex` on the
   header instead would make the shell its only flex child and stack brand over
   brand-sub -- a layout bug that is invisible in the HTML and only shows up when
   rendered. */
.site-header {
  padding-top: 1.6rem;
}

.site-header .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.6rem;
}

.site-main {
  padding-top: 1.5rem;
}

.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--line);
}

/* The vertical-rhythm rules (.stack > * + *, .card > * + *) live at the END of this
   file on purpose -- see the note there. They have to come AFTER the components, or
   the components' `margin: 0` silently wins on equal specificity. */

/* ---------- brand ---------- */

.brand {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Inlined, not an <img>: no extra request, and the colours come from the same
   variables as the page so the mark follows the colour scheme. Styled here rather
   than from a <style> inside the SVG, which the CSP (`style-src 'self'`) blocks. */
.brand__mark {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
}

.brand__mark .m-bg { fill: var(--accent); }

.brand__mark .m-in {
  fill: none;
  stroke: var(--bg);
  stroke-width: 2.4;
}

.brand-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- typography ---------- */

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

h1 {
  margin: 1.6rem 0 0.75rem;
  font-size: clamp(1.7rem, 1.25rem + 2.2vw, 2.35rem);
}

h2 {
  margin: 0;
  font-size: clamp(1.2rem, 1.08rem + 0.7vw, 1.5rem);
}

h3 {
  margin: 0;
  font-size: 1.0625rem;
}

p {
  margin: 0;
  max-width: var(--measure);
  text-wrap: pretty;
}

.lead { font-size: 1.0625rem; }

.muted { color: var(--muted); }

.eyebrow {
  display: block;
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow--2 { color: var(--accent-2); }
.eyebrow--3 { color: var(--accent-3); }
.eyebrow--4 { color: var(--accent-4); }

.note {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- sections ---------- */

.section { margin-top: 2.6rem; }

.section__head {
  max-width: var(--measure);
  margin-bottom: 1.25rem;
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.card {
  position: relative;
  padding: 1.15rem 1.2rem 1.3rem;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* A coloured edge makes a grid of boxes scannable at a glance instead of a wall of
   identical panels. It is the ONLY decoration: no icons, no drop shadows. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}

.card--2::before { background: var(--accent-2); }
.card--3::before { background: var(--accent-3); }
.card--4::before { background: var(--accent-4); }

.card--plain { background-color: var(--bg-soft); }
.card--plain::before { background: var(--line); }

.card p {
  color: var(--muted);
  font-size: 0.9375rem;
}

.stat__value {
  display: block;
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.stat--2 .stat__value { color: var(--accent-2); }
.stat--3 .stat__value { color: var(--accent-3); }
.stat--4 .stat__value { color: var(--accent-4); }

.stat__label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------- pills ---------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--bg-soft);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.pill--accent { border-color: var(--accent); color: var(--accent); }
.pill--2 { border-color: var(--accent-2); color: var(--accent-2); }
.pill--3 { border-color: var(--accent-3); color: var(--accent-3); }
.pill--4 { border-color: var(--accent-4); color: var(--accent-4); }

/* ---------- checklist ---------- */

.checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  margin-top: 0.65rem;
  padding-left: 1.5rem;
  max-width: var(--measure);
  color: var(--muted);
  text-wrap: pretty;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--accent);
}

.checks--2 li::before { background: var(--accent-2); }
.checks--3 li::before { background: var(--accent-3); }

/* ---------- the limits panel ---------- */

/* FEATURES.md 10 states that the limits belong IN the product. This panel is that
   requirement, styled to be read rather than skipped: it gets the surface treatment
   and the widest measure on the page. Removing it to make the page read better is
   the defect, not the fix. */
.limits {
  margin-top: 3rem;
  padding: 1.35rem var(--pad) 1.6rem;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.limits h2 { margin-bottom: 0.6rem; }

.limits .checks li::before { background: var(--accent-4); }

/* ---------- definition list (the three codes) ---------- */

.codes {
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.75rem;
}

.codes dt {
  font-weight: 600;
}

.codes dd {
  margin: 0.15rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--line);
  color: var(--muted);
}

/* ---------- call to action ---------- */

.cta {
  margin-top: 2.4rem;
  padding: 1.5rem;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- links ---------- */

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

a:hover { text-decoration-thickness: 2px; }

/* Any link that is the PRIMARY ACTION on its page needs a real hit area. These were
   measured at 21px tall on a phone -- under the 24x24 WCAG 2.5.8 minimum and far
   under the 44px platform guidance. Being hard to tap is the one failure a visitor
   cannot work around. */
.action-link {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.55rem;
  overflow-wrap: anywhere;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  align-items: center;
}

/* A row of links is still a row of TAP TARGETS. Measured at 51x20 and 143x20 on the
   investor page -- under the 24x24 WCAG 2.5.8 minimum. The flex gap alone does not
   satisfy the spacing exception reliably, so the height is set explicitly. */
.link-row a {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.55rem;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- footer ---------- */

.site-footer p {
  margin: 0.45rem 0 0;
  max-width: var(--measure-wide);
  color: var(--faint);
  font-size: 0.875rem;
}

.site-footer .link-row { margin-top: 0.9rem; }

.site-footer a { color: var(--muted); }

/* ---------- skip link ---------- */

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  transform: translateY(-300%);
  padding: 0.45rem 0.7rem;
  background-color: var(--surface);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus { transform: none; }

/* ---------- wider screens ---------- */

@media (min-width: 40rem) {
  :root { --pad: 1.75rem; }

  .section { margin-top: 3.2rem; }
  .limits { padding: 1.6rem 1.75rem 1.85rem; }
  .cta { padding: 1.9rem; }
}

/* ---------- vertical rhythm — MUST STAY LAST ----------

   These two rules are the composing layer: `.stack` spaces a column of blocks and
   `.card` spaces the blocks inside a box. They share their specificity with the
   components above (.checks, .pills, .codes all set `margin: 0`), so SOURCE ORDER
   decides the winner.

   Earlier in the file they LOST, silently: the component's `margin: 0` came later and
   wiped the top margin, so a checklist dropped flush against the element above it and
   the HTML had to carry wrapper <div>s to recover the spacing. A design system whose
   composition layer is defeated by its own components is not composing anything.

   Keeping them last means components stay free to zero their margins for standalone
   use, while anything dropped into a `.stack` or `.card` is spaced correctly. If you
   add a component that sets `margin: 0`, add it ABOVE this block. */
.stack > * + * {
  margin-top: 1.1rem;
}

.card > * + * {
  margin-top: 0.5rem;
}