/* Elected Golf tokens: "Card & Links Green" (p3-brand §3). Unlayered on
   purpose, above every @layer, with the [hidden] guard (CW-R06): a token or a
   guard inside a layer loses to whichever layer is declared later.

   Light is scorecard stock with green-black ink; dark follows the system.
   Claret is the SEAL ONLY; error is reserved for validation and failure. The
   pairs and the reserved distances are held by docs/stylesheet-contract.json. */

[hidden] { display: none !important; }

@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* A size-adjusted Georgia stands in while the face loads, so the swap does not
   move the page (EB Garamond's x-height is small; Georgia's is large). */
@font-face {
  font-family: "Garamond Fallback";
  src: local("Georgia");
  size-adjust: 88%;
  ascent-override: 102%;
  descent-override: 30%;
}

:root {
  --stock: #F3EEE2;
  --card: #FBF8F1;
  --ink: #1C221E;
  --muted: #545B55;
  --green: #24412F;
  --on-green: #F3EEE2;
  --green-wash: #E3E9DF;
  --gilt-ink: #7A5E2C;
  --claret: #6E2430;
  --error: #9E2A1B;
  --rule-ui: #8F8774;
  --rule: #D9D1BF;
  --grain-opacity: .05;
  /* Names the catalogue blocks read. */
  --accent: var(--green);
  --line: var(--rule);
  --ink-muted: var(--muted);
  --ink-soft: var(--muted);
  --paper-deep: var(--card);
  --panel: var(--card);
  --serif: "EB Garamond", "Garamond Fallback", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
  --wrap: min(100% - 2.5rem, 72rem);
  --measure: 38rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stock: #111714;
    --card: #18201C;
    --ink: #ECE5D6;
    --muted: #B3AC9C;
    --green: #A9C7B0;
    --on-green: #111714;
    --green-wash: #1E2A23;
    --gilt-ink: #D2B57C;
    --claret: #C4848E;
    --error: #FF968A;
    --rule-ui: #6C776F;
    --rule: #2B3530;
    --grain-opacity: .035;
    color-scheme: dark;
  }
}

@layer base, catalogue, product;
@layer catalogue {
/* Correctness only. Palette, type and spacing come from the site.
   Every interactive element here takes its height from the box rather than from
   inline padding: padding on a short nav link makes it paint past its <nav>,
   measured on the live site. */
.skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 20;
  padding: .65rem .9rem;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  width: min(100% - 2rem, 88rem);
  min-block-size: 5.5rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }

/* 44px minimum, from the box. WCAG 2.5.8 exempts an inline anchor inside a <p>
   or <li> and nothing else. */
.site-header nav a, .site-header .brand, footer a, footer .brand {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

footer {
  width: min(100% - 2rem, 88rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
}
.footer-links { display: flex; flex-wrap: wrap; align-items: start; gap: 1.4rem; }
.copyright { grid-column: 1 / -1; }

@media (max-width: 38rem) {
  .site-header { min-block-size: 4.5rem; }
  footer { grid-template-columns: 1fr; }
}

/* 44px is the documented minimum. Inline anchors inside a <p> or <li> are
   exempt (WCAG 2.5.8) because padding them wrecks the surrounding line height. */
.text-button, nav a, footer a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

/* The zero minimum is structural. Without it, a long token in an answer gives
   the grid item an intrinsic minimum wider than its column and the page grows
   beyond a phone viewport. */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-card, 1.25rem);
}
.faq-item { min-inline-size: 0; }
.faq-item p { overflow-wrap: anywhere; }

@media (max-width: 44rem) {
  .faq-list { grid-template-columns: minmax(0, 1fr); }
}

.table-wrap { max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
table { inline-size: 100%; border-collapse: collapse; }
caption { text-align: start; color: var(--ink-muted); padding-block-end: .5rem; }
/* Cells WRAP. `white-space: nowrap` used to be set on every cell here, which is
   right for a figure and wrong for a sentence: it clipped a prose column behind
   the wrapper's own scrollbar at 390px AND at 1280px, so widening the window did
   not reveal it. A prose column generally does not belong in a table at all --
   but when one is there, the table must not hide it. */
th, td { padding: .7rem .9rem; text-align: start; border-block-end: 1px solid var(--line); }
/* Figures must not dance as they change, and columns must not resize per row, so
   `nowrap` belongs here: scoped to the cells that carry a measurement. */
td.figure, th.figure, .table-wrap .figure { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb-list li { display: inline-flex; min-inline-size: 0; align-items: center; }
.breadcrumb-list li + li::before { content: "/"; margin-inline-end: .45rem; }
.breadcrumb-list a { display: inline-flex; min-block-size: 44px; align-items: center; }
.breadcrumb-list span { overflow-wrap: anywhere; }

.sitemap-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-section, 2rem);
}
.sitemap-group { min-inline-size: 0; }
.sitemap-group ul { margin: 0; padding: 0; list-style: none; }
.sitemap-group li { min-inline-size: 0; }
.sitemap-group a {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  overflow-wrap: anywhere;
}
.sitemap-group p { overflow-wrap: anywhere; }

