/* Base styles + one block per section, measured off the Figma frame "Version D
   Updated Copy" (301:110) at its 1710px design width. Breakpoint overrides live
   in responsive.css. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  line-height: var(--lh-28);
  color: var(--color-body);
  background: var(--bg-page);
  /* clip (not hidden) so sticky children still work */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: opacity 150ms ease;
}

/* The boot gate. Sections are fetched and hydrated at runtime, so the page is hidden
   until boot.js flips data-boot to ready or error — and the 2s animation is the
   deadline, revealing it without JS if neither ever happens. Nothing may write body
   opacity inline: it outlives the page in a restored history entry. */
html[data-boot='pending'] body {
  opacity: 0;
  animation: boot-reveal 150ms ease 2s forwards;
}

@keyframes boot-reveal {
  to {
    opacity: 1;
  }
}

/* Cross-document fades, run by the browser. Both documents opt in through this
   stylesheet, so it needs no JS and cannot leave a page mid-transition. */
@view-transition {
  navigation: auto;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* dd's UA margin-inline-start is 40px, which ate the slack in the document
   card's spec rows and wrapped both the label and its value. */
dl,
dd {
  margin: 0;
}

/* Spacing here always comes from a parent's gap, as it does in Figma's
   auto-layout, so the UA's 1em margins are pure drift — up to 24px a block. */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Neither ::details-content nor ::backdrop is covered by `*` — the FAQ rows'
     open/close transition and the register modal's backdrop fade are the only
     animated boxes on the site that are not elements. */
  *,
  *::before,
  *::after,
  ::details-content,
  ::backdrop {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Header (323:136) — sticky bar over the hero */

/* 94% fill over a 5px backdrop blur, closed by a 14% hairline rule: the tape
   reads faintly through it and the rule gives the edge, so no drop shadow. */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  width: 100%;
  background: var(--bg-nav);
  border-bottom: var(--bw-1) solid var(--border-nav);
  backdrop-filter: blur(5px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 14.5px var(--container-pad);
}

/* Figma I464:2508;464:2455 — a 20px left inset inside the container padding, so
   the logo starts on x=95 rather than on the container edge itself. */
.header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: 10px 0 10px 20px;
  text-decoration: none;
}

.header__logo {
  width: 155px;
  height: 42px;
}

/* Transparent to layout at the design width; responsive.css turns this box into
   the drawer below 1024. */
.header__panel {
  display: contents;
}

/* The drawer's Portal link. The bar's copy in .header__actions is the one that
   shows at this width; this is its counterpart, and never both. */
.header__panel-cta {
  display: none;
}

/* I464:2508;464:2461 — the list centres itself in the span between the logo and
   the Register pill. */
.header__nav {
  display: flex;
  flex: 1 0 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: var(--sp-40);
}

.header__link {
  padding: 6px 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-regular);
  line-height: normal;
  letter-spacing: var(--ls-wide-138);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--t-fast);
}

.header__link-label {
  color: var(--color-on-dark);
  transition: color var(--t-fast);
}

/* Nav-link variants (Figma 574:729 / 574:731 / 574:733). Medium is not bundled,
   so hover resolves to Regular; colour and tracking are exact either way. */
.header__link:hover {
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide-161);
}

.header__link:hover .header__link-label {
  color: var(--c-grey-99);
}

/* aria-current is "true" from the scroll-spy and "page" on the content pages.
   An inset shadow, not a border, so the rule costs the row no height. */
.header__link[aria-current] {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide-161);
  box-shadow: inset 0 -2px 0 0 var(--color-accent);
}

.header__link[aria-current] .header__link-label {
  color: var(--color-accent);
}

/* A hidden copy of the label in its widest state sizes the link, so hover and
   the current marker change the ink without reflowing the row. */
.header__link {
  display: grid;
}

.header__link-face,
.header__link-ghost {
  grid-area: 1 / 1;
}

.header__link-ghost {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide-161);
  visibility: hidden;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-22);
}

/* Mobile menu toggle — hidden at the design width. */
.header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: var(--bw-1) solid var(--c-cyan-86-25);
  cursor: pointer;
}

.header__toggle-bars,
.header__toggle-bars::before,
.header__toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-on-dark);
  transition: transform var(--t-base), opacity var(--t-base);
}

.header__toggle-bars::before,
.header__toggle-bars::after {
  content: '';
  position: absolute;
}

.header__toggle-bars {
  position: relative;
}

.header__toggle-bars::before {
  transform: translateY(-6px);
}

.header__toggle-bars::after {
  transform: translateY(6px);
}

.header__toggle[aria-expanded='true'] .header__toggle-bars {
  background: transparent;
}

.header__toggle[aria-expanded='true'] .header__toggle-bars::before {
  transform: rotate(45deg);
}

.header__toggle[aria-expanded='true'] .header__toggle-bars::after {
  transform: rotate(-45deg);
}

/* Hero (301:158) */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma stacks the dark nav band on top of the hero frame; here the two are
     one surface, so the hero absorbs the header and slides up under it. */
  min-height: calc(var(--hero-height) + var(--header-height));
  margin-top: calc(-1 * var(--header-height));
  background-color: var(--bg-darkest);
  overflow: hidden;
}

/* The board is --hero-height, the frame Figma measures from the nav's bottom: over
   the extra 92px the artwork scales ~9% and its top row disappears behind the bar.
   The still lives here so it shares one box with the loop and cannot drift from it. */
.hero__wall {
  position: absolute;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('/assets/images/hero-ticker.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* The loop, over the still, on the still's own fit — the matrix, row tilt and vignette
   are in the artwork. Transparent until js/tape-wall.js fades it in on the first frame
   that plays, so a blocked or unwanted video leaves the still showing. */
.hero__tape {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--t-slow);
}

.hero__tape[data-playing],
.page-banner__tape[data-playing] {
  opacity: 1;
}

/* Matches the Figma "Gradient" layer: darkens the edges so the headline holds. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* Sampled off the Figma artwork. Black rather than the page's #03181d: the
       darkest band measures below that colour's own luminance. The top holds
       flat to 9%, the height the sticky header covers. */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(0, 0, 0, 0.34) 9%,
      rgba(0, 0, 0, 0.2) 15%,
      rgba(0, 0, 0, 0.04) 20%,
      rgba(0, 0, 0, 0) 25%,
      rgba(0, 0, 0, 0) 82%,
      rgba(0, 0, 0, 0.14) 90%,
      rgba(0, 0, 0, 0.32) 95%,
      rgba(0, 0, 0, 0.36) 100%
    ),
    radial-gradient(145% 120% at 50% 52%, transparent 0%, rgba(3, 24, 29, 0.16) 68%, rgba(3, 24, 29, 0.48) 100%),
    linear-gradient(90deg, rgba(3, 24, 29, 0.55) 0%, rgba(3, 24, 29, 0.08) 52%, rgba(3, 24, 29, 0.22) 100%);
}

/* Figma 301:163 — puts the hero copy on x=175, the hero's own indent, which is
   deliberately not the 349px axis the section content columns use. */
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--hero-width);
  min-height: calc(var(--hero-inner-height) + var(--header-height));
  padding: calc(var(--hero-pad-top) + var(--header-height)) var(--hero-pad)
    var(--hero-pad-bottom);
}

.hero__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-40);
  width: 100%;
  padding-top: var(--hero-meta-pad-top);
  padding-bottom: var(--hero-meta-pad-bottom);
  border-top: var(--bw-1) solid var(--border-on-dark);
}

.hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hero-body-gap);
  padding-top: var(--hero-body-pad-top);
}

/* 301:170's box overhangs the hero column, which is what breaks the home title
   after "Consolidated". Only safe from the design width up — below it the title
   would overflow the viewport, so there it wraps in the column instead. */
@media (min-width: 1710px) {
  .hero .h1 {
    width: var(--measure-1428);
  }
}

.hero__rules {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.hero__rule {
  width: 761.41px;
  max-width: 100%;
  height: 6px;
  background: var(--color-accent);
}

/* 301:176 layers a black-25% box behind this copy; sampling the export shows no
   visible difference over the dark tape, so it is not reproduced. */
.hero__intro {
  /* Shrink-wrapped like the Figma layer rather than filling the column. */
  width: fit-content;
  max-width: var(--measure-778);
  margin: 0;
  padding: 0;
  /* 301:177 — 19/30.4, where the single paragraph it replaced was 24/37.2. */
  font-size: var(--fs-19);
  line-height: var(--lh-30-4);
  color: var(--color-on-dark);
  text-shadow: var(--shadow-text);
}

/* Raised so its cap line meets the copy's, as Figma draws it. In em and inheriting the
   line-height because the intro steps down at 1440 and 768, where a fixed line height
   grew the first line box and pushed the hero past its frame height. */
.hero__intro sup {
  font-size: 0.645em;
  line-height: inherit;
  vertical-align: 0.25em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-28);
}

/* Key dates (315:2804) */

.dates__grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--sp-28);
  flex: 1 1 auto;
  max-width: var(--content-width);
  /* Figma 315:2815 — this strip alone insets by 40px, not the 64px the prose
     sections use, so the cards run wider than the content column above them. */
  padding: var(--sp-48) var(--sp-40);
}

.date-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-12);
  min-width: 0;
  padding-top: 19px;
  border-top: var(--bw-3) solid var(--color-accent);
}

.date-card__kind {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: normal;
  color: var(--color-accent);
}

.date-card__when {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-30);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-33);
  letter-spacing: var(--ls-tight-sm);
  color: var(--color-heading);
}

.date-card__what {
  margin: 0;
  font-size: var(--fs-15);
  line-height: var(--lh-23);
  color: var(--color-body);
}

/* The Plan (301:766) */

.plan__heading {
  max-width: var(--measure-900);
}

/* The blocks are siblings of the h2 in Figma's one auto-layout, so they run on
   the same gap the section column does — not on a fixed 40. */
.plan__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
  width: 100%;
}

.prose__paragraphs {
  display: flex;
  flex-direction: column;
  gap: var(--prose-gap);
  width: 100%;
}

/* Transition steps (301:819) */

.section__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-17);
  width: 100%;
}

/* Figma 301:1283 — this lead is the one that is measured, not full-bleed, so it
   breaks over two lines above the step list. */
.transition__lead {
  max-width: var(--measure-560);
}

.steps {
  width: var(--measure-1000);
  max-width: 100%;
}

.step {
  gap: var(--sp-24);
  padding: 23px 21px 24px;
}

.step:first-child {
  padding-top: var(--sp-24);
}

.step__index {
  flex: 0 0 80px;
  width: 80px;
  font-family: var(--font-mono);
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  line-height: normal;
  color: var(--color-accent);
}

.step__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
  min-width: 0;
}

.step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-24);
  width: 100%;
  min-height: 23px;
}

.step__title {
  margin: 0;
  font-size: var(--fs-19);
  font-weight: var(--fw-bold);
  line-height: normal;
  letter-spacing: var(--ls-tight-xs);
  color: var(--color-heading);
}

.step__desc {
  margin: 0;
  font-size: var(--fs-15);
  line-height: var(--lh-24);
  color: var(--color-body);
}

/* Background / timeline (301:899) */

.timeline {
  width: var(--measure-882);
  max-width: 100%;
}

/* Figma 301:1350 — 45px rows, 1px of which is the separator on the row's own
   top edge. The first row has no separator, so it pads 13px to reach 46px. */
.timeline__row {
  gap: var(--sp-18);
  padding: var(--sp-12) var(--sp-17);
}

.timeline__row:first-child {
  padding-block: var(--sp-13);
}

.timeline__when {
  flex: 0 0 180px;
  width: 180px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: normal;
  letter-spacing: var(--ls-wide-104);
  text-transform: uppercase;
  color: var(--color-muted);
}

.timeline__what {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: var(--lh-20);
  color: var(--color-heading);
}

.timeline__row--current .timeline__when {
  color: var(--color-accent);
}

.timeline__row--current .timeline__what {
  font-weight: var(--fw-semibold);
}

/* CTA sections — Policies / Fees / Agreements */

/* Policies, Fees and Agreements all set their lead on the same 760px measure
   (Figma 301:1383 / 301:1915). */
.cta__lead {
  max-width: var(--measure-760);
}

/* Content pages — banner (580:2614) and document sections */

/* The hero's tape wall, cropped. It slides up under the sticky bar for the same
   reason the hero does: the bar is only 94% opaque, so anything left in normal
   flow shows the near-white page through it. 228px is the height below the bar. */
.page-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: calc(var(--banner-height) + var(--header-height));
  margin-top: calc(-1 * var(--header-height));
  background-color: var(--bg-darkest);
  overflow: hidden;
}

/* Everything below the bar, so the bar stays the flat dark band Figma draws.
   The band's own overflow is what crops the 228px window out of the board. */
.page-banner__wall {
  position: absolute;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

/* The hero's board at its own --hero-height, lifted so the band crops a window out of
   it; fitting a board to the 228px band would squash the rows flatter than the hero's.
   Both layers must carry the same lift or the still jumps as the loop fades in. */
.page-banner__wall::before {
  content: '';
  position: absolute;
  top: -380px;
  left: 0;
  width: 100%;
  height: var(--hero-height);
  background: url('/assets/images/hero-ticker.jpg') no-repeat center / cover;
}

.page-banner__tape {
  position: absolute;
  top: -380px;
  left: 0;
  display: block;
  width: 100%;
  height: var(--hero-height);
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--t-slow);
}

/* Keeps the white title legible over the brightest run of glyphs. */
.page-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(3, 24, 29, 0.18), rgba(3, 24, 29, 0.18)),
    linear-gradient(
      90deg,
      rgba(3, 24, 29, 0.55) 0%,
      rgba(3, 24, 29, 0.08) 52%,
      rgba(3, 24, 29, 0.22) 100%
    );
}

/* Figma pads the frame by 187px, which at the 1710px design width is simply a
   centred 1336px box — that keeps holding as the viewport grows. */
.page-banner__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--banner-max);
  margin-inline: auto;
  /* 24px below the bar, which the band now reaches up behind. */
  padding: calc(var(--sp-24) + var(--header-height)) var(--banner-pad-x) 0;
}

/* The SEQ label closes on the right end of the rule (580:2221, 940:2406), so the
   column is `auto`. The 86.629% x=1074.2 works out to reproduces where the label
   starts instead, and overshoots the container below the design width. */
.page-banner__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-40);
  align-items: start;
  width: 100%;
  padding: var(--sp-8) 0 var(--sp-12);
  /* 580:2618 — cyan/86 at 25%, the file's own value. */
  border-top: var(--bw-1) solid var(--border-on-dark);
}

.page-banner__meta > * {
  white-space: nowrap;
}

/* Shrink-wrapped, because the three accent bars under the title are drawn to
   the width of the word above them — 184px for "Fees", 463px for
   "Agreements." — rather than to a fixed measure. */
