:root {
  /* Ink-framed palette — single source of truth, matched to the member dashboard.
     Promoted 2026-08-09: deep ink + ember orange + warm cream/sand neutrals so
     every page (home → membership → verify → contact → forms) pulls one palette.
     Deeper --ink also raises body-text contrast on cream (better a11y). */
  --cream: #FBF4E8;          /* warm page background; light text on ink bands */
  --cream-2: #EBE4D6;        /* sand — secondary neutral, alt bands, card edges */
  --sand: #EBE4D6;           /* alias for readability in newer rules */
  --ink: #0A1A2B;            /* deep ink — structure, headings, dark bands (design-guidelines token) */
  --ink-panel: #0D2135;      /* lifted ink for nested panels/cards on dark (design-guidelines token) */
  --muted: oklch(0.42 0.02 250);
  --line: oklch(0.86 0.02 85);   /* hairline on cream */
  --line-ink: rgba(233,160,107,.22); /* hairline on ink bands */
  --ember: #DA4E1B;          /* brand orange — buttons, accents, eyebrows (design-guidelines token) */
  --ember-soft: #F0764A;     /* ember, small text on ink — contrast-corrected (design-guidelines "ember light") */
  --ember-ink: #96330F;      /* ember, small text on kraft — contrast-corrected (design-guidelines "ember dark") */
  --ember-deep: #B8431C;     /* ember, buttons on kraft (design-guidelines token; not yet referenced anywhere) */
  --white: oklch(0.99 0.01 85);
  --display: "Archivo", Georgia, serif;
  --body: "Public Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Vertical rhythm between stacked full-bleed sections. Each section applies this top
     AND bottom, so the gap between two blocks is twice this value — keep that in mind
     when tuning. History: clamp(84px,10vw,132px) doubled to 168–264px (dead space);
     clamp(56px,6vw,92px) was still loose where sparse cream bands met. */
  --section-pad-y: clamp(44px, 4.5vw, 72px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.02;
}

em {
  font-style: italic;
  font-weight: 380;
}

.eyebrow {
  margin: 0;
  color: var(--ember-ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 18px clamp(20px, 4vw, 56px);
  background: #ebe4d6;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  backdrop-filter: blur(16px);
}

.journal-page .site-header {
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
}

.brand-logo {
  display: block;
  width: 76px !important;
  height: 66px !important;
  max-width: 76px !important;
  max-height: 66px !important;
  flex: 0 0 76px;
  object-fit: contain;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--ember) 86%, black), var(--ink));
  color: var(--cream);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.brand strong {
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 0.9;
}

.brand small {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(14px, 2.4vw, 34px);
  font-size: 0.94rem;
  font-weight: 650;
}

.nav a:hover,
.nav a.is-active,
.text-link:hover,
.journal-head a:hover,
.signin-link:hover {
  color: var(--ember);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 16px;
}

.signin-link {
  min-width: max-content;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  padding-bottom: 5px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.apply-button,
.accent-button,
.dark-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 2px;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.apply-button,
.dark-button {
  background: var(--ink);
  color: var(--cream);
}

.accent-button {
  background: var(--ember-ink);
  color: var(--cream);
}

.hero {
  position: relative;
  overflow: hidden;
  min-height: min(820px, calc(100vh - 96px));
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  background: var(--ink);
  color: var(--cream);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(11 18 30 / 0.78) 0%, rgb(11 18 30 / 0.52) 42%, rgb(11 18 30 / 0.05) 74%, rgb(11 18 30 / 0.12) 100%),
    linear-gradient(180deg, rgb(11 18 30 / 0.08), rgb(11 18 30 / 0.34)),
    url("hero/txfva-front-hero.webp") center / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 74%, rgb(11 18 30 / 0.42));
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 56px;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(92px, 12vw, 150px) 24px 84px;
}

.hero-copy {
  max-width: 780px;
}

.hero h1 {
  margin-top: 22px;
  font-size: clamp(4.6rem, 9vw, 8rem);
  line-height: 0.9;
  text-shadow: 0 4px 24px rgb(0 0 0 / 0.22);
}

.lede {
  max-width: 620px;
  margin: 30px 0 0;
  color: color-mix(in oklab, var(--cream) 82%, transparent);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 350;
  line-height: 1.55;
}

.founding {
  display: grid;
  justify-items: start;
  align-content: center;
  min-width: 300px;
  padding-top: 26px;
}

/* The founding charter: one cohesive credential object, not a floating card + orphan
   button. Deliberately square-cornered and dark-frosted so it does NOT echo the hero's
   rounded forms, with an ember spine and a live status dot. */
.charter {
  position: relative;
  display: grid;
  gap: 13px;
  width: min(100%, 320px);
  padding: 26px 26px 24px;
  background: color-mix(in oklab, var(--ink) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--cream) 16%, transparent);
  box-shadow: 0 34px 76px -34px rgb(0 0 0 / 0.78);
  backdrop-filter: blur(12px);
  color: var(--cream);
}