/* Always open, always in flow. It borrows the page's own tokens rather than
   bringing colour of its own, because a panel that looks like a warning banner
   gets dismissed as one. */
.sf-limits {
  margin-block-start: 2.5rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--rule, #ddd);
  border-radius: 0.25rem;
  background: var(--paper-deep, #f2efe9);
}
.sf-limits__heading { margin-block-start: 0; font-size: 1.15rem; }
.sf-limits__list { margin: 0; padding-inline-start: 1.05rem; color: var(--ink-soft, #4a4a4a); }
.sf-limits__list > li { margin-block-end: 0.55rem; }

/* Correctness only; the site owns colour, radius and typography. The label is
   the complete target and its 44px minimum comes from its box, not from a small
   radio padded beyond the layout. */
.choice-set {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.choice-set-options {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .5rem;
}
.choice-option {
  min-inline-size: 0;
  min-block-size: 44px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  cursor: pointer;
}
.choice-option input[type="radio"] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  accent-color: var(--accent);
}
.choice-option > :not(input) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.choice-option:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* select-field v2. Everything v1 says about sizing still holds: WebKit will not
   give a <select> the height you ask for while it still owns the rendering, so
   `appearance: none` hands sizing to CSS -- and removing the appearance removes
   the native chevron, so one has to be drawn.

   v1 drew it as a `data:` SVG background. The fleet's non-ad CSP is
   `img-src 'self' blob:`, which refuses every `data:` image, so on every
   non-ad site the v1 select rendered as a plain box with no menu affordance
   and logged a CSP violation per control (read back on electedgolf.com
   /apply/, 2026-10-16). Three sites paid for the same workaround separately.
   v2 draws the chevron with two borders on the wrapper's ::after: no request,
   nothing a CSP can refuse, and `currentColor`, so forced-colors mode and a dark
   page keep it visible. The glyph uses physical borders on purpose -- a down
   chevron does not mirror in RTL -- while its position is logical. */
.select-field { position: relative; min-inline-size: 0; }
.select-field select {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
  min-block-size: 3.4rem;
  padding-inline: .85rem 2.4rem;
  background-image: none;
  text-overflow: ellipsis;
  font: inherit;
}
.select-field::after {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 50%;
  inline-size: .5rem;
  block-size: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
/* The open list is drawn by the OS in the system palette; naming both keeps it
   readable on a dark page. */
.select-field option { background: var(--panel); color: var(--ink); }

/* The field must work with no spinner affordance: Mobile Safari does not draw
   one. Removing it elsewhere keeps typing, paste and the mobile inputmode as
   the only interaction contract on every engine. */
.numeric-field { min-inline-size: 0; }
.numeric-field-control {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}
.numeric-field input[type="number"] {
  -moz-appearance: textfield;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 44px;
  box-sizing: border-box;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.numeric-field input[type="number"]::-webkit-inner-spin-button,
.numeric-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.numeric-field-unit {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: .65rem;
  white-space: nowrap;
}
.numeric-field-unit:empty { display: none; }

/* Reserve the message line so showing it never moves the button. */
.form-error { min-block-size: 1.5rem; }

}
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--stock);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.1875rem;
    line-height: 1.55;
    font-variant-numeric: oldstyle-nums proportional-nums;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    overflow-x: clip;
    position: relative;
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
  }
  /* Paper grain: one same-origin SVG tile painted once and repeated. No canvas,
     no blur, no fixed attachment (iOS repaints fixed backgrounds on scroll). */
  body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("/assets/grain.svg");
    background-size: 160px 160px;
  }
  @media (forced-colors: active) { body::before { display: none; } }

  h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
  h1 { font-size: clamp(2.4rem, 6vw + 1rem, 4.25rem); letter-spacing: -.01em; }
  h2 { font-size: clamp(1.75rem, 3vw + 1rem, 2.6rem); }
  h3 { font-size: 1.35rem; }
  p, ul, ol, dl, figure, blockquote { margin: 0; }
  a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: .18em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
  code { font-family: var(--sans); font-size: .9em; background: var(--green-wash); padding: 0 .3em; border-radius: 2px; overflow-wrap: anywhere; }
  strong, b { font-weight: 600; }
  hr.rule { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s6); }
  svg { flex: none; }

  .wrap { width: var(--wrap); margin-inline: auto; }
  .label {
    font-family: var(--sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .roman { font-family: var(--serif); font-size: 1rem; letter-spacing: .1em; color: var(--gilt-ink); margin-inline-end: .5rem; }
  .sc { font-variant-caps: all-small-caps; letter-spacing: .06em; }
  .num, .figure { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; }
  .lede { font-size: 1.25rem; max-width: var(--measure); }
  .fine { font-family: var(--sans); font-size: .875rem; line-height: 1.5; color: var(--muted); max-width: var(--measure); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .skip-link { background: var(--ink); color: var(--stock); font-family: var(--sans); font-size: .9375rem; min-block-size: 44px; display: inline-flex; align-items: center; text-decoration: none; }

  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: hc-rise .9s ease-out both; }
    @keyframes hc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}

@layer product {
  /* ---- header: seal, wordmark, four destinations ---- */
  .site-header {
    width: var(--wrap);
    padding-top: env(safe-area-inset-top);
    min-block-size: 4.5rem;
    flex-wrap: wrap;
    gap: 0 var(--s5);
    border-bottom: 1px solid var(--rule);
  }
  .site-header .brand { gap: .65rem; color: var(--ink); text-decoration: none; }
  .site-header .brand .seal { color: var(--claret); }
  .site-header .brand span, .footer-brand {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
  }
  .site-header nav { gap: var(--s4); flex-wrap: wrap; }
  .site-header nav a {
    font-family: var(--sans);
    font-size: .9375rem;
    color: var(--ink);
    text-decoration: none;
    min-inline-size: 44px;
    justify-content: center;
  }
  .site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--green); text-decoration: underline; text-underline-offset: .3em; }
  .site-header nav a.nav-apply { border: 1px solid var(--green); border-radius: 2px; padding-inline: 1rem; color: var(--green); font-weight: 600; letter-spacing: .04em; }
  .site-header nav a.nav-apply:hover { background: var(--green-wash); text-decoration: none; }

  /* ---- footer ---- */
  body > footer {
    width: var(--wrap);
    margin-block-start: var(--s8);
    padding-block: var(--s7) calc(var(--s7) + env(safe-area-inset-bottom));
    border-top: 3px double var(--rule-ui);
    font-family: var(--sans);
    font-size: .875rem;
    color: var(--muted);
    align-items: start;
  }
  body > footer > div:first-child { display: grid; gap: var(--s3); max-width: 34rem; }
  body > footer p { line-height: 1.55; }
  .footer-links { gap: var(--s5) var(--s6); }
  .footer-group { display: grid; align-content: start; min-inline-size: 9rem; }
  .footer-group b { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-block-end: .25rem; }
  .footer-group a, body > footer a { color: var(--ink); text-decoration: none; }
  .footer-group a:hover { text-decoration: underline; }
  .copyright { font-size: .8125rem; }

  /* ---- buttons ---- */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-block-size: 48px;
    padding: .55rem 1.4rem;
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid var(--green);
    background: transparent;
    color: var(--green);
    cursor: pointer;
  }
  .button:hover { background: var(--green-wash); }
  .button-primary { background: var(--green); color: var(--on-green); }
  .button-primary:hover { background: var(--green); filter: brightness(1.12); }
  .button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; }
  .button-small { min-block-size: 44px; padding-inline: 1rem; font-size: .875rem; }
  .text-button { background: none; border: 0; padding: 0 .25rem; font: inherit; font-family: var(--sans); font-size: .9375rem; color: var(--green); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
  .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

  /* ---- breadcrumbs and page heads ---- */
  .breadcrumbs { font-family: var(--sans); font-size: .875rem; color: var(--muted); margin-block: var(--s3) 0; }
  .breadcrumb-list a { color: var(--muted); }
  .page-head { display: grid; gap: var(--s4); padding-block: var(--s5) var(--s6); max-width: 48rem; }
  .page-head .brand-line { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--green); }
  main { display: block; }
  main > .wrap, main > section, main > article { scroll-margin-top: 1rem; }
}

