/* ============================================================
   public.css — Golden Invest Group public layer styles (FE-01)
   ------------------------------------------------------------
   Clean port of the donor Webflow identity (assets/css/style.css
   + site.css) for the Worker-SSR public pages (ADR-004).
   Load order: fonts.css -> tokens.css -> public.css.
   Donor class names are preserved where FE-02/FE-03 will port
   markup (.button, .label, .c-accordion-*, .wf-fx, ...).
   Light design-system variant; WCAG 2.1 AA.
   ============================================================ */

/* ---- 1. Base ----------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* In-page jumps (skip link, #anchor headings) must land below the fixed
     64px header instead of underneath it. Applies to the viewport scroller. */
  scroll-padding-top: var(--header-height);
  overflow-x: hidden;
}

/* html carries overflow-x:hidden, so its used overflow propagates to the
   viewport and browsers differ over which element they read scroll-behavior
   from. Declaring it on body as well makes the smooth behaviour hold either
   way; it is inert on whichever of the two is not the scrolling box. */
body {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

/* Reduced motion: instant jumps, no smooth animation (WCAG 2.3.3 / 2.2.2). */
@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  display: flex;
  flex-flow: column;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* ---- 2. Typography (donor scale) --------------------------- */
h1,
h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 700;
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
}

h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 500;
}

h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); }
h4 { font-size: var(--text-h4-size); line-height: var(--text-h4-line); }
h5 { font-size: var(--text-h5-size); line-height: var(--text-h5-line); }
h6 { font-size: var(--text-h6-size); line-height: var(--text-h6-line); }

p {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
}

.label {
  color: var(--text-primary);
  flex: none;
  margin-bottom: 0;
  font-size: var(--text-label-size);
  font-weight: 400;
  line-height: var(--text-label-line);
}

.label.color--gold { color: var(--brand-accent-hover); }
.label.color--muted { color: var(--text-tertiary); }
.label.inverted { color: var(--text-inverted); }

.color--inverted { color: var(--text-inverted); }
.color--gold { color: var(--brand-accent-hover); }

.underline { text-decoration: underline; }

/* ---- 3. Links & focus (AA: focus always visible) ----------- */
a,
.link {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--dur-hover) ease-out;
}

a:hover,
.link:hover {
  color: var(--brand-accent-hover);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 100;
  background: var(--text-primary);
  color: var(--text-inverted);
  padding: var(--space-3) var(--space-6);
}

.skip-link:focus-visible {
  top: var(--space-4);
  color: var(--text-inverted);
}

/* ---- 4. Layout primitives (donor utility subset) ----------- */
.page--wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
  padding: var(--space-20) var(--page-pad-x);
}

.site-main {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  /* clear the fixed header */
  padding-top: var(--header-height);
}

.max--w--1600 {
  width: 100%;
  max-width: var(--content-max);
}

.max--w--700 { max-width: 700px; }
.max--w--500 { max-width: 500px; }

.full--width { width: 100%; }

.flex--vertical { display: flex; flex-flow: column; }
.flex--center { display: flex; justify-content: center; align-items: center; }
.flex--child--grow { flex: 1; }

.space--between {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.space--between--bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: var(--space-6);
}

.gap--vertical--8  { display: flex; flex-flow: column; gap: var(--space-2); }
.gap--vertical--16 { display: flex; flex-flow: column; gap: var(--space-4); }
.gap--vertical--24 { display: flex; flex-flow: column; gap: var(--space-6); }
.gap--vertical--48 { display: flex; flex-flow: column; gap: var(--space-12); }
.gap--horizontal--16 { display: flex; gap: var(--space-4); }
.gap--horizontal--24 { display: flex; gap: var(--space-6); }
.gap--horizontal--40 { display: flex; gap: var(--space-10); }
.gap--horizontal--80 { display: flex; gap: var(--space-20); }

.wrap--down { flex-wrap: wrap; }

.grid--gap--24 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* ---- 5. Header / navigation (donor navbar port) ------------ */
.site-header {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-gold);
  padding: var(--space-3) var(--page-pad-x);
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.site-header__brand { display: inline-flex; align-items: center; }

.logo.round { width: auto; height: 40px; }
.logo.x2 { width: auto; height: 100px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.selectors-text {
  color: var(--text-primary);
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
}

.selectors-text.is-absolute {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.nav-link[aria-current="page"] .selectors-text {
  color: var(--brand-accent-hover);
}

/* Five nav items (four links + Apply) need a tighter rhythm on the narrow end
   of desktop, before the 991px hamburger step takes over. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .nav-links { gap: var(--space-6); }
}

/* Hamburger (hidden on desktop) */
.menu-button {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.hamburger-container {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  position: relative;
}

.hamburger-bun {
  background-color: var(--text-primary);
  width: 20px;
  height: 2px;
  position: absolute;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-bun.top { top: 18px; }
.hamburger-bun.bottom { bottom: 18px; }

.menu-button.w--open .hamburger-bun.top {
  transform: translateY(7px) rotate(45deg);
}
.menu-button.w--open .hamburger-bun.bottom {
  transform: translateY(-7px) rotate(-45deg);
}

@media screen and (max-width: 991px) {
  .menu-button { display: block; }

  .nav-menu-wrapper {
    display: none;
  }

  .nav-menu-wrapper.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-gold);
    box-shadow: var(--shadow-nav);
  }

  .nav-links {
    flex-flow: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--page-pad-x) var(--space-6);
  }

  .nav-links .nav-link {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-links .nav-cta {
    margin-top: var(--space-4);
  }

  body.menu-open {
    overflow: hidden;
  }
}

/* ---- 6. Buttons (donor .button + text-swap hover) ---------- */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  padding: var(--space-3) var(--space-6);
  background-color: var(--text-primary);
  color: var(--text-inverted);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background-color var(--dur-hover) ease-out,
    color var(--dur-hover) ease-out;
}

.button .label { font-size: 16px; line-height: 24px; }
.button .label.inverted { color: inherit; }

.button.inverted {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--bg-primary);
}

.button.outline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.button:hover { color: var(--text-inverted); }
.button.inverted:hover,
.button.outline:hover { color: var(--text-primary); }

/* Donor text-swap hover: two stacked labels slide up together. */
.button-text-wrap {
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.button-text-wrap .label,
.button-text-wrap .selectors-text {
  transition: transform var(--dur-swap) var(--ease-swap);
  will-change: transform;
}

.button-text-wrap:hover .label,
.button-text-wrap:focus-visible .label,
a:hover > .button .button-text-wrap .label,
a:focus-visible > .button .button-text-wrap .label,
.button-text-wrap:hover .selectors-text,
.button-text-wrap:focus-visible .selectors-text {
  transform: translateY(-100%);
}

.label.is-absolute,
.selectors-text.is-absolute {
  text-align: center;
  position: absolute;
  inset: 100% 0% auto;
}

/* ---- 7. Forms (donor .text--field port + AA states) -------- */
.text--field {
  width: 100%;
  height: 48px;
  padding: var(--space-3);
  background-color: transparent;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-none);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  transition: border-color var(--dur-hover) ease-out,
    box-shadow var(--dur-hover) ease-out;
}

.text--field.bigger {
  height: 180px;
  resize: vertical;
}

.text--field:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(160, 115, 51, 0.2);
}

.text--field[aria-invalid="true"] {
  border-color: var(--error);
}

