/* === pattern-tokens:font-import:start (generated) === */
/* Barlow Semi Condensed for headings and numerals (the nearest open face to the old site's Boston Condensed Bold, the bold
   condensed capitals of "WHY YOU SHOULD JOIN") and Roboto for body (the old site's own text face). The <link> in every head is the
   fast route; this import is the backstop. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&family=Roboto:wght@400;500;700&display=swap");
/* === pattern-tokens:font-import:end === */

/* Forget Dinner -- site stylesheet. The library's canvas patterns (masthead, footer, sticky join bar, opener, closing band, questions,
   link rows, takeaways, safety cards) re-inked in the old site's own hot pink, deep magenta, black and white, then the brand layer at
   the end of this file. Built by working/tools/build_css.py; edit working/css/ and rebuild, never this file. */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }

/* ---- tokens ---- */
:root {
  /* Inks (measured 16 Oct 2026): body #efe4ea on #140d11 15.5:1, on #1c1218 14.8:1, on #271b22 13.4:1; quiet #bda9b4 on #140d11 8.7:1,
     on #1c1218 8.3:1, on #271b22 7.5:1; pink #f35aa1 on #140d11 6.2:1, on #1c1218 5.9:1; soft pink #ffb6d5 on #140d11 11.8:1;
     dark ink #1a0912 on pink 6.2:1, on bright pink #ff72b4 7.6:1; white on magenta #be3474 5.3:1, on deep magenta #8c1f57 8.6:1;
     coral #ff9d7a on #140d11 9.5:1; on the blush panel #fbf1f5: ink #1a0f14 16.9:1, quiet #5d4854 7.5:1, link #a8185f 6.4:1
     (5.7:1 on #f5e2eb). */
  --color-bg: #140d11;
  --color-surface: #1c1218;
  --color-surface-soft: #190f15;
  --color-text: #efe4ea;
  --color-text-soft: #bda9b4;
  --color-heading: #ffffff;
  --color-primary: #f35aa1;
  --color-primary-dark: #d93d86;
  --color-scrim: #0d080b;
  --color-on-scrim: #ffffff;
  --color-on-primary: #1a0912;
  --color-rule: rgba(255, 190, 220, .2);
  --color-focus: #ffb6d5;

  --fd-deep: #0d080b;
  --fd-ink: #140d11;
  --fd-plum: #1c1218;
  --fd-lift: #271b22;
  --fd-lift-2: #35242e;
  --fd-magenta: #be3474;
  --fd-magenta-deep: #8c1f57;
  --fd-pink: #f35aa1;
  --fd-pink-soft: #ffb6d5;
  --fd-pink-wash: rgba(243, 90, 161, .12);
  --fd-coral: #ff9d7a;
  --fd-paper: #fbf1f5;
  --fd-paper-2: #f5e2eb;
  --fd-paper-ink: #1a0f14;
  --fd-paper-quiet: #5d4854;
  --fd-paper-link: #a8185f;
  --fd-line: rgba(255, 190, 220, .2);
  --fd-line-strong: rgba(255, 190, 220, .34);
  --fd-line-paper: rgba(26, 15, 20, .16);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;
  --container-max: 72rem;

  --btn-radius: 12px;
  --card-radius: 14px;
  --card-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  --card-border: 1px solid rgba(255, 190, 220, .2);
  --chip-radius: 999px;
  --logo-height: 52px;
  --logo-height-footer: 56px;

  --transition-fast: 120ms ease;
  --transition-slow: 320ms ease;
  --type-scale: 1;

  --font-heading: 'Barlow Semi Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-inline: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif;
  --heading-leading: 1;
  --heading-tracking: 0;
  --weight-display: 700;
  --long-words: break-word;
  --long-word-hyphens: manual;
}

/* ---- base type ---- */
html { background: var(--fd-deep); color-scheme: dark; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-synthesis: none;
  color: var(--color-heading);
  line-height: calc(1.08 * var(--heading-leading, 1));
  letter-spacing: .005em;
}
a { color: var(--fd-pink-soft); text-underline-offset: .18em; }
a:hover { color: #ffffff; }
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === pattern masthead-nav@12 (library v248; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* masthead-nav - tokens only, selectors prefixed. The menu inside
   .masthead-nav-links is styled by structure - ul, li, a - so the list the
   platform generates for {{menu.navigation}} and a list written by hand take
   the same rules. */

/* Each ground names its own inks, and every rule below reads the pair rather
   than a token, so nothing here knows which ground it is on. */
.masthead-nav--plain {
  --masthead-nav-ground: var(--color-bg);
  --masthead-nav-ink: var(--color-text);
  --masthead-nav-edge: var(--color-rule);
  --masthead-nav-cta-face: var(--color-primary);
  --masthead-nav-cta-ink: var(--color-on-primary);
  --masthead-nav-panel-face: var(--color-surface);
  --masthead-nav-panel-ink: var(--color-text);
  --masthead-nav-ring: var(--color-focus);
}
.masthead-nav--soft {
  --masthead-nav-ground: var(--color-surface-soft);
  --masthead-nav-ink: var(--color-text);
  --masthead-nav-edge: var(--color-rule);
  --masthead-nav-cta-face: var(--color-primary);
  --masthead-nav-cta-ink: var(--color-on-primary);
  --masthead-nav-panel-face: var(--color-surface);
  --masthead-nav-panel-ink: var(--color-text);
  --masthead-nav-ring: var(--color-focus);
}
.masthead-nav--brand {
  --masthead-nav-ground: var(--color-primary);
  --masthead-nav-ink: var(--color-on-primary);
  --masthead-nav-edge: color-mix(in srgb, var(--color-on-primary) 35%, transparent);
  --masthead-nav-cta-face: var(--color-on-primary);
  --masthead-nav-cta-ink: var(--color-primary);
  --masthead-nav-panel-face: var(--color-primary);
  --masthead-nav-panel-ink: var(--color-on-primary);
  --masthead-nav-ring: var(--color-on-primary);
}

/* ---- the bar ---- */
/* One number for every tap target here, and for the room the drawer keeps.
   Clipped sideways, never scrolled: a faded submenu is laid out where it
   will open, and one past the edge would otherwise widen the page. */
.masthead-nav {
  --masthead-nav-tap: 2.75rem;
  background: var(--masthead-nav-ground);
  color: var(--masthead-nav-ink);
  border-block-end: 1px solid var(--masthead-nav-edge);
  overflow-x: clip;
}
/* edge: every rung keeps the 1px border and changes only what paints it, so
   the bar is the same height on all three and --page-header-height holds. */
.masthead-nav--rule {
  border-block-end-color: var(--masthead-nav-edge);
}
.masthead-nav--shadow {
  border-block-end-color: transparent;
  box-shadow: var(--card-shadow);
}
.masthead-nav--flush {
  border-block-end-color: transparent;
}
.masthead-nav--static {
  position: static;
}
/* The z-index orders the drawer's scrim, panel and button against each other
   rather than against the page. `sticky` is no containing block for a fixed
   child, so the drawer still pins to the viewport. */
.masthead-nav--pinned,
.masthead-nav--compact {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
}
/* The containing block for the small-screen menu and for the controls when
   they are parked in the corner on --centred. */
.masthead-nav-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
}
.masthead-nav-mark {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-end: auto;
}
/* The set height is the floor: `height: auto` under a `max-height` alone
   resolves a viewBox-only SVG to 0x0. object-fit stops the cap distorting it. */
.masthead-nav-logo {
  display: block;
  width: auto;
  height: var(--logo-height, 2.75rem);
  max-width: 100%;
  object-fit: contain;
}
/* mark: how the brand mark meets the ground behind it. */
.masthead-nav--direct .masthead-nav-mark {
  padding: 0;
}
.masthead-nav--plate .masthead-nav-mark {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--card-radius);
  background: var(--color-bg);
}
.masthead-nav--mono .masthead-nav-logo {
  filter: brightness(0) invert(1);
}

/* ---- the small-screen disclosure ---- */
.masthead-nav-disclosure {
  flex: 0 0 auto;
}
.masthead-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--masthead-nav-tap);
  padding-inline: var(--space-3);
  border: 1px solid var(--masthead-nav-edge);
  border-radius: var(--btn-radius);
  color: var(--masthead-nav-ink);
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  cursor: pointer;
  /* Both lines are needed to drop the default triangle. */
  list-style: none;
}
.masthead-nav-toggle::-webkit-details-marker {
  display: none;
}
/* Three bars: the element is the middle one, the pseudo-elements the others.
   The fold into a cross is a state change, so reduced motion keeps it. */
.masthead-nav-toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: var(--masthead-nav-bar-width, 1rem);
  height: var(--masthead-nav-bar, 2px);
  background: currentColor;
}
.masthead-nav-toggle-icon::before,
.masthead-nav-toggle-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: var(--masthead-nav-bar, 2px);
  background: currentColor;
}
.masthead-nav-toggle-icon::before {
  top: calc(-1 * var(--masthead-nav-bar-gap, 5px));
}
.masthead-nav-toggle-icon::after {
  top: var(--masthead-nav-bar-gap, 5px);
}
.masthead-nav-disclosure[open] .masthead-nav-toggle-icon {
  background: transparent;
}
.masthead-nav-disclosure[open] .masthead-nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.masthead-nav-disclosure[open] .masthead-nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}
/* burger: how the bars are drawn. Every rung folds into the same cross. */
.masthead-nav--three {
  --masthead-nav-bar: 2px;
  --masthead-nav-bar-gap: 5px;
}
.masthead-nav--two {
  --masthead-nav-bar-gap: 4px;
}
.masthead-nav--two .masthead-nav-toggle-icon {
  background: transparent;
}
.masthead-nav--bold {
  --masthead-nav-bar: 3px;
  --masthead-nav-bar-gap: 6px;
  --masthead-nav-bar-width: 1.25rem;
}
/* boxed: the element is the shape, a tap target square in the join
   control's own pair, and draws the middle bar as a centred gradient. */
.masthead-nav--boxed .masthead-nav-toggle {
  border: 0;
}
.masthead-nav--boxed.masthead-nav--icon .masthead-nav-toggle {
  padding-inline: 0;
}
.masthead-nav--boxed .masthead-nav-toggle-icon {
  width: var(--masthead-nav-tap);
  height: var(--masthead-nav-tap);
  border-radius: var(--btn-radius);
  color: var(--masthead-nav-cta-ink);
  background: linear-gradient(currentColor, currentColor) center / 1rem 2px no-repeat,
              var(--masthead-nav-cta-face);
}
.masthead-nav--boxed .masthead-nav-toggle-icon::before,
.masthead-nav--boxed .masthead-nav-toggle-icon::after {
  inset-inline: calc(50% - 0.5rem);
}
.masthead-nav--boxed .masthead-nav-toggle-icon::before {
  top: calc(50% - 6px);
}
.masthead-nav--boxed .masthead-nav-toggle-icon::after {
  top: calc(50% + 4px);
}
.masthead-nav--boxed .masthead-nav-disclosure[open] .masthead-nav-toggle-icon {
  background: var(--masthead-nav-cta-face);
}
.masthead-nav--boxed .masthead-nav-disclosure[open] .masthead-nav-toggle-icon::before,
.masthead-nav--boxed .masthead-nav-disclosure[open] .masthead-nav-toggle-icon::after {
  top: calc(50% - 1px);
}
/* toggle=icon: the word leaves the box, never the accessibility tree - never
   display: none. With no word in it the box needs a square floor, and the
   bars stand bare: no frame, the tap area and the focus ring kept. */
.masthead-nav--icon .masthead-nav-toggle {
  justify-content: center;
  min-width: var(--masthead-nav-tap);
  border: 0;
}
.masthead-nav--icon .masthead-nav-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the menu: whatever list sits inside the nav landmark ---- */
.masthead-nav-links ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.masthead-nav-links li {
  margin: 0;
}
.masthead-nav-links a,
.masthead-nav-links button {
  display: flex;
  align-items: center;
  min-height: var(--masthead-nav-tap);
  margin: 0;
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.masthead-nav-links a[href]:hover,
.masthead-nav-links button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
/* A parent with children and no URL of its own arrives as an <a> with no
   href. It is a label, not a link, so it must not offer a pointer. */
.masthead-nav-links li:has(> ul) > a:not([href]) {
  cursor: default;
}
.masthead-nav-links ul ul {
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--masthead-nav-edge);
}
.masthead-nav-links ul ul a,
.masthead-nav-links ul ul button {
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: 500;
}

/* ---- the tray: the menu and the controls, both inside the disclosure ---- */
/* No `display` here: one would force the tray open on --panel, which opens
   and shuts natively. Each rung turns it on where it wants it laid out. */
.masthead-nav-tray {
  flex-direction: column;
  gap: var(--space-4);
}

/* ---- login and join ---- */
.masthead-nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.masthead-nav-login {
  display: flex;
  align-items: center;
  color: inherit;
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  text-decoration: none;
  padding-block: var(--space-2);
}
.masthead-nav-login:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.masthead-nav-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: var(--masthead-nav-tap);
  padding-inline: var(--space-5);
  border-radius: var(--btn-radius);
  background: var(--masthead-nav-cta-face);
  color: var(--masthead-nav-cta-ink);
  font-family: var(--font-heading);
  font-size: calc(0.9375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  text-decoration: none;
}
.masthead-nav-join:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The ring is the ground's own, so one rule is right on all three. */
.masthead-nav a:focus-visible,
.masthead-nav button:focus-visible,
.masthead-nav summary:focus-visible {
  outline: 3px solid var(--masthead-nav-ring);
  outline-offset: 2px;
}

