/* build: v=13 sha256=0b165298f0cd861f */
/* NextUpBooking — apex (nextupbooking.com) static site.
   Served by nginx from deploy/apex/ on 127.0.0.1:8081; see
   deploy/cloudflared-config.yml. Self-contained: no external fonts, no CDN.
   The sign-in form uses one small inline script in index.html; every page
   must still render fully with JavaScript disabled. Domain-reputation and
   10DLC reviewers fetch these pages directly. */

:root {
  color-scheme: light;
  /* Layer scale (2026-09-03), mirroring the app's --z-* ladder: every
     z-index in site.css must come from this scale, never a bare number.
     topbar < panel < scrim < drawer < skip, reading bottom to top. */
  --z-topbar: 10;      /* sticky bar */
  --z-panel: 20;       /* display-options dropdown */
  --z-scrim: 80;       /* nav drawer backdrop */
  --z-drawer: 90;      /* mobile nav drawer */
  --z-skip: 200;       /* skip link, above everything */
  /* Soft neutral teal + amber/orange duality. Teal is the primary brand
     color; orange is the warm counterweight (highlights, callouts). */
  --ink: #22323a;
  --ink-soft: #3d5158;
  --ink-mute: #55696f;
  /* 5.22:1 on white, 4.60:1 on --tint. Was #7e9096 (3.32:1), which
     failed 1.4.3 on every small muted label on the demo page. */
  --ink-faint: #5a7078;
  --line: #d8e3e7;
  --line-strong: #bfd1d8;
  --tint: #eaf2f5;
  /* Teal sampled from the whale in logo-mark.png (dominant body colour
     #125a6c). The palette used to be a GREEN teal (#177e7a) while the logo
     is a BLUE teal, so the brand mark never matched the site around it.
     Retuned site-wide 2026-08-30. */
  --accent: #125a6c;          /* teal */
  --accent-deep: #0d4658;
  --accent-warm: #d97a3d;     /* soft burnt orange */
  --accent-warm-deep: #b25f28;
  --accent-warm-darkest: #96491c;   /* Sign in button hover */
  /* Text-safe orange. --accent-warm-deep is only 4.13:1 on --warm-tint,
     under AA for 0.9rem nav text; this is 5.05:1 on the same ground. */
  --accent-warm-ink: #9d5423;
  --warm-tint: #faf1e9;
  /* The whale's light highlight teal, sampled from logo-mark.png. Used for
     the current nav tab against the dark teal bar: it is the only value in
     the family that clears BOTH 3:1 against the bar (3.45:1, so the pill has
     a visible edge) and 4.5:1 for its label (5.22:1 with --accent-darkest). */
  --teal-hi: #6cbab4;
  --accent-darkest: #0b3d4c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  /* Not background-attachment: fixed — that paints the gradient to the
     viewport only, leaving a long legal page (or a print/PDF of one, which
     is how reviewers often read these) white below the fold. */
  background: linear-gradient(160deg, #f7fafb 0%, #eef4f6 60%, #e8f0f3 100%);
  background-color: #e8f0f3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

a { color: var(--accent); }
a:hover { color: var(--accent-deep); }

/* ---------- chrome ---------- */

.brand {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.topnav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.9rem; }
.topnav a { color: var(--ink-mute); text-decoration: none; white-space: nowrap; }
.topnav a:hover { color: var(--accent); text-decoration: underline; }

main { flex: 1; width: 100%; }

footer {
  border-top: 1px solid var(--line);
  background: #ffffff99;
  padding: 1.6rem 1.5rem 2rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.footnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.footnav a { color: var(--ink-mute); text-decoration: none; }
.footnav a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- hero ---------- */

.hero {
  max-width: 34rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
}
.mark {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.6rem;
  background: #ffffffaa;
}
.hero h1 { font-size: 2.1rem; line-height: 1.2; margin-bottom: 0.9rem; letter-spacing: -0.02em; }
.tagline { font-size: 1.08rem; color: var(--ink-soft); margin-bottom: 2rem; }
.hint {
  font-size: 0.95rem;
  color: var(--ink-mute);
  background: #ffffffcc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-align: left;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--tint);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  color: var(--ink-soft);
}

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

.prose {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.25rem 1.5rem;
  border-top: 1px solid var(--line);
}
.hero + .prose { border-top: 1px solid var(--line); }
.prose h2 {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}
.prose h3 {
  font-size: 1rem;
  margin: 1.6rem 0 0.5rem;
  color: var(--ink);
}
.prose p { margin-bottom: 0.9rem; color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0 0 0.9rem 1.3rem; color: var(--ink-soft); }
.prose li { margin-bottom: 0.35rem; }
.prose p:last-child, .prose ul:last-child { margin-bottom: 0; }

.disclosure {
  margin: 0 0 0.9rem;
  padding: 0.9rem 1.1rem;
  background: #ffffffdd;
  border-left: 3px solid var(--line-strong);
  border-radius: 0 8px 8px 0;
  font-size: 0.97rem;
  color: var(--ink);
}
.callout {
  padding: 0.85rem 1.1rem;
  background: #fff8e8;
  border: 1px solid #eddcb4;
  border-radius: 8px;
  color: #5d4a1f !important;
}
.fineprint { font-size: 0.9rem; color: var(--ink-mute) !important; }
.updated { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 1.6rem; }

@media (max-width: 480px) {
  .hero { padding-top: 2.5rem; }
  .hero h1 { font-size: 1.72rem; }
  .hero-logo { width: 150px; }
}

/* ---------- redesign additions (2026-08-24) ---------- */

.hero { max-width: 42rem; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.btn {
  display: inline-block;
  border-radius: 10px;
  padding: 0.6rem 1.3rem;
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff !important; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }
.btn-quiet {
  color: var(--ink) !important;
  background: #ffffffdd;
  border-color: var(--line-strong);
}
.btn-quiet:hover { border-color: var(--accent); color: var(--accent) !important; }

/* How-it-works step strip */
.steps { list-style: none !important; margin-left: 0 !important; }
.steps li {
  position: relative;
  padding: 0 0 1.4rem 2.6rem;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--tint);
  border: 1px solid var(--line-strong);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Alternate teal / orange step markers for the two-tone rhythm */
.steps li:nth-child(even)::before {
  color: var(--accent-warm-deep);
  background: var(--warm-tint);
  border-color: #ecd5bd;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 2.1rem;
  bottom: -0.1rem;
  width: 1px;
  background: var(--line);
}
.steps h2, .steps h3 { margin-top: 0 !important; }
/* Step headings are h2 for the heading ladder, but must not inherit the
   section-heading size from .prose h2. */
.steps h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: 0.5rem; }
.steps p:last-child { margin-bottom: 0; }

/* Sign-in panel */
.panel {
  background: #ffffffcc;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* Standalone subpages (how-it-works, about, sign-in) */
.page-lead { padding-top: 3rem; }
.page-lead h1 {
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.page-lead .tagline { margin-bottom: 2rem; }

/* Collapsible "read more" cascade (SMS program) */
.cascade {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffffbb;
  padding: 0.2rem 1.1rem;
  margin-top: 0.4rem;
}
.cascade > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  padding: 0.75rem 0.25rem;
  margin: 0 -0.25rem;
  border-radius: 8px;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.cascade > summary::-webkit-details-marker { display: none; }
/* Inline marker so the triangle hugs the label instead of drifting to the
   card's far-left edge */
.cascade > summary::before {
  content: "▸";
  display: inline-block;
  width: 1.1em;
  margin-right: 0.35rem;
  color: var(--accent);
  transition: transform 0.15s ease;
}
.cascade[open] > summary::before { transform: rotate(90deg); }
/* Generous invisible touch target on phones without changing the visual row */
@media (pointer: coarse) {
  .cascade > summary { padding: 0.95rem 0.25rem; }
}
.cascade > summary:hover { color: var(--accent-deep); }
.cascade[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 0.9rem; }
.cascade > p:first-of-type { padding-top: 0.3rem; }

/* Warm orange accents: hero logo, callout, step markers alternate */
.hero-logo {
  display: block;
  width: 190px;
  height: auto;
  margin: 0 auto 1.4rem;
  mix-blend-mode: multiply;
}
.hero h1 { color: var(--accent-deep); }
.hero h1 em, .hero h1 strong { color: var(--accent-warm-deep); font-style: normal; }
.mark { border-color: var(--line-strong); }
/* No .hero-actions .btn-primary override any more: the hero's orange
   "See how it works" button was removed on 2026-08-30 as a duplicate of the
   How it works nav tab, leaving one centred .btn-quiet. The only orange
   button on the site is now the nav's Sign in. */
.callout {
  background: var(--warm-tint);
  border-color: #ecd5bd;
  color: #7a4a20 !important;
}
.signin-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 1rem 0 0.5rem;
}
.signin-form label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-mute);
  margin-top: 0.5rem;
}
.signin-form input {
  font: inherit;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.signin-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.signin-form .btn { margin-top: 1rem; align-self: flex-start; }
.form-status { min-height: 1.3em; font-size: 0.92rem; color: var(--ink-mute); }

/* ---------- nav bar (2026-08-30) ----------
   One floating rounded bar rather than a full-width strip: brand at the left,
   an evenly spaced run of tabs, and exactly one solid button at the right.
   Teal is the interactive colour (hover, focus, the Sign in button), orange
   marks the page you are on. The current tab is driven by aria-current="page",
   which every page sets on its own link, so it works with JavaScript disabled
   -- a hard requirement here, since 10DLC and domain reviewers fetch these
   pages directly. */

/* Full width and fully opaque, deliberately. The floating capsule tried
   2026-08-30 let page content show through the bar and around its rounded
   ends while scrolling, which made the header read as part of the page rather
   than as chrome. Solid white, edge to edge, so content passes cleanly
   underneath. #ffffffaa (the pre-2026-08-30 value) is NOT opaque -- the aa is
   67% alpha -- which is why the background here is a flat #fff. */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  width: 100%;
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--accent-darkest);
  background: var(--accent);          /* opaque: nothing shows through */
  box-shadow: 0 1px 3px rgba(9, 40, 50, 0.22);
}

.brand { color: #ffffff; }

/* Anchor targets (/#sms-program) must not land under the sticky bar. */
html { scroll-padding-top: 4.5rem; }

/* .prose carries a border-top as a section divider. Against the old
   full-width header that read as the header's own edge; under a floating
   capsule it reads as a stray rule, so the first section drops it. */
main > .prose:first-child { border-top: none; }

.topnav {
  margin-left: auto;
  gap: 0.35rem 0.4rem;
  align-items: center;
  flex-wrap: nowrap;
}

.topnav a {
  padding: 0.36rem 0.78rem;
  border: 1px solid transparent;
  border-radius: 8px;   /* the .btn language, scaled down for the bar */
  line-height: 1.3;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.topnav a { color: #dceaf0; }   /* 6.31:1 on the bar */

.topnav a:not(.nav-cta):hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
  text-decoration: none;        /* the pill replaces the underline */
}

/* White, not --accent: a teal focus ring is invisible on a teal bar. */
.topnav a:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }

/* The single call to action. Solid, so nothing else on the bar competes. */
/* The one orange button on the site. --accent-warm-deep rather than
   --accent-warm: white on #d97a3d is 3.09:1, under AA for button text, while
   #b25f28 is 4.60:1 and still reads as the same burnt orange. */
.topnav a.nav-cta {
  color: #fff;
  background: var(--accent-warm-deep);
  border-color: var(--accent-warm-deep);
  font-weight: 600;
  border-radius: 10px;
  padding: 0.4rem 1rem;
  margin-left: 0.45rem;
}
.topnav a.nav-cta:hover {
  color: #fff;
  background: var(--accent-warm-darkest);
  border-color: var(--accent-warm-darkest);
  text-decoration: none;
}

/* You are here. The whale's light highlight teal against the dark teal bar --
   a lighter subset of the same family, so it reads as "this one" without
   competing with the orange Sign in button beside it. Last in the file on
   purpose: it must also win on sign-in.html, where the current tab IS the
   button. */
.topnav a[aria-current="page"],
.topnav a[aria-current="page"]:hover {
  color: var(--accent-darkest);
  background: var(--teal-hi);
  border-color: #8fc9c3;
  font-weight: 600;
  text-decoration: none;
  cursor: default;
}

/* Narrow screens: the capsule becomes a rounded card and the tabs wrap. */
@media (max-width: 800px) {
  .topbar {
    position: static;
    flex-wrap: wrap;
    padding: 0.7rem 1.1rem;
  }
  /* space-between leaves a lone brand on its own row looking centred. */
  .topbar { justify-content: flex-start; }
  .brand { flex: 1 0 100%; }
  .topnav { margin-left: -0.7rem; flex-wrap: wrap; gap: 0.25rem 0.1rem; }
}

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

/* ---------- mobile nav drawer (<640px) ----------
   The bar's eight controls wrapped to two rows on a 400px phone. Under 640px
   the nav collapses into an off-canvas drawer behind a hamburger: same
   pattern as the tenant app's sidebar drawer (hamburger with aria-expanded,
   focus trap, focus restoration, Escape/scrim/destination close, matchMedia
   reset, icons AND labels). Sign in stays OUT of the menu, pinned visible
   beside the hamburger. Above 640px none of this exists. */
.nav-toggle {
  display: none;
  font: inherit;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.nav-toggle[aria-expanded="true"] {
  color: var(--accent-darkest);
  background: var(--teal-hi);
  border-color: var(--teal-hi);
}
/* The hamburger is an icon control; the accessible name comes from the
   visually-hidden span inside it, not from the bars. */
.nav-toggle .bars { display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 1px; position: relative; }
.nav-toggle .bars + .bars { margin-top: 5px; }

@media (max-width: 640px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    flex-wrap: nowrap;
    padding: 0.6rem 0.9rem;
  }
  /* bar row: brand ... [Aa] [Sign in] [hamburger] */
  .brand { flex: 1 1 auto; min-width: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { display: flex; flex: 0 0 auto;
    align-items: center; gap: 0.45rem; margin-left: auto; }
  .topbar-actions .nav-cta { margin-left: 0;
    min-height: 44px; display: inline-flex; align-items: center;
    padding: 0.4rem 1rem; }
  .nav-toggle { display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0;
    min-width: 44px; min-height: 44px; }
  .topbar .a11y-toggle { min-width: 44px; min-height: 44px; }

  /* The topnav itself becomes the drawer. */
  .topnav {
    position: fixed;
    inset: 0 0 0 auto;               /* right edge, full height */
    width: min(20rem, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    margin: 0;
    padding: 1rem 0.9rem 1.5rem;
    background: var(--accent);
    border-left: 1px solid var(--accent-darkest);
    box-shadow: -12px 0 30px rgba(9, 40, 50, 0.28);
    transform: translateX(100%);     /* off-canvas until open */
    visibility: hidden;              /* closed = out of the a11y tree: a
                                        merely off-screen drawer still has
                                        focusable links, which is an
                                        aria-hidden-focus violation and a
                                        keyboard trap. visibility loses focus
                                        order and is restored when open. */
    transition: transform 0.2s ease, visibility 0.2s;
    overflow-y: auto;
    z-index: var(--z-drawer);
  }
  .topnav.nav-open { transform: translateX(0); visibility: visible; }
  .topnav a:not(.nav-cta) {
    color: #ffffff;
    font-size: 1.02rem;
    padding: 0.8rem 0.7rem;
    border-radius: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .topnav a:not(.nav-cta):hover { background: rgba(255, 255, 255, 0.12); }
  .topnav a[aria-current="page"],
  .topnav a[aria-current="page"]:hover {
    background: var(--teal-hi);
    color: var(--accent-darkest);
  }
  /* Sign in is NOT in the menu (it stays on the bar), but if a page ever
     renders it in there anyway it must still look like a button. */
  .topnav a.nav-cta { margin: 0.75rem 0.7rem 0; text-align: center; }

  /* Scrim between the drawer and the page. */
  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(6, 26, 34, 0.5);
    z-index: var(--z-scrim);
  }
  .nav-scrim[hidden] { display: none; }

  /* The display-options dropdown anchors to the bar; keep it under the
     drawer so an open menu wins. */
  .a11y-panel { z-index: var(--z-panel); }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .topnav { transition: none; }
}

/* ---------- accessibility (2026-08-30) ----------
   Built after an axe-core audit of all 8 pages. Three things live here:
   a skip link, one focus style that works on every surface in the palette,
   and the display options panel. */

/* Bypass blocks (SC 2.4.1). The header is a brand plus seven tabs plus the
   Sign in button, on every page: 8 controls before any content. */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: var(--z-skip);
  padding: 0.6rem 1rem;
  background: #ffffff;
  color: var(--accent-darkest);
  font-weight: 600;
  border: 2px solid var(--accent-darkest);
  border-radius: 8px;
  text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }
main:focus { outline: none; }   /* it is a scroll target, not a control */

/* Visible focus (SC 2.4.7), one rule for everything. --accent-darkest clears
   3:1 against every surface it can land on: white 11.8:1, the page gradient
   10.2:1, --warm-tint 10.5:1, the current nav tab 5.2:1. The teal bar is the
   one exception and overrides to white above. */
:focus-visible {
  outline: 3px solid var(--accent-darkest);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Long unbreakable strings are the classic reflow (SC 1.4.10) trap: at 320px
   with Larger text on, <code>yourstudio.nextupbooking.com</code> was 288px
   wide inside a 320px viewport and pushed three pages into sideways scrolling.
   'anywhere' rather than 'break-word' because only 'anywhere' shrinks the
   element's min-content width, which is what the layout actually measures. */
code { overflow-wrap: anywhere; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- display options ---- */

/* Hidden until a11y.js unhides it, so a JavaScript-off visitor never meets a
   control that does nothing. */
.a11y-toggle[hidden] { display: none; }
.a11y-toggle {
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  color: #dceaf0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 0.28rem 0.6rem;
  margin-left: 0.2rem;
  cursor: pointer;
}
.a11y-toggle:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); }
.a11y-toggle[aria-expanded="true"] {
  color: var(--accent-darkest);
  background: var(--teal-hi);
  border-color: var(--teal-hi);
}

.a11y-panel {
  position: absolute;
  right: 1.5rem;
  z-index: var(--z-panel);
  width: min(20rem, calc(100vw - 3rem));
  margin-top: 0.4rem;
  padding: 1rem 1.1rem;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(9, 40, 50, 0.18);
}
.a11y-panel[hidden] { display: none; }
/* A <p>, not a heading: the panel sits before <main>, so a heading here would
   land ahead of the page's h1 for anyone navigating by heading. */
.a11y-panel-title {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.7rem;
  color: var(--accent-darkest);
}
.a11y-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.45rem 0;
  cursor: pointer;
}
.a11y-opt input {
  /* SC 2.5.8 target size: a default checkbox is 13px. */
  width: 24px; height: 24px;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.a11y-opt strong { display: block; font-size: 0.94rem; font-weight: 600; }
.a11y-opt small { display: block; font-size: 0.82rem; color: var(--ink-mute); }
.a11y-panel-foot {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-mute);
}

/* ---- what the options actually do ---- */

/* Larger text. Everything on the site is sized in rem or em from the root, so
   one declaration scales the whole page and reflow (SC 1.4.10) still holds. */
:root[data-text-size="large"] { font-size: 120%; }

/* Higher contrast, either chosen in the panel or already set at the OS level. */
:root[data-contrast="high"] {
  --ink: #101c22;
  --ink-soft: #1c2f37;
  --ink-mute: #2b414a;
  --ink-faint: #3b525b;
  --line: #9fb4bc;
  --line-strong: #6b858f;
  --accent: #0d4658;
  --accent-warm-deep: #8a4a1e;
}
/* :not() matters here. Without it this rule outranks the current-tab rule and
   paints a WHITE label on the light teal pill: 2.25:1, worse than the normal
   mode it is supposed to improve. A high-contrast mode that lowers contrast is
   the worst kind of bug, because the people who turn it on are the least able
   to notice. Caught by axe with the option switched on. */
:root[data-contrast="high"] .topnav a:not([aria-current="page"]) { color: #ffffff; }
:root[data-contrast="high"] .topnav a[aria-current="page"],
:root[data-contrast="high"] .topnav a[aria-current="page"]:hover {
  color: #06262f;                 /* 9.07:1 on the fill below */
  background: #8fd0c9;
  border-color: #06262f;
}
:root[data-contrast="high"] .btn-quiet { border-width: 2px; }

@media (prefers-contrast: more) {
  :root:not([data-contrast="normal"]) {
    --ink: #101c22;
    --ink-soft: #1c2f37;
    --ink-mute: #2b414a;
    --ink-faint: #3b525b;
    --line: #9fb4bc;
    --line-strong: #6b858f;
  }
}

/* Reduce motion, chosen in the panel or set at the OS level. */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Windows High Contrast / forced-colors: stop painting our own colours over
   the ones the user has chosen, and keep borders visible. */
@media (forced-colors: active) {
  .topnav a[aria-current="page"] { forced-color-adjust: none; }
  .a11y-toggle, .btn, .a11y-panel, .skip-link { border: 1px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
}

@media (max-width: 800px) {
  .a11y-panel { right: 0.75rem; left: 0.75rem; width: auto; }
}