.page-banner__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
  width: fit-content;
  max-width: var(--measure-900);
  padding: var(--sp-14) 0 var(--sp-32);
}

/* The page title is the hero's h1 two steps down on the desktop tiers (84/86),
   and below 1024 it is simply the h1 — so the step is guarded, not restated.
   1024.02 rather than 1025 so a fractional viewport can't fall through. */
.h1--page {
  max-width: none;
}

@media (min-width: 1024.02px) {
  .h1--page {
    font-size: var(--fs-84);
    line-height: var(--lh-86);
    letter-spacing: var(--ls-tight-252);
  }
}

.page-banner__rules {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
}

/* The banner and the document card draw the same accent bar. */
.page-banner__rule,
.doc-card__rule {
  display: block;
  height: 4px;
  background: var(--color-accent);
}

/* Document sections — see --doc-pad-* in variables.css. */
.section__content--doc {
  max-width: var(--content-width);
  padding: var(--doc-pad-y) var(--doc-pad-right) var(--doc-pad-y) var(--content-pad-x);
}

/* Sections whose heading, lead and table are siblings run on the design's
   20px rhythm; the 40px gap is reserved for whole blocks (598:5117, 598:6085). */
.section__content--flow {
  gap: var(--sp-20);
}

.section__intro--doc {
  gap: var(--sp-20);
}

.doc-lead {
  max-width: var(--measure-760);
}

/* Figma 598:4886 — the fee-summary lead alone is measured tighter. */
.doc-lead--narrow {
  max-width: var(--measure-620);
}

/* Comparison tables (598:4888, 598:5122, 598:5349). The wrapper scrolls once
   three columns of copy no longer fit, so the table can keep the Figma widths;
   scroll-region.js gives it a tab stop for as long as it overflows. */

.table-scroll {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  max-width: var(--measure-882);
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table--wide {
  max-width: var(--measure-1240);
}

.data-table th,
.data-table td {
  padding: 12.5px var(--sp-17);
  text-align: left;
  vertical-align: top;
  border: var(--bw-1) solid var(--border-rule);
}

.data-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-regular);
  line-height: normal;
  letter-spacing: var(--ls-wide-154);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* The "now / CT Plan" column is the one the design tints. */
.data-table thead th:last-child {
  color: var(--color-accent);
}

/* The row header is the design's bold topic cell — same box as a data cell. */
.data-table tbody th,
.data-table td {
  padding-block: 14.5px;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-22);
}

.data-table tbody th {
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.data-table td {
  font-weight: var(--fw-regular);
  color: var(--color-muted);
}

.data-table td:last-child {
  color: var(--color-heading-strong);
}

/* The two rate tables set one value per cell, so their rows close up — and both
   are drawn a size down from the summary tables' 15: 598:5135 and 598:5360 are
   14, where 598:4908 stays on 15/22. */
.data-table--compact tbody th,
.data-table--compact td {
  font-size: var(--fs-14);
  line-height: normal;
}

/* Each cell's own copy of its column heading, written in by js/data-table.js and
   hidden while <thead> is on screen to do the job. responsive.css swaps the two
   over at 768px, where the table stacks. */
.data-table__label {
  display: none;
}

/* Column ratios, taken off the Figma cell widths. */
.data-table--summary col:nth-child(1) { width: 16.99%; }
.data-table--summary col:nth-child(2) { width: 38.97%; }
.data-table--summary col:nth-child(3) { width: 44.04%; }

/* Both /fees rate tables set their values in mono, unlike the summary tables that stay
   in the sans body face (598:5140, 598:5230). The rates table keeps its "Tape A" row
   header in sans; the tier table is mono to its first column and drops its bold too. */
.data-table--rates td,
.data-table--tiers tbody th,
.data-table--tiers td {
  font-family: var(--font-mono);
}

/* 598:5360 — the tier table's band column is Elephant, a step darker than the
   Blue Stone the rates table gives its "Tape A" header cell. */
.data-table--tiers tbody th {
  font-weight: var(--fw-regular);
  color: var(--color-heading-strong);
}

/* The CT Plan value is the emphasised one in both, in Blue Stone (598:5137,
   598:5362) rather than the Elephant the summary tables give this column. */
.data-table--rates td:last-child,
.data-table--tiers td:nth-child(2) {
  color: var(--color-heading);
}

/* Every tier carries the semibold, but in the rates table only the row whose fee
   actually changes does: Tape B and C stay regular (598:5144, 598:5151). */
.data-table--tiers td:nth-child(2),
.data-table--rates tbody tr:first-child td:last-child {
  font-weight: var(--fw-semibold);
}

/* …which moves the tier table's tint one column left, and leaves its "vs.
   legacy" comparison in the accent rather than the strong heading colour. */
.data-table--tiers thead th:nth-child(2) {
  color: var(--color-accent);
}

.data-table--tiers thead th:last-child {
  color: var(--color-muted);
}

.data-table--tiers td:last-child {
  color: var(--color-accent);
}

.data-table--rates col:nth-child(1) { width: 19.98%; }
.data-table--rates col:nth-child(2) { width: 44.95%; }
.data-table--rates col:nth-child(3) { width: 35.07%; }

.data-table--tiers col:nth-child(1) { width: 44.95%; }
.data-table--tiers col:nth-child(2) { width: 26.97%; }
.data-table--tiers col:nth-child(3) { width: 28.08%; }

/* Document card (602:6518) — a pitch on the left, a spec panel on the right,
   over the banners' tape-line texture at 7%. */

.doc-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  max-width: var(--measure-1240);
  padding: var(--bw-1);
  background: var(--c-white);
  border: var(--bw-1) solid var(--border-rule);
  overflow: hidden;
}

/* Texture, then the wash Figma lays over it; both sit behind the panels. */
.doc-card::before,
.doc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.doc-card::before {
  background: url('/assets/images/tape-lines.png') no-repeat 0 -12.46% / 100% 124.92%;
  opacity: 0.07;
}

.doc-card::after {
  /* 602:6520 */
  background: linear-gradient(
    102.13deg,
    rgba(238, 245, 247, 0.25) 2.16%,
    var(--c-grey-95) 30%,
    var(--c-cyan-86-55) 100%
  );
}

.doc-card__body,
.doc-card__aside {
  position: relative;
  z-index: var(--z-content);
}

/* The accent edge is its own bar inside the 1px frame, as Figma draws it. */
.doc-card__edge {
  position: absolute;
  top: var(--bw-1);
  bottom: var(--bw-1);
  left: var(--bw-1);
  z-index: var(--z-rail);
  width: 5px;
  background: var(--color-accent);
}

.doc-card__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-20);
  min-width: 0;
  padding: var(--sp-52) var(--sp-56);
}

.doc-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: normal;
  letter-spacing: var(--ls-wide-22);
  text-transform: uppercase;
  color: var(--color-accent);
}

.doc-card__cursor {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
}

.doc-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-60);
  font-weight: var(--fw-bold);
  line-height: var(--fs-60);
  letter-spacing: var(--ls-tight-18);
  color: var(--color-heading);
}

/* Figma draws these 436px wide inside a 300px box — the overhang is the design,
   so they are sized to the bar, not to the container. */
.doc-card__rules {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 436px;
  max-width: 100%;
}

/* The Agreements card draws the same bars at the width of its own heading box
   instead — 1216:17638 — and the Fees card on its lead's, 1216:17383. */
.doc-card__rules--wide {
  width: 557px;
}

.doc-card__rules--widest {
  width: 593px;
}

