/* ============================================================
   ONE — candidate public site.

   Black, white, navy. Restrained and institutional rather than the generic SaaS
   gradient: no blur, no glow, no floating cards on tinted mist. The page is set on
   a rule-and-column grid because that is what "engineered" looks like when it is
   not decorated.

   #101B2E is the BRAND navy and the only navy here. The product's interactive
   navy (#1E3A63) belongs to the application and is deliberately absent — the two
   are different roles and this file is not the product.
   ============================================================ */

/* ============================================================
   FONTS — SELF-HOSTED (STF-1b). OFL 1.1; files, sources and hashes in assets/fonts/PROVENANCE.md.
   No page loads a font or stylesheet from another origin any more: the storefront outside /demo
   makes no third-party request at all. Variable files: one per family per subset.
   ============================================================ */
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(assets/fonts/instrument-sans/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(assets/fonts/instrument-sans/instrument-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(assets/fonts/geist-mono/geist-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ⭐ THE STOREFRONT PACKET'S PALETTE (2026-09-14 mockup): slate greys on white, thin rules.
     #101B2E stays the BRAND navy and the only navy — the mockup's #101E33 is the same role one
     step off, and the brand package, not a design canvas, owns that value. */
  --ink: #101B2E;
  --ink-700: #3C4A5C;
  --ink-500: #5A6B7F;
  --ink-400: #64748B;
  --ink-300: #C3CCD8;
  --ink-100: #E1E6EC;
  --ink-050: #F7F8FA;
  --navy: #101B2E;
  --navy-sub: #B9C6D6;
  --navy-rule: #46597A;
  --link: #1D4E89;
  --paper: #FFFFFF;
  --rule: 1px solid var(--ink-100);
  --measure: 1296px;
  /* OD-COM-19: Instrument Sans carries the page; Geist Mono is restrained to statuses, system
     labels and billing metadata, and never sets body copy. */
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

/* ---- masthead ---- */
.masthead { border-bottom: var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 20; }
.masthead .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.masthead__mark { height: 26px; width: auto; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: wrap; }

/* ⛔ :not(.btn) IS THE WHOLE OF BLK-1, AND THE CASCADE IS THE BUG.
   `.nav a` is (0,1,1) and `.btn` is (0,1,0), so a header button lost its own colour to the
   nav-link rule and rendered rgb(44,48,56) on rgb(16,27,46) — 1.30:1, dark-on-dark, for a
   button whose hero twin is correctly white-on-navy. It was worse than one ratio: the
   :hover and [aria-current] rules below repaint to --navy, so hovering gave 1.09:1, and on
   get-started.html — where the header CTA's href IS the current page — site.js marks it
   aria-current and it sat at 1.09:1 permanently.
   Excluding buttons from all three rules fixes the state that was measured AND the two that
   were not, and it does it without adding a louder selector for .btn to win with. */
.nav a:not(.btn) { text-decoration: none; font-size: 14px; letter-spacing: .01em; color: var(--ink-700); }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--navy); }
.nav a:not(.btn)[aria-current="page"] { font-weight: 600; }

.btn {
  display: inline-block; text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 11px 20px; border: 1px solid var(--navy); background: var(--navy);
  color: #fff; letter-spacing: .01em;
}
.btn:hover { background: #0A1220; }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--ink-050); }

/* ============================================================
   BLK-2 — THE HEADER BELOW THE DESK BREAKPOINT.
   ⛔ WHAT BROKE. `.masthead .wrap` fixed its height at 72px while `.nav` was allowed to
   wrap. A flex line that does not fit a fixed-height box is centred on it and spills BOTH
   ways: measured at 834px every nav item rendered at top -9.4px — above the viewport, not
   merely above the header — and Book a demo sat at bottom 81.4px, below a header ending at
   73px. At 390px items landed above the viewport AND below the header at once.
   ⭐ THE FIX IS TO STOP FIXING THE HEIGHT. Below 1200px the bar becomes two rows in normal
   flow: identity, then the navigation on its own full-width line under a hairline rule.
   Nothing is positioned, so nothing can leave the viewport or cover the page — the header
   simply is as tall as its contents. Static rather than sticky there, because a wrapped bar
   that follows the reader down a phone screen spends the viewport it just grew into.
   ⚠ ≥1200px IS UNTOUCHED: the accepted single-row sticky masthead is what this query does
   not apply to, which is why the breakpoint is 1199px and not a round 1024px.
   ============================================================ */
@media (max-width: 1199px) {
  .masthead { position: static; }
  .masthead .wrap {
    flex-wrap: wrap;
    height: auto;
    min-height: 72px;
    padding-top: 14px;
    padding-bottom: 14px;
    /* N1 — THE ROW GAP. Two rows below 1200px, and a row-gap of 0 put the nav's hairline
       exactly on the logo's bottom edge: both at 40px at 390px. 14px matches the padding-top
       above the logo, so the identity row has equal space above and below. Measured: at 390
       the rule moves from 40px to 54px; the masthead grows 14px at 390, 430, 834 and 1199
       (147→161, 115→129); no overflow, no nav item out of view; and at 1200/1366/1440 the
       page is pixel-identical to before, as it must be outside this query. */
    gap: 14px 20px;
  }
  .nav {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    gap: 12px 18px;
    padding-top: 13px;
    border-top: var(--rule);
  }
}
/* One narrow-phone concession, and it is spacing only: at 390px the six items need three
   lines and the desktop gutters make that taller than it has to be. No item is hidden, no
   control is introduced, and nothing about the design changes. */
@media (max-width: 520px) {
  .nav { gap: 10px 14px; }
  .nav a:not(.btn) { font-size: 13.5px; }
}

/* ---- type ---- */
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; margin: 0; font-weight: 700; }
h1 { font-size: clamp(38px, 5.4vw, 64px); }
h2 { font-size: clamp(26px, 3.2vw, 38px); }
h3 { font-size: 19px; letter-spacing: -0.01em; }
p { margin: 0; }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--ink-700); line-height: 1.55; }
.eyebrow {
  font: 500 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-400);
}