.field-error {
  color: var(--error);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  min-height: 44px;
  padding: var(--space-3) 0;
  gap: var(--space-2);
}

.checkbox-field input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-none);
  background: transparent;
  cursor: pointer;
}

.checkbox-field input[type="checkbox"]:checked {
  background-color: var(--brand-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23f9f7f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 14px;
  border-color: var(--brand-accent);
}

/* ---- 8. Accordion (donor FAQ port, button-based for a11y) -- */
.c-accordion-list {
  display: flex;
  flex-flow: column;
  width: 100%;
}

.c-accordion-item {
  border-bottom: 1px solid var(--border-gold);
}

.c-accordion-item-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-6) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.c-accordion-item-q-icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.accordion-item-q-icon-stripe-1,
.accordion-item-q-icon-stripe-2 {
  position: absolute;
  inset: 50% auto auto 0;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background-color: var(--text-primary);
  transition: transform 0.3s ease;
}

.accordion-item-q-icon-stripe-2 {
  transform: rotate(90deg);
}

.c-accordion-item.is-open .accordion-item-q-icon-stripe-2 {
  transform: rotate(90deg) scaleX(0);
}

.c-accordion-item-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.c-accordion-item.is-open .c-accordion-item-a {
  max-height: 1500px;
}

.c-accordion-item-a > div {
  padding: 0 0 var(--space-6);
}

/* ---- 9. Cards & imagery (donor listing card language) ------ */
.listing--image--container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.listing--image--container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gradient--cover {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: linear-gradient(rgba(10, 10, 10, 0) 60%, rgba(10, 10, 10, 0.45));
  pointer-events: none;
}

.grid-cell h2 {
  color: var(--brand-accent);
}

/* ---- 10. Hero (dark imagery band, donor language) ---------- */
.hero-container {
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-height: 60vh;
  position: relative;
  overflow: hidden;
  background-color: var(--text-primary);
}

.hero-container > .hero-content {
  z-index: 2;
  width: 100%;
  padding: var(--space-20) var(--page-pad-x);
  display: flex;
  justify-content: center;
}

.bg-cover {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: linear-gradient(rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.25));
  pointer-events: none;
}

.hero-media,
.hero-media video,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-hero__video {
  z-index: 0;
}

.public-hero__poster {
  z-index: 0;
}

/* The poster remains the media surface for people who request less motion.
   public.js never calls play() in this mode; hiding the video also avoids a
   transient first frame over the poster in browsers that preload metadata. */
@media (prefers-reduced-motion: reduce) {
  .public-hero__video {
    display: none;
  }
}

/* ---- 11. Footer (donor port + jurisdiction disclaimer) ----- */
.footer-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 100%;
  background-color: var(--bg-primary);
  padding: var(--space-20) var(--page-pad-x) var(--space-8);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-20) 0;
}

.footer-disclaimer {
  width: 100%;
  max-width: 900px;
  margin-bottom: var(--space-12);
  text-align: center;
}

.footer-disclaimer p {
  color: var(--text-tertiary);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.footer-disclaimer a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.legal-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  border-top: 1px solid var(--border-gold-strong);
  padding-top: var(--space-8);
}

.legal-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

@media screen and (max-width: 991px) {
  .legal-container {
    flex-flow: wrap;
    justify-content: center;
    gap: var(--space-4);
  }
}

/* ---- 12. Compliance components (FE-01 deliverables) -------- */

/* Legal-review watermark: applied around outcome/return-referencing
   copy while [LEGAL-REVIEW] is unresolved (spec §4, TC-502). */
.legal-review {
  position: relative;
  padding: var(--space-4);
  background: var(--legal-review-bg);
  border: 1px dashed var(--border-gold-strong);
}

.legal-review__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--legal-review-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 16px;
  text-transform: uppercase;
}

.legal-review::after {
  content: "PENDING LEGAL REVIEW";
  /* Alternative-text syntax nulls the accessible name where supported
     (the visible badge above is the accessible signal). */
  content: "PENDING LEGAL REVIEW" / "";
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(160, 115, 51, 0.16);
  font-family: var(--font-display);
  font-size: clamp(18px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: 4px;
  white-space: nowrap;
  transform: rotate(-8deg);
  pointer-events: none;
  overflow: hidden;
}

/* Mock-copy placeholder marker: rendered whenever a content block
   carries mock:true (Gate A #5). Visibly non-final by design. */
.mock-copy {
  border: 1px dashed var(--mock-border);
  background: var(--mock-bg);
  padding: var(--space-4);
}

.mock-copy__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: 2px var(--space-2);
  background: var(--mock-border);
  color: var(--mock-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 16px;
  text-transform: uppercase;
}

/* ---- 13. Reveal micro-interactions (donor .wf-fx) ---------- */
.wf-fx {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--dur-reveal) ease,
    transform var(--dur-reveal) var(--ease-reveal);
  will-change: opacity, transform;
}

.wf-fx.is-in {
  opacity: 1;
  transform: none;
}

.square--image.wf-fx { transform: scale(1.15); }
.square--image.wf-fx.is-in { transform: scale(1); }

/* No-JS / reduced motion: content always visible */
.no-js .wf-fx {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .wf-fx {
    opacity: 1;
    transform: none;
  }
}

/* No-JS accordion fallback: all answers expanded */
.no-js .c-accordion-item-a {
  max-height: none;
}

/* No-JS nav fallback: show menu inline under header on mobile */
@media screen and (max-width: 991px) {
  .no-js .nav-menu-wrapper {
    display: block;
    position: static;
  }
  .no-js .menu-button {
    display: none;
  }
}

/* ---- 14. Apply flow (FE-03) -------------------------------- */

.apply-header {
  width: 100%;
  text-align: left;
}

.apply-back {
  color: var(--brand-accent-hover);
  text-decoration: none;
}

.apply-back:hover {
  color: var(--brand-accent-hover);
  text-decoration: underline;
}

/* Entry page: one question, two link-cards */
.apply-choice {
  display: flex;
  flex-flow: column;
  gap: var(--space-8);
  width: 100%;
}

.apply-choice__question {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
}

.apply-choice__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.apply-choice__card {
  display: flex;
  flex-flow: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--surface-elevated);
  border: 1px solid var(--border-gold);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color var(--dur-hover) ease-out,
    transform var(--dur-hover) ease-out;
}

.apply-choice__card:hover {
  border-color: var(--brand-accent);
  transform: translateY(-2px);
  color: inherit;
}

.apply-choice__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
}

.apply-choice__text {
  color: var(--text-secondary);
}

.apply-choice__cta {
  margin-top: auto;
  color: var(--brand-accent-hover);
  font-weight: 500;
}