.doc-card__lead {
  max-width: 540px;
  margin: 0;
  font-size: var(--fs-17);
  line-height: var(--lh-28);
  color: var(--color-body);
}

/* The Agreements and Fees cards set their lead on 15/24 (1216:17643, 1216:17388);
   only Policies uses the 17/28 above. */
.doc-card__lead--sm {
  font-size: var(--fs-15);
  line-height: var(--lh-24);
}

.doc-card__lead strong {
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.doc-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-26);
  width: 100%;
  padding-top: var(--sp-12);
}

/* 1455:81287 — the Agreements card lists a document per row rather than carrying
   one pair of actions. Every row closes on a rule of its own, in Ziggurat rather
   than the Botticelli the rest of the card uses. */
.doc-card__docs {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--bw-1) solid var(--c-cyan-79);
}

.doc-card__doc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-10);
  padding-block: 15px;
  border-bottom: var(--bw-1) solid var(--c-cyan-79);
}

.doc-card__doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-18) var(--sp-20);
  width: 100%;
}

/* 1583:81370 — 15/24 body copy, the one thing in the row that is not mono or
   a heading face. */
.doc-card__doc-note {
  margin: 0;
  font-size: var(--fs-15);
  line-height: var(--lh-24);
  color: var(--color-body);
}

.doc-card__doc-id {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.doc-card__doc-label {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  line-height: var(--lh-20);
  color: var(--color-heading);
}

.doc-card__doc-meta {
  margin: 0;
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wide-132);
  text-transform: uppercase;
  color: var(--color-muted);
}

.doc-card__doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-18);
}

.btn--highlight {
  gap: var(--sp-20);
  padding: var(--sp-20) var(--sp-24) var(--sp-20) var(--sp-32);
  font-size: var(--fs-17);
  letter-spacing: var(--ls-tight-017);
  background: var(--color-accent);
  color: var(--c-white);
  filter: drop-shadow(8px 8px 0 var(--c-cyan-34-22));
}

.btn--highlight:hover {
  background: var(--c-cyan-26);
}

/* 1455:81294 draws the per-document button at 167×36, not the 61px-tall one a
   card's single action uses, and drops its offset shadow. */
.btn--compact {
  gap: var(--sp-14);
  padding: var(--sp-9) var(--sp-16) var(--sp-9) var(--sp-20);
  font-size: var(--fs-15);
  filter: none;
}

.btn--compact .btn__suffix {
  padding-left: var(--sp-14);
}

.btn__suffix {
  padding-left: 21px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide-12);
  border-left: var(--bw-1) solid var(--c-cyan-6-25);
}

.btn--rule {
  padding: 0 0 var(--sp-9);
  font-size: var(--fs-15);
  color: var(--color-heading);
  border-bottom: var(--bw-2) solid var(--color-on-dark-muted);
}

.btn--rule:hover {
  border-bottom-color: var(--color-accent);
}

body[data-page='policies'] {
  --doc-card-aside: 448px;
  --doc-card-aside-fluid: 36.13%;
}

body[data-page='agreements'] {
  --doc-card-aside: 500px;
  --doc-card-aside-fluid: 40.32%;
}

.doc-card__aside {
  display: flex;
  flex: 0 0 var(--doc-card-aside);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-24);
  width: var(--doc-card-aside);
  padding: var(--sp-52) var(--sp-40) var(--sp-52) var(--sp-41);
  background: var(--c-grey-95-75);
  border-left: var(--bw-1) solid var(--border-rule);
}

.doc-card__claim {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
  width: 100%;
}

.doc-card__claim-title {
  margin: 0;
  padding-bottom: var(--sp-24);
  font-family: var(--font-mono);
  font-size: var(--fs-32);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-35-2);
  letter-spacing: var(--ls-tight-sm);
  color: var(--color-heading);
}

/* Only the Fees claim steps down: 1216:17396 is 25px on -0.25 with the line
   height left to the font, against the 32/35.2/-0.9 above. Bounded below because
   responsive.css owns the claim from 576 down, for all three cards alike. */
@media (min-width: 576.02px) {
  body[data-page='fees'] .doc-card__claim-title {
    font-size: var(--fs-25);
    line-height: normal;
    letter-spacing: var(--ls-tight-025);
  }
}

/* 602:6550 has no note under the claim, so the row leaves with its 8px gap. */
.doc-card__claim-note:empty {
  display: none;
}

.doc-card__claim-note {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: normal;
  letter-spacing: var(--ls-wide-182);
  text-transform: uppercase;
  color: var(--color-accent);
}

.doc-card__specs {
  width: 100%;
}

.doc-card__spec {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-20);
  padding: var(--sp-12) 0 var(--sp-11);
  border-top: var(--bw-1) solid var(--border-rule);
}

.doc-card__spec:last-child {
  border-bottom: var(--bw-1) solid var(--border-rule);
}

.doc-card__spec-key {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  line-height: normal;
  letter-spacing: var(--ls-wide-132);
  text-transform: uppercase;
  color: var(--color-muted);
}

.doc-card__spec-value {
  /* Holds the right edge on its own line too: below 1440 the rows run three
     across, where a long label and its value stop fitting side by side. */
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: normal;
  letter-spacing: var(--ls-wide-11);
  text-align: right;
  color: var(--color-heading-strong);
}

/* The operative date is the one value the design tints. */
.doc-card__spec-value--accent {
  color: var(--color-accent);
}

/* 1676:13833 — 10.5/1.47 is its own step on the mono ramp, not a shared label size. */
.doc-card__notify {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: var(--sp-12) var(--sp-16);
  font-family: var(--font-mono);
  font-size: var(--fs-10-5);
  font-weight: var(--fw-semibold);
  line-height: normal;
  letter-spacing: var(--ls-wide-147);
  text-align: center;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--bg-deep);
  text-decoration: none;
  transition: background var(--t-fast);
}

.doc-card__notify:hover {
  background: var(--color-accent);
}

/* Numbered notes (590:4597) — the Policies page's "Policy changes" */

/* Heading and list are one block on the design's 32px rhythm. */
.doc-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-32);
  width: 100%;
}

.notes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  width: 100%;
  max-width: var(--measure-882);
}

.note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-24);
}

.note__index {
  flex: 0 0 var(--doc-note-width);
  width: var(--doc-note-width);
  font-family: var(--font-mono);
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  line-height: normal;
  color: var(--color-accent);
}

.note__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-10);
  min-width: 0;
}

/* 590:4605 states 24/32 rather than leaving it to be measured off the advance,
   which is where the 31.68 here came from. The 20px step at 768 keeps its own
   line height, read off that frame. */
.note__title {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-32);
  color: var(--color-heading-strong);
}

.note__paragraphs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  width: 100%;
}

.note__text {
  margin: 0;
  font-size: var(--fs-17);
  line-height: var(--lh-28);
  color: var(--color-body);
}

/* 590:4633 alone is set in Nevada, not the Fiord the other three notes use —
   the last objective is drawn a shade back. Flagged on the note so the copy
   stays a plain string. */
.note--muted .note__text {
  color: var(--color-muted);
}

/* Tagged rule list (598:6090) — ELIMINATED / GONE / RETIRED */

.tag-list {
  max-width: var(--measure-882);
}

.tag-row {
  gap: var(--sp-18);
  padding: var(--sp-12) var(--sp-17) var(--sp-13);
}

.tag-row:first-child {
  padding-top: var(--sp-13);
}

.tag-row__tag {
  flex: 0 0 var(--doc-tag-width);
  width: var(--doc-tag-width);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-23);
  letter-spacing: var(--ls-wide-104);
  text-transform: uppercase;
  color: var(--color-accent);
}

