/* getxtant.com shared styles. Retasc's design system (CLAUDE.md, "Design systems").
 *
 * Copied on 2026-10-08 (XTNT-35) from ~/retasc/web/styles.css, the parts this site uses: the
 * self-hosted faces and their metric-matched fallbacks, the base, the page frame, the header
 * wordmark, the page head (.phead, .ptitle), the section block, the link pill and the
 * footer's legal row. Tokens live in tokens.css, linked before this file.
 *
 * Added on 2026-10-09 (XTNT-106, the landing page) from the same file, values unchanged: the nav,
 * the buttons (.btn, .btn.ghost, .go), the hero (.hero, .hero-copy, .hero h1, .sub, .actions,
 * .statusline), the section head (.sechdr, .stitle, .r, .m), the band and its ladder, the card
 * grids (.cards3, .cards2, .card, .cico, .badge), the illustrations (.ill, .ill-column, .kv, .fk,
 * .fv), the FAQ, the closing card (.cta), the footer's brand row (.ftr-top, .ftr-brand,
 * .ftr-mark), .nb, .sr-only and the phone rules for each. Where Retasc sets a rule and then
 * overrides it further down its file, the rule here is the result.
 * Added on 2026-10-10 (XTNT-77, the privacy and terms pages) from the same file, values
 * unchanged: the footer's legal links (.ftr-r, .ftr-legal a), .hi and the legal prose (.legal,
 * .updated.legal, .legal h2 with the long-form heading it shares with Retasc's guides).
 * Canon: ~/retasc/operations/design-system.md, §retasc.com (the marketing site). Read it before
 * adding a rule: every value below was measured there, and "one primitive per job" means a new
 * page reuses these classes before it invents a sibling.
 *
 * Changed on the way in, all of it Xtant's own:
 *   - the logo is Xtant's lockup (brand/assets/lockup.svg, XTNT-25) inline, its ink and cursor
 *     painted from tokens (--logo-ink, --accent), so it follows the theme;
 *   - the home diagram is Xtant's loop (.loop), an inline SVG whose objects take the ladder;
 *   - the nav holds in-page links only, and phones (700px and under, Retasc's threshold) hide it
 *     instead of opening a menu: there is no other page to reach yet;
 *   - the closing card carries facts and no action, because there is nothing to download yet;
 *   - Xtant's accent, a little, where an accent conventionally sits (asked by the human,
 *     2026-10-09: "just a bit add it in the best practice places"): the focus ring, the card
 *     icons, the step numbers, a hovered nav item or link, the travelling arrow, the open FAQ
 *     marker and the person's step in the loop. Text and large areas stay neutral; small text
 *     takes --accent-text, marks and edges --accent (contrast in tokens.css);
 *   - on the rate card (/pricing, XTNT-76) the prices and key amounts and each section's label
 *     take --accent-text too (asked by the human, 2026-10-15: "please use accent color on the
 *     page"). */

/* Self-hosted faces. One variable file per family; font-weight is the range the rules below ask
   for. Latin subset; a glyph outside it falls back per glyph (unicode-range). All three are SIL
   Open Font License 1.1, which permits self-hosting. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/space-grotesk.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;
}

/* Metric-matched fallbacks: the system faces re-measured to the real fonts' width and vertical
   metrics, so the swap changes glyphs but not line breaks (no layout shift). Same unicode-range as
   the webfonts, so a glyph outside it still falls through to the system font. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 106.3%; ascent-override: 91.14%; descent-override: 22.69%; line-gap-override: 0%;
  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: 'Space Grotesk Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 100.06%; ascent-override: 98.34%; descent-override: 29.18%; line-gap-override: 0%;
  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: 'JetBrains Mono Fallback';
  src: local('Menlo'), local('Courier New'), local('Liberation Mono');
  size-adjust: 99.7%; ascent-override: 102.31%; descent-override: 30.09%; line-gap-override: 0%;
  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;
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* clip, not hidden, and the pair is load-bearing: `hidden` alone gives the viewport a non-visible
   overflow, which Chrome on iOS refuses to run its toolbar model for (the page paints a toolbar
   too high). The first line is the fallback for engines without `clip`. */
html { overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--sans);
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
code { font-family: var(--mono); }
em, i { font-style: normal; }
::selection { background: var(--fg); color: var(--bg); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
/* Skip link: hidden until focused, then a plain bar at the top. */
.skip { position: absolute; left: 8px; top: -100px; z-index: 50; padding: 8px 12px; background: var(--fg); color: var(--bg);
  font-family: var(--mono); font-size: var(--t-value); border-radius: var(--radius-sm); }
.skip:focus-visible { top: 8px; }

/* ---------- Page frame ---------- */
.page { max-width: 1040px; margin: 0 auto; padding: 0 28px 64px; position: relative; z-index: 0; }
/* ONE PIXEL, and it is load-bearing. Chrome on iOS paints a stale toolbar offset that nothing in
   the DOM can see; a document that scrolls is corrected by the first drag, and one that fits the
   viewport exactly never is. The head script sets the class for Chrome on iOS only.
   This is half of Retasc's fix. The other half, `documentScrollGuard` in ~/retasc/web/site.js,
   puts back the toolbar-height scroll Chrome on iOS fires after open and tab return; it matters
   once a page is taller than one screen; the landing page (XTNT-106) copied it into site.js. */
html.chrome-document-scroll .page {
  min-height: calc(100vh + 1px);
  min-height: calc(100dvh + 1px);
}

/* ---------- Header / nav ---------- */
.hdr { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 0; position: relative; }
.logo { display: inline-flex; align-items: center; color: var(--fg); }
/* Xtant's horizontal lockup (brand/README.md): 24px tall, above the 20px floor, and the header's
   22px of padding clears its 2u of clear space. Only the cursor takes the accent. */
.lockup { display: block; height: 24px; width: auto; }
.lockup .lk-br { stroke: var(--logo-ink); }
.lockup .lk-word { fill: var(--logo-ink); }
.lockup .lk-cur, .loop .lk-cur { fill: var(--accent); }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a { font-family: var(--mono); font-size: var(--t-value); color: var(--secondary); transition: color .15s; letter-spacing: .02em; }
@media (hover: hover) { .nav a:hover { color: var(--accent-text); } }

/* ---------- Page head ---------- */
.phead { padding: 36px 0 0; }
/* Sized to fill a phone's line, capped at the desktop display size. UI headlines never end with a
   period, and balance keeps a two-line title even. */
.ptitle { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 10.8vw - 4px, 38px);
  line-height: 1.12; letter-spacing: -0.02em; color: var(--fg); max-width: 600px; text-wrap: balance; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--sans); font-size: var(--t-prose); font-weight: 500; padding: 8px 16px;
  border-radius: var(--radius-md); border: 1px solid; cursor: pointer; line-height: 1.5;
  display: inline-flex; align-items: center; justify-content: center; user-select: none;
  transition: background .15s, border-color .15s, color .15s; }
/* The ghost is a button in the button's own face, muted until hover, when the ink comes up and
   the arrow travels. --ghost-pull is how far a ghost is pulled left so its WORDS sit on the edge:
   its 16px padding plus its 1px transparent border. */
.btn.ghost { background: transparent; border-color: transparent; color: var(--secondary); padding: 9px 16px;
  --ghost-pull: calc(-16px - 1px); }
.btn.ghost:hover { color: var(--accent-text); background: transparent; }
/* The trailing arrow is a span only so it can travel on hover, spaced by a word space. */
.btn > .go { display: inline-block; margin-left: .25em; color: var(--accent-text); transition: transform .16s var(--ease-move); }
@media (hover: hover) { .btn:hover > .go { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .btn:hover > .go { transform: none; } }
/* A ghost standing alone in an action row is pulled back flush with the column's edge. */
.actions .btn.ghost:only-child { margin-left: var(--ghost-pull); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: center; padding: 64px 0 0; }
.hero-copy { min-width: 0; }
.hero h1 { font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 3.9vw, 38px); line-height: 1.12; letter-spacing: -0.02em; color: var(--fg);
  text-wrap: balance; }
