/* === pattern-tokens:font-import:start (generated) === */
/*
   The After Dark faces. A stack NAMES a family; it never
   fetches one - so without this the headings below render in
   the metric-matched fallback and look deliberate.

   A <link rel="stylesheet"> in the document head is faster:
   the browser finds it while parsing the head, where this is
   not discovered until global.css has itself arrived and been
   parsed - an extra round trip on the critical path. Write the
   <link> as well; this is the backstop that makes a forgotten
   one slow rather than wrong.

   Quoted, not a bare url() token: these URLs carry a semicolon
   inside the weight axis, and only a string ends where the URL
   ends.

   At the top of the file because @import is valid only before
   any other rule. Regenerated in place; edits here are lost. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..700;1,400..700&family=Big+Shoulders:opsz,wght@10..72,400..700&display=swap");
/* === pattern-tokens:font-import:end === */

/* Encuentros Puerto Rico — base de marca
   Paleta tomada de la landing actual: magenta #EF18B8 sobre negro #0F1014,
   geometría de píldora (30px) y radios generosos en imagen (45px).
   Tipografía: emparejamiento "After Dark" — la escribe brand_tokens.py. */

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* ---------- tokens ---------- */
:root {
  /* Colour — fondo y superficies */
  --color-bg: #0f1014;
  --color-surface: #16181f;
  --color-surface-soft: #1e212a;

  /* Colour — tinta */
  --color-text: #e9eaf0;
  --color-text-soft: #a4aab8;
  --color-heading: #ffffff;

  /* Colour — marca.
     #EF18B8 es el magenta de la landing actual, pero con blanco encima
     da 3.82:1 y no llega al mínimo de 4.5:1. #DB0A94 — el magenta del
     favicon de la marca — da 4.69:1. Ese lleva texto; el brillante se
     queda para neón decorativo, donde nunca hay palabras encima. */
  --color-primary: #db0a94;
  --color-primary-dark: #a80870;
  --color-neon: #ef18b8;
  --color-focus: #ff8ae0;

  /* Space — escala de 4px */
  --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: 6rem;
  --space-12: 8rem;
  --container-max: 75rem;

  /* Dials — píldora y sombra de neón, el ADN de la marca */
  --btn-radius: 999px;
  --card-radius: 1.5rem;
  --chip-radius: 999px;
  --card-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.45);

  /* Medido con logo_fit.py, no elegido: el logo es un wordmark de 400x75
     cuya tinta ocupa 393x49 (relleno 0.653) y cuyas letras son el 98% de
     la tinta. 68px es la caja mínima que deja 44px de tinta y 44px de
     letra. Ver working/logo-fit.json. */
  --logo-height: 68px;
  --logo-height-footer: 74px;

  /* Motion */
  --transition-fast: 160ms ease;
  --transition-slow: 320ms ease;
}

/* ---------- base ---------- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6; /* bodyLineHeight del emparejamiento After Dark */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-display, 700);
  color: var(--color-heading);
  line-height: calc(1.15 * var(--heading-leading, 1));
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
}

a { color: var(--color-primary); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

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

/* === pattern-tokens:start (generated - edit outside these markers) === */
/*
   Role tokens the design patterns require. A var() this
   sheet does not define is discarded at compute time, so
   the rule is lost rather than falling back to anything.
   Regenerated in place; anything you add here is replaced.
*/
/* Metric-matched fallback for Big Shoulders, on the heading. Arial,
   resized to match Big Shoulders, so the line boxes are already the size
   they will be once the webfont arrives and the page does not reflow
   under the reader when it does.

   One face PER WEIGHT. A real face gets wider at 700; a local one
   thickened synthetically does not, so a single face solved at 400
   leaves anything set at 700 too narrow and this block causes the
   shift it exists to stop. The descriptor is what picks the right
   solved number instead of synthesising a bold from the 400 face.

   The local() chain is ordered. The numbers are solved against Arial
   specifically, so a stand-in is a degradation rather than a match -
   but Linux and Android have no Arial, and there a face with nothing
   to load defines no family at all and the stack falls through in
   silence, which measured 34.7% off.

   BESIDE the :root rule, never inside it: an at-rule in a declaration
   block is dropped by the parser, and the stack would have survived
   naming a family nothing defines. */
@font-face {
  font-family: 'BigShouldersFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 400;
  size-adjust: 69.2%;
  ascent-override: 98.6%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'BigShouldersFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 700;
  size-adjust: 83.1%;
  ascent-override: 98.6%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}

/* Metric-matched fallback for Archivo, on the body. Arial,
   resized to match Archivo, so the line boxes are already the size
   they will be once the webfont arrives and the page does not reflow
   under the reader when it does.

   One face PER WEIGHT. A real face gets wider at 700; a local one
   thickened synthetically does not, so a single face solved at 400
   leaves anything set at 700 too narrow and this block causes the
   shift it exists to stop. The descriptor is what picks the right
   solved number instead of synthesising a bold from the 400 face.

   The local() chain is ordered. The numbers are solved against Arial
   specifically, so a stand-in is a degradation rather than a match -
   but Linux and Android have no Arial, and there a face with nothing
   to load defines no family at all and the stack falls through in
   silence, which measured 34.7% off.

   BESIDE the :root rule, never inside it: an at-rule in a declaration
   block is dropped by the parser, and the stack would have survived
   naming a family nothing defines. */
@font-face {
  font-family: 'ArchivoFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 400;
  size-adjust: 98.3%;
  ascent-override: 87.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'ArchivoFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 700;
  size-adjust: 105.7%;
  ascent-override: 87.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* Shape: the brand's own scale, under the names the patterns use. */
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);

  /* Inks. The ratios are measured, not intended. */
  --color-rule: color-mix(in srgb, var(--color-text) 18%, transparent);
  --color-scrim: #11161d;
  /* on the scrim: 18.16:1 */
  --color-on-scrim: #ffffff;
  /* white 4.68:1, the brand's own text 3.90:1 on --color-primary */
  --color-on-primary: #ffffff;

  /* Type: the After Dark pairing. Chosen, not derived. */
  --font-heading: 'Big Shoulders', 'BigShouldersFallback', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --font-body: 'Archivo', 'ArchivoFallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --heading-leading: 0.95;
  --heading-tracking: 0.01;

  /* 0.92 quieter, 1.15 louder. Display type only. */
  --type-scale: 1.15;
}
/* === pattern-tokens:end === */

