/*
 * Beta Cell Foundation — site system, 2026 rebuild.
 *
 * Every page is a chapter of a field manual. The signature is the margin
 * label column: each section's mono label sits beside its content on wide
 * screens and stacks above it on narrow ones. That single block does the
 * wayfinding, so sections need no boxes to be told apart, and the manual's
 * wide margin supplies the page's air instead of empty padding.
 *
 * Palette, faces, and logos are pinned by BCF-Brand-Guide-2026. The one
 * deviation: --text-dim ships at #7f92ad rather than the guide's #5A6F8A,
 * which measures 3.2:1 and fails the guide's own stated AA floor.
 */

/* ── TOKENS ────────────────────────────────────────────────────────────── */
:root {
  /* Brand palette — BCF Brand Guide 2026 */
  --bg:          #0a0e14;
  --surface:     #111620;
  --surface2:    #181f2e;
  --border:      #1e2a3a;
  --accent:      #1CCDFE;
  --accent2:     #0096ff;
  --accent-glow: rgba(28,205,254,0.10);
  --accent-ring: rgba(28,205,254,0.22);
  --cta:         #FFD53F;
  --cta-text:    #1a1a1a;
  --text:        #ffffff;
  --text-muted:  #8ca0bc;   /* 6.2:1 — primary reading colour */
  --text-dim:    #7f92ad;   /* 5.2:1 — labels; see header note */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Spacing — 4px base, named for the relationship each interval expresses.
     The ordering is the point: binding is always tighter than separation. */
  --space-bind:    16px;  /* heading → the content it introduces */
  --space-item:    20px;  /* siblings inside one group */
  --space-group:   48px;  /* group → the next group */
  --space-section: 64px;  /* section's own padding; 128px between two sections */
  --space-band:    88px;  /* a tonal band needs more air than a plain section */
  --space-chapter: 96px;  /* page intro → body; the largest change in meaning */

  /* Measures */
  --shell:  1120px;  /* outer page width */
  --prose:  660px;   /* ~68 characters — reading measure */
  --label:  148px;   /* margin label column */
  --gutter: 56px;    /* label → content */
}

@media (max-width: 900px) {
  :root {
    --space-group:   36px;
    --space-section: 44px;
    --space-band:    56px;
    --space-chapter: 64px;
  }
}

/* ── RESET & BASE ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* clears the sticky header on anchor jumps */
}