.hero .sub { font-size: var(--t-lead); line-height: 1.6; color: var(--ink); margin-top: 20px; max-width: 460px; text-wrap: pretty; }
.hero .actions { display: flex; gap: 10px 26px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
/* The fact run under the hero: prose, one ink tier under the lede, the first fact in --fg. */
.statusline { font-family: var(--sans); font-size: var(--t-prose); color: var(--secondary);
  margin-top: 24px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.statusline .sep { color: var(--sep); }
.statusline > span:first-child { color: var(--fg); }
.hero-vis { min-width: 0; }

/* ---------- The loop (Xtant's home diagram) ----------
   Inline SVG, its viewBox cropped to the ink (314 units wide), so a phone shows it at 1:1 from
   332px up (every text at or above the 11px floor down to 320) and a desktop at exactly 1:1. Its objects take the ladder like a
   box on the page (--panel, --panel-line), the arrows are structural ink (--sep), and the one
   chromatic mark is the cursor in the last step, the person's step, as in the logo. */
/* Beside the copy it ends on the page's right edge, where the section rules end; stacked, it
   is centred in the column (the 900px block below). */
.loop { display: block; width: 100%; max-width: 314px; height: auto; margin: 0 0 0 auto; overflow: visible; }
.loop .node { fill: var(--panel); stroke: var(--panel-line); stroke-width: 1; }
/* The person's step, the one the product exists for, is edged in the accent. */
.loop .node.you { stroke: var(--accent); }
.loop .flow { fill: none; stroke: var(--sep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.loop .t { font-family: var(--sans); font-size: var(--t-lead); font-weight: 500; fill: var(--fg); }
.loop .s { font-family: var(--sans); font-size: var(--t-prose); fill: var(--secondary); }
.loop .lk-br { fill: none; stroke: var(--logo-ink); }

/* ---------- Sections ---------- */
.block { border-top: 0; padding-top: 0; margin-top: var(--sec-gap); position: relative; }
.mf { font-family: var(--sans); font-weight: 400;
  font-size: 16px; line-height: 1.6; letter-spacing: 0;
  color: var(--ink); max-width: 34em; text-wrap: balance; }
.block > .mf { margin-bottom: 32px; }
.block .actions:has(.link-pill) { margin-top: 22px; }

/* A section's one link onward: a mono pill on the page's panel rung. */
.link-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-family: var(--mono); font-size: var(--t-value); color: var(--fg); white-space: nowrap;
  background: var(--panel);
  border: 1px solid var(--dim); border-radius: var(--radius-pill); padding: 8px 16px;
  text-decoration: none; transition: border-color .15s, background .15s; }
@media (hover: hover) { .link-pill:hover { background: var(--card); border-color: var(--secondary); } }

/* A section is a title, a rule to the far edge, and a fact at the end of it. The rule sits on the
   title's x-height centre (2.58px below its box centre for Space Grotesk 26/600), the fact on its
   own (1.51px): measured from canvas metrics in Retasc, not eyeballed. */
.sechdr { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.stitle { font-family: var(--display); font-size: var(--t-section); font-weight: 600;
  letter-spacing: -0.015em; color: var(--fg); margin: 0 0 12px; max-width: 720px; text-wrap: balance; }
.sechdr .stitle { flex: 0 1 auto; min-width: 0; margin: 0; }
.sechdr .r { flex: 1; height: 1px; background: var(--panel-edge); position: relative; top: 2.58px; }
.sechdr .m { font-family: var(--mono); font-size: var(--t-value);
  color: var(--secondary); flex: none; position: relative; top: 1.51px; }

/* Alternate sections sit on a full-bleed band, one measured step from the page, with the same
   air on both sides. */
.block.band { padding: var(--band-pad) 0; margin-top: var(--band-gap); }
.block.band + .block { margin-top: var(--band-gap); }
.block.band::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%); background: var(--band);
  border-top: 1px solid var(--panel-edge); border-bottom: 1px solid var(--panel-edge); }

/* ---------- Cards ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
/* A panel takes the layer above the ground it sits on; inside a band it steps the other way,
   because a band is already that layer. */
.card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius-card);
  padding: 22px 22px 20px; display: flex; flex-direction: column; }
.block.band .card { background: var(--panel-sunk); border-color: var(--panel-line); }
.card h3 { font-family: var(--display); font-size: var(--t-card); font-weight: 600; color: var(--fg);
  letter-spacing: -0.01em; text-wrap: balance; }