/* ===================================================================
   Reglas de los patrones de la librería v143, del armazón
   homepage-photo-led@2. Sin modificar: leen todo color, radio y
   tipografía de los tokens de arriba. No editar a mano — si hay que
   cambiarlas, se vuelven a traer de la librería.
   =================================================================== */
/* homepage-photo-led@2 - generated by ci/compose.py. The patterns' CSS in page order. Never hand-edit: change the pattern and regenerate. */

/* ---- masthead-nav v10 ---- */
/* 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: 1rem;
  height: 2px;
  background: currentColor;
}
.masthead-nav-toggle-icon::before,
.masthead-nav-toggle-icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: currentColor;
}
.masthead-nav-toggle-icon::before {
  top: -5px;
}
.masthead-nav-toggle-icon::after {
  top: 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);
}
/* 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. */
.masthead-nav--icon .masthead-nav-toggle {
  justify-content: center;
  min-width: var(--masthead-nav-tap);
}
.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 button with no word in it is one tap target wide, so the mark may
     take the rest of the row. --row has no button and keeps the 45%. */
  .masthead-nav--drawer.masthead-nav--icon .masthead-nav-mark,
  .masthead-nav--panel.masthead-nav--icon .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 {
    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;
  }
  .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 {
    min-height: 0;
    white-space: nowrap;
  }
  /* 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;
  }
  .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;
  }
}

/* ---- hero-overlay v13 ---- */
/* hero-overlay v13 - tokens only, selectors prefixed. Nothing here moves. */
.hero-overlay {
  /* Contrast floor: the scrim carries it, never the photo. */
  --hero-overlay-scrim-floor: clamp(0.92, var(--hero-overlay-scrim-strength, 0.92), 1);
  position: relative;
  /* Own stacking context: the image/scrim/copy ladder must not interleave. */
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--color-bg);
  /* A viewport MINUS what sits above. A plain 100svh puts the foot one
   header below the fold, and the foot is where the control is. svh, not vh.
   The header only: this opener is not the page, so the site footer is not in
   the first viewport - hero-squeeze is the one that subtracts a footer too.
   Set --page-header-height off the rendered page; see TOKENS.md. */
  min-height: calc(100svh - var(--page-header-height, 9.5rem));
}
.hero-overlay-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor to the top: faces and horizons live in the upper third. */
  object-position: center top;
}
/* A vignette plus a wash that resolves to the page background. */
.hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 18%,
      color-mix(in srgb, var(--color-bg) 4%, transparent) 0%,
      color-mix(in srgb, var(--color-bg) 26%, transparent) 42%,
      color-mix(in srgb, var(--color-bg) 82%, transparent) 88%),
    linear-gradient(to top,
      var(--color-bg) 0%,
      color-mix(in srgb, var(--color-bg) calc(var(--hero-overlay-scrim-floor) * 100%), transparent) 8%,
      color-mix(in srgb, var(--color-bg) calc(var(--hero-overlay-scrim-floor) * 100%), transparent) 44%,
      color-mix(in srgb, var(--color-bg) calc(var(--hero-overlay-scrim-floor) * 32%), transparent) 72%,
      transparent 100%);
}
.hero-overlay-inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--space-4), var(--container-max));
  margin-inline: auto;
  padding-block: var(--space-12) var(--space-8);
}
/* Held narrow: the copy must stay inside the scrim's guaranteed band. */
.hero-overlay-copy {
  max-width: 34rem;
}
.hero-overlay-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  /* --color-text: the ground here is a scrim over a photograph. */
  color: var(--color-text);
  font-size: calc(clamp(2.25rem, 1.4rem + 3.4vw, 4rem) * var(--type-scale, 1));
  line-height: calc(1.05 * var(--heading-leading, 1));
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  text-wrap: balance;
}
.hero-overlay-sub {
  margin: 0 0 var(--space-6);
  max-width: 32rem;
  /* --color-text-soft, not a dimmed white: only the token is guaranteed. */
  color: var(--color-text-soft);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
}
.hero-overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.hero-overlay-btn,
.hero-overlay-ghost {
  box-sizing: border-box;
  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);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.hero-overlay-btn {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.hero-overlay-btn:hover {
  background: var(--color-primary-dark);
}
/* --color-text edge: no token is guaranteed over a photograph. */
.hero-overlay-ghost {
  border: 2px solid var(--color-text);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  /* --color-text: this is not large text. */
  color: var(--color-text);
}
.hero-overlay-ghost:hover {
  background: var(--color-bg);
}
/* Both controls need a visible focus ring. */
.hero-overlay-btn:focus-visible,
.hero-overlay-ghost:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Phones: copy to the top, and the scrim inverts with it. */
@media (width < 48rem) {
  .hero-overlay {
    align-items: flex-start;
  }
  .hero-overlay::after {
    background-image: linear-gradient(
      to bottom,
      transparent 0,
      color-mix(in srgb, var(--color-bg) calc(var(--hero-overlay-scrim-floor) * 32%), transparent) 13svh,
      color-mix(in srgb, var(--color-bg) calc(var(--hero-overlay-scrim-floor) * 100%), transparent) 25svh,
      color-mix(in srgb, var(--color-bg) calc(var(--hero-overlay-scrim-floor) * 100%), transparent) 88%,
      var(--color-bg) 100%
    );
  }
  .hero-overlay-inner {
    padding-block: max(var(--space-12), 26svh) var(--space-8);
  }
  .hero-overlay-title {
    line-height: calc(1.12 * var(--heading-leading, 1));
  }
}

/* Short viewports: unpin, or the copy is unreachable. */
@media (height < 34rem) {
  .hero-overlay {
    min-height: auto;
  }
  .hero-overlay-inner {
    padding-block: var(--space-8);
  }
}

/* ---- steps-numbered v9 ---- */
/* steps-numbered v3 - tokens only, selectors prefixed */
.steps-numbered {
  /* Contrast floor. The words sit on a photograph, so the scrim carries the
   contrast; clamp() holds it whatever the dial is set to. */
  --steps-numbered-scrim-floor: clamp(0.92, var(--steps-numbered-scrim-strength, 0.92), 1);
  padding-block: var(--space-8);
}
.steps-numbered-inner {
  width: min(100% - 2 * var(--space-4), var(--container-max));
  margin-inline: auto;
}
.steps-numbered-title {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-size: calc(clamp(2rem, 1.4rem + 2.4vw, 3.5rem) * var(--type-scale, 1));
  line-height: calc(1.1 * var(--heading-leading, 1));
  letter-spacing: calc(-0.025em + var(--heading-tracking, 0) * 1em);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}
.steps-numbered-list {
  counter-reset: steps-numbered-count;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-5);
}
/* Full-bleed image at a fixed portrait ratio, clipped to the brand's corner. */
.steps-numbered-item {
  counter-increment: steps-numbered-count;
  position: relative;
  aspect-ratio: 510 / 590;
  overflow: hidden;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--color-surface-soft);
}
.steps-numbered-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Three-stop scrim: near-solid where the words are, then fading. */
.steps-numbered-scrim {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-6);
  /* Hold the full level to the top of the text band - the copy is a block,
   not a line. */
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-scrim) calc(var(--steps-numbered-scrim-floor) * 100%), transparent) 0%,
    color-mix(in srgb, var(--color-scrim) calc(var(--steps-numbered-scrim-floor) * 100%), transparent) 55%,
    color-mix(in srgb, var(--color-scrim) calc(var(--steps-numbered-scrim-floor) * 43%), transparent) 78%,
    transparent 100%
  );
}
.steps-numbered-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  color: var(--color-on-scrim);
}
/* line-height below 1 sets the numeral's cap flush with the heading. */
.steps-numbered-content::before {
  content: counter(steps-numbered-count);
  font-family: var(--font-heading);
  font-size: calc(clamp(64px, 6vw, 84px) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  line-height: 0.8;
  flex: none;
}
.steps-numbered-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.steps-numbered-heading {
  font-family: var(--font-heading);
  font-size: calc(clamp(1.125rem, 0.9rem + 0.6vw, 1.375rem) * var(--type-scale, 1));
  line-height: calc(1.15 * var(--heading-leading, 1));
  letter-spacing: calc(-0.01em + var(--heading-tracking, 0) * 1em);
  margin: 0;
  text-wrap: balance;
}
.steps-numbered-body {
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  line-height: 1.4;
  margin: 0;
}
/* Narrow cards cannot carry an 84px numeral beside the copy, so it steps down
   and the pair stacks rather than the heading wrapping to one word a line.
   The step-down carries the dial too: without it the numeral jumped smaller
   as the viewport narrowed past 30rem on any brand with the dial above 1,
   which is a worse fault than a size that never moves at all. */
@media (width < 30rem) {
  .steps-numbered-content {
    flex-direction: column;
    gap: var(--space-2);
  }
  .steps-numbered-content::before {
    font-size: calc(clamp(48px, 14vw, 64px) * var(--type-scale, 1));
  }
  .steps-numbered-scrim {
    padding: var(--space-5);
  }
}

/* ---- faq-details v6 ---- */
/* 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;
  }
}

/* ---- cta-band v5 ---- */
/* 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 patterns/cta-band/README.md. */
.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;
}
.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;
}