/* ---- layout ---- */
section { padding: 72px 0; border-bottom: var(--rule); }
section:last-of-type { border-bottom: 0; }
.stack > * + * { margin-top: 18px; }
.grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.panel { border: var(--rule); padding: 26px; background: var(--paper); }
.panel--quiet { background: var(--ink-050); border-color: transparent; }

.hero { padding: 96px 0 84px; }
.hero h1 { max-width: 15ch; }

/* ---- the connected-operations diagram ---- */
.opsmap { display: grid; gap: 14px; margin-top: 32px; }
@media (min-width: 860px) { .opsmap { grid-template-columns: repeat(6, 1fr); } }
.opsmap__node { border: 1px solid var(--navy); padding: 16px 14px; text-align: center; }
.opsmap__node--soft { border-style: dashed; border-color: var(--ink-300); color: var(--ink-500); }
.opsmap__node strong { display: block; font-size: 14px; letter-spacing: .02em; }
.opsmap__node span { font-size: 12px; color: var(--ink-500); }
.opsflow {
  margin-top: 22px; border-left: 3px solid var(--navy); padding: 4px 0 4px 20px;
  font-size: 15px; color: var(--ink-700);
}
.opsflow b { color: var(--ink); font-weight: 600; }

/* ---- pricing ---- */
.plans { display: grid; gap: 20px; margin-top: 36px; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { border: var(--rule); padding: 26px 22px; display: flex; flex-direction: column; }
.plan--featured { border: 2px solid var(--navy); }
.plan__name { font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.plan__price { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin-top: 14px; }
.plan__period { font-size: 13px; color: var(--ink-500); }
.plan__allow { margin: 18px 0 0; padding: 0; list-style: none; font-size: 15px; }
.plan__allow li { padding: 7px 0; border-top: var(--rule); }
.plan__tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  background: var(--navy); color: #fff; padding: 4px 9px; margin-bottom: 10px;
}
.plan .btn { margin-top: auto; text-align: center; }

table.terms { width: 100%; border-collapse: collapse; font-size: 15px; }
table.terms th, table.terms td { text-align: left; padding: 12px 0; border-bottom: var(--rule); }
table.terms th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; }