.card .badge + h3 { margin-top: 12px; }
.card p { font-size: var(--t-prose); color: var(--ink); line-height: 1.55; margin-top: 8px; text-wrap: balance; }
/* The illustration pins to the card's bottom edge so sibling cards share one baseline; the
   floor lives on the paragraph. */
.card .ill { margin-top: auto; }
.card p:has(+ .ill) { margin-bottom: 14px; }
/* Scan-anchor glyph on text-only cards. Cards that carry an illustration never get one. */
.card .cico { display: block; width: 18px; height: 18px; color: var(--accent); margin-bottom: 10px; }
.badge { font-family: var(--mono); font-size: 11px; color: var(--secondary);
  background: transparent; border: 1px solid var(--surface-border); border-radius: var(--radius-sm);
  padding: 4px 8px; display: inline-block; align-self: flex-start; letter-spacing: .02em; }
/* A card's badge is its step number: the accent marks the sequence. */
.card .badge { color: var(--accent-text); }

/* ---------- Illustrations ----------
   One rhythm: 14/16 padding, every row on the same cadence, hairlines between rows. Inside a
   panel the illustration is a well: no fill (three stacked fills is mush) and a visible edge. A
   section-level one (a direct child of a block) is the panel, so it takes the fill ladder like a
   card: up on the page, down on a band. */
.ill { background: transparent; border: 1px solid var(--well-line); border-radius: var(--radius-card);
  padding: 14px 16px; margin-top: 16px; font-family: var(--mono); font-size: var(--t-value);
  display: flex; flex-direction: column; justify-content: center; overflow-x: auto; }
.block > .ill { background: var(--panel); }
.block.band > .ill { background: var(--panel-sunk); }
.cards3 .card .ill { min-height: 130px; }
/* A section-level illustration standing under a lede is held to the lede's own measure. */
.ill-column { max-width: 34em; }
/* Key and value rows. In the narrow three-up cards the key stacks above the value, so values
   never truncate. */
.ill .kv { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; align-items: baseline; padding: 8px 0; }
.ill .kv + .kv { border-top: 1px solid var(--surface-border); }
.cards3 .ill .kv { grid-template-columns: minmax(0,1fr); gap: 3px; }
/* The key is a label, not a kicker: --t-label, sentence case, secondary ink. */
.fk { font-size: var(--t-label); letter-spacing: .02em; color: var(--secondary); }
/* Values wrap: truncating one deletes the fact it carries. */
.fv { font-size: 11.5px; color: var(--fg); line-height: 1.4; min-width: 0; overflow-wrap: break-word; }

/* ---------- FAQ: native details rows ----------
   The +/- marker carries an empty alternative text, so screen readers name each row by its
   question alone; engines without the syntax keep the first declaration. */
.faq { margin-top: 28px; border-top: 1px solid var(--card-border); }
.faq-item { border-bottom: 1px solid var(--card-border); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: baseline;
  justify-content: space-between; gap: 18px; padding: 17px 2px;
  font-family: var(--sans); font-size: var(--t-prose); color: var(--fg);
  transition: color .15s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; content: "+" / ""; font-family: var(--mono); font-size: 15px;
  color: var(--muted); flex: none; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; content: "\2212" / ""; color: var(--accent-text); }
@media (hover: hover) { .faq-item summary:hover { color: var(--fg-strong); } }
.faq-a { font-size: var(--t-prose); color: var(--ink); line-height: 1.6; padding: 0 28px 18px 2px; max-width: 560px; }

/* ---------- Closing card ---------- */
.cta { margin-top: 64px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius-card);
  padding: 34px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cta .t { font-family: var(--display); font-size: var(--t-card); font-weight: 600; letter-spacing: -0.01em; color: var(--fg);
  text-wrap: balance; }
.cta > div:first-child { flex: 1 1 460px; min-width: 0; }
/* A sentence, so prose: Inter at 14 in --ink, with a reading measure. */
.cta .s { font-family: var(--sans); font-size: var(--t-prose); color: var(--ink);
  margin-top: 8px; line-height: 1.55; max-width: 62ch; text-wrap: balance; }

