:root {
  --navy: #03152f;
  --navy2: #061f45;
  --blue: #0878ff;
  --cyan: #62d4ff;
  --text: #f7fbff;
  --muted: #a8b9ce;
  --color-primary: oklch(62% .195 250);
  --ink: #07182f;
  --surface: #f3f7fb;
  --line: rgba(255, 255, 255, 0.14);
  /* Promoted out of `.home-page` so the shared masthead can use them on every
     page. `.home-page` still declares the same values for its own sections. */
  --home-navy: #031326;
  --home-sky: #8fd7ff;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  /* One type system across the whole site. This used to be Inter everywhere
     except the homepage, which set Manrope + Newsreader on `.home-page` — so
     the marketing page and the pages it linked to read as two different
     brands. The homepage was the reference, so it wins. */
  font-family: Manrope, Inter, system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  background: var(--navy);
  color: var(--text);
}
/* Newsreader is the display face for the two editorial levels, matching the
   homepage. UI chrome inside the two portals opts back out further down. */
h1, h2 { font-family: Newsreader, Georgia, serif; }
h2 {
  font-size: 3rem !important;
  font-weight: 700;
  line-height: 1.2 !important;
}
h1, h2, h3, p { text-wrap: pretty; }
/* A touch of tracking on running text. Deliberately a bare `p` selector: every
   label, eyebrow and kicker that sets its own letter-spacing is class-based, so
   those all outrank this and keep the wide uppercase tracking they rely on. */
p { letter-spacing: 0.02rem; }
a {
  color: inherit;
  text-decoration: none;
}
.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  /* Three tracks: brand | nav | actions. The nav track takes the remaining
     space and centres its links within it, so the nav never collides with the
     logo. minmax(0,auto) lets the side tracks stay at their content width. */
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  align-items: center;
  gap: 16px;
  padding: 6px 3.5vw 0;
  background: #021026;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.125rem;
}
/* Sized by width, as the homepage always did. The old `height: 65px` rendered
   the 2170x323 artwork 437px wide, which drove the nav crowding the rules
   below used to work around — and pushed every subpage off a phone screen. */
.brand-mark {
  display: block;
  width: auto;
  height: 70px;
  object-fit: contain;
}
.text-lg {
  font-size: 1.25rem;
}
.nav-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
}
/* The -174px nudge that used to live here corrected for a 437px logo beside a
   five-item nav. The logo is width-clamped now and the link set is the same on
   every page, so the track centres on its own. */
.nav-links a:hover {
  color: white;
}
.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-cta {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-weight: 700;
}
.menu-toggle {
  display: none;
  background: transparent;
  color: white;
  border: 0;
  font-size: 1.5rem;
}
.hero {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 150px 4vw 0;
  background: radial-gradient(
      circle at 74% 35%,
      rgba(0, 128, 255, 0.28),
      transparent 30%
    ),
    linear-gradient(
      90deg,
      rgba(1, 13, 32, 0.99) 0%,
      rgba(1, 13, 32, 0.97) 35%,
      rgba(3, 24, 57, 0.8) 62%,
      rgba(3, 19, 43, 0.6) 100%
    ),
    url("assets/hero3.webp") center/cover no-repeat;
}
.page-banner {
  padding-top: 140px !important;
}
#apply-intro.page-banner {
  padding-top: 100px !important;
  padding-bottom: 6px !important;
}
#apply-intro .page-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 10px;
}
#apply-intro .hero-copy {
  margin: 0;
  font-size: 1rem;
   max-width: 1400px !important;
}
#application-form {
  padding-top: 16px;
  padding-bottom: 60px;
}
#application-form .notice {
  /* max-width: 880px; */
  margin: 0 auto -4px;
  border-radius: 14px;
  border-left-width: 4px;
  box-shadow: 0 8px 20px rgba(8, 120, 255, 0.06);
}
.bold {
  font-weight: 700;
  font-size: 1.5rem;
}
.page-title {
  margin: 0 0 18px;
  font-size: 3.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, #03152f 100%);
  z-index: -2;
}
.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  z-index: -1;
  background-image: linear-gradient(
      rgba(48, 138, 255, 0.25) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(48, 138, 255, 0.25) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 25%,
    black 70%,
    transparent
  );
}
.hero-content {
  position: relative;
  z-index: 3;
  width: min(1080px, 100%);
  padding-bottom: 120px;
  /* padding-top: 30px; */
}
.eyebrow {
  margin: 0 0 18px;
  color: #55b5ff;
  letter-spacing: 0.15em;
  font-size: 17px;
  font-weight: 800;
}
.eyebrow.dark {
  color: #086acb;
}
.text-gradient {
  background-image: linear-gradient(135deg, var(--color-primary) 0%, oklch(75% .2 220) 100%);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
}
h1 {
  margin: 0;
  font-size: 4.5rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}
h1 span {
  color: var(--blue);
}
.hero-copy {
  max-width: 840px;
  margin: 20px 0;
  color: #d1dceb;
  font-size: clamp(1rem, 1.125vw, 1.125rem);
  line-height: 1.4;
}
/* .hero-copy is a <p> on the inner pages; on the homepage it wraps a few
   short paragraphs, which need breathing room between them. */