/* ---- colophon v2 ---- */
/* 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;
  }
}

/* --- cta-sticky@7 (librería v143) --- */
/* 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;
  }
}

/* --- hero-stated (librería v143) --- */
/* 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;
}
.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);
  }
}

/* --- cta-assurance (librería v143) --- */
/* cta-assurance v1 - tokens only, selectors prefixed */
/* Sets no colour: it inherits the ink above it. See the README. */
.cta-assurance {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.cta-assurance-item + .cta-assurance-item::before {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  margin-inline-end: var(--space-3);
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

/* --- feature-panels (librería v143) --- */
/* feature-panels v1 - tokens only, selectors prefixed */
.feature-panels {
  --feature-panels-min: 20rem;
  --feature-panels-height: clamp(24rem, 46vh, 34rem);
  padding-block: var(--space-8) 0;
}
.feature-panels-head {
  max-width: var(--container-max);
  margin: 0 auto var(--space-6);
  padding-inline: var(--space-4);
}
.feature-panels-eyebrow {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.feature-panels-title {
  font-family: var(--font-heading);
  /* Page ground and a clamp floor above 24px: both halves of the heading
   token's contract. Keep both if you edit it. */
  color: var(--color-heading);
  font-size: calc(clamp(1.75rem, 3.4vw, 2.75rem) * 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;
}
.feature-panels-intro {
  color: var(--color-text-soft);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0;
}
/* Edge to edge, no gutters and no radius: the panels are the section. */
.feature-panels-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--feature-panels-min), 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Each panel names a ground, and its ink is the one the contract states
   against that ground. Everything below reads both through these two
   properties, which is why nothing here needs to know which panel it is. */
.feature-panels-item--light {
  --feature-panels-ground: var(--color-surface-soft);
  --feature-panels-ink: var(--color-text);
}
.feature-panels-item--brand {
  --feature-panels-ground: var(--color-primary);
  --feature-panels-ink: var(--color-on-primary);
}
.feature-panels-item--deep {
  --feature-panels-ground: var(--color-scrim);
  --feature-panels-ink: var(--color-on-scrim);
}
.feature-panels-item {
  display: flex;
  flex-direction: column;
  min-height: var(--feature-panels-height);
  padding: var(--space-6);
  background: var(--feature-panels-ground);
  color: var(--feature-panels-ink);
}
.feature-panels-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--space-8);
}
.feature-panels-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--chip-radius);
  /* The mark's own ground is the panel ink at low strength, so it reads on
   every one of the three without needing a fourth pair. */
  background: color-mix(in srgb, var(--feature-panels-ink) 16%, transparent);
}
.feature-panels-icon svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}
.feature-panels-claim {
  font-family: var(--font-heading);
  /* The panel ink, never --color-heading: every panel paints its own ground
   and that token is promised against --color-bg alone. */
  color: var(--feature-panels-ink);
  font-size: calc(clamp(1.5rem, 2.6vw, 2.125rem) * 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;
  text-wrap: balance;
}
/* margin-top:auto pins the link to the panel floor, so panels holding claims
   of unequal length still line their links up across the row. */
.feature-panels-action {
  margin: auto 0 0;
  padding-top: var(--space-6);
}
.feature-panels-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 44px target on a link that carries no padding of its own. */
  min-height: 44px;
  color: var(--feature-panels-ink);
  font-weight: 700;
  /* Underlined, not tinted: colour is never the only thing marking a link,
   and on three different grounds a tint could not be either. */
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.feature-panels-arrow {
  transition: translate var(--transition-fast) ease-out;
}
.feature-panels-link:hover .feature-panels-arrow,
.feature-panels-link:focus-visible .feature-panels-arrow {
  translate: 0.25rem 0;
}
/* The ring is the panel's own ink, which is by definition the one colour the
   contract promises against that panel's ground - so one rule is guaranteed
   on all three, where --color-focus would not be. See the README. */
.feature-panels-link:focus-visible {
  outline: 3px solid var(--feature-panels-ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .feature-panels-arrow {
    transition: none;
  }
}
@media (min-width: 48rem) {
  .feature-panels-head {
    padding-inline: var(--space-6);
  }
  .feature-panels-item {
    padding: var(--space-8);
  }
}

/* --- comparison-table (librería v143) --- */
/* comparison-table v2 - tokens only, selectors prefixed */
.comparison-table {
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
  background: var(--color-bg);
  color: var(--color-text);
}
.comparison-table-inner {
  max-width: var(--container-max, 72rem);
  margin-inline: auto;
}
.comparison-table-title {
  font-family: var(--font-heading);
  color: var(--color-heading, var(--color-text));
  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;
}
.comparison-table-intro {
  color: var(--color-text-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 var(--space-6);
}
/* overflow on both axes, not overflow-x. Setting only one makes the other
   scrollable anyway, and the sticky head then sticks to a container that
   never scrolls, so it looks as though it does not work. */
.comparison-table-scroll {
  overflow: auto;
  border-radius: var(--card-radius);
}
.comparison-table-scroll:focus-visible {
  outline: 3px solid var(--color-focus, var(--color-primary));
  outline-offset: 3px;
}
/* separate, not collapse: with collapsed borders the table paints the border
   rather than the cell, and a sticky head loses its bottom edge as it moves.
   The box-shadow below draws that edge instead. */
.comparison-table-grid {
  border-collapse: separate;
  border-spacing: 0;
  min-inline-size: 40rem;
  inline-size: 100%;
  text-align: left;
}
.comparison-table-caption {
  caption-side: top;
  text-align: left;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
  padding-block-end: var(--space-3);
}
.comparison-table-corner,
.comparison-table-head {
  background: var(--color-surface, var(--color-bg));
  box-shadow: inset 0 -1px 0 var(--color-rule, color-mix(in srgb, var(--color-text) 18%, transparent));
  padding: var(--space-4) var(--space-5);
  vertical-align: bottom;
  text-align: left;
}
/* The criterion column stays put while the values scroll sideways. Without
   it a phone reader ends up looking at three columns of answers with no
   question against them. */
.comparison-table-criterion,
.comparison-table-corner {
  position: sticky;
  inset-inline-start: 0;
  background: var(--color-bg);
  z-index: 1;
}
.comparison-table-corner {
  background: var(--color-surface, var(--color-bg));
  z-index: 2;
}
.comparison-table-name {
  display: block;
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: calc(1.125rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  line-height: calc(1.25 * var(--heading-leading, 1));
}
/* The word says which column is recommended; the tint only repeats it.
   Never ship one without the other. */
.comparison-table-flag {
  display: inline-block;
  margin-block-start: var(--space-2);
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.comparison-table-head--recommended,
.comparison-table-cell--recommended {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
}
.comparison-table-criterion {
  font-weight: 700;
  color: var(--color-text);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-rule, color-mix(in srgb, var(--color-text) 18%, transparent));
  vertical-align: top;
}
.comparison-table-cell {
  color: var(--color-text);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-rule, color-mix(in srgb, var(--color-text) 18%, transparent));
  vertical-align: top;
  line-height: 1.5;
}
.comparison-table-row:last-child .comparison-table-criterion,
.comparison-table-row:last-child .comparison-table-cell {
  border-block-end: 0;
}
@media (min-width: 48rem) {
  .comparison-table {
    padding-inline: var(--space-8);
  }
  /* svh, not vh: the mobile address bar would eat into a vh height. The
     vertical scroller exists only where the table is tall enough to want a
     sticky head; below this width it would nest a scroller inside the page. */
  .comparison-table-scroll {
    max-block-size: 80svh;
  }
  .comparison-table-corner,
  .comparison-table-head {
    position: sticky;
    inset-block-start: 0;
  }
}

/* --- pricing-tiers (librería v143) --- */
/* pricing-tiers v5 - tokens only, selectors prefixed */
.pricing-tiers {
  padding-block: var(--space-8);
}
.pricing-tiers-inner {
  width: min(100% - 2 * var(--space-4), var(--container-max));
  margin-inline: auto;
}
.pricing-tiers-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);
}
.pricing-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
.pricing-tiers-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-6);
}
.pricing-tiers-flag {
  align-self: start;
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  /* --color-text: --color-primary-dark is for light grounds only. */
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--chip-radius);
  margin: 0 0 var(--space-3);
}
.pricing-tiers-name {
  font-family: var(--font-heading);
  /* --color-text: --color-heading is not guaranteed on a surface. */
  color: var(--color-text);
  font-size: calc(1.25rem * var(--type-scale, 1));
  margin: 0 0 var(--space-2);
}
.pricing-tiers-price {
  /* --color-text: --color-heading is not guaranteed on a surface. */
  color: var(--color-text);
  font-size: calc(clamp(1.75rem, 1.2rem + 2vw, 2.5rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  margin: 0 0 var(--space-4);
}
.pricing-tiers-features {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.pricing-tiers-features li {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
}
.pricing-tiers-features li:last-child {
  border-bottom: 0;
}
/* margin-top:auto bottom-aligns every card's CTA whatever the feature count */
.pricing-tiers-btn {
  margin-top: auto;
  display: block;
  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);
  min-height: 48px;
  line-height: 1.5;
}
.pricing-tiers-btn:hover {
  background: var(--color-primary-dark);
}
/* Focus needs its own indicator, not the hover fill. */
.pricing-tiers-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* --- claim-stack (librería v143) --- */
/* claim-stack v2 - tokens only, selectors prefixed */
/* Each ground names its own ink pair, and every rule below reads the pair.
   The base carries the plain ground's values, so a copy that loses its
   modifier still has a ground, a hairline and its inks. */
.claim-stack,
.claim-stack--plain {
  --claim-stack-ground: var(--color-bg);
  --claim-stack-ink: var(--color-heading, var(--color-text));
  --claim-stack-quiet: var(--color-text-soft);
  --claim-stack-edge: var(--color-rule, color-mix(in srgb, var(--color-text) 18%, transparent));
}
.claim-stack--soft {
  --claim-stack-ground: var(--color-surface-soft);
  --claim-stack-ink: var(--color-text);
  --claim-stack-quiet: var(--color-text-soft);
  --claim-stack-edge: var(--color-rule, color-mix(in srgb, var(--color-text) 18%, transparent));
}
.claim-stack--brand {
  --claim-stack-ground: var(--color-primary);
  --claim-stack-ink: var(--color-on-primary, var(--color-surface));
  --claim-stack-quiet: color-mix(in srgb, var(--color-on-primary, var(--color-surface)) 78%, var(--color-primary));
  --claim-stack-edge: color-mix(in srgb, var(--color-on-primary, var(--color-surface)) 35%, transparent);
}
.claim-stack--deep {
  --claim-stack-ground: var(--color-scrim, var(--color-text));
  --claim-stack-ink: var(--color-on-scrim, var(--color-bg));
  --claim-stack-quiet: color-mix(in srgb, var(--color-on-scrim, var(--color-bg)) 78%, var(--color-scrim, var(--color-text)));
  --claim-stack-edge: color-mix(in srgb, var(--color-on-scrim, var(--color-bg)) 30%, transparent);
}
.claim-stack {
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
  background: var(--claim-stack-ground);
  color: var(--claim-stack-ink);
}
.claim-stack-inner {
  max-width: var(--container-max, 72rem);
  margin-inline: auto;
}
.claim-stack-heading {
  max-width: var(--container-max, 72rem);
  margin: 0 auto var(--space-8);
  font-family: var(--font-heading);
  color: var(--claim-stack-quiet);
  font-size: calc(1.75rem * 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));
}
.claim-stack-item {
  /* The ceiling is in vh, not on the spacing ramp. Do not "restore" a token
     here: the ramp's top step is below 10vh on most screens, which pins this
     to one value and the claim never gets a screenful. */
  padding-block: clamp(var(--space-8), 10vh, 20vh);
  border-block-start: 1px solid var(--claim-stack-edge);
}
.claim-stack-item:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}
.claim-stack-claim {
  font-family: var(--font-heading);
  color: var(--claim-stack-ink);
  font-size: calc(clamp(2rem, 1rem + 4.5vw, 4rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.03em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.05 * var(--heading-leading, 1));
  max-width: 11.25em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.claim-stack-note {
  color: var(--claim-stack-quiet);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 44ch;
  margin: var(--space-4) 0 0;
}
@media (min-width: 48rem) {
  .claim-stack {
    padding-inline: var(--space-8);
  }
  .claim-stack-heading {
    margin-block-end: var(--space-12);
  }
}

/* --- safety-protections (librería v143) --- */
/* 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;
}
.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;
}
.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));
  }
}

/* --- link-cluster (librería v143) --- */
/* 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;
}
.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;
}

/* --- cierre callado, propio de la marca ---------------------------------
   El brief de la página de seguridad prohíbe cerrar con una banda de
   registro a peso primario: "el cierre no es un grito de conversión". Esto
   es lo que pide en su lugar — encabezado pequeño, una línea, y un solo
   enlace a peso secundario. Lee los tokens de arriba como cualquier patrón. */
.quiet-close {
  padding: var(--space-10) var(--space-5);
  border-top: 1px solid var(--color-rule);
}
.quiet-close-inner {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}
.quiet-close-title {
  font-size: 1.25rem;
  margin-bottom: var(--space-3);
}
.quiet-close-lead {
  color: var(--color-text-soft);
  margin-bottom: var(--space-5);
}
.quiet-close-link {
  display: inline-block;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  padding: var(--space-3) var(--space-2);
  min-height: 44px;
  transition: color var(--transition-fast);
}
.quiet-close-link:hover { color: var(--color-neon); }

/* --- article-masthead (librería v143) --- */
/* article-masthead v2 - tokens only, selectors prefixed */
.article-masthead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100% - 2 * var(--space-4), 52rem);
  margin-inline: auto;
  margin-block-end: var(--space-8);
  padding-block-start: var(--space-8);
  /* The title below is set in --color-heading, which the contract guarantees
     against --color-bg and against nothing else. Keep this ground. */
  background: var(--color-bg);
}
/* align-items: flex-start above keeps the text left, so the two rule-bearing
   rows need width: 100% to reach the full measure. Dropping either one pulls
   its hairline in to the width of its own words. */