body {
  background: var(--bg);
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
strong { color: var(--text); font-weight: 600; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--accent);
  color: var(--bg);
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── TYPE ──────────────────────────────────────────────────────────────── */
/* Syne carries the page title. From H2 down it sits at reading sizes where its
   width slows the eye, so headings below the title use the body face. */
h1, .display { font-family: 'Syne', sans-serif; color: var(--text); }
h2, h3, h4 { font-family: 'DM Sans', sans-serif; color: var(--text); }

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

.t-page {                                  /* page title */
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.t-section {                               /* section heading */
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.t-block {                                 /* sub-heading inside a section */
  font-family: 'DM Sans', sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}
.t-card {
  font-family: 'DM Sans', sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

/* DM Mono labels metadata only — never sentences. */
.label {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  line-height: 1.4;
}
.label-dim { color: var(--text-dim); }

.lead {
  font-size: clamp(19px, 2.1vw, 22px);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: var(--prose);
  text-wrap: pretty;
}

.prose { max-width: var(--prose); }
.prose > * + * { margin-top: var(--space-bind); }
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { text-decoration-thickness: 2px; }

/* ── SHELL ─────────────────────────────────────────────────────────────── */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 32px;
}
@media (max-width: 600px) { .shell { padding-inline: 20px; } }

/* ── HEADER ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10,14,20,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.site-header-in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (max-width: 600px) { .site-header-in { padding: 0 20px; } }

.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 36px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--surface); }
.nav a[aria-current="page"] { color: var(--accent); }

/* Same object as .btn-primary — it was inheriting the nav's muted link colour
   and losing its background on hover. */
.btn-support {
  background: var(--cta);
  color: var(--cta-text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  margin-left: 8px;
  white-space: nowrap;
  transition: background .15s;
}
.nav a.btn-support,
.nav-mobile a.btn-support {
  color: var(--cta-text);
  font-weight: 600;
  font-size: 16px;
}
.nav a.btn-support:hover,
.nav-mobile a.btn-support:hover,
.btn-support:hover { background: #ffe066; color: var(--cta-text); }
.nav a.btn-support[aria-current="page"] { color: var(--cta-text); }

.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;   /* touch floor */
  padding: 8px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The full nav plus the Support pill needs ~900px before it would clip. */
@media (max-width: 940px) {
  .nav { display: none; }
  .hamburger { display: flex; }
}

.nav-mobile {
  position: fixed;
  inset: 68px 0 0 0;
  z-index: 199;
  background: rgba(10,14,20,0.985);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: none;
  flex-direction: column;
  padding: 24px 20px;
  gap: 2px;
  overflow-y: auto;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-size: 19px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 14px 12px;
  border-radius: var(--radius-sm);
}
.nav-mobile a:hover { color: var(--text); background: var(--surface); }
.nav-mobile a[aria-current="page"] { color: var(--accent); }
.nav-mobile .btn-support {
  margin: 16px 0 0;
  text-align: center;
  padding: 14px 18px;
  font-size: 17px;
}

/* ── PAGE INTRO ────────────────────────────────────────────────────────
   Every page opens identically: mono eyebrow, title, one subhead. */
.page-intro {
  padding-top: clamp(56px, 8vw, 88px);
  padding-bottom: var(--space-chapter);
}
.page-intro > .shell { position: relative; z-index: 1; }
.page-intro .label { margin-bottom: 18px; }
.page-intro .t-page { margin-bottom: 24px; max-width: 16ch; }
/* The split column is ~530px wide, where the full 54px display face fits only
   nine characters per line. The title steps down and the text column takes more
   of the row, so the hook reads in three lines instead of five. */
.intro-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.intro-split .t-page { font-size: clamp(32px, 3.7vw, 45px); max-width: none; }
.page-intro .t-page.wide { max-width: 22ch; }
.page-intro .lead { margin-bottom: 0; }
.page-intro .actions { margin-top: 36px; }

/* ── SECTION + MARGIN LABEL ────────────────────────────────────────────
   The system's signature. The label rides in the margin on wide screens
   and stacks above the content on narrow ones — one block, both layouts. */
.section { padding-block: var(--space-section); }

.section-in {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}
@media (max-width: 900px) {
  .section-in { grid-template-columns: 1fr; gap: var(--space-bind); }
}

.section-label { position: sticky; top: 96px; }
@media (max-width: 900px) { .section-label { position: static; } }

.section-body > * + * { margin-top: var(--space-bind); }
.section-body > .t-section + * { margin-top: 20px; }
.section-body > * + .t-block { margin-top: var(--space-group); }

/* Tonal ground — separates sections without a rule or a box. */
.band { background: var(--surface); padding-block: var(--space-band); }
.band-2 { background: var(--surface2); padding-block: var(--space-band); }

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;   /* a <button>.btn would inherit the UA buttonface */
  line-height: 1.2;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--cta); color: var(--cta-text); }
.btn-primary:hover { background: #ffe066; }
.btn-outline { border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent-ring); background: var(--accent-glow); }
.btn-ghost {
  background: var(--accent-glow);
  border-color: var(--accent-ring);
  color: var(--accent);
}
.btn-ghost:hover { background: rgba(28,205,254,0.16); }

/* Inline forward link — the manual's "see also". */
.go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-weight: 500;
  font-size: 17px;
}
.go::after { content: '→'; transition: transform .15s; }
.go:hover::after { transform: translateX(3px); }

/* ── STEP LIST ─────────────────────────────────────────────────────────
   Numbered sequence. Carries the build-instruction grammar: the number
   leads, the rule threads the steps together, nothing is boxed. */
.steps { list-style: none; counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 62px;
  padding-bottom: var(--space-group);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: -2px;
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .04em;
}
/* The thread. Stops at the last step rather than trailing into nothing. */
.steps > li::after {
  content: '';
  position: absolute;
  left: 15px; top: 26px; bottom: 8px;
  width: 1px;
  background: var(--border);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps .t-block { margin-bottom: 8px; }
@media (max-width: 600px) {
  .steps > li { padding-left: 44px; }
  .steps > li::after { left: 10px; }
}

/* ── CARDS ─────────────────────────────────────────────────────────────
   One card. Used for programs and simulators alike so the anatomy is
   learned once. Tracks follow the item count instead of a fixed grid. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--space-item);
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* One card keeps a card's width instead of stretching across the row. */
.grid:has(> :only-child) { grid-template-columns: minmax(268px, 420px); }
@media (min-width: 780px) {
  .grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color .15s, transform .15s;
}
.band .card, .band-2 .card { background: var(--bg); }
/* Only a card you can actually activate gets the affordance. */
a.card:hover, .card:has(a):hover {
  border-color: var(--accent-ring);
  transform: translateY(-2px);
}
.card .label { margin-bottom: 2px; }
.card p { font-size: 17px; line-height: 1.6; }
.card .go { margin-top: auto; padding-top: 10px; font-size: 16px; }

/* ── CALLOUT ───────────────────────────────────────────────────────────── */
.callout {
  padding: 20px 24px;
  border-left: 1px solid var(--accent);
  background: var(--accent-glow);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 17px;
  max-width: var(--prose);
}
.callout-cta { border-left-color: var(--cta); background: rgba(255,213,63,0.08); }
.callout .label { margin-bottom: 6px; }

/* ── FACTS ─────────────────────────────────────────────────────────────── */
.facts { display: flex; flex-wrap: wrap; gap: var(--space-group) 56px; }
.fact { min-width: 150px; }
.fact-n {
  font-family: 'Syne', sans-serif;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.fact-l { margin-top: 6px; font-size: 16px; color: var(--text-muted); max-width: 26ch; }

/* ── SIMULATOR FRAME ───────────────────────────────────────────────────
   The embed is the content; it gets no decorative shell. Space is
   reserved until the frame reports its height (see site.js). */
.sim-frame {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-height: 900px;
  display: block;
}
@media (max-width: 700px) { .sim-frame { min-height: 1150px; } }

/* ── FORM ──────────────────────────────────────────────────────────────── */
.form { max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 16px; font-weight: 600; color: var(--text); }
.field .hint { font-size: 15px; color: var(--text-dim); }
.field input, .field textarea, .field select {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  min-height: 48px;
  width: 100%;
  transition: border-color .15s;
}
.band .field input, .band .field textarea, .band .field select { background: var(--bg); }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 64px 32px;
}
.footer-in {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 32px;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 900px) { .footer-in { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }
@media (max-width: 600px) { .footer-in { padding-inline: 20px; } }

/* The wordmark spans the description column beneath it. */
.footer-brand img { width: 100%; max-width: 240px; height: auto; margin-bottom: 16px; }
.footer-mission { font-size: 15px; color: var(--text-dim); max-width: 240px; line-height: 1.6; }
.footer-col-t {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
/* Padding not margin — 44px rows at the same visual density. */
.footer-col a {
  display: block;
  font-size: 16px;
  color: var(--text-muted);
  padding: 9px 0;
  transition: color .15s;
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  max-width: var(--shell);
  margin: 40px auto 0;
  padding: 24px 32px 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 15px;
  color: var(--text-dim);
}
@media (max-width: 600px) { .footer-bottom { padding-inline: 20px; } }
.footer-bottom a:hover { color: var(--accent); }
.footer-legal { display: flex; gap: 20px; }

/* ── PLATE ─────────────────────────────────────────────────────────────
   A captioned figure, the manual's plate. Source photography maxes out at
   600x400, so plates are sized to what the file can carry rather than
   stretched full-bleed, where the upscale would show. */
.plate { margin: 0; }
.plate img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.plate figcaption {
  margin-top: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Hero with a plate alongside. Text leads; the plate never outranks it. */
.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .intro-split { grid-template-columns: 1fr; gap: 40px; }
  .intro-split .plate { order: 2; }
}

/* A row of plates — program pages. */
.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-item);
}

/* ── EMBED ─────────────────────────────────────────────────────────────
   Third-party forms (Zeffy) sit in their own frame and are given room
   rather than restyled; their internals aren't ours to change. */
.embed { width: 100%; border: 0; display: block; border-radius: var(--radius-lg); }

/* ── PAGE-INTRO TEXTURE ────────────────────────────────────────────────
   Each page carries its own quiet background motion, at the opacity,
   speed, and direction the previous site used. All of it is decorative and
   pointer-inert; the reduced-motion block above stops every animation. */
.page-intro { position: relative; overflow: hidden; }
.page-intro > * { position: relative; z-index: 1; }

.hero-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* Ambient wash, present on every page intro. */
.page-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(28,205,254,.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(255,213,63,.05) 0%, transparent 70%);
}

/* Simulators — sine waves on canvas (see site.js). */
.hero-wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Type One Run — the world map scrolling sideways. */
.hero-map {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  animation: map-scroll 140s linear infinite;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 50%, transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 95%);
}
.hero-map-img {
  flex-shrink: 0;
  height: 100%;
  width: auto;
  opacity: 0.04;
  filter: brightness(0) invert(1);
}
@keyframes map-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* T1Ds in the Wild — a grid drifting downward. */
.hero-grid-bg {
  position: absolute;
  inset: -60px 0 0 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(28,205,254,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,205,254,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 0%, transparent 80%);
  animation: grid-scroll 8s linear infinite;
}
@keyframes grid-scroll { from { transform: translateY(0); } to { transform: translateY(60px); } }

/* Education — a dot field breathing. */
.hero-dots { position: absolute; inset: 0; pointer-events: none; }
.hero-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(28,205,254,0.14) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 75%);
  animation: dots-pulse 4s ease-in-out infinite, dots-drift 24s linear infinite;
}
@keyframes dots-pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes dots-drift { from { background-position: 0 0; } to { background-position: 24px 24px; } }