/* Keeps a run of words on one line; a run's separator rides at its end, so a wrap lands only
   after a separator. */
.nb { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Footer ---------- */
.ftr { margin-top: 64px; padding: 30px 0 26px; border-top: 1px solid var(--card-border); }
.ftr-top { display: grid; gap: 26px; }
.ftr-brand { padding-left: 0; }
.ftr-mark { display: inline-flex; color: var(--fg); }
.ftr-legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--card-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  font-family: var(--mono); font-size: var(--t-label); color: var(--muted); }
/* While the legal row is the whole footer, the footer's own rule is its only rule. */
.ftr-legal:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ftr-legal .ftr-r { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.ftr-legal a { font-size: var(--t-label); color: var(--muted); padding: 3px 0; }
@media (hover: hover) { .ftr-legal a:hover { color: var(--accent-text); } }

/* ---------- Legal prose (privacy and terms, XTNT-77) ---------- */
/* Copied from ~/retasc/web/styles.css, "Legal prose", with the long-form h2 it shares with
   Retasc's guides, values unchanged. */
.hi { color: var(--fg); font-weight: 500; }
.legal { max-width: 720px; }
.updated.legal { font-family: var(--mono); font-size: var(--t-label); color: var(--muted); margin-top: 14px; }
.legal h2 { font-family: var(--display); font-size: 23px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--fg); margin-bottom: 14px; scroll-margin-top: 24px; margin-top: 34px; }
.legal p, .legal li { font-size: 16px; color: var(--ink); line-height: 1.7; }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 10px 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--fg-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Tablets and phones ---------- */
/* The nav needs about 420px beside the lockup; Retasc folds its nav at 700. With no other page to
   reach, the in-page links are left out there instead of moving into a menu. */
@media (max-width: 700px) {
  .nav { display: none; }
}
@media (max-width: 900px) {
  /* Stacked hero: the headline owns the full column. */
  .hero { display: block; padding: 44px 0 0; }
  .hero h1 { font-size: clamp(30px, 11.9vw - 4px, 38px); }
  /* Stacked, the diagram is centred in the column (asked by the human, 2026-10-09: "center the
     red marked section on the phone"): it is narrower than the column on most phones, and
     left-aligned it left an empty gutter on the right. */
  .hero-vis { margin-top: 28px; }
  .loop { margin: 0 auto; }
  .cards3, .cards2 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
  /* The section fact does not survive the phone: without the rule it hangs off as a grey line.
     The title wraps on its own row like the prose it is. */
  .sechdr { flex-wrap: wrap; gap: 4px 18px; }
  .sechdr .r { display: none; }
  .sechdr .m { display: none; }
  .sechdr .stitle { flex: 1 1 100%; min-width: 0; }
  .ftr-top { gap: 20px; }
}
@media (max-width: 640px) {
  /* One phone display size for every page title: two lines from 320 to 640. */
  .hero h1, .ptitle { font-size: clamp(28px, 9.6vw, 32px); }
  .legal h2 { font-size: 20px; }
  .page { padding: 0 18px 44px; }
  :root { --sec-gap: 40px; --band-gap: 28px; --band-pad: 32px; }
  .block > .mf { margin-bottom: 22px; }
  .card { padding: 18px 16px 16px; }
  /* The hero's actions fill the column, ink on its left edge. */
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { width: 100%; justify-content: flex-start; }
  /* The fact run: unbreakable chunks, a middot attached to the item before the break, so a
     wrapped line ends on a dot and never opens with a separator. */
  .statusline { gap: 4px 0; margin-top: 16px; }
  .statusline .sep { display: none; }
  .statusline > span:not(.sep) { white-space: nowrap; }
  .statusline > span:not(.sep):not(:last-child)::after { content: "\00b7"; color: var(--sep); margin: 0 9px; }
  .cta { padding: 26px 16px; }
}
/* Below 420 a pill's label wraps inside the pill instead of running past the column. */
@media (max-width: 419px) {
  .link-pill { white-space: normal; max-width: 100%; text-align: center; }
}

/* The rate card (/pricing, XTNT-76): its prices, key amounts and section labels in the accent. */
.rate { color: var(--accent-text); }
.rates .sechdr .m { color: var(--accent-text); }