.article-masthead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  width: 100%;
  margin: 0 0 var(--space-5);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-rule);
}
.article-masthead-item {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}
.article-masthead-tag {
  color: var(--color-text);
  font-weight: 700;
}
.article-masthead-sep {
  color: var(--color-text-soft);
  line-height: 1;
  user-select: none;
}
.article-masthead-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: calc(clamp(2rem, 4vw, 3.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.08 * var(--heading-leading, 1));
  color: var(--color-heading);
  text-wrap: balance;
}
/* The lede is held to a shorter measure than the title on purpose. The two
   are not meant to match, and matching them flattens the block. */
.article-masthead-lede {
  max-width: 42ch;
  margin: 0 0 var(--space-6);
  color: var(--color-text-soft);
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.55;
}
.article-masthead-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-rule);
}
.article-masthead-avatar {
  flex: 0 0 auto;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
}
.article-masthead-author-meta {
  min-width: 0;
}
.article-masthead-byline,
.article-masthead-role {
  margin: 0;
  line-height: 1.3;
}
.article-masthead-byline {
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 700;
}
.article-masthead-role {
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-weight: 500;
}
@media (min-width: 48rem) {
  .article-masthead-title {
    letter-spacing: calc(-0.025em + var(--heading-tracking, 0) * 1em);
  }
}