.tag-row__text {
  margin: 0;
  font-size: var(--fs-15);
  line-height: var(--lh-23);
  color: var(--color-heading-strong);
}

/* FAQ (998:12425), measured off the 1720px frame. The frames draw no open row and no
   toggled label, so the answer takes the design system's body style (17/28 Fiord) and
   the "×" / "Collapse all" states are invented rather than transcribed. */

.section__content--faq {
  gap: var(--faq-stack-gap);
  padding-block: var(--faq-pad-y) var(--faq-pad-y-end);
  padding-inline: var(--content-pad-x) var(--faq-pad-right);
}

/* 998:12426 — the h2 and its lead, 17px apart on an 820px measure. */
.faq-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-17);
  width: 100%;
  max-width: var(--measure-820);
}

/* The search / filter bar (1011:12679) */

/* Sticky, as the Figma component is, but offset by the bar the way .rail__stack
   is: Figma has no fixed header in its render, so its top-0 would park this
   behind ours. The fill is the page's own, so the groups scroll under it. */
.faq-bar {
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-rail);
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  width: 100%;
  max-width: var(--faq-bar-max);
  padding-block: var(--sp-17);
  background: var(--bg-page);
  border-top: var(--bw-1) solid var(--border-rule);
  border-bottom: var(--bw-1) solid var(--border-rule);
}

.faq-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-16);
  /* 0 in the frame, which only says the row never wraps at 1720; 12 is what
     1040:13801 measures between the chips and the meta group once it does. */
  row-gap: var(--sp-12);
  width: 100%;
}

/* 1011:12658 — chips left, count and Expand all right. */
.faq-bar__row--filters {
  justify-content: space-between;
}


/* 1011:12646 — the <label> is the field box itself, as .field is: the whole ruled
   area is a hit target for its input. The 254px minimum is the frame's own, so
   the row breaks before the field gets narrower rather than squeezing it. */
.faq-search {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: var(--sp-12);
  min-width: var(--measure-254);
  padding: var(--sp-12) var(--sp-17);
  background: var(--c-white);
  border: var(--bw-1) solid var(--border-rule);
}

/* 1011:12648 — Figma sets the glyph in Menlo, which is in our mono stack behind
   IBM Plex Mono; ⌕ is not in the Plex face, so the stack is what draws it. */
.faq-search__icon {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: normal;
  color: var(--color-accent);
}

.faq-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: normal;
  letter-spacing: var(--ls-wide-04);
  color: var(--color-heading);
  background: transparent;
  border: 0;
  appearance: none;
}

.faq-search__input::placeholder {
  color: var(--c-grey-46);
  opacity: 1;
}

.faq-search__input:focus {
  outline: none;
}

.faq-search:focus-within {
  border-color: var(--color-accent);
}

/* Chrome's own clear affordance sits on top of the frame's plain field. */
.faq-search__input::-webkit-search-cancel-button {
  appearance: none;
}

/*
 * Ours, in its place. No frame draws a clear affordance — 1011:12645 is the icon and
 * the field — so like the search marks this is behaviour: it borrows the bar's own mono
 * ramp and matches the ⌕ opposite it. Square, so the target does not depend on the
 * glyph's own narrow advance.
 */
.faq-search__clear {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--sp-20);
  height: var(--sp-20);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  line-height: 1;
  color: var(--color-muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--t-fast);
}

/* js/faq-list.js hides this while the field is empty, and the UA's `display: none`
   for [hidden] loses to the `display: inline-flex` above. Hidden by visibility
   rather than restated as `display: none`, so the button keeps its box and the
   field's text does not shift 32px when the affordance appears. Visibility still
   takes it out of the tab order and the a11y tree. */
.faq-search__clear[hidden] {
  visibility: hidden;
}

.faq-search__clear:hover,
.faq-search__clear:focus-visible {
  color: var(--color-accent);
}

/* 1011:12656 / 1011:12677 — Search and Expand all are the same mono pill. */
.faq-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: var(--sp-9) var(--sp-16);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: normal;
  letter-spacing: var(--ls-wide-154);
  text-transform: uppercase;
  color: var(--color-heading);
  background: var(--c-white);
  border: var(--bw-1) solid var(--border-rule);
  border-radius: var(--radius-0);
  cursor: pointer;
  transition: background-color var(--t-base), border-color var(--t-base),
    color var(--t-base);
}

.faq-btn:hover {
  background: var(--bg-page-alt);
  border-color: var(--border-rule-strong);
}

.faq-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
}

/* 1011:12662 — a size tighter than the pills above: 15/8 on the 1.32 tracking. */
.faq-chip {
  padding: var(--sp-8) var(--sp-15);
  letter-spacing: var(--ls-wide-132);
  color: var(--color-body);
}

/* 1011:12660 — the chosen topic inverts to Blue Stone, fill and rule both. */
.faq-chip[aria-pressed='true'] {
  background: var(--color-heading);
  border-color: var(--color-heading);
  color: var(--c-white);
}

/* The auto margin resolves per flex line, so this holds the frame's right edge
   whether it shares the chips' line or — with twelve chips rather than the
   frame's five — wraps to one of its own, where space-between would not. */
.faq-bar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-17-99);
  margin-left: auto;
}

/* 1011:12676 — the running total, in the same caps as the pill beside it. */
.faq-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  line-height: normal;
  letter-spacing: var(--ls-wide-154);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* The groups (988:9619) */

/* The five groups are siblings of everything else in the frame, so the box that
   holds them runs on the column's own gap rather than one of its own. */
.faq-groups {
  display: flex;
  flex-direction: column;
  gap: var(--faq-stack-gap);
  width: 100%;
}

.faq-category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--faq-block-max);
}

/* The UA's own [hidden] rule is a `display: none` the `display: flex` above
   would win against, and the filter hides whole groups. */
.faq-category[hidden] {
  display: none;
}

.faq-category__head {
  display: flex;
  width: 100%;
  margin: 0;
}

/* 982:9518 — the group rule: name, a 1px divider taking the slack, the count and
   the sign, 14px apart on a 20/12 band. The whole row is the control; the frame
   draws the "+" on it but a 15px glyph is not a target. */
.faq-category__toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--sp-14);
  padding: var(--sp-20) 0 var(--sp-12);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.faq-category__name {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: normal;
  letter-spacing: var(--ls-wide-192);
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}

.faq-category__divider {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--bw-1);
  background: var(--border-rule);
}

.faq-category__count {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  line-height: normal;
  letter-spacing: var(--ls-wide-132);
  text-align: right;
  color: var(--color-on-dark-muted);
  white-space: nowrap;
}

/* 988:9617 — a 24px glyph in a 15x16 box, which is what holds the rule on 48. */
.faq-category__sign,
.faq-item__sign {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 15px;
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-16);
  color: var(--color-on-dark-muted);
  transition: transform var(--t-base);
}

.faq-category__sign::after,
.faq-item__sign::after {
  content: '+';
}

/* The "+" turned 45°, not a second glyph swapped in: a swap is discrete and
   flickers halfway through the row's 220ms, where the turn runs on the same
   --t-base. The box is what rotates, so the glyph has to be centred in it. */
.faq-category__toggle[aria-expanded='true'] .faq-category__sign,
.faq-item[open] .faq-item__sign {
  transform: rotate(45deg);
}

/* One question (982:9572) */

/* The group is a flex-start column, so the rows need saying: they would
   otherwise shrink-wrap to the widest question rather than filling the group. */