/* Form layout */
.apply-form {
  display: flex;
  flex-flow: column;
  gap: var(--space-8);
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.form-field {
  display: flex;
  flex-flow: column;
  gap: var(--space-2);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-section,
.form-consent {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-flow: column;
  gap: var(--space-4);
}

.form-section .form-grid {
  width: 100%;
}

.form-legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
  color: var(--text-primary);
}

.form-consent {
  border-top: 1px solid var(--border-gold);
  padding-top: var(--space-6);
}

.form-label {
  font-weight: 500;
  font-size: var(--text-body-size);
  line-height: var(--text-label-line);
}

.required-mark {
  color: var(--brand-accent-hover);
}

.optional-mark {
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: var(--text-label-size);
}

.field-hint {
  color: var(--text-tertiary);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

/* Available to assistive tech, invisible and zero-height on screen. Used for
   the field-help copy that `aria-describedby` points at, and for control
   names that are conveyed visually by a glyph. Out of flow, so it can never
   affect the alignment of a form row. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.checkbox-label {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  color: var(--text-secondary);
}

.checkbox-label a {
  text-decoration: underline;
}

select.select--field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

/* Form-level banner (errors / no-JS notice) */
.form-banner {
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--error);
  border-left-width: 4px;
  background: rgba(179, 38, 30, 0.06);
  color: var(--error);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
}

.form-banner:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

/* Honeypot: rendered but never seen, never focusable (anti-abuse).
   Off-screen (not display:none) + aria-hidden + tabindex=-1. */
.hp-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-turnstile {
  min-height: 65px; /* reserve widget space, avoid layout shift */
}

.form-actions {
  display: flex;
  flex-flow: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.form-submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* /apply v2: documentary form treatment, no imagery or graphical stepper.
   Ink (#0a0a0a) on ivory (#f9f7f4) is 19.3:1; dark gold links
   (#8a6229) on ivory are 5.09:1; error (#b3261e) on ivory is 6.46:1. */
.apply-page { gap: var(--space-12); }

.apply-wizard {
  display: flex;
  flex-flow: column;
  gap: var(--space-8);
}

.apply-wizard__step {
  display: flex;
  flex-flow: column;
  gap: var(--space-6);
  width: 100%;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-gold);
}

.apply-wizard__progress {
  color: var(--brand-accent-hover);
  font-size: var(--text-label-size);
  font-weight: 500;
  line-height: var(--text-label-line);
}

.apply-wizard__title {
  font-family: var(--font-display);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
}

.apply-wizard__fields { display: flex; flex-flow: column; gap: var(--space-6); }

.form-choice {
  display: flex;
  flex-flow: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.form-choice__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.form-choice__option {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-2);
  color: var(--text-secondary);
  cursor: pointer;
}

.form-choice__option input { width: 18px; height: 18px; accent-color: var(--brand-accent-hover); }

.form-choice__option input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }

/* Wizard controls retain the same 48px rhythm as text inputs, with a
   documentary label treatment. Ink on ivory is 19.3:1; the dark-gold focus
   treatment is 5.09:1 against ivory (both exceed the applicable AA targets). */
.apply-wizard .form-label {
  color: var(--text-primary);
  font-size: var(--text-label-size);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: var(--text-label-line);
  text-transform: uppercase;
}

/* ---- Field label row + help disclosure --------------------------------
   Every wizard field has the identical vertical structure: a one-line label
   row (20px — the label's own line-height), then the control, then the error
   slot. Help text is NOT in that flow any more; it lives in an absolutely
   positioned panel. That is what guarantees two fields sharing a .form-grid
   row line up whether one, both or neither has help.

   The field gap is 12px (not 8px) so the help trigger's 44x44 tap target can
   extend below the label row without ever reaching the control underneath.
   The gap is uniform across every field, so alignment is unaffected. */
.apply-wizard .form-field {
  position: relative; /* containing block for .field-help__panel */
  gap: var(--space-3);
}

.form-field__labelrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--text-label-line);
}

.form-field__labelrow > .form-label { flex: 0 1 auto; }

.field-help {
  flex: none;
  line-height: 0;
}

/* Typographic glyph, no icon font and no SVG: a hairline dark-gold circle
   around a "?". Deliberately unlike the plain gold asterisk that marks a
   required field. Dark gold (#8a6229) on ivory is 5.09:1 — AA for the glyph
   and past the 3:1 non-text minimum for the ring. */
.field-help__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--brand-accent-hover);
  border-radius: 50%;
  background-color: var(--surface);
  color: var(--brand-accent-hover);
  cursor: pointer;
  list-style: none;
}

.field-help__trigger::-webkit-details-marker { display: none; }
.field-help__trigger::marker { content: ""; }

.field-help__glyph {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

/* 44x44 pointer target without adding a single pixel of layout: the box is
   pushed 12px above/below and 8px/16px sideways. 12px below the 20px trigger
   stops exactly at the control (the field gap), so it never steals a tap
   from the input; 8px on the left keeps the label's own click target. */
.field-help__trigger::after {
  content: "";
  position: absolute;
  top: -12px;
  right: -16px;
  bottom: -12px;
  left: -8px;
}

.field-help__trigger:hover { background-color: var(--surface-hover); }

.field-help__trigger:focus-visible {
  outline: 2px solid var(--brand-accent-hover);
  outline-offset: 2px;
}

/* Expanded: inverted, so the open panel is unmistakably tied to its trigger.
   Ivory on dark gold is the same 5.09:1. */
.field-help[open] > .field-help__trigger {
  background-color: var(--brand-accent-hover);
  color: var(--surface);
}

/* Anchored to .form-field (the details element itself is unpositioned), so
   the panel is clamped to the column on every breakpoint — it can never
   cause horizontal scroll — and it overlays the control instead of pushing
   it down. Site register: warm ivory-secondary surface, gold hairline,
   square corners, no shadow. Ink on #f3efe9 is 17.1:1. */
.field-help__panel {
  position: absolute;
  z-index: 12;
  top: calc(var(--text-label-line) + var(--space-1));
  right: 0;
  left: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-gold-strong);
  border-radius: var(--radius-none);
  background-color: var(--bg-secondary);
  box-shadow: none;
}

.field-help__text {
  color: var(--text-primary);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.apply-wizard .text--field {
  background-color: var(--surface);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.apply-wizard .text--field:focus {
  border-color: var(--brand-accent-hover);
  box-shadow: none;
}

.apply-wizard .text--field:focus-visible,
.apply-wizard .checkbox-field input[type="checkbox"]:focus-visible,
.apply-wizard .form-choice__option input[type="radio"]:focus-visible {
  outline: 2px solid var(--brand-accent-hover);
  outline-offset: 2px;
}

/* Native selects remain visible and usable until apply.js has enhanced the
   three marked controls. The off-screen source remains the submitted value. */
.apply-wizard select.select--field:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238a6229' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right var(--space-3) center;
  background-repeat: no-repeat;
  background-size: 16px;
  cursor: pointer;
}

.apply-wizard select.select--field:not([multiple])::-ms-expand { display: none; }

/* Custom listbox enhancement. Ink (#0a0a0a) on ivory (#f9f7f4) is 18.51:1;
   selected dark gold (#8a6229) on ivory is 5.09:1. The 2px focus ring uses
   that AA-compliant dark-gold token and never relies on OS selection blue. */
.custom-select { position: relative; width: 100%; }

.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  padding-right: var(--space-8);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-none);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238a6229' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right var(--space-3) center;
  background-repeat: no-repeat;
  background-size: 16px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
  text-align: left;
}

.custom-select__trigger:hover { background-color: var(--surface-hover); }

.custom-select__trigger:focus-visible,
.custom-select__option:focus-visible {
  outline: 2px solid var(--brand-accent-hover);
  outline-offset: 2px;
}

.custom-select__trigger[aria-invalid="true"] { border-color: var(--error); }