/* ── PLATE CROP ────────────────────────────────────────────────────────
   A row of plates holds one crop so the row reads as a set, not as a
   collection of differently-shaped photographs. */
.plates .plate img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ── RESOURCE LIST ─────────────────────────────────────────────────────
   Downloads and linked documents. Same anatomy as .card, laid out as rows. */
.resources { display: grid; gap: var(--space-item); grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

/* ── PROGRAM LOCKUP ────────────────────────────────────────────────────
   A program page leads with its own mark above the BCF page title. */
/* Beside the title on wide screens, above it when the split collapses.
   The mark column is sized to the mark itself: a 1fr column left the logo
   centred in 460px of track, so it read as ~185px from the text when the
   grid gap was 64. */
.intro-split:has(.intro-mark) {
  /* A definite track, not auto: an SVG sized by max-height inside an auto
     track has no resolvable intrinsic width and collapses to zero. */
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 44px;
}
.intro-mark { display: flex; align-items: center; justify-content: flex-start; }
.intro-mark img { max-width: 100%; max-height: 200px; width: auto; height: auto; }
@media (max-width: 900px) {
  .intro-mark { justify-content: flex-start; order: -1; margin-bottom: 8px; }
  .intro-mark img { max-height: 110px; }
}

/* ── FEATURE LIST ──────────────────────────────────────────────────────
   Observation and takeaway lists inside the teaching sections. */
.flist { list-style: none; max-width: var(--prose); }
.flist li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.6;
}
.flist li::before {
  content: '';
  position: absolute;
  left: 2px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.flist li strong { color: var(--text); }
.section-body > *:last-child { margin-bottom: 0; }
.section-body .flist:last-child li:last-child { margin-bottom: 0; }

/* Home — the topographic field drifting, as on the previous site. */
.hero-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 40%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 90%);
}
.hero-topo::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 3deg, rgba(28,205,254,0.05) 3deg, rgba(28,205,254,0.05) 3.5deg);
  animation: topo-drift 120s linear infinite;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, transparent 70%);
}
@keyframes topo-drift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* The active-page rule outranked the pill on the mobile panel. */
.nav-mobile a.btn-support[aria-current="page"] { color: var(--cta-text); }

