/* apex.css — the few rules only the apex pages need: the header's logo, the home page's hero
   picture, and the measure and rows Scott's words need on the home page.

   It is its own file, not an edit to core.css or tokens.css, on purpose. build-holding.js copies
   those two byte for byte into holding/assets/ (and /start/ loads them), so changing either
   forces a change in a folder another session owns and restyles the intake form. This file reads
   the semantic tokens only, so it follows the apex skin and carries no colour of its own (the one
   exception is the print block at the end, which names the two primitives white and n900).

   Loaded after core.css and the two themes by index.html, getting-here.html and contact.html.
   Layout rules here use min-width only, like the rest of the system. */


/* --- footer links ---------------------------------------------------------- */
/* The footer's links are lines of a list, not words inside a sentence, so each one is a target and
   takes the repository's 44px floor (AGENTS.md). core.css gives `.c-footer a` only a colour; the
   credit link (.powered) already carries its own 44px. min-width as well as min-height, so a short
   word such as "Terms" is not a narrow strip. */
.c-footer a:not(.powered) {
  display: inline-flex;
  align-items: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
}

/* "Powered by StratosDigital.ai", louder (owner, 2026-10-24: "slightly larger and in a bolder color ... a slight special
   effect like a shimmer so that it is more profound"). Still the same link, text and href (facts.js pins them); only its
   look changes. One electric blue on a dark footer, 1.15 times the size and bold. The shimmer is a white highlight that
   sweeps across the letters: in a browser with scroll-driven animations it is tied to scrolling the footer into view
   (nothing runs by time, so there is nothing to pause); everywhere else it plays once, 1.2 seconds, when the link is
   hovered or focused. Never under prefers-reduced-motion, and the colour alone carries the text if the highlight is
   unsupported (the text is only made transparent where background-clip: text exists). The blue is --powered here; to
   change the colour, change that one value. */
.c-footer a.powered {
  --powered: #6cb8ff;
  color: var(--powered);
  font-size: 1.15em;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-decoration-color: var(--powered);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .c-footer a.powered {
    background-image: linear-gradient(105deg, var(--powered) 0 40%, #ffffff 50%, var(--powered) 60% 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
@keyframes powered-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .c-footer a.powered { animation: powered-shimmer linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
  .c-footer a.powered:hover,
  .c-footer a.powered:focus-visible { animation: powered-shimmer 1.2s ease-in-out 1; }
}
@media (forced-colors: active) {
  .c-footer a.powered { background: none; -webkit-text-fill-color: currentColor; color: LinkText; }
}
@media print {
  /* The shimmer's blue is 2.11:1 on white, and a printer drops the footer's dark fill, so print the credit in ink. */
  .c-footer a.powered { background: none; -webkit-text-fill-color: currentColor; color: var(--c-n900); }
}

/* Zoe's website widget (build-site.js puts zoe-widget-page on <body> of the home page only; design/ never has it).
   Its card is fixed to the bottom right and stands 156px above the bottom of the viewport (136px before zoe-widget.js
   enlarged her picture from 36px to 56px on 2026-10-21; measured at 375, 768 and 1280px). Scrolled to the end, a narrow
   screen put the legal line and the "Powered by" credit under it, so below 62em the footer gets 160px more room at its
   foot. From 62em the card sits clear of the legal line. */
.zoe-widget-page .c-footer { padding-bottom: calc(var(--sp-7) + 160px); }
@media (min-width: 62em) {
  .zoe-widget-page .c-footer { padding-bottom: var(--sp-7); }
}


/* --- the header's logo ----------------------------------------------------- */
/* The little arch in a rounded square that the owner chose on 2026-10-08 ("that can be used at the top
   of each page for now"), drawn the same as the event center's wordmark. It is square where the "801"
   figures were wide, so it takes a height of its own, 2.5rem, the event center's size; `.c-mark` in
   core.css (copied byte for byte into holding/) still sets the rest, including the colour, the accent. */
.c-mark--icon { height: 2.5rem; }


/* --- Scott's words on the home page ------------------------------------------ */
/* His email of 2026-10-08 (page one) gave the home page a longer one-line summary, a visible heading
   above the two cards, and a "Call ... at <number> or visit <link>" sentence under each button.
   - core.css (copied byte for byte into holding/) caps the lede at 28 characters, which would set his
     sentence as a tall narrow column beside the picture, so it gets a wider measure here.
   - The heading was replaced on 2026-10-14 (owner) by two buttons, the event center's and the lounge's
     (.c-doors__jump, below), on the page's own surface between the photograph and the first card.
   - The sentence is two phrases, each wrapping as one piece: "Call ... at <number>" and "or visit <link>".
     The number keeps core.css's 44px target (.c-tel) and the link takes the same.
   - core.css puts the button and a phone link side by side from 768px. With the sentence under the
     button that row is one column and the button hugs its text, so the longer label ("Tour the Event
     Center") gets the whole column instead of sharing it with the sentence. It still wraps to two lines
     at 768px, where the column is 343px wide (measured); from about 820px it fits on one. */
.c-hero__lede { max-width: 36ch; }

/* Side by side while each button gets at least 20rem, one above the other below that. Both are core.css's
   .c-btn--lg (56px tall at the least), stretched to equal widths. Each name needs about 292px on one line
   at 390px wide (measured 2026-10-14), so on a phone they stack, one line each, rather than sitting side by
   side as two 127px-tall blocks of three lines (also measured, at a 9rem minimum). */
.c-doors__jump {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sp-3);
  padding-bottom: var(--sp-7);   /* none on top: the hero's own 64px already separates them from the photograph */
}

/* The lounge door's button in the same oxblood as the event center door's (owner, 2026-10-24: "make the lounge button be
   the same color theme as the other button on the page"). Inside the lounge skin the primary button is copper; here it
   takes the event center button's fill (--c-ox700, its hover --c-ox600) and white text, and a 2px light edge, because
   oxblood on this section's near-black surface is only 1.71:1 (tokens.css BAN) and the edge is what keeps the button's shape visible. */
.c-door[data-theme="lounge"] .c-btn--primary {
  background-color: var(--c-ox700);
  border-color: var(--text-on-inverse);
  color: var(--c-white);
}
.c-door[data-theme="lounge"] .c-btn--primary:hover {
  background-color: var(--c-ox600);
  border-color: var(--text-on-inverse);
}

.c-door__call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-4);
  font-size: var(--fs-1);
}
.c-door__call > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-2);
}
.c-door__call .c-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