.custom-select__popup {
  position: absolute;
  z-index: 10;
  top: calc(100% + var(--space-1));
  left: 0;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border-gold-strong);
  border-radius: var(--radius-none);
  background-color: var(--surface-elevated);
  box-shadow: var(--shadow-card);
}

.custom-select__option {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-gold);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
}

.custom-select__option:last-child { border-bottom: 0; }
.custom-select__option:hover,
.custom-select__option:focus-visible { background-color: var(--surface-hover); }
.custom-select__option.is-selected { color: var(--brand-accent-hover); font-weight: 500; }
.custom-select__option[aria-disabled="true"] { color: var(--text-tertiary); cursor: default; }

.apply-wizard .custom-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Regions are repeated checkboxes, so normal HTML form serialization remains
   regions_of_interest=value&regions_of_interest=value without a native list box. */
.form-region-choice {
  position: relative; /* containing block for the group's help trigger */
  display: flex;
  flex-flow: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-none);
  background-color: var(--surface);
}

.form-region-choice > .form-label { padding: 0; }

/* A <details> is flow content and may not live inside a <legend>, so the
   group's disclosure is the legend's sibling and is pinned to the end of the
   legend line (the card's top edge, where the legend interrupts the border).
   It reads as part of the label row exactly like the single-field case. */
.form-region-choice > .field-help {
  position: absolute;
  top: 0;
  right: var(--space-3);
  transform: translateY(-50%);
}

/* Anchored to the trigger here, so it hangs from the card's top-right and
   stays inside the viewport on narrow screens instead of spanning a 20px box. */
.form-region-choice > .field-help > .field-help__panel {
  top: calc(100% + var(--space-2));
  right: 0;
  left: auto;
  width: min(320px, calc(100vw - 2 * var(--page-pad-x)));
}
.form-region-choice__options { display: flex; flex-flow: column; }

.form-region-choice__option {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-gold);
  color: var(--text-secondary);
  cursor: pointer;
}

.form-region-choice__option input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-none);
  background-color: var(--surface);
  cursor: pointer;
}

.form-region-choice__option input[type="checkbox"]:checked {
  border-color: var(--brand-accent-hover);
  background-color: var(--brand-accent-hover);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23f9f7f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 14px;
}

.form-region-choice__option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand-accent-hover);
  outline-offset: 2px;
}

.form-region-choice__option input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }

.apply-wizard .checkbox-field input[type="checkbox"],
.apply-wizard .form-choice__option input[type="radio"] {
  border-color: var(--text-primary);
}

.apply-wizard .form-choice__option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--text-primary);
  border-radius: 50%;
  background-color: var(--surface);
}

.apply-wizard .form-choice__option input[type="radio"]:checked {
  border: 5px solid var(--brand-accent-hover);
}

.apply-wizard textarea.text--field {
  min-height: 180px;
  padding: var(--space-3);
}

.apply-wizard__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.apply-wizard__actions .button { border-radius: var(--radius-none); }

/* `.button` and `.apply-wizard__step` set display:flex, which beats the UA
   `[hidden]` rule: without these every step and every button rendered at
   once. apply.js toggles `hidden` (one step at a time; Continue on steps 1–4,
   Submit only on the last). Without JS no step carries `hidden`, so the SSR
   fallback still shows the whole form. */
.apply-wizard__actions .button[hidden] { display: none; }
.apply-wizard__step[hidden] { display: none; }

.apply-wizard__title:focus-visible,
.apply-wizard__actions .button:focus-visible { border-radius: var(--radius-none); }

.no-js .apply-wizard__actions [data-wizard-back],
.no-js .apply-wizard__actions [data-wizard-next] { display: none; }

/* Status (receipt) page */
.apply-status__actions {
  margin-top: var(--space-6);
}

/* "Already have access? Sign in" — a deliberate, well-typeset signpost on
   the apply flow, not a footnote: body-size text (matches surrounding
   copy), set off from what precedes it by a gold hairline so it reads as
   its own line rather than trailing off the paragraph above it. Body text
   in --text-secondary (rgba(10,10,10,.8) on --white — well past AAA); the
   link itself in AA-safe dark gold (--brand-accent-hover on --white =
   5.09:1). Never a button — Apply owns that role. */
.signin-hint {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-gold);
  color: var(--text-secondary);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
}

.signin-hint a {
  color: var(--brand-accent-hover);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.signin-hint a:hover,
.signin-hint a:focus-visible {
  color: var(--text-primary);
}

@media screen and (max-width: 767px) {
  .apply-choice__cards,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .apply-wizard { gap: var(--space-6); }
  .apply-wizard__step { gap: var(--space-4); padding-top: var(--space-6); }
  .apply-wizard__title { font-size: var(--text-h4-size); line-height: var(--text-h4-line); }
  .apply-wizard .form-choice__options { flex-flow: column; align-items: stretch; gap: var(--space-2); }
  .apply-wizard .form-choice__option { width: 100%; }
  .apply-wizard__actions { flex-flow: column; align-items: stretch; }
  .apply-wizard__actions .button { width: 100%; }
}

/* ---- 17. Public v2 term-sheet register (PRV2-FE-01/02/03) - */

.term-sheet-page {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: var(--space-20) var(--page-pad-x);
}

.term-sheet-page__title,
.term-sheet-section {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.term-sheet-page__title {
  margin-bottom: var(--space-16);
}

.term-sheet-section {
  padding: var(--space-16) 0;
}

.term-sheet-section--statement {
  max-width: 900px;
  padding-top: var(--space-12);
  padding-bottom: var(--space-20);
}

/* Optional background-photo hero (statement + background_image_asset_id).
   Full-bleed: breaks out of the 900px statement cap and the page's padding to
   span edge-to-edge. html/body carry overflow-x:hidden, so the 100vw/left-50%
   pull can never introduce horizontal scroll. Absent an image, none of this
   applies and the plain typographic hero renders unchanged. */
.term-sheet-section--hero-image {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0;
  min-height: 70vh;
  overflow: hidden;
}

/* Meet the header flush when the hero opens the page (always the first block on
   home/membership/about — those pages render no title header before it). */
.term-sheet-page > .term-sheet-section--hero-image:first-child {
  margin-top: calc(-1 * var(--space-20));
}

.term-sheet-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* Scrim guaranteeing ivory (--text-inverted #f9f7f4) copy stays legible over an
   unknown photo. Two stacked dark layers; even worst-case (a pure-white photo,
   the weakest top-right zone) composites to ~#686868, ≈5.2:1 against the ivory
   text — above WCAG AA 4.5:1. Left/lower zones where the copy actually sits are
   far darker (7:1+). Real coastal photos are darker still, so the ratio only
   improves. */
.term-sheet-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.60) 55%, rgba(10, 10, 10, 0.45) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.30) 0%, rgba(10, 10, 10, 0.45) 100%);
}

.term-sheet-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: var(--space-16) var(--page-pad-x);
}

/* Copy switches to ivory over the dark scrim (structural override of the
   default ink statement colours; the gold accent tokens are untouched). */
.term-sheet-section--hero-image .term-sheet__statement > h1 {
  color: var(--text-inverted);
}

.term-sheet-section--hero-image .term-sheet__statement > p {
  color: var(--text-inverted);
  opacity: 0.92;
}

/* Opening CTAs, hoisted into the hero (V2Page) so they are on screen without
   scrolling: a solid primary and its outlined secondary, side by side, with the
   qualifying tag line beneath them. */