.charter::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--ember);
}

.charter-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ember) 88%, white);
}

.charter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
}

@media (prefers-reduced-motion: no-preference) {
  .charter-dot {
    animation: charter-pulse 2.6s ease-out infinite;
  }
}

@keyframes charter-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ember) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.charter-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.95rem;
  font-weight: 820;
  line-height: 1;
}

.charter-note {
  margin: 0;
  max-width: 30ch;
  color: color-mix(in oklab, var(--cream) 70%, transparent);
  font-size: 0.88rem;
  line-height: 1.5;
}

.charter-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding: 13px 18px;
  background: var(--ember);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.25s ease, transform 0.25s ease;
}

.charter-cta span {
  font-size: 1.05rem;
  transition: transform 0.25s ease;
}

.charter-cta:hover {
  background: color-mix(in oklab, var(--ember) 86%, black);
}

.charter-cta:hover span {
  transform: translateX(3px);
}

.index-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  border-top: 1px solid color-mix(in oklab, var(--cream) 22%, transparent);
  background: rgb(11 18 30 / 0.28);
  backdrop-filter: blur(10px);
}

.index-rail a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  align-items: baseline;
  padding: 26px 24px 28px 0;
  border-right: 1px solid color-mix(in oklab, var(--cream) 16%, transparent);
}

.index-rail a:last-child {
  border-right: 0;
}

.index-rail span {
  grid-row: span 2;
  color: var(--ember);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.index-rail strong {
  font-family: var(--display);
  font-size: 1.18rem;
}

.index-rail small {
  color: color-mix(in oklab, var(--cream) 66%, transparent);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.benefits,
.program {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--section-pad-y) 24px;
}

.section-head {
  max-width: 680px;
  margin-bottom: 56px;
}

.section-head h2,
.journal-head h2,
.verify h2,
.program h2 {
  margin-top: 12px;
  font-size: clamp(2.7rem, 5vw, 4.5rem);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  border-left: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}

.benefit-grid article {
  min-height: 280px;
  padding: 38px;
  border-right: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  transition: background 160ms ease;
}

.benefit-grid article:hover {
  background: color-mix(in oklab, var(--ink) 5%, transparent);
}

.benefit-grid h3 {
  margin-top: 28px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.benefit-grid article > p:last-child {
  margin: 18px 0 0;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.65;
}

.journal {
  padding: var(--section-pad-y) 24px;
  background: var(--cream-2);
  border-block: 1px solid var(--line);
}

.journal-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.journal-head a {
  color: var(--ember);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
}

.article-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(11 18 30 / 0.72), rgb(224 79 26 / 0.45)),
    radial-gradient(circle at 72% 34%, rgb(255 245 230 / 0.5), transparent 24%),
    linear-gradient(45deg, #1b2027, #b64a1e);
}

.article-image-two {
  background:
    linear-gradient(135deg, rgb(11 18 30 / 0.7), rgb(224 79 26 / 0.35)),
    radial-gradient(circle at 24% 70%, rgb(255 245 230 / 0.48), transparent 28%),
    linear-gradient(45deg, #293140, #8e3215);
}

.article-image-three {
  background:
    linear-gradient(135deg, rgb(11 18 30 / 0.74), rgb(224 79 26 / 0.38)),
    radial-gradient(circle at 55% 50%, rgb(255 245 230 / 0.48), transparent 26%),
    linear-gradient(45deg, #161b22, #be5a2a);
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(11 18 30 / 0.36), rgb(11 18 30 / 0.08) 44%, rgb(11 18 30 / 0.45));
}

.article-image span {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  padding: 6px 8px;
  background: rgb(11 18 30 / 0.62);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.article-grid article > p:first-of-type {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-grid strong {
  color: var(--ember);
}

.article-grid h3 {
  margin-top: 12px;
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
}

.article-grid article > p:last-child {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

.verify {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(42px, 7vw, 86px);
  align-items: center;
  padding: var(--section-pad-y) max(24px, calc((100vw - 1280px) / 2 + 24px));
  /* A lifted navy gradient, NOT flat --ink. The page has three dark moments — hero,
     this band, and the footer — and when all three were the same flat near-black they
     read as a repeating stripe, and this one felt "too dark". Lightening it and giving
     it depth makes it its own verification moment and lets the footer stay the single
     deepest anchor at the bottom. */
  background: linear-gradient(155deg, oklch(0.29 0.05 255) 0%, oklch(0.22 0.038 250) 56%, oklch(0.2 0.032 250) 100%);
  color: var(--cream);
}

.verify .eyebrow {
  color: color-mix(in oklab, var(--ember) 92%, white);
}

.verify h2 {
  max-width: 790px;
}

.verify p:not(.eyebrow) {
  max-width: 720px;
  color: color-mix(in oklab, var(--cream) 72%, transparent);
  font-size: 1.12rem;
  line-height: 1.7;
}

.verify-card-front {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 330px;
  width: min(100%, 330px);
  margin: auto;
  padding: 30px;
  border: 1px solid color-mix(in oklab, var(--cream) 18%, transparent);
  background:
    linear-gradient(145deg, color-mix(in oklab, var(--ember) 28%, var(--ink)), var(--ink) 64%),
    var(--ink);
  box-shadow: 0 28px 80px -38px rgb(0 0 0 / 0.85);
}

.verify-card-front::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid color-mix(in oklab, var(--cream) 16%, transparent);
  pointer-events: none;
}

.verify-card-front strong {
  position: relative;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4.15rem);
  line-height: 0.9;
}

.verify-qr {
  position: absolute;
  top: 30px;
  right: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 78px;
  aspect-ratio: 1;
  padding: 7px;
  background:
    linear-gradient(90deg, transparent 42%, color-mix(in oklab, var(--ink) 86%, black) 42% 53%, transparent 53%),
    linear-gradient(0deg, transparent 42%, color-mix(in oklab, var(--ink) 86%, black) 42% 53%, transparent 53%),
    var(--cream);
  box-shadow: 0 16px 34px -24px rgb(0 0 0 / 0.88);
}

.verify-qr::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 11px;
  width: 28px;
  aspect-ratio: 1;
  background:
    linear-gradient(90deg, var(--ink) 0 22%, transparent 22% 39%, var(--ink) 39% 56%, transparent 56% 74%, var(--ink) 74%),
    linear-gradient(0deg, transparent 0 18%, var(--ink) 18% 36%, transparent 36% 52%, var(--ink) 52% 70%, transparent 70%);
  opacity: 0.92;
}

.verify-qr i {
  position: relative;
  display: block;
  border: 4px solid var(--ink);
  background: var(--cream);
}

.verify-qr i::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--ink);
}