/* ---- availability, the honest column ---- */
.avail { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.avail--now { color: var(--navy); }
.avail--not { color: var(--ink-500); }

/* ---- forms ---- */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 15px; padding: 11px 13px;
  border: 1px solid var(--ink-300); background: var(--paper); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.field + .field { margin-top: 16px; }
.formnote { font-size: 13px; color: var(--ink-500); }

/* ---- footer ---- */
.foot { padding: 44px 0 64px; font-size: 13px; color: var(--ink-500); }
.foot a { color: var(--ink-700); }
.foot__cols { display: grid; gap: 22px; }
@media (min-width: 760px) { .foot__cols { grid-template-columns: 1.5fr repeat(3, 1fr); } }

/* ============================================================
   STOREFRONT PACKET COMPONENTS (STF-1, 2026-09-15).

   The approved mockup's sections, as classes. Everything here sits ABOVE the utility layer
   so the utilities still win their ties (SF-25). No inline style anywhere: style-src-attr is
   'none'. Mobile-first, collapsing to one column below the breakpoints the mockup draws
   (1440 desk, 390 phone).
   ============================================================ */
a { color: inherit; }
.textlink { color: var(--link); text-decoration: none; }
.textlink:hover { color: var(--navy); text-decoration: underline; }
.skip {
  position: absolute; left: 12px; top: -48px; background: var(--navy); color: #fff;
  padding: 10px 14px; font-size: 14px; z-index: 30; text-decoration: none;
}
.skip:focus { top: 12px; }
/* STF-7 — the non-production assembly's banner (inserted by ops/store-render.mjs; never present in a production page). */
.preview-banner {
  position: sticky; top: 0; z-index: 40; background: #7A1C1C; color: #fff; text-align: center;
  font-weight: 700; letter-spacing: 0.06em; font-size: 13px; padding: 8px 16px;
}
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.label { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); }
.label--light { color: var(--navy-sub); }
.muted { color: var(--ink-500); }
.small { font-size: 14px; line-height: 1.6; }