/* ---- small screens ---- */
@media (width < 60rem) {
  /* A wide wordmark at --logo-height is most of a phone across. Without this
     cap it takes the whole row and pushes the menu button onto a second one. */
  .masthead-nav-mark {
    max-width: 45%;
    min-width: var(--masthead-nav-tap);
    min-height: var(--masthead-nav-tap);
  }
  /* A wordless button is one tap wide, so the mark may take the rest of the
     row. --row has no button and --minimal a wider join control: both 45%. */
  .masthead-nav--drawer.masthead-nav--icon:not(.masthead-nav--minimal) .masthead-nav-mark,
  .masthead-nav--panel.masthead-nav--icon:not(.masthead-nav--minimal) .masthead-nav-mark {
    max-width: calc(100% - var(--masthead-nav-tap) - var(--space-3));
  }
  /* A long label ellipsises; border-box holds the padding inside the cap. */
  .masthead-nav-toggle {
    box-sizing: border-box;
    max-width: 100%;
  }
  .masthead-nav--labelled .masthead-nav-toggle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* One button, two words, and only ever one of them in the box. */
  .masthead-nav-toggle-text--close {
    display: none;
  }
  .masthead-nav-disclosure[open] .masthead-nav-toggle-text {
    display: none;
  }
  .masthead-nav-disclosure[open] .masthead-nav-toggle-text--close {
    display: inline;
  }
  /* The controls lead the sheet, and follow the menu in the markup so the
     bar is read in the order it is drawn. --row has no sheet and is left. */
  .masthead-nav--drawer .masthead-nav-controls,
  .masthead-nav--panel .masthead-nav-controls {
    order: -1;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  /* A row in a menu here, not a word in the bar: it takes a menu target. */
  .masthead-nav-login {
    min-height: var(--masthead-nav-tap);
  }
  /* menu-side moves the button, and the drawer it opens, to the same edge.
     Scoped to the rungs that HAVE a button: on --row the disclosure is the
     whole menu, so ordering it puts the navigation above the brand. */
  .masthead-nav--drawer.masthead-nav--side-end .masthead-nav-disclosure,
  .masthead-nav--panel.masthead-nav--side-end .masthead-nav-disclosure {
    order: 0;
  }
  .masthead-nav--drawer.masthead-nav--side-start .masthead-nav-disclosure,
  .masthead-nav--panel.masthead-nav--side-start .masthead-nav-disclosure {
    order: -1;
  }
  /* No start margin: 45% and 55% add up exactly, so anything added breaks
     the line and drops the mark to a second row. */
  .masthead-nav--side-start .masthead-nav-mark {
    margin-inline-end: auto;
  }
  /* A join control stretched over a tablet is a bar, not a button. */
  /* Definite, not max-width: an auto margin here cancels the stretch. */
  .masthead-nav--panel .masthead-nav-controls {
    width: min(20rem, 100%);
  }
  .masthead-nav--panel.masthead-nav--menu-end .masthead-nav-controls {
    align-self: flex-end;
  }
}

/* menu=drawer: a panel fixed to the inline-end edge, over a dimmed page. */
@media (width < 60rem) {
  /* The drawer is fixed to the viewport and the button that shuts it is not,
     so a scroll parts them and leaves an open menu with no way out. Pinned on
     both sticky rungs: this is not the sticky axis and does not fold into it. */
  .masthead-nav--drawer:has(.masthead-nav-disclosure[open]) {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
  }
  /* 45% for the mark and the rest for the button, gap included, so the two
     share one row: flexbox breaks lines before it shrinks anything. */
  .masthead-nav--drawer .masthead-nav-disclosure,
  .masthead-nav--panel .masthead-nav-disclosure {
    max-width: calc(55% - var(--space-3));
  }
  /* Laid out open or shut, so it has somewhere to slide FROM. Engines hide a
     closed <details> two ways, one unreachable from the child, so both are
     needed. `visibility` keeps it out of the tab order - never use opacity. */
  .masthead-nav--drawer .masthead-nav-tray {
    display: flex;
  }
  .masthead-nav--drawer .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav--drawer .masthead-nav-tray {
    position: fixed;
    inset-block: 0;
    z-index: 41;
    width: min(20rem, 82vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Block-start padding is the header's first row, computed - the button
       sits on the drawer, so anything less puts it over the first item. */
    padding: calc(var(--space-3)
                  + max(var(--masthead-nav-tap), var(--logo-height, 2.75rem))
                  + var(--space-4))
             var(--space-4) var(--space-6);
    background: var(--masthead-nav-panel-face);
    color: var(--masthead-nav-panel-ink);
    box-shadow: var(--card-shadow);
    visibility: hidden;
  }
  /* `translate` is the one place a logical property cannot carry the meaning,
     so each side states its own, and its own :dir(rtl). */
  .masthead-nav--drawer.masthead-nav--side-end .masthead-nav-tray {
    inset-inline-end: 0;
    border-inline-start: 1px solid var(--masthead-nav-edge);
    translate: 100% 0;
  }
  .masthead-nav--drawer.masthead-nav--side-end .masthead-nav-tray:dir(rtl) {
    translate: -100% 0;
  }
  .masthead-nav--drawer.masthead-nav--side-start .masthead-nav-tray {
    inset-inline-start: 0;
    border-inline-end: 1px solid var(--masthead-nav-edge);
    translate: -100% 0;
  }
  .masthead-nav--drawer.masthead-nav--side-start .masthead-nav-tray:dir(rtl) {
    translate: 100% 0;
  }
  .masthead-nav--drawer .masthead-nav-disclosure[open] .masthead-nav-tray {
    visibility: visible;
    translate: none;
  }
  /* The backdrop belongs to the disclosure: in the panel it would be inside
     the box it has to sit behind. */
  .masthead-nav--drawer .masthead-nav-disclosure::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--color-scrim) 62%, transparent);
    visibility: hidden;
    opacity: 0;
  }
  .masthead-nav--drawer .masthead-nav-disclosure[open]::before {
    visibility: visible;
    opacity: 1;
  }
  /* The button stays where it was pressed, above both the backdrop and the
     panel. The panel's block-start padding keeps the first item out of it. */
  .masthead-nav--drawer .masthead-nav-disclosure[open] .masthead-nav-toggle {
    position: relative;
    z-index: 42;
  }
}

/* menu=panel: the menu drops out of the button, over what is below. */
@media (width < 60rem) {
  /* A shut <details> contains its own layout, so this sheet is laid out
     against the button until it opens - `visibility` keeps that box out. */
  .masthead-nav--panel .masthead-nav-tray {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 20;
    max-height: 70svh;
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--masthead-nav-ground);
    border-block-end: 1px solid var(--masthead-nav-edge);
    box-shadow: var(--card-shadow);
    visibility: hidden;
  }
  /* Scoped to [open], unlike the drawer's: this sheet does not slide, and a
     `display` that applied while shut would hold it open. */
  .masthead-nav--panel .masthead-nav-disclosure[open] .masthead-nav-tray {
    display: flex;
    visibility: visible;
  }
}

/* ---- menu=row: no button, the menu is a scrolling row beside the mark ---- */
@media (width < 60rem) {
  .masthead-nav--row .masthead-nav-toggle {
    display: none;
  }
  /* Both declarations open the panel: engines hide a closed <details> in two
     different ways, and one of them cannot be reached from the child. */
  .masthead-nav--row .masthead-nav-tray {
    display: flex;
  }
  .masthead-nav--row .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav--row .masthead-nav-mark {
    margin-inline-end: 0;
  }
  .masthead-nav--row .masthead-nav-disclosure {
    flex: 1 1 auto;
    min-width: 0;
  }
  .masthead-nav--row .masthead-nav-tray {
    gap: var(--space-2);
  }
  .masthead-nav--row .masthead-nav-links {
    min-width: 0;
  }
  .masthead-nav--row .masthead-nav-join {
    flex: 0 1 auto;
  }
  .masthead-nav--row .masthead-nav-links > ul {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .masthead-nav--row .masthead-nav-links > ul::-webkit-scrollbar {
    display: none;
  }
  .masthead-nav--row .masthead-nav-links > ul > li {
    flex: 0 0 auto;
  }
  /* One row, so a submenu cannot nest under its parent; its children run on
     beside it instead. */
  .masthead-nav--row .masthead-nav-links li:has(> ul) {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .masthead-nav--row .masthead-nav-links ul ul {
    flex-direction: row;
    gap: var(--space-4);
    padding-inline-start: var(--space-4);
  }
}

/* ---- wide screens: the menu is always open and sits in the bar ---- */
@media (min-width: 60rem) {
  .masthead-nav-toggle {
    display: none;
  }
  /* Both declarations open the panel: engines hide a closed <details> in two
     different ways, and one of them cannot be reached from the child. */
  .masthead-nav-tray {
    display: flex;
  }
  .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav-tray {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
  .masthead-nav-links {
    flex: 1 1 auto;
    min-width: 0;
  }
  .masthead-nav-inner {
    flex-wrap: nowrap;
    gap: var(--space-6);
    padding-block: var(--space-4);
  }
  /* The mark must not shrink here: the logo is sized from its height at this
     width, so a shrinking box would let the image spill over the first menu
     item instead of taking room from it. */
  .masthead-nav-mark {
    flex: 0 0 auto;
  }
  .masthead-nav-logo {
    max-width: none;
  }
  .masthead-nav-disclosure {
    flex: 1 1 auto;
    min-width: 0;
  }
  .masthead-nav-controls {
    flex: 0 0 auto;
  }
  .masthead-nav-join {
    flex: 0 0 auto;
  }
  .masthead-nav-links > ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
  }
  .masthead-nav-links > ul > li {
    position: relative;
  }
  .masthead-nav-links > ul > li > a,
  .masthead-nav-links > ul > li > button {
    white-space: nowrap;
  }
  /* The tap floor holds here too: 1024 is a tablet held sideways. Padding
     inside it, so a one-row bar keeps the join control's height. */
  .masthead-nav-mark,
  .masthead-nav-login,
  .masthead-nav-links > ul > li > a,
  .masthead-nav-links > ul > li > button {
    box-sizing: border-box;
    min-width: var(--masthead-nav-tap);
    min-height: var(--masthead-nav-tap);
  }
  /* Faded rather than removed: a submenu taken out of the layout cannot be
     focused, so a keyboard could never open it. */
  .masthead-nav-links ul ul {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 30;
    min-width: 12rem;
    padding: var(--space-2);
    border: var(--card-border);
    border-inline-start: var(--card-border);
    border-radius: var(--card-radius);
    background: var(--masthead-nav-panel-face);
    color: var(--masthead-nav-panel-ink);
    box-shadow: var(--card-shadow);
    opacity: 0;
    pointer-events: none;
  }
  .masthead-nav-links > ul > li:hover > ul,
  .masthead-nav-links > ul > li:focus-within > ul {
    opacity: 1;
    pointer-events: auto;
  }
  /* The last two items sit nearest the edge, so their panels hang from
     their end edge instead. */
  .masthead-nav-links > ul > li:nth-last-child(-n + 2) > ul {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .masthead-nav-links ul ul a,
  .masthead-nav-links ul ul button {
    min-height: var(--masthead-nav-tap);
    padding-inline: var(--space-2);
  }
  /* A third level sits inside its parent's panel rather than beside it. */
  .masthead-nav-links ul ul ul {
    position: static;
    min-width: 0;
    padding: 0 0 0 var(--space-3);
    border: 0;
    border-inline-start: 1px solid var(--masthead-nav-edge);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
  }
  /* A chevron marks the items that carry children. */
  .masthead-nav-links > ul > li:has(> ul) > a::after,
  .masthead-nav-links > ul > li:has(> ul) > button::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-inline-start: var(--space-2);
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
  }

  /* overflow: what happens to items that do not fit the row. */
  .masthead-nav--wrap .masthead-nav-links > ul {
    flex-wrap: wrap;
  }
  /* --more folds the items past the room into a last item the behaviour
     library builds. Without the library this rung is --wrap, so the property
     below is the whole switch. */
  .masthead-nav--more .masthead-nav-links > ul {
    --hub-overflow: more;
  }
  .masthead-nav--scroll .masthead-nav-links > ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--space-2) var(--space-3);
    mask-image: linear-gradient(to right, transparent, currentColor var(--space-3),
                                currentColor calc(100% - var(--space-3)), transparent);
  }
  .masthead-nav--scroll .masthead-nav-links > ul::-webkit-scrollbar {
    display: none;
  }
  .masthead-nav--scroll .masthead-nav-links > ul > li {
    flex: 0 0 auto;
  }
  /* A scrolling row clips anything that pops out of it, so its submenus run
     on beside their parent instead. */
  .masthead-nav--scroll .masthead-nav-links > ul > li:has(> ul) {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .masthead-nav--scroll .masthead-nav-links ul ul {
    position: static;
    flex-direction: row;
    min-width: 0;
    padding: 0 0 0 var(--space-3);
    border: 0;
    border-inline-start: 1px solid var(--masthead-nav-edge);
    border-radius: 0;
    background: none;
    color: inherit;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
  }
  .masthead-nav--scroll .masthead-nav-links > ul > li:has(> ul) > a::after,
  .masthead-nav--scroll .masthead-nav-links > ul > li:has(> ul) > button::after {
    content: none;
  }

  /* submenu: --dropdown is the panel under its own item, above. --mega is one
     panel the width of the bar, its items in columns. */
  .masthead-nav--dropdown .masthead-nav-links > ul > li {
    position: relative;
  }
  .masthead-nav--mega .masthead-nav-links > ul > li {
    position: static;
  }
  .masthead-nav--mega .masthead-nav-links > ul > li > ul {
    display: block;
    inset-inline: 0;
    min-width: 0;
    padding: var(--space-5) var(--space-6);
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    columns: 12rem;
    column-gap: var(--space-6);
  }
  .masthead-nav--mega .masthead-nav-links > ul > li > ul > li {
    break-inside: avoid;
  }
  .masthead-nav--mega .masthead-nav-links > ul > li > ul a,
  .masthead-nav--mega .masthead-nav-links > ul > li > ul button {
    padding-inline: 0;
  }

  /* layout=inline - mark, menu, controls, one row. */
  .masthead-nav--inline .masthead-nav-inner {
    justify-content: space-between;
  }
  .masthead-nav--inline .masthead-nav-links > ul {
    justify-content: flex-start;
  }

  /* layout=centred - mark on its own line, menu centred under it, controls
     parked in the corner so the mark stays optically centred. */
  .masthead-nav--centred .masthead-nav-inner {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-5);
  }
  .masthead-nav--centred .masthead-nav-mark {
    margin-inline: auto;
  }
  .masthead-nav--centred .masthead-nav-disclosure {
    flex: 1 0 100%;
  }
  /* Centred by auto margins on the end items, not justify-content: a row
     wider than its box centres by pushing its first items off the left edge,
     where no scroll can reach them. */
  .masthead-nav--centred .masthead-nav-links > ul > li:first-child {
    margin-inline-start: auto;
  }
  .masthead-nav--centred .masthead-nav-links > ul > li:last-child {
    margin-inline-end: auto;
  }
  .masthead-nav--centred .masthead-nav-controls {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-4);
  }

  /* Last in the block on purpose: it has to outrank --centred's taller
     padding, and the two selectors weigh the same. */
  .masthead-nav--pinned .masthead-nav-inner,
  .masthead-nav--compact .masthead-nav-inner {
    padding-block: var(--space-3);
  }
  .masthead-nav--pinned.masthead-nav--centred .masthead-nav-controls,
  .masthead-nav--compact.masthead-nav--centred .masthead-nav-controls {
    inset-block-start: var(--space-3);
  }
}