.faq-items {
  width: 100%;
}

/* <details>, as the component is drawn: a "Details" root over a "Slot → Summary".
   The row's top rule is the border Figma draws as the root's 1px inset. */
/* 1699:21319 rules off the bottom of the whole row, question and answer together,
   rather than above the question. */
.faq-item {
  border-bottom: var(--bw-1) solid var(--border-rule);
}

/* Centred, because the sign is a 32px box against a 27px line and the frame
   centres the two. */
.faq-item__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  padding: 19px var(--sp-10) 19px var(--sp-12);
  cursor: pointer;
  list-style: none;
}

/* 1699:21320 — the tint marks the open row, and it is on the summary alone: the
   answer below it sits on the page. A closed row carries no fill, so a group reads
   as a list of rules until something is opened. */
.faq-item[open] > .faq-item__summary {
  background: var(--c-grey-96);
}

/* Safari draws the disclosure triangle from a pseudo-element of its own. */
.faq-item__summary::-webkit-details-marker {
  display: none;
}

/* 1699:21322 — Blue Stone, where the placeholder master had it in Elephant. */
.faq-item__question {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  line-height: var(--lh-27);
  color: var(--color-heading);
  overflow-wrap: break-word;
}

/* The 24px sign is the tallest thing in the row, and 32px is the box that makes
   the row the frame's 73px — the 27px question does not reach it. */
.faq-item__sign {
  line-height: var(--lh-32);
}

/* ::details-content is the only handle on a native <details>' own box, and
   interpolate-size is what makes a transition to `auto` possible at all. Both are
   recent, so the pair sits behind @supports and the row falls back to the instant
   toggle — the only state the frames draw anyway. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .faq-items {
    interpolate-size: allow-keywords;
  }

  .faq-item::details-content {
    height: 0;
    overflow: hidden;
    /* content-visibility flips discretely, so it needs the allowance or the
       answer is painted in full for the whole of the closing transition. */
    transition: height var(--t-base), content-visibility var(--t-base);
    transition-behavior: allow-discrete;
  }

  .faq-item[open]::details-content {
    height: auto;
  }
}

/* 1699:21275 — the open answer hangs off a 3px accent rule rather than lining up
   under the question: 15px inside it, 44px clear on the right. */
.faq-item__answer {
  padding: var(--sp-2) var(--sp-44) var(--sp-24) var(--sp-15);
  border-left: var(--bw-3) solid var(--color-accent);
}

/* 1699:21277 — the answer slot is 16/27, a step under the 17/28 question. */
.faq-item__block {
  max-width: var(--measure-760);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-27);
  color: var(--color-body);
}

/* 1699:21327 — blocks sit on 9px, not the 20px prose rhythm. */
.faq-item__block + .faq-item__block {
  margin-top: var(--sp-9);
}

/* 1699:21328 — the bulleted answer, on the same 9px, held 12px off the rule. */
.faq-item__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
  margin: 0;
  padding: var(--sp-12) 0 0;
  list-style: none;
}

/*
 * The marker is placed rather than laid out. A flex row here made every inline
 * child its own flex item, so each link and each run of text between them became
 * a separate box on its own baseline with the 20px gap struck between them — the
 * copy came apart mid-sentence and the links stopped behaving like text at all.
 * Absolute positioning keeps the whole bullet in normal inline flow, so links
 * wrap, hover and underline as they do everywhere else.
 *
 * 1699:21328 — the marker box is 6px wide with 20px to the copy, so the text is
 * indented by 26.
 */
.faq-item__bullets li {
  position: relative;
  padding-left: 26px;
}

/* 1699:21330 — a 6px accent square, dropped 8px so it meets the first line. */
.faq-item__bullets li::before {
  content: '';
  position: absolute;
  top: var(--sp-8);
  left: 0;
  width: var(--sp-6);
  height: var(--sp-6);
  background: var(--color-accent);
}

/*
 * The search hit. No frame draws a result state — like the open/close transition this
 * is behaviour — so it borrows the accent wash already in the palette and leaves the
 * copy's own colour and weight alone: the mark points at the word, not the sentence.
 */
.faq-mark {
  background: var(--c-cyan-34-22);
  color: inherit;
}

/* Ask the Administrator (998:12437) */

/* The card sits 24px clear of the last group, on top of the column's own gap. */
.faq-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-48);
  width: 100%;
  max-width: var(--faq-ask-max);
  margin-top: var(--sp-24);
  /* 40 of padding behind the 4px edge is what puts the copy on the frame's 44. */
  padding: var(--sp-35) var(--sp-37) var(--sp-35) var(--sp-40);
  background: var(--c-white);
  border: var(--bw-1) solid var(--color-accent);
  border-left-width: var(--bw-4);
}

.faq-ask__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-10);
  min-width: 0;
}

/* 998:12441 — the widest tracking on the page, 2.2. */
.faq-ask__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: normal;
  letter-spacing: var(--ls-wide-22);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* 998:12443 — 28px Bold on -0.5, a step below the doc-card's own heading. The
   half-pixel band is 998:12442's own, and it is what makes the card 193 tall. */
.faq-ask__title {
  margin: 0;
  padding-block: 0.5px;
  font-family: var(--font-sans);
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  line-height: normal;
  letter-spacing: var(--ls-tight-05);
  color: var(--color-heading);
}

/* 998:12445 — 16/26, not the column's 17/28. */
.faq-ask__copy {
  max-width: var(--measure-520);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-26);
  color: var(--color-body);
}

/* 998:12446 — a fixed 199px stack, so both links are the width of the wider. */
.faq-ask__actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--sp-12);
  width: 199px;
}

/* 998:12447 / 998:12449 — mono caps at 11.5/1.61, as the bar's pill is, but on
   the section CTAs' 13px band. */
.faq-ask__link {
  padding: var(--sp-13) var(--sp-26);
  font-family: var(--font-mono);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide-161);
  text-transform: uppercase;
  /* Both labels are nowrap in the frame, and "Read the Policies" is exactly as
     wide as the 199px box leaves it — a hair of rounding wraps it otherwise. */
  white-space: nowrap;
}

/* Black Pearl on the accent fill, not white: 998:12448 is the one accent button
   on the site that sets its label in the darkest ink. */
.faq-ask__link--fill {
  background: var(--color-accent);
  color: var(--c-cyan-6);
}

.faq-ask__link--fill:hover {
  background: var(--c-grey-93);
}

/* 27/13 against the fill's 26/13: the 1px rule is inside the frame's 199px box,
   as it is for .btn--secondary. */
.faq-ask__link--rule {
  padding-inline: var(--sp-27);
  color: var(--color-heading);
  border: var(--bw-1) solid var(--color-heading);
}

.faq-ask__link--rule:hover {
  background: var(--bg-page-alt);
}

/* The pager (998:12451) */

/* .cta-row is already the frame's 33px band on a 1px rule, 28px apart; the 12px
   above it is this block's own margin in the frame. */
.faq-pager {
  max-width: var(--faq-block-max);
  margin-top: var(--sp-12);
}

/* Subscribe (455:2289) */

.subscribe__content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-56);
  flex: 1 1 auto;
  max-width: var(--content-width);
  /* 455:2259 — Subscribe keeps 76/64 where the prose columns step down to
     64/58 at 1440 and 52/40 at 1024, so it carries its own pair. */
  padding: var(--subscribe-pad-y) 0 var(--subscribe-pad-y) var(--subscribe-pad-x);
}

.subscribe__intro {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-19-3);
  min-width: 0;
}