.verify-qr i:nth-child(2) {
  grid-column: 3;
}

.verify-qr i:nth-child(3) {
  grid-row: 3;
}

.verify-label,
.verify-status {
  position: relative;
  color: color-mix(in oklab, var(--cream) 72%, transparent);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.verify-status {
  color: color-mix(in oklab, var(--ember) 82%, white);
}

.verify-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 900px;
  margin-top: 34px;
  background: color-mix(in oklab, var(--cream) 16%, transparent);
}

.verify-points article {
  min-height: 190px;
  padding: 24px;
  background: color-mix(in oklab, var(--ink) 90%, black);
}

.verify-points span {
  color: var(--ember);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 800;
}

.verify-points strong {
  display: block;
  margin-top: 18px;
  font-family: var(--display);
  font-size: 1.45rem;
}

.verify-points p {
  margin: 12px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-top: 32px;
}

.text-link {
  border-bottom: 1px solid var(--ember-ink);
  padding-bottom: 5px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.packet-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(42px, 7vw, 88px);
  align-items: center;
  padding: var(--section-pad-y) max(24px, calc((100vw - 1280px) / 2 + 24px));
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.packet-copy h2 {
  max-width: 780px;
  margin-top: 14px;
  font-size: clamp(2.7rem, 5vw, 4.5rem);
}

.packet-copy > p:not(.eyebrow) {
  max-width: 720px;
  color: color-mix(in oklab, var(--ink) 74%, transparent);
  font-size: 1.14rem;
  line-height: 1.72;
}

.packet-panel {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--white) 78%, transparent), color-mix(in oklab, var(--cream-2) 82%, transparent));
  padding: clamp(24px, 4vw, 36px);
}

.packet-form-preview {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.packet-form-preview div {
  min-height: 156px;
  padding: 26px;
  background: color-mix(in oklab, var(--white) 72%, transparent);
}

.packet-form-preview span {
  color: var(--ember);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 800;
}

.packet-form-preview strong {
  display: block;
  margin-top: 18px;
  font-family: var(--display);
  font-size: 1.65rem;
  line-height: 1.05;
}

.packet-form-preview p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.58;
}

.program {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(54px, 8vw, 110px);
  /* Center the short title column against the taller steps list so the band doesn't
     read as a title stranded at the top of a mostly-empty block (matches .packet-feature). */
  align-items: center;
}

.program > div > p:last-child {
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.7;
}

.program ol {
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.program li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 32px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.program li:last-child {
  border-bottom: 0;
}

.program li span {
  grid-row: span 2;
  color: var(--ember);
  font-family: var(--mono);
  font-size: 0.86rem;
}

.program li strong {
  font-family: var(--display);
  font-size: 1.35rem;
}

.program li p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.footer {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  column-gap: clamp(40px, 6vw, 72px);
  row-gap: clamp(16px, 2.2vw, 20px);
  align-items: start;
  padding: 36px max(24px, calc((100vw - 1280px) / 2 + 24px)) 28px;
  background: var(--ink);
  color: var(--cream);
  border-top: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
}

.footer-logo {
  display: block;
  width: 80px;
  height: auto;
}

.footer h2 {
  margin-top: 10px;
  max-width: 520px;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
}

.footer p,
.footer-links {
  color: color-mix(in oklab, var(--cream) 72%, transparent);
  line-height: 1.8;
}

.footer-brand p {
  max-width: 520px;
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.55;
}

.footer-links {
  display: grid;
  /* auto-fit so link groups flow: 4 across on desktop, 2x2 on phones, never a
     single-file tower. Each group holds a 130px min and wraps when there's no room. */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 24px 28px;
}

.footer-links div {
  display: grid;
  align-content: start;
  gap: 8px;
}

.footer-links strong {
  margin-bottom: 8px;
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer a:hover {
  color: var(--ember);
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-top: clamp(10px, 2vw, 14px);
  padding-top: 20px;
  border-top: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  color: color-mix(in oklab, var(--cream) 60%, transparent);
  font-size: 0.82rem;
}

.footer-tagline {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ember) 88%, white);
}

