/* ═══════════════════════════════════════════════════════════════════
   GrantVetted — Teal Ledger stylesheet
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Custom properties (from design tokens) ───────────────────── */
:root {
  /* Palette */
  --c-base:       #F7F3EB;
  --c-base-ink:   #15202B;
  --c-raised:     #FFFEFA;
  --c-raised-ink: #15202B;
  --c-sunken:     #E4ECF0;
  --c-sunken-ink: #15202B;
  --c-deep:       #102A43;
  --c-deep-ink:   #F7F3EB;
  --c-brand:      #006778;
  --c-brand-ink:  #FFFFFF;
  --c-accent:     #D4960A;
  --c-accent-ink: #1D2730;

  /* Muted variants – tuned for contrast floors */
  --c-muted-on-base:  #4A5568;
  --c-muted-on-deep:  #B8C7D4;
  --c-muted-on-base-footer: #5A6776;

  /* Hairline */
  --c-line:       #C8C3B8;
  --c-line-deep:  rgba(184,199,212,0.18);

  /* Typography */
  --ff-display: Newsreader, Georgia, serif;
  --ff-body:    Inter, system-ui, sans-serif;
  --fw-display: 650;
  --fs-display: clamp(2.25rem, 5vw + 1rem, 4rem);
  --lh-display: 1.02;
  --ls-display: -0.01em;
  --fs-body:    1.125rem;
  --lh-body:    1.55;

  /* Spacing */
  --space-section: 48px;
  --space-section-lg: 72px;
  --measure: 60ch;
  --max-page: 72rem;

  /* Radii */
  --r-card: 6px;
  --r-pill: 100px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(16,42,67,0.08), 0 1px 2px rgba(16,42,67,0.06);
  --shadow-card-hover: 0 4px 12px rgba(16,42,67,0.12), 0 2px 4px rgba(16,42,67,0.08);

  /* Nav gap — the enforced minimum clear space between link boxes */
  --nav-gap: 12px;
}

/* ── Base ──────────────────────────────────────────────────────── */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  background-color: var(--c-base) !important;
  color: var(--c-base-ink) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-width: 0;
}

/* ── Focus styles ──────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
}

/* ── Links ─────────────────────────────────────────────────────── */
a {
  color: inherit;
  text-decoration-color: var(--c-brand);
  text-underline-offset: 0.15em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--c-brand);
}

/* ══════════════════════════════════════════════════════════════════
   SITE HEADER
   ══════════════════════════════════════════════════════════════════ */