/* --- key-takeaways (librería v143) --- */
/* 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);
}
.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);
}

/* --- prose-column (librería v143) --- */
/* 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;
}
/* --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);
}

/* --- source-note (librería v143) --- */
/* source-note v1 - tokens only, selectors prefixed */
.source-note {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  max-width: 60ch;
  text-wrap: pretty;
}

/* --- author-note (librería v143) --- */
/* author-note v1 - tokens only, selectors prefixed */
.author-note {
  /* Required: it holds the padding below inside this width, not outside it. */
  box-sizing: border-box;
  width: min(100% - 2 * var(--space-4), 52rem);
  margin-inline: auto;
  margin-block: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface-soft);
  border: var(--card-border);
  /* Keep both this and the fill above: a brand may set the card edge
     transparent, and a brand may set the soft surface to the page ground. */
  border-block-start: 3px solid var(--color-primary);
  border-radius: var(--card-radius);
  color: var(--color-text);
}
.author-note-heading {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  /* Not 0.8125rem: this rides --type-scale and would drop under the text floor. */
  font-size: calc(0.875rem * var(--type-scale, 1));
  font-weight: 700;
  letter-spacing: calc(0.06em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.3 * var(--heading-leading, 1));
  /* --color-text: a label this small is nowhere near the size --color-heading
     is promised at, and this panel is not the page ground either. */
  color: var(--color-text);
  text-transform: uppercase;
}
.author-note-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: calc(1.375rem * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.015em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.2 * var(--heading-leading, 1));
  color: var(--color-text);
}
.author-note-role {
  margin: var(--space-1) 0 0;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}