/* Plugin-injected social block: span full width and collapse into a single
   inline line ("Follow TXFVA" + icons) instead of a stacked extra row.
   ID selector beats the plugin's own #txfva-footer-social styles. */
.footer #txfva-footer-social {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: clamp(6px, 1.5vw, 10px);
}

.footer #txfva-footer-social .txfva-footer-social__label {
  margin: 0;
}

.footer #txfva-footer-social .txfva-footer-social__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   Motion — progressive enhancement only. Every rule here is gated on
   html.anim, which assets/site.js adds ONLY when prefers-reduced-motion
   is not set. With no JS or reduced motion, none of this applies and the
   page renders in its natural, fully visible state.
   ============================================================ */

/* Hero plays on load: eyebrow, headline, lede, seal rise in sequence. */
.anim .hero .eyebrow,
.anim .hero h1,
.anim .hero .lede,
.anim .hero .founding {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.75s ease,
    transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.anim .hero h1 { transition-delay: 0.08s; }
.anim .hero .lede { transition-delay: 0.18s; }
.anim .hero .founding { transition-delay: 0.28s; }

.anim.is-loaded .hero .eyebrow,
.anim.is-loaded .hero h1,
.anim.is-loaded .hero .lede,
.anim.is-loaded .hero .founding {
  opacity: 1;
  transform: none;
}

/* The index rail settles in last, cascading across its four entries. */
.anim .index-rail a {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.anim .index-rail a:nth-child(1) { transition-delay: 0.36s; }
.anim .index-rail a:nth-child(2) { transition-delay: 0.44s; }
.anim .index-rail a:nth-child(3) { transition-delay: 0.52s; }
.anim .index-rail a:nth-child(4) { transition-delay: 0.6s; }

.anim.is-loaded .index-rail a {
  opacity: 1;
  transform: none;
}

/* Failsafe: the head script adds .motion-failsafe if assets/site.js never signalled
   ready (blocked, errored, slow). Force every animatable element visible so nothing can
   ever stay hidden — the reveal is an enhancement, visibility is guaranteed. */
.anim.motion-failsafe .hero .eyebrow,
.anim.motion-failsafe .hero h1,
.anim.motion-failsafe .hero .lede,
.anim.motion-failsafe .hero .founding,
.anim.motion-failsafe .index-rail a {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(44px, 7vw, 88px);
  align-items: end;
  padding: clamp(76px, 10vw, 122px) max(24px, calc((100vw - 1280px) / 2 + 24px));
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  background:
    radial-gradient(1000px 520px at 86% 10%, color-mix(in oklab, var(--ember) 36%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in oklab, var(--ember) 12%, var(--cream)) 0%, var(--cream) 78%);
}

.page-hero h1 {
  max-width: 980px;
  margin-top: 18px;
  font-size: clamp(3.4rem, 7vw, 7rem);
  line-height: 0.94;
}

/* The global .lede is cream (for the dark home hero); on the LIGHT page-hero band it
   washed out to invisible. Give the page-hero its own readable ink lede. */
.page-hero .lede {
  color: color-mix(in oklab, var(--ink) 66%, transparent);
}

/* Journal index: single-column hero (no right-hand panel) so we can drop the meaningless
   "Posts / journal archive" stat box that was leaking dev chrome to visitors. */
.blog .page-hero,
.journal-page .page-hero {
  grid-template-columns: 1fr;
}

.verify-hero {
  position: relative;
  overflow: hidden;
  min-height: min(720px, calc(100vh - 96px));
  color: var(--cream);
  background: var(--ink);
}

.verify-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.verify-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(11 18 30 / 0.82) 0%, rgb(11 18 30 / 0.54) 48%, rgb(11 18 30 / 0.18) 100%),
    linear-gradient(180deg, rgb(11 18 30 / 0.08), rgb(11 18 30 / 0.58));
}

.verify-hero > div {
  position: relative;
  z-index: 1;
}

.verify-hero h1 {
  color: var(--cream);
  text-shadow: 0 4px 26px rgb(0 0 0 / 0.34);
}

.verify-hero .lede {
  color: color-mix(in oklab, var(--cream) 82%, transparent);
}