header.site {
  background-color: var(--c-raised) !important;
  color: var(--c-raised-ink) !important;
  border-bottom: 1px solid var(--c-line) !important;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

header.site .brand {
  font-family: var(--ff-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: 1.35rem !important;
  letter-spacing: var(--ls-display) !important;
  color: var(--c-deep) !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
}

header.site > div {
  max-width: var(--max-page) !important;
  margin-inline: auto !important;
  width: 100% !important;
  padding-inline: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding-block: 0.625rem !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

/* ── Nav ────────────────────────────────────────────────────────
   RULE: every link keeps at least 12px of clear space from neighbours
   at every width. The bar wraps when needed. At >=1024px it sits on
   one line if it fits; below 1024px it wraps or stacks freely. At
   <=479px the nav goes to a column stack.
   ────────────────────────────────────────────────────────────── */
header.site nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--nav-gap) !important;
  font-size: 0.8125rem !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

header.site nav a {
  color: var(--c-muted-on-base) !important;
  text-decoration: none !important;
  padding: 0.5rem 0.5rem !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap !important;
  font-size: 0.8125rem !important;
}

header.site nav a:hover,
header.site nav a[aria-current="page"] {
  color: var(--c-brand) !important;
  border-bottom-color: var(--c-brand) !important;
}

/* Account links — visually grouped at the right end */
header.site nav a[href*="login"],
header.site nav a[href*="signup"],
header.site nav a[href*="members"],
header.site nav a[href*="admin"] {
  font-size: 0.75rem !important;
  padding: 0.5rem 0.5rem !important;
  border-bottom: none !important;
  color: var(--c-brand) !important;
  font-weight: 600 !important;
}

/* At >=1024px: try one line, still keeping 12px gap */
@media (min-width: 64rem) {
  header.site > div {
    flex-wrap: nowrap !important;
  }

  header.site nav {
    flex-wrap: wrap !important;
    gap: var(--nav-gap) !important;
  }

  header.site nav a {
    padding: 0.5rem 0.35rem !important;
    font-size: 0.75rem !important;
  }

  header.site nav a[href*="login"],
  header.site nav a[href*="signup"],
  header.site nav a[href*="members"],
  header.site nav a[href*="admin"] {
    font-size: 0.6875rem !important;
    padding: 0.5rem 0.35rem !important;
  }

  /* Push the first account-style link to the right */
  header.site nav a[href*="login"]:first-of-type,
  header.site nav a[href*="members"] {
    margin-left: auto !important;
  }
  /* Prevent double margin-left on members if login is also present */
  header.site nav a[href*="login"] ~ a[href*="members"] {
    margin-left: 0 !important;
  }
}

/* Below 1024px: nav wraps freely, gap stays 12px */
@media (max-width: 63.99rem) {
  header.site > div {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  header.site nav {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: var(--nav-gap) !important;
  }

  header.site nav a {
    white-space: nowrap !important;
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.4rem !important;
  }

  header.site nav a[href*="login"],
  header.site nav a[href*="signup"],
  header.site nav a[href*="members"],
  header.site nav a[href*="admin"] {
    margin-left: 0 !important;
  }
}

/* Extra-small: column stack for the nav */
@media (max-width: 479px) {
  header.site nav {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  header.site nav a {
    width: 100% !important;
    padding: 0.5rem 0.25rem !important;
    font-size: 0.875rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SECTION FOUNDATIONS
   ══════════════════════════════════════════════════════════════════ */
main > section {
  position: relative;
}

/* Container inside every section */
main > section > div {
  max-width: var(--max-page) !important;
  margin-inline: auto !important;
  width: 100% !important;
  padding-inline: 1.5rem !important;
  min-width: 0 !important;
}

/* ── Ground colours (override utilities) ───────────────────── */
[data-ground="deep"] {
  background-color: var(--c-deep) !important;
  color: var(--c-deep-ink) !important;
}

[data-ground="base"] {
  background-color: var(--c-base) !important;
  color: var(--c-base-ink) !important;
}

[data-ground="raised"] {
  background-color: var(--c-raised) !important;
  color: var(--c-raised-ink) !important;
}

/* ── Section spacing ───────────────────────────────────────────── */
main > section {
  padding-block: var(--space-section) !important;
}

@media (min-width: 48rem) {
  main > section {
    padding-block: var(--space-section-lg) !important;
  }
}

/* ── Hairline separators between same-ground neighbours ──────── */
[data-ground="base"] + [data-ground="base"] {
  border-top: 1px solid var(--c-line);
}

[data-ground="deep"] + [data-ground="deep"] {
  border-top: 1px solid var(--c-line-deep);
}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--ff-display) !important;
  font-weight: var(--fw-display) !important;
  letter-spacing: var(--ls-display) !important;
  line-height: var(--lh-display) !important;
}

h1 {
  font-size: var(--fs-display) !important;
  max-width: 18ch;
}

h2 {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem) !important;
  max-width: 28ch;
}

h3 {
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
}

/* Eyebrow */
.eyebrow {
  font-family: var(--ff-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.75rem !important;
}

[data-ground="deep"] .eyebrow {
  color: var(--c-accent) !important;
}

[data-ground="base"] .eyebrow {
  color: var(--c-brand) !important;
}

/* Body text max-width */
.max-w-read,
p.max-w-read {
  max-width: var(--measure) !important;
}

/* Muted text – contrast-safe per ground */
[data-ground="deep"] .text-muted-invert,
[data-ground="deep"] .text-muted {
  color: var(--c-muted-on-deep) !important;
}

[data-ground="base"] .text-muted,
[data-ground="raised"] .text-muted {
  color: var(--c-muted-on-base) !important;
}

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */
[data-kind="hero"] {
  padding-block: calc(var(--space-section) * 1.5) !important;
}

@media (min-width: 48rem) {
  [data-kind="hero"] {
    padding-block: calc(var(--space-section-lg) * 1.4) !important;
  }
}

[data-kind="hero"] h1 {
  white-space: pre-line;
}

[data-kind="hero"] p:not(.eyebrow) {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  max-width: var(--measure);
}

/* Decorative left bar on hero */
[data-kind="hero"] > div {
  position: relative;
  padding-left: 2rem !important;
}

[data-kind="hero"] > div::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c-accent);
}

@media (max-width: 47.99rem) {
  [data-kind="hero"] > div {
    padding-left: 1.75rem !important;
  }
  [data-kind="hero"] > div::before {
    left: 1rem;
    width: 2px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PROOF (listings)
   ══════════════════════════════════════════════════════════════════ */
[data-kind="proof"] h2 {
  margin-bottom: 0.75rem;
}

/* Data-region states */
[data-region] .state {
  display: none;
}

[data-region] .state[data-active] {
  display: block;
}

/* Loading / error / empty / stale */
[data-region] .state[data-state="loading"] p,
[data-region] .state[data-state="empty"] p,
[data-region] .state[data-state="error"] p,
[data-region] .state[data-state="stale"] p {
  padding: 2rem 1.5rem;
  border-radius: var(--r-card);
  font-size: 0.9375rem;
}

[data-state="loading"] p {
  background-color: var(--c-sunken) !important;
  color: var(--c-sunken-ink) !important;
}

[data-state="empty"] p {
  background-color: var(--c-sunken) !important;
  color: var(--c-sunken-ink) !important;
}

[data-state="error"] p {
  background-color: #FDF2F2 !important;
  color: #9B2C2C !important;
}

[data-state="stale"] p {
  background-color: #FFFBEB !important;
  color: #92400E !important;
}

.detail {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  opacity: 0.85;
}

/* Grant listing cards (rendered into data-slot) */
[data-slot] {
  display: grid;
  gap: 1rem;
}

/* Individual grant row – ledger style */
[data-slot] > *:not(.digest-card):not(.digest-status):not(.member-card):not(.member-counts):not(.member-no-fits) {
  background-color: var(--c-raised) !important;
  color: var(--c-raised-ink) !important;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--c-brand);
  display: grid;
  gap: 0.375rem;
  transition: box-shadow 0.15s ease;
}

[data-slot] > *:not(.digest-card):not(.digest-status):not(.member-card):not(.member-counts):not(.member-no-fits):hover {
  box-shadow: var(--shadow-card-hover);
}

/* ── Digest status line ───────────────────────────────────────── */
.digest-status {
  font-family: var(--ff-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--c-muted-on-base) !important;
  background-color: var(--c-sunken) !important;
  padding: 0.75rem 1.5rem !important;
  border-left: 3px solid var(--c-accent) !important;
  letter-spacing: 0.02em;
  border-radius: var(--r-card) !important;
}

/* ── Digest cards — raised card design ────────────────────────── */
.digest-card {
  background-color: var(--c-raised) !important;
  color: var(--c-raised-ink) !important;
  padding: 1.25rem 1.5rem !important;
  border-left: 3px solid var(--c-brand) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card) !important;
  display: grid !important;
  gap: 0.375rem !important;
  transition: box-shadow 0.15s ease;
}

.digest-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
}

.digest-card h3 {
  font-family: var(--ff-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
  letter-spacing: var(--ls-display) !important;
  color: var(--c-raised-ink) !important;
}

.digest-card p.funder {
  font-family: var(--ff-body) !important;
  font-size: 0.9375rem !important;
  color: var(--c-muted-on-base) !important;
  line-height: 1.4 !important;
}

.digest-card p.verified {
  font-family: var(--ff-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #047857 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.digest-card p.verified::before {
  content: "✓";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 0.625rem;
  border-radius: 50%;
  background: #D1FAE5;
  color: #047857;
}

.digest-card a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0.625rem 1.25rem !important;
  background-color: var(--c-brand) !important;
  color: var(--c-brand-ink) !important;
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  border-radius: var(--r-card) !important;
  transition: background-color 0.15s ease;
  justify-self: start;
}

.digest-card a:hover {
  background-color: #005563 !important;
  color: var(--c-brand-ink) !important;
}

/* Verified badge styling (legacy selector) */
[data-slot] [data-verified],
[data-slot] .verified {
  font-family: var(--ff-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #047857 !important;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

[data-slot] [data-verified]::before,
[data-slot] .verified::before {
  content: "✓";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 0.625rem;
  border-radius: 50%;
  background: #D1FAE5;
  color: #047857;
}

/* ══════════════════════════════════════════════════════════════════
   SEGMENTS
   ══════════════════════════════════════════════════════════════════ */
.entry-segments {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 48rem) {
  .entry-segments {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.entry-segments article {
  background-color: var(--c-raised) !important;
  color: var(--c-raised-ink) !important;
  border-radius: var(--r-card) !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid var(--c-line) !important;
}

.entry-segments article h3 a {
  color: var(--c-brand) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15em !important;
}

.entry-segments article p {
  color: var(--c-muted-on-base) !important;
  font-size: 0.9375rem !important;
  margin-top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════════
   STEPS
   ══════════════════════════════════════════════════════════════════ */
[data-kind="steps"] ul {
  list-style: none !important;
  padding: 0 !important;
  display: grid !important;
  gap: 1.5rem !important;
}

@media (min-width: 48rem) {
  [data-kind="steps"] ul {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

[data-kind="steps"] li {
  background-color: var(--c-raised) !important;
  color: var(--c-raised-ink) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-card) !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
  position: relative;
  counter-increment: step-counter;
  padding-top: 2.75rem !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

[data-kind="steps"] li:hover {
  box-shadow: var(--shadow-card-hover) !important;
  transform: translateY(-2px);
}

[data-kind="steps"] li::before {
  content: counter(step-counter);
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-brand);
}

[data-kind="steps"] {
  counter-reset: step-counter;
}

[data-kind="steps"] li span {
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
  color: var(--c-base-ink) !important;
}

[data-kind="steps"] li p {
  font-size: 0.9375rem !important;
  color: var(--c-muted-on-base) !important;
  line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════════════════════
   BENEFITS
   ══════════════════════════════════════════════════════════════════ */
[data-kind="benefits"] {
  background-color: var(--c-deep) !important;
  color: var(--c-deep-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SPLIT
   ══════════════════════════════════════════════════════════════════ */
[data-kind="split"] .grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 48rem) {
  [data-kind="split"] .grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CTA
   ══════════════════════════════════════════════════════════════════ */
[data-kind="cta"] {
  text-align: left;
}

[data-kind="cta"] h2 {
  font-size: clamp(1.375rem, 2.5vw + 0.5rem, 2rem) !important;
}

a.cta,
button.cta,
[data-kind="cta"] a,
[data-kind="cta"] button,
[data-kind="pricing"] a.cta,
a[class*="bg-brand"],
button[class*="bg-brand"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--c-accent) !important;
  color: var(--c-accent-ink) !important;
  font-family: var(--ff-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.875rem 2rem !important;
  border-radius: var(--r-pill) !important;
  text-decoration: none !important;
  min-height: 44px !important;
  min-width: 44px !important;
  border: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 8px rgba(212,150,10,0.3);
  letter-spacing: 0.01em;
  margin-top: 1.5rem;
}

a.cta:hover,
button.cta:hover,
[data-kind="cta"] a:hover,
[data-kind="cta"] button:hover,
a[class*="bg-brand"]:hover,
button[class*="bg-brand"]:hover {
  background-color: #C08A09 !important;
  color: var(--c-accent-ink) !important;
  transform: translateY(-1px);
}

/* A plain text link inside a CTA block (the free sample's "What we keep") — the form pages' helper link, not a second
   call to action */
[data-kind="cta"] a.text-link,
[data-kind="cta"] a.text-link:hover {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0.5rem 0.25rem !important;
  margin: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--c-brand) !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  letter-spacing: normal;
  text-decoration: underline !important;
  text-underline-offset: 0.15em !important;
  transform: none;
}

a.cta:active,
button.cta:active,
[data-kind="cta"] a:active,
[data-kind="cta"] button:active,
a[class*="bg-brand"]:active,
button[class*="bg-brand"]:active {
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════════════════════════ */
[data-kind="pricing"] .block-entries {
  list-style: none !important;
  padding: 0 !important;
  display: grid !important;
  gap: 1.5rem !important;
  margin-top: 2rem !important;
}

@media (min-width: 48rem) {
  [data-kind="pricing"] .block-entries {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

[data-kind="pricing"] .block-entries > li {
  background-color: var(--c-raised) !important;
  color: var(--c-raised-ink) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-card) !important;
  padding: 1.5rem !important;
  box-shadow: var(--shadow-card) !important;
}

[data-kind="pricing"] .block-entries .entry-value {
  font-family: var(--ff-display) !important;
  font-size: 2rem !important;
  font-weight: var(--fw-display) !important;
  color: var(--c-brand) !important;
  display: block !important;
  margin-block: 0.5rem !important;
}

[data-kind="pricing"] .block-entries .entry-trial {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-brand);
  margin-bottom: 0.5rem;
}

/* Billing period switch (monthly / yearly) — a radio group drawn as one pill, in the family of the CTAs */
[data-kind="pricing"] .billing-period {
  border: 0;
  padding: 0;
  margin: 2rem 0 0;
  min-width: 0;
}

[data-kind="pricing"] .billing-period legend {
  font-weight: 600;
  color: var(--c-base-ink);
  margin-bottom: 0.5rem;
  padding: 0;
}

[data-kind="pricing"] .billing-period .billing-options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: var(--c-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  max-width: 100%;
}

[data-kind="pricing"] .billing-period label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

/* The radio covers its whole pill, so the tap target is the pill (44px tall), not a hidden dot */
[data-kind="pricing"] .billing-period input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

[data-kind="pricing"] .billing-period label span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: var(--r-pill);
  font-family: var(--ff-body);
  font-weight: 600;
  color: var(--c-raised-ink);
  transition: background-color 0.15s ease;
}

[data-kind="pricing"] .billing-period input:checked + span {
  background-color: var(--c-brand);
  color: var(--c-brand-ink);
}

[data-kind="pricing"] .billing-period input:focus-visible + span {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
}

[data-kind="pricing"] .block-entries .entry-meta {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

[data-kind="pricing"] .block-entries .entry-meta dt {
  font-weight: 600;
  color: var(--c-base-ink);
  display: inline;
}

[data-kind="pricing"] .block-entries .entry-meta dd {
  display: inline;
  margin-left: 0.25rem;
  margin-inline-start: 0.25rem;
  color: var(--c-muted-on-base);
}

[data-kind="pricing"] .block-entries .entry-meta dd::after {
  content: "";
  display: block;
}

/* ══════════════════════════════════════════════════════════════════
   COMPARISON TABLE
   ══════════════════════════════════════════════════════════════════ */
.entry-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

[data-kind="comparison"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

[data-kind="comparison"] th,
[data-kind="comparison"] td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--c-line);
}

[data-kind="comparison"] thead th {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-muted-on-base);
}

[data-kind="comparison"] tbody th {
  font-family: var(--ff-body);
  font-weight: 600;
  color: var(--c-base-ink);
}

[data-kind="comparison"] tr:last-child td,
[data-kind="comparison"] tr:last-child th {
  border-bottom: none;
}

/* ══════════════════════════════════════════════════════════════════
   PLEDGE
   ══════════════════════════════════════════════════════════════════ */
[data-kind="pledge"] > div {
  border-left: 3px solid var(--c-accent);
  padding-left: 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════
   TIMELINE
   ══════════════════════════════════════════════════════════════════ */
[data-kind="timeline"] ol,
[data-kind="timeline"] ul {
  list-style: none;
  padding-left: 2rem;
  position: relative;
  margin-top: 1.5rem;
}

[data-kind="timeline"] ol::before,
[data-kind="timeline"] ul::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-line-deep);
}

[data-kind="timeline"] li {
  position: relative;
  padding-bottom: 2rem;
}

[data-kind="timeline"] li::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.4rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-brand);
  border: 2px solid var(--c-deep-ink);
}

[data-kind="timeline"] .entry-value {
  font-family: var(--ff-display) !important;
  font-size: 1.125rem !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
}

[data-kind="timeline"] li p {
  font-size: 0.9375rem;
  color: var(--c-muted-on-deep);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════ */
[data-kind="faq"] .entry-faq {
  margin-top: 1.5rem;
}

[data-kind="faq"] details {
  border-bottom: 1px solid var(--c-line);
  padding: 1rem 0;
}

[data-kind="faq"] summary {
  cursor: pointer;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0;
}

[data-kind="faq"] summary::-webkit-details-marker {
  display: none;
}

[data-kind="faq"] summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--c-brand);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.2s ease;
}

[data-kind="faq"] details[open] summary::after {
  content: "−";
}

[data-kind="faq"] details p {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  max-width: var(--measure);
  color: var(--c-muted-on-base);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* FAQ on deep ground */
[data-ground="deep"][data-kind="faq"] details {
  border-bottom-color: var(--c-line-deep);
}

[data-ground="deep"][data-kind="faq"] summary::after {
  color: var(--c-accent);
}

[data-ground="deep"][data-kind="faq"] details p {
  color: var(--c-muted-on-deep);
}

/* ══════════════════════════════════════════════════════════════════
   PROSE
   ══════════════════════════════════════════════════════════════════ */
[data-kind="prose"] > div {
  max-width: var(--measure) !important;
}

[data-kind="prose"] p {
  margin-top: 1rem;
  line-height: 1.65;
}

[data-kind="prose"] ul,
[data-kind="prose"] ol {
  margin-top: 0.75rem;
  padding-left: 1.5rem;
}

[data-kind="prose"] li {
  margin-bottom: 0.375rem;
}

[data-kind="prose"] pre,
[data-kind="prose"] code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
}

[data-kind="prose"] pre {
  background-color: rgba(16,42,67,0.06);
  padding: 1.25rem;
  border-radius: var(--r-card);
  overflow-x: auto;
  margin-top: 1rem;
  line-height: 1.5;
}

[data-ground="deep"] [data-kind="prose"] pre,
[data-ground="deep"][data-kind="prose"] pre {
  background-color: rgba(247,243,235,0.08);
}

/* ══════════════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════════════ */
[data-kind="contact"] > div {
  max-width: var(--measure) !important;
}

[data-kind="contact"] a {
  color: var(--c-brand) !important;
  font-weight: 600;
}

[data-ground="deep"][data-kind="contact"] a {
  color: var(--c-accent) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER (block-level section)
   ══════════════════════════════════════════════════════════════════ */
[data-kind="footer"] {
  padding-block: calc(var(--space-section) * 0.75) !important;
}

[data-kind="footer"] h2 {
  font-size: 1.125rem !important;
  margin-bottom: 0.5rem;
}

/* Footer on deep ground */
[data-ground="deep"][data-kind="footer"] p {
  font-size: 0.875rem;
  color: var(--c-muted-on-deep) !important;
  max-width: var(--measure);
}

[data-ground="deep"][data-kind="footer"] ul {
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.375rem 1.5rem !important;
  margin-top: 1rem !important;
  font-size: 0.875rem;
}

[data-ground="deep"][data-kind="footer"] ul a {
  color: var(--c-muted-on-deep) !important;
  text-decoration: none !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

[data-ground="deep"][data-kind="footer"] ul a:hover {
  color: var(--c-deep-ink) !important;
}

/* Footer on BASE ground */
[data-ground="base"][data-kind="footer"] p {
  font-size: 0.875rem;
  color: var(--c-muted-on-base) !important;
  max-width: var(--measure);
}

[data-ground="base"][data-kind="footer"] ul {
  list-style: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.375rem 1.5rem !important;
  margin-top: 1rem !important;
  font-size: 0.875rem;
}

[data-ground="base"][data-kind="footer"] ul a {
  color: var(--c-muted-on-base) !important;
  text-decoration: none !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

[data-ground="base"][data-kind="footer"] ul a:hover {
  color: var(--c-brand) !important;
}

/* Hairline rule above footer block */
[data-kind="footer"]::before {
  content: "";
  display: block;
  width: calc(100% - 3rem);
  max-width: var(--max-page);
  height: 1px;
  background: var(--c-line-deep);
  margin: 0 auto 2rem;
}

[data-ground="base"][data-kind="footer"]::before {
  background: var(--c-line);
}

/* ══════════════════════════════════════════════════════════════════
   SITE FOOTER (the real <footer> at page bottom)
   ══════════════════════════════════════════════════════════════════ */
body > footer.site,
footer.site {
  background-color: #0B1D2E !important;
  color: var(--c-muted-on-deep) !important;
  font-size: 0.8125rem;
  padding-block: 2rem;
}

footer.site > div {
  max-width: var(--max-page) !important;
  margin-inline: auto !important;
  padding-inline: 1.5rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   BLOCK-ENTRIES (generic list used in footer, pricing, timeline)
   ══════════════════════════════════════════════════════════════════ */
.block-entries {
  list-style: none !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   UTILITY OVERRIDES (win the cascade against unlayered utilities)
   ══════════════════════════════════════════════════════════════════ */

/* Override bg-surface-deep that may carry different colour */
.bg-surface-deep {
  background-color: var(--c-deep) !important;
}

.bg-surface {
  background-color: var(--c-base) !important;
}

.bg-surface-raised {
  background-color: var(--c-raised) !important;
}

.bg-surface-deeper {
  background-color: #0B1D2E !important;
}

.text-ink {
  color: var(--c-base-ink) !important;
}

.text-ink-invert {
  color: var(--c-deep-ink) !important;
}

.text-muted-invert {
  color: var(--c-muted-on-deep) !important;
}

.border-line {
  border-color: var(--c-line) !important;
}

.shadow-card {
  box-shadow: var(--shadow-card) !important;
}

.rounded-card {
  border-radius: var(--r-card) !important;
}

.rounded-pill {
  border-radius: var(--r-pill) !important;
}

.bg-brand-600 {
  background-color: var(--c-accent) !important;
}

.bg-brand-700 {
  background-color: #C08A09 !important;
}

.text-surface-raised {
  color: var(--c-accent-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FONT SIZE UTILITY OVERRIDES
   ══════════════════════════════════════════════════════════════════ */
.text-4xl {
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem) !important;
}

.text-5xl {
  font-size: var(--fs-display) !important;
}

.text-2xl {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem) !important;
}

.text-lg {
  font-size: 1.125rem !important;
}

.text-sm {
  font-size: 0.875rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   SPACING & LAYOUT UTILITY OVERRIDES
   ══════════════════════════════════════════════════════════════════ */
.max-w-page {
  max-width: var(--max-page) !important;
}

.max-w-read {
  max-width: var(--measure) !important;
}

.px-6 {
  padding-inline: 1.5rem !important;
}

.py-4 {
  padding-block: 0.875rem !important;
}

.py-16 {
  padding-block: var(--space-section) !important;
}

@media (min-width: 48rem) {
  .md\:py-24 {
    padding-block: var(--space-section-lg) !important;
  }
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mt-5 {
  margin-top: 1.25rem !important;
}

.mt-6 {
  margin-top: 1.5rem !important;
}

.mt-8 {
  margin-top: 2rem !important;
}

.p-6 {
  padding: 1.5rem !important;
}

.gap-6 {
  gap: 1.5rem !important;
}

.gap-8 {
  gap: 2rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   FONT WEIGHT UTILITY OVERRIDES
   ══════════════════════════════════════════════════════════════════ */
.font-extrabold {
  font-weight: var(--fw-display) !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.tracking-tight {
  letter-spacing: var(--ls-display) !important;
}

/* ══════════════════════════════════════════════════════════════════
   MEMBERSHIP FORMS (signup, login, admin/login)
   ══════════════════════════════════════════════════════════════════ */
form {
  font-family: var(--ff-body);
}

form label {
  display: block !important;
  font-family: var(--ff-body) !important;
  color: inherit !important;
}

form label .text-sm {
  font-family: var(--ff-body) !important;
  color: inherit !important;
}

form input[type="email"],
form input[type="password"],
form input[type="text"],
form input[type="search"],
form input[type="tel"],
form input[type="url"],
form textarea,
form select {
  display: block !important;
  width: 100% !important;
  min-height: 44px !important;
  font-family: var(--ff-body) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  padding: 0.625rem 0.875rem !important;
  background-color: var(--c-raised) !important;
  color: var(--c-base-ink) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-card) !important;
  margin-top: 0.375rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="text"]:focus,
form input[type="search"]:focus,
form input[type="tel"]:focus,
form input[type="url"]:focus,
form textarea:focus,
form select:focus {
  border-color: var(--c-brand) !important;
  box-shadow: 0 0 0 3px rgba(0,103,120,0.15) !important;
  outline: none !important;
}

form input::placeholder {
  color: var(--c-muted-on-base) !important;
  opacity: 0.7;
}

form button[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  font-family: var(--ff-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  background-color: var(--c-accent) !important;
  color: var(--c-accent-ink) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  padding: 0.875rem 2rem !important;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 8px rgba(212,150,10,0.3);
  letter-spacing: 0.01em;
}

form button[type="submit"]:hover {
  background-color: #C08A09 !important;
  color: var(--c-accent-ink) !important;
  transform: translateY(-1px);
}

form button[type="submit"]:active {
  transform: translateY(0);
}

/* Alert region in forms */
form [role="alert"],
[data-kind="cta"] [role="alert"] {
  font-family: var(--ff-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: #9B2C2C !important;
  background-color: transparent !important;
  min-height: 0 !important;
  padding: 0.25rem 0 !important;
}

/* When alert has content, give it a visible background */
form [role="alert"]:not(:empty) {
  background-color: #FDF2F2 !important;
  color: #9B2C2C !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--r-card) !important;
  margin-top: 0.75rem !important;
}

/* Override .text-red-600 utility for alert readability */
.text-red-600 {
  color: #9B2C2C !important;
}

/* Form helper link paragraphs */
section[data-kind="form"] > div > p {
  font-family: var(--ff-body) !important;
  font-size: 0.875rem !important;
  color: var(--c-muted-on-base) !important;
  line-height: 1.5 !important;
  margin-top: 1.5rem !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

section[data-kind="form"] > div > p a {
  color: var(--c-brand) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15em !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0.5rem 0.25rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   MEMBER WORKSPACE (members/)
   ══════════════════════════════════════════════════════════════════ */

/* Member proposals — .member-card as raised card */
.member-card {
  background-color: var(--c-raised) !important;
  color: var(--c-raised-ink) !important;
  padding: 1.25rem 1.5rem !important;
  border-left: 3px solid var(--c-brand) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card) !important;
  display: grid !important;
  gap: 0.375rem !important;
  margin-top: 0.75rem !important;
  transition: box-shadow 0.15s ease;
}

.member-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
}

.member-card h3 {
  font-family: var(--ff-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
  letter-spacing: var(--ls-display) !important;
  color: var(--c-raised-ink) !important;
}

.member-card .agency {
  font-family: var(--ff-body) !important;
  font-size: 0.9375rem !important;
  color: var(--c-muted-on-base) !important;
  line-height: 1.4 !important;
}

.member-card .deadline {
  font-family: var(--ff-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--c-accent) !important;
}

.member-card a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0.625rem 1.25rem !important;
  background-color: var(--c-brand) !important;
  color: var(--c-brand-ink) !important;
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  border-radius: var(--r-card) !important;
  transition: background-color 0.15s ease;
  justify-self: start;
  margin-top: 0.25rem;
}

.member-card a:hover {
  background-color: #005563 !important;
  color: var(--c-brand-ink) !important;
}

/* Prepare application button — same family as other controls */
.member-card button[data-action="prepare_application"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0.625rem 1.25rem !important;
  background-color: var(--c-sunken) !important;
  color: var(--c-base-ink) !important;
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  border-radius: var(--r-card) !important;
  border: 1px solid var(--c-line) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  justify-self: start;
  margin-top: 0.25rem;
}

.member-card button[data-action="prepare_application"]:hover {
  background-color: var(--c-brand) !important;
  color: var(--c-brand-ink) !important;
  border-color: var(--c-brand) !important;
}

.member-counts {
  font-family: var(--ff-body) !important;
  font-size: 0.875rem !important;
  color: var(--c-muted-on-base) !important;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
}

/* No-fit region */
.member-no-fits {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}

.member-no-fits h4 {
  font-family: var(--ff-display) !important;
  font-weight: var(--fw-display) !important;
  font-size: 1.125rem !important;
  line-height: 1.2 !important;
  letter-spacing: var(--ls-display) !important;
  color: var(--c-base-ink) !important;
  margin-bottom: 0.75rem;
}

.no-fit-item {
  background-color: var(--c-sunken) !important;
  color: var(--c-sunken-ink) !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--r-card) !important;
  margin-bottom: 0.5rem;
  border-left: 3px solid var(--c-line);
}

.no-fit-item .no-fit-title {
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  color: var(--c-base-ink) !important;
}

.no-fit-item .no-fit-reason {
  font-family: var(--ff-body) !important;
  font-size: 0.8125rem !important;
  color: var(--c-muted-on-base) !important;
  margin-top: 0.25rem;
}

/* Logout button (members/, admin/) */
button[data-action="logout"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  background-color: transparent !important;
  color: var(--c-base-ink) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-pill) !important;
  padding: 0.5rem 1.5rem !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

button[data-action="logout"]:hover {
  background-color: var(--c-sunken) !important;
  border-color: var(--c-muted-on-base) !important;
}

/* ══════════════════════════════════════════════════════════════════
   APPLICATION WORKSPACE (member_application slot)
   ══════════════════════════════════════════════════════════════════ */

/* Application workspace heading info (grant number + title, readiness) */
[data-region="member_application"] .app-grant-number,
[data-region="member_application"] .app-grant-title {
  font-family: var(--ff-display) !important;
  font-weight: var(--fw-display) !important;
  letter-spacing: var(--ls-display) !important;
}

[data-region="member_application"] .app-readiness {
  font-family: var(--ff-body) !important;
  font-size: 0.875rem !important;
  color: var(--c-muted-on-base) !important;
  margin-top: 0.5rem;
}

/* Requirement cards — same family as proposal/member cards */
[data-region="member_application"] .requirement-card {
  background-color: var(--c-raised) !important;
  color: var(--c-raised-ink) !important;
  padding: 1.25rem 1.5rem !important;
  border-left: 3px solid var(--c-brand) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card) !important;
  margin-top: 0.75rem !important;
  transition: box-shadow 0.15s ease;
}

[data-region="member_application"] .requirement-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
}

/* Requirement state text */
[data-region="member_application"] .requirement-state {
  font-family: var(--ff-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--c-brand) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

/* Member's answers list */
[data-region="member_application"] .requirement-answers {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: 0.5rem;
  font-family: var(--ff-body) !important;
  font-size: 0.9375rem !important;
  color: var(--c-base-ink) !important;
  line-height: 1.55;
}

[data-region="member_application"] .requirement-answers li {
  margin-bottom: 0.25rem;
}

/* Open questions */
[data-region="member_application"] .requirement-questions {
  font-family: var(--ff-body) !important;
  font-size: 0.875rem !important;
  color: var(--c-muted-on-base) !important;
  margin-top: 0.5rem;
}

/* Funder passage — long quoted source text, distinct from member answers */
[data-region="member_application"] .requirement-passage {
  font-family: var(--ff-display) !important;
  font-size: 0.9375rem !important;
  font-style: italic !important;
  line-height: 1.6 !important;
  color: var(--c-muted-on-base) !important;
  background-color: var(--c-sunken) !important;
  padding: 1rem 1.25rem !important;
  border-left: 3px solid var(--c-accent) !important;
  border-radius: var(--r-card) !important;
  margin-top: 0.75rem !important;
  max-width: var(--measure);
}

/* Announcement link — must not collide with passage, sits below it clearly */
[data-region="member_application"] .requirement-passage + a,
[data-region="member_application"] .requirement-announcement-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0.5rem 1rem !important;
  font-family: var(--ff-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--c-brand) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15em !important;
  margin-top: 0.75rem !important;
}

[data-region="member_application"] .requirement-passage + a:hover,
[data-region="member_application"] .requirement-announcement-link:hover {
  color: #005563 !important;
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN TABLE (admin/)
   ══════════════════════════════════════════════════════════════════ */
#members-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#members-table table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--ff-body) !important;
  font-size: 0.875rem !important;
}

#members-table thead th {
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--c-muted-on-base) !important;
  text-align: left !important;
  padding: 0.75rem 1rem 0.75rem 0 !important;
  border-bottom: 2px solid var(--c-line) !important;
}

#members-table tbody td {
  font-family: var(--ff-body) !important;
  font-size: 0.875rem !important;
  color: var(--c-base-ink) !important;
  padding: 0.625rem 1rem 0.625rem 0 !important;
  border-bottom: 1px solid var(--c-line) !important;
}

#members-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE — OVERFLOW FIX
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 47.99rem) {
  h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
  }

  [data-kind="steps"] ul {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure nothing overflows at 390px */
@media (max-width: 390px) {
  body {
    overflow-x: hidden;
  }

  .px-6 {
    padding-inline: 1rem !important;
  }

  main > section > div {
    padding-inline: 1rem !important;
  }

  header.site > div {
    padding-inline: 1rem !important;
  }

  [data-kind="hero"] > div {
    padding-left: 1.25rem !important;
  }

  [data-kind="hero"] > div::before {
    left: 0.5rem;
  }

  pre {
    max-width: calc(100vw - 2rem);
  }

  svg {
    max-width: 100%;
    height: auto;
  }

  /* Ensure table scrolls within container */
  #members-table table {
    min-width: 20rem;
  }

  /* Tighten cards padding at small viewport */
  .digest-card,
  .member-card {
    padding: 1rem !important;
  }

  .member-card a,
  .digest-card a {
    padding: 0.5rem 1rem !important;
    font-size: 0.8125rem !important;
  }

  /* Tighten requirement passage at small viewport */
  [data-region="member_application"] .requirement-passage {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }
}

/* Global max-width on all box-level elements to prevent overflow */
main,
main > section,
header.site,
footer.site {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Tap-target minimum — only set min-height; width is handled by layout */
a,
button,
summary,
[role="button"],
input,
select,
textarea {
  min-height: 44px;
}

/* Explicit min-width only for interactive controls that aren't full-width */
button,
[role="button"],
summary {
  min-width: 44px;
}

nav a {
  display: inline-flex;
  align-items: center;
}

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

/* ══════════════════════════════════════════════════════════════════
   PRINT (lightweight)
   ══════════════════════════════════════════════════════════════════ */
@media print {
  header.site,
  footer.site {
    display: none;
  }

  [data-ground="deep"] {
    background-color: #fff !important;
    color: #000 !important;
  }

  body {
    font-size: 12pt !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SELECTION
   ══════════════════════════════════════════════════════════════════ */
::selection {
  background-color: rgba(0,103,120,0.2);
  color: var(--c-base-ink);
}

[data-ground="deep"] ::selection {
  background-color: rgba(212,150,10,0.3);
  color: var(--c-deep-ink);
}

/* ══════════════════════════════════════════════════════════════════
   DECORATIVE LEDGER RHYTHM — alternating hairlines
   ══════════════════════════════════════════════════════════════════ */
main > section + section {
  position: relative;
}

/* Thin accent stroke at deep→base boundary */
[data-ground="deep"] + [data-ground="base"]::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(to right, var(--c-brand), var(--c-accent));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* ══════════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
   ══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--c-base);
}

::-webkit-scrollbar-thumb {
  background: var(--c-sunken);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #B8C7D4;
}

/* ══════════════════════════════════════════════════════════════════
   W-FULL UTILITY
   ══════════════════════════════════════════════════════════════════ */
.w-full {
  width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════
   BLOCK UTILITY (display)
   ══════════════════════════════════════════════════════════════════ */
.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.flex {
  display: flex !important;
}

.grid {
  display: grid !important;
}

.items-center {
  align-items: center !important;
}

@media (min-width: 48rem) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .md\:items-center {
    align-items: center !important;
  }
}

.list-none {
  list-style: none !important;
}

.p-0 {
  padding: 0 !important;
}

.mx-auto {
  margin-inline: auto !important;
}

.sticky {
  position: sticky !important;
}

.top-0 {
  top: 0 !important;
}

.z-10 {
  z-index: 10 !important;
}

.border-b {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.rounded {
  border-radius: var(--r-card) !important;
}

.border {
  border-width: 1px !important;
  border-style: solid !important;
}

.px-3 {
  padding-inline: 0.75rem !important;
}

.py-2 {
  padding-block: 0.5rem !important;
}

.py-3 {
  padding-block: 0.75rem !important;
}

.py-1 {
  padding-block: 0.25rem !important;
}

.pr-4 {
  padding-right: 1rem !important;
}

.py-10 {
  padding-block: 2.5rem !important;
}

.text-left {
  text-align: left !important;
}

.hover\:bg-brand-700:hover {
  background-color: #C08A09 !important;
}