.term-sheet-hero__cta {
  margin-top: var(--space-8);
}

.term-sheet-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* The tag is a plain qualifying line, not a badge — small, quiet, and directly
   under the buttons it qualifies. */
.term-sheet-hero__tag {
  margin-top: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

/* Over a photo the primary keeps the solid ink fill of the header button
   (label 18.5:1 against its own fill) and gains an ivory hairline so its edge
   separates from the scrim; the secondary is ivory-on-transparent (5.2:1
   against the weakest zone of the scrim, worst-case ~#686868 — above the 4.5:1
   for its label and the 3:1 required of a non-text UI component). */
.term-sheet-section--hero-image .term-sheet-hero__cta .term-sheet__cta {
  padding: var(--space-4) var(--space-8);
  border-color: var(--text-inverted);
  background: var(--text-primary);
  color: var(--text-inverted);
  font-weight: 600;
}

.term-sheet-section--hero-image .term-sheet-hero__cta .term-sheet__cta--secondary {
  background: transparent;
  color: var(--text-inverted);
}

.term-sheet-section--hero-image .term-sheet-hero__tag {
  color: var(--text-inverted);
  opacity: 0.86;
}

/* Hover/focus inverts into brand gold: ivory on #8a6229 is 5.09:1 (AA). */
.term-sheet-section--hero-image .term-sheet-hero__cta .term-sheet__cta:hover,
.term-sheet-section--hero-image .term-sheet-hero__cta .term-sheet__cta:focus-visible {
  border-color: var(--brand-accent-hover);
  background: var(--brand-accent-hover);
  color: var(--text-inverted);
}

/* The default gold focus ring would sit dark-on-dark over the scrim, so the
   ring goes ivory here (5.2:1 against the scrim, 5.09:1 against the gold fill
   it is drawn beside). */
.term-sheet-section--hero-image .term-sheet-hero__cta .term-sheet__cta:focus-visible {
  outline: 2px solid var(--text-inverted);
  outline-offset: 3px;
}

/* The primary ("Apply for membership") is a solid pure-white plate with ink
   copy — 20.4:1, the strongest thing on the photo. Its outlined secondary
   ("How it works") is untouched. Declared after the shared hover above so the
   plate stays white on hover; the gold moves to the label instead (5.09:1). */
.term-sheet-section--hero-image .term-sheet-hero__cta .term-sheet__cta:not(.term-sheet__cta--secondary),
.term-sheet-section--hero-image .term-sheet-hero__cta .term-sheet__cta:not(.term-sheet__cta--secondary):hover,
.term-sheet-section--hero-image .term-sheet-hero__cta .term-sheet__cta:not(.term-sheet__cta--secondary):focus-visible {
  border-color: var(--white-pure);
  background: var(--white-pure);
  color: var(--text-primary);
}

.term-sheet-section--hero-image .term-sheet-hero__cta .term-sheet__cta:not(.term-sheet__cta--secondary):hover {
  color: var(--brand-accent-hover);
}

@media screen and (max-width: 991px) {
  .term-sheet-section--hero-image {
    min-height: 60vh;
  }

  .term-sheet-hero__inner {
    padding: var(--space-12) var(--page-pad-x);
  }

  .term-sheet-hero__cta {
    margin-top: var(--space-6);
  }

  /* The player is already fluid; the tablet step only tightens the rhythm
     between title, player and caption. */
  .term-sheet__video {
    gap: var(--space-4);
  }
}

@media screen and (max-width: 479px) {
  .term-sheet-section--hero-image {
    min-height: 52vh;
  }

  .term-sheet-section--hero-image .term-sheet-hero__cta .term-sheet__cta {
    padding: var(--space-3) var(--space-6);
  }

  /* Native controls need vertical room on a phone; a portrait clip is allowed
     to grow past 16:9 rather than letterbox into a strip. */
  .term-sheet__video {
    gap: var(--space-3);
  }

  .term-sheet__video-player {
    aspect-ratio: auto;
    min-height: 180px;
  }
}

.term-sheet__statement,
.term-sheet__disclosure,
.term-sheet__principal,
.term-sheet__legal-section {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 760px;
}

.term-sheet__statement > p {
  max-width: 680px;
  color: var(--text-secondary);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
}

.term-sheet__disclosure p,
.term-sheet__principal p,
.term-sheet__legal-section p {
  max-width: 720px;
}

/* Section marker: a short gold rule above every named section heading and
   above every table caption, so a stack of prose and tables reads as separate
   parts rather than one continuous wall. Attached to the heading itself, so
   continuation blocks (a disclosure_paragraph with no heading) deliberately
   carry no marker and stay visually joined to the section they continue.
   Decorative only — no content, no icon, invisible to assistive tech. */
.term-sheet__disclosure > h2::before,
.term-sheet__disclosure-copy > h2::before,
.term-sheet__principal > h2::before,
.term-sheet__principal-copy > h2::before,
.term-sheet__process > h2::before,
.term-sheet__video > h2::before,
.term-sheet__table > caption::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-bottom: var(--space-4);
  background: var(--brand-accent);
}

/* Qualifying line under a statement (or, in the hero, under its buttons). */
.term-sheet__tag {
  color: var(--text-tertiary);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

/* An enumeration inside a prose block: gold-marked items in two columns, so a
   list of six short asset types reads as a scannable set rather than a tall
   column of dashes. Sits between the block heading and the qualifying prose
   that closes it. The marker is the same gold as the section rules — the list
   carries no bullet glyph of its own (list-style: none). */
.term-sheet__bullets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3) var(--space-6);
  width: 100%;
  /* The bottom margin matters most when the list is the block's LAST child and
     the section below is pulled up by `joined` (membership: asset types ->
     verification table) — without it the two would sit almost flush. */
  margin: var(--space-2) 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.term-sheet__bullets li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--text-secondary);
}

.term-sheet__bullets li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-accent);
}

/* A paragraph introduced by its own subheading. The subheading is a plain
   weighted line, not a second section marker — the gold rule belongs to the
   block heading above it. */
.term-sheet__paragraph {
  display: flex;
  flex-flow: column;
  gap: var(--space-2);
  max-width: 720px;
}

.term-sheet__paragraph h3 {
  font-family: var(--font-body);
  font-size: var(--text-h6-size);
  font-weight: 600;
  line-height: var(--text-h6-line);
}

/* Consecutive subheaded paragraphs sit side by side as parallel cards, so two
   equal-weight items ("Two sources. Both labelled.") read as a comparison
   rather than a stack. Card treatment follows the rest of the page: ivory
   surface, hairline frame, gold rule on top echoing the section marker. */
.term-sheet__disclosure--cards {
  max-width: 100%;
}

.term-sheet__paragraph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  width: 100%;
  margin-top: var(--space-2);
}

.term-sheet__paragraph-grid .term-sheet__paragraph {
  gap: var(--space-3);
  max-width: 100%;
  padding: var(--space-8);
  border: 1px solid var(--border);
  border-top: 2px solid var(--brand-accent);
  background: var(--surface-elevated);
}

.term-sheet__disclosure--cards .term-sheet__paragraph-grid p {
  max-width: 100%;
  color: var(--text-secondary);
}

/* The line that closes a card row belongs to both cards, so it is centred
   under them rather than left-aligned against the first one. */