.hero-copy p {
  margin: 0 0 14px;
}
.hero-copy p:last-child {
  margin-bottom: 0;
}
.hex-badges {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}
.hex-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hex-badge strong {
  display: block;
  font-size: 0.95rem;
}
.hex-badge span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}
.hex-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  clip-path: polygon(
    25% 3%,
    75% 3%,
    100% 50%,
    75% 97%,
    25% 97%,
    0% 50%
  );
  background: rgba(9, 107, 255, 0.16);
  border: 1px solid rgba(21, 153, 255, 0.55);
  font-size: 1.4rem;
  color: #1599ff;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 0;
  font: inherit;
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, #096bff, #0c8fff);
  box-shadow: 0 10px 35px rgba(0, 111, 255, 0.28);
  border-left: 3px solid #168dff;
  font-weight: 700;
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 700;
}
.btn-tertiary {
  background: white;
  color:black;
  font-weight: 700;
  /* border: 1px solid rgba(255, 255, 255, 0.18); */
}
.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 60px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feature-strip article {
  padding: 12px 12px 12px 0;
  margin-right: 12px;
  border-right: 1px solid var(--line);
}
.feature-strip article:last-child {
  border-right: 0;
}
.icon {
  color: #ffffff;
  font-size: 2.2rem;
}
.pillar-symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  /* margin-bottom: 16px; */
  color: #ffffff;
}
.pillar-symbol svg {
  width: 48px;
  height: 48px;
  overflow: visible;
}
.feature-strip h3 {
  margin: 9px 0 7px;
  font-size: 17px;
}
.feature-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
}
.hero-visual {
  position: absolute;
  inset: 120px 0 120px 45%;
  z-index: 2;
  pointer-events: none;
}
.tech-orbit {
  position: absolute;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  color: #7edcff;
  border: 1px solid #1597ff;
  background: rgba(3, 31, 67, 0.54);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  box-shadow: inset 0 0 16px rgba(0, 129, 255, 0.14),
    0 0 22px rgba(0, 129, 255, 0.2);
  animation: float 5s ease-in-out infinite;
}
.orbit-one {
  top: 14%;
  left: 35%;
}
.orbit-two {
  top: 38%;
  left: 29%;
  animation-delay: -0.7s;
}
.orbit-three {
  top: 49%;
  left: 43%;
  animation-delay: -1.8s;
}
.orbit-four {
  top: 28%;
  left: 46%;
  animation-delay: -2.6s;
}
@keyframes float {
  50% {
    transform: translateY(-12px);
  }
}
.stats-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 16px 4vw;
  background: rgba(1, 15, 36, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stats-bar div {
  padding: 6px 16px;
  border-right: 1px solid var(--line);
}
.stats-bar div:first-child {
  padding-left: 0;
}
.stats-bar div:last-child {
  border-right: 0;
}
.stats-bar strong,
.stats-bar span {
  display: block;
}
block {
    display: block;
}
.mt-2 {
    margin-top: 1rem;
}
.mt-4 {
    margin-top: 2rem;
}
.mb-0 {
    margin-bottom: 0;
}
.mb-1 {
    margin-bottom: 0.5rem;
}
.mb-2 {
    margin-bottom: 1rem;
}
.mb-4 {
    margin-bottom: 2rem;
}
.stats-bar strong {
  font-size: 2rem;
}
.stats-bar span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}
.section {
  scroll-margin-top: 80px;
}
.section-small {
    padding: 20px 3vw 32px;
}
#home {
  scroll-margin-top: 0;
}
/* #membership {
  scroll-margin-top: 50px;
} */
.section {
  padding: 24px 2.5vw 24px;
}
.section-light {
  color: var(--ink);
  background: var(--surface);
}
.section-tint {
  color: var(--ink);
  background: #e4f1ff;
}
.dark-section,
.faq-section {
  background: radial-gradient(
      circle at 15% 0%,
      rgba(50, 130, 255, 0.16),
      transparent 45%
    ),
    linear-gradient(155deg, #0a2c58 0%, #041934 45%, #030f22 100%);
}
.process-section {
  color: var(--ink);
  background: #e4f1ff;
}
.section-heading {
  /* max-width: 850px; */
  margin-bottom: 16px;
}
.section h2,
.join-section h2 {
  margin: 0;
  /* font-size: clamp(2.25rem, 3vw, 2.25rem); */
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.section-heading > p:last-child {
  color: #5b6a7d;
  line-height: 1.4;
  font-size: 1.125rem;
}
.dark-section .section-heading > p:last-child,
.faq-section .section-heading > p:last-child {
  color: var(--muted);
}
.inline-link {
  color: #0b75e8;
  font-weight: 600;
  text-decoration: underline;
}
.inline-link-dark {
  color: #5fc2ff;
  font-weight: 600;
  text-decoration: underline;
}
.section-footnote {
  margin-top: 16px;
  font-size: 0.98rem;
}
.section-footnote.light {
  color: var(--muted);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.card-grid.four {
  grid-template-columns: repeat(4, 1fr);
}
.card {
  min-height: 150px;
  padding: 12px 18px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 20px 50px rgba(7, 24, 47, 0.08);
}
.card-number {
  color: #0b75e8;
  font-size: 1.5rem;
  font-weight: 800;
}
.card h3 {
  margin-top: 0;
  font-size: 1.45rem;
  color: #0b1f3a;
  margin-bottom: 0;
}
.card p {
  color: #617188;
  line-height: 1.4;
}
.featured-card {
  color: white;
  background: linear-gradient(0deg,#dbeefb 0%,#7bb6f3 50%,#3b78cc 100%);
  border-bottom: 3px solid #168dff;
}
.featured-card h3 {
  color: white;
}
.featured-card .card-number {
  color: #cfe7ff;
}
.featured-card p {
  color: black;
}
.bg-gradient {
  background: linear-gradient(145deg, #063568, #0a78ef);
}
.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tier-card {
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  border: 1px solid rgba(7, 24, 47, 0.1);
  border-radius: 20px;
  color: var(--ink);
  background: linear-gradient(155deg, #ffffff, #f3f7fb);
  box-shadow: 0 20px 60px rgba(7, 24, 47, 0.18);
}
.tier-card.fellow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 12px;
  color: var(--text);
  /* border: 1px solid rgba(255, 255, 255, 0.12); */
  background: linear-gradient(145deg, #063568, #0a78ef);
  box-shadow: 0 20px 60px rgba(0, 86, 190, 0.25);
}
.tier-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tier-seal {
  width: 100%;
  max-width: 320px;
  height: auto;
  justify-self: center;
}
.tier-tag {
  color: #086acb;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.tier-card.fellow .tier-tag {
  color: #63bdff;
}
.tier-card h3 {
  font-size: 2rem;
  margin: 18px 0 8px;
}
.price {
  font-size: 1.35rem;
  font-weight: 800;
  color: #086acb;
}
.tier-card.fellow .price {
  color: #9fd7ff;
}
.tier-card p,
.tier-card li {
  color: #465165;
  line-height: 1.4;
  font-size: 1rem;
  letter-spacing: 0.02rem;
}
.tier-card.fellow p,
.tier-card.fellow li {
  color: #c3d0df;
}
.tier-card ul {
  padding-left: 20px;
  /* margin: 20px 0 16px; */
}
.tier-card .btn {
  margin-top: auto;
}
.tier-card .btn-secondary {
  color: var(--ink);
  background: rgba(7, 24, 47, 0.05);
  border: 1px solid rgba(7, 24, 47, 0.16);
}
.notice {
  padding: 12px 18px;
  margin-bottom: 12px;
  border-left: 4px solid #0b7cff;
  background: #e4f1ff;
  color:black;
  border-radius: 10px;
  line-height: 1.4;
}
.criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.criterion {
  padding: 12px 18px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 15px 40px rgba(7, 24, 47, 0.07);
}
.criterion > span,
.steps span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: white;
  background: #0878ff;
  font-weight: 800;
}
.criterion h3 {
  font-size: 1.25rem;
  margin: 20px 0 10px;
  color:black;
}
.criterion p {
  color: #617188;
  line-height: 1.4;
  font-size: 1rem;
  letter-spacing: 0.02rem;  
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.metric-grid div {
  padding: 12px 18px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}
.metric-grid strong,
.metric-grid span {
  display: block;
}
.metric-grid strong {
  font-size: 2.2rem;
  color: #5fc2ff;
}
.metric-grid span {
  margin-top: 8px;
  color: var(--muted);
}
.safeguard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.safeguard-grid article {
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(0deg,#dbeefb 0%,#7bb6f3 50%,#3b78cc 100%);
  border-bottom: 3px solid #168dff;
}
.safeguard-grid h3 {
  font-size: 1.25rem;
}
.safeguard-grid p {
  color: black;
  line-height: 1.4;
  font-size: 1rem;
  letter-spacing: 0.02rem;
}
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.steps article {
  padding: 12px 18px;
  border: 1px solid rgba(7, 24, 47, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}
.steps h3 {
  font-size: 1.25rem;
}
.steps p {
  color: #5b6a7d;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.02rem;  
}
.roadmap {
  display: grid;
  gap: 16px;
}
.roadmap article {
  position: relative;
  padding: 24px 24px 24px 90px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}
.roadmap article > span {
  position: absolute;
  left: 22px;
  top: 26px;
  color: #5fc2ff;
  font-weight: 800;
}
.roadmap h3 {
  margin: 0 0 8px;
}
.roadmap p {
  margin: 0;
  color: var(--muted);
}
.roadmap .active {
  border-color: #168dff;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}
.faq-list details[open] {
  background: var(--surface);
  border-bottom-color: transparent;
  padding: 12px 18px;
  color:black;
}
.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  min-height: 44px;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "▶";
  flex-shrink: 0;
  font-size: 0.85em;
}
.faq-list details[open] summary::after {
  content: "▼";
}
.faq-list p {
  color: var(--muted);
  line-height: 1.4;
  color:black;
  margin-bottom: 0;
  letter-spacing: 0.02rem;
}
.join-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  padding: 20px 3vw;
  color: var(--ink);
  background: #e4f1ff;
}
.join-form {
  display: grid;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(7, 24, 47, 0.12);
}
.join-form input,
.join-form select,
.join-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(7, 24, 47, 0.16);
  border-radius: 8px;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.join-form select option {
  color: black;
}
.join-form input:focus,
.join-form select:focus,
.join-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 120, 255, 0.14);
}
.apply-form {
  background: transparent;
  border: 0;
  padding: 0;
  /* max-width: 880px; */
  margin: 0 auto;
  gap: 12px;
}
.apply-form input,
.apply-form select,
.apply-form textarea {
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 10px;
  border-color: rgba(7, 24, 47, 0.14);
}
.apply-form textarea {
  min-height: 0;
}
.apply-form input::placeholder,
.apply-form textarea::placeholder {
  color: #9aa7ba;
}
.form-message {
  min-height: 20px;
  margin: 0;
  color: #086acb;
}
.apply-fieldset {
  display: grid;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid rgba(7, 24, 47, 0.08);
  border-radius: 18px;
  margin: 0;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 1px 2px rgba(7, 24, 47, 0.04), 0 12px 32px rgba(7, 24, 47, 0.05);
}
.apply-fieldset legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 4px;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.apply-fieldset legend::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), #5aa9ff);
}
.domain-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.domain-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}
.domain-check input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
  flex-shrink: 0;
}
.domain-check-text {
  min-width: 0;
}
.apply-hint {
  margin: -6px 0 2px;
  color: #7787a0;
  font-size: 0.88rem;
  line-height: 1.4;
}
.criterion-block {
  display: grid;
  gap: 12px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid rgba(7, 24, 47, 0.07);
  border-radius: 14px;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.criterion-block:focus-within {
  border-color: rgba(8, 120, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(8, 120, 255, 0.08);
}
.criterion-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
}
.criterion-label::before {
  content: counter(criterion);
  counter-increment: criterion;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #0c8fff);
  color: white;
  font-size: 0.78rem;
  font-weight: 800;
}
.apply-fieldset:has(.criterion-block) {
  counter-reset: criterion;
}
.word-counter {
  margin: -6px 0 0;
  text-align: right;
  font-size: 0.8rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.word-counter.is-over {
  color: #c62828;
  font-weight: 700;
}
textarea.word-limited.is-over {
  border-color: #c62828;
}
select.domain-select.is-over {
  border-color: #c62828;
}
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px 0 0;
  color: #c62828;
  font-size: 0.83rem;
  font-weight: 600;
}
.field-error:not([hidden])::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #c62828;
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
}
.field-wrap {
  display: grid;
  gap: 6px;
}
.required-mark {
  color: #0878ff;
  margin-left: 2px;
}
.field-wrap input.is-over,
.field-wrap textarea.is-over,
.field-wrap select.is-over,
.dob-row select.is-over {
  border-color: #c62828;
  background: #fff7f7;
}
.apply-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  /* max-width: 880px; */
  margin: 0 auto 12px;
}
.apply-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
}
.apply-step-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: 2px solid rgba(7, 24, 47, 0.12);
  color: #94a3b8;
  font-size: 0.95rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.apply-step.is-active .apply-step-num {
  background: linear-gradient(135deg, var(--blue), #0c8fff);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 14px rgba(8, 120, 255, 0.35);
}
.apply-step.is-active .apply-step-label {
  color: var(--ink);
}
.apply-step.is-complete .apply-step-num {
  background: #0a8f4f;
  border-color: transparent;
  color: white;
}
.apply-step.is-complete .apply-step-label {
  color: #0a8f4f;
}
.apply-step-label {
  font-size: 0.85rem;
  white-space: nowrap;
}
.apply-step-connector {
  flex: 1;
  height: 2px;
  background: rgba(7, 24, 47, 0.12);
  min-width: 24px;
  margin-top: 17px;
  border-radius: 2px;
  transition: background 0.2s ease;
}
.apply-step-connector.is-complete {
  background: #0a8f4f;
}
.apply-panel {
  display: grid;
  gap: 12px;
}
.apply-panel[hidden] {
  display: none;
}
.apply-panel-title {
  margin: 4px 0 -8px;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.apply-review-copy {
  color: #617188;
  line-height: 1.4;
}
.apply-file-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}
.apply-file {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(7, 24, 47, 0.16);
  border-radius: 8px;
  font: inherit;
}
.apply-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 2px dashed rgba(8, 120, 255, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, #f6faff, #f0f7ff);
  color: #617188;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.apply-dropzone:hover {
  border-color: var(--blue);
  background: #e4f1ff;
  transform: translateY(-1px);
}
.apply-dropzone.is-dragover {
  border-color: var(--blue);
  background: #e4f1ff;
  box-shadow: 0 0 0 4px rgba(8, 120, 255, 0.1);
}
.apply-dropzone-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(8, 120, 255, 0.1);
  font-size: 1.3rem;
  color: var(--blue);
}
.apply-dropzone-text {
  font-weight: 600;
}
.apply-dropzone-filename {
  font-weight: 700;
  color: var(--ink);
}
.link-field {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 12px;
}
.link-field label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #7787a0;
}
.dob-field {
  display: grid;
  gap: 6px;
}
.dob-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #7787a0;
}
.dob-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.assessment-option {
  padding: 20px 22px;
  border: 1px solid rgba(7, 24, 47, 0.1);
  border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.assessment-option:has(input:checked) {
  border-color: var(--blue);
  background: #f2f8ff;
  box-shadow: 0 0 0 3px rgba(8, 120, 255, 0.08);
}
.assessment-option:hover {
  border-color: rgba(8, 120, 255, 0.35);
}
.assessment-option + .assessment-option {
  margin-top: 14px;
}
.assessment-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  color: var(--ink);
  line-height: 1.4;
}
.assessment-radio input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 3px;
  accent-color: var(--blue);
  cursor: pointer;
}
.assessment-fees {
  margin-top: 14px;
  padding: 14px 16px;
  background: white;
  border: 1px solid rgba(7, 24, 47, 0.06);
  border-radius: 10px;
  font-size: 0.88rem;
  color: #617188;
  line-height: 1.4;
}
.apply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 4px;
}
.apply-actions .btn-secondary {
  background: rgba(7, 24, 47, 0.05);
  border: 1px solid rgba(7, 24, 47, 0.16);
  color: var(--ink);
}
.apply-actions .btn-primary {
  box-shadow: 0 10px 28px rgba(8, 120, 255, 0.28);
}
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 4vw;
  color: #aebdd0;
  background: #020e20;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-links {
  display: flex;
  /* Six links in one unwrapped row measured 338px, so the footer alone pushed
     every page sideways on a 320px phone. The homepage variant already wraps;
     the shared footer now does too. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.footer-links a {
  display: inline-block;
  padding: 10px 2px;
  color: #aebdd0;
  font-size: 0.9rem;
  font-weight: 500;
}
.footer-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Addendum stylesheet for legal pages (Privacy Policy, Terms of Service).
   Loaded alongside styles.css — reuses existing color/typography variables
   and only adds rules for long-form prose content. */

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0b75e8;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.legal-back:hover {
  text-decoration: underline;
}