.author-note-bio {
  max-width: 62ch;
  margin: var(--space-4) 0 0;
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: pretty;
}
.author-note-more {
  margin: var(--space-4) 0 0;
  font-size: 0.9375rem;
}
/* Inherit: the underline carries the affordance, on whatever ground the panel
   turns out to be. See the README. */
.author-note-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.author-note-link:hover {
  text-decoration-thickness: 2px;
}
.author-note-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
@media (min-width: 48rem) {
  .author-note {
    padding: var(--space-8);
  }
}

/* --- article-toc (librería v143) --- */
/* article-toc v2 - tokens only, selectors prefixed */
.article-toc {
  width: min(100% - 2 * var(--space-4), 52rem);
  margin-inline: auto;
  margin-block: var(--space-6);
  border-block: 1px solid var(--color-rule);
}
.article-toc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  padding-block: var(--space-3);
  cursor: pointer;
  color: var(--color-text);
  /* Both lines are needed to drop the default triangle. */
  list-style: none;
}
.article-toc-summary::-webkit-details-marker {
  display: none;
}
/* Required: removing the marker above removes the focus affordance some
   browsers hang off it. */
.article-toc-summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}
.article-toc-label {
  font-family: var(--font-heading);
  /* Not 0.8125rem: this rides --type-scale and would drop under the text floor. */
  font-size: calc(0.875rem * var(--type-scale, 1));
  font-weight: 700;
  letter-spacing: calc(0.06em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.3 * var(--heading-leading, 1));
  text-transform: uppercase;
}
/* The indicator is a shape, not a glyph and never colour alone. */
.article-toc-icon {
  position: relative;
  flex: 0 0 auto;
  width: var(--space-4);
  height: var(--space-4);
}
.article-toc-icon::before,
.article-toc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60%;
  height: 2px;
  margin-block-start: -1px;
  background: var(--color-text-soft);
}
.article-toc-icon::before {
  inset-inline-start: 0;
  transform: rotate(45deg);
}
.article-toc-icon::after {
  inset-inline-end: 0;
  transform: rotate(-45deg);
}
/* A state change, not an animation: it applies under reduced motion too. */
.article-toc-disclosure[open] .article-toc-icon {
  transform: rotate(180deg);
}
.article-toc-list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-3);
}
.article-toc-item + .article-toc-item {
  border-block-start: 1px solid var(--color-rule);
}
.article-toc-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-2);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
}
.article-toc-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.article-toc-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