.verify-hero .hero-stat-panel {
  background: rgb(11 18 30 / 0.26);
  border-color: color-mix(in oklab, var(--cream) 24%, transparent);
  backdrop-filter: blur(8px);
}

.verify-hero .hero-stat-panel div {
  border-color: color-mix(in oklab, var(--cream) 20%, transparent);
}

.verify-hero .hero-stat-panel span {
  color: color-mix(in oklab, var(--cream) 66%, transparent);
}

.directory-hero {
  position: relative;
  overflow: hidden;
  min-height: min(720px, calc(100vh - 96px));
  color: var(--cream);
  background: var(--ink);
}

.directory-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.directory-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(11 18 30 / 0.82) 0%, rgb(11 18 30 / 0.48) 45%, rgb(11 18 30 / 0.12) 100%),
    linear-gradient(180deg, rgb(11 18 30 / 0.06), rgb(11 18 30 / 0.5));
}

.directory-hero > div {
  position: relative;
  z-index: 1;
}

.directory-hero h1 {
  color: var(--cream);
  text-shadow: 0 4px 26px rgb(0 0 0 / 0.34);
}

.directory-hero .lede {
  color: color-mix(in oklab, var(--cream) 82%, transparent);
}

.directory-hero .hero-stat-panel {
  background: rgb(11 18 30 / 0.24);
  border-color: color-mix(in oklab, var(--cream) 24%, transparent);
  backdrop-filter: blur(8px);
}

.directory-hero .hero-stat-panel div {
  border-color: color-mix(in oklab, var(--cream) 20%, transparent);
}

.directory-hero .hero-stat-panel span {
  color: color-mix(in oklab, var(--cream) 66%, transparent);
}

.image-page-hero {
  position: relative;
  display: grid;
  min-height: min(720px, calc(100vh - 96px));
  align-items: end;
  overflow: hidden;
  padding: clamp(92px, 12vw, 150px) max(24px, calc((100vw - 1280px) / 2 + 24px)) clamp(72px, 9vw, 118px);
  color: var(--cream);
  background: var(--ink);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}

.image-page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(11 18 30 / 0.86) 0%, rgb(11 18 30 / 0.58) 48%, rgb(11 18 30 / 0.2) 100%),
    linear-gradient(180deg, rgb(11 18 30 / 0.18), rgb(11 18 30 / 0.76));
}

.image-page-hero > div {
  position: relative;
  z-index: 1;
  max-width: 980px;
}

.image-page-hero h1 {
  max-width: 1050px;
  margin-top: 18px;
  font-size: clamp(3.2rem, 7vw, 7.2rem);
  line-height: 0.94;
}

.about-page .image-page-hero::after {
  background:
    linear-gradient(90deg, rgb(11 18 30 / 0.64) 0%, rgb(11 18 30 / 0.38) 48%, rgb(11 18 30 / 0.08) 100%),
    linear-gradient(180deg, rgb(11 18 30 / 0.04), rgb(11 18 30 / 0.48));
}

.about-page .image-page-hero h1,
.about-page .image-page-hero .lede {
  text-shadow: 0 4px 24px rgb(0 0 0 / 0.32);
}

/* A clean single-column price ladder (price left, label right) — the old 2-column grid
   left an awkward empty cell whenever the item count was odd. */
.hero-stat-panel {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
}

.hero-stat-panel div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}

.hero-stat-panel div:last-child {
  border-bottom: 0;
}

.hero-stat-panel strong {
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
}

.hero-stat-panel span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
}

.journal-hero {
  position: relative;
  overflow: hidden;
  min-height: min(720px, calc(100vh - 96px));
  align-items: center;
  padding-block: clamp(64px, 7vw, 88px);
  background: var(--ink);
  color: var(--cream);
}

.journal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(11 18 30 / 0.9) 0%, rgb(11 18 30 / 0.74) 42%, rgb(11 18 30 / 0.48) 100%),
    url("journal/txfva-brand-loyalty.png") center / cover no-repeat;
  opacity: 0.98;
}

.journal-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(180deg, transparent, rgb(11 18 30 / 0.7));
  pointer-events: none;
}

.journal-hero > * {
  position: relative;
  z-index: 1;
}

.journal-hero h1 {
  color: var(--cream);
  font-size: clamp(3.65rem, 6.5vw, 5.9rem);
  text-shadow: 0 5px 30px rgb(0 0 0 / 0.34);
}

.journal-hero .lede {
  color: color-mix(in oklab, var(--cream) 80%, transparent);
}

.journal-feature-card {
  display: grid;
  align-content: end;
  min-height: 0;
  border: 1px solid color-mix(in oklab, var(--cream) 20%, transparent);
  background: color-mix(in oklab, var(--ink) 82%, black);
  color: var(--cream);
  box-shadow: 0 34px 90px -54px rgb(0 0 0 / 0.96);
}

.journal-feature-card img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-bottom: 1px solid color-mix(in oklab, var(--cream) 18%, transparent);
}