@layer product {
  /* ---- the intake card: numbered motif, inset double border ---- */
  .intake { background: var(--card); border: 1px solid var(--rule); padding: var(--s5); position: relative; align-self: start; }
  .intake::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--rule); pointer-events: none; }
  .intake header { display: flex; align-items: center; gap: var(--s4); border-bottom: 3px double var(--rule-ui); padding-bottom: var(--s4); }
  .intake .roundel { color: var(--claret); }
  .intake h2 { font-size: 1.6rem; }
  .intake .note { font-family: var(--sans); font-size: .8125rem; color: var(--muted); margin-top: var(--s4); line-height: 1.5; }
  .intake-state { font-family: var(--sans); font-size: .9375rem; margin-top: var(--s4); min-block-size: 1.5rem; }

  /* ---- leader rows: term, dotted leader, figure. They wrap; never flex: none ---- */
  .leaders { margin: var(--s4) 0 0; padding: 0; }
  .leaders > div { display: flex; align-items: baseline; gap: .5rem; padding-block: .55rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
  .leaders > div:last-child { border-bottom: 0; }
  .leaders dt { font-family: var(--sans); font-size: .875rem; color: var(--muted); min-inline-size: 0; }
  .leaders .dots { flex: 1 1 2rem; min-width: 2rem; border-bottom: 1px dotted var(--rule-ui); transform: translateY(-.3em); }
  .leaders dd { margin: 0; font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; font-weight: 600; font-size: 1rem; text-align: end; }
  /* The live seat figure: a reserved box so its arrival never moves the page. */
  .seat-figure { display: inline-block; min-inline-size: 6.5ch; text-align: end; font-variant-numeric: lining-nums tabular-nums; }

  /* ---- numbered list, two columns: verified / on honour ---- */
  .twocol { display: grid; gap: var(--s6); }
  .ledger-list { list-style: none; margin: 0; padding: 0; border-top: 3px double var(--rule-ui); }
  .ledger-list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--s3); padding-block: var(--s4); border-bottom: 1px solid var(--rule); }
  .ledger-list .n { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; font-size: .8125rem; color: var(--gilt-ink); padding-top: .3rem; font-weight: 600; }
  .ledger-list h3 { font-size: 1.2rem; }
  .ledger-list p { color: var(--muted); font-size: 1.0625rem; margin-top: .2rem; }

  /* ---- the terms ledger (price page and the front's price line) ---- */
  .terms-ledger { border: 1px solid var(--rule-ui); background: var(--card); padding: var(--s5); max-width: 42rem; }
  .terms-ledger .disclosure-line { margin-top: var(--s4); }
  .price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); min-block-size: 3.5rem; padding-block: var(--s4); border-block: 1px solid var(--rule); font-family: var(--sans); font-size: 1rem; }
  .price-line a { display: inline-flex; align-items: center; min-block-size: 44px; }
  .price-line strong { font-variant-numeric: lining-nums tabular-nums; }

  /* ---- the public register (the Ledger) ---- */
  .register { border: 1px solid var(--rule-ui); background: var(--card); }
  .register-head, .register-row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) minmax(0, 1fr) 4.6rem; gap: var(--s3); padding: .7rem var(--s4); align-items: baseline; }
  .register-head { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 3px double var(--rule-ui); }
  .register-row { border-bottom: 1px solid var(--rule); font-family: var(--sans); color: var(--ink); }
  .register-row .no { font-variant-numeric: lining-nums tabular-nums; color: var(--gilt-ink); font-weight: 600; }
  .register-row .blank { border-bottom: 1px dotted var(--rule-ui); block-size: 1em; }
  .register .empty { padding: var(--s5) var(--s4); font-style: italic; }
  .register-letter { white-space: pre-line; padding: 0 var(--s4) var(--s4) calc(3.6rem + var(--s4) + var(--s3)); font-size: 1.0625rem; color: var(--muted); border-bottom: 1px solid var(--rule); }

  .register-letter > summary { min-block-size: 44px; display: flex; align-items: center; font-family: var(--sans); font-size: .875rem; color: var(--green); cursor: pointer; }
  .counts { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); border: 1px solid var(--rule-ui); background: var(--card); margin-block: var(--s5); }
  .counts > div { padding: var(--s4); border-bottom: 1px solid var(--rule); display: grid; gap: .25rem; }
  .counts dt { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .counts .seat-figure { min-inline-size: 0; text-align: start; }
  .counts dd { margin: 0; font-family: var(--sans); font-size: 1.6rem; font-variant-numeric: lining-nums tabular-nums; min-block-size: 2.4rem; }

  @media (max-width: 30rem) {
    .register-head, .register-row { grid-template-columns: 3rem minmax(0, 1fr) 4rem; }
    .register .c3 { display: none; }
    .register-letter { padding-inline-start: var(--s4); }
  }
  @media (min-width: 48rem) { .twocol { grid-template-columns: 1fr 1fr; } }
}