.term-sheet__paragraph-note {
  align-self: center;
  max-width: 720px;
  margin-top: var(--space-2);
  text-align: center;
}

.term-sheet__paragraph-note p {
  max-width: 100%;
  color: var(--text-secondary);
}

/* A `centered` block sits in the middle of its column — used by the CTA that
   closes the process timeline, which is itself a centred composition. */
.term-sheet-section--centered {
  display: flex;
  justify-content: center;
  text-align: center;
}

/* The timeline's closing note is part of that centred composition, so it is
   centred under the spine rather than left-aligned against Step 1. */
.term-sheet__process > .term-sheet__note {
  align-self: center;
  max-width: 720px;
  text-align: center;
}

/* A joined CTA still needs room to read as a button rather than as another
   row of the block above it — 40px, against the 24px a joined table takes. */
.term-sheet-section--cta_link.term-sheet-section--joined {
  margin-top: calc(var(--space-10) - var(--space-16));
}

/* A `joined` block continues the section above it instead of opening a new
   one: no top padding of its own and no gold caption marker, so the eye reads
   it as belonging to the heading it follows. */
.term-sheet-section--joined {
  margin-top: calc(var(--space-6) - var(--space-16));
  padding-top: 0;
}

.term-sheet-section--joined .term-sheet__table > caption::before {
  content: none;
}

/* ---- Two-column sections (copy + image column) -------------
   The image column is as tall as the copy beside it (align-items: stretch +
   object-fit: cover), and both collapse to a single column below the tablet
   breakpoint, image last so the copy still opens the section. */