/* ── STEP BAND ─────────────────────────────────────────────────────────
   The four simulator steps are one course, not four sections. They share a
   single band and are separated by a hairline, so the sequence reads as
   continuous while each step keeps its own margin number. */
.step-band { background: var(--surface); padding-block: var(--space-band); }
.step-block + .step-block {
  margin-top: var(--space-group);
  padding-top: var(--space-group);
  border-top: 1px solid var(--border);
}
.step-block .grid { margin-top: 28px; }
.step-band .card { background: var(--bg); }

/* ── FOOTER NEWSLETTER ─────────────────────────────────────────────────
   Sits at the top of the footer on every page, above the link columns and
   divided from them by a hairline.

   The form is Zeffy's embed, which is cross-origin — its field and button
   cannot be restyled from here. Two things make it sit well anyway: every
   background inside it is transparent, so our ground shows through, and its
   submit button already renders in Beacon Yellow (#FFD53F).

   The frame is given more height than the form needs rather than cropped to
   fit. Its internal geometry moves with width (204px tall at 1280, 168px at
   400, with the email field starting at y77 and y57 respectively), so a
   fixed-pixel crop that hid the heading on desktop would slice through the
   field on a phone. Transparent overflow is invisible; a bad crop is not. */
.footer-cta {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 32px var(--space-group);
  margin-bottom: var(--space-group);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 600px) { .footer-cta { padding-inline: 20px; } }

.footer-cta-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 24px 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .footer-cta-in { grid-template-columns: 1fr; gap: 20px; }
}

.footer-cta-text { max-width: 460px; }
.footer-cta .label { margin-bottom: 10px; }
.footer-cta-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 8px;
  text-wrap: balance;
}
.footer-cta-body { font-size: 17px; line-height: 1.6; color: var(--text-muted); }

/* The embed reports no height to us, so the frame is sized generously and the
   surplus stays transparent. */
.footer-form { width: 100%; }
.footer-form iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  background: transparent;
}
@media (max-width: 860px) { .footer-form iframe { height: 190px; } }