@media (min-width: 768px) {
  .c-door__actions { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}


/* --- the hero's picture -------------------------------------------------- */
/* The hero's right-hand box shows the event center's photographs (owner, 2026-10-25: "The pictures on the main landing page
   should be in a auto scroll format ... in the same smaller size"). The first is the night exterior, the client's own
   photograph (client-media/the-801/MANIFEST.md); the rest are in client-media/the-801/event-center/photos.json, and
   build-event-center-photos.js writes the markup into index.html and the generated block below.

   No JavaScript (the pages that may run script are the owner's list). The slides sit on top of each other and each one fades
   in and out on its own copy of one CSS animation: 5 seconds a picture, 1 second of crossfade, per-slide delays and
   keyframes generated for the number of photographs (the block between the markers below). Without animation, or for a
   visitor who asks for less motion (prefers-reduced-motion), only the first picture shows. It pauses while the pointer is over it, and has a visible
   pause control (owner, 2026-10-30, change order item 19, option A; on 2026-10-25 he had asked for none and accepted giving up
   the WCAG 2.2.2 pause control). The control is a native checkbox and its label, written before the slideshow in the markup,
   so the sibling selector in the generated block below can pause the slides: no script, no new file, nothing remembered, and
   it is not shown at all for a visitor who asked for less motion (that visitor sees one still picture). The box keeps the size the single photograph had, so nothing moves while it loads: 13rem tall on a phone, a
   4 / 3 box from 768px. The sky is dark and empty, so the pictures crop a little toward the lower middle (object-position).

   The old mark's one rule, `.c-hero__watermark { opacity: 0.18; }`, stays in core.css, unused. core.css
   is copied byte for byte into holding/ (another session's folder, and the intake form loads it), so a
   dead line there is not worth a change in both. Delete it the next time core.css has to change anyway. */
.c-hero__media { width: 100%; position: relative; }
.c-hero__art,
.c-hero__show {
  display: block;
  position: relative;
  width: 100%;
  height: 13rem;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.c-hero__art,
.c-hero__slide {
  object-fit: cover;
  object-position: 50% 58%;
}
.c-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.c-hero__slide:first-child { opacity: 1; }
@media (min-width: 768px) {
  .c-hero__media { width: clamp(14rem, 38vw, 26rem); }
  .c-hero__art, .c-hero__show { height: auto; aspect-ratio: 4 / 3; }
}
/* It pauses while the pointer is over it (a pointer user reading a picture; nothing needs focus, the box holds no link). */
.c-hero__show:hover .c-hero__slide { animation-play-state: paused; }

/* event-center-photos: start (build-event-center-photos.js writes everything to the end marker) */
/* 10 photographs, 5 s each, 1 s crossfade */
.c-hero__pause, .c-hero__pause-btn { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-fade { 0% { opacity: 0; } 2% { opacity: 1; } 10% { opacity: 1; } 12% { opacity: 0; } 100% { opacity: 0; } }
  .c-hero__slide { animation: hero-fade 50s linear infinite; }
  .c-hero__slide:nth-child(1) { animation-delay: -1s; }
  .c-hero__slide:nth-child(2) { animation-delay: 4s; }
  .c-hero__slide:nth-child(3) { animation-delay: 9s; }
  .c-hero__slide:nth-child(4) { animation-delay: 14s; }
  .c-hero__slide:nth-child(5) { animation-delay: 19s; }
  .c-hero__slide:nth-child(6) { animation-delay: 24s; }
  .c-hero__slide:nth-child(7) { animation-delay: 29s; }
  .c-hero__slide:nth-child(8) { animation-delay: 34s; }
  .c-hero__slide:nth-child(9) { animation-delay: 39s; }
  .c-hero__slide:nth-child(10) { animation-delay: 44s; }
  .c-hero__pause:checked ~ .c-hero__show .c-hero__slide { animation-play-state: paused; }
  .c-hero__pause { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .c-hero__pause-btn { display: inline-flex; align-items: center; position: absolute; z-index: 2; right: 0.5rem; bottom: 0.5rem; min-height: 2.75rem; padding: 0 1rem; background: var(--surface-inverse); color: var(--text-on-inverse); border-radius: var(--radius-card); font-size: 0.875rem; font-weight: 600; cursor: pointer; }
  .c-hero__pause-on { display: none; }
  .c-hero__pause:checked ~ .c-hero__pause-btn .c-hero__pause-off { display: none; }
  .c-hero__pause:checked ~ .c-hero__pause-btn .c-hero__pause-on { display: inline; }
  .c-hero__pause:focus-visible ~ .c-hero__pause-btn { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--surface-inverse), 0 0 0 5px var(--text-on-inverse); }
}
/* event-center-photos: end */


/* --- print ----------------------------------------------------------------- */
/* A printer that drops backgrounds (the default) keeps the colour of every piece of text, so a dark
   surface keeps its light text and loses the fill it sat on: the footer printed white on white
   (1.00:1) and the lounge's themed blocks cream on white (1.16:1). So those dark surfaces go onto
   paper: the footer and every lounge-themed block get a white ground, dark ink, and the same ink in
   each token their children read, so links, captions and the credit line follow without a rule of
   their own. The primary button is the other fill; it takes
   dark ink and a dark edge, which reads with background graphics on or off.

   The ink and the paper are the two primitives white and n900, not semantic tokens: in a dark
   block the semantic tokens are the light ones, and they are what is being undone. */
@media print {
  .c-hero__media, .c-assistant__full { display: none; }

  /* With her picture gone the card is one column, or its words would sit in the narrow one. */
  .c-assistant--full { grid-template-columns: minmax(0, 1fr); }

  .c-footer,
  [data-theme="lounge"] {
    --surface: var(--c-white);
    --surface-raised: var(--c-white);
    --surface-sunken: var(--c-white);
    --surface-inverse: var(--c-white);
    --text: var(--c-n900);
    --text-muted: var(--c-n900);
    --text-on-inverse: var(--c-n900);
    --text-muted-on-inverse: var(--c-n900);
    --accent: var(--c-n900);
    --accent-hover: var(--c-n900);
    --accent-on-inverse: var(--c-n900);
    background-color: var(--c-white);
    color: var(--c-n900);
  }

  .c-btn.c-btn--primary,
  .c-door[data-theme="lounge"] .c-btn--primary,
  .c-door[data-theme="lounge"] .c-btn--primary:hover {
    background-color: transparent;
    color: var(--c-n900);
    border: var(--bw-thick) solid var(--c-n900);
  }
}


/* --- Motion on every page, on load (the logo repeats, see below) ----------------------------------- */
/* Owner, 2026-10-09: some animation on the logo and the title, on all pages. Three small things, all CSS,
   all played once and only for a visitor who has not asked for less motion: the little arch logo draws
   itself (its three lines get a dash longer than any of them, then the dash slides in), then the page's
   title, and on the home page the line under it, rise and fade in a beat apart; the home page's photograph
   (owner, same day: "a gentle fade on the hero photo") fades in and settles from 3% larger over a second and a half. Outside the media query
   nothing animates, so the resting state is the finished page: no script, no hidden text, print
   unchanged. The same three rules, with the same names and timings, are in the event center's and the
   lounge's stylesheets, which are separate files, and play the logo draw once; on the apex pages the logo draw
   repeats (owner, 2026-10-27, next block), so the apex logo's names and timings no longer match theirs. */
/* Owner, 2026-10-27: the header stays in view as the page scrolls, and the mark draws itself again every 15 seconds.
   core.css (byte-copied into holding/) keeps the header static on purpose, because a sticky header can cover the control
   that keyboard focus scrolls to (WCAG 2.2 SC 2.4.11 Focus Not Obscured); scroll-padding-top gives focus scrolling and
   in-page links that room, so this stylesheet adds the stickiness and the room together. The header is sticky only on
   a screen at least 48rem wide AND 40rem tall: enlarged text or a zoomed page shrinks the viewport in rem, the menu
   wraps and the bar could outgrow the room, so those visitors keep the static header. The logo repeats four times
   (one minute) and then rests until the page is reloaded: moving content that starts by itself and goes on for more
   than five seconds needs a way to stop it (WCAG 2.2 SC 2.2.2), and a bounded run is that way here. */
/* Phones keep the header static: its menu wraps onto two lines there and the bar would take a fifth of the screen. */
@media (min-width: 48rem) and (min-height: 40rem) {
  .c-header { position: sticky; top: 0; z-index: 50; }
  html { scroll-padding-top: 10rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .c-header__brand .c-mark path,
  .c-header__brand .c-mark rect {
    stroke-dasharray: 200;
    animation-duration: 15s;
    animation-timing-function: ease-out;
    animation-iteration-count: 4;
  }
  /* One 15 s cycle: the frame draws in 1.1 s, the two strokes start 0.25 s and 0.7 s in (the first-load timing),
     then the mark rests until the cycle begins again. */
  .c-header__brand .c-mark rect { animation-name: apex-draw-frame; }
  .c-header__brand .c-mark path:nth-of-type(1) { animation-name: apex-draw-stroke-1; }
  .c-header__brand .c-mark path:nth-of-type(2) { animation-name: apex-draw-stroke-2; }
  main h1 { animation: apex-rise 0.7s ease-out 0.15s both; }
  .c-hero__lede { animation: apex-rise 0.7s ease-out 0.4s both; }
  .c-hero__media { animation: apex-fade 1.6s ease-out 0.5s both; }
}
@keyframes apex-draw-frame { 0% { stroke-dashoffset: 200; } 7.34% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes apex-draw-stroke-1 { 0%, 1.67% { stroke-dashoffset: 200; } 9% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes apex-draw-stroke-2 { 0%, 4.67% { stroke-dashoffset: 200; } 12% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes apex-fade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes apex-rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }


/* --- Type --------------------------------------------------------------------------------------------- */
/* Owner, 2026-10-09: fancier, non-default fonts. Three open-licence families (SIL OFL 1.1; the licence texts
   ship beside the files in /assets/fonts/), hosted on our own domain, so the page still loads nothing from
   anywhere else and the CSP's font-src 'self' is untouched. Latin subset only (about 107 KB for all three).
   Cormorant Garamond is the apex's and the event center's display face: a high-contrast, old-style serif
   with the poise of a printed invitation. Cinzel, a Roman-capitals face, is the lounge's: it is the one
   that sits with the lounge's gold deco ornaments. Hanken Grotesk carries every body line and label. The
   stacks end in the old system fonts, so a slow or failed download only changes the letterforms.
   tokens.css and core.css are not touched (they are byte-copied into holding/): the variables are set
   here, later in the cascade, on :root and on the two door themes. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/cinzel-latin.woff2") format("woff2");
}

:root {
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-tracking: 0;
}
[data-theme="events"] {
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-theme="lounge"] {
  --font-display: "Cinzel", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Cinzel is a capitals face, so the lounge theme's tight tracking (made for a lowercase serif) is undone. */
[data-theme="lounge"] h1,
[data-theme="lounge"] .x-display,
[data-theme="lounge"] .c-door__name { letter-spacing: 0.03em; line-height: 1.1; }
/* Cormorant is small on the body: its x-height is low, so display sizes read smaller than the system serif
   at the same size. The title and section headings get a little weight so they hold the page. */
h1, h2 { font-weight: 500; }

/* Cormorant's default figures are old-style ("801" reads as "8o1"), wrong for an address and phone numbers,
   so every figure on the page is lining. Inherited, so one rule covers the page. */
html { font-variant-numeric: lining-nums; }


/* --- Zoe's card ------------------------------------------------------------ */
/* On the home page her card sits alone in its section. Left at the wrap's full width it stretches into a thin
   strip with empty space beside it, so it stops at a width that holds her picture and a reading line beside it.

   Her picture is the full-length cutout (assets/zoe/README.md), shown at full size on an arch of the accent
   colour, the oxblood of the apex's own skin (owner, 2026-10-08: "a full sized picture of Zoe"). The cutout is
   transparent, so the arch is the image's own background: the padding leaves a margin of colour round her,
   object-fit keeps her whole, and object-position sets her at the arch's flat base (the file's own 4px of
   transparency leaves her about 2px above it). She is an avatar, never a picture of a place, so nothing but the
   accent colour sits behind her. Decorative (alt=""): her name and role sit beside it.

   On a phone the picture sits above her words, centred, 14rem wide and twice that tall. From 768px it is a
   column of its own, 18rem wide, and her words centre against it. Her words are one group (.c-assistant__text),
   so the card's grid has two children at every width; core.css's `.c-assistant > p` spans paragraphs that are
   direct children of the card, and these are not, so the group does its own spacing. The file is 383 x 1192 and
   at the larger size she is drawn 552px tall (576px less the 24px of padding above her): 1104 device pixels on
   a screen twice as dense as a normal one, from a file 1192 tall, so she is never enlarged there. */
.c-assistant--full {
  max-width: 56rem;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--sp-5);
}

.c-assistant__full {
  display: block;
  box-sizing: border-box;
  width: 14rem;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 2;
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-3) 0;
  background-color: var(--accent);
  border-radius: 7rem 7rem var(--radius-card) var(--radius-card);
  object-fit: contain;
  object-position: center bottom;
}

.c-assistant__text {
  display: grid;
  gap: var(--sp-3);
  align-content: center;
}

@media (min-width: 768px) {
  .c-assistant--full {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--sp-7);
    align-items: center;
  }
  .c-assistant__full {
    width: 18rem;
    margin-inline: 0;
    border-radius: 9rem 9rem var(--radius-card) var(--radius-card);
  }
}


/* --- The legal pages (Membership Terms, Privacy Policy) -------------------------------------------------- */
/* Generated from the compliance pack by build-legal-pages.js. Long reading text: one comfortable measure, headings
   that mark the numbered sections, lists that keep their numbers, and tables that scroll inside their own box so the
   page body never scrolls sideways at phone width. */
.c-legal { max-width: 46rem; }
.c-legal h1 { margin-bottom: var(--sp-4); }
.c-legal h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); font-size: var(--fs-3, 1.5rem); scroll-margin-top: 5rem; }
.c-legal h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-2); font-size: var(--fs-2, 1.2rem); }
.c-legal p, .c-legal li { line-height: 1.6; }
.c-legal p { margin: 0 0 var(--sp-3); }
.c-legal ul, .c-legal ol { margin: 0 0 var(--sp-4); padding-left: 1.4rem; }
.c-legal li { margin-bottom: var(--sp-2); }
.c-legal__table { overflow-x: auto; max-width: 100%; margin: 0 0 var(--sp-4); }
.c-legal table { border-collapse: collapse; min-width: 32rem; width: 100%; font-size: .95rem; }
.c-legal th, .c-legal td { border-bottom: 1px solid var(--border); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.c-legal th { font-weight: 600; }
.c-legal__note { color: var(--text-muted, #5b5851); }
.c-legal ul { list-style: disc; }
.c-legal ol { list-style: decimal; }
.c-legal th[scope="row"] { font-weight: 600; }