.subscribe__lead {
  max-width: var(--measure-440);
  margin: 0;
  font-size: var(--fs-17);
  line-height: var(--lh-28);
  color: var(--color-on-dark);
}

.subscribe__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-28);
  /* 698.182px at the design width, shrinking before it can overflow. */
  flex: 0 1 698.182px;
  min-width: 0;
  max-width: 100%;
}

/* Not redundant: `display: flex` above would otherwise beat the attribute's
   own display: none once the success panel takes the form's place. */
.subscribe__form[hidden] {
  display: none;
}

.subscribe__fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-28);
  width: 100%;
}

.subscribe__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-24-01);
  width: 100%;
}

/* Collapses entirely while empty, so the idle section keeps the Figma height
   and no flex gap is reserved for a message that isn't there. */
.subscribe__status:empty {
  display: none;
}

.subscribe__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12-5);
  line-height: var(--lh-24);
  letter-spacing: var(--ls-wide-1);
  color: var(--color-on-dark);
}

.subscribe__status--error {
  color: var(--c-cyan-86);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--bw-2);
  text-underline-offset: 4px;
}

.subscribe__status--success {
  color: var(--color-accent);
}

/* Accepted submission (315:1990). Takes the form's place in the row, so it
   carries the form's flex basis. The [hidden] rule is not redundant: `display:
   flex` here would otherwise beat the attribute's own display: none. */
.subscribe__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-11-8);
  flex: 0 1 698.182px;
  min-width: 0;
  max-width: 100%;
  /* 315:1991 is 271px tall, which content height alone leaves 49px short. A
     minimum, not a height: the lead wraps past it on narrow viewports. */
  min-height: 271px;
  padding: var(--sp-48);
  background: var(--c-white);
}

.subscribe__success[hidden] {
  display: none;
}

/* 315:1992 — a text glyph centred in a 44px square, not an icon file. */
.subscribe__success-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-family: var(--font-tick);
  font-size: var(--fs-22);
  line-height: normal;
  color: var(--c-white);
  background: var(--c-cyan-26);
}

.subscribe__success-title {
  /* 315:1994 wraps the heading in a container padded 0.5px top and bottom. */
  margin: 0;
  padding-block: 0.5px;
  font-size: var(--fs-26);
  font-weight: var(--fw-bold);
  line-height: normal;
  color: var(--color-heading);
}

.subscribe__success-lead {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-25-6);
  color: var(--color-body);
}

/* Not in the frame: hiding Google's floating badge below obliges us to carry
   this disclosure in its place. Set to match the mono contact lines 455:2265
   used to draw here. */
.subscribe__legal {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12-5);
  line-height: normal;
  letter-spacing: var(--ls-wide-1);
  color: var(--color-on-dark);
}

.grecaptcha-badge {
  visibility: hidden;
}

/* Footer (451:1970) */

.footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-inline: var(--footer-gutter);
  background: var(--bg-darkest);
}

.footer > .container {
  max-width: var(--footer-container-max);
}

/* Wider than .rail by exactly what the footer shell gains on the left, so the
   divider continues the section rail line on the same x. */
.footer__rail {
  position: relative;
  z-index: var(--z-rail);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex: 0 0 var(--footer-rail-width);
  width: var(--footer-rail-width);
  padding-block: var(--sp-64);
  padding-right: var(--footer-rail-gap);
}

.footer__rail-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-9);
  width: 100%;
}

/* right:0, not -1px: .rail draws its 2px rule *inside* its box, so the divider
   has to sit inside the footer rail's too or it lands a pixel to the right. */
.footer__divider {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 305px;
  object-fit: cover;
}

.footer__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--sp-48);
  min-width: 0;
  /* 805:7168 keeps the footer copy on 64 at 1440 where the sections step to 58;
     only at 1024 does it follow them down (822:15493 measures 40.96). */
  padding: var(--sp-64) var(--footer-pad-x) var(--sp-40);
}

.footer__ticker {
  display: flex;
  align-items: center;
  gap: var(--sp-11);
  width: 100%;
}

.footer__ticker-text {
  font-family: var(--font-mono);
  font-size: var(--fs-24);
  line-height: normal;
  letter-spacing: var(--ls-wide-096);
  color: var(--color-on-dark);
}

.footer__ticker-accent {
  color: var(--color-accent);
}

.footer__cursor {
  flex: 0 0 auto;
  width: 10px;
  height: 20px;
  background: var(--color-accent);
  animation: cursor-blink 1.2s steps(1, end) infinite;
}

@keyframes cursor-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

.footer__cols {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-40);
  width: 100%;
}

/* Lets the three link columns sit directly in .footer__cols, so all four
   columns share one flex distribution and one 40px gap rhythm. */
.footer__col-group {
  display: contents;
}

.footer__col-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  width: 100%;
}

.footer__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-12);
  min-width: 0;
}

.footer__col--brand {
  gap: var(--sp-12-44);
}

.footer__brand-name {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: normal;
  color: var(--c-white);
}

.footer__brand-desc {
  max-width: var(--measure-240);
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-22-4);
  color: var(--color-muted);
}

/* Block, like the full-width Link frames in Figma. As an inline box the anchor
   left its <li> sized by the inherited 17px/28px strut, not the 14px link. */
.footer__link {
  display: block;
  font-size: var(--fs-14);
  line-height: normal;
  color: var(--color-on-dark-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}

.footer__link:hover {
  color: var(--color-accent);
}

/* 447:275 / 447:277 — the Contact column underlines only the address, not the
   "Licensing" / "Support" word in front of it. */
.footer__link-em {
  text-decoration: underline;
  text-underline-position: from-font;
}

.footer__admin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-20);
  width: 100%;
}

.footer__admin-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-13);
  width: 583px;
  max-width: 100%;
}

.footer__admin-name {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  line-height: normal;
  color: var(--c-white);
}

.footer__admin-desc {
  margin: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-21);
  color: var(--color-muted);
}

.footer__admin-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-12);
  width: 231px;
  max-width: 100%;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-20);
  width: 100%;
  padding: var(--sp-22) 0 21px;
  border-top: var(--bw-1) solid var(--border-on-dark-faint);
}

.footer__legal-text {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  line-height: normal;
  letter-spacing: var(--ls-wide-132);
  color: var(--color-muted);
}

/* Scroll-to-top (315:1948 + 315:1949) */

.scroll-top {
  position: fixed;
  right: var(--container-pad);
  bottom: var(--container-pad);
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base), transform var(--t-base),
    visibility var(--t-base), background-color var(--t-base);
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--c-cyan-26);
}

.scroll-top__icon {
  width: 19.3px;
  height: 21px;
}

/* Register modal (1772:24808 — form, 1772:24837 — accepted) */

/* showModal() puts the dialog in the top layer, so nothing here fights the header's
   z-index. Width is capped rather than fixed so the card shrinks on narrow screens
   before the viewport does — the design has no frame below 1720 for this modal. */
.register {
  width: var(--measure-620);
  max-width: calc(100vw - var(--sp-32));
  max-height: calc(100vh - var(--sp-32));
  padding: 0;
  overflow: auto;
  color: var(--color-body);
  background: var(--c-white);
  border: 0;
  border-radius: var(--radius-0);
  box-shadow: var(--shadow-modal);
  opacity: 1;
  transform: translateY(0) scale(1);
  /* `display` and `overlay` are discrete properties: without allow-discrete the
     card would be gone before it could animate out, since closing drops it from the
     top layer and back to display: none in the same frame. */
  transition: opacity var(--t-base), transform var(--t-base),
    overlay var(--t-base) allow-discrete, display var(--t-base) allow-discrete;
}