.journal-feature-card div {
  padding: clamp(22px, 3vw, 30px);
}

.journal-feature-card h2 {
  margin-top: 12px;
  font-size: clamp(1.85rem, 2.7vw, 2.6rem);
}

.journal-feature-card p:not(.eyebrow) {
  color: color-mix(in oklab, var(--cream) 72%, transparent);
  line-height: 1.62;
}

.journal-feature-card span {
  display: inline-block;
  margin-top: 14px;
  border-bottom: 1px solid var(--ember);
  padding-bottom: 5px;
  color: color-mix(in oklab, var(--ember) 92%, white);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.journal-shell {
  background: var(--cream);
}

.journal-index-head {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 0.55fr);
  gap: 34px;
  align-items: end;
  margin-bottom: 48px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.journal-index-head h2 {
  max-width: 760px;
  margin-top: 12px;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
}

.journal-topic-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px;
}

.journal-topic-row span {
  border: 1px solid color-mix(in oklab, var(--ink) 15%, transparent);
  padding: 9px 11px;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(70px, 9vw, 112px) 24px;
}

.notice-band,
.filter-strip,
.placeholder-screen,
.result-card {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--white) 64%, transparent);
}

.notice-band {
  display: grid;
  grid-template-columns: minmax(220px, 0.4fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  margin-bottom: 42px;
  padding: 34px;
}

/* Founding offer, elevated to a dark, gold-accented callout that ties to the numbered
   Founding Member badge and the first-25-per-class scarcity. Scoped to .founding-band so
   the shared .notice-band base (pricing / contact pages) is untouched. */
.founding-band {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(170px, 0.3fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  margin-bottom: clamp(44px, 5vw, 68px);
  padding: clamp(34px, 4vw, 54px);
  background: var(--ink);
  color: var(--cream);
}

.founding-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ember), #e6b155);
}

.founding-band__aside {
  display: grid;
  gap: 14px;
  align-content: start;
}

.founding-band__star {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  color: #e6b155;
}

.founding-band .eyebrow {
  color: color-mix(in oklab, var(--ember) 88%, white);
}

.founding-band h2 {
  max-width: 24ch;
  color: var(--cream);
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.06;
}

.founding-band__body {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.founding-band__body p {
  margin: 0;
  max-width: 60ch;
  color: color-mix(in oklab, var(--cream) 74%, transparent);
  line-height: 1.6;
}

.notice-band h2,
.split-panel h2,
.content-band h2,
.placeholder-screen h2,
.form-card h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.pricing-grid,
.principle-grid,
.directory-grid,
.directory-hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.price-card,
.principle-grid article,
.directory-card,
.directory-hub a,
.form-card {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--white) 72%, transparent);
}

.price-card {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 34px;
  transition:
    transform 0.3s ease,
    box-shadow 0.35s ease,
    border-color 0.3s ease;
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px -30px rgb(11 18 30 / 0.4);
}

/* The recommended tier (Verified = the plan the founding invite converts to) is promoted
   so it reads as the default choice on this conversion page. */
.price-card--featured {
  position: relative;
  border: 2px solid var(--ember);
  background: color-mix(in oklab, var(--white) 92%, transparent);
  box-shadow: 0 34px 70px -34px color-mix(in oklab, var(--ember) 60%, rgb(11 18 30 / 0.5));
}

.price-card__ribbon {
  position: absolute;
  top: -15px;
  left: 28px;
  margin: 0;
  padding: 7px 15px;
  background: var(--ember);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.price-card h3,
.directory-card h3,
.principle-grid h3,
.article-card h3 {
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
}

.price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-line strong {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.95;
}

.price-line span,
.directory-card strong,
.filter-strip span {
  color: var(--muted);
}

.price-card p,
.principle-grid p,
.directory-card p,
.form-card p,
.result-card p,
.placeholder-screen p {
  color: color-mix(in oklab, var(--ink) 72%, transparent);
  line-height: 1.65;
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 22px;
  color: color-mix(in oklab, var(--ink) 78%, transparent);
  line-height: 1.5;
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--ember);
}

.content-band,
.split-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(38px, 6vw, 72px);
  align-items: start;
  margin-top: 74px;
  padding-top: 54px;
  border-top: 1px solid var(--line);
}

.steps-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.steps-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.steps-list span {
  grid-row: span 2;
  color: var(--ember);
  font-family: var(--mono);
  font-weight: 700;
}

.steps-list strong {
  font-family: var(--display);
  font-size: 1.35rem;
}

.steps-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.prose {
  color: color-mix(in oklab, var(--ink) 74%, transparent);
  font-size: 1.08rem;
  line-height: 1.78;
}

.prose p {
  margin: 0 0 1.1em;
}

.principle-grid {
  margin-top: 34px;
}

.principle-grid article,
.directory-card {
  padding: 30px;
}

.compact-cta {
  margin-top: 74px;
  padding: 0;
  border-top: 0;
  background: transparent;
}