/* --- pull-quote (librería v143) --- */
/* pull-quote v1 - tokens only, selectors prefixed */
.pull-quote {
  --pull-quote-measure: 68ch;
  box-sizing: border-box;
  width: min(100% - 2 * var(--space-4), var(--pull-quote-measure));
  margin-block: var(--space-6);
  margin-inline: auto;
  padding-block: var(--space-5);
  /* The ch measure resolves against this: it lands on the article column. */
  font-size: 1.0625rem;
  border-block: 1px solid var(--color-rule);
}
.pull-quote-claim {
  /* em, not ch - a measure must not depend on the face in use. */
  max-width: 15em;
  margin: 0;
  font-family: var(--font-heading);
  font-size: calc(clamp(1.375rem, 3.2vw, 2rem) * var(--type-scale, 1));
  font-weight: var(--weight-display, 700);
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
  line-height: calc(1.25 * var(--heading-leading, 1));
  color: var(--color-text);
  text-wrap: balance;
}
@media (min-width: 48rem) {
  .pull-quote {
    padding-block: var(--space-6);
  }
}


/* --- photo-band (librería v143) --- */
/* photo-band v1 - tokens only, selectors prefixed */
.photo-band {
  display: block;
  width: 100%;
  background: var(--color-surface-soft);
}
/* Rem against the viewport width, never viewport height: see the README. */
.photo-band--short {
  --photo-band-height: clamp(10rem, 28vw, 18rem);
}
.photo-band--standard {
  --photo-band-height: clamp(14rem, 40vw, 28rem);
}
.photo-band--tall {
  --photo-band-height: clamp(18rem, 56vw, 40rem);
}
.photo-band-image {
  display: block;
  width: 100%;
  height: var(--photo-band-height);
  object-fit: cover;
}



