/* Nexus — the product site (compendiumnav.com). The Nexus brand, as on the
   app's home screen and the Tracks pages: Nexus navy, the hub blue, the mark in
   white with its blue hub, Source Sans 3. The app's own screens carry the page.
   Layout: navy bands for what Nexus is, light bands for what it does, each a
   phone beside plain words. */
/* Source Sans 3 (SIL Open Font License), served with the site: no font host sees our visitors. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/source-sans-3-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 {
  --navy: #0a3053;
  --navy-deep: #071f37;
  --hub: #3880ff;
  --on-navy: #f8fafc;
  --on-navy-muted: rgba(248, 250, 252, 0.74);
  --on-navy-line: rgba(248, 250, 252, 0.14);
  --bg: #f1f5f9;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: rgba(15, 23, 42, 0.68);
  --line: rgba(15, 23, 42, 0.10);
  --accent: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.10);
  --sea: #0f766e;
  --sea-soft: rgba(13, 148, 136, 0.12);
  --slate: #475569;
  --slate-soft: rgba(71, 85, 105, 0.12);
  --contour: rgba(147, 197, 253, 0.16);
  --frame: #0b1220;
  --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1120px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1726; --surface: #16212f; --text: #f1f5f9; --muted: rgba(241, 245, 249, 0.70);
    --line: rgba(241, 245, 249, 0.12); --accent: #93c5fd; --accent-soft: rgba(96, 165, 250, 0.16);
    --sea: #5eead4; --sea-soft: rgba(45, 212, 191, 0.16); --slate: #cbd5e1; --slate-soft: rgba(203, 213, 225, 0.14);
    --frame: #020617; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1726; --surface: #16212f; --text: #f1f5f9; --muted: rgba(241, 245, 249, 0.70);
  --line: rgba(241, 245, 249, 0.12); --accent: #93c5fd; --accent-soft: rgba(96, 165, 250, 0.16);
  --sea: #5eead4; --sea-soft: rgba(45, 212, 191, 0.16); --slate: #cbd5e1; --slate-soft: rgba(203, 213, 225, 0.14);
  --frame: #020617; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 18px; line-height: 1.55; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--hub); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }
@media (max-width: 599px) { .wrap { padding-inline: 18px; } }

/* ---- The Nexus bar ------------------------------------------------------- */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--navy); color: var(--on-navy); border-bottom: 1px solid var(--on-navy-line); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--on-navy); text-decoration: none; min-height: 44px; }
.mark { width: 48px; height: 48px; flex: none; }
.brand-words { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: 30px; font-weight: 700; letter-spacing: 0.05em; }
.brand-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-navy-muted); margin-top: 5px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--on-navy-muted); text-decoration: none; font-weight: 600; font-size: 16px; padding: 10px 12px; border-radius: 10px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-navy); background: rgba(248, 250, 252, 0.08); }
.nav .cta-small { color: #ffffff; background: var(--hub); }
.nav .cta-small:hover { background: var(--hub); filter: brightness(1.08); }
@media (max-width: 779px) { .nav .hide-narrow { display: none; } }
/* A phone: the mark, the name and the one button, each on one line. */
.nav a, .brand-sub { white-space: nowrap; }
@media (max-width: 479px) { .nav .hide-phone { display: none; } }
/* The brand comes first: on the narrowest phones the bar's own button steps aside (the hero's is right below), the brand never shrinks for it. */
@media (max-width: 599px) { .bar .mark { width: 42px; height: 42px; } .bar .brand-name { font-size: 27px; } }
@media (max-width: 379px) { .nav .cta-small { display: none; } }

/* ---- Navy bands (the hero, the price, the list) ------------------------- */
.navy { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; }
.navy.deep { background: var(--navy-deep); }
/* Depth contours behind the hero: the one ornament, from the chart itself. */
.contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.contours path { fill: none; stroke: var(--contour); stroke-width: 1.2; }
.navy .lead, .navy p { color: var(--on-navy-muted); }
.navy a { color: #bfdbfe; }

.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; padding-block: 64px 72px; }
@media (max-width: 879px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 44px 56px; } }
.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #93c5fd; }
.light .eyebrow { color: var(--accent); }
h1 { margin: 0; font-size: clamp(40px, 6.4vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
h2 { margin: 0; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
h3 { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.lead { margin: 18px 0 0; font-size: 21px; line-height: 1.5; max-width: 36rem; }
.actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border-radius: 14px; background: var(--hub); color: #ffffff; font: inherit; font-size: 18px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
.button:hover { filter: brightness(1.08); }
.soon { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--on-navy-line); color: var(--on-navy-muted); font-size: 16px; font-weight: 600; }
.soon svg { width: 20px; height: 20px; flex: none; }
.facts { margin: 34px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 16px; font-weight: 600; color: var(--on-navy); }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hub); flex: none; }

/* ---- The phones --------------------------------------------------------- */
/* A frame, then a black bezel, then the screen: the screen sits inset as on a real phone, so nothing in the app's corners meets the frame. */
.phone { margin: 0; width: 100%; max-width: 300px; aspect-ratio: 393 / 852; box-sizing: content-box; border-radius: 48px; border: 4px solid var(--frame); padding: 9px; background: #000; overflow: hidden; box-shadow: 0 30px 70px rgba(2, 6, 23, 0.35), 0 0 0 1px rgba(148, 163, 184, 0.18); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 36px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone { border-color: #1e293b; } }
:root[data-theme="dark"] .phone { border-color: #1e293b; }
.hero .phone { justify-self: center; max-width: 320px; transform: rotate(2deg); }
@media (prefers-reduced-motion: no-preference) { .hero .phone { transition: transform 0.6s ease; } .hero .phone:hover { transform: rotate(0deg); } }
.phones { display: flex; gap: 22px; justify-content: center; align-items: flex-start; }
.phones .phone { max-width: 260px; }
.phones .phone:nth-child(2) { margin-top: 56px; }
@media (max-width: 599px) { .phones .phone:nth-child(2) { display: none; } .phones .phone { max-width: 280px; } }
.caption { margin: 14px auto 0; max-width: 300px; font-size: 14px; line-height: 1.4; color: var(--muted); text-align: center; }

/* ---- The light bands: what it does -------------------------------------- */
.light { padding-block: 88px; }
.light + .light { border-top: 1px solid var(--line); }
@media (max-width: 599px) { .light { padding-block: 60px; } }
.feature .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.feature.flip .wrap > .words { order: 2; }
@media (max-width: 879px) { .feature .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; } .feature.flip .wrap > .words { order: 0; } }
.intro { margin: 16px 0 0; font-size: 20px; color: var(--muted); max-width: 34rem; }
#nexus .intro { max-width: 46rem; }
.tagline { color: var(--text); font-weight: 800; }
.points { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.points li { display: grid; gap: 4px; padding-left: 18px; border-left: 3px solid var(--line); }
.points h3 { font-size: 19px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.points p { margin: 0; color: var(--muted); font-size: 17px; }
/* What the app shows, quoted as the app shows it. */
.quote { font-family: var(--mono); font-size: 0.86em; color: var(--text); background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Status on a feature or a device: blue and teal and slate, never warning colours. */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.now { color: var(--sea); background: var(--sea-soft); }
.status.testing { color: var(--accent); background: var(--accent-soft); }
.status.dev, .status.design { color: var(--slate); background: var(--slate-soft); }

/* ---- Why it's called Nexus: what comes in, the mark, what you're told ------ */
.hub { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 28px; align-items: center; }
@media (max-width: 879px) { .hub { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.hub h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 16px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.hub-mid { display: grid; justify-items: center; gap: 8px; padding: 26px; border-radius: 50%; background: var(--navy); color: var(--on-navy); width: 168px; height: 168px; align-content: center; box-shadow: 0 0 0 10px var(--accent-soft), 0 0 0 22px rgba(56, 128, 255, 0.06); }
.hub-mid .hub-mark { width: 84px; height: 84px; }
.hub-mid span { font-size: 18px; font-weight: 700; letter-spacing: 0.08em; }
@media (max-width: 879px) { .hub-mid { justify-self: center; width: 136px; height: 136px; } .hub-mid .hub-mark { width: 64px; height: 64px; } }
.said { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.said li { font-size: 17px; font-weight: 600; padding: 12px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--text); }

/* ---- More of what it does: a grid of plain cards ------------------------- */
.grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 879px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; align-content: start; justify-items: start; gap: 8px; }
.card p { margin: 0; color: var(--muted); font-size: 17px; }
.card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card .icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.card .icon svg { width: 22px; height: 22px; }

/* ---- How it works -------------------------------------------------------- */
.how { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; }
.how > div { padding: 26px; display: grid; gap: 8px; align-content: start; }
.how > div + div { border-left: 1px solid var(--line); }
@media (max-width: 879px) { .how { grid-template-columns: minmax(0, 1fr); } .how > div + div { border-left: 0; border-top: 1px solid var(--line); } }
.how .where { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.how p { margin: 0; color: var(--muted); font-size: 17px; }
.fine { margin: 22px 0 0; font-size: 16px; color: var(--muted); max-width: 46rem; }

/* ---- The price band ------------------------------------------------------ */
.price .wrap { position: relative; padding-block: 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 879px) { .price .wrap { grid-template-columns: minmax(0, 1fr); padding-block: 60px; gap: 28px; } }
.fee { display: grid; gap: 4px; padding: 30px; border-radius: 22px; border: 1px solid var(--on-navy-line); background: rgba(248, 250, 252, 0.04); }
.fee .label { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-navy-muted); }
.fee .amount { font-size: clamp(64px, 10vw, 104px); line-height: 1; font-weight: 800; color: var(--on-navy); font-variant-numeric: tabular-nums; }
.fee .amount small { font-size: 0.32em; font-weight: 700; color: var(--on-navy-muted); }
.fee p { margin: 8px 0 0; font-size: 17px; }

/* The savings, on the navy price band: quiet cards, the same grid as elsewhere. */
.savings { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
@media (max-width: 879px) { .savings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .savings { grid-template-columns: minmax(0, 1fr); } }
.saving { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 22px; border-radius: 18px; border: 1px solid var(--on-navy-line); background: rgba(248, 250, 252, 0.04); }
.saving h3 { color: var(--on-navy); font-size: 19px; }
.saving p { margin: 0; font-size: 16.5px; color: var(--on-navy-muted); }
.saving .icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #93c5fd; background: rgba(56, 128, 255, 0.18); }
.saving .icon svg { width: 22px; height: 22px; }

/* ---- Hardware ------------------------------------------------------------ */
.devices { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 879px) { .devices { grid-template-columns: minmax(0, 1fr); } }
.device { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 10px; align-content: start; justify-items: start; color: inherit; text-decoration: none; }
a.device:hover { border-color: var(--accent); }
.device p { margin: 0; color: var(--muted); font-size: 17px; }
.device .more { font-weight: 700; color: var(--accent); font-size: 16px; }

/* A device's own section on the Hardware page. */
.product { padding-block: 72px; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.product .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; }
@media (max-width: 879px) { .product .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.product .head { display: grid; gap: 12px; justify-items: start; }
.product .what { margin: 18px 0 0; font-size: 19px; color: var(--muted); }
.specs { margin: 24px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; font-size: 17px; }
.specs dt { font-weight: 700; color: var(--text); }
.specs dd { margin: 0; color: var(--muted); }
@media (max-width: 599px) { .specs { grid-template-columns: minmax(0, 1fr); gap: 2px; } .specs dd { margin-bottom: 10px; } }
/* Workshop notes: dated, newest first, the way the work happened. */
.notes { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.notes h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.notes ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.notes li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 12px; font-size: 16px; }
.notes time { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.notes p { margin: 0; color: var(--muted); }
.notes li.next time { color: var(--accent); }

/* ---- Support, Privacy, Terms, your account: a page head, then the text ----- */
.page-head .wrap { padding-block: 48px 52px; }
.page-head h1 { font-size: clamp(34px, 5vw, 50px); }
.page-head .lead { font-size: 19px; }
.doc { padding-block: 48px 80px; }
.doc .wrap { max-width: 860px; }
.doc .section + .section { margin-top: 44px; }
.doc h2 { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 18px; }
.doc h3 { font-size: 21px; margin: 30px 0 8px; }
.doc p, .doc li { font-size: 18px; line-height: 1.6; color: var(--muted); }
.doc p { margin: 0 0 14px; max-width: 46rem; }
.doc ul { margin: 0 0 16px; padding-left: 22px; max-width: 46rem; }
.doc li + li { margin-top: 6px; }
.doc strong { color: var(--text); }
.doc .grid { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) { .doc .grid { grid-template-columns: minmax(0, 1fr); } }
.doc .card h3 { margin: 0 0 4px; font-size: 19px; }
.doc .card p { margin: 0; font-size: 17px; }
.doc .notice { margin: 18px 0; padding: 16px 20px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--line); }
.doc .notice p { margin: 0; color: var(--text); }
.doc .notice p + p { margin-top: 8px; }

/* ---- The guide (docs/guide → /guide): steps, screenshots beside the text, callouts ---- */
.guide .wrap { max-width: 900px; }
.guide h2 { margin-top: 44px; }
.guide h2:first-child { margin-top: 0; }
.guide ol.steps { counter-reset: step; list-style: none; padding-left: 0; display: grid; gap: 10px; }
.guide ol.steps li { counter-increment: step; position: relative; padding-left: 44px; min-height: 30px; }
.guide ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #ffffff; background: var(--hub); }
.guide .guide-shot { margin: 22px 0 26px; display: grid; justify-items: center; gap: 10px; }
.guide .guide-shot .phone { max-width: 250px; }
.guide .guide-shot figcaption { font-size: 15px; color: var(--muted); text-align: center; max-width: 30rem; }
.guide .callout { margin: 20px 0; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--accent-soft); }
.guide .callout p { margin: 0; color: var(--text); }
.guide .callout.warning { background: rgba(217, 119, 6, 0.10); border-color: rgba(217, 119, 6, 0.35); }
.guide .callout.tip { background: var(--sea-soft); }
.guide code { font-family: var(--mono); font-size: 0.9em; background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; }
.guide-version { margin-top: 36px; font-size: 14px; color: var(--muted); }
.guide-nav { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-weight: 700; }
.guide-nav a { text-decoration: none; }
.guide-contents { list-style: none; padding: 0; display: grid; gap: 12px; }
.guide-contents li > a, .guide-contents li.coming { display: grid; gap: 4px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; }
.guide-contents li > a:hover { border-color: var(--accent); }
.guide-contents strong { font-size: 19px; color: var(--text); }
.guide-contents span { font-size: 16px; color: var(--muted); }
.guide-contents li.coming { opacity: 0.7; }
/* A section's own pages, under it in the contents: a quieter, indented list. */
.guide-sub { list-style: none; padding: 0 0 0 20px; margin: 10px 0 0; display: grid; gap: 8px; }
.guide-sub li > a, .guide-sub li.coming { padding: 12px 16px; border-radius: 12px; }
.guide-sub strong { font-size: 17px; }
.guide-sub span { font-size: 15px; }

/* ---- Questions ----------------------------------------------------------- */
.faq { margin-top: 36px; display: grid; gap: 12px; max-width: 52rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; font-size: 19px; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 26px; font-weight: 400; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: var(--muted); font-size: 17px; }

/* ---- The list ------------------------------------------------------------ */
.list .wrap { position: relative; padding-block: 84px; display: grid; gap: 18px; justify-items: start; }
.email { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.email code { font-family: var(--mono); font-size: 18px; overflow-wrap: anywhere; color: var(--on-navy); background: rgba(248, 250, 252, 0.08); padding: 12px 16px; border-radius: 12px; user-select: all; }

/* ---- The foot ------------------------------------------------------------ */
.foot { background: var(--navy-deep); color: var(--on-navy-muted); font-size: 15px; }
.foot .wrap { padding-block: 36px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot a { color: var(--on-navy-muted); text-decoration: none; }
.foot a:hover { color: var(--on-navy); text-decoration: underline; }
.foot .brand .mark { width: 28px; height: 28px; }
.foot .brand-name { font-size: 18px; }
.star { color: var(--hub); font-weight: 800; margin-left: 2px; }
/* The small print: under a line, left-aligned as one block; a footnote's mark sits beside its words. */
.foot .foot-notes { display: block; margin: 0 auto; padding-block: 18px calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--on-navy-line); }
.foot .foot-notes p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--on-navy-muted); max-width: 52rem; }
.foot .foot-notes p + p { margin-top: 8px; }
.foot .note { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); column-gap: 4px; }
.foot .note-mark { color: var(--hub); font-weight: 800; }
.foot .tm { opacity: 0.8; }