/* sticky=compact: once the page has scrolled, the bar tightens and the mark
   comes down a fifth. The behaviour library sets the attribute. */
.masthead-nav--compact[data-hub-shrink="scrolled"] .masthead-nav-inner {
  padding-block: var(--space-2);
}
.masthead-nav--compact[data-hub-shrink="scrolled"] .masthead-nav-logo {
  height: calc(var(--logo-height, 2.75rem) * 0.8);
}

/* ---- nav=minimal: no menu, the mark and the controls at every width ---- */
.masthead-nav--full .masthead-nav-links {
  display: block;
}
.masthead-nav--minimal .masthead-nav-links {
  display: none;
}
.masthead-nav--minimal .masthead-nav-tray {
  justify-content: flex-end;
}
/* These outweigh the menu rungs' rules, which name two classes and the
   tray: this rung has no sheet to slide, drop or scroll. */
@media (width < 60rem) {
  .masthead-nav--minimal .masthead-nav-toggle {
    display: none;
  }
  /* The join control does not shorten as a menu button's word does, so the
     row never breaks here: the mark gives way instead. */
  .masthead-nav--minimal .masthead-nav-inner {
    flex-wrap: nowrap;
  }
  .masthead-nav--minimal .masthead-nav-inner .masthead-nav-disclosure {
    order: 0;
    flex: 0 0 auto;
    max-width: none;
  }
  .masthead-nav--minimal .masthead-nav-inner .masthead-nav-disclosure::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .masthead-nav--minimal .masthead-nav-inner .masthead-nav-disclosure::before {
    content: none;
  }
  .masthead-nav--minimal .masthead-nav-disclosure .masthead-nav-tray {
    display: flex;
    position: static;
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    visibility: visible;
    translate: none;
  }
  .masthead-nav--minimal .masthead-nav-controls {
    order: 0;
    width: auto;
    flex-direction: row;
    align-items: center;
  }
  /* The join control is the point of a page with no menu; the login link
     returns above 60rem. */
  .masthead-nav--minimal .masthead-nav-login {
    display: none;
  }
}

/* ---- menu-align: which edge the small-screen menu is set against ----
   Below 60rem only: above it `layout` already decides where the menu sits. */
@media (width < 60rem) {
  .masthead-nav--menu-start .masthead-nav-tray {
    text-align: start;
  }
  .masthead-nav--menu-start .masthead-nav-links a,
  .masthead-nav--menu-start .masthead-nav-links button,
  .masthead-nav--menu-start .masthead-nav-login {
    justify-content: flex-start;
  }
  .masthead-nav--menu-centre .masthead-nav-tray {
    text-align: center;
  }
  .masthead-nav--menu-centre .masthead-nav-links a,
  .masthead-nav--menu-centre .masthead-nav-links button,
  .masthead-nav--menu-centre .masthead-nav-login {
    justify-content: center;
  }
  .masthead-nav--menu-centre .masthead-nav-links ul ul {
    align-items: center;
    padding-inline: 0;
    border-inline: none;
  }
  .masthead-nav--menu-end .masthead-nav-tray {
    text-align: end;
  }
  .masthead-nav--menu-end .masthead-nav-links a,
  .masthead-nav--menu-end .masthead-nav-links button,
  .masthead-nav--menu-end .masthead-nav-login {
    justify-content: flex-end;
  }
  /* The rule moves with the items, or it is left down the empty side. */
  .masthead-nav--menu-end .masthead-nav-links ul ul {
    align-items: flex-end;
    padding-inline: 0 var(--space-4);
    border-inline: none;
    border-inline-end: 1px solid var(--masthead-nav-edge);
  }
}

/* No easing keyword follows --transition-fast below: brands ship that token
   with an easing in it, and a second keyword makes the declaration invalid. */
@media (prefers-reduced-motion: no-preference) {
  .masthead-nav-toggle-icon,
  .masthead-nav-toggle-icon::before,
  .masthead-nav-toggle-icon::after {
    transition: transform var(--transition-fast),
                background var(--transition-fast),
                top var(--transition-fast);
  }
  .masthead-nav-links ul ul {
    transition: opacity var(--transition-fast);
  }
  /* `visibility` is in the list so the panel stays on screen while it leaves. */
  .masthead-nav--drawer .masthead-nav-tray {
    transition: translate var(--transition-fast),
                visibility var(--transition-fast);
  }
  .masthead-nav--drawer .masthead-nav-disclosure::before {
    transition: opacity var(--transition-fast),
                visibility var(--transition-fast);
  }
  .masthead-nav--compact .masthead-nav-inner {
    transition: padding var(--transition-fast);
  }
  .masthead-nav--compact .masthead-nav-logo {
    transition: height var(--transition-fast);
  }
}
/* Belt and braces if a brand reintroduces a transition on these. */
@media (prefers-reduced-motion: reduce) {
  .masthead-nav-toggle-icon,
  .masthead-nav-toggle-icon::before,
  .masthead-nav-toggle-icon::after {
    transition: none;
  }
  .masthead-nav-links ul ul {
    transition: none;
  }
  .masthead-nav--drawer .masthead-nav-tray,
  .masthead-nav--drawer .masthead-nav-disclosure::before,
  .masthead-nav--compact .masthead-nav-inner,
  .masthead-nav--compact .masthead-nav-logo {
    transition: none;
  }
}
/* === /pattern masthead-nav@12 === */

/* === pattern faq-details@6 (library v248; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* faq-details v3 - tokens only, selectors prefixed.
   No script anywhere: <details>/<summary> gives keyboard operation, the
   expanded/collapsed announcement and find-in-page for free. */
.faq-details {
  padding-block: var(--space-8);
}
/* Keep the measure: answers read badly at full width. */
.faq-details-inner {
  width: min(100% - 2 * var(--space-4), 48rem);
  margin-inline: auto;
}
.faq-details-title {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-size: calc(clamp(1.75rem, 1rem + 2vw, 2.25rem) * var(--type-scale, 1));
  margin: 0 0 var(--space-6);
}
/* A rule under every item, plus one above the first. */
.faq-details-item {
  border-block-end: 1px solid var(--color-rule);
}
.faq-details-item:first-of-type {
  border-block-start: 1px solid var(--color-rule);
}
.faq-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  cursor: pointer;
  font-family: var(--font-heading);
  /* --color-text: this is not large text. */
  color: var(--color-text);
  /* Both lines are needed to drop the default triangle. */
  list-style: none;
}
.faq-details-summary::-webkit-details-marker {
  display: none;
}
/* Required: removing the marker above removes the focus affordance some
   browsers hang off it. */
.faq-details-summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}
.faq-details-question {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}
/* The indicator is a shape, not a glyph and never colour alone. */
.faq-details-icon {
  position: relative;
  flex: 0 0 auto;
  width: var(--space-5);
  height: var(--space-5);
}
.faq-details-icon::before,
.faq-details-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 2px;
  margin-block-start: -1px;
  background: var(--color-text-soft);
}
.faq-details-icon::after {
  transform: rotate(90deg);
}
/* A state change, not an animation: it applies under reduced motion too. */
.faq-details-item[open] .faq-details-icon {
  transform: rotate(45deg);
}
.faq-details-answer {
  padding-block-end: var(--space-4);
  padding-inline-end: var(--space-6);
  color: var(--color-text-soft);
}
.faq-details-answer p {
  margin: 0 0 var(--space-3);
  line-height: 1.65;
}
.faq-details-answer p:last-child {
  margin-block-end: 0;
}
/* Motion is opt-in and only ever eases a state the page already reached. */
@media (prefers-reduced-motion: no-preference) {
  .faq-details-icon {
    transition: transform var(--transition-fast) ease-out;
  }
  .faq-details-item[open] .faq-details-answer {
    animation: faq-details-open var(--transition-fast) ease-out;
  }
}
@keyframes faq-details-open {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Belt and braces if a brand reintroduces a transition on these. */
@media (prefers-reduced-motion: reduce) {
  .faq-details-icon {
    transition: none;
  }
  .faq-details-answer {
    animation: none;
  }
}
/* === /pattern faq-details@6 === */

/* === pattern cta-band@6 (library v248; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* cta-band - tokens only, selectors prefixed */

/* Each rung names its own ground, ink, control pair and ring, and every rule
   below reads those rather than a token, so nothing here knows which ground it
   is on. The ring is per rung and not --color-focus everywhere: on --brand and
   --deep that token is a brand colour landing on a brand colour, and it
   disappears into the band on every sample brand. See the README. */
.cta-band--plain {
  --cta-band-ground: var(--color-bg);
  --cta-band-ink: var(--color-text);
  --cta-band-btn-face: var(--color-primary);
  --cta-band-btn-ink: var(--color-on-primary);
  --cta-band-ring: var(--color-focus);
}
.cta-band--soft {
  --cta-band-ground: var(--color-surface-soft);
  --cta-band-ink: var(--color-text);
  --cta-band-btn-face: var(--color-primary);
  --cta-band-btn-ink: var(--color-on-primary);
  --cta-band-ring: var(--color-focus);
}
.cta-band--brand {
  --cta-band-ground: var(--color-primary);
  --cta-band-ink: var(--color-on-primary);
  --cta-band-btn-face: var(--color-on-primary);
  --cta-band-btn-ink: var(--color-primary);
  --cta-band-ring: var(--color-on-primary);
}
.cta-band--deep {
  --cta-band-ground: var(--color-scrim);
  --cta-band-ink: var(--color-on-scrim);
  --cta-band-btn-face: var(--color-on-scrim);
  --cta-band-btn-ink: var(--color-scrim);
  --cta-band-ring: var(--color-on-scrim);
}
.cta-band {
  padding-block: var(--space-12);
  padding-inline: var(--space-4);
  background: var(--cta-band-ground);
  color: var(--cta-band-ink);
  text-align: center;
}
.cta-band-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.cta-band-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
/* Not --color-heading: that token is promised against --color-bg, and three of
   the four rungs paint a ground of their own. */
.cta-band-title {
  font-family: var(--font-heading);
  color: var(--cta-band-ink);
  font-size: calc(clamp(2rem, 4.5vw, 3.25rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.1 * var(--heading-leading, 1));
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .cta-band-title {
    line-height: calc(max(1.1em, 1.45cap) * var(--heading-leading, 1));
  }
}
.cta-band-lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto var(--space-6);
}
.cta-band-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48px target, above the 44px AAA floor. */
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-radius);
  background: var(--cta-band-btn-face);
  color: var(--cta-band-btn-ink);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.cta-band-btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The offset leaves a band-coloured gap, putting the guaranteed pair either
   side of the ring. */
.cta-band-btn:focus-visible {
  outline: 3px solid var(--cta-band-ring);
  outline-offset: 4px;
}
/* === /pattern cta-band@6 === */

/* === pattern colophon@2 (library v248; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* colophon v2 - tokens only, selectors prefixed */
.colophon {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-8) var(--space-6);
  font-size: 0.875rem;
  color: var(--color-text-soft);
}
.colophon--plain {
  background: var(--color-bg);
}
.colophon--soft {
  background: var(--color-surface);
}
.colophon-inner {
  width: 92%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
}
/* layout: --line is the centred stack at every width; --columns spreads the
   three groups across the row from 60rem up and is the same stack below. */
.colophon--line .colophon-inner,
.colophon--columns .colophon-inner {
  justify-items: center;
  text-align: center;
}
/* mark: the brand mark above everything else, or nothing at all. */
.colophon--none .colophon-mark {
  display: none;
}
.colophon--logo .colophon-mark {
  display: inline-flex;
  margin-block-end: var(--space-2);
}
/* The set height is the floor: `height: auto` under a `max-height` alone
   resolves a viewBox-only SVG to 0x0. A tenth over the header's height, so
   the footer mark reads as a signature and not a repeat of the bar. */
.colophon-logo {
  display: block;
  width: auto;
  height: calc(var(--logo-height, 2.75rem) * 1.1);
  max-width: 100%;
  object-fit: contain;
}
/* The platform decides the menu's own markup, so its rules reach it by
   descent rather than by a generated class name. */
.colophon-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}
.colophon-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}
.colophon-menu a,
.colophon-legal a {
  color: var(--color-text-soft);
  text-decoration: none;
}
.colophon-menu a:hover,
.colophon-legal a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.colophon a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.colophon-copyright {
  margin: 0;
}
@media (min-width: 60rem) {
  .colophon--columns .colophon-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: start;
    align-items: start;
    text-align: start;
    gap: var(--space-6) var(--space-8);
  }
  /* A brand with no managed footer menu deletes the nav: two columns then,
     not two columns and a hole. */
  .colophon--columns .colophon-inner:not(:has(.colophon-menu)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .colophon--columns .colophon-mark {
    grid-column: 1 / -1;
  }
  .colophon--columns .colophon-menu ul,
  .colophon--columns .colophon-legal {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-2);
  }
  .colophon--columns .colophon-copyright {
    justify-self: end;
    text-align: end;
  }
}
/* === /pattern colophon@2 === */