/* The closed state is both where it animates out to and — via @starting-style —
   where it animates in from. A browser with neither feature just shows and hides
   the card, which is what it did before this. */
.register:not([open]) {
  opacity: 0;
  transform: translateY(var(--lift-modal)) scale(0.98);
}

@starting-style {
  .register[open] {
    opacity: 0;
    transform: translateY(var(--lift-modal)) scale(0.98);
  }
}

/*
 * The frame draws no backdrop — the drop shadow is its whole separation from the
 * page. A dim is still needed to make the page behind read as out of reach, so it is
 * the lightest one the palette has. The literal repeats the token because ::backdrop
 * does not inherit custom properties in every engine that supports the element.
 */
/* Opacity, not the fill's own alpha: ::backdrop does not inherit custom properties
   in every engine that supports the element, so the literal has to stand in — and a
   literal cannot be interpolated back to a token. */
.register::backdrop {
  background: var(--backdrop-modal, rgba(3, 24, 29, 0.18));
  opacity: 1;
  transition: opacity var(--t-base), overlay var(--t-base) allow-discrete,
    display var(--t-base) allow-discrete;
}

.register:not([open])::backdrop {
  opacity: 0;
}

@starting-style {
  .register[open]::backdrop {
    opacity: 0;
  }
}

/*
 * showModal() makes the page behind inert but leaves it scrollable. Reserving the
 * gutter matters as much as the lock: hiding overflow takes a classic scrollbar away
 * with it, and the page behind would jump sideways under the card as it fades in and
 * back again as it fades out. Overlay scrollbars (macOS) never occupied space, so
 * this is invisible there and load-bearing everywhere else.
 */
.has-modal,
.has-modal body {
  overflow: hidden;
}

.has-modal {
  scrollbar-gutter: stable;
}

/* 1772:24809 — three caps of a third each, so they divide whatever width the card
   settles at rather than the 206.66px the frame measures. */
.register__caps {
  display: flex;
  width: 100%;
}

.register__cap {
  flex: 1 1 0;
  height: 5px;
}

.register__cap--bondi {
  background: var(--c-cyan-34);
}

.register__cap--breaker {
  background: var(--c-cyan-51);
}

.register__cap--lagoon {
  background: var(--c-cyan-26);
}

.register__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-24);
  padding: var(--sp-30) var(--sp-36) 0;
}

.register__titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-9-85);
  min-width: 0;
}

.register__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-10-5);
  font-weight: var(--fw-semibold);
  line-height: normal;
  letter-spacing: var(--ls-wide-21);
  text-transform: uppercase;
  color: var(--color-link);
}

.register__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-27);
  font-weight: var(--fw-bold);
  line-height: var(--lh-29-7);
  letter-spacing: var(--ls-tight-054);
  color: var(--color-heading);
}

/* 1772:24818 — a 34px square with a text glyph in it, not an icon file. */
.register__close {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: normal;
  color: var(--color-heading);
  cursor: pointer;
  background: var(--c-white);
  border: var(--bw-1) solid var(--border-rule);
  border-radius: var(--radius-0);
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.register__close:hover {
  background: var(--bg-page-alt);
  border-color: var(--border-rule-strong);
}

/* Both bodies. The [hidden] rule is not redundant: `display: flex` would otherwise
   beat the attribute's own display: none when the confirmation takes over. */
.register__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-22);
  padding: var(--sp-23-44) var(--sp-36) var(--sp-36-01);
}

.register__body[hidden] {
  display: none;
}

.register__lead {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-22-4);
  color: var(--color-body);
}

.register__fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-22);
  width: 100%;
}

/* 1772:24823 — the paired fields are 265px inside a 548px row, which is an even
   split of what the 22px gap leaves; the odd 2px each side is the field's own pad. */
.register__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-22);
  width: 100%;
}

.register__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-20);
  width: 100%;
  padding-top: var(--sp-4);
}

/* 1772:24831 / 1772:24833 — a 44px pair, so 13/30 rather than the site's 16/34. */
.register__cancel,
.register__submit {
  padding: var(--sp-13) var(--sp-30);
  font-size: var(--fs-15);
}

.register__cancel {
  background: transparent;
  color: var(--color-heading);
}

.register__cancel:hover {
  background: var(--bg-page-alt);
}

.register__submit {
  background: var(--color-accent);
  color: var(--c-white);
}

/* The same inversion every accent button on the site uses on hover (612:1411). */
.register__submit:hover:not(:disabled) {
  background: var(--c-grey-93);
  color: var(--c-cyan-6);
}

/* 1772:24835 — a rule across the body with the small print under it. */
.register__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  width: 100%;
  padding-top: var(--sp-15);
  border-top: var(--bw-1) solid var(--c-grey-92);
}

.register__legal,
.register__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  line-height: var(--lh-16);
  letter-spacing: var(--ls-wide-1);
  color: var(--color-muted);
}

/* Collapses entirely while empty, so an idle form keeps the frame's height and no
   flex gap is reserved for a message that isn't there. */
.register__status:empty {
  display: none;
}

.register__status--error {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--bw-2);
  text-underline-offset: 4px;
}

/* Accepted submission (1772:24849) */

/* Nothing moves it into view — it takes the form's place under a head that does not
   change — so the panel arrives on its own rather than simply appearing. */
.register__body--accepted:not([hidden]) {
  /* A literal duration, as the site's other two animations use: --t-base carries its
     easing as well as its time, so in an animation shorthand it lands a second timing
     function and the whole declaration is dropped. */
  animation: register-accept 220ms ease both;
}

@keyframes register-accept {
  from {
    opacity: 0;
    transform: translateY(var(--sp-8));
  }
}

.register__body--accepted {
  gap: var(--sp-15-99);
  padding-top: var(--sp-24);
  padding-bottom: var(--sp-36);
}

/* 1772:24850 — the accent edge and pale fill of the FAQ ask card, at this card's
   own measurements. */
.register__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-9-4);
  width: 100%;
  padding: var(--sp-26) var(--sp-28) var(--sp-26) var(--sp-32);
  background: var(--c-grey-96);
  border-left: var(--bw-4) solid var(--color-accent);
}

/* Bolder than .label--group's semibold, which 1772:24852 specifies and which reads
   too light at 11px against the panel's fill. */
.register__received {
  font-weight: var(--fw-bold);
}

.register__thanks {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-21);
  font-weight: var(--fw-bold);
  line-height: normal;
  letter-spacing: var(--ls-tight-0315);
  color: var(--color-heading);
}

.register__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14-5);
  line-height: var(--lh-23-93);
  color: var(--color-body);
}

.register__actions--accepted {
  gap: var(--sp-14);
  padding-top: 0;
}

/* 1772:24858 / 1772:24860 — a mono pair, unlike the form's sans buttons. */
.register__done,
.register__more {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide-154);
  text-transform: uppercase;
  white-space: nowrap;
}

.register__done {
  padding: var(--sp-12) var(--sp-20);
  background: var(--color-heading);
  color: var(--c-white);
}

.register__done:hover {
  background: var(--c-cyan-15);
}

/* 12/21 rather than 12/22: the 1px rule is inside the frame's box, as it is for
   .btn--secondary. */
.register__more {
  padding: var(--sp-12) var(--sp-21);
  color: var(--color-heading);
  border: var(--bw-1) solid var(--border-rule-strong);
}

.register__more:hover {
  background: var(--bg-page-alt);
  border-color: var(--color-heading);
}