.term-sheet__disclosure--with-media,
.term-sheet__principal--with-media {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-12);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.term-sheet__disclosure-copy,
.term-sheet__principal-copy {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.term-sheet__disclosure-media,
.term-sheet__principal--with-media .term-sheet__principal-portrait {
  width: 100%;
  height: 100%;
  min-height: 360px;
  max-height: none;
  object-fit: cover;
}

/* Declared-but-unfilled image slot: a quiet framed panel holding the column
   until the founder uploads the photo in the CMS. Decorative only. */
.term-sheet__media-placeholder {
  border: 1px dashed var(--border-gold);
  background:
    repeating-linear-gradient(
      135deg,
      var(--bg-secondary),
      var(--bg-secondary) 12px,
      var(--surface) 12px,
      var(--surface) 24px
    );
}

@media screen and (max-width: 991px) {
  .term-sheet__disclosure--with-media,
  .term-sheet__principal--with-media {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .term-sheet__disclosure-media,
  .term-sheet__principal--with-media .term-sheet__principal-portrait {
    order: 2;
    min-height: 240px;
    max-height: 420px;
  }
}

.term-sheet__documentary-image {
  width: min(100%, 960px);
  max-height: 620px;
  margin-top: var(--space-12);
  object-fit: cover;
}

.term-sheet__principal-link a {
  color: var(--brand-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.term-sheet__principal-portrait {
  width: min(100%, 440px);
  max-height: 560px;
  object-fit: cover;
}

/* ---- Process timeline (process_steps) -----------------------
   A centred spine with the steps alternating across it. The spine and the
   markers are decorative; the list stays an <ol> so the order is real. */
.term-sheet__process {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
}

.term-sheet__process-track {
  position: relative;
  display: grid;
  gap: var(--space-10);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.term-sheet__process-track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--border-gold);
}

.term-sheet__process-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.term-sheet__process-marker {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: var(--radius-round);
  background: var(--brand-accent);
}

.term-sheet__process-copy {
  display: flex;
  flex-flow: column;
  gap: var(--space-2);
}

/* Odd steps sit right of the spine, even steps left (and right-aligned), which
   is the alternation the founder's reference layout uses. */
.term-sheet__process-step--start .term-sheet__process-copy {
  grid-column: 2;
  padding-left: var(--space-8);
}

.term-sheet__process-step--end .term-sheet__process-copy {
  grid-column: 1;
  padding-right: var(--space-8);
  text-align: right;
}

.term-sheet__process-copy h3 {
  font-family: var(--font-body);
  font-size: var(--text-h6-size);
  font-weight: 600;
  line-height: var(--text-h6-line);
}

.term-sheet__process-copy p {
  color: var(--text-secondary);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

@media screen and (max-width: 767px) {
  /* One column on a phone: the spine moves to the left edge and every step
     hangs off it in reading order. */
  .term-sheet__process-track { gap: var(--space-8); }
  .term-sheet__process-track::before { left: 5px; margin-left: 0; }
  .term-sheet__process-step { grid-template-columns: minmax(0, 1fr); }
  .term-sheet__process-marker { left: 0; margin-left: 0; }

  .term-sheet__process-step--start .term-sheet__process-copy,
  .term-sheet__process-step--end .term-sheet__process-copy {
    grid-column: 1;
    padding-right: 0;
    padding-left: var(--space-8);
    text-align: left;
  }
}

/* Self-hosted video block. Same exhibit treatment as the tables: a gold hairline
   frames the player (the section marker rule above the title is shared with the
   other headed blocks), sharp corners, no shadow, no card. The player is fluid —
   width:100% of a content-column cap, height:auto against a 16:9 box — so it can
   never exceed its column and never introduces horizontal scroll at any width. */
.term-sheet__video {
  display: flex;
  flex-flow: column;
  gap: var(--space-6);
  width: 100%;
  max-width: 960px;
}

.term-sheet__video-figure {
  width: 100%;
  margin: 0;
}

.term-sheet__video-player {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-gold);
  border-radius: 0;
  background: var(--text-primary);
  object-fit: contain;
}

.term-sheet__video-player:focus-visible {
  outline: 2px solid var(--brand-accent-hover);
  outline-offset: 3px;
}

.term-sheet__video-caption {
  margin-top: var(--space-3);
  max-width: 720px;
  color: var(--text-tertiary);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.term-sheet__table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.term-sheet__table-wrap:focus-visible {
  outline: 2px solid var(--brand-accent-hover);
  outline-offset: 3px;
}

/* Tables are framed by a gold hairline top and bottom, so a table block reads
   as an enclosed exhibit rather than more running text. Hairline, never fill. */
.term-sheet__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  border-top: 1px solid var(--border-gold);
  color: var(--text-primary);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  text-align: left;
}

.term-sheet__table caption {
  padding: 0 0 var(--space-3);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-h5-size);
  font-weight: 700;
  line-height: var(--text-h5-line);
  text-align: left;
}

.term-sheet__table th,
.term-sheet__table td {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  font-weight: 400;
  vertical-align: top;
}

.term-sheet__table th {
  color: var(--text-primary);
  font-weight: 500;
}

/* Header row: tinted band, uppercase label register, ink underscore. Ink on
   --bg-secondary (#f3efe9) is 17.3:1 — AAA. */
.term-sheet__table thead th {
  border-bottom-color: var(--text-primary);
  background: var(--bg-secondary);
  font-size: var(--text-label-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: var(--text-label-line);
  text-transform: uppercase;
}

/* Closes the table against the gold hairline that opens it. */
.term-sheet__table tbody tr:last-child > th,
.term-sheet__table tbody tr:last-child > td {
  border-bottom-color: var(--border-gold);
}

.term-sheet__table--kv th {
  width: 38%;
  border-right: 1px solid var(--border);
}

.term-sheet__table--data th[scope="row"] {
  width: 32%;
}

.term-sheet__note,
.term-sheet__identity-line {
  margin-top: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

/* The homepage fee disclosure receives space; the key/value table itself is
   unchanged from the matching tables on approach and membership. */
.term-sheet-page--home .term-sheet-section--fee {
  max-width: 1120px;
  padding-top: calc(var(--space-20) + var(--space-8));
  padding-bottom: calc(var(--space-20) + var(--space-8));
}

.term-sheet__routes-list {
  width: 100%;
  max-width: 960px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.term-sheet__routes-list li {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2fr) auto;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.term-sheet__routes-list a {
  color: var(--brand-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.term-sheet__route-label {
  color: var(--text-tertiary);
}

.term-sheet__route-descriptor {
  color: var(--text-secondary);
}

.term-sheet__route-state {
  color: var(--text-tertiary);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.term-sheet__defined-terms {
  display: grid;
  width: 100%;
  max-width: 960px;
  margin: 0;
  border-top: 1px solid var(--border);
}

.term-sheet__defined-terms > div {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2fr);
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.term-sheet__defined-terms dt { font-weight: 600; }
.term-sheet__defined-terms dd { margin: 0; color: var(--text-secondary); }

/* Primary content button: the same solid ink fill as the header Apply button,
   so the page's calls to action and the navigation read as one system. Ivory on
   ink is 18.5:1. The secondary companion is the outlined variant. */
.term-sheet__cta {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--text-primary);
  background: var(--text-primary);
  color: var(--text-inverted);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  text-decoration: none;
  transition: background-color var(--dur-hover) ease-out, color var(--dur-hover) ease-out,
    border-color var(--dur-hover) ease-out;
}

.term-sheet__cta:hover,
.term-sheet__cta:focus-visible {
  border-color: var(--brand-accent-hover);
  background: var(--brand-accent-hover);
  color: var(--text-inverted);
}

.term-sheet__cta--secondary {
  background: transparent;
  color: var(--text-primary);
}

.term-sheet__cta--secondary:hover,
.term-sheet__cta--secondary:focus-visible {
  border-color: var(--text-primary);
  background: var(--text-primary);
  color: var(--text-inverted);
}

.term-sheet-section--cta_link {
  padding-top: var(--space-20);
  padding-bottom: 0;
}

/* The FAQ is its own sector of the page, not a continuation of the CTA above
   it: a full-bleed band in the warmer ivory, closed top and bottom by a gold
   hairline. Full-bleed uses the same 100vw break-out as the hero — html/body
   clip overflow-x, so it can never introduce a horizontal scrollbar. Sharp
   corners, no shadow, no card. Only V2 term-sheet pages are affected; the
   legacy .public-page FAQ is untouched.
   Body copy on #f3efe9: ink 17.3:1, --text-secondary 10.3:1, and the gold
   "Questions" eyebrow (--brand-accent-hover #8a6229) 4.75:1 — all AA or better. */
.term-sheet-page > .public-section--faq {
  position: relative;
  left: 50%;
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  margin: var(--space-20) -50vw 0;
  padding: var(--space-16) var(--page-pad-x);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  background: var(--bg-secondary);
}

/* Keeps the band's contents on the same 1120px column as every term-sheet
   section above it (both are centred on the viewport, so the left edges line
   up exactly), and collapses to the padded full width below that. */
.term-sheet-page > .public-section--faq > * {
  width: min(100%, 1120px);
  max-width: 100%;
}

.term-sheet__legal-section { max-width: 860px; }
.term-sheet-page--legal_impressum .term-sheet-section,
.term-sheet-page--legal_terms_of_business .term-sheet-section,
.term-sheet-page--legal_member_terms .term-sheet-section,
.term-sheet-page--legal_nda_specimen .term-sheet-section,
.term-sheet-page--legal_privacy .term-sheet-section,
.term-sheet-page--legal_cookies .term-sheet-section,
.term-sheet-page--legal_aml .term-sheet-section,
.term-sheet-page--legal_complaints .term-sheet-section { padding: var(--space-8) 0; }

/* Footer is intentionally plain text and filing-oriented. */
.footer-wrapper {
  align-items: stretch;
  margin-top: var(--space-20);
  padding: var(--space-16) var(--page-pad-x) var(--space-8);
  border-top: 1px solid var(--border);
}

.footer-wrapper__inner,
.footer-disclaimer,
.legal-container {
  width: min(100%, var(--content-max));
  margin-right: auto;
  margin-left: auto;
}

.footer-brand {
  display: inline-block;
  margin-bottom: var(--space-12);
  font-family: var(--font-display);
  font-size: var(--text-h5-size);
  font-weight: 700;
  line-height: var(--text-h5-line);
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: var(--space-12);
  align-items: start;
}

.footer-column h2 {
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  font-weight: 600;
  line-height: var(--text-label-line);
}

.footer-column ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.footer-column li,
.footer-column a,
.footer-column span,
.footer-member-login a {
  color: var(--text-secondary);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}

.footer-column a,
.footer-member-login a,
.footer-disclaimer a {
  color: var(--brand-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-member-login {
  margin-top: var(--space-8);
}

.footer-cookie-preferences { margin-top: var(--space-4); }

.footer-cookie-preferences button {
  min-height: 44px;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: var(--brand-accent-hover);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-impressum {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.footer-impressum p,
.footer-disclaimer p {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 18px;
}

/* The consent choice is stored only in the essential first-party
   gig_cookie_consent cookie. The compact dialog keeps the site's plain,
   filing-oriented register and deliberately contains no third-party content. */
.cookie-consent {
  position: fixed;
  z-index: 100;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  border: 1px solid var(--border-gold-strong);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-card);
}

.cookie-consent[hidden] { display: none; }

.cookie-consent__inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: var(--space-6);
}

.cookie-consent__copy { max-width: 720px; }
.cookie-consent__copy h2 {
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  font-weight: 600;
  line-height: var(--text-label-line);
}
.cookie-consent__copy p { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--text-label-size); line-height: var(--text-label-line); }
.cookie-consent__copy a { color: var(--brand-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.cookie-consent__actions { display: flex; flex: none; flex-wrap: wrap; gap: var(--space-3); }
.cookie-consent__button {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-none);
  background: var(--text-primary);
  color: var(--text-inverted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
}
.cookie-consent__button--reject { background: var(--surface); color: var(--text-primary); }

.footer-disclaimer {
  max-width: var(--content-max);
  margin-top: var(--space-12);
  margin-bottom: var(--space-8);
  text-align: left;
}

.legal-container {
  border-top: 1px solid var(--border);
}

@media screen and (max-width: 767px) {
  .term-sheet-page { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .term-sheet-section { padding: var(--space-12) 0; }
  .term-sheet-page > .public-section--faq { margin-top: var(--space-12); padding: var(--space-12) var(--page-pad-x); }
  /* Tables: below 768px each row stacks (label above value) instead of a
     560px table scrolling sideways inside a phone-width wrapper, which also
     clipped the caption. Desktop rules above are untouched. */
  .term-sheet__table-wrap { overflow-x: visible; }
  .term-sheet__table { min-width: 0; border-top: 0; }
  .term-sheet__table,
  .term-sheet__table caption,
  .term-sheet__table tbody,
  .term-sheet__table tr,
  .term-sheet__table th,
  .term-sheet__table td { display: block; }
  .term-sheet__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .term-sheet__table tbody {
    border-top: 1px solid var(--border-gold);
    border-bottom: 1px solid var(--border-gold);
  }
  .term-sheet__table tbody tr {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border);
  }
  .term-sheet__table tbody tr:first-child { border-top: 0; }
  .term-sheet__table tbody th[scope="row"],
  .term-sheet__table tbody td {
    width: auto;
    padding: 0;
    border: 0;
  }
  .term-sheet__table tbody th[scope="row"] {
    color: var(--brand-accent-hover);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
  }
  .term-sheet__routes-list li,
  .term-sheet__defined-terms > div { grid-template-columns: 1fr; gap: var(--space-2); }
  .footer-columns { grid-template-columns: 1fr; gap: var(--space-8); }
  .cookie-consent__inner { flex-direction: column; align-items: stretch; padding: var(--space-4); }
  .cookie-consent__actions { flex-direction: column; }
  .cookie-consent__button { width: 100%; }
}

/* ---- 16. CMS public templates (FE-02 / FE-13) ------------- */

.site-main {
  width: 100%;
}

.public-page {
  width: 100%;
}

.public-hero__inner,
.public-section,
.public-legal {
  width: min(100%, var(--content-max));
  margin-right: auto;
  margin-left: auto;
}

.public-hero__inner {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.public-hero__inner > .mock-copy,
.public-hero__inner > .legal-review {
  max-width: 760px;
}

/* The CMS can omit a hero image while media is pending or unavailable. Keep
   the inverted hero copy legible independently of the generic hero shell. */
.public-hero {
  background-color: var(--text-primary);
}

.public-hero h1,
.public-hero .public-hero__text {
  color: var(--text-inverted);
}

.public-hero__text {
  max-width: 680px;
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
}

/* Compliance treatments own a light surface. These rules deliberately follow
   the hero's inverted-copy rule so a marker remains readable in every layout,
   including a marked hero. */
.mock-copy {
  color: var(--text-primary);
}

.legal-review {
  /* `--legal-review-bg` is translucent; layer it over a real light surface
     so the treatment remains readable when placed over the dark hero. */
  background-color: var(--bg-primary);
  background-image: linear-gradient(var(--legal-review-bg), var(--legal-review-bg));
  color: var(--text-primary);
}

.mock-copy :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, a, .label, .color--inverted),
.legal-review :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, a, .label, .color--inverted),
.mock-copy__badge,
.legal-review__badge {
  color: var(--text-primary);
}

.public-page > .public-section,
.public-legal > .public-section {
  margin-top: var(--space-20);
  padding-right: var(--page-pad-x);
  padding-left: var(--page-pad-x);
}

.public-page > .public-section:last-child,
.public-legal > .public-section:last-child {
  margin-bottom: var(--space-20);
}

.public-section {
  display: flex;
  flex-flow: column;
  gap: var(--space-8);
}

.public-section__copy,
.public-section__intro {
  display: flex;
  flex-flow: column;
  gap: var(--space-4);
  max-width: 760px;
}

.public-section__copy ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-6);
}

.public-section__image {
  width: min(100%, 700px);
  max-height: 560px;
  object-fit: cover;
}

.public-section--stats {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
}

.public-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}

.public-stats .grid-cell {
  min-height: 160px;
  padding: var(--space-6);
  border-left: 1px solid var(--border-gold);
}

.public-stats .grid-cell:first-child { border-left: 0; }
.public-stats h2 { color: var(--brand-accent); }

.public-section--faq {
  max-width: 960px;
}

.public-section--faq .mock-copy {
  padding: 0 var(--space-4);
}

.public-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-12);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: public-step;
}

.public-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-gold);
}

.public-steps__item > .mock-copy,
.public-steps__item > .legal-review {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
}

.public-steps__item > .mock-copy > .mock-copy__badge,
.public-steps__item > .legal-review > .legal-review__badge {
  grid-column: 1 / -1;
}

.public-steps__number {
  color: var(--brand-accent);
  font-family: var(--font-display);
  font-size: var(--text-h4-size);
  line-height: 1;
}

.public-steps__item h2 {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
}

.public-section--institutional {
  max-width: 960px;
  padding: var(--space-12) var(--page-pad-x);
  background: var(--bg-secondary);
  border-top: 2px solid var(--brand-accent);
}

.public-section--institutional .mock-copy,
.public-section--institutional .legal-review {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.public-section--institutional-compact {
  margin-bottom: var(--space-20);
}

.public-section--case-study {
  max-width: 960px;
  min-height: 42vh;
}

/* Membership's closing sign-in line: contained to a readable measure like
   the apply flow's, not stretched across the full section width. */
.public-section--signin {
  max-width: 700px;
}

.public-case-study__summary {
  max-width: 760px;
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
}

.public-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.public-facts > div { padding-top: var(--space-4); border-top: 1px solid var(--border-gold); }
.public-facts dt { color: var(--text-tertiary); font-size: var(--text-label-size); }
.public-facts dd { margin: var(--space-1) 0 0; }

.public-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.public-video-card {
  display: flex;
  flex-flow: column;
  gap: var(--space-4);
  min-height: 280px;
  padding: var(--space-6);
  border: 1px solid var(--border-gold);
}

.public-video-card .mock-copy { height: 100%; }
.public-video-card video,
.public-video-card__pending { width: 100%; aspect-ratio: 16 / 9; background: var(--text-primary); }

.public-section--lead-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--space-12);
  align-items: start;
}

.public-section--lead-form > .mock-copy,
.public-section--lead-form > .legal-review {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--space-12);
}