/* === pattern cta-sticky@7 (library v248; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* cta-sticky v6 - tokens only, selectors prefixed. */
@media (width < 60rem) {
  .cta-sticky {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-4);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    /* Two separations: --color-rule may be set to nothing. */
    border-top: 1px solid var(--color-rule);
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--color-text) 14%, transparent),
                0 -8px 24px color-mix(in srgb, var(--color-text) 10%, transparent);
  }
  .cta-sticky-btn {
    display: block;
    box-sizing: border-box;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    text-decoration: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--btn-radius);
    /* The bar's height and the body clearance below must stay in step. */
    /* Fallback required: declared inside body:has(). */
    min-height: var(--cta-sticky-target, 48px);
    line-height: 1.5;
  }
  .cta-sticky-btn:hover {
    background: var(--color-primary-dark);
  }
  /* Focus needs its own indicator, not the hover fill. */
  .cta-sticky-btn:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
  /* Clearance, derived from the same tokens as the bar. */
  body:has(.cta-sticky) {
    /* On body so both this rule and the bar read it. */
    --cta-sticky-target: 48px;
    padding-bottom: calc(
      max(var(--cta-sticky-target), 1.5em + 2 * var(--space-3))
      + 2 * var(--space-2) + 1px + env(safe-area-inset-bottom, 0px)
    );
  }
}
@media (width >= 60rem) {
  .cta-sticky {
    display: none;
  }
}
/* === /pattern cta-sticky@7 === */

/* === pattern hero-stated@6 (library v248; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* hero-stated v1 - tokens only, selectors prefixed */
/* Each ground names its own ink, and every rule below reads the pair rather
   than a token, so nothing here knows which ground it is on. */
.hero-stated--plain {
  --hero-stated-ground: var(--color-bg);
  --hero-stated-ink: var(--color-text-soft);
  --hero-stated-title-ink: var(--color-heading);
  --hero-stated-btn-face: var(--color-primary);
  --hero-stated-btn-ink: var(--color-on-primary);
  --hero-stated-ring: var(--color-focus);
}
.hero-stated--brand {
  --hero-stated-ground: var(--color-primary);
  --hero-stated-ink: var(--color-on-primary);
  --hero-stated-title-ink: var(--color-on-primary);
  --hero-stated-btn-face: var(--color-on-primary);
  --hero-stated-btn-ink: var(--color-primary);
  --hero-stated-ring: var(--color-on-primary);
}
.hero-stated--deep {
  --hero-stated-ground: var(--color-scrim);
  --hero-stated-ink: var(--color-on-scrim);
  --hero-stated-title-ink: var(--color-on-scrim);
  --hero-stated-btn-face: var(--color-primary);
  --hero-stated-btn-ink: var(--color-on-primary);
  --hero-stated-ring: var(--color-on-scrim);
}
.hero-stated {
  padding-block: var(--space-12);
  padding-inline: var(--space-4);
  background: var(--hero-stated-ground);
  color: var(--hero-stated-ink);
}
.hero-stated-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.hero-stated-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.hero-stated-title {
  font-family: var(--font-heading);
  /* On the plain ground this is --color-heading, which the contract promises
   at the large-text bar against --color-bg; the clamp floor is 40px. On the
   other two grounds it is that ground's own ink. */
  color: var(--hero-stated-title-ink);
  font-size: calc(clamp(2.5rem, 7vw, 4.5rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.03em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.02 * var(--heading-leading, 1));
  max-width: 10.75em;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .hero-stated-title {
    line-height: calc(max(1.02em, 1.45cap) * var(--heading-leading, 1));
  }
}
.hero-stated-sub {
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 var(--space-6);
}
.hero-stated-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 52px: on a page whose opener carries no image, this is what the eye
   lands on after the words. */
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-radius);
  background: var(--hero-stated-btn-face);
  color: var(--hero-stated-btn-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.hero-stated-btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The ring is the ground's own, so one rule is right on all three. */
.hero-stated-btn:focus-visible {
  outline: 3px solid var(--hero-stated-ring);
  outline-offset: 4px;
}
.hero-stated--centred .hero-stated-inner {
  text-align: center;
}
.hero-stated--centred .hero-stated-title,
.hero-stated--centred .hero-stated-sub {
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .hero-stated {
    padding-inline: var(--space-8);
  }
}

/* Holding a signup-card in place of the join button. */
.hero-stated--centred .signup-card {
  margin-inline: auto;
}
/* Wide: the words on the left, the card on the right, and the first step
   above the fold. */
@media (min-width: 60rem) {
  .hero-stated:has(.signup-card) {
    padding-block: var(--space-6) var(--space-8);
  }
  .hero-stated-inner:has(.signup-card) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    column-gap: var(--space-8);
    align-items: start;
  }
  .hero-stated-inner:has(.signup-card) > :not(.hero-stated-cta) {
    grid-column: 1;
  }
  .hero-stated-inner:has(.signup-card) > .hero-stated-cta {
    grid-column: 2;
    grid-row: 1 / span 6;
  }
}
/* === /pattern hero-stated@6 === */