/* --- article-figure (librería v143) --- */
/* article-figure v1 - tokens only, selectors prefixed */
.article-figure {
  box-sizing: border-box;
  /* 52rem is the article shell, held by the masthead, the contents list and
     the author block. Any other number puts a third left edge on the page. */
  width: min(100% - 2 * var(--space-4), 52rem);
  margin-block: var(--space-6);
  margin-inline: auto;
}
.article-figure-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--card-radius);
}
.article-figure-caption {
  max-width: 60ch;
  margin-block-start: var(--space-3);
  color: var(--color-text-soft);
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.article-figure-credit {
  font-style: italic;
}



/* --- photo-cards (librería v143) --- */
/* photo-cards v1 - tokens only, selectors prefixed */
.photo-cards {
  --photo-cards-min: 17rem;
  --photo-cards-ratio: 3 / 2;
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
}
.photo-cards-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.photo-cards-title {
  font-family: var(--font-heading);
  /* Page ground and a clamp floor above 24px: both halves of the heading
   token's contract. Keep both if you edit it. */
  color: var(--color-heading);
  font-size: calc(clamp(1.75rem, 3.4vw, 2.75rem) * 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-6);
  text-wrap: balance;
}
.photo-cards-list {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(var(--photo-cards-min), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.photo-cards-item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.photo-cards-img {
  display: block;
  width: 100%;
  aspect-ratio: var(--photo-cards-ratio);
  object-fit: cover;
  /* A ground behind a slow or failed image, so the card keeps its shape. */
  background: var(--color-surface-soft);
}
.photo-cards-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}
.photo-cards-chip {
  align-self: flex-start;
  padding: 0.15rem var(--space-3);
  border-radius: var(--chip-radius);
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.photo-cards-heading {
  font-family: var(--font-heading);
  /* A card is not --color-bg, so the heading token promises nothing here. */
  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-2);
  text-wrap: balance;
}
.photo-cards-link {
  color: inherit;
  text-decoration: none;
}
/* The card is the target, drawn out of the heading's own link so there is
   still exactly one focus stop and one accessible name. */
.photo-cards-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.photo-cards-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.photo-cards-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.photo-cards-copy {
  /* margin-top:auto sets the copy on the card floor, so cards holding
   unequal amounts of it still end level as a set. */
  margin: auto 0 0;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}
@media (min-width: 48rem) {
  .photo-cards {
    padding-inline: var(--space-6);
  }
}



/* --- photo-cards: ajuste propio de la marca --- */
/* El reset de este sitio no lleva height:auto en img, así que el atributo
   height del <img> se impone y la tarjeta sale altísima. photo-cards es el
   único patrón instalado que no fija su propia altura, así que se la damos
   aquí y el aspect-ratio del patrón vuelve a mandar. */
.photo-cards-img {
  height: auto;
}


/* --- cta-image (librería v143) --- */
/* cta-image v1 - tokens only, selectors prefixed */
.cta-image {
  /* Contrast floor: the words sit on a photograph, so the scrim carries the
   contrast and clamp() holds it whatever the dial is set to. */
  --cta-image-scrim-floor: clamp(0.92, var(--cta-image-scrim-strength, 0.92), 1);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(28rem, 60vh, 40rem);
  padding: var(--space-12) var(--space-4);
  /* Solid ground under the image, so a failed or slow image leaves the copy
   on the scrim rather than on nothing. See the README. */
  background: var(--color-scrim);
}
.cta-image-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Floor across the middle band where the copy sits, falling away top and
   bottom so the photograph is still a photograph. See the README. */
.cta-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-scrim) calc(var(--cta-image-scrim-floor) * 34%), transparent) 0%,
    color-mix(in srgb, var(--color-scrim) calc(var(--cta-image-scrim-floor) * 100%), transparent) 22%,
    color-mix(in srgb, var(--color-scrim) calc(var(--cta-image-scrim-floor) * 100%), transparent) 78%,
    color-mix(in srgb, var(--color-scrim) calc(var(--cta-image-scrim-floor) * 34%), transparent) 100%
  );
}
.cta-image-inner {
  max-width: var(--container-max);
  color: var(--color-on-scrim);
  text-align: center;
}
.cta-image-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.cta-image-title {
  font-family: var(--font-heading);
  /* --color-heading is barred over a photograph however heavy the scrim. */
  color: var(--color-on-scrim);
  font-size: calc(clamp(2rem, 5vw, 3.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.1 * var(--heading-leading, 1));
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.cta-image-lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto var(--space-6);
}
.cta-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}
.cta-image-btn,
.cta-image-ghost {
  box-sizing: border-box;
  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);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.cta-image-btn {
  /* The edge identifies the control, not the fill: no token promises
   --color-primary against --color-scrim. See the README. */
  border: 2px solid var(--color-on-scrim);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.cta-image-ghost {
  border: 2px solid var(--color-on-scrim);
  background: color-mix(in srgb, var(--color-scrim) 80%, transparent);
  color: var(--color-on-scrim);
}
.cta-image-btn:hover,
.cta-image-ghost:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Two bands rather than one ring: what sits behind a control here is a
   photograph, which no token describes, so the indicator brings its own
   ground. See the README. */
.cta-image-btn:focus-visible,
.cta-image-ghost:focus-visible {
  outline: 3px solid var(--color-on-scrim);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--color-scrim);
}


/* --- hero-overlay en móvil: apilado. Ajuste propio de la marca --- */
/* A pantalla completa, en un teléfono el titular, la entradilla y los dos
   botones ocupan casi todo el alto, así que el velo tiene que cubrir casi todo
   el encuadre y la fotografía se apaga: da igual qué foto se ponga. Apilada, la
   foto se ve entera y sin velo encima, y el texto se lee sobre el fondo de la
   página. En tableta y escritorio no cambia nada. */
@media (max-width: 47.9375rem) {
  .hero-overlay {
    display: block;
    min-height: 0;
  }
  /* El velo existe para sostener el contraste del texto sobre la foto. Aquí ya
     no hay texto sobre la foto, así que sobra. */
  .hero-overlay::after {
    content: none;
  }
  .hero-overlay-img {
    position: static;
    z-index: auto;
    width: 100%;
    height: auto;
    /* Cuadrada, y nunca más de 45svh: así el titular entra en la primera
       pantalla sin hacer scroll, también en un teléfono corto de 667px, donde
       una proporción fija dejaba la segunda línea detrás de la barra fija. */
    aspect-ratio: 1 / 1;
    max-height: 45svh;
  }
  .hero-overlay-inner {
    padding-block: var(--space-8);
  }
}


/* --- hero-overlay: el texto a la derecha en pantallas anchas. Propio de la marca --- */
/* La fotografía de portada tiene el sujeto en la mitad izquierda, y el bloque de
   texto del patrón nace a la izquierda: el titular caía justo encima de la cara.
   Moviendo el texto a la derecha se ve la foto entera y la mirada del sujeto
   apunta hacia el titular. En móvil no aplica: allí la sección va apilada y el
   texto no se superpone a nada. */
@media (min-width: 48rem) {
  .hero-overlay-copy {
    margin-inline-start: auto;
  }
}