.legal-content {
  max-width: 1180px;
  margin: 0 auto;
}
.legal-content > h1 {
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.legal-meta {
  color: #5b6a7d;
  font-size: 0.95rem;
  margin: 0 0 40px;
}
/* ── Application landings: numbered stage grid ──
   Sets out what happens after submission, so an applicant can see the whole
   path before committing to a fee or a disclosure. */
.apply-eyebrow {
  margin: 0 0 10px;
  color: #086acb;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.apply-stage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 0 1.25rem;
  background: rgba(7, 24, 47, 0.1);
  border: 1px solid rgba(7, 24, 47, 0.1);
  border-radius: 12px;
  overflow: hidden;
}
.apply-stage {
  padding: 1rem 1.1rem;
  background: #f8fbfe;
}
.apply-stage-num {
  display: block;
  margin-bottom: 6px;
  color: #0b75e8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.apply-stage h3 {
  margin: 0 0 6px;
  font-size: 1.125rem;
  color: #021026;
}
.apply-stage p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #4a5568;
}
@media (max-width: 680px) {
  .apply-stage-grid { grid-template-columns: 1fr; }
}

/* Clears the fixed header, which the default section padding does not. */
.legal-page {
  padding-top: 120px;
}

/* ── Long-form pages: sticky contents rail ──────────────────────────────────
   Bylaws, Privacy, and Terms all run long enough that a reader loses their
   place. The contents list sticks beside the body on wide screens and folds
   back into a card above the text when there is no room for a rail. */
.legal-head {
  margin-bottom: 40px;
}
.legal-lead {
  /* max-width: 62ch; */
  font-size: 1.12rem !important;
  line-height: 1.55 !important;
}
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  background: white;
  border: 1px solid rgba(7, 24, 47, 0.1);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0;
  box-shadow: 0 12px 30px rgba(7, 24, 47, 0.06);
}
.legal-toc p {
  margin: 0 0 12px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: #86929f;
  text-transform: uppercase;
}
/* Numbers come from a counter so the markup stays a plain ordered list and
   renumbers itself if a section is added or removed. */
.legal-toc ol {
  counter-reset: toc-item;
  list-style: none;
  margin: 0;
  padding: 0;
}
.legal-toc li {
  counter-increment: toc-item;
  margin-bottom: 2px;
}
.legal-toc a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px;
  padding: 5px 8px 5px 0;
  border-radius: 6px;
  color: #24344a;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
}
.legal-toc a::before {
  content: counter(toc-item, decimal-leading-zero);
  color: #9aa7b6;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.legal-toc a:hover {
  color: #0b75e8;
}
.legal-toc a:hover::before,
.legal-toc a.is-current::before {
  color: #0b75e8;
}
.legal-toc a.is-current {
  color: #0b75e8;
}