.compact-cta > div {
  background: var(--cream-2);
}

.directory-hub {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.directory-hub a {
  display: grid;
  align-content: start;
  min-height: 260px;
  padding: 28px;
  transition: background 160ms ease, transform 160ms ease;
}

.directory-hub a:hover {
  background: color-mix(in oklab, var(--ember) 9%, var(--white));
  transform: translateY(-2px);
}

.directory-hub span {
  color: var(--ember);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.directory-hub strong {
  margin-top: 18px;
  font-family: var(--display);
  font-size: 1.8rem;
  line-height: 1.05;
}

.directory-hub p {
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.filter-strip {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  padding: 22px 26px;
}

.directory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.directory-card {
  display: grid;
  gap: 14px;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-list span {
  border: 1px solid color-mix(in oklab, var(--ink) 15%, transparent);
  padding: 7px 10px;
  color: color-mix(in oklab, var(--ink) 72%, transparent);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px);
}

/* Vertical article cards (image on top), matching the home journal section — replaces the
   old single-column image-left rows that left oceans of whitespace. */
.article-card {
  display: flex;
  flex-direction: column;
}

.article-card__image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgb(11 18 30 / 0.7), rgb(224 79 26 / 0.4)),
    linear-gradient(45deg, #1b2027, #b64a1e);
}

.article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.article-card:hover .article-card__image img {
  transform: scale(1.045);
}

.article-card > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-card h3 {
  margin: 6px 0 0;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.12;
}

.article-card p:last-child {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.62;
}

.article-card a:hover {
  color: var(--ember);
}

.article-page {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(70px, 9vw, 112px) 24px;
}

.article-page-image {
  margin-bottom: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.article-page-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
}

.form-card,
.result-card,
.placeholder-screen {
  padding: 34px;
}

.verify-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
  gap: 32px;
  align-items: end;
}

.result-card {
  margin-top: 24px;
  border-left: 6px solid #17803d;
}

.form-card label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.form-card input,
.form-card textarea {
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  min-height: 48px;
  padding: 12px 14px;
}

.form-card textarea {
  resize: vertical;
}

.inline-form {
  display: flex;
  gap: 10px;
}

.wide-form {
  display: grid;
  gap: 24px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.choice-grid label {
  position: relative;
  display: block;
}

.choice-grid input {
  position: absolute;
  opacity: 0;
}

.choice-grid span {
  display: grid;
  min-height: 64px;
  place-items: center;
  border: 1px solid var(--line);
  padding: 12px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 800;
}

.choice-grid input:checked + span {
  border-color: var(--ember);
  background: color-mix(in oklab, var(--ember) 12%, var(--white));
}

.placeholder-screen {
  max-width: 780px;
}

.dashboard-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-card {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 310px;
  padding: 34px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--white) 72%, transparent);
}

.dashboard-card-wide {
  grid-column: 1 / -1;
  min-height: 0;
}

.dashboard-card h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.dashboard-card h3 {
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
}

.dashboard-card p {
  max-width: 820px;
  margin: 0;
  color: color-mix(in oklab, var(--ink) 72%, transparent);
  line-height: 1.65;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.metric-row div {
  min-height: 104px;
  padding: 18px;
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  background: color-mix(in oklab, var(--cream) 76%, white);
}

.metric-row strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1;
}

.metric-row span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.benefit-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: color-mix(in oklab, var(--ink) 78%, transparent);
  line-height: 1.5;
}

.member-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.member-sidebar,
.workspace-card,
.status-strip {
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--white) 74%, transparent);
}

.member-sidebar {
  position: sticky;
  top: 126px;
  align-self: start;
  display: grid;
  gap: 10px;
  padding: 22px;
}

.member-sidebar > strong {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.05;
}

.member-sidebar > span {
  color: color-mix(in oklab, var(--ink) 62%, transparent);
  font-size: 0.9rem;
}

.member-sidebar nav {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.member-sidebar a {
  padding: 11px 12px;
  border: 1px solid transparent;
  color: color-mix(in oklab, var(--ink) 72%, transparent);
  font-size: 0.86rem;
  font-weight: 800;
}

.member-sidebar a.is-active,
.member-sidebar a:hover {
  border-color: color-mix(in oklab, var(--ember) 28%, transparent);
  background: color-mix(in oklab, var(--ember) 10%, var(--white));
  color: var(--ink);
}

.member-main {
  display: grid;
  gap: 22px;
}

.member-topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0 4px;
}