/* === pattern safety-protections@5 (library v248; appended by page_assemble.py -- adopt a newer version by replacing this block, never by adding a second) === */
/* safety-protections v1 - tokens only, selectors prefixed */
.safety-protections {
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
}
.safety-protections-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.safety-protections-title {
  font-family: var(--font-heading);
  /* Both halves of the heading token's contract are met here: page ground,
   and a clamp floor above 24px. Keep both if you edit it. */
  color: var(--color-heading);
  font-size: calc(clamp(1.75rem, 3vw, 2.5rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.15 * var(--heading-leading, 1));
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .safety-protections-title {
    line-height: calc(max(1.15em, 1.45cap) * var(--heading-leading, 1));
  }
}
.safety-protections-intro {
  color: var(--color-text-soft);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 var(--space-8);
}
.safety-protections-list {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
.safety-protections-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--card-radius);
  /* A drawn hairline, not the --card-border dial: on some brands the surface
   and the page ground are all but the same colour. */
  border: 1px solid var(--color-rule);
}
.safety-protections-name {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: calc(1.1875rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  line-height: calc(1.3 * var(--heading-leading, 1));
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .safety-protections-name {
    line-height: calc(max(1.3em, 1.45cap) * var(--heading-leading, 1));
  }
}
.safety-protections-what {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}
.safety-protections-effect {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  /* The darkest text in the card: this is the line a reader leaves with.
   Emphasis is weight and position, never a tint. */
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 0;
}
.safety-protections-effect-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
@media (min-width: 48rem) {
  .safety-protections {
    padding-inline: var(--space-6);
  }
  .safety-protections-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .safety-protections-list {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
}
/* === /pattern safety-protections@5 === */

/* === pattern crumb-trail (library v248; appended 5 Oct 2026 rebuild -- adopt a newer version by replacing this block) === */
/* crumb-trail v1 - tokens only, selectors prefixed */
.crumb-trail {
  box-sizing: border-box;
  margin-inline: auto;
  padding-block: var(--space-3) var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}
.crumb-trail--page {
  width: min(100% - 2 * var(--space-4), var(--container-max));
}
/* 52rem is the article column, held by the article masthead, the contents
   list and the author block. Any other number puts a second left edge on
   the page. */
.crumb-trail--column {
  width: min(100% - 2 * var(--space-4), 52rem);
}
.crumb-trail-link {
  color: var(--color-text-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.crumb-trail-link:hover {
  color: var(--color-text);
}
.crumb-trail-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.crumb-trail-separator {
  color: var(--color-text-soft);
}
.crumb-trail-current {
  color: var(--color-text);
  font-weight: 600;
}
/* === /pattern crumb-trail === */

/* === pattern prose-column (library v248; appended 5 Oct 2026 rebuild -- adopt a newer version by replacing this block) === */
/* prose-column v1 - tokens only, selectors prefixed */
.prose-column {
  --prose-column-measure: 68ch;
  width: min(100% - 2 * var(--space-4), var(--prose-column-measure));
  margin-inline: auto;
  padding-block: var(--space-6);
  color: var(--color-text);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.prose-column > :first-child {
  margin-top: 0;
}
.prose-column > :last-child {
  margin-bottom: 0;
}
.prose-column p {
  margin: 0 0 var(--space-5);
}
.prose-column h2,
.prose-column h3 {
  font-family: var(--font-heading);
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.2 * var(--heading-leading, 1));
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .prose-column h2,
  .prose-column h3 {
    line-height: calc(max(1.2em, 1.45cap) * var(--heading-leading, 1));
  }
}
/* --color-heading on an h2 only: the clamp floor is 28px, above the size the
   token is promised at, and the column paints no ground of its own. */
.prose-column h2 {
  color: var(--color-heading);
  font-size: calc(clamp(1.75rem, 3vw, 2.25rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  margin: var(--space-8) 0 var(--space-4);
}
/* h3 is under the size the heading token covers, so it takes the body ink. */
.prose-column h3 {
  color: var(--color-text);
  font-size: calc(1.25rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  margin: var(--space-6) 0 var(--space-3);
}
.prose-column ul,
.prose-column ol {
  margin: 0 0 var(--space-5);
  padding-inline-start: var(--space-6);
}
.prose-column li {
  margin-bottom: var(--space-2);
}
.prose-column li::marker {
  color: var(--color-text-soft);
}
.prose-column a {
  /* Inherit: the underline carries the affordance, on every ground and in
   every ink. See the README. */
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.prose-column a:hover {
  text-decoration-thickness: 2px;
}
.prose-column a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.prose-column blockquote {
  margin: var(--space-6) 0;
  padding-inline-start: var(--space-5);
  /* The rule is decoration beside a quote the <blockquote> already marks up,
   so a brand may set it as soft as it likes. */
  border-inline-start: 3px solid var(--color-rule);
}
.prose-column blockquote p {
  font-size: 1.1875rem;
  line-height: 1.55;
  margin-bottom: var(--space-3);
}
.prose-column cite {
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  font-style: normal;
}
/* A table is wider than a phone and says so: it scrolls inside its own box
   rather than making the page scroll sideways. */
.prose-column figure {
  margin: var(--space-6) 0;
  overflow-x: auto;
}
.prose-column table {
  border-collapse: collapse;
  width: 100%;
  min-width: 28rem;
  font-size: 0.9375rem;
}
.prose-column caption {
  color: var(--color-text-soft);
  font-size: 0.875rem;
  text-align: start;
  margin-bottom: var(--space-3);
}
.prose-column th,
.prose-column td {
  text-align: start;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}
.prose-column thead th {
  background: var(--color-surface-soft);
  border-bottom-width: 2px;
}
.prose-column tbody th {
  font-weight: 700;
}
.prose-column td {
  color: var(--color-text-soft);
}
.prose-column thead th:first-child {
  border-start-start-radius: var(--card-radius);
}
.prose-column thead th:last-child {
  border-start-end-radius: var(--card-radius);
}
/* === /pattern prose-column === */

/* === pattern link-cluster (library v248; appended 5 Oct 2026 rebuild -- adopt a newer version by replacing this block) === */
/* link-cluster v1 - tokens only, selectors prefixed */
/* Each ground names its own ink and pill face; every rule reads the pair. */
.link-cluster--plain {
  --link-cluster-ground: var(--color-bg);
  --link-cluster-ink: var(--color-text);
  --link-cluster-quiet: var(--color-text-soft);
  --link-cluster-title-ink: var(--color-heading);
  --link-cluster-face: var(--color-surface);
  --link-cluster-ring: var(--color-focus);
  --link-cluster-edge: var(--color-rule);
}
.link-cluster--soft {
  --link-cluster-ground: var(--color-surface-soft);
  --link-cluster-ink: var(--color-text);
  --link-cluster-quiet: var(--color-text-soft);
  --link-cluster-title-ink: var(--color-text);
  --link-cluster-face: var(--color-surface);
  --link-cluster-ring: var(--color-focus);
  --link-cluster-edge: var(--color-rule);
}
.link-cluster--brand {
  --link-cluster-ground: var(--color-primary);
  --link-cluster-ink: var(--color-primary);
  --link-cluster-quiet: var(--color-on-primary);
  --link-cluster-title-ink: var(--color-on-primary);
  --link-cluster-face: var(--color-on-primary);
  --link-cluster-ring: var(--color-on-primary);
  --link-cluster-edge: transparent;
}
.link-cluster {
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
  background: var(--link-cluster-ground);
}
.link-cluster-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}
.link-cluster-title {
  font-family: var(--font-heading);
  color: var(--link-cluster-title-ink);
  font-size: calc(clamp(1.75rem, 2.8vw, 2.25rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.2 * var(--heading-leading, 1));
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .link-cluster-title {
    line-height: calc(max(1.2em, 1.45cap) * var(--heading-leading, 1));
  }
}
.link-cluster-intro {
  color: var(--link-cluster-quiet);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto var(--space-5);
}
.link-cluster-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The pill is a target before it is a shape: 44px is the floor, and the
   horizontal padding is what keeps two short place names apart. */
.link-cluster-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--link-cluster-edge);
  border-radius: var(--chip-radius);
  /* The face alone does not separate a pill from the ground on a brand whose
   surface and surface-soft are nearly the same colour, so the edge is drawn
   on the two grounds where that can happen. */
  background: var(--link-cluster-face);
  color: var(--link-cluster-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.link-cluster-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.link-cluster-link:focus-visible {
  outline: 3px solid var(--link-cluster-ring);
  outline-offset: 3px;
}
/* === /pattern link-cluster === */

/* === pattern listing-rows (library v248; appended 5 Oct 2026 rebuild -- adopt a newer version by replacing this block) === */
/* listing-rows v2 - tokens only, selectors prefixed */
/* Each ground names its own ink set, and every rule below reads that set. The
   base carries the plain ground's values, so a copy that loses its modifier
   still has a ground, a hairline and a focus ring. */
.listing-rows,
.listing-rows--plain {
  --listing-rows-ground: var(--color-bg);
  --listing-rows-ink: var(--color-text);
  --listing-rows-quiet: var(--color-text-soft);
  --listing-rows-title-ink: var(--color-heading, var(--color-text));
  --listing-rows-edge: var(--color-rule, color-mix(in srgb, var(--color-text) 18%, transparent));
  --listing-rows-ring: var(--color-focus, var(--color-primary));
}
.listing-rows--soft {
  --listing-rows-ground: var(--color-surface-soft);
  --listing-rows-ink: var(--color-text);
  --listing-rows-quiet: var(--color-text-soft);
  --listing-rows-title-ink: var(--color-text);
  --listing-rows-edge: var(--color-rule, color-mix(in srgb, var(--color-text) 18%, transparent));
  --listing-rows-ring: var(--color-focus, var(--color-primary));
}
/* The fallback ink here is --color-surface, not --color-bg. Do not "tidy" it
   to match the other grounds: on some brands the page ground fails against
   the primary and the surface does not. See the README. */
.listing-rows--brand {
  --listing-rows-ground: var(--color-primary);
  --listing-rows-ink: var(--color-on-primary, var(--color-surface));
  --listing-rows-quiet: var(--color-on-primary, var(--color-surface));
  --listing-rows-title-ink: var(--color-on-primary, var(--color-surface));
  --listing-rows-edge: color-mix(in srgb, var(--color-on-primary, var(--color-surface)) 35%, transparent);
  --listing-rows-ring: var(--color-on-primary, var(--color-surface));
}
.listing-rows {
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
  background: var(--listing-rows-ground);
  color: var(--listing-rows-ink);
}
.listing-rows-inner {
  max-width: var(--container-max, 72rem);
  margin-inline: auto;
}
.listing-rows-title {
  font-family: var(--font-heading);
  color: var(--listing-rows-title-ink);
  font-size: calc(clamp(1.75rem, 3vw, 2.5rem) * var(--type-scale, 1));
  line-height: calc(1.15 * var(--heading-leading, 1));
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
@supports (line-height: 1cap) {
  .listing-rows-title {
    line-height: calc(max(1.15em, 1.45cap) * var(--heading-leading, 1));
  }
}
.listing-rows-intro {
  color: var(--listing-rows-quiet);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 var(--space-6);
}
.listing-rows-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-block-start: 1px solid var(--listing-rows-edge);
}
.listing-rows-item {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--listing-rows-edge);
}
.listing-rows-link {
  font-family: var(--font-heading);
  color: var(--listing-rows-ink);
  font-size: calc(1.1875rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  line-height: calc(1.3 * var(--heading-leading, 1));
  text-decoration: none;
  /* 24px, held independently of the type scale: at --type-scale 0.9 the line
     box alone is 22.2px and this is the only tap target in the row. */
  min-block-size: 1.5rem;
}
@supports (line-height: 1cap) {
  .listing-rows-link {
    line-height: calc(max(1.3em, 1.45cap) * var(--heading-leading, 1));
  }
}
.listing-rows-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.listing-rows-link:focus-visible {
  outline: 3px solid var(--listing-rows-ring);
  outline-offset: 3px;
}
.listing-rows-summary {
  color: var(--listing-rows-quiet);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 64ch;
  margin: 0;
}
.listing-rows-meta,
.listing-rows-when {
  color: var(--listing-rows-quiet);
  font-size: 0.875rem;
  line-height: 1.4;
}
@media (min-width: 48rem) {
  .listing-rows {
    padding-inline: var(--space-8);
  }
  /* Change the column count here and in the markup together. */
  .listing-rows-list {
    grid-template-columns: 1fr auto auto;
  }
  .listing-rows-item {
    grid-template-columns: subgrid;
  }
  .listing-rows-link {
    grid-column: 1;
    grid-row: 1;
  }
  .listing-rows-meta {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }
  .listing-rows-when {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }
  .listing-rows-summary {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
/* === /pattern listing-rows === */

/* === pattern key-takeaways (library v248; appended 5 Oct 2026 rebuild -- adopt a newer version by replacing this block) === */
/* key-takeaways v1 - tokens only, selectors prefixed */
.key-takeaways {
  --key-takeaways-measure: 68ch;
  box-sizing: border-box;
  width: min(100% - 2 * var(--space-4), var(--key-takeaways-measure));
  margin-block: var(--space-6);
  margin-inline: auto;
  padding: var(--space-5);
  background: var(--color-surface-soft);
  border: var(--card-border);
  border-radius: var(--card-radius);
  color: var(--color-text);
  /* The body size the article column is set in: the measure above is in ch,
     so it resolves against this and lands on the same column. */
  font-size: 1.0625rem;
  line-height: 1.6;
}
.key-takeaways-heading {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(0.06em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.3 * var(--heading-leading, 1));
  text-transform: uppercase;
  /* --color-text: the block paints a surface, and the label is small. */
  color: var(--color-text);
}
@supports (line-height: 1cap) {
  .key-takeaways-heading {
    line-height: calc(max(1.3em, 1.45cap) * var(--heading-leading, 1));
  }
}
.key-takeaways-list {
  margin: 0;
  padding-inline-start: var(--space-5);
}
.key-takeaways-point {
  margin: 0 0 var(--space-3);
}
.key-takeaways-point:last-child {
  margin-bottom: 0;
}
.key-takeaways-point::marker {
  color: var(--color-text-soft);
}
/* === /pattern key-takeaways === */

/* === pattern member-grid@7 (library v307; adopt a newer version by replacing this block, never by adding a second) === */
/* member-grid v1 - tokens only, selectors prefixed.
   Everything below .member-grid is markup the PLATFORM writes, so these class
   names are a contract with it, not ours to rename. */
.member-grid {
  overflow-wrap: var(--long-words, break-word);
}
.member-grid :is(h1, h2, h3, h4) {
  overflow-wrap: var(--long-words, anywhere);
}
@supports (hyphenate-limit-chars: 20 8 8) {
  .member-grid {
    hyphens: var(--long-word-hyphens, manual);
    hyphenate-limit-chars: 20 8 8;
  }
}
.member-grid {
  display: block;
  padding-inline: var(--space-4);
}
.member-grid .lp-grid,
.member-grid .lp-members__empty {
  max-width: var(--container-max);
  margin-inline: auto;
}
.member-grid .lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin-block: 0;
  padding: 0;
}
.member-grid .mem-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  position: relative;
}
.member-grid .mem-card img,
.member-grid .mem-card__initial {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--card-radius);
  background: var(--color-surface);
}
.member-grid .mem-card__initial {
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: calc(2rem * var(--type-scale, 1));
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}
.member-grid .mem-card .badge {
  position: absolute;
  top: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: 0.15rem var(--space-2);
  border-radius: var(--chip-radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}
.member-grid .mem-card__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-heading);
  font-size: calc(1rem * var(--type-scale, 1));
  font-weight: 700;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.member-grid .mem-card__where,
.member-grid .mem-card__line {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-soft);
  overflow-wrap: anywhere;
}
/* Two lines and no more. A blurb is member-written and has no length limit,
   so without this one card sets the height of the whole row. */
.member-grid .mem-card__line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* 44px, not the 24px WCAG floor: on a phone this is the card's only control
   and it sits between two photographs. */
.member-grid .mem-card__cta {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.member-grid .mem-card__cta:hover {
  text-decoration: underline;
}
.member-grid .mem-card__cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--chip-radius);
}
/* The join tile is the platform's last li and carries no photograph, so it
   needs a body of its own or it collapses to a link on the baseline. A grid
   item stretches to its row, so the floor is for the row it lands in ALONE -
   it is the last of an unknown number, so it wraps by itself often. */
.member-grid .mem-card--join {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--space-4);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  text-align: center;
}
.member-grid .mem-card--join .mem-card__cta {
  justify-content: center;
  margin: 0;
}
.member-grid .lp-members__empty {
  margin-block: 0;
  padding: var(--space-5) var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* card: how much furniture sits around the photograph */
.member-grid--plain .mem-card {
  padding: 0;
}
.member-grid--framed .mem-card {
  padding: var(--space-3);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--card-shadow);
}
.member-grid--framed .mem-card .badge {
  top: var(--space-4);
  inset-inline-start: var(--space-4);
}
.member-grid--portrait .mem-card img,
.member-grid--portrait .mem-card__initial {
  aspect-ratio: 3 / 4;
}

/* flow: a wrapping grid, or one row the reader swipes. The rail never moves
   on its own - the visitor drives it, the same bargain gallery-scroll makes. */
.member-grid--grid .lp-grid {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
/* marquee is the rail plus a behaviour. With no behaviour library it IS the
   rail, so it takes every rail rule and adds nothing of its own. */
.member-grid--rail,
.member-grid--marquee {
  padding-inline: 0;
}
.member-grid--rail .lp-grid,
.member-grid--marquee .lp-grid {
  display: flex;
  padding-inline: var(--space-4);
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  scrollbar-width: none;
  padding-block: var(--space-2);
  max-width: none;
}
.member-grid--rail .lp-grid::-webkit-scrollbar,
.member-grid--marquee .lp-grid::-webkit-scrollbar {
  display: none;
}
.member-grid--rail .mem-card,
.member-grid--marquee .mem-card {
  flex: 0 0 auto;
  width: min(42vw, 11rem);
  scroll-snap-align: start;
}
.member-grid--rail .lp-grid:focus-visible,
.member-grid--marquee .lp-grid:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* The carousel's controls stay hidden while the marquee moves the row, and
   show once its stop control is pressed. */
.member-grid--marquee:has(.hub-marquee-running):not(:has(.hub-marquee-control[aria-pressed="true"])) .hub-carousel-controls {
  display: none;
}

/* controls: where the previous and next arrows sit, read by the behaviour
   library from these properties. phone: whether a phone shows them. */
.member-grid--top {
  --hub-carousel-controls: top;
  --hub-carousel-look: round;
}
.member-grid--edges {
  --hub-carousel-controls: edges;
  --hub-carousel-look: round;
}
.member-grid--arrows {
  --hub-carousel-phone: show;
}
.member-grid--swipe {
  --hub-carousel-phone: hide;
}
.member-grid--marquee {
  --hub-marquee-look: round;
}
/* The pair keeps to the column the heading above it sits in. */
.member-grid .hub-carousel-controls--top {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
/* Over a photograph the arrows need a ground of their own. */
.member-grid .hub-carousel-controls--edges .hub-carousel-control {
  border: 0;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--card-shadow);
}
/* The marquee's stop control shares the arrows' row, at its end. */
.member-grid--marquee {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.member-grid--marquee .lp-grid,
.member-grid--marquee .lp-members__empty {
  flex: 0 0 100%;
}
.member-grid--marquee .hub-carousel-controls--top {
  margin-inline: 0;
  padding-inline: 0 var(--space-2);
}
.member-grid--marquee .hub-marquee-control {
  margin: 0 var(--space-4) var(--space-3) 0;
}

@media (min-width: 48rem) {
  .member-grid .lp-grid {
    gap: var(--space-5);
  }
  .member-grid--grid .lp-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
  .member-grid--rail .mem-card,
  .member-grid--marquee .mem-card {
    width: 13rem;
  }
  .member-grid .mem-card--join {
    min-height: 11rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    scroll-behavior: smooth;
  }
  .member-grid .mem-card__cta {
    transition: color var(--transition-fast);
  }
}

/* With scripting off nothing can build the previous and next controls, and
   the hidden scroll bar would leave a mouse no way along the row, so both
   rows wrap like the grid rung. */
@media (scripting: none) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    overflow-x: visible;
    max-width: var(--container-max);
  }
  .member-grid--rail .mem-card,
  .member-grid--marquee .mem-card {
    width: auto;
  }
}
@media (scripting: none) and (min-width: 48rem) {
  .member-grid--rail .lp-grid,
  .member-grid--marquee .lp-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
}
.member-grid:not(.member-grid--moving):not(.member-grid--marquee) {
  --hub-motion: none;
}
/* === /pattern member-grid@7 === */

/* === Forget Dinner brand layer (16 Oct 2026) ===
   Neil, 13 Oct 2026: an upgrade improves SEO, depth and conversion; it does not change who the site is for or how it feels.
   Today's forgetdinner.co.uk, shot at 390 and 1366 wide on 16 Oct (working/shots/legacy/), is a dark kitchen at night: a woman in
   black lace at a flour-dusted worktop, hot pink (#f35aa1) and deep magenta (#be3474) with black and white, a heart-swirl logo with the
   line "the casual dating site where people aren't fussed about food", bold condensed capitals (Boston Condensed) over Roboto text, and
   the platform landing's pink buttons. This layer keeps the dark, the pink and magenta, the condensed capitals and the kitchen
   photograph (cropped and faded so no nudity shows), and adds the structure the one-page lander never had:
   - the signature is the menu rule: a double hairline in pink under every section heading, and menu-card lists (numbered courses,
     dotted leaders) because the brand is a joke about skipping dinner;
   - headings are Barlow Semi Condensed in capitals on sections, body is Roboto, the home headline is two tiers, as on the old page;
   - buttons are pink blocks with dark capitals, as on the old page and the platform landing;
   - the page is dark; blush "paper" panels carry tables, answer boxes and the longest reading.
   Contrast (measured): see css/tokens.css. */

/* ---- section grounds: every component reads these, so every component works on dark and on paper ---- */
.fd-sec {
  --sec-ground: var(--color-bg);
  --sec-ink: var(--color-text);
  --sec-quiet: var(--color-text-soft);
  --sec-head: #ffffff;
  --sec-link: var(--fd-pink-soft);
  --sec-link-hover: #ffffff;
  --sec-card: var(--fd-plum);
  --sec-card-2: var(--fd-lift);
  --sec-line: var(--fd-line);
  --sec-line-strong: var(--fd-line-strong);
  --sec-accent: var(--fd-pink);
  --sec-accent-text: var(--fd-pink-soft);
  --sec-on-accent: var(--color-on-primary);
  --sec-glow: 0 0 14px rgba(243, 90, 161, .75);
  position: relative;
  padding: var(--space-8) var(--space-4);
  background: var(--sec-ground);
  color: var(--sec-ink);
}
.fd-sec--plum { --sec-ground: var(--fd-plum); --sec-card: var(--fd-ink); --sec-card-2: var(--fd-lift); }
.fd-sec--lift { --sec-ground: var(--fd-lift); --sec-card: var(--fd-plum); --sec-card-2: var(--fd-lift-2); }
.fd-sec--paper {
  --sec-ground: var(--fd-paper);
  --sec-ink: var(--fd-paper-ink);
  --sec-quiet: var(--fd-paper-quiet);
  --sec-head: var(--fd-paper-ink);
  --sec-link: var(--fd-paper-link);
  --sec-link-hover: #7a0f44;
  --sec-card: #ffffff;
  --sec-card-2: var(--fd-paper-2);
  --sec-line: var(--fd-line-paper);
  --sec-line-strong: rgba(26, 15, 20, .3);
  --sec-accent: var(--fd-pink);
  --sec-accent-text: var(--fd-paper-link);
  --sec-on-accent: #1a0912;
  --sec-glow: none;
}
.fd-sec--pink {
  --sec-ground: var(--fd-pink);
  --sec-ink: #1a0912;
  --sec-quiet: #4a1330;
  --sec-head: #1a0912;
  --sec-link: #1a0912;
  --sec-link-hover: #000000;
  --sec-card: rgba(255, 255, 255, .92);
  --sec-card-2: rgba(255, 255, 255, .6);
  --sec-line: rgba(4, 18, 31, .25);
  --sec-line-strong: rgba(4, 18, 31, .5);
  --sec-accent: #1a0912;
  --sec-accent-text: #1a0912;
  --sec-on-accent: var(--fd-pink);
  --sec-glow: none;
}
.fd-sec--glow {
  background: radial-gradient(70% 90% at 85% 110%, rgba(243, 90, 161, .22), rgba(243, 90, 161, 0) 70%), var(--fd-ink);
}
.fd-wrap { max-width: var(--container-max); margin-inline: auto; }
.fd-prose { max-width: 44rem; margin-inline: auto; }
.fd-sec h2 {
  font-size: calc(clamp(2rem, 6.6vw, 3.1rem) * var(--type-scale, 1));
  line-height: 1.04;
  margin: 0 0 var(--space-5);
  color: var(--sec-head);
  text-wrap: balance;
}
.fd-sec h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-top: .8rem;
  background: var(--sec-accent);
  box-shadow: var(--sec-glow);
  border-radius: 2px;
}
.fd-sec h3 {
  font-size: calc(1.6rem * var(--type-scale, 1));
  line-height: 1.12;
  margin: var(--space-6) 0 var(--space-2);
  color: var(--sec-head);
}
.fd-prose > h3:first-child { margin-top: 0; }
.fd-sec p { margin: 0 0 var(--space-4); }
.fd-sec p:last-child { margin-bottom: 0; }
.fd-sec strong { color: var(--sec-head); font-weight: 600; }
.fd-sec ul:not([class]),
.fd-sec ol:not([class]) { margin: 0 0 var(--space-4); padding-left: 1.3rem; }
.fd-sec ul:not([class]) li,
.fd-sec ol:not([class]) li { margin-bottom: var(--space-2); padding-left: .2rem; }
.fd-sec ul:not([class]) li::marker { color: var(--sec-accent); }
.fd-sec ol:not([class]) li::marker { color: var(--sec-accent-text); font-weight: 600; }
.fd-sec a:not(.fd-btn) { color: var(--sec-link); text-decoration-thickness: 1px; }
.fd-sec a:not(.fd-btn):hover { color: var(--sec-link-hover); text-decoration-thickness: 2px; }
.fd-sec blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--sec-accent);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--sec-head);
}
.fd-lede { font-size: 1.1875rem; line-height: 1.6; color: var(--sec-ink); }
.fd-eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 var(--space-3);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sec-accent-text);
}
.fd-eyebrow::before {
  content: "";
  flex: none;
  width: 1.7rem;
  height: 2px;
  background: var(--sec-accent);
  box-shadow: var(--sec-glow);
}
.fd-small { font-size: .875rem; color: var(--sec-quiet); }