@layer product {
  /* ---- the front ---- */
  .hero { padding-block: var(--s7); }
  .hero .wrap { display: grid; gap: var(--s7); }
  .hero h1 { margin-top: var(--s4); font-size: clamp(2.6rem, 7vw + 1rem, 5rem); }
  .hero h1 em { font-style: italic; color: var(--green); }
  .hero .lede { margin-top: var(--s5); }
  .hero .fine { margin-top: var(--s4); }

  .section { padding-block: var(--s8); border-top: 1px solid var(--rule); }
  .section-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); max-width: 46rem; }
  .section-head p:not(.label) { color: var(--muted); max-width: var(--measure); }

  .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); counter-reset: step; }
  .steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s4); padding-top: var(--s4); border-top: 3px double var(--rule-ui); }
  .steps .step-n { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--gilt-ink); font-variant-numeric: lining-nums; }
  .steps h3 { margin-bottom: .3rem; }
  .steps p { color: var(--muted); font-size: 1.0625rem; }

  /* ---- the scorecard: a table on wide screens, one card per week on phones ---- */
  .cardbox { border: 1px solid var(--rule-ui); background: var(--card); }
  table.scorecard { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: .9375rem; }
  .scorecard caption { padding: var(--s3) var(--s4); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule-ui); }
  .scorecard th, .scorecard td { border: 1px solid var(--rule); padding: .65rem .8rem; text-align: start; vertical-align: top; line-height: 1.45; }
  .scorecard thead th { background: var(--green); color: var(--on-green); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; border-color: var(--green); }
  .scorecard tbody th { width: 4.5rem; text-align: center; }
  .wk { font-family: var(--serif); font-size: 1.6rem; color: var(--gilt-ink); font-variant-numeric: lining-nums; line-height: 1; }
  .scorecard tr.qual { border-top: 2px solid var(--rule-ui); }
  .boxes { display: inline-flex; gap: 4px; vertical-align: -1px; margin-inline-end: .45rem; }
  .boxes i { width: 13px; height: 13px; border: 1px solid var(--rule-ui); display: inline-block; }
  .sign { display: grid; gap: var(--s5); padding: var(--s5) var(--s4) var(--s4); border-top: 3px double var(--rule-ui); font-family: var(--sans); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .sign span { display: block; border-bottom: 1px solid var(--ink); height: 2.2rem; margin-bottom: .4rem; position: relative; }
  .sign .pencil { position: absolute; left: .4rem; bottom: .25rem; color: var(--green); }

  /* ---- plates: line art with an honest caption ---- */
  .plate { display: grid; gap: var(--s3); margin-block: var(--s6); }
  .plate .frame { border: 1px solid var(--rule); background: var(--card); padding: var(--s4); color: var(--ink); }
  .plate svg { display: block; width: 100%; height: auto; }
  .plate figcaption { font-family: var(--sans); font-size: .8125rem; color: var(--muted); line-height: 1.5; max-width: 40rem; }
  .plate figcaption b { font-weight: 600; color: var(--ink); letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; }

  /* ---- the library index ---- */
  .library-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-ui); }
  .library-list li { border-bottom: 1px solid var(--rule); }
  .library-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); padding-block: var(--s4); color: var(--ink); text-decoration: none; min-block-size: 44px; }
  .library-list a:hover h3 { color: var(--green); text-decoration: underline; text-underline-offset: .18em; }
  .library-list h3 { font-size: 1.3rem; }
  .library-list p { font-size: 1rem; color: var(--muted); margin-top: .15rem; }
  .library-list .kind { font-family: var(--sans); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-ink); align-self: start; padding-top: .35rem; }

  /* ---- prose: the plan, the Library, the legal set ---- */
  .prose { max-width: var(--measure); }
  .prose > * + * { margin-top: var(--s4); }
  .prose h2 { margin-top: var(--s7); font-size: clamp(1.6rem, 2.4vw + 1rem, 2.2rem); }
  .prose h3 { margin-top: var(--s6); }
  .prose h4 { margin-top: var(--s5); font-size: 1.15rem; font-weight: 600; }
  .prose ul, .prose ol { padding-inline-start: 1.3rem; }
  .prose li + li { margin-top: .35rem; }
  .prose blockquote { border-inline-start: 3px double var(--rule-ui); padding-inline-start: var(--s4); font-style: italic; }
  .prose .table-wrap { max-width: 100%; margin-block: var(--s5); border: 1px solid var(--rule); background: var(--card); }
  .prose table { font-family: var(--sans); font-size: .9375rem; }
  .prose th { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .prose td a, .prose th a { display: inline-flex; align-items: center; min-block-size: 44px; }
  .doc-meta { font-family: var(--sans); font-size: .875rem; color: var(--muted); }
  .sources { font-family: var(--sans); font-size: .875rem; color: var(--muted); border-top: 3px double var(--rule-ui); padding-top: var(--s4); margin-top: var(--s7); }
  .sources ol { padding-inline-start: 1.3rem; }
  .sources a { overflow-wrap: anywhere; display: inline-flex; align-items: center; min-block-size: 24px; }
  .sources li { padding-block: .2rem; }
  .plate-key { display: flex; flex-wrap: wrap; gap: .25rem var(--s4); font-family: var(--sans); font-size: .8125rem; color: var(--ink); }
  details > summary.disclose, .book-chapter > summary, .register-letter > summary, .settings > summary { list-style: none; }
  .book-chapter > summary::-webkit-details-marker, .register-letter > summary::-webkit-details-marker, .settings > summary::-webkit-details-marker { display: none; }
  .book-chapter > summary::before, .register-letter > summary::before, .settings > summary::before { content: "+"; display: inline-grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; margin-inline-end: .6rem; border: 1px solid var(--rule-ui); border-radius: 2px; font-family: var(--sans); font-size: 1rem; line-height: 1; color: var(--green); flex: none; }
  .book-chapter[open] > summary::before, .register-letter[open] > summary::before, .settings[open] > summary::before { content: "\2212"; }
  .prose .ledger-list { padding: 0; }
  .prose .ledger-list li + li { margin-top: 0; }
  .rule-list p { color: var(--ink); font-size: 1.0625rem; margin: 0; }
  .rule-notes { font-style: italic; }
  nav.toc { display: block; margin-block: var(--s5); font-family: var(--sans); }
  .toc ul { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 var(--s5); border-top: 1px solid var(--rule); }
  .toc li { border-bottom: 1px solid var(--rule); }
  .toc a { display: flex; align-items: center; min-block-size: 44px; font-size: .9375rem; text-decoration: none; }
  .toc a:hover { text-decoration: underline; }
  .plan-card { margin-block: var(--s6); }
  .book-chapter { border-top: 1px solid var(--rule); }
  .book-chapter > summary { min-block-size: 48px; display: flex; align-items: center; cursor: pointer; font-family: var(--serif); font-size: 1.3rem; padding-block: var(--s3); }
  .book-chapter > summary:hover { color: var(--green); }
  .book-chapter .chapter { border-top: 0; margin-top: 0; padding-top: 0; }
  .chapter { border-top: 1px solid var(--rule); padding-top: var(--s5); margin-top: var(--s7); }

  /* An honest gap: what is still being written says so. Never fake text. */
  .placeholder { border: 1px dashed var(--rule-ui); padding: var(--s5); font-family: var(--sans); font-size: .9375rem; color: var(--muted); background: var(--card); }
  .notice { border-inline-start: 3px solid var(--green); padding: var(--s3) var(--s4); background: var(--card); font-family: var(--sans); font-size: .9375rem; }
  .admission-line { font-family: var(--sans); font-size: .9375rem; border: 1px solid var(--rule-ui); padding: var(--s3) var(--s4); background: var(--card); }
  .sf-limits { font-family: var(--sans); font-size: .9375rem; }
  .sf-limits h2 { font-family: var(--serif); }

  /* ---- FAQ ---- */
  .faq-sec { padding-block: var(--s7); }
  .faq h2 { margin-bottom: var(--s5); }
  .faq-item { border-top: 1px solid var(--rule); padding-top: var(--s4); }
  .faq-item h3 { font-size: 1.2rem; margin-bottom: .35rem; }
  .faq-item p { color: var(--muted); font-size: 1.0625rem; }

  /* ---- site map and 404 ---- */
  .html-sitemap { padding-block: var(--s5); }
  .html-sitemap header { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
  .sitemap-group h2 { font-size: 1.3rem; margin-bottom: var(--s3); }
  .sitemap-group p { font-family: var(--sans); font-size: .875rem; color: var(--muted); margin-bottom: var(--s3); }
  .legal-page { max-width: var(--measure); padding-block: var(--s5); }
  .legal-page > * + * { margin-top: var(--s4); }
  .legal-page h2 { margin-top: var(--s6); font-size: 1.6rem; }
  .legal-page .eyebrow { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  .legal-lead { font-size: 1.25rem; }
  .legal-updated { font-family: var(--sans); font-size: .875rem; color: var(--muted); }
  .support-block { display: grid; gap: var(--s3); }
  .license-text { max-height: 18rem; overflow: auto; font-family: var(--sans); font-size: .8125rem; white-space: pre-wrap; background: var(--card); border: 1px solid var(--rule); padding: var(--s4); }

  @media (min-width: 48rem) {
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .steps li { grid-template-columns: minmax(0, 1fr); align-content: start; }
  }
  @media (min-width: 60rem) {
    .hero .wrap { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
    .hero { padding-block: var(--s9) var(--s8); }
    .lib-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s7); align-items: start; }
  }
  @media (max-width: 39.99rem) {
    .scorecard, .scorecard tbody, .scorecard caption { display: block; }
    .scorecard thead, .scorecard thead tr { display: block; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); position: absolute; }
    .scorecard thead th { display: block; inline-size: 1px; overflow: hidden; white-space: nowrap; padding: 0; border: 0; }
    .scorecard tbody tr { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); border-bottom: 1px solid var(--rule-ui); }
    .scorecard tbody th { grid-row: span 3; border: 0; border-right: 1px solid var(--rule); width: auto; padding-top: .9rem; }
    .scorecard tbody td { border: 0; border-bottom: 1px dotted var(--rule); padding: .55rem .8rem; }
    .scorecard tbody td:last-child { border-bottom: 0; }
    .scorecard tbody td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
    .scorecard tr.qual { border-top: 0; }
  }
  @media (min-width: 40rem) { .sign { grid-template-columns: 1fr 1fr; } }
}