.section--alt { background: var(--ink-050); }
.section--navy { background: var(--navy); color: #fff; border-bottom: 0; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy .lede, .section--navy p { color: var(--navy-sub); }
.section__head { display: grid; gap: 18px 40px; align-items: end; margin-bottom: 36px; }
@media (min-width: 900px) { .section__head { grid-template-columns: 1fr minmax(0, 400px); } }
.section__head .eyebrow + h2 { margin-top: 14px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-on-navy { background: #fff; color: var(--navy); border-color: #fff; }
.btn-on-navy:hover { background: var(--ink-050); }
.btn-outline-on-navy { background: transparent; color: #fff; border-color: var(--navy-rule); }
.btn-outline-on-navy:hover { background: #0A1220; }
.btn--lg { font-size: 15px; padding: 15px 24px; }

.card { background: var(--paper); border: var(--rule); padding: 26px 24px 28px; }
/* STF-15 (a): .card and .rowbox headings may be h2 where the outline requires it — WCAG 1.3.1. The look is the
   h3 look, stated here so raising the LEVEL does not change the SIZE. */
.card h2, .card h3 { font-size: 19px; font-weight: 600; line-height: 1.3; }
.card p { margin-top: 10px; font-size: 15px; color: var(--ink-500); }

.deptmap { display: grid; gap: 12px; }
@media (min-width: 620px) { .deptmap { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .deptmap { grid-template-columns: repeat(6, 1fr); } }
.deptmap__node { border: 1px solid #fff; padding: 18px 16px; }
.deptmap__node strong { display: block; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; color: #fff; }
.deptmap__node span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--navy-sub); }
.deptmap__node--soft { border: 1px dashed var(--navy-rule); }
.deptmap__node--soft strong { color: var(--navy-sub); }

.captable { width: 100%; border-collapse: collapse; }
.captable th { font: 500 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400);
  text-align: left; padding: 0 24px 12px 0; border-bottom: 1px solid var(--navy); }
.captable td { vertical-align: top; padding: 16px 24px 16px 0; border-bottom: var(--rule); font-size: 15px; color: var(--ink-500); }
.captable td:first-child { font-weight: 600; font-size: 16px; color: var(--navy); }
@media (max-width: 700px) {
  .captable thead { display: none; }
  .captable tr { display: block; padding: 14px 0; border-bottom: var(--rule); }
  .captable td { display: block; border: 0; padding: 2px 0; }
}

.limits { background: var(--navy); padding: 26px 28px; display: grid; gap: 16px; }
.limits p { color: #fff; font-size: 15.5px; padding-left: 18px; border-left: 2px solid var(--navy-rule); }

.termswitch { display: flex; gap: 6px; }
.termswitch button {
  flex: 1 1 0; font: 600 13.5px/1.2 var(--sans); padding: 11px 8px; cursor: pointer;
  background: #fff; color: var(--ink-700); border: 1px solid var(--ink-300);
}
.termswitch button span { display: block; margin-top: 5px; font: 400 10.5px/1.2 var(--mono); color: var(--ink-400); }
.termswitch button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.termswitch button[aria-pressed="true"] span { color: var(--navy-sub); }
.termswitch button .termswitch__label { margin-top: 0; font: 600 13.5px/1.2 var(--sans); color: inherit; }
.termswitch button { min-width: 0; }
.termbox { border: var(--rule); padding: 20px 22px; }
/* ⛔ GRID AND FLEX CHILDREN SHRINK. A grid item's default min-width is its content, so one wide
   table or unbreakable label widened the whole page past a 390px viewport (measured on /pricing). */
.grid > *, .section__head > *, .select-grid > *, .plancards > *, .foot__cols > * { min-width: 0; }
.pick__name + [data-offer-badge] .badge { margin-left: 8px; vertical-align: 2px; }

.plancards { display: grid; gap: 20px; }
@media (min-width: 640px) { .plancards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plancards { grid-template-columns: repeat(4, 1fr); } }
.plancard { border: var(--rule); background: var(--paper); padding: 22px 22px 24px; display: flex; flex-direction: column; }
.plancard--recommended { border-color: var(--navy); }
/* Badges sit in a reserved row so every price shares one baseline. */
.plancard__badge { height: 24px; margin-bottom: 12px; }
.badge { display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: .12em; background: var(--navy); color: #fff; padding: 6px 9px; }
.plancard__name { font-size: 14.5px; font-weight: 600; min-height: 36px; letter-spacing: -0.01em; }
.plancard__amount { margin-top: 14px; font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plancard__unit { margin-top: 7px; font-size: 13.5px; }
.plancard__sub { margin-top: 6px; font-size: 12.5px; color: var(--ink-400); min-height: 36px; }
.plancard__allow { margin: 16px 0 20px; padding: 14px 0 0; border-top: var(--rule); list-style: none; font-size: 14.5px; color: var(--ink-700); }
.plancard__allow li { line-height: 1.7; }
.plancard__cta { margin-top: auto; text-align: center; }
.plancard--recommended .plancard__cta { background: var(--navy); color: #fff; }

.rowbox { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; border: var(--rule); padding: 22px 24px; margin-top: 20px; }
.rowbox--alt { background: var(--ink-050); }
.rowbox h2, .rowbox h3 { font-size: 16px; font-weight: 600; }

.terms-list { border-top: 1px solid var(--navy); }
.terms-list div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 16px 0; border-bottom: var(--rule); }
.terms-list dt { font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.terms-list dd { margin: 0; font-size: 14.5px; color: var(--ink-500); }

.pricebox { border: var(--rule); }
.pricebox div { display: flex; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: var(--rule); font-size: 15.5px; }
.pricebox div:last-child { border-bottom: 0; }
.pricebox strong { font-weight: 700; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; border: var(--rule); }
.matrix th { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400);
  text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--navy); }
.matrix td { padding: 18px 20px; border-bottom: var(--rule); vertical-align: top; }
.matrix td strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.matrix td small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-400); }
.matrix th[scope="row"] { font: 600 16px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--navy); border-bottom: var(--rule); }
.matrix th[scope="row"] small { display: block; margin-top: 4px; font: 400 13px/1.4 var(--sans); color: var(--ink-400); }

.band { text-align: center; }
.band .cta-row { justify-content: center; }

/* ---- plan selection ---- */
.select-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .select-grid { grid-template-columns: minmax(0, 1fr) 440px; } }
.picker { display: grid; gap: 8px; margin-top: 18px; border: 0; padding: 0; }
.picker legend { padding: 0; }
.pick { display: flex; align-items: center; gap: 16px; border: var(--rule); background: #fff; padding: 16px 20px; cursor: pointer; }
.pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--link); flex: none; }
.pick:has(input:checked) { border-color: var(--link); background: #F4F8FC; }
.pick__main { flex: 1 1 0; min-width: 0; }
.pick__name { font-size: 17px; font-weight: 600; }
.pick__cap { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-400); }
.pick__price { text-align: right; }
.pick__price strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pick__price small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-400); }
.summary { border: 1px solid var(--navy); padding: 26px 28px 28px; }
.summary__name { margin-top: 14px; font-size: 20px; font-weight: 600; }
.summary__amount { margin-top: 18px; font-size: 48px; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.summary__block { margin-top: 22px; padding-top: 20px; border-top: var(--rule); }
.contact-address { font-size: 20px; font-weight: 600; }
.notice { border-left: 2px solid var(--navy); padding-left: 14px; font-size: 14.5px; color: var(--ink-700); }

/* ---- demo ---- */
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.facts li { list-style: none; font: 500 11px/1 var(--mono); letter-spacing: .08em; border: var(--rule); padding: 8px 10px; color: var(--navy); }
.facts, .bullets { padding: 0; margin-bottom: 0; }
.bullets { list-style: none; }
.bullets li { padding: 8px 0 8px 16px; border-left: 2px solid var(--ink-100); margin-top: 6px; font-size: 15px; color: var(--ink-700); }
.embed { border: var(--rule); background: #fff; }
.embed iframe { display: block; width: 100%; height: 760px; border: 0; }
@media (max-width: 700px) { .embed iframe { height: 1060px; } }

/* ---- privacy ---- */
.doc { max-width: 760px; }
.doc h2 { font-size: 24px; margin-top: 40px; }
.doc p, .doc ul { margin-top: 12px; font-size: 16px; color: var(--ink-700); }
.doc ul { padding-left: 20px; }
.review { margin-top: 14px; border: 1px dashed var(--ink-400); background: var(--ink-050); padding: 14px 16px; font-size: 14.5px; color: var(--ink-700); }
.review .label { display: block; margin-bottom: 6px; }
.alert { background: #0B0D10; color: #fff; padding: 12px 16px; font: 600 14px/1.4 var(--sans); }
.foot__mark { height: 24px; width: auto; }
.foot__legal { margin-top: 30px; padding-top: 18px; border-top: var(--rule); }
.foot nav a { display: block; margin-top: 8px; text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }

/* ============================================================
   UTILITIES — the inline style attributes, moved.

   ⛔ WHY THEY MOVED, AND IT IS NOT TIDINESS. 142 style attributes across six pages is
   142 reasons a publishable Content Security Policy would have needed
   style-src-attr 'unsafe-inline' — an allowance that re-permits every injected style
   attribute on every page in order to keep a margin working. The declarations are
   unchanged; only where they live is.

   ⚠ LAST IN THE FILE ON PURPOSE. An inline attribute outranked every selector in this
   stylesheet; a single class does not. `.stack > * + *` above sets margin-top at the same
   specificity these carry, so ties are broken by source order and these must come after
   it. tests/storefront-artifact.test.mjs SF-25 pins that ordering, and the render-fidelity
   comparison over 30 renders is what proved no element moved.

   ⛔ AND THE SELECTOR IS DOUBLED, WHICH IS NOT A TYPO. An inline style attribute outranks
   every selector in a stylesheet; a single class does not, and the first pass of this
   relocation proved it in 345 rendered differences. `.hero h1` (0,1,1) took the hero
   headline's max-width back to 15ch from the 17ch the page asked for, and
   `.plan .btn { margin-top: auto }` (0,2,0) pushed every pricing button back to the bottom
   of its card — each a rule the inline attribute had been quietly beating. Repeating the
   class lifts these to (0,2,0), and being last in the file wins the ties. It is the
   narrowest thing that restores what the attributes did: no !important, and no new
   selector reaching for anything it does not already match.

   ⚠ ATOMIC, NOT A DESIGN SYSTEM. One declaration per class, named for what it sets. This
   is a faithful relocation of what the pages already said — inventing a spacing scale or
   renaming these into semantics would be a redesign wearing a CSP change as a hat.
   ============================================================ */
.u-bg-white.u-bg-white { background: #fff; }
.u-bg-navy.u-bg-navy { background: var(--navy); }
.u-bb-0.u-bb-0 { border-bottom: 0; }
.u-bc-white.u-bc-white { border-color: #fff; }
.u-navy-sub.u-navy-sub { color: #C7CEDA; }
.u-white.u-white { color: #fff; }
.u-ink-700.u-ink-700 { color: var(--ink-700); }
.u-navy.u-navy { color: var(--navy); }
.u-fs-15.u-fs-15 { font-size: 15px; }
.u-fs-26.u-fs-26 { font-size: 26px; }
.u-h-32.u-h-32 { height: 32px; }
.u-m-0.u-m-0 { margin: 0; }
.u-ml-10.u-ml-10 { margin-left: 10px; }
.u-mx-auto.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-mt-10.u-mt-10 { margin-top: 10px; }
.u-mt-12.u-mt-12 { margin-top: 12px; }
.u-mt-14.u-mt-14 { margin-top: 14px; }
.u-mt-16.u-mt-16 { margin-top: 16px; }
.u-mt-18.u-mt-18 { margin-top: 18px; }
.u-mt-22.u-mt-22 { margin-top: 22px; }
.u-mt-24.u-mt-24 { margin-top: 24px; }
.u-mt-26.u-mt-26 { margin-top: 26px; }
.u-mt-28.u-mt-28 { margin-top: 28px; }
.u-mt-30.u-mt-30 { margin-top: 30px; }
.u-mt-34.u-mt-34 { margin-top: 34px; }
.u-mt-6.u-mt-6 { margin-top: 6px; }
.u-mt-8.u-mt-8 { margin-top: 8px; }
.u-mw-16ch.u-mw-16ch { max-width: 16ch; }
.u-mw-17ch.u-mw-17ch { max-width: 17ch; }
.u-mw-18ch.u-mw-18ch { max-width: 18ch; }
.u-mw-19ch.u-mw-19ch { max-width: 19ch; }
.u-mw-20ch.u-mw-20ch { max-width: 20ch; }
.u-mw-22ch.u-mw-22ch { max-width: 22ch; }
.u-mw-24ch.u-mw-24ch { max-width: 24ch; }
.u-mw-52ch.u-mw-52ch { max-width: 52ch; }
.u-mw-58ch.u-mw-58ch { max-width: 58ch; }
.u-mw-60ch.u-mw-60ch { max-width: 60ch; }
.u-mw-62ch.u-mw-62ch { max-width: 62ch; }
.u-mw-64ch.u-mw-64ch { max-width: 64ch; }
.u-pad-72-0-40.u-pad-72-0-40 { padding: 72px 0 40px; }
.u-pad-72-0-48.u-pad-72-0-48 { padding: 72px 0 48px; }
.u-pad-72-0-56.u-pad-72-0-56 { padding: 72px 0 56px; }
.u-pl-18.u-pl-18 { padding-left: 18px; }
.u-pt-20.u-pt-20 { padding-top: 20px; }
.u-pt-24.u-pt-24 { padding-top: 24px; }
.u-ta-center.u-ta-center { text-align: center; }
.u-ta-right.u-ta-right { text-align: right; }
.u-w-20pct.u-w-20pct { width: 20%; }
.u-w-32.u-w-32 { width: 32px; }
.u-w-34pct.u-w-34pct { width: 34%; }