/* ---- masthead: deep navy, a neon rule under it, the logo cropped to its lettering ---- */
.masthead-nav--night {
  --masthead-nav-ground: var(--fd-deep);
  --masthead-nav-ink: #ffffff;
  --masthead-nav-edge: rgba(255, 255, 255, .12);
  --masthead-nav-cta-face: var(--fd-pink);
  --masthead-nav-cta-ink: #1a0912;
  --masthead-nav-panel-face: var(--fd-deep);
  --masthead-nav-panel-ink: #ffffff;
  --masthead-nav-ring: var(--fd-pink-soft);
  border-bottom: 2px solid var(--fd-pink);
  box-shadow: 0 6px 22px rgba(243, 90, 161, .22);
}
.masthead-nav--night .masthead-nav-inner { padding-block: var(--space-2); }
.masthead-nav--night :is(.masthead-nav-links a, .masthead-nav-login, .masthead-nav-join, .masthead-nav-toggle-text, .masthead-nav-links summary, .masthead-nav-links button) {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .03em;
}
.masthead-nav--night .masthead-nav-join { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.masthead-nav--night .masthead-nav-toggle {
  background: var(--fd-pink);
  color: #1a0912;
  border: 0;
  border-radius: var(--btn-radius);
}
/* The logo file is 800x150 and its lettering runs from x 128 to 705, so the box is cropped to a 595x150 window (x 120 to 715):
   50px tall on a phone (the toolkit's lettering floor is 24px: 72/150 of the box), 52px on a laptop. */
.masthead-nav-logo,
.colophon-logo {
  height: var(--logo-height);
  width: auto;
  max-width: none;
  aspect-ratio: 595 / 150;
  object-fit: cover;
  object-position: 58.6% 50%;
}
@media (min-width: 60rem) { .masthead-nav-logo { height: 52px; } }
.colophon-logo { height: var(--logo-height-footer); }

/* ---- breadcrumbs ---- */
.crumb-trail { background: var(--fd-deep); color: var(--color-text-soft); width: 100%; }
.crumb-trail-link { color: #ffffff; }
.crumb-trail-current { color: var(--color-text-soft); }
.crumb-trail--page { width: 100%; max-width: none; }
.crumb-trail { padding-inline: max(var(--space-4), calc((100% - var(--container-max)) / 2)); }
@media (min-width: 48rem) { .crumb-trail { padding-inline: max(var(--space-8), calc((100% - var(--container-max)) / 2)); } }

/* ---- scan lines: a faint horizontal texture on the openers and the closing band ---- */
.fd-open,
.fd-hero,
.cta-band--brand { position: relative; isolation: isolate; }
.fd-open::before,
.fd-hero::before,
.cta-band--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
}

/* ---- openers: words on midnight; the join button is the old cyan block ---- */
.hero-stated--night,
.hero-stated--kitchen,
.hero-stated--pink,
.hero-stated--paper {
  --hero-stated-ground: var(--fd-ink);
  --hero-stated-ink: var(--color-text);
  --hero-stated-title-ink: #ffffff;
  --hero-stated-btn-face: var(--fd-pink);
  --hero-stated-btn-ink: #1a0912;
  --hero-stated-ring: var(--fd-pink-soft);
}
.hero-stated--night {
  background: radial-gradient(60% 120% at 92% 118%, rgba(243, 90, 161, .26), rgba(243, 90, 161, 0) 70%), linear-gradient(180deg, #140d11 0%, #1c1218 100%);
}
.hero-stated--pink {
  --hero-stated-ground: var(--fd-pink);
  --hero-stated-ink: #1a0912;
  --hero-stated-title-ink: #1a0912;
  --hero-stated-btn-face: #1a0912;
  --hero-stated-btn-ink: var(--fd-pink);
  --hero-stated-ring: #1a0912;
  background: linear-gradient(160deg, #ff72b4 0%, var(--fd-pink) 55%, #e0468f 100%);
}
.hero-stated--pink::before { opacity: .6; }
.hero-stated--paper {
  --hero-stated-ground: var(--fd-paper);
  --hero-stated-ink: var(--fd-paper-ink);
  --hero-stated-title-ink: var(--fd-paper-ink);
  --hero-stated-btn-face: #1a0912;
  --hero-stated-btn-ink: var(--fd-pink);
  --hero-stated-ring: var(--fd-paper-ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--fd-paper) 60%, var(--fd-paper-2) 100%);
}
.hero-stated--paper::before { content: none; }
.hero-stated-eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fd-pink-soft);
}
.hero-stated-eyebrow::before {
  content: "";
  flex: none;
  width: 1.7rem;
  height: 2px;
  background: var(--fd-pink);
  box-shadow: 0 0 12px rgba(243, 90, 161, .8);
}
.hero-stated--pink .hero-stated-eyebrow { color: #1a0912; }
.hero-stated--pink .hero-stated-eyebrow::before { background: #1a0912; box-shadow: none; }
.hero-stated--paper .hero-stated-eyebrow { color: var(--fd-paper-link); }
.hero-stated--paper .hero-stated-eyebrow::before { box-shadow: none; }
.hero-stated-title {
  font-weight: 400;
  font-size: calc(clamp(2.35rem, 7.6vw, 4.25rem) * var(--type-scale, 1));
  letter-spacing: -.005em;
  line-height: 1.02;
  max-width: 15em;
  text-wrap: balance;
}
.hero-stated-btn,
.cta-band-btn,
.fd-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  box-shadow: 0 6px 20px rgba(243, 90, 161, .28);
}
.hero-stated--pink .hero-stated-btn,
.hero-stated--paper .hero-stated-btn { box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.hero-stated-btn:hover,
.cta-band-btn:hover { text-decoration: none; filter: brightness(1.08); }
.hero-stated-sub { color: inherit; }
.hero-stated-cta { margin: 0 0 var(--space-4); }
.fd-byline {
  order: 5;
  margin: var(--space-4) 0 0;
  font-size: .875rem;
  color: var(--color-text-soft);
}
.hero-stated--pink .fd-byline { color: #4a1330; }
.hero-stated--paper .fd-byline { color: var(--fd-paper-quiet); }
.fd-open { padding-block: var(--space-8) var(--space-8); }

/* ---- buttons used inside sections ---- */
.fd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  background: var(--fd-pink);
  color: #1a0912;
  text-decoration: none;
}
.fd-btn:hover { color: #1a0912; text-decoration: none; filter: brightness(1.08); }
.fd-btn--ghost { background: transparent; color: #ffffff; border: 1.5px solid var(--fd-pink); box-shadow: none; }
.fd-btn--ghost:hover { color: #ffffff; background: rgba(243, 90, 161, .14); filter: none; }
.fd-sec--paper .fd-btn--ghost { color: var(--fd-paper-ink); border-color: var(--fd-paper-ink); }
.fd-sec--paper .fd-btn--ghost:hover { color: var(--fd-paper-ink); background: rgba(26, 15, 20, .08); }
.fd-btn-row { margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- the answer box: the short answer in the first 60 words ---- */
.fd-answer {
  position: relative;
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  background: var(--sec-card-2);
  border: 1px solid var(--sec-line);
  border-radius: var(--card-radius);
}
.fd-sec--paper .fd-answer { background: #ffffff; }
.fd-answer::before {
  content: "";
  position: absolute;
  inset-block: .9rem;
  left: .9rem;
  width: 4px;
  border-radius: 2px;
  background: var(--sec-accent);
  box-shadow: var(--sec-glow);
}
.fd-answer-label {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sec-accent-text);
}
.fd-answer p { margin: 0; font-size: 1.125rem; color: var(--sec-head); }

/* ---- ticks, chips, terms ---- */
.fd-ticks { margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.fd-ticks li { position: relative; padding-left: 2.1rem; }
.fd-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--sec-accent);
}
.fd-ticks li::after {
  content: "";
  position: absolute;
  left: .48rem;
  top: .5em;
  width: .5rem;
  height: .28rem;
  border-left: 2.5px solid var(--sec-on-accent);
  border-bottom: 2.5px solid var(--sec-on-accent);
  transform: rotate(-48deg);
}
@media (min-width: 48rem) { .fd-ticks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); } }
.fd-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.fd-chips li {
  padding: .35rem .95rem;
  border: 1.5px solid var(--sec-accent);
  border-radius: var(--chip-radius);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--sec-head);
  background: var(--fd-pink-wash);
}
.fd-sec--paper .fd-chips li { background: rgba(243, 90, 161, .14); border-color: var(--fd-paper-link); }
.fd-terms { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
@media (min-width: 48rem) { .fd-terms--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fd-terms div { padding: var(--space-4) var(--space-5); background: var(--sec-card); border: 1px solid var(--sec-line); border-left: 4px solid var(--sec-accent); border-radius: 4px var(--card-radius) var(--card-radius) 4px; }
.fd-terms dt { font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.1; color: var(--sec-head); margin-bottom: var(--space-1); }
.fd-terms dd { margin: 0; color: var(--sec-ink); }

/* ---- lanes: numbered steps down a rail ---- */
.fd-lanes { counter-reset: fd-lane; margin: var(--space-5) 0; display: grid; gap: 0; }
.fd-lanes > li {
  position: relative;
  counter-increment: fd-lane;
  padding: 0 0 var(--space-6) 4.25rem;
}
.fd-lanes > li:last-child { padding-bottom: 0; }
.fd-lanes > li::before {
  content: counter(fd-lane);
  position: absolute;
  left: 0;
  top: -.1rem;
  width: 3rem;
  font-family: var(--font-inline);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  text-align: center;
  color: var(--sec-accent-text);
  text-shadow: var(--sec-glow);
}
.fd-lanes > li::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.5rem;
  bottom: .35rem;
  width: 0;
  border-left: 2px dotted var(--sec-line-strong);
}
.fd-lanes > li:last-child::after { content: none; }
.fd-lanes h3 { margin: 0 0 var(--space-1); font-size: 1.55rem; }
.fd-lanes p { margin: 0; }

/* ---- flow: three or four moves in a row, a chevron between ---- */
.fd-flow { margin: var(--space-5) 0; display: grid; gap: var(--space-3); }
@media (min-width: 48rem) { .fd-flow { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-5); } }
.fd-flow > li { position: relative; padding: var(--space-4) var(--space-5); background: var(--sec-card); border: 1px solid var(--sec-line); border-top: 3px solid var(--sec-accent); border-radius: 4px 4px var(--card-radius) var(--card-radius); }
.fd-flow h3 { margin: 0 0 var(--space-1); font-size: 1.4rem; }
.fd-flow p { margin: 0; font-size: .9688rem; }
@media (min-width: 48rem) {
  .fd-flow > li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(var(--space-5) * -.78);
    top: 50%;
    width: .6rem;
    height: .6rem;
    border-top: 2px solid var(--sec-accent);
    border-right: 2px solid var(--sec-accent);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* ---- cards and tiles ---- */
.fd-cards { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
@media (min-width: 48rem) { .fd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fd-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fd-card { padding: var(--space-5); background: var(--sec-card); border: 1px solid var(--sec-line); border-radius: var(--card-radius); }
.fd-card h3 { margin: 0 0 var(--space-2); font-size: 1.5rem; }
.fd-card p { margin: 0; }
.fd-card-icon { width: 2.8rem; height: 2.8rem; margin-bottom: var(--space-3); padding: .6rem; border-radius: 50%; background: var(--fd-pink-wash); color: var(--sec-accent-text); border: 1px solid var(--sec-line-strong); }
.fd-card-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fd-tiles { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
@media (min-width: 40rem) { .fd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .fd-tiles--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fd-tiles li { padding: var(--space-4) var(--space-5); background: var(--sec-card); border: 1px solid var(--sec-line); border-left: 4px solid var(--sec-accent); border-radius: 4px var(--card-radius) var(--card-radius) 4px; }
.fd-tiles h3 { margin: 0 0 var(--space-1); font-size: 1.4rem; }
.fd-tiles p { margin: 0; font-size: .9688rem; }

/* ---- do and skip: two columns of short lists ---- */
.fd-duo { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
@media (min-width: 48rem) { .fd-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fd-duo-col { padding: var(--space-5); background: var(--sec-card); border: 1px solid var(--sec-line); border-radius: var(--card-radius); }
.fd-duo-col h3 { margin: 0 0 var(--space-3); font-size: 1.5rem; }
.fd-sec .fd-duo-col ul:not([class]) { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.fd-sec .fd-duo-col ul:not([class]) li { position: relative; margin: 0; padding-left: 1.7rem; }
.fd-sec .fd-duo-col ul:not([class]) li::marker { content: none; }
.fd-duo-col li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.fd-duo-col--do li::before { content: "\2713"; color: var(--sec-accent-text); }
.fd-duo-col--skip li::before { content: "\2715"; color: var(--fd-coral); }
.fd-sec--paper .fd-duo-col--skip li::before { color: #b3341e; }
.fd-duo-col--do { border-top: 3px solid var(--sec-accent); }
.fd-duo-col--skip { border-top: 3px solid var(--fd-coral); }
.fd-sec--paper .fd-duo-col--skip { border-top-color: #b3341e; }

/* ---- split: the heading stays put on the left while the argument runs on the right ---- */
.fd-split { display: grid; gap: var(--space-5); max-width: var(--container-max); margin-inline: auto; }
@media (min-width: 60rem) {
  .fd-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: start; }
  .fd-split-head { position: sticky; top: var(--space-6); }
}
.fd-split-head h2 { margin-bottom: var(--space-4); }
.fd-split-body > :first-child { margin-top: 0; }

/* ---- tables ---- */
.fd-table-wrap { margin: var(--space-5) 0; overflow-x: auto; border: 1px solid var(--sec-line-strong); border-radius: var(--card-radius); background: var(--sec-card); }
.fd-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .9375rem; color: var(--sec-ink); }
.fd-table caption { caption-side: bottom; padding: var(--space-2) var(--space-3); font-size: .8125rem; text-align: left; color: var(--sec-quiet); }
.fd-table th, .fd-table td { padding: var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--sec-line); overflow-wrap: break-word; hyphens: manual; }
.fd-table thead th { background: var(--fd-deep); font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fd-pink-soft); border-bottom: 2px solid var(--fd-pink); }
.fd-table tbody th { width: 28%; font-weight: 600; color: var(--sec-head); }
.fd-table tbody tr:nth-child(even) td, .fd-table tbody tr:nth-child(even) th { background: var(--sec-card-2); }
.fd-sec--paper .fd-table tbody tr:nth-child(even) td, .fd-sec--paper .fd-table tbody tr:nth-child(even) th { background: var(--fd-paper); }
.fd-table .fd-us { background: rgba(243, 90, 161, .14) !important; }
.fd-sec--paper .fd-table .fd-us { background: rgba(243, 90, 161, .22) !important; }
/* A yes/no matrix (the features table): the feature names take nearly half the width so no word breaks, the ticks take the rest. */
.fd-table--matrix thead th:first-child, .fd-table--matrix tbody th { width: 46%; }
@media (max-width: 47.99em) {
  .fd-table.fd-table--matrix { font-size: .8125rem; }
  .fd-table.fd-table--matrix th, .fd-table.fd-table--matrix td { padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2); }
  .fd-table.fd-table--matrix thead th { font-size: .625rem; letter-spacing: 0; white-space: nowrap; padding-inline: 2px; }
  .fd-table.fd-table--matrix thead th:first-child { padding-left: var(--space-2); }
}
.fd-table td.fd-yes, .fd-table td.fd-no { text-align: center; }
.fd-table td.fd-yes { color: var(--sec-accent-text); font-weight: 600; }
.fd-table td.fd-no { color: var(--sec-quiet); }
.fd-table thead th.fd-center { text-align: center; }
.fd-table-price { display: block; font-family: var(--font-heading); font-size: 1.4rem; line-height: 1.1; color: var(--sec-head); white-space: nowrap; }
.fd-table-note { display: block; font-size: .8125rem; color: var(--sec-quiet); }
@media (max-width: 47.99em) {
  .fd-table { font-size: .8125rem; }
  .fd-table th, .fd-table td { padding-inline: var(--space-2); }
  .fd-table thead th { font-size: .6875rem; letter-spacing: .04em; }
  .fd-table tbody th { width: 30%; }
}
/* Text-heavy tables stack into one card per row on a phone, so no word breaks mid-word in a narrow column. build_site.py adds the
   --stack class and a data-label to every cell of a table with three or more columns and wordy cells; number and yes/no tables
   (pricing, features) stay tables. */
@media (max-width: 47.99em) {
  .fd-table--stack { display: flex; flex-direction: column; }
  .fd-table--stack thead { order: 0; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fd-table--stack tbody { order: 1; display: block; }
  .fd-table--stack caption { order: 2; display: block; padding: var(--space-3); border-top: 1px solid var(--sec-line); }
  .fd-table--stack tr { display: block; padding-bottom: var(--space-2); border-bottom: 3px solid var(--sec-line-strong); }
  .fd-table--stack tbody tr:last-child { border-bottom: 0; }
  .fd-table--stack th, .fd-table--stack td { display: block; width: auto; padding: var(--space-1) var(--space-3); border-bottom: 0; font-size: .9375rem; }
  .fd-table--stack tbody th { width: auto; padding-top: var(--space-3); font-family: var(--font-heading); font-size: 1.3rem; }
  .fd-table--stack td::before { content: attr(data-label); display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sec-accent-text); }
}

/* ---- callouts, contents, pull line ---- */
.fd-callout {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--fd-pink-wash);
  border-left: 4px solid var(--sec-accent);
  border-radius: 4px var(--card-radius) var(--card-radius) 4px;
}
.fd-sec--paper .fd-callout { background: rgba(243, 90, 161, .14); border-left-color: var(--fd-paper-link); }
.fd-callout p { margin: 0; color: var(--sec-ink); }
.fd-callout--stop { background: rgba(255, 157, 122, .1); border-left-color: var(--fd-coral); border-left-width: 6px; }
.fd-sec--paper .fd-callout--stop { background: rgba(179, 52, 30, .08); border-left-color: #b3341e; }
.fd-toc { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); background: var(--sec-card); border: 1px solid var(--sec-line); border-radius: var(--card-radius); }
.fd-toc-title { margin: 0 0 var(--space-2); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sec-accent-text); }
.fd-toc ol { margin: 0; padding-left: 1.3rem; display: grid; gap: var(--space-1); }
.fd-toc li::marker { color: var(--sec-accent-text); font-weight: 700; }
.fd-pull { margin: var(--space-6) 0; font-family: var(--font-heading); font-style: italic; font-size: clamp(1.7rem, 5.4vw, 2.5rem); line-height: 1.12; color: var(--sec-head); text-wrap: balance; }
.fd-pull::before { content: "\201C"; display: block; font-family: var(--font-inline); font-style: normal; font-size: 3.4rem; line-height: .7; color: var(--sec-accent); text-shadow: var(--sec-glow); }

/* ---- versus: the two names at the head of a comparison ---- */
.fd-versus { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); }
@media (min-width: 40rem) { .fd-versus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fd-versus-col { padding: var(--space-5); background: var(--sec-card); border: 1px solid var(--sec-line); border-radius: var(--card-radius); }
.fd-versus-col--us { background: linear-gradient(160deg, #2a1220 0%, #140d11 100%); border-color: var(--fd-pink); box-shadow: 0 0 0 1px rgba(243, 90, 161, .35), 0 10px 30px rgba(243, 90, 161, .16); }
.fd-sec--paper .fd-versus-col--us { background: #1a0912; }
.fd-versus-col--us p { color: var(--color-text); }
.fd-versus-name { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: 2rem; line-height: 1.05; color: var(--sec-head); }
.fd-versus-col--us .fd-versus-name { color: #ffffff; }
.fd-versus-col p { margin: 0; }
.fd-versus-tag { display: block; margin-bottom: var(--space-2); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sec-accent-text); }
.fd-versus-col--us .fd-versus-tag { color: var(--fd-pink-soft); }

/* ---- age mix bars (real shares from get_demographics) ---- */
.fd-mix { margin: var(--space-5) 0; display: grid; gap: var(--space-3); }
.fd-mix-row { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 4.4rem; gap: var(--space-3); align-items: center; }
.fd-mix-label { font-weight: 600; color: var(--sec-head); }
.fd-mix-bar { block-size: .8rem; background: var(--sec-line); border-radius: 999px; overflow: hidden; }
.fd-mix-fill { display: block; block-size: 100%; inline-size: calc(var(--share) * 1%); background: linear-gradient(90deg, #d93d86, var(--fd-pink)); border-radius: 999px; box-shadow: 0 0 10px rgba(243, 90, 161, .5); }
.fd-mix-value { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; line-height: 1; text-align: end; color: var(--sec-accent-text); }
.fd-mix-note { font-size: .875rem; color: var(--sec-quiet); }
@media (max-width: 34em) { .fd-mix-row { grid-template-columns: 1fr 4rem; } .fd-mix-bar { grid-column: 1 / -1; grid-row: 2; } }

/* ---- figures: a few real numbers in a row ---- */
.fd-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-5) 0; }
@media (min-width: 48rem) { .fd-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fd-figures li { padding: var(--space-4); background: var(--sec-card); border: 1px solid var(--sec-line); border-radius: var(--card-radius); }
.fd-figures strong { display: block; font-family: var(--font-inline); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--sec-accent-text); }
.fd-figures span { display: block; margin-top: var(--space-1); font-size: .9375rem; color: var(--sec-quiet); }

/* ---- the legacy hero blocks: the old headlines that sat around the model, now three boxes ---- */
.fd-quad { display: grid; gap: var(--space-4); max-width: var(--container-max); margin-inline: auto; }
@media (min-width: 56rem) { .fd-quad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fd-quad-box { padding: var(--space-5); background: var(--sec-card); border: 1px solid var(--sec-line); border-top: 3px solid var(--sec-accent); border-radius: 4px 4px var(--card-radius) var(--card-radius); }
@media (min-width: 48rem) { .fd-quad.fd-quad--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .fd-quad.fd-quad--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fd-quad-box h2 { margin: 0 0 var(--space-3); font-size: 1.9rem; line-height: 1.05; }
.fd-quad-box h2::after { content: none; }
.fd-quad-box p { margin: 0; }

/* ---- a face-less art photograph in the flow ---- */
.fd-figure { margin: var(--space-5) 0; }
.fd-figure img { width: 100%; height: auto; border-radius: var(--card-radius); border: 1px solid var(--sec-line-strong); }
.fd-figure figcaption { margin-top: var(--space-2); font-size: .8125rem; color: var(--sec-quiet); }
.fd-band-art { padding: 0; line-height: 0; background: var(--fd-deep); }
.fd-band-art img { width: 100%; height: clamp(9rem, 28vw, 17rem); object-fit: cover; object-position: center 30%; opacity: .92; }

/* ---- member blocks: always below the first screen, 25 to 55, no bios ---- */
.fd-members { padding: var(--space-8) var(--space-4); background: var(--fd-plum); }
.fd-members-inner { max-width: var(--container-max); margin: 0 auto; }
.fd-members h2 { margin: 0 0 var(--space-3); font-size: calc(clamp(2rem, 6.6vw, 3.1rem) * var(--type-scale, 1)); color: #ffffff; }
.fd-members h2::after { content: ""; display: block; width: 3.25rem; height: 3px; margin-top: .8rem; background: var(--fd-pink); box-shadow: 0 0 14px rgba(243, 90, 161, .75); border-radius: 2px; }
.fd-members-intro { margin: 0 0 var(--space-5); max-width: 40rem; }
.fd-members .member-grid { padding-inline: 0; }
.fd-members .mem-card__name { color: #ffffff; font-family: var(--font-heading); font-size: 1.3rem; }
.fd-members .mem-card__where { color: var(--color-text-soft); }
.fd-members .mem-card__cta { color: var(--fd-pink-soft); }
.fd-members .lp-members__empty { background: var(--fd-ink); color: var(--color-text); border-color: var(--fd-line); }

/* ---- link rows and clusters, questions, takeaways ---- */
.link-cluster--plain,
.link-cluster--soft {
  --link-cluster-ground: var(--fd-lift);
  --link-cluster-ink: #ffffff;
  --link-cluster-quiet: var(--color-text-soft);
  --link-cluster-title-ink: #ffffff;
  --link-cluster-face: var(--fd-plum);
  --link-cluster-ring: var(--color-focus);
  --link-cluster-edge: var(--fd-pink);
}
.link-cluster-title { font-family: var(--font-heading); font-weight: 400; }
.listing-rows--plain,
.listing-rows--soft {
  --listing-rows-ground: var(--fd-ink);
  --listing-rows-ink: var(--color-text);
  --listing-rows-quiet: var(--color-text-soft);
  --listing-rows-title-ink: #ffffff;
  --listing-rows-edge: var(--fd-line-strong);
  --listing-rows-ring: var(--color-focus);
}
.listing-rows--soft { --listing-rows-ground: var(--fd-plum); }
.listing-rows a { color: #ffffff; }
.listing-rows-link { font-size: 1.6rem; letter-spacing: 0; line-height: 1.1; }
.listing-rows a:hover { color: var(--fd-pink-soft); }
.listing-rows-title { font-family: var(--font-heading); font-weight: 400; }
.key-takeaways { background: var(--fd-lift); color: var(--color-text); border-color: var(--fd-pink); border-left-width: 5px; border-radius: var(--card-radius); }
.key-takeaways :is(h2, h3, strong) { color: #ffffff; }
.key-takeaways-heading { color: var(--fd-pink-soft); }
.key-takeaways-list { list-style: disc; padding-left: 1.3rem; }
.key-takeaways-point { padding-left: .2rem; }
.key-takeaways-point::marker { color: var(--fd-pink); }
.faq-details { background: var(--fd-ink); color: var(--color-text); }
.faq-details-title { color: #ffffff; font-family: var(--font-heading); font-weight: 400; }
.faq-details-item { border-color: var(--fd-line-strong) !important; }
.faq-details-summary { color: #ffffff; font-weight: 500; }
.faq-details-question { font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0; line-height: 1.4; }
.faq-details-icon { color: var(--fd-pink); }
.faq-details-answer, .faq-details-answer p { color: var(--color-text); }

/* ---- safety cards ---- */
.safety-protections { background: var(--fd-ink); color: var(--color-text); }

/* ---- the closing band: navy with cyan glow and the scan lines, a cyan button ---- */
.cta-band--brand,
.cta-band--soft {
  --cta-band-ground: var(--fd-plum);
  --cta-band-ink: #ffffff;
  --cta-band-btn-face: var(--fd-pink);
  --cta-band-btn-ink: #1a0912;
  --cta-band-ring: var(--fd-pink-soft);
}
.cta-band--brand { background: radial-gradient(60% 130% at 50% 130%, rgba(243, 90, 161, .34), rgba(243, 90, 161, 0) 70%), linear-gradient(180deg, #1c1218 0%, #140d11 100%); }
.cta-band--deep,
.cta-band--plain {
  --cta-band-ground: var(--fd-deep);
  --cta-band-ink: #ffffff;
  --cta-band-btn-face: var(--fd-pink);
  --cta-band-btn-ink: #1a0912;
  --cta-band-ring: var(--fd-pink-soft);
}
.cta-band--pink {
  --cta-band-ground: var(--fd-pink);
  --cta-band-ink: #1a0912;
  --cta-band-btn-face: #1a0912;
  --cta-band-btn-ink: var(--fd-pink);
  --cta-band-ring: #1a0912;
  background: linear-gradient(160deg, #ff72b4 0%, var(--fd-pink) 60%, #e0468f 100%);
}
.cta-band--pink .cta-band-btn { box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.cta-band-title { font-family: var(--font-heading); font-weight: 400; }
.cta-band { padding-block: var(--space-9); }
.cta-band-btn { border: 0; }

/* ---- the sticky join bar: deep navy with a cyan rule and the cyan button ---- */
.cta-sticky { background: var(--fd-deep); border-top: 2px solid var(--fd-pink); }
.cta-sticky-btn { background: var(--fd-pink); color: #1a0912; font-family: var(--font-body); font-size: .9375rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-radius: var(--btn-radius); }
.cta-sticky-btn:hover { background: var(--fd-pink-soft); }

/* ---- the footer: deep navy, the logo above the links ---- */
.colophon--soft,
.colophon--plain { background: var(--fd-deep); border-top: 2px solid var(--fd-pink); color: var(--color-text-soft); }
.colophon-menu a, .colophon-legal a { color: #ffffff; }
.colophon-copyright { color: var(--color-text-soft); }
.colophon-menu ul { gap: var(--space-2) var(--space-5); }

/* ---- phones: the opener's join button whole on the first screen, at 390x640 and 375x560 ---- */
@media (max-width: 47.99em) {
  .hero-stated { padding-block: var(--space-4) var(--space-6); }
  .fd-open { padding-block: var(--space-4) var(--space-6); }
  .hero-stated-inner { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-stated-inner > * { order: 5; }
  .hero-stated-eyebrow { order: 1; margin-bottom: var(--space-2); }
  .hero-stated-title { order: 2; margin-bottom: var(--space-3); font-size: calc(2.15rem * var(--type-scale, 1)); line-height: 1.04; }
  .hero-stated-cta { order: 3; margin: 0 0 var(--space-4); }
  .hero-stated-sub { order: 4; margin-bottom: 0; }
  .fd-sec { padding-block: var(--space-7); }
  .hero-stated + .fd-sec { padding-block-start: var(--space-6); }
  .fd-hero .hero-stated-title { font-size: 2rem; }
  .fd-lanes > li { padding-left: 3.6rem; }
  .fd-lanes > li::before { width: 2.6rem; font-size: 3rem; }
  .fd-lanes > li::after { left: 1.3rem; }
}
/* The sticky join bar keeps out of the way while the hero button is on screen and slides in once the visitor
   scrolls past it. Browsers without scroll-driven animations keep the bar showing. */
@supports (animation-timeline: scroll()) {
  @media (width < 60rem) {
    @keyframes cta-sticky-in { from { transform: translateY(110%); } to { transform: none; } }
    .cta-sticky { animation: cta-sticky-in linear both; animation-timeline: scroll(root); animation-range: 30svh 45svh; }
  }
}

/* ======================================================================================================================
   Forget Dinner overrides: later rules win over the Sex Direct-lineage rules above, which are kept so the library pattern
   variables they set (--hero-stated-*, --cta-band-*, --masthead-nav-*) stay wired.
   ====================================================================================================================== */
.fd-sec { --sec-glow: none; }
.fd-sec h2 {
  font-size: calc(clamp(1.9rem, 6.2vw, 2.8rem) * var(--type-scale, 1));
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: .025em;
}
/* the menu rule: a double hairline, the way a menu card divides its courses */
.fd-sec h2::after {
  width: 3.6rem;
  height: 6px;
  margin-top: .85rem;
  border-top: 2px solid var(--sec-accent);
  border-bottom: 2px solid var(--sec-accent);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.fd-sec h3 { font-size: 1.45rem; letter-spacing: .01em; }
.fd-sec blockquote { font-style: normal; font-weight: 600; font-size: 1.35rem; }
.fd-eyebrow::before,
.hero-stated-eyebrow::before { box-shadow: none; }
.hero-stated-eyebrow::before { background: var(--fd-pink); }
.fd-open::before, .fd-hero::before, .cta-band--brand::before { content: none; }
.fd-pull { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.fd-pull::before { text-shadow: none; }
.fd-terms dt, .fd-table-price, .fd-versus-name, .fd-card h3, .fd-tiles h3, .fd-flow h3, .fd-lanes h3, .fd-duo-col h3 { font-weight: 700; }
.fd-terms dt { font-size: 1.45rem; }
.fd-lanes > li::before { font-weight: 700; text-shadow: none; }
.fd-answer::before, .fd-mix-fill, .fd-eyebrow::before { box-shadow: none; }
.fd-mix-fill { background: linear-gradient(90deg, var(--fd-magenta), var(--fd-pink)); }
.link-cluster-title, .listing-rows-title, .faq-details-title, .cta-band-title { font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
.cta-band-title { font-size: calc(clamp(1.9rem, 6vw, 3rem) * var(--type-scale, 1)); }
.listing-rows-link { font-weight: 700; font-size: 1.5rem; }
.fd-members .mem-card__name { font-weight: 700; }
.key-takeaways-heading { text-transform: uppercase; letter-spacing: .08em; }

/* masthead and footer logo: the file is 560x200 and its ink runs from x 21 to 538 and y 36 to 164, so the box is cropped to a
   560x140 window (y 30 to 170): 52px tall on a phone (58px on a laptop, 56px in the footer). The heart-swirl device takes most of the
   height, so the name itself is about 31% of it (16px at 52px): the file is the limit, not the stylesheet (working/logo-fit-measured.json;
   NOTES.md 16 Oct: the measurement is kept out of logo-fit.json so page_check does not turn it into a FAIL). White and pink on the dark ground. */
.masthead-nav-logo,
.colophon-logo { aspect-ratio: 560 / 140; object-position: 50% 50%; }
@media (min-width: 60rem) { .masthead-nav-logo { height: 58px; } }
.masthead-nav--night { border-bottom: 3px solid var(--fd-magenta); box-shadow: 0 6px 22px rgba(190, 52, 116, .28); }
.colophon--soft, .colophon--plain { border-top: 3px solid var(--fd-magenta); }
.cta-sticky { border-top: 3px solid var(--fd-magenta); }

/* openers and buttons */
.hero-stated-title { font-weight: 700; font-size: calc(clamp(2.4rem, 8vw, 4.5rem) * var(--type-scale, 1)); letter-spacing: .005em; line-height: 1.02; }
.hero-stated-btn,
.cta-band-btn,
.fd-btn {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  box-shadow: 0 6px 18px rgba(243, 90, 161, .3);
}
.cta-sticky-btn { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; letter-spacing: .12em; }
.hero-stated--kitchen {
  background:
    linear-gradient(180deg, rgba(13, 8, 11, .74) 0%, rgba(13, 8, 11, .92) 100%),
    url("images/fd-hero-2000.webp") 72% center / cover no-repeat,
    var(--fd-ink);
}
.hero-stated--night { background: radial-gradient(60% 120% at 92% 118%, rgba(190, 52, 116, .42), rgba(190, 52, 116, 0) 70%), linear-gradient(180deg, #140d11 0%, #1c1218 100%); }
.hero-stated--pink { background: linear-gradient(160deg, #ff72b4 0%, var(--fd-pink) 55%, #e0468f 100%); }
.cta-band--brand,
.cta-band--soft {
  --cta-band-ground: var(--fd-magenta-deep);
  --cta-band-ink: #ffffff;
  --cta-band-btn-face: var(--fd-deep);
  --cta-band-btn-ink: #ffffff;
  --cta-band-ring: #ffffff;
}
.cta-band--brand { background: linear-gradient(135deg, #be3474 0%, #8c1f57 100%); }
.cta-band--brand .cta-band-btn { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* the home opener: the kitchen photograph above the words on a phone, behind them on a laptop */
.fd-hero {
  --hero-stated-ground: var(--fd-ink);
  --hero-stated-ink: var(--color-text);
  --hero-stated-title-ink: #ffffff;
  --hero-stated-btn-face: var(--fd-pink);
  --hero-stated-btn-ink: #1a0912;
  --hero-stated-ring: var(--fd-pink-soft);
  position: relative; isolation: isolate; padding: 0; background: var(--fd-ink); overflow: hidden;
}
.fd-hero-art { display: block; width: 100%; line-height: 0; }
.fd-hero-art img { width: 100%; height: auto; aspect-ratio: 800 / 280; object-fit: cover; object-position: 62% 30%; }
.fd-hero .hero-stated-inner { position: relative; z-index: 1; padding: var(--space-4) var(--space-4) var(--space-6); }
.fd-hero .fd-h1 { max-width: none; text-wrap: balance; margin-bottom: var(--space-4); }
.fd-h1-kicker {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 600;
  font-size: calc(clamp(1.2rem, 4.4vw, 1.7rem) * var(--type-scale, 1));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fd-pink);
}
.fd-h1-big {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(clamp(2.3rem, 10.4vw, 5.6rem) * var(--type-scale, 1));
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #ffffff;
}
.fd-trust span::before { color: var(--fd-pink); }
@media (min-width: 48rem) {
  .fd-hero { display: flex; align-items: center; min-height: 31rem; }
  .fd-hero-art { position: absolute; inset: 0; z-index: -1; }
  .fd-hero-art img { width: 100%; height: 100%; aspect-ratio: auto; object-position: 62% 24%; }
  .fd-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20, 13, 17, .9) 0%, rgba(20, 13, 17, .6) 42%, rgba(20, 13, 17, 0) 72%); }
  .fd-hero .hero-stated-inner { width: 100%; padding: var(--space-9) var(--space-8); }
  .fd-hero .fd-h1 { max-width: 40rem; }
}

/* menu cards: numbered courses with dashed rules, and dotted leaders */
.fd-menu { counter-reset: fdm; margin: var(--space-5) 0; display: grid; gap: 0; border: 1px solid var(--sec-line-strong); border-radius: var(--card-radius); background: var(--sec-card); overflow: hidden; }
.fd-menu > li { counter-increment: fdm; position: relative; padding: var(--space-4) var(--space-5) var(--space-4) 4.4rem; border-bottom: 1px dashed var(--sec-line-strong); }
.fd-menu > li:last-child { border-bottom: 0; }
.fd-menu > li::before { content: counter(fdm, decimal-leading-zero); position: absolute; left: var(--space-4); top: .85rem; font-family: var(--font-inline); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--sec-accent-text); }
.fd-menu h3 { margin: 0 0 var(--space-1); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .05em; }
.fd-menu p { margin: 0; }
.fd-leaders { margin: var(--space-5) 0; display: grid; gap: var(--space-3); }
.fd-leaders li { display: flex; align-items: baseline; gap: var(--space-2); }
.fd-leaders-name { font-weight: 700; color: var(--sec-head); }
.fd-leaders-dots { flex: 1 1 auto; min-width: 1rem; border-bottom: 2px dotted var(--sec-line-strong); transform: translateY(-.3em); }
.fd-leaders-note { text-align: right; font-weight: 500; color: var(--sec-accent-text); }
.fd-sec--pink h2::after { border-color: #1a0912; }
.fd-hero-art img[src] { background: var(--fd-ink); }
@media (max-width: 47.99em) {
  .fd-hero .hero-stated-inner { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-3) var(--space-4) var(--space-6); }
  .fd-hero .fd-h1-big { font-size: calc(clamp(2.1rem, 9.6vw, 3rem) * var(--type-scale, 1)); }
  .fd-hero .hero-stated-title { font-size: calc(2rem * var(--type-scale, 1)); }
  .fd-hero .fd-h1-big { font-size: 2.15rem; }
}

/* home opener extras: sub-line size and the three trust chips */
.fd-hero .hero-stated-sub { font-size: 1.125rem; max-width: 38rem; }
.fd-trust { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: var(--space-3) 0 0; font-size: .875rem; font-weight: 500; letter-spacing: .04em; color: var(--color-text-soft); }
.fd-trust span { white-space: nowrap; }
.fd-trust span::before { content: "\25C6"; margin-right: .5rem; font-size: .7em; vertical-align: .12em; color: var(--fd-pink); }
.fd-h1 { max-width: none; text-wrap: balance; }

/* the live member block's heading follows the section headings: capitals and the double rule */
.fd-members h2 { font-size: calc(clamp(1.9rem, 6.2vw, 2.8rem) * var(--type-scale, 1)); line-height: 1.04; text-transform: uppercase; letter-spacing: .025em; }
.fd-members h2::after { width: 3.6rem; height: 6px; border-top: 2px solid var(--fd-pink); border-bottom: 2px solid var(--fd-pink); border-radius: 0; background: none; box-shadow: none; }
/* === /Forget Dinner brand layer === */