/* Section numbers in the body, mirroring the rail. */
.legal-body {
  max-width: 74ch;
  counter-reset: legal-section;
}
.legal-body > section {
  counter-increment: legal-section;
}
.legal-body > section > h2::before {
  content: counter(legal-section, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  color: #0b75e8;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
/* The Bylaws carry their own numbering in the headings ("Article I", "Article
   II"), so the counter would just repeat it. Suppress it in both the rail and
   the body there. */
.legal-no-numbers .legal-toc a {
  grid-template-columns: 1fr;
}
.legal-no-numbers .legal-toc a::before,
.legal-no-numbers .legal-body > section > h2::before {
  content: none;
}

/* The intro block sits above the numbering and must not consume a number. */
.legal-body > section.legal-unnumbered {
  counter-increment: none;
}
.legal-body > section.legal-unnumbered > h2::before {
  content: none;
}

.legal-content section {
  scroll-margin-top: 100px;
  margin-bottom: 24px;
  padding: 0;
}
.legal-content h2 {
  /* font-size: 1.5rem; */
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}
.legal-content h3 {
  font-size: 1.125rem;
  margin: 22px 0 8px;
  color: var(--ink);
}
.legal-content p {
  color: #425064;
  line-height: 1.4;
  font-size: 1.125rem;
  margin: 0 0 16px;
}
.legal-content ul,
.legal-content ol.legal-list {
  color: #425064;
  line-height: 1.4;
  font-size: 1.125rem;
  padding-left: 22px;
  margin: 0 0 16px;
}
.legal-content a.inline-link {
  color: #0b75e8;
  font-weight: 600;
  text-decoration: underline;
}
.legal-placeholder {
  background: #fff4d6;
  border: 1px solid #f0c96a;
  color: #6b4e00;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.95em;
  white-space: nowrap;
}
.legal-fineprint {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid rgba(7, 24, 47, 0.1);
  color: #7c8aa0;
  font-size: 0.88rem;
  line-height: 1.4;
}

/* No room for a rail: the contents fold back into a card above the text. */
@media (max-width: 1000px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .legal-toc {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .legal-toc ol {
    columns: 2;
    column-gap: 16px;
  }
  .legal-toc li { break-inside: avoid; }
}
@media (max-width: 680px) {
  .legal-toc ol {
    columns: 1;
  }
}

@media (max-width: 1100px) {
  .card-grid.four {
    grid-template-columns: repeat(2, 1fr);
  }
  .criteria-grid,
  .safeguard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* The band that used to shrink the logo and tighten the nav is gone: the nav
   is five items now, matching the homepage, and the logo is width-clamped. */
/* Below this the links can't fit beside the logo at a readable size, so the
   drawer takes over. Same breakpoint as the homepage. */
@media (max-width: 1150px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }
  .header-actions {
    display: none;
  }
  .menu-toggle {
    display: block;
    justify-self: end;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 74px;
    left: 5vw;
    right: 5vw;
    flex-direction: column;
    /* Drawer stacks vertically — don't centre on the main (block) axis. */
    justify-content: flex-start;
    padding: 16px;
    border-radius: 12px;
    background: #061a37;
  }
  .nav-links a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-links a:last-child {
    border-bottom: 0;
  }
  .nav-links.open {
    display: flex;
  }
  .hero {
    background-position: 62% center;
  }
  .hero-content {
    width: 74%;
    padding-bottom: 70px;
  }
  .feature-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    position: relative;
    margin: 0 -5vw;
  }
  .hero-visual {
    opacity: 0.6;
    left: 35%;
  }
  .tier-grid,
  .join-section {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .domain-checklist {
    grid-template-columns: 1fr;
  }
  .dob-row {
    grid-template-columns: 1fr;
  }
  .row-2,
  .row-3 {
    grid-template-columns: 1fr;
  }
  .apply-stepper {
    gap: 4px;
  }
  .apply-step-label {
    display: none;
  }
  .apply-step-connector {
    min-width: 12px;
  }
  .tier-card.fellow {
    grid-template-columns: 1fr;
  }
  .tier-seal {
    width: 96px;
    height: 96px;
    justify-self: center;
  }
  .hero {
    padding-top: 150px;
    background-position: 68% center;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 13, 31, 0.58);
  }
  .hero-content {
    width: 100%;
  }
  h1 {
    font-size: 3rem;
  }
  .feature-strip {
    grid-template-columns: 1fr 1fr;
  }
  .hero-visual {
    display: none;
  }
  .stats-bar {
    grid-template-columns: 1fr 1fr;
  }
  .card-grid,
  .card-grid.four,
  .criteria-grid,
  .metric-grid,
  .safeguard-grid,
  .steps {
    grid-template-columns: 1fr;
  }
  .roadmap article {
    padding-left: 24px;
  }
  .roadmap article > span {
    position: static;
    display: block;
    margin-bottom: 10px;
  }
  footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Criterion evidence examples (expandable details in eligibility section) */
.criterion-examples {
  margin-top: 12px;
  border-top: 1px solid rgba(7, 24, 47, 0.1);
  padding-top: 10px;
}
.criterion-examples > summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  color: #086acb;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.criterion-examples > summary::-webkit-details-marker { display: none; }
.criterion-examples > summary::after { content: "▶"; font-size: 0.8em; }
.criterion-examples[open] > summary::after { content: "▼"; }
.criterion-examples-body {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.criterion-examples-body > div {
  padding: 8px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.4;
}
.criterion-examples-body > div:first-child {
  background: #edfaf3;
  border: 1px solid #b2dfcc;
}
.criterion-examples-body > div:last-child {
  background: #fff4f4;
  border: 1px solid #f5c6c6;
}
.criterion-examples-body strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
}
.criterion-examples-body > div:first-child strong { color: #1a7a4a; }
.criterion-examples-body > div:last-child strong { color: #c62828; }
.criterion-examples-body ul {
  margin: 0;
  padding-left: 16px;
  color: #425064;
}
.criterion-examples-body li { margin-bottom: 4px; }
@media (max-width: 480px) {
  .criterion-examples-body { grid-template-columns: 1fr; }
}

/* ── Shared portal layout (apply-fellow.html, panel-apply.html) ── */
.portal-section {
  padding: 85px 0 4rem;
  min-height: 100vh;
  background: linear-gradient(160deg, #e8f1ff 0%, #f0f7ff 45%, #f5f9fb 100%);
}
.portal-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 auto;
  padding: 12px 2vw;
}

/* ── Sidebar: white card with navy-to-blue top stripe ── */
.portal-sidebar {
  flex: 0 0 270px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #dce8f5;
  border-top: 4px solid var(--blue);
  box-shadow: 0 4px 24px rgba(3,21,47,0.10), 0 1px 4px rgba(3,21,47,0.05);
  padding: 1.4rem 1.25rem 1.25rem;
  position: sticky;
  top: 90px;
  /* max-height: calc(100vh - 110px); */
  min-height: 525px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.portal-content { flex: 1; min-width: 0; }

/* Sidebar text & tabs */
.sidebar-title {
  font-size: 1.25rem; font-weight: 800; text-align: center;
  margin: 0 0 1.1rem; color: var(--navy);
  letter-spacing: -0.02em;
}
/* Sidebar form */
.sidebar-form { display: flex; flex-direction: column; gap: 1rem; }
.sidebar-form label { font-size: 1rem; color: #374151; margin-bottom: 16px; display: block; font-weight: 600; }
.sidebar-form input {
  width: 100%; padding: 0.6rem 0.75rem;
  border-radius: 8px; border: 1px solid #cdd8e8;
  background: #f8fafc; color: var(--ink); font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sidebar-form input::placeholder { color: #9ca3af; }
.sidebar-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,120,255,0.12); }
.sidebar-msg { font-size: 1rem; margin-top: 2px; display: none; }
.sidebar-msg.error { color: #dc2626; }
.sidebar-msg.success { color: #059669; }
.sidebar-hint {
  font-size: 0.95rem; line-height: 1.5; color: #6b7280;
  margin: 0 0 0.25rem;
}

/* Google + primary buttons */
.btn-google-sidebar {
  display: flex; align-items: center; justify-content: center; gap: 0.65rem;
  width: 100%; padding: 0.7rem 1rem; background: #fff; color: #333;
  font-weight: 700; font-size: 1rem; border: 1.5px solid #dbe4ee;
  border-radius: 9px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s;
  margin-bottom: 1rem; margin-top: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.btn-google-sidebar:hover { background: #f0f5ff; box-shadow: 0 2px 8px rgba(8,120,255,0.12); }
.btn-google-sidebar svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-or {
  display: flex; align-items: center; gap: 8px;
  color: #9ca3af; font-size: 1rem; margin: 0.5rem 0;
}
.sidebar-or::before,.sidebar-or::after { content:''; flex:1; height:1px; background:#e5ecf5; }
.btn-sidebar-primary {
  width: 100%; padding: 0.7rem; border-radius: 9px; border: none;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: #fff; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: opacity 0.2s, transform 0.2s; margin-top: 0.25rem;
  box-shadow: 0 3px 10px rgba(8,120,255,0.25);
}
.btn-sidebar-primary:hover { opacity: 0.92; transform: translateY(-1px); }
.btn-sidebar-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Profile section */
/* Layout lives here (not as an inline style) so the `hidden` attribute always
   wins — an inline display:flex would override [hidden]'s display:none. */
#sidebarProfile:not([hidden]) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sidebar-profile {
  text-align: center; padding-bottom: 1rem;
  border-bottom: 1px solid #e5ecf5; margin-bottom: 1rem;
}
.profile-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 700; color: #fff;
  margin: 0 auto 0.75rem; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(8,120,255,0.18), 0 4px 16px rgba(3,21,47,0.18);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 1.125rem; font-weight: 800; color: var(--navy); margin-bottom: 0.2rem; }
.profile-email { font-size: 1rem; color: #6b7280; margin-bottom: 0.65rem; }
.profile-badge {
  display: inline-block; padding: 0.2rem 0.9rem;
  border-radius: 20px; font-size: 0.85rem; font-weight: 700;
}
.badge-applicant { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.badge-review    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.badge-approved  { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-rejected  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Spinner */
.sidebar-spinner {
  display: inline-block; width: 36px; height: 36px;
  border: 3px solid #dbeafe; border-top-color: var(--blue);
  border-radius: 50%; animation: portal-spin 0.9s linear infinite;
  margin: 0 auto 0.75rem;
}
@keyframes portal-spin { to { transform: rotate(360deg); } }
.sidebar-loading { text-align: center; padding: 2rem 0; color: #6b7280; }

/* Sign-out */
.btn-sidebar-signout {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.65rem; border-radius: 9px;
  border: 1.5px solid #fecdd3;
  background: #fff1f2; color: #991b1b; font-weight: 700; font-size: 1rem;
  cursor: pointer; margin-top: auto; transition: background 0.2s, border-color 0.2s;
}
.btn-sidebar-signout:hover { background: #ffe4e6; border-color: #fca5a5; }
.btn-sidebar-signout svg { width: 16px; height: 16px; }

/* ── Portal content cards ── */
.portal-card {
  background: #fff; border-radius: 14px;
  border: 1px solid #e2eaf5;
  border-left: 4px solid var(--blue);
  box-shadow: 0 2px 16px rgba(3,21,47,0.07);
  padding: 12px 18px; margin-bottom: 1rem;
  color: var(--ink); animation: portalFadeUp 0.4s ease both;
}
@keyframes portalFadeUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.portal-card h1 { font-size: 1.9rem; font-weight: 800; color: #021026; text-align: center; margin: 0 0 0.35rem; }
.portal-card h1 span {
  background: linear-gradient(135deg, var(--color-primary) 0%, oklch(75% .2 220) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.portal-card h2 { 
  /* font-size: 1.3rem;  */
  font-weight: 700; color: #021026; margin: 0 0 0.75rem; }
.portal-card p  { color: #4a5568; line-height: 1.4; }

/* ── Status card: fellow portal - navy header bar ── */
.portal-status-card {
  background: #fff; border-radius: 14px;
  border: 1px solid #e2eaf5;
  box-shadow: 0 2px 16px rgba(3,21,47,0.07);
  overflow: hidden; margin-bottom: 12px; color: var(--ink);
}
.portal-status-card h2 {
  /* font-size: 1.125rem;  */
  font-weight: 700; color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--navy) 0%, #0a2a60 100%);
  padding: 0.9rem 1.5rem; margin: 0;
  letter-spacing: -0.01em;
}
.portal-process-list { padding: 1rem 1.5rem 0; }

/* Process steps */
.portal-process-item {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 18px; position: relative;
}
.portal-process-item:not(:last-child)::after {
  content: ''; position: absolute; left: 20px; top: 42px;
  bottom: -16px; width: 2px; background: #e2eaf5;
}
.portal-process-item.done::after { background: var(--blue); }
.portal-process-num {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.125rem; flex-shrink: 0; z-index: 1;
  border: 3px solid #e2eaf5; background: #f0f5fb; color: #9ca3af;
}
.portal-process-num.active {
  background: linear-gradient(135deg, var(--navy) 0%, #0a2a60 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px rgba(8,120,255,0.3);
}

.portal-process-body h3 { font-size: 1rem; font-weight: 700; color: #021026; margin: 0 0 0.25rem; }
.portal-process-body p  { font-size: 1rem; color: #4a5568; margin: 0; line-height: 1.4; }

/* ── Status card: review panel navy header bar ── */

.portal-panel-status-card h2 {
  /* font-size: 1.125rem;  */
  font-weight: 700; color: #fff; text-align: center;
  background: linear-gradient(135deg, #096bff, #0c8fff);
  padding: 0.9rem 1.5rem; margin: 0;
  letter-spacing: -0.01em;
}

/* Status footer */
.portal-status-footer {
  display: flex; align-items: center; gap: 0.75rem;
  background: linear-gradient(135deg, var(--navy) 0%, #0a2a60 100%);
  color: #fff; padding: 0.75rem 1.5rem;
  /* margin-top: 1.25rem; */
}
.portal-status-footer p { flex: 1; margin: 0; font-weight: 600; font-size: 1rem; }
.portal-refresh-btn {
  background: linear-gradient(135deg, var(--navy) 0%, #0a2a60 100%); color: #fff; border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px; padding: 0.4rem 0.85rem; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: background 0.2s;
  min-height:40px;
}
.portal-refresh-btn:hover { background: rgba(255,255,255,0.25); }
.portal-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Portal banners ── */
.portal-approved {
  background: linear-gradient(135deg,#edfaf3,#d1fae5); border: 1px solid #6ee7b7;
  border-radius: 14px; padding: 1.5rem; text-align: center;
  color: #065f46; margin-bottom: 1rem;
}
.portal-approved h2 { color: #065f46; /* font-size: 1.4rem; */ margin: 0 0 0.5rem; }
.portal-approved .icon { font-size: 3rem; line-height: 1; margin-bottom: 0.75rem; display: block; }
.portal-rejected {
  background: #fff5f5; border: 1px solid #fca5a5;
  border-radius: 14px; padding: 1.25rem; text-align: center;
  color: #7f1d1d; margin-bottom: 1rem;
}
.portal-rejected h2 { color: #7f1d1d; margin: 0 0 0.5rem; }

/* ── Homepage: "what is membership" explainer ──
   Prose column carries the definition; the panel beside it lets a visitor
   self-qualify without reading the prose at all. */
.explainer-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.explainer-copy p {
  margin: 0 0 14px;
  color: #465165;
  font-size: 1.125rem;
  line-height: 1.5;
}
.explainer-copy p:last-child { margin-bottom: 0; }
.explainer-copy strong { color: var(--ink); }
.explainer-panel {
  padding: 20px 24px;
  border: 1px solid rgba(7, 24, 47, 0.1);
  border-radius: 18px;
  background: linear-gradient(155deg, #ffffff, #f3f7fb);
  box-shadow: 0 20px 50px rgba(7, 24, 47, 0.08);
}
.explainer-panel h3 {
  margin: 0 0 16px;
  font-size: 1.3rem;
  color: #0b1f3a;
}
.explainer-panel-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(7, 24, 47, 0.1);
  color: #5b6a7d;
  font-size: 0.95rem;
}
.checklist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  position: relative;
  padding-left: 30px;
  color: #465165;
  line-height: 1.4;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0878ff;
  color: white;
  font-size: 0.72rem;
  font-weight: 800;
}

/* ── Homepage: "why join" benefits (dark section) ── */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
/* Same gradient as .featured-card, so the benefit row reads as part of the
   same family as the About and Councils card rows. */
.benefit {
  padding: 18px 20px;
  border-radius: 16px;
  border-bottom: 3px solid #168dff;
  background: linear-gradient(0deg, #dbeefb 0%, #7bb6f3 50%, #3b78cc 100%);
}
.benefit-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #0b5bbf;
}
.benefit-icon svg { width: 22px; height: 22px; }
.benefit h3 {
  margin: 14px 0 8px;
  font-size: 1.2rem;
  color: white;
}
.benefit p {
  margin: 0;
  color: black;
  font-size: 1rem;
  line-height: 1.5;
}
/* ── Homepage: membership grade comparison ──
   Scrolls horizontally on narrow screens rather than forcing the page to. */
.compare-wrap {
  margin-top: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(7, 24, 47, 0.1);
  border-radius: 18px;
  background: white;
  box-shadow: 0 20px 50px rgba(7, 24, 47, 0.08);
}
.compare {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: var(--ink);
}
.compare th,
.compare td {
  padding: 12px 18px;
  text-align: left;
  vertical-align: top;
  font-size: 1rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(7, 24, 47, 0.08);
}
.compare thead th {
  font-size: 1.25rem;
  color: #0b1f3a;
  background: #f3f7fb;
  border-bottom: 2px solid rgba(7, 24, 47, 0.12);
}
.compare tbody th {
  width: 12%;
  font-weight: 700;
  color: #0b1f3a;
  background: #fafcfe;
}
.compare td { color: #465165; }
.compare td strong { color: var(--ink); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare-tag {
  display: block;
  margin-bottom: 4px;
  color: #086acb;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.compare-hint {
  margin: 14px 0 0;
  color: #5b6a7d;
  font-size: 0.98rem;
}
/* The fees cards lead with the figure, so the label sits above it and the
   number takes the place the heading would normally hold. */
.card .tier-tag {
  display: block;
  margin-bottom: 10px;
  font-size: 0.78rem;
}
.card .price {
  margin-bottom: 8px;
  font-size: 2.1rem;
  line-height: 1.1;
}
.featured-card .tier-tag { color: #eaf4ff; }
.featured-card .price { color: white; }

/* Sits under the join form's submit button, so it reads as a condition of
   applying rather than as body copy. */
.form-consent {
  margin: 0;
  color: #5b6a7d;
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: center;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The shared .steps grid is sized for the 5-step Fellowship process; the
   homepage "how it works" strip has 4, so it needs its own track count. */
#how .steps { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  #how .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .explainer-split { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .benefit-grid { grid-template-columns: 1fr; }
  #how .steps { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .portal-layout { flex-direction: column; }
  .portal-sidebar { position: static; flex: none; width: 100%; max-height: none; border-top: 4px solid var(--blue); }
  /* `.portal-layout` keeps `align-items: flex-start`, so once the axis turns
     vertical the content column sizes to its own content instead of the
     container — on a phone that made it wider than the viewport. The sidebar
     above already pins itself to 100%; the content column needs the same. */
  .portal-content { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   2026 homepage — an editorial, credential-led system.
   Scoped to .home-page so the detailed application and governance pages keep
   their purpose-built layouts while sharing the same brand foundation.
   ────────────────────────────────────────────────────────────────────────── */
.home-page {
  --home-navy: #031326;
  --home-navy-soft: #092340;
  --home-blue: #1685f8;
  --home-sky: #8fd7ff;
  --home-paper: white;
  --home-white: #fbfcfe;
  --home-ink: #071a2c;
  --home-muted: #667487;
  /* The page's single left/right gutter. Every section edge, the hero copy,
     the principles strip and the scroll cue all read from this, so they cannot
     drift apart again — which is exactly what had happened: the hero sat on
     5vw/84px while the sections centred a 1280px column, putting section copy
     at roughly twice the hero's indent on a wide screen. */
  --home-gutter: clamp(30px, 5vw, 84px);
  /* Gap between adjacent columns that share a divider rule — the two path
     cards, the three process steps. Capped at 24px: these were running to
     64px and 48px, which pushed each column's copy well off its own rule. */
  --home-col-gap: clamp(16px, 2vw, 24px);
  margin: 0;
  overflow-x: hidden;
  color: var(--home-ink);
  background: var(--home-paper);
  font-family: Manrope, Inter, system-ui, sans-serif;
  text-rendering: optimizeLegibility;
}
/* Type is set globally now (see the `body` and `h1, h2` rules at the top of
   this sheet); the homepage inherits the same stack it used to own. */
.home-page em { font-weight: 500; }
/* The shared gutter, not a centred 1280px column. */
.home-shell {
  width: auto;
  margin-inline: var(--home-gutter);
}
.home-page .home-header {
  height: 82px;
  padding: 0 clamp(24px, 4vw, 64px);
  background: linear-gradient(180deg, rgba(2, 13, 29, .78), rgba(2, 13, 29, 0));
  border-bottom-color: transparent;
  transition: height .35s ease, background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.home-page .home-header.is-scrolled {
  height: 72px;
  background: rgba(3, 16, 34, .9);
  border-bottom-color: rgba(255,255,255,.1);
  backdrop-filter: blur(18px) saturate(140%);
}
/* ── Shared masthead treatment ───────────────────────────────────────────────
   These were scoped to `.home-page .home-header`. Everything below is the link
   and CTA styling rather than the homepage's transparent-over-hero chrome, so
   it now applies to `.site-header` on every page. The transparent background
   and the scroll transition stay homepage-only above — a subpage that opens on
   a white section needs a solid bar to stay readable. */
.site-header .nav-links {
  gap: clamp(18px, 2vw, 34px);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .015em;
}
.site-header .nav-links a {
  position: relative;
  color: rgba(255,255,255,.82);
}
.site-header .nav-links a[aria-current="page"] { color: #fff; }
.site-header .nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: var(--home-blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.site-header .nav-links a:hover::after,
.site-header .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-header .header-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 0;
  color: white;
  font-size: 1rem;
  letter-spacing: .02em;
  transition: color .25s ease, background-color .25s ease;
}
.site-header .header-cta:hover { color: var(--home-navy); background: white; }
.menu-toggle {
  width: 44px;
  height: 44px;
  padding: 12px 8px;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 1px;
  margin: 6px 0;
  background: white;
}

.home-hero {
  position: relative;
  isolation: isolate;
  min-height: max(720px, 100svh);
  overflow: hidden;
  color: white;
  background: var(--home-navy);
  /* A column, so the principles strip can be pushed to the bottom by
     `margin-top: auto` instead of being absolutely positioned there. It used
     to sit at `bottom: 40px` with nothing reserving space for it, so at every
     common laptop height — anything under ~1000px — the CTA row ran straight
     through it and the button collided with its top rule. */
  display: flex;
  flex-direction: column;
}
.home-hero-media,
.home-hero-shade { position: absolute; inset: 0; }
.home-hero-media { z-index: -2; overflow: hidden; }
.home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: home-hero-depth 16s ease-out both;
}
.home-hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(1, 12, 27, .98) 0%, rgba(1, 13, 29, .91) 44%, rgba(1, 14, 31, .48) 71%, rgba(1, 13, 28, .18) 100%),
    linear-gradient(180deg, rgba(2, 12, 27, .16) 40%, rgba(2, 13, 29, .86) 100%);
}
.home-hero-content {
  width: min(720px, calc(100% - 80px));
  /* Spacing keys off viewport height as well as width now. At 22vh with a
     160px floor, a laptop-height window spent so much of the hero on padding
     that the principles strip was pushed off-screen entirely. */
  padding-top: clamp(140px, 25vh, 210px);
  padding-bottom: clamp(28px, 4vh, 48px);
  margin-left: var(--home-gutter);
}
.home-kicker,
.home-section-label,
.home-path-type {
  font-family: Manrope, Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
}
.home-kicker {
  margin: 0 0 16px;
  color: var(--home-blue);
  font-size: 1rem;
  animation: home-hero-in .7s .12s ease-out both;
}
.home-hero h1 {
  max-width: 700px;
  margin: 0;
  color: white;
  /* Bounded by height as well as width. Sized on width alone, three lines of
     100px type on a 800px-tall screen left no room for anything beneath it. */
  /* font-size: clamp(4rem, min(6.25vw, 11vh), 7.3rem); */
  font-weight: 500;
  /* line-height: 1; */
  letter-spacing: -.02em;
  animation: home-hero-in .8s .2s ease-out both;
}
.home-hero h1 em {
  display: block;
  /* background-image: linear-gradient(135deg, var(--color-primary) 0%, oklch(75% .2 220) 100%); */
  color: var(--home-blue);
  -webkit-background-clip: text;
  background-clip: text;
}
.home-hero-lede {
  /* max-width: 590px; */
  margin: 30px 0;
  color: rgba(237,245,255,.8);
  font-size: 1.125rem;
  line-height: 1.5;
  animation: home-hero-in .75s .32s ease-out both;
}
.home-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin-top: clamp(28px, 4vh, 40px);
  animation: home-hero-in .75s .44s ease-out both;
}
.home-button {
  display: inline-flex;
  align-items: center;
  /* `space-between` with a 30px gap left the arrow stranded against the right
     edge on a button only as wide as its own text. Centred with a real gap,
     the label and arrow read as one unit. */
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 0;
  font: 700 .95rem/1 Manrope, Inter, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}
.home-button:hover { transform: translateY(-2px); }
/* The application form's submit stretches to the full column width, where a
   centred label leaves the arrow stranded in the middle. Only there does
   `space-between` earn its keep. */
.home-join-form .home-button { justify-content: space-between; }
.home-button span,
.home-text-link span,
.home-inline-link span { transition: transform .25s ease; }
.home-button:hover span,
.home-text-link:hover span,
.home-inline-link:hover span { transform: translateX(4px); }
/* A flat fill sitting directly on the hero photograph had nothing separating
   it from the image. The shadow is the button's own blue, so it reads as glow
   rather than a grey drop shadow. */
.home-button-primary {
  color: white;
  background: var(--home-blue);
  box-shadow: 0 12px 30px -14px rgba(22, 133, 248, .95);
}
.home-button-primary:hover {
  background: #2b96ff;
  box-shadow: 0 20px 42px -16px rgba(22, 133, 248, 1);
}
.home-text-link,
.home-inline-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  font-size: 1rem;
  font-weight: 700;
}
/* Was a static `border-bottom`. As a pseudo-element it can animate on hover,
   matching the underline the masthead links use. */
.home-text-link::after,
.home-inline-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transform-origin: left;
  transition: opacity .25s ease;
}
.home-text-link:hover::after,
.home-inline-link:hover::after { opacity: 1; }
.home-text-link { color: white; }
/* In flow now, pushed to the foot of the hero column. `margin-top: auto` does
   what `bottom: 40px` was trying to do, except it cannot be overlapped by the
   content above it. */
.home-hero-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1000px, calc(100% - 260px));
  margin-top: auto;
  margin-bottom: clamp(24px, 4vh, 24px);
  margin-left: var(--home-gutter);
  border-top: 1px solid rgba(255,255,255,.24);
  animation: home-hero-in .8s .6s ease-out both;
}
.home-hero-principles p {
  margin: 0;
  padding: 16px 16px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  font-weight: 600;
  /* Was an explicit 0, which left these three the only paragraphs on the page
     without the shared tracking. Delete this line to fall back to the global
     `p` rule — same value either way; it is here only to be explicit. */
  letter-spacing: 0.01rem;
}
.home-hero-principles span {
  margin-right: 10px;
  color: var(--home-blue);
  font-variant-numeric: tabular-nums;
}
.home-scroll-cue {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.home-scroll-cue span {
  position: relative;
  display: inline-block;
  width: 1px;
  height: 24px;
  overflow: hidden;
  background: rgba(255,255,255,.25);
}
.home-scroll-cue span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  animation: home-scroll 2s ease-in-out infinite;
}
@keyframes home-hero-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes home-hero-depth { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes home-scroll { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

.home-section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  color: #52708d;
  font-size: 1rem;
}
.home-section-label::after { content: ""; width: 58px; height: 1px; background: currentColor; opacity: .5; }
.home-section-label.light { color: var(--home-blue); }
.home-purpose { padding-block: clamp(40px, 4vw, 40px); }
.home-purpose-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 16px;
  align-items: start;
}
.home-purpose h2,
.home-comparison h2,
.home-councils h2,
.home-faq h2 {
  margin: 0;
  color: var(--home-ink);
  /* font-size: clamp(3rem, 4.5vw, 5rem); */
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}
.home-purpose-copy p {
  /* The shell no longer caps at 1280px, so this column would otherwise keep
     widening past a readable measure on a large display. In line with the
     420–680px caps the other prose blocks in this section already carry. */
  /* max-width: 560px; */
  margin: 0 0 12px;
  color: #405267;
  font-size: 1.125rem;
  line-height: 1.5;
}
.home-inline-link { color: #0b65bd; }
.home-inline-link.light { color: white; }
.home-standard-line {
  display: grid;
  grid-template-columns: 1fr 2.15fr;
  gap: 40px;
  margin-top: clamp(40px, 4vw, 40px);
  padding-top: 16px;
  border-top: 1px solid rgba(7,26,44,.22);
}
.home-standard-line strong { font-size: 1.125rem; }
.home-standard-line p { margin: 0; color: var(--home-muted); font-size: 1.125rem; }

.home-membership { padding-block: clamp(40px, 4vw, 40px); color: white; background: var(--home-navy); }
.home-membership-head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px;
  /* Was `end`, which sat the standfirst on the heading's last baseline — so it
     started two lines down from the heading it belongs to. Top-aligned, the
     two columns begin together. */
  align-items: start;
}
.home-membership-head h2,
.home-credibility h2,
.home-process h2,
.home-join h2 {
  margin: 0;
  color: white;
  /* font-size: clamp(3rem, 4.5vw, 5rem); */
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}
.home-membership-head h2 em { color: var(--home-blue); }
.home-membership-head > p {
  margin: 0;
  color: #9eb0c4;
  font-size: 1.125rem;
  line-height: 1.5;
}
.home-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: clamp(24px, 3vw, 24px);
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
/* The 88px leading column that held the "A" and the seal is gone, so both
   cards start their copy at the same left edge. */
.home-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 24px var(--home-col-gap) 24px 0;
}
.home-path + .home-path { padding-right: 0; padding-left: var(--home-col-gap); border-left: 1px solid rgba(255,255,255,.18); }
/* Each card carries its own mark (Ambassador badge, Fellow seal), sitting at
   the outer edge of the card at more than twice its old size, where it reads
   as the seal it is rather than as a bullet beside the heading.

   Floated rather than given its own grid column: a column would reserve its
   width down the full height of the card, leaving the Fellow copy in a 367px
   measure against Ambassador's 575px. Floating lets the heading and opening
   lines set beside the seal and everything below it run full width, so the two
   cards read at the same rhythm.

   No `shape-outside: circle()` here, tempting as it is for a disc: on a
   floated <img> Chromium stops painting the image altogether while still
   reserving its float area, so the seal silently disappears. Wrapping to the
   bounding box is fine — the disc nearly fills it. */
.home-path-seal {
  float: right;
  width: auto;
  height: 250px;
  margin: 16px 0 14px clamp(18px, 2vw, 32px);
}
/* The Ambassador badge is a tall hexagon rather than a near-square circle, so
   matching the seal's height leaves it visibly narrower. Cap by width instead
   so the two marks read at the same size, and drop the top margin further
   since the hexagon's point (not a round cap) sits at its very top edge. */
.home-path-badge {
  height: auto;
  width: 200px;
  /* Shorter than the seal at matched width, so it's nudged down by half the
     height difference to keep both marks' vertical centers aligned. */
  margin-top: 32px;
}
.home-path-type { margin: 0 0 16px; color: var(--home-blue); font-size: 1rem; }
.home-path h3 { margin: 0; color: white; font-size: clamp(2.6rem, 3.7vw, 4.4rem); font-weight: 500; letter-spacing: -.02em; }
.home-path-body > p:not(.home-path-type) { margin: 24px 0; color: #aab8c8; font-size: 1.125rem; line-height: 1.5; }
.home-path ul { margin: 0 0 16px; padding: 0; list-style: none; }
.home-path li { position: relative; margin: 13px 0; padding-left: 22px; color: #d8e1eb; font-size: 1rem;letter-spacing: 0.02rem; }
.home-path li::before { content: ""; position: absolute; top: .58em; left: 0; width: 7px; height: 7px; border: 1px solid var(--home-blue); transform: rotate(45deg); }
.home-button-light { color: var(--home-navy); background: white; }
.home-button-light:hover { background: var(--home-blue); }
.home-button-outline { color: white; border-color: rgba(255,255,255,.42); }
.home-button-outline:hover { color: var(--home-navy); background: white; border-color: white; }
.home-comparison-link {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  color: #aab8c8;
  font-size: 1rem;
  font-weight: 700;
}
.home-comparison-link:hover { color: white; }

.home-comparison { padding-block: clamp(40px, 4vw, 40px); }
.home-comparison-title { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 16px; align-items: start; margin-bottom: 24px; }
/* margin: 0 so the browser's default 1em top margin doesn't reintroduce the
   drop that `align-items: start` just removed. Matches .home-membership-head. */
.home-comparison-title p { margin: 0; color: var(--home-muted); font-size: 1.125rem; line-height: 1.5; }
.home-compare { border-top: 2px solid var(--home-ink); }
.home-compare-row { display: grid; grid-template-columns: .4fr 1fr 1.3fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(7,26,44,.18); }
.home-compare-row > span { color: #68788a; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.home-compare-row p { margin: 0; color: #3f5063; font-size: 1.125rem; line-height: 1.5; }
.home-compare-row p strong { color: var(--home-ink); }
.home-compare-head { padding-block: 12px; }
.home-compare-head strong { color: var(--home-ink); font-size: 1.125rem; }

.home-credibility { display: grid; grid-template-columns: 0.88fr 1.12fr; 
  /* min-height: 780px;  */
  color: white; background: #06182c; }
.home-credibility-image { min-height: 650px; overflow: hidden; }
.home-credibility-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .8s ease; }
.home-credibility-image:hover img { transform: scale(1.025); }
.home-credibility-copy { align-self: center; padding: 28px; }
/* .home-credibility h2 { font-size: clamp(3.3rem, 5vw, 6rem); } */
.home-credibility-copy > p { margin: 16px 0 24px; color: #a8b8ca; font-size: 1.125rem; line-height: 1.5; }
.home-credibility ol { margin: 0 0 16px; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.17); }
.home-credibility li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; letter-spacing: 0.02rem; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.17); }
.home-credibility li > span { padding-top: 3px; color: var(--home-blue); font-size: 1rem; letter-spacing: 0.02rem; font-weight: 800; }
.home-credibility li strong { color: white; font-size: 1.125rem; }
.home-credibility li p { margin: 5px 0 0; color: #8fa1b6; font-size: 1rem; line-height: 1.5; letter-spacing: 0.02rem; }

.home-councils { padding-block: clamp(40px, 4vw, 40px); }
.home-councils-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home-councils-intro p { margin: 30px 0 0; color: var(--home-muted); font-size: 1.125rem; line-height: 1.5; }
.home-council-list { border-top: 2px solid var(--home-ink); }
.home-council-list > div { display: grid; grid-template-columns: 52px 1fr 1fr; gap: 16px; align-items: center; min-height: 60px; border-bottom: 1px solid rgba(7,26,44,.18); }
.home-council-list span { color: #1685f8; font-size: 1rem; font-weight: 800; letter-spacing: .1em; }
.home-council-list h3 { margin: 0; color: var(--home-ink); font-size: 1.25rem; }
.home-council-list p { margin: 0; color: var(--home-muted); font-size: 1rem; line-height: 1.5; }

.home-process { padding-block: clamp(40px, 4vw, 40px); color: white; background: #092846; }
/* Single column at every width: the heading takes the full measure and the
   standfirst sits beneath it rather than in a 430px column pinned to the right.
   This is the layout the narrow breakpoint already used; it just starts here
   now instead of at 900px. */
.home-process-head { display: grid; grid-template-columns: 1fr; gap: 22px; }
.home-process-head p { max-width: none; margin: 0; color: #a6bad0; font-size: 1.125rem; line-height: 1.5; }
.home-process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 36px; border-top: 1px solid rgba(255,255,255,.19); }
.home-process-steps article { padding: 20px var(--home-col-gap) 0 0; }
.home-process-steps article + article { padding-left: var(--home-col-gap); border-left: 1px solid rgba(255,255,255,.19); }
.home-process-steps span { color: var(--home-blue); font-size: 1rem; font-weight: 800; }
.home-process-steps h3 { margin: 16px 0 16px; color: white; font-size: 1.35rem; }
.home-process-steps p { max-width: 310px; margin: 0; color: #9db0c4; font-size: 1rem; line-height: 1.5; }

.home-faq { padding-block: clamp(40px, 4vw, 40px); }
.home-faq-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 16px; }
.home-faq-title p { margin: 30px 0 0; color: var(--home-muted); font-size: 1.125rem; line-height: 1.5; }
.home-page .home-faq .faq-list { border-top: 2px solid var(--home-ink); }
.home-page .home-faq .faq-list details,
.home-page .home-faq .faq-list details[open] { padding: 16px 0; border-bottom: 1px solid rgba(7,26,44,.18); border-radius: 0; color: var(--home-ink); background: transparent; }
.home-page .home-faq .faq-list summary { color: var(--home-ink); font-size: 1.125rem; }
.home-page .home-faq .faq-list summary::after { content: "+"; color: #47708f; font-size: 1.3rem; font-weight: 400; }
.home-page .home-faq .faq-list details[open] summary::after { content: "−"; }
.home-page .home-faq .faq-list p { margin: 15px 42px 0 0; color: var(--home-muted); font-size: 1.125rem; line-height: 1.5; }

.home-join {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 16px;
  /* Vertical is this section's own; horizontal must stay on the shared gutter.
     A single-value shorthand here put the copy at 28px while every other
     section sat at 84px, so this block started well left of the page. */
  padding: 28px var(--home-gutter);
  color: white;
  background: var(--home-navy);
}
.home-join-intro { align-self: start; position: sticky; top: 120px; }
/* .home-join h2 { font-size: clamp(3.6rem, 5.4vw, 6.4rem); } */
.home-join-intro > p { margin: 30px 0; color: #a9b8c8; font-size: 1.125rem; line-height: 1.5; }
.home-join-notes { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 40px; }
.home-join-notes span { color: var(--home-blue); font-size: 1rem; font-weight: 700; }
.home-join-notes span::before { content: "◆"; margin-right: 8px; font-size: .48rem; }
.home-page .home-join-form {
  display: grid;
  gap: 16px;
  padding: 24px 32px;
  border: 0;
  border-radius: 0;
  color: var(--home-ink);
  background: var(--home-white);
}
.home-form-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(7,26,44,.16); }
.home-form-heading span { font-family: Newsreader, Georgia, serif; font-size: 1.8rem; font-weight: 600; }
.home-form-heading p { margin: 0; color: var(--home-muted); font-size: .82rem; }
.home-page .home-join-form label { display: grid; color: #3f4e5e; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.home-page .home-join-form input,
.home-page .home-join-form select,
.home-page .home-join-form textarea {
  /* min-height: 50px; */
  font-weight: 500;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(7,26,44,.27);
  border-radius: 0;
  color: var(--home-ink);
  background: transparent;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  resize: vertical;
}
.home-page .home-join-form input:focus,
.home-page .home-join-form select:focus,
.home-page .home-join-form textarea:focus { border-color: var(--home-blue); box-shadow: none; }
.home-page .home-join-form .word-counter { font-family: sans-serif; text-transform: none; letter-spacing: 0; font-weight: 500; }
.home-page .home-join-form .home-form-hint { color: var(--home-muted); font-size: .82rem; font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.home-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home-page .home-join-form .home-button { width: 100%; margin-top: 8px; border: 0; color: white; }
.home-page .home-join-form .form-consent { color: #738092; font-size: 1rem; text-align: left; }
.home-page .home-join-form .form-consent a { color: #0a68c5; text-decoration: underline; }
.home-page .home-join-form .form-message { color: #0a68c5; font-size: .92rem; }
.home-page .home-join-form .form-message[data-tone="ok"] { color: #087b49; }
.home-page .home-join-form .form-message[data-tone="error"] { color: #b62727; }
.home-form-fieldset { display: grid; gap: 10px; }
.home-form-legend { color: #3f4e5e; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.home-page .home-join-form .domain-checklist { grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.home-page .home-join-form .domain-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 0;
  color: var(--home-ink);
  font-size: 0.92rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.home-page .home-join-form .domain-check input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
}

.home-page .home-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px var(--home-gutter);
  color: #8598ad;
  background: #020c1b;
}
.home-footer .brand-mark { display: block; width: min(330px, 100%); height: auto; }
.home-footer > p { margin: 8px 0 0; text-align: right; font-size: 1rem; }
/* Left-aligned, not centred. The centring came from the base `.footer-links`
   rule and suited the original three-column footer (brand | tagline | nav);
   with the brand and tagline commented out, it left the links floating in the
   middle of their column instead of sitting on the page gutter. */
.home-footer .footer-links { justify-content: flex-start; flex-wrap: wrap; gap: 16px 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.home-footer .footer-links a { color: #a3b2c3; font-size: .86rem; }
.home-footer .home-footer-legal { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }

.home-page.motion-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1); }
.home-page.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1150px) {
  .home-page .home-header { grid-template-columns: 1fr auto; }
  .home-page .home-header .nav-links {
    top: 72px;
    right: 20px;
    left: 20px;
    gap: 0;
    padding: 16px 22px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
    background: rgba(3,19,38,.98);
    box-shadow: 0 24px 50px rgba(0,0,0,.32);
  }
  .home-page .home-header .nav-links a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .home-page .home-header .nav-links a:last-child { border-bottom: 0; }
}

@media (max-width: 900px) {
  /* One value moves the whole page's gutter. */
  .home-page { --home-gutter: 24px; }
  .home-hero-content { width: min(610px, calc(100% - 48px)); padding-top: 170px; }
  .home-hero-shade { background: linear-gradient(90deg, rgba(1,12,27,.96), rgba(1,13,29,.68)), linear-gradient(180deg, transparent 35%, rgba(2,13,29,.92)); }
  /* Inset/offsets became margins when the strip moved into flow. The scroll cue
     is hidden here, so the strip can take the full width. */
  .home-hero-principles { width: auto; margin-right: var(--home-gutter); margin-bottom: 24px; }
  .home-scroll-cue { display: none; }
  .home-purpose-grid,
  .home-membership-head,
  .home-comparison-title,
  .home-councils-grid,
  .home-process-head,
  .home-faq-grid,
  .home-join { grid-template-columns: 1fr; }
  .home-standard-line { grid-template-columns: .8fr 1.2fr; }
  /* .home-process-head no longer needs a margin here — its base rule is
     single-column with a gap, so this breakpoint changes nothing for it. */
  .home-membership-head > p,
  .home-comparison-title p { margin: 24px 0 0; }
  .home-paths { grid-template-columns: 1fr; }
  .home-path + .home-path { padding-left: 0; border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
  .home-credibility { grid-template-columns: 1fr; }
  .home-credibility-image { min-height: 520px; max-height: 68vw; }
  .home-councils-grid,
  .home-faq-grid { gap: 70px; }
  /* gutter comes from --home-gutter now */
  .home-join-intro { position: static; }
}

@media (max-width: 680px) {
  .home-page .home-header { height: 70px; padding-inline: 18px; }
  .home-page .home-header .brand-mark { width: 240px; }
  .home-page { --home-gutter: 18px; }
  .home-hero { min-height: 720px; }
  .home-hero-media img { object-position: 62% center; }
  .home-hero-shade { background: linear-gradient(90deg, rgba(1,12,27,.94), rgba(1,13,29,.57)), linear-gradient(180deg, rgba(2,12,27,.12) 20%, rgba(2,13,29,.95) 84%); }
  .home-hero-content { width: calc(100% - 36px); padding-top: 132px; }
  .home-kicker { margin-bottom: 22px; font-size: 1rem; }
  .home-hero h1 { font-size: clamp(3.25rem, 16vw, 4.65rem); }
  .home-hero-lede { margin-top: 24px; font-size: .96rem; line-height: 1.5; }
  .home-hero-actions { align-items: flex-start; flex-direction: column; gap: 22px; margin-top: 16px; }
  .home-button { width: 100%; }
  .home-hero-principles { grid-template-columns: 1fr; width: auto; margin-right: var(--home-gutter); margin-bottom: 22px; }
  .home-hero-principles p { display: none; padding-top: 14px; }
  .home-hero-principles p:first-child { display: block; }
  .home-section-label { margin-bottom: 24px; }
  .home-purpose h2,
  .home-comparison h2,
  .home-councils h2,
  /* .home-faq h2 { font-size: clamp(2.75rem, 13vw, 4rem); } */
  .home-purpose-grid { gap: 38px; }
  .home-standard-line { grid-template-columns: 1fr; gap: 12px; margin-top: 64px; }
  .home-membership-head h2,
  .home-credibility h2,
  .home-process h2,
  /* .home-join h2 { font-size: clamp(3rem, 14vw, 4.5rem); } */
  .home-path { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  /* Too narrow for text to set beside the seal: it stops floating and sits
     above the copy, still larger than the 64px it used to be. */
  .home-path-seal { float: none; width: 150px; height: auto; margin: 0 0 18px; }
  .home-path-badge { width: 150px; }
  .home-compare-head { display: none; }
  .home-compare-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .home-compare-row p::before { display: block; margin-bottom: 5px; color: #1685f8; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
  .home-compare-row p:nth-child(2)::before { content: "Ambassador"; }
  .home-compare-row p:nth-child(3)::before { content: "Fellow"; }
  .home-credibility-image { min-height: 390px; max-height: none; }
  .home-credibility-copy { padding: 76px 18px; }
  .home-council-list > div { grid-template-columns: 40px 1fr; gap: 14px; padding: 20px 0; }
  .home-council-list p { grid-column: 2; }
  .home-process-steps { grid-template-columns: 1fr; margin-top: 60px; }
  .home-process-steps article,
  .home-process-steps article + article { padding: 16px 0 16px; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.19); }
  .home-process-steps h3 { margin-top: 24px; }
  .home-join { gap: 56px; padding: 84px var(--home-gutter); }
  .home-page .home-join-form { padding: 28px 20px; }
  .home-form-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .home-form-row { grid-template-columns: 1fr; gap: 16px; }
  .home-page .home-footer { grid-template-columns: 1fr; padding: 24px var(--home-gutter) 16px; }
  .home-footer > p { text-align: left; }
  .home-footer .home-footer-legal { padding-top: 0; border-top: 0; }
}

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

/* ── Accessibility layer ─────────────────────────────────────────────────────
   Appended last so it wins over the component styles above at equal
   specificity. Everything here is a baseline the rest of the sheet had no
   answer for, not a restyle of anything that already worked.               */

/* Keyboard focus. `a { color: inherit; text-decoration: none }` at the top of
   this sheet strips the only default affordance links have, and the buttons
   are all custom-painted, so without this rule a keyboard user crossing the
   site has no idea where they are. Two rings — a dark inner and a light outer
   halo — so the same declaration stays visible on the navy sections and on
   the white ones without needing a per-section override. */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 6px rgba(3, 21, 47, 0.55);
}
/* On light sections the navy halo is the wrong way round: swap it for a light
   one so the cyan ring keeps its contrast against white. */
.section-light :focus-visible,
.legal-page :focus-visible,
.portal-section :focus-visible,
.join-section :focus-visible,
.process-section :focus-visible {
  outline-color: var(--blue);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85);
}
/* Pointer users keep the old borderless look. */
:focus:not(:focus-visible) { outline: none; }

/* Skip link — first tabbable element on every page, visible only once
   focused. Without it, keyboard and screen-reader users tab the full primary
   nav on every page load before reaching any content. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -120%);
  padding: 12px 22px;
  border-radius: 0 0 10px 10px;
  background: var(--cyan);
  color: var(--ink);
  font-weight: 700;
  transition: transform .18s ease;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* The section the skip link lands on should not sit under the fixed header. */
main:target,
main[id]:focus {
  outline: none;
  scroll-margin-top: 96px;
}
/* Same for every in-page anchor target: the fixed masthead would otherwise
   cover the heading the reader just jumped to. */
:target { scroll-margin-top: 96px; }

/* Reduced motion, applied site-wide. The existing rule above only covers
   `.home-page`, so the eight other pages kept `html { scroll-behavior: smooth }`
   and every hover transition regardless of the user's setting. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* `hidden` is used throughout the two portals to switch cards in and out. Any
   component rule that sets `display` would silently beat it, so pin it here. */
[hidden] { display: none !important; }

/* In the drawer the links are full-width blocks, so the hover/current underline
   stretches edge to edge and reads as a divider rather than an indicator. The
   brighter link colour carries `aria-current` on its own down here. */
@media (max-width: 1150px) {
  .site-header .nav-links a::after { content: none; }
}

/* ── Mobile masthead ─────────────────────────────────────────────────────────
   The logo is width-clamped sitewide now, so the phone sizes are a single
   step down rather than the three height overrides this block used to carry. */
@media (max-width: 600px) {
  .brand-mark { width: 240px; }
}
@media (max-width: 400px) {
  .brand-mark { width: 200px; }
}

/* Newsreader is the display face for editorial headings. Inside the two
   application portals, though, `h2` is interface chrome — card titles, status
   banners, the sidebar heading — where a serif reads as decoration rather than
   hierarchy. Those opt back into the body face. */
.sidebar-title,
.portal-card h2,
.portal-status-card h2,
.portal-panel-status-card h2,
.portal-approved h2,
.portal-rejected h2 {
  font-family: Manrope, Inter, system-ui, sans-serif;
}

/* Amber advisory box. It was defined inline in panel-apply.html only; the
   Fellow portal now uses it too, so it lives here. */
.notice-box {
  background: #fffbea;
  border: 1px solid #f0cc5a;
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #5a4a00;
  line-height: 1.45;
  text-align: left;
}
.notice-box strong { color: #3d3000; }
.notice-box a { color: #0356bd; text-decoration: underline; }