.public-section--lead-form > .mock-copy > .mock-copy__badge,
.public-section--lead-form > .legal-review > .legal-review__badge {
  grid-column: 1 / -1;
}

.public-lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.public-legal { padding-bottom: 1px; }
.public-section--legal { max-width: 960px; }
.public-section--legal > .legal-review > .mock-copy { display: flex; flex-flow: column; gap: var(--space-4); }

.public-page--sell_with_us .public-section--card {
  max-width: 720px;
  padding: var(--space-6) var(--page-pad-x);
  border-left: 2px solid var(--brand-accent);
}

@media screen and (max-width: 767px) {
  .public-stats,
  .public-steps,
  .public-video-grid,
  .public-section--lead-form,
  .public-lead-form,
  .public-section--lead-form > .mock-copy,
  .public-section--lead-form > .legal-review { grid-template-columns: 1fr; }

  .public-stats .grid-cell,
  .public-stats .grid-cell:first-child { border-top: 1px solid var(--border-gold); border-left: 0; }
  .public-stats .grid-cell:first-child { border-top: 0; }
}

/* ---- 15. Responsive helpers -------------------------------- */
@media screen and (max-width: 991px) {
  .space--between--bottom.vertical--mobile,
  .vertical--mobile {
    flex-flow: column;
    align-items: flex-start;
  }

  .gap--horizontal--80 {
    gap: var(--space-10);
  }

  .hidden--mobile { display: none; }
  .display--mobile { display: block; }
}

@media screen and (max-width: 767px) {
  .grid--gap--24 {
    grid-template-columns: 1fr;
  }

  .page--wrapper {
    gap: var(--space-16);
    padding: var(--space-16) var(--page-pad-x);
  }

  .footer-links {
    gap: var(--space-6);
    margin: var(--space-12) 0;
  }
}