.member-topbar h1 {
  max-width: 820px;
  font-size: clamp(2.25rem, 5vw, 5rem);
  line-height: 0.95;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.status-strip div {
  min-height: 106px;
  padding: 20px;
  border-right: 1px solid var(--line);
}

.status-strip div:last-child {
  border-right: 0;
}

.status-strip strong,
.code-pill {
  display: block;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.status-strip span {
  display: block;
  margin-top: 8px;
  color: color-mix(in oklab, var(--ink) 58%, transparent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.workspace-card {
  display: grid;
  gap: 16px;
  align-content: start;
  min-height: 240px;
  padding: 28px;
}

.workspace-card-large {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.6fr);
  align-items: start;
}

.workspace-card h2 {
  max-width: 760px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.98;
}

.workspace-card h3 {
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
}

.workspace-card p {
  max-width: 760px;
  margin: 0;
  color: color-mix(in oklab, var(--ink) 68%, transparent);
  line-height: 1.58;
}

.checklist-preview {
  display: grid;
  gap: 10px;
}

.checklist-preview span,
.code-pill {
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  background: color-mix(in oklab, var(--cream) 58%, white);
  padding: 12px 14px;
}

.checklist-preview span {
  font-size: 0.82rem;
  font-weight: 800;
}

@media (max-width: 980px) {
  .site-header {
    position: static;
    grid-template-columns: 1fr auto;
  }

  .nav {
    grid-column: 1 / -1;
    justify-content: start;
    flex-wrap: wrap;
  }

  .hero-inner,
  .verify,
  .packet-feature,
  .program,
  .footer,
  .page-hero,
  .journal-index-head,
  .notice-band,
  .content-band,
  .split-panel,
  .contact-grid,
  .verify-card {
    grid-template-columns: 1fr;
  }

  .hero-inner {
    display: grid;
  }

  .hero,
  .image-page-hero,
  .journal-hero {
    min-height: 680px;
  }

  .journal-feature-card {
    min-height: 0;
  }

  .journal-topic-row {
    justify-content: start;
  }

  .founding {
    justify-items: start;
  }

  .index-rail,
  .benefit-grid,
  .article-grid,
  .pricing-grid,
  .principle-grid,
  .directory-hub,
  .directory-grid,
  .verify-points,
  .dashboard-preview {
    grid-template-columns: 1fr 1fr;
  }

  .member-workspace {
    grid-template-columns: 1fr;
    padding-top: 28px;
  }

  .member-sidebar {
    position: static;
  }

  .member-sidebar nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-strip div:nth-child(2) {
    border-right: 0;
  }

  .status-strip div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .workspace-card-large {
    grid-template-columns: 1fr;
  }

  .article-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 14px 18px;
  }

  .brand-mark {
    width: 48px;
    height: 48px;
  }

  .brand-logo {
    width: 62px;
    height: 54px;
  }

  .brand strong {
    font-size: 1.45rem;
  }

  .apply-button {
    padding-inline: 16px;
  }

  .header-actions {
    grid-column: 1 / -1;
    justify-content: start;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 15vw, 4.7rem);
  }

  .hero,
  .image-page-hero,
  .journal-hero {
    min-height: 620px;
  }

  .image-page-hero h1 {
    font-size: clamp(2.8rem, 13vw, 4.5rem);
  }

  .index-rail,
  .benefit-grid,
  .article-grid,
  .pricing-grid,
  .principle-grid,
  .directory-hub,
  .directory-grid,
  .verify-points,
  .hero-stat-panel,
  .field-grid,
  .choice-grid,
  .dashboard-preview,
  .metric-row {
    grid-template-columns: 1fr;
  }

  .member-workspace {
    padding-inline: 16px;
  }

  .member-sidebar nav,
  .status-strip,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .member-topbar {
    display: grid;
    align-items: start;
  }

  .member-topbar h1 {
    font-size: clamp(2.4rem, 13vw, 4rem);
  }

  .status-strip div,
  .status-strip div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .status-strip div:last-child {
    border-bottom: 0;
  }

  .workspace-card {
    min-height: 0;
    padding: 22px;
  }

  .verify-card-front {
    min-height: 250px;
    margin-inline: 0;
  }

  .verify-points article {
    min-height: 0;
  }

  .footer-logo {
    width: 92px;
  }

  .page-hero h1 {
    font-size: clamp(3rem, 16vw, 4.8rem);
  }

  .journal-feature-card div {
    padding: 24px;
  }

  .inline-form,
  .filter-strip {
    display: grid;
  }

  .index-rail a {
    border-right: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  }

  .journal-head {
    display: grid;
    align-items: start;
  }

  .benefit-grid article {
    min-height: 0;
    padding: 30px;
  }

  .verify,
  .benefits,
  .program,
  .journal {
    padding-block: 72px;
  }
}

/* ============================================================
   Membership class tabs (Food Vendors / Suppliers / Planners / Venues).
   Driven by the plugin's tabset JS (data-txfva-tab / data-txfva-panel).
   ============================================================ */
.membership-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  margin-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}

.membership-tab {
  appearance: none;
  margin: 0 0 -1px;
  padding: 13px 22px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: color-mix(in oklab, var(--ink) 52%, transparent);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.membership-tab:hover {
  color: var(--ink);
}

.membership-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ember);
}

.membership-tab:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.membership-panel[hidden] {
  display: none !important;
}

/* Two-tier partner classes: keep cards a comfortable width rather than stretching to
   the full three-column track. */
.pricing-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 840px;
}