@layer product {
  /* ---- fields: labels above, 44px boxes, the error beside the field ---- */
  .form { display: grid; gap: var(--s5); max-width: 40rem; }
  .form fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  .form-section { display: grid; gap: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--rule); }
  .form-section > h2 { font-size: 1.45rem; }
  .field { display: grid; gap: .35rem; min-inline-size: 0; }
  .field label, .field .field-label, .choice-set legend {
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ink);
  }
  .field-hint, .choice-hint { font-family: var(--sans); font-size: .8125rem; color: var(--muted); line-height: 1.45; }
  .text-input, .select-field select, .numeric-field input, textarea.text-input {
    inline-size: 100%;
    min-block-size: 48px;
    padding: .55rem .75rem;
    font: inherit;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--rule-ui);
    border-radius: 2px;
  }
  textarea.text-input { min-block-size: 9rem; line-height: 1.5; resize: vertical; }
  .text-input:focus-visible, .select-field select:focus-visible, .numeric-field input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
  [aria-invalid="true"] { border-color: var(--error) !important; }
  .field-error { font-family: var(--sans); font-size: .875rem; color: var(--error); min-block-size: 1.25rem; }
  .form-error { font-family: var(--sans); font-size: .9375rem; color: var(--error); }
  .status-line { font-family: var(--sans); font-size: .9375rem; min-block-size: 1.5rem; }

  /* The chevron is select-field-v2's (borders on ::after, nothing a CSP can
     refuse); this layer only keeps the text clear of it. */
  .select-field select { padding-inline-end: 2.5rem; }

  .numeric-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .numeric-field input[type="number"] { min-block-size: 44px; -moz-appearance: textfield; font-variant-numeric: lining-nums tabular-nums; }
  .numeric-field input[type="number"]::-webkit-inner-spin-button, .numeric-field input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .numeric-field .unit { margin-inline-start: .5rem; font-family: var(--sans); font-size: .875rem; color: var(--muted); }
  .numeric-row { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); }

  .choice-set legend { margin-bottom: .35rem; }
  .choice-option { border: 1px solid var(--rule-ui); border-radius: 2px; background: var(--card); font-family: var(--sans); font-size: .9375rem; }
  .choice-option:has(input:checked) { border-color: var(--green); background: var(--green-wash); }

  /* A checkbox is a whole-label target, like a choice option. */
  .check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .65rem; align-items: start; min-block-size: 44px; padding: .65rem .75rem; border: 1px solid var(--rule-ui); border-radius: 2px; background: var(--card); font-family: var(--sans); font-size: .9375rem; line-height: 1.45; cursor: pointer; }
  .check input { inline-size: 1.25rem; block-size: 1.25rem; margin: .05rem 0 0; accent-color: var(--green); }
  .check:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }

  /* ---- the price and billing disclosure: a fixed block above its own submit ---- */
  .disclosure { border: 1px solid var(--rule-ui); background: var(--card); padding: var(--s5); display: grid; gap: var(--s4); position: relative; min-block-size: 6rem; }
  .disclosure::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--rule); pointer-events: none; }
  .disclosure > * { position: relative; }
  .disclosure .price { font-family: var(--sans); font-size: 1.15rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
  .disclosure-line { font-family: var(--sans); font-size: .9375rem; color: var(--ink); }
  .form-action { display: grid; gap: var(--s3); justify-items: start; }
  .form-action .button { inline-size: 100%; }

  /* ---- notify-me (the next-intake list) ---- */
  .notify-form { display: grid; gap: var(--s3); max-width: 32rem; border: 1px solid var(--rule); padding: var(--s5); background: var(--card); }
  .notify-form h2 { font-size: 1.35rem; }

  .apply-grid { display: grid; gap: var(--s7); align-items: start; }
  .apply-side { display: grid; gap: var(--s5); }

  @media (min-width: 40rem) { .form-action .button { inline-size: auto; } }
  @media (min-width: 60rem) { .apply-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
}

@layer product {
  /* ---- the keyed Candidacy workspace: a column of week cards ---- */
  .cand { display: grid; gap: var(--s6); padding-block: var(--s5); }
  .cand-head { display: grid; gap: var(--s3); }
  .cand-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-family: var(--sans); font-size: .9375rem; color: var(--muted); }
  .cand-meta b { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
  .cand-panel { border: 1px solid var(--rule-ui); background: var(--card); padding: var(--s5); display: grid; gap: var(--s4); min-inline-size: 0; }
  .cand-panel > h2 { font-size: 1.5rem; }
  .cand-panel > h2 .label { display: block; margin-bottom: .3rem; }

  .task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 3px double var(--rule-ui); }
  .task-list li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding-block: .7rem; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: .9375rem; }
  .task-list .tick { inline-size: 1.1rem; block-size: 1.1rem; border: 1px solid var(--rule-ui); display: inline-grid; place-items: center; color: var(--green); transform: translateY(.15rem); }
  .task-list li[data-met="true"] .tick::after { content: ""; inline-size: .55rem; block-size: .3rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.08rem) rotate(-45deg); }
  .task-list li[data-next="true"] { background: var(--green-wash); padding-inline: .5rem; margin-inline: -.5rem; }
  .task-list .rid { font-size: .75rem; letter-spacing: .1em; color: var(--gilt-ink); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
  .task-list .detail { color: var(--muted); font-size: .8125rem; grid-column: 2 / -1; }

  .progress { display: grid; gap: .35rem; font-family: var(--sans); font-size: .875rem; color: var(--muted); }
  .progress-track { block-size: .5rem; background: var(--rule); border-radius: 2px; overflow: hidden; }
  .progress-fill { block-size: 100%; background: var(--green); inline-size: 0; }

  .log-list { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: .9375rem; }
  .log-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem var(--s3); padding-block: .55rem; border-bottom: 1px solid var(--rule); }
  .log-list .figure { color: var(--muted); }

  .cand-form { display: grid; gap: var(--s4); }
  .cand-form .form-action { margin-top: var(--s2); }

  /* The paper: one question per fieldset, answers never shipped. */
  .paper { display: grid; gap: var(--s5); }
  .paper .choice-set legend { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; line-height: 1.4; }
  .paper .q-n { font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--gilt-ink); display: block; margin-bottom: .2rem; }
  .paper [data-missed="true"] legend .q-n { color: var(--error); }
  .paper [data-missed="true"] .field-error { font-weight: 600; }
  .paper .choice-set-options { grid-template-columns: minmax(0, 1fr); }

  .state-card { border: 1px solid var(--rule-ui); background: var(--card); padding: var(--s5); display: grid; gap: var(--s3); }
  .state-card h2 { font-size: 1.5rem; }
  .election-panel { border: 1px solid var(--green); background: var(--card); padding: var(--s5); display: grid; gap: var(--s4); min-block-size: 14rem; }
  .settings { border-top: 1px solid var(--rule); padding-top: var(--s4); }
  .settings > summary { min-block-size: 44px; display: flex; align-items: center; font-family: var(--sans); font-size: .9375rem; font-weight: 600; cursor: pointer; }
  .settings .settings-body { display: grid; gap: var(--s4); padding-top: var(--s3); }

  .plan-holes { display: grid; gap: var(--s3); }
  .plan-hole { display: grid; gap: .5rem var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); border-top: 1px solid var(--rule); padding-top: var(--s3); }
  .plan-hole .label { grid-column: 1 / -1; }
  .log-list li { align-items: baseline; }
  .marker-state { flex-basis: 100%; font-size: .8125rem; color: var(--muted); }
  .marker-state[data-marker-state="confirm"] { color: var(--green); }
  .marker-state[data-marker-state="decline"] { color: var(--error); }
  .marker-link { flex-basis: 100%; display: grid; gap: var(--s2); padding: var(--s3); border: 1px dashed var(--rule-ui); background: var(--stock); }
  .marker-link .actions { margin-top: 0; }
  .letter-count[data-ok="true"], .letter-total[data-ok="true"] { color: var(--green); }
  .rule-line { border-inline-start: 3px double var(--rule-ui); padding-inline-start: var(--s3); }
  .rule-reason { font-style: italic; }
  .marker-notice { margin-top: var(--s6); }
  .resend { display: grid; gap: var(--s3); max-width: 32rem; }
}