/* ============================================================================
   Snacks for Thought — Landing page
   Self-contained, light-only branded surface. All classes namespaced `sft-`.
   Authored from the "Landing Page" design (Archivo + Hanken Grotesk),
   converted from inline styles to class-based CSS so it can be *genuinely*
   optimised for mobile (media queries, not squishing).
   ========================================================================== */

.sft-landing {
  --sft-bg: #EDE9E0;
  --sft-surface: #FBFAF6;
  --sft-ink: #16201A;
  --sft-ink-2: #3A433C;
  --sft-ink-3: #4A544B;
  --sft-ink-4: #5C665B;
  --sft-ink-5: #6C766C;
  /* Muted greys darkened to clear WCAG AA (≥4.5:1) on the --sft-bg #EDE9E0 page;
     used only as secondary/caption text on light surfaces, never on dark fills. */
  --sft-muted: #5C645A;
  --sft-muted-2: #616860;
  --sft-muted-3: #646B60;
  --sft-green: #00A24B;
  --sft-green-lite: #0CBF63;
  --sft-green-dark: #016E37;
  --sft-green-deep: #018442;
  --sft-mint: #4FD089;
  --sft-orange: #EF8A17;
  --sft-red: #EF2917;
  --sft-night: #16201A;
  --sft-night-ink: #F4F1E9;
  --sft-line: rgba(22, 32, 26, 0.10);
  --sft-line-2: rgba(22, 32, 26, 0.16);
  --sft-shadow-card: 0 30px 60px -34px rgba(22, 32, 26, 0.40);
  --sft-maxw: 1340px;
  --sft-pad-x: 40px;

  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(120% 90% at 100% -10%, rgba(0, 162, 75, 0.05), transparent 55%),
    radial-gradient(90% 70% at -10% 30%, rgba(1, 110, 55, 0.04), transparent 50%),
    var(--sft-bg);
  color: var(--sft-ink);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
/* NOTE: no overflow on .sft-landing. overflow-x:hidden would force overflow-y to
   compute as auto, making .sft-landing the scroll container and breaking the
   sticky header + scroll-spy. The scroller stays #view (horizontal bleed is
   clipped on #view below). */

.sft-landing *,
.sft-landing *::before,
.sft-landing *::after { box-sizing: border-box; }

.sft-landing ::selection { background: rgba(0, 162, 75, 0.18); }

.sft-landing a { color: inherit; text-decoration: none; }

/* Force a light surface even if the dashboard's dark theme is active. */
body.sft-landing-active { background: #EDE9E0; }
body.sft-landing-active .floating-theme-btn { display: none !important; }

/* The landing/home page must never inherit the app's dark theme. body.dark
   flips the shared design tokens (--ink, --card-end, --green, ...) that the
   wizard's shared components consume, so the simulator would render dark.
   Re-declare those tokens to their :root light values here. This block loads
   after styles.css, so at equal specificity (body.dark vs
   body.sft-landing-active) it wins whenever both classes are present. */
body.sft-landing-active.dark,
body.sft-landing-active {
  --bg: radial-gradient(ellipse 120% 80% at 50% 0%, #f5f3ec 0%, #efece4 50%, #e8e5dc 100%);
  --bg-glow-1: rgba(0, 162, 99, .07);
  --bg-glow-2: rgba(95, 75, 182, .04);
  --bg-glow-3: rgba(0, 100, 50, .04);
  --card-start: rgba(255, 255, 255, .97);
  --card-end: rgba(250, 248, 242, .96);
  --card-rim: rgba(255, 255, 255, .8);
  --card-border: rgba(20, 36, 27, .06);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 8px rgba(30, 35, 40, .08), 0 12px 32px rgba(30, 35, 40, .06);
  --blur: none;
  --ink: #1b1b1a;
  --ink-mid: #4a4a48;
  --muted: #7c7c77;
  --hairline: rgba(20, 36, 27, .08);
  --hover-bg: rgba(20, 36, 27, .04);
  --active-bg: rgba(20, 36, 27, .06);
  --green: #00a263;
  --green-soft: #00c47a;
  --green-dim: rgba(0, 162, 99, .45);
  --red: #d86251;
  --amber: #e8b554;
  --nav-active-border: rgba(20, 36, 27, .07);

  /* Redesign foundation tokens (styles.css :root, added PR-1+). body.dark flips
     these too, and .card/.badge/inputs now consume them directly (e.g.
     .card { background: var(--surface) }). Without pinning them light here, the
     home page renders dark cards/borders when the app's dark theme is active
     (the sponsorship review stage leaked dark). Pin to their :root light values. */
  --main-bg: #EDE9E0;
  --surface: #FBFAF6;
  --surface-2: #F3EFE6;
  --ink-soft: #4A544B;
  --border: rgba(22, 32, 26, .10);
  --border-strong: rgba(22, 32, 26, .18);
  --chip: rgba(22, 32, 26, .05);
  --bar-track: rgba(22, 32, 26, .07);
  --accent: #00A24B;
  --accent-ink: #018442;
  --accent-soft: rgba(0, 162, 75, .12);
  --danger: #D6453B;
  --danger-soft: rgba(214, 69, 59, .08);
  --danger-border: rgba(214, 69, 59, .22);
  --shadow-card: 0 18px 40px -36px rgba(22, 32, 26, .5);
  --shadow-hover: 0 26px 50px -30px rgba(22, 32, 26, .45);
  color-scheme: light;
}
/* select.field uses a hardcoded dark `background` shorthand under body.dark
   (specificity 0,2,2) which both darkens it AND wipes the chevron image. Re-set
   color + chevron here at matching specificity (loads later, so it wins). */
body.sft-landing-active select.field {
  background-color: #fff; color: var(--sft-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c7c77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
body.sft-landing-active select.field option { background-color: #fff; color: var(--sft-ink); }

/* Shared keyframes */
@keyframes sft-pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sft-lineIn { from { opacity: 0; transform: translateY(116%); filter: blur(7px); } 58% { filter: blur(0); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes sft-fadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sft-press-pop { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------- Layout */
.sft-container { max-width: var(--sft-maxw); margin: 0 auto; width: 100%; }
.sft-section { padding: clamp(72px, 9vw, 128px) var(--sft-pad-x); }
.sft-section--tight { padding: clamp(40px, 6vw, 80px) var(--sft-pad-x) clamp(72px, 9vw, 120px); }

.sft-eyebrow {
  display: inline-flex; align-items: center; gap: 11px; margin-bottom: 18px;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--sft-green-deep);
}
.sft-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--sft-green); flex: none; }
.sft-eyebrow--center { justify-content: center; }
.sft-eyebrow--mint { color: var(--sft-mint); }
.sft-eyebrow--mint::before { background: var(--sft-mint); }

.sft-h2 {
  margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 115%;
  font-size: clamp(32px, 4.6vw, 58px); line-height: 1.0; letter-spacing: -0.022em;
  color: var(--sft-ink);
}
.sft-lead { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--sft-ink-3); }
.sft-section-head { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.sft-section-head .sft-lead { margin-inline: auto; max-width: 520px; }

/* ---------------------------------------------------------------- Header */
.sft-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: rgba(9, 14, 10, 0.30);
  -webkit-backdrop-filter: saturate(1.55) blur(18px);
  backdrop-filter: saturate(1.55) blur(18px);
  box-shadow: 0 18px 44px -34px rgba(0, 0, 0, 0.66);
  transition: background .4s ease, box-shadow .4s ease, border-color .4s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
}
/* Glassmorphism bar once scrolled — content passes cleanly *under* a frosted pane. */
.sft-header.is-scrolled {
  background: rgba(9, 14, 10, 0.62);
  -webkit-backdrop-filter: saturate(1.8) blur(24px);
  backdrop-filter: saturate(1.8) blur(24px);
  box-shadow: 0 20px 54px -28px rgba(0, 0, 0, 0.72);
}
.sft-header__inner {
  position: relative;
  max-width: none; margin: 0;
  padding: 16px var(--sft-pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.sft-brand { display: flex; align-items: center; gap: 12px; }
.sft-brand__logo {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
  padding: 3px; overflow: hidden;
  background: rgba(251, 250, 246, 0.92);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(251, 250, 246, 0.18);
}
.sft-brand__logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sft-brand__text { display: flex; flex-direction: column; line-height: 1.08; }
.sft-brand__name {
  display: block;
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 118%;
  font-size: 15px; letter-spacing: .01em; color: var(--sft-ink);
}
.sft-brand__sub {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sft-muted);
}

/* Header text adapts: light over the dark hero, dark on the frosted bar. */
.sft-header .sft-brand__name { color: #FBFAF6; }
.sft-header .sft-brand__sub { color: rgba(251, 250, 246, 0.72); }
.sft-header.is-scrolled .sft-brand__name { color: #FBFAF6; }
.sft-header.is-scrolled .sft-brand__sub { color: rgba(251, 250, 246, 0.74); }

.sft-nav { display: flex; align-items: center; gap: 34px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sft-header .sft-nav__link {
  position: relative; font-size: 14.5px; font-weight: 600; padding: 6px 2px;
  color: rgba(251, 250, 246, 0.82); transition: color .25s ease;
}
.sft-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--sft-mint); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) {
  .sft-nav__link:hover { color: #FFFFFF; }
  .sft-nav__link:hover::after { transform: scaleX(1); }
}
.sft-nav__link.is-active { color: #FFFFFF; }
.sft-nav__link.is-active::after { transform: scaleX(1); }

/* Scrolled (frosted) bar — switch nav to dark ink + green underline. */
.sft-header.is-scrolled .sft-nav__link { color: rgba(251, 250, 246, 0.86); }
.sft-header.is-scrolled .sft-nav__link::after { background: var(--sft-mint); }
@media (hover: hover) { .sft-header.is-scrolled .sft-nav__link:hover { color: #FFFFFF; } }
.sft-header.is-scrolled .sft-nav__link.is-active { color: #FFFFFF; }
.sft-header.is-scrolled .sft-nav__link.is-active::after { background: var(--sft-mint); }

.sft-header__actions { display: flex; align-items: center; gap: 14px; }
.sft-header .sft-signin {
  font-weight: 600; font-size: 14.5px; color: rgba(251, 250, 246, 0.88); padding: 10px 6px;
  position: relative; transition: color .25s ease;
}
.sft-signin::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 2px;
  background: var(--sft-mint); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center; transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) {
  .sft-signin:hover { color: #FFFFFF; }
  .sft-signin:hover::after { transform: scaleX(1); }
}
.sft-header.is-scrolled .sft-signin { color: rgba(251, 250, 246, 0.90); }
.sft-header.is-scrolled .sft-signin::after { background: var(--sft-mint); }
@media (hover: hover) { .sft-header.is-scrolled .sft-signin:hover { color: #FFFFFF; } }

/* ----------------------------------------------------------- Buttons */
.sft-btn {
  --press: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14.5px;
  border: none; cursor: pointer; border-radius: 999px; padding: 11px 20px;
  color: #FBFAF6; line-height: 1.1; -webkit-tap-highlight-color: transparent;
  user-select: none; white-space: nowrap;
}
.sft-btn:focus-visible { outline: 3px solid rgba(0, 162, 75, 0.45); outline-offset: 2px; }
.sft-btn:active { animation: sft-press-pop .26s ease; }

/* Primary — gradient sweep + lift, distinct press */
.sft-btn--primary {
  background: linear-gradient(110deg, #00A24B 0%, #0BC25E 42%, #016E37 100%);
  background-size: 200% 100%; background-position: 0% 50%;
  box-shadow: 0 8px 20px rgba(0, 162, 75, 0.26);
  transition: background-position .55s ease, box-shadow .4s ease, letter-spacing .4s ease, transform .25s cubic-bezier(.34, 1.4, .5, 1);
}
@media (hover: hover) {
  .sft-btn--primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 14px 28px -8px rgba(1, 110, 55, 0.55);
    letter-spacing: .012em; transform: translateY(-1px);
  }
}
.sft-btn--primary:active { transform: translateY(0) scale(.96); }

/* Large primary (hero / simulator) */
.sft-btn--lg { font-size: 16px; padding: 17px 30px; }
.sft-btn--lg.sft-btn--primary {
  background: linear-gradient(120deg, #00A24B, #0cbf63, #018442);
  background-size: 200% 100%; background-position: 0% 50%;
  box-shadow: 0 12px 28px -6px rgba(0, 162, 75, 0.4);
  transition: background-position .65s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease, transform .45s cubic-bezier(.34, 1.4, .5, 1);
}
@media (hover: hover) {
  .sft-btn--lg.sft-btn--primary:hover { background-position: 100% 50%; transform: translateY(-3px); box-shadow: 0 22px 42px -10px rgba(0, 162, 75, 0.6); }
}
.sft-btn--lg.sft-btn--primary:active { transform: translateY(-1px) scale(.98); }

/* Outline that fills from the bottom on hover */
.sft-btn--ghostfill {
  color: var(--sft-ink); background: transparent;
  border: 1.5px solid rgba(22, 32, 26, 0.22);
  box-shadow: inset 0 0 0 0 var(--sft-ink); font-size: 16px; padding: 17px 26px;
  transition: box-shadow .5s cubic-bezier(.4, 0, .2, 1), color .4s ease, border-color .4s ease, transform .25s ease;
}
@media (hover: hover) {
  .sft-btn--ghostfill:hover { box-shadow: inset 0 -70px 0 0 var(--sft-ink); color: #FBFAF6; border-color: var(--sft-ink); }
}
.sft-btn--ghostfill:active { box-shadow: inset 0 -70px 0 0 #02351f; transform: scale(.98); }

/* Light button (on dark CTA) */
.sft-btn--light {
  background: #FBFAF6; color: var(--sft-green-dark); font-size: 16px; padding: 17px 32px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  transition: background .5s ease, color .5s ease, transform .45s cubic-bezier(.34, 1.4, .5, 1), box-shadow .4s ease;
}
@media (hover: hover) {
  .sft-btn--light:hover { background: #FCE7BE; color: #0a5e34; transform: translateY(-3px) scale(1.04); box-shadow: 0 24px 44px rgba(0, 0, 0, 0.28); }
}
.sft-btn--light:active { transform: translateY(-1px) scale(1.0); }

.sft-btn--ghostlight {
  color: #FFFFFF; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 0 #FBFAF6; font-size: 16px; padding: 17px 30px;
  transition: box-shadow .5s cubic-bezier(.4, 0, .2, 1), color .4s ease, border-color .4s ease, transform .25s ease;
}
@media (hover: hover) {
  .sft-btn--ghostlight:hover { box-shadow: inset 0 -66px 0 0 #FBFAF6; color: var(--sft-green-dark); border-color: #FBFAF6; }
}
.sft-btn--ghostlight:active { box-shadow: inset 0 -66px 0 0 #e7dfce; transform: scale(.98); }

/* Mobile menu toggle (hamburger) — hidden on desktop */
.sft-burger {
  display: none; width: 44px; height: 44px; border: none; background: transparent;
  cursor: pointer; align-items: center; justify-content: center; color: #FBFAF6;
  border-radius: 12px; -webkit-tap-highlight-color: transparent; flex: none;
  transition: color .3s ease, background .2s ease;
}
.sft-burger svg { width: 26px; height: 26px; }
.sft-burger:active { background: rgba(255, 255, 255, 0.12); }
.sft-header.is-scrolled .sft-burger { color: #FBFAF6; }
.sft-header.is-scrolled .sft-burger:active { background: rgba(255, 255, 255, 0.12); }

.sft-mobile-menu { display: none; }

/* ---------------------------------------------------------------- Hero */
.sft-hero {
  position: relative;
  margin-top: -76px;                 /* sit behind the sticky, transparent header */
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(140px, 22vh, 250px) var(--sft-pad-x) clamp(80px, 13vh, 140px);
  background-color: #0B100C;
  background-size: cover; background-position: center 28%; background-repeat: no-repeat;
  color: #FBFAF6; overflow: hidden;
}
/* Bottom blend into the paper page below. */
.sft-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: linear-gradient(to bottom, rgba(237, 233, 224, 0), var(--sft-bg));
  pointer-events: none; z-index: 1;
}
.sft-hero__inner { position: relative; z-index: 2; max-width: var(--sft-maxw); margin: 0 auto; width: 100%; }
.sft-hero__title {
  margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%;
  font-size: clamp(40px, 6.2vw, 96px); line-height: 0.96; letter-spacing: -0.028em; color: #FBFAF6;
  text-shadow: 0 2px 36px rgba(0, 0, 0, 0.30);
}
.sft-hero__title .sft-line-mask { display: block; overflow: hidden; padding-bottom: 0.03em; }
.sft-hero__title .sft-line { display: block; text-wrap: balance; }
.sft-hero__title em { font-style: normal; color: var(--sft-mint); }
.sft-hero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: end; margin-top: 38px;
}
.sft-hero__lead { max-width: 560px; margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: rgba(244, 241, 233, 0.88); }
.sft-hero__lead b { color: #FFFFFF; font-weight: 700; }
.sft-hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sft-map-tag {
  font-family: 'Geist Mono', monospace; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #8B8474; background: rgba(251, 250, 246, 0.7); padding: 8px 16px; border-radius: 999px; text-align: center;
}

/* ----------------------------------------------------- President quote */
.sft-pres__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.sft-pres__photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--sft-line); box-shadow: 0 30px 70px -34px rgba(22, 32, 26, 0.34);
  background-color: #E4DECF;
  background-image: repeating-linear-gradient(135deg, #E3DED2 0 14px, #E9E4D8 14px 28px);
  background-size: cover; background-position: center top;
}
.sft-pres__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sft-pres__photo::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(to top, rgba(7, 11, 8, 0.82) 0%, rgba(7, 11, 8, 0.5) 36%, rgba(7, 11, 8, 0.12) 70%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.sft-pres__cap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; }
.sft-pres__cap-kicker { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 7px; }
.sft-pres__cap-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 108%; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.12; color: #FBFAF6; }
.sft-pres__mark { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%; font-size: 64px; line-height: 0.7; color: var(--sft-green); height: 38px; }
.sft-pres__quote { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; font-stretch: 108%; font-size: clamp(26px, 3.3vw, 46px); line-height: 1.16; letter-spacing: -0.02em; color: var(--sft-ink); text-wrap: pretty; }
.sft-pres__body { margin: 26px 0 0; max-width: 560px; font-size: 16.5px; line-height: 1.65; color: var(--sft-ink-3); }
.sft-pres__sign { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.sft-pres__sign::before { content: ""; width: 42px; height: 2px; background: var(--sft-ink); flex: none; }
.sft-pres__sign-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; color: var(--sft-ink); }
.sft-pres__sign-role { font-size: 13px; color: var(--sft-ink-5); font-weight: 500; margin-top: 2px; }

/* ---------------------------------------------------- Cards (ecosystem/steps) */
.sft-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); }
.sft-card {
  background: var(--sft-surface); border: 1px solid var(--sft-line); border-radius: 22px;
  padding: clamp(26px, 3vw, 38px);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
@media (hover: hover) {
  .sft-card:hover { transform: translateY(-6px); box-shadow: var(--sft-shadow-card); }
}
.sft-card__icon { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.sft-card__icon svg { width: 24px; height: 24px; }
.sft-card__icon--red { background: rgba(239, 41, 23, 0.10); color: var(--sft-red); }
.sft-card__icon--orange { background: rgba(239, 138, 23, 0.12); color: var(--sft-orange); }
.sft-card__icon--green { background: rgba(0, 162, 75, 0.10); color: var(--sft-green); }
.sft-card h3 { margin: 22px 0 8px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; color: var(--sft-ink); }
.sft-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sft-ink-4); }

.sft-step__num {
  width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 120%; font-size: 24px; color: #FBFAF6;
}
.sft-step__num--1 { background: linear-gradient(140deg, #00A24B, #0cbf63); box-shadow: 0 14px 28px -12px rgba(0, 162, 75, 0.6); }
.sft-step__num--2 { background: linear-gradient(140deg, #EF8A17, #F7A53D); box-shadow: 0 14px 28px -12px rgba(239, 138, 23, 0.55); }
.sft-step__num--3 { background: linear-gradient(140deg, #EF2917, #F4502F); box-shadow: 0 14px 28px -12px rgba(239, 41, 23, 0.5); }
.sft-card h3.sft-step__title { margin: 24px 0 10px; font-size: 22px; }
.sft-card .sft-step__title + p { font-size: 15.5px; }

/* --------------------------------------------------------- Programme scale */
.sft-scale-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: clamp(34px, 4vw, 52px); flex-wrap: wrap; }
.sft-scale-head .sft-h2 { max-width: 16ch; }
.sft-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1.5px solid rgba(22, 32, 26, 0.16); padding-top: clamp(30px, 3.4vw, 48px); }
.sft-stat { text-align: center; padding: 0 clamp(12px, 2vw, 28px); }
.sft-stat + .sft-stat { border-left: 1px solid rgba(22, 32, 26, 0.13); }
.sft-stat__num { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%; font-size: clamp(38px, 4.6vw, 74px); line-height: 0.9; letter-spacing: -0.035em; color: var(--sft-ink); font-variant-numeric: tabular-nums; }
.sft-stat__num .sft-stat__suffix { font-size: 0.4em; letter-spacing: 0; color: var(--sft-green); vertical-align: 0.18em; }
.sft-stat__label { font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sft-ink-4); margin-top: 14px; }

/* ---------------------------------------------------- Feed (dark) section */
.sft-feed { padding: clamp(72px, 9vw, 128px) var(--sft-pad-x); background: var(--sft-night); color: var(--sft-night-ink); position: relative; overflow: hidden; }
.sft-feed__grid { max-width: var(--sft-maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.sft-feed h2 { color: #FBFAF6; }
.sft-feed__copy { margin: 18px 0 0; max-width: 430px; font-size: 16.5px; line-height: 1.6; color: #B7BEB4; }
.sft-feed__map { margin-top: 30px; height: clamp(320px, 34vw, 540px); border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.10); background: repeating-linear-gradient(135deg, #1E2A23 0 16px, #22302794 16px 32px); position: relative; display: flex; align-items: center; justify-content: center; }
.sft-feed__map .sft-map-tag { color: #7E897E; background: rgba(22, 32, 26, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); }
/* Real interactive map once loaded — equal padding all round, map centred. */
.sft-feed__map.is-loaded { background: rgba(255, 255, 255, 0.02); padding: 18px; display: flex; align-items: center; justify-content: center; }
.sft-feed__map .nigeria-map { width: 100%; height: 100%; display: block; }
.sft-feed__map .nigeria-map path {
  stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.6; cursor: pointer;
  transition: fill .25s ease, filter .2s ease, stroke .2s ease, stroke-width .2s ease;
}
/* Public showcase map: every zone is always coloured by geopolitical zone,
   independent of which states are active. (The landing calls renderNigeriaMap
   with showActiveState:false, so the admin's .inactive greying is never applied
   here.) The map stays static; hover emphasis lives on the bar chart below. */
.sft-feed__map .nigeria-map path.zone-nw { fill: rgba(243, 182, 66, 0.55); }
.sft-feed__map .nigeria-map path.zone-ne { fill: rgba(35, 150, 168, 0.60); }
.sft-feed__map .nigeria-map path.zone-nc { fill: rgba(132, 112, 222, 0.58); }
.sft-feed__map .nigeria-map path.zone-sw { fill: rgba(0, 196, 86, 0.55); }
.sft-feed__map .nigeria-map path.zone-se { fill: rgba(224, 106, 89, 0.60); }
.sft-feed__map .nigeria-map path.zone-ss { fill: rgba(236, 92, 165, 0.55); }
/* Hovered zone (via the map or its bar) brightens and gets a crisp outline,
   while the other zones stay fully coloured (no greying). */
.sft-feed__map .nigeria-map path.zone-active {
  filter: brightness(1.22) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 1.4;
}

.sft-bars { display: flex; flex-direction: column; gap: 12px; }
.sft-bar { cursor: pointer; transition: transform .2s ease; transform-origin: left center; }
.sft-bar__track {
  position: relative; display: flex; align-items: center; height: 44px;
  border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color .25s ease, box-shadow .25s ease, height .2s ease;
}
.sft-bar__fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 12px;
  transition: width 1s cubic-bezier(.4, 0, .2, 1), filter .25s ease;
}
.sft-bar__fill.zone-fill-nw { background: linear-gradient(90deg, rgba(212,150,40,.55), #C68A2E); }
.sft-bar__fill.zone-fill-ne { background: linear-gradient(90deg, rgba(15,122,138,.55), #0F7A8A); }
.sft-bar__fill.zone-fill-nc { background: linear-gradient(90deg, rgba(107,91,192,.55), #6B5BC0); }
.sft-bar__fill.zone-fill-sw { background: linear-gradient(90deg, rgba(0,162,99,.55), #00A263); }
.sft-bar__fill.zone-fill-se { background: linear-gradient(90deg, rgba(199,84,68,.55), #C75444); }
.sft-bar__fill.zone-fill-ss { background: linear-gradient(90deg, rgba(196,60,130,.55), #C43C82); }
.sft-bar__name {
  position: relative; z-index: 1; padding-left: 16px;
  font-family: 'Archivo', sans-serif; font-size: 15.5px; font-weight: 700;
  color: #FBFAF6; letter-spacing: .005em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.sft-bar__val {
  position: relative; z-index: 1; margin-left: auto; padding-right: 16px;
  font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 800;
  color: #FBFAF6; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Pop the hovered/active bar out (this is the chart with the numbers). */
.sft-bar.is-active { transform: scale(1.035); }
.sft-bar.is-active .sft-bar__fill { filter: brightness(1.28); }
.sft-bar.is-active .sft-bar__track {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  height: 50px;
}

/* ---------------------------------------------------------- Transparency */
.sft-trust__head { max-width: 640px; margin: 0 0 60px; }
.sft-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.sft-trust__item { padding-top: 26px; }
.sft-trust__item--g { border-top: 2px solid rgba(0, 162, 75, 0.5); }
.sft-trust__item--o { border-top: 2px solid rgba(239, 138, 23, 0.6); }
.sft-trust__item--r { border-top: 2px solid rgba(239, 41, 23, 0.55); }
.sft-trust__num { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 120%; font-size: clamp(42px, 4.6vw, 66px); line-height: 0.9; letter-spacing: -0.03em; color: var(--sft-ink); }
.sft-trust__item h3 { margin: 0 0 6px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17px; color: var(--sft-ink); }
.sft-trust__item p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--sft-ink-4); }

/* ----------------------------------------------------------- Testimonials */
.sft-voices__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); }
.sft-quote { border-left: 2px solid rgba(22, 32, 26, 0.14); padding-left: 30px; }
.sft-quote p { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 600; font-stretch: 106%; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.32; letter-spacing: -0.015em; color: var(--sft-ink); text-wrap: pretty; }
.sft-quote__who { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.sft-quote__ava { width: 44px; height: 44px; border-radius: 50%; background: repeating-linear-gradient(135deg, #E3DED2 0 8px, #E9E4D8 8px 16px); border: 1px solid var(--sft-line); flex: none; }
.sft-quote__name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14.5px; color: var(--sft-ink); }
.sft-quote__role { font-size: 12.5px; color: var(--sft-muted); font-weight: 500; font-family: 'Geist Mono', monospace; }

/* -------------------------------------------------------------- Partners */
.sft-partners { padding: clamp(50px, 7vw, 90px) var(--sft-pad-x); }
.sft-partners__inner { max-width: var(--sft-maxw); margin: 0 auto; text-align: center; }
.sft-partners__kicker { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--sft-muted); margin-bottom: 34px; }
.sft-partners__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: center; }
.sft-logo { height: 58px; border-radius: 14px; background: var(--sft-surface); border: 1px solid rgba(22, 32, 26, 0.08); display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--sft-muted-3); }

/* ------------------------------------------------------------- Simulator */
.sft-sim__anchor { position: absolute; top: -90px; left: 0; }
.sft-sim__inner { max-width: 1180px; margin: 0 auto; position: relative; }
.sft-sim__head { text-align: center; max-width: 640px; margin: 0 auto 44px; }

.sft-sim__progress { position: relative; max-width: 880px; margin: 0 auto 26px; padding: 0 4px; }
.sft-sim__track { position: absolute; top: 23px; left: 8.33%; right: 8.33%; height: 3px; background: rgba(22, 32, 26, 0.12); border-radius: 3px; }
.sft-sim__track-fill { position: absolute; top: 23px; left: 8.33%; height: 3px; background: linear-gradient(90deg, var(--sft-ink) 0%, var(--sft-green) 100%); border-radius: 3px; transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.sft-sim__steps { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.sft-sim__step { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.sft-sim__dot {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid; background: var(--sft-surface);
  color: var(--sft-muted-3); border-color: rgba(22, 32, 26, 0.16);
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.sft-sim__dot.is-clickable { cursor: pointer; }
.sft-sim__dot.is-locked { cursor: default; }
@media (hover: hover) { .sft-sim__dot.is-clickable:hover { transform: translateY(-3px); } }
.sft-sim__dot:active { transform: translateY(0) scale(.92); }
.sft-sim__dot.is-done { background: var(--sft-ink); color: #FBFAF6; border-color: var(--sft-ink); }
.sft-sim__dot.is-active { background: var(--sft-green); color: #FBFAF6; border-color: var(--sft-green); box-shadow: 0 12px 24px -10px rgba(0, 162, 75, 0.65); }
.sft-sim__step-label { font-family: 'Archivo', sans-serif; font-size: 12px; letter-spacing: .02em; color: var(--sft-muted-3); font-weight: 700; text-align: center; }
.sft-sim__step.is-on .sft-sim__step-label { color: var(--sft-ink); font-weight: 800; }

.sft-sim__card { background: var(--sft-surface); border: 1px solid var(--sft-line); border-radius: 24px; box-shadow: 0 36px 90px -46px rgba(22, 32, 26, 0.4); overflow: hidden; }
.sft-sim__panel { padding: clamp(24px, 3vw, 40px); min-height: 330px; }
.sft-sim__kicker { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sft-green); margin-bottom: 6px; }
.sft-sim__q { margin: 0 0 18px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); color: var(--sft-ink); }
.sft-sim__sub { margin: 0 0 22px; font-size: 15px; color: var(--sft-ink-4); }
.sft-sim__sub b, .sft-sim__q + p b { color: var(--sft-ink); }

.sft-input { width: 100%; padding: 14px 16px; border: 1.5px solid var(--sft-line-2); border-radius: 12px; font-family: inherit; font-size: 15px; color: var(--sft-ink); background: #fff; outline: none; transition: border-color .25s ease, box-shadow .25s ease; }
.sft-input:focus { border-color: var(--sft-green); box-shadow: 0 0 0 4px rgba(0, 162, 75, 0.12); }
.sft-sim__hint { font-size: 12.5px; color: var(--sft-muted-3); margin: 8px 0 18px; }
.sft-sim__count { margin-top: 18px; font-size: 13px; color: var(--sft-muted-2); }

.sft-sim__schools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sft-opt {
  display: block; width: 100%; text-align: left; border: 1.5px solid rgba(22, 32, 26, 0.12);
  background: #fff; border-radius: 16px; padding: 18px; cursor: pointer;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
  -webkit-tap-highlight-color: transparent; font-family: inherit;
}
@media (hover: hover) { .sft-opt:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(22, 32, 26, 0.32); } }
.sft-opt:active { transform: translateY(0) scale(.99); }
.sft-opt.is-selected { border-color: var(--sft-green); background: rgba(0, 162, 75, 0.06); box-shadow: 0 16px 34px -18px rgba(0, 162, 75, 0.5); }
.sft-opt__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 38px; }
.sft-opt__name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; color: var(--sft-ink); line-height: 1.25; }
.sft-opt__tag { flex: none; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 9px; letter-spacing: .07em; color: var(--sft-green); background: rgba(0, 162, 75, 0.13); padding: 4px 8px; border-radius: 999px; }
.sft-opt__tag--best { color: #FBFAF6; background: var(--sft-green); }
.sft-opt__tag--abs { position: absolute; top: 14px; right: 14px; }
.sft-opt__meta { margin-top: 8px; font-size: 12.5px; color: var(--sft-muted); font-weight: 600; }
.sft-opt__pupils { margin-top: 14px; display: flex; align-items: baseline; gap: 6px; }
.sft-opt__pupils b { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 22px; color: var(--sft-ink); }
.sft-opt__pupils span { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--sft-muted-3); }
.sft-opt--row { position: relative; }

.sft-stack { display: flex; flex-direction: column; gap: 12px; }
.sft-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.sft-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.sft-opt--line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; }
.sft-opt--line .sft-opt__name { font-size: 17px; }
.sft-opt__note { margin-top: 4px; font-size: 13.5px; color: var(--sft-muted); }
.sft-opt__price { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; color: var(--sft-green); flex: none; }
.sft-opt__big { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; color: var(--sft-ink); }
.sft-check { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sft-green); color: #FBFAF6; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }

.sft-cart { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 26px; align-items: start; }
.sft-cart__rows { display: flex; flex-direction: column; }
.sft-cart__row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sft-line); }
.sft-cart__row:last-child { border-bottom: none; }
.sft-cart__row span:first-child { font-size: 14px; color: var(--sft-muted); font-weight: 600; }
.sft-cart__row span:last-child { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14.5px; color: var(--sft-ink); text-align: right; }
.sft-cart__total { background: var(--sft-night); border-radius: 18px; padding: 26px; color: var(--sft-night-ink); }
.sft-cart__total-k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8FA396; }
.sft-cart__total-meals { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 120%; font-size: 34px; line-height: 1; margin-top: 6px; color: #FBFAF6; }
.sft-cart__total-hr { height: 1px; background: rgba(255, 255, 255, 0.14); margin: 20px 0; }
.sft-cart__total-amt { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 120%; font-size: 42px; line-height: 1; margin-top: 6px; color: var(--sft-mint); }

.sft-pay-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; background: rgba(0, 162, 75, 0.08); border: 1px solid rgba(0, 162, 75, 0.2); border-radius: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.sft-pay-summary b { color: var(--sft-ink); font-family: 'Archivo', sans-serif; font-weight: 800; }
.sft-pay-summary__amt { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 22px; color: var(--sft-green-dark); }
.sft-pay__note { margin-top: 16px; font-size: 12.5px; color: var(--sft-muted-2); display: flex; align-items: center; gap: 8px; }
.sft-pay__note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sft-green); flex: none; }

.sft-success { text-align: center; padding: 14px 0 6px; }
.sft-success__ico { width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%; background: rgba(0, 162, 75, 0.12); display: flex; align-items: center; justify-content: center; color: var(--sft-green); }
.sft-success h3 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 115%; font-size: clamp(26px, 3vw, 38px); color: var(--sft-ink); }
.sft-success p { margin: 16px auto 0; max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--sft-ink-3); }
.sft-success__list { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 28px auto 0; text-align: left; }
.sft-success__list div { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--sft-ink-2); }
.sft-success__list div::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sft-green); flex: none; }

.sft-sim__foot { border-top: 1px solid rgba(22, 32, 26, 0.08); padding: 18px clamp(24px, 3vw, 40px); display: flex; align-items: center; gap: 12px; }
.sft-sim__back { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; padding: 14px 24px; border-radius: 12px; background: transparent; color: var(--sft-ink); border: 1.5px solid rgba(22, 32, 26, 0.2); cursor: pointer; transition: background .3s ease, transform .2s ease; }
@media (hover: hover) { .sft-sim__back:hover { background: rgba(22, 32, 26, 0.04); transform: translateY(-1px); } }
.sft-sim__back:active { transform: scale(.97); }
.sft-sim__next { margin-left: auto; border: none; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; padding: 15px 28px; border-radius: 12px; cursor: pointer; transition: background-position .6s ease, box-shadow .35s ease, transform .25s ease; }
.sft-sim__next.is-ready { background: linear-gradient(120deg, #00A24B, #0cbf63, #018442); background-size: 200% 100%; background-position: 0% 50%; color: #FBFAF6; box-shadow: 0 14px 30px -10px rgba(0, 162, 75, 0.5); }
@media (hover: hover) { .sft-sim__next.is-ready:hover { background-position: 100% 50%; transform: translateY(-2px); } }
.sft-sim__next.is-ready:active { transform: translateY(0) scale(.98); }
.sft-sim__next.is-dead { background: #DAD5C9; color: var(--sft-muted-3); cursor: not-allowed; box-shadow: none; }

/* -------------------------------------------------------------------- FAQ */
.sft-faq__grid { max-width: var(--sft-maxw); margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.sft-faq__head h2 { max-width: 11ch; }
.sft-faq__head .sft-lead { max-width: 340px; }
.sft-faq__cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px;
  color: var(--sft-green-dark); padding: 12px 22px; border-radius: 999px;
  border: 1.5px solid rgba(0, 162, 75, 0.45); background: rgba(0, 162, 75, 0.07);
  transition: gap .3s ease, color .3s ease, background .35s ease, border-color .3s ease, box-shadow .35s ease, transform .25s ease;
}
.sft-faq__cta svg { transition: transform .3s ease; }
@media (hover: hover) {
  .sft-faq__cta:hover { background: var(--sft-green); color: #FBFAF6; border-color: var(--sft-green); box-shadow: 0 14px 26px -10px rgba(0, 162, 75, 0.5); transform: translateY(-1px); }
  .sft-faq__cta:hover svg { transform: translateX(3px); }
}
.sft-faq__cta:active { transform: translateY(0) scale(.98); }
.sft-faq__item { border-bottom: 1px solid rgba(22, 32, 26, 0.12); }
.sft-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; background: transparent; border: none; cursor: pointer; text-align: left; transition: padding-left .3s ease; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .sft-faq__q:hover { padding-left: 6px; } }
.sft-faq__q-text { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(17px, 1.7vw, 20px); color: var(--sft-ink); transition: color .3s ease; }
.sft-faq__item.is-open .sft-faq__q-text { color: var(--sft-green); }
.sft-faq__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(22, 32, 26, 0.06); color: var(--sft-ink); transition: background .3s ease, color .3s ease; }
.sft-faq__icon::before, .sft-faq__icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .38s cubic-bezier(.4, 0, .2, 1); }
.sft-faq__icon::after { transform: rotate(90deg); }
.sft-faq__item.is-open .sft-faq__icon { background: var(--sft-green); color: #FBFAF6; }
.sft-faq__item.is-open .sft-faq__icon::after { transform: rotate(0deg); }
/* Smooth open/close: animate the grid row from 0fr → 1fr so the answer expands
   to its exact height instead of snapping in. The inner <p> clips during travel. */
.sft-faq__a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1); }
.sft-faq__item.is-open .sft-faq__a-wrap { grid-template-rows: 1fr; }
/* The clip is the grid item: no padding of its own so the 0fr track can fully
   collapse to 0. The answer's own padding lives on the inner <p>, safely clipped. */
.sft-faq__a-clip { min-height: 0; overflow: hidden; }
.sft-faq__a { margin: 0; padding: 0 0 24px; max-width: 64ch; font-size: 15.5px; line-height: 1.65; color: var(--sft-ink-4); opacity: 0; transition: opacity .3s ease; }
.sft-faq__item.is-open .sft-faq__a { opacity: 1; transition: opacity .35s ease .12s; }
@media (prefers-reduced-motion: reduce) {
  .sft-faq__a-wrap, .sft-faq__a, .sft-faq__icon::before, .sft-faq__icon::after { transition: none; }
}

/* -------------------------------------------------------------------- CTA */
.sft-cta { padding: clamp(40px, 6vw, 90px) var(--sft-pad-x) clamp(80px, 10vw, 130px); }
.sft-cta__inner { max-width: var(--sft-maxw); margin: 0 auto; position: relative; border-radius: 30px; overflow: hidden; background: var(--sft-green-dark); padding: clamp(54px, 7vw, 96px) 40px; text-align: center; box-shadow: 0 40px 90px -44px rgba(0, 162, 75, 0.6); }
.sft-cta__inner::before { content: ""; position: absolute; top: -30%; left: 50%; width: 80vh; height: 80vh; margin-left: -40vh; background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 60%); pointer-events: none; }
.sft-cta__body { position: relative; }
.sft-cta h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 120%; font-size: clamp(36px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.025em; color: #FBFAF6; }
.sft-cta p { margin: 24px auto 0; max-width: 500px; font-size: 17.5px; line-height: 1.6; color: rgba(251, 250, 246, 0.86); }
.sft-cta__row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 38px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- Footer */
.sft-footer { position: relative; overflow: hidden; border-top: 1px solid var(--sft-line); padding: 60px var(--sft-pad-x) 50px; }
.sft-footer__grid { max-width: var(--sft-maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; position: relative; z-index: 1; }
.sft-footer__brand-row { display: flex; align-items: center; gap: 12px; }
.sft-footer__logo { width: 42px; height: 42px; border-radius: 50%; background: #FBFAF6; display: flex; align-items: center; justify-content: center; flex: none; padding: 3px; overflow: hidden; border: 1px solid rgba(22, 32, 26, 0.08); }
.sft-footer__logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sft-footer__stamp { position: absolute; top: 50%; right: clamp(-120px, -6vw, -40px); width: clamp(280px, 34vw, 520px); aspect-ratio: 1; transform: translateY(-50%) rotate(-11deg); pointer-events: none; z-index: 0; }
.sft-footer__stamp-img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.08); opacity: 0.075; mix-blend-mode: multiply; }
.sft-footer__name { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 118%; font-size: 15px; color: var(--sft-ink); }
.sft-footer__sub { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sft-muted); }
.sft-footer__about { margin: 18px 0 0; max-width: 280px; font-size: 13.5px; line-height: 1.6; color: var(--sft-ink-5); }
.sft-footer__col-h { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sft-ink); margin-bottom: 16px; }
.sft-footer__links { display: flex; flex-direction: column; gap: 11px; font-size: 14px; color: var(--sft-ink-4); }
.sft-footer__links a { transition: color .2s; }
@media (hover: hover) { .sft-footer__links a:hover { color: var(--sft-green); } }
.sft-footer__bottom { max-width: var(--sft-maxw); margin: 44px auto 0; padding-top: 24px; border-top: 1px solid rgba(22, 32, 26, 0.08); display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--sft-muted-2); flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }
.sft-landing .sft-footer__powered { color: var(--sft-ink-3); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .2s; }
@media (hover: hover) { .sft-landing .sft-footer__powered:hover { color: var(--sft-green-dark); } }

/* ====================================================================== */
/*  MOTION — base states applied by JS; declared here for reduced-motion.   */
/* ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sft-landing [data-hero-line], .sft-landing [data-hero-fade],
  .sft-landing [data-reveal], .sft-landing [data-draw] {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .sft-bar__fill { transform: none !important; }
}

/* ====================================================================== */
/*  RESPONSIVE — real mobile layout, not a squish.                          */
/* ====================================================================== */

/* Tablet / small laptop */
@media (max-width: 1024px) {
  .sft-landing { --sft-pad-x: 28px; }
  .sft-nav { gap: 24px; }
  .sft-header__inner { gap: 16px; }
}

/* Below 900px — collapse the multi-column structures */
@media (max-width: 900px) {
  .sft-nav { display: none; }
  .sft-header__actions .sft-signin { display: none; }
  .sft-burger { display: inline-flex; }

  .sft-hero { min-height: auto; padding: 28px var(--sft-pad-x) 48px; }
  .sft-hero__grid { grid-template-columns: 1fr; gap: 26px; align-items: start; margin-top: 28px; }
  .sft-hero__cta { width: 100%; }
  .sft-hero__media { margin-top: 36px; }

  .sft-pres__grid { grid-template-columns: 1fr; gap: 32px; }
  .sft-pres__photo { max-width: 360px; }

  .sft-cards { grid-template-columns: 1fr; }

  .sft-stats { grid-template-columns: 1fr 1fr; gap: 28px 0; border-top: none; padding-top: 0; }
  .sft-stat { padding: 0 16px; }
  .sft-stat:nth-child(odd) { border-left: none; }
  .sft-stat + .sft-stat { border-left: 1px solid rgba(22, 32, 26, 0.13); }
  .sft-stat:nth-child(3), .sft-stat:nth-child(4) { padding-top: 28px; border-top: 1px solid rgba(22, 32, 26, 0.13); }

  .sft-feed__grid { grid-template-columns: 1fr; gap: 40px; }
  .sft-trust__grid { grid-template-columns: 1fr; gap: 36px; }
  .sft-voices__grid { grid-template-columns: 1fr; gap: 32px; }
  .sft-partners__grid { grid-template-columns: repeat(3, 1fr); }

  .sft-faq__grid { grid-template-columns: 1fr; gap: 28px; }

  .sft-cart { grid-template-columns: 1fr; }
  .sft-sim__schools { grid-template-columns: 1fr 1fr; }
  .sft-grid-2 { grid-template-columns: 1fr; }

  .sft-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .sft-footer__brand { grid-column: 1 / -1; }
}

/* Phones */
@media (max-width: 600px) {
  .sft-landing { --sft-pad-x: 20px; }
  .sft-section { padding: clamp(56px, 14vw, 84px) var(--sft-pad-x); }
  .sft-section--tight { padding: 36px var(--sft-pad-x) 64px; }
  .sft-section-head { margin-bottom: 40px; }

  .sft-header__inner { padding: 12px var(--sft-pad-x); }
  .sft-header {
    background: rgba(9, 14, 10, 0.54);
    box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.72);
  }
  .sft-header.is-scrolled {
    background: rgba(9, 14, 10, 0.80);
    -webkit-backdrop-filter: saturate(1.8) blur(24px);
    backdrop-filter: saturate(1.8) blur(24px);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.78);
  }

  .sft-hero { padding: 112px var(--sft-pad-x) 44px; }
  .sft-hero__title { font-size: clamp(38px, 12vw, 60px); }
  .sft-hero__cta .sft-btn { flex: 1 1 100%; }

  .sft-stats { grid-template-columns: 1fr 1fr; }
  .sft-partners__grid { grid-template-columns: repeat(2, 1fr); }

  /* Simulator becomes a compact vertical-friendly stepper */
  .sft-sim__progress { width: 100%; max-width: 360px; padding: 0; margin: 0 auto 22px; }
  .sft-sim__track { left: 8.33%; right: 8.33%; top: 18px; }
  .sft-sim__track-fill { left: 8.33%; right: auto; top: 18px; }
  .sft-sim__dot { width: 38px; height: 38px; font-size: 13px; position: relative; z-index: 1; }
  .sft-sim__step-label { font-size: 0; gap: 0; }            /* hide word labels, keep dots */
  .sft-sim__step { gap: 0; }
  .sft-sim__schools { grid-template-columns: 1fr; }
  .sft-sim__panel { padding: 22px 18px; min-height: 0; }
  .sft-sim__foot { padding: 16px 18px; }
  .sft-sim__back, .sft-sim__next { flex: 1; text-align: center; justify-content: center; padding: 14px 16px; }
  .sft-sim__next { margin-left: 0; }

  .sft-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .sft-footer__brand { grid-column: auto; }
  .sft-footer__bottom { flex-direction: column; align-items: flex-start; }
  .sft-cta__inner { border-radius: 22px; padding: 44px 24px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .sft-sim__dot { width: 34px; height: 34px; font-size: 12px; }
  .sft-grid-auto { grid-template-columns: 1fr; }
}

/* ====================================================================== */
/*  MOBILE MENU (slide-down drawer)                                         */
/* ====================================================================== */
.sft-mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: #EDE9E0;
  box-shadow: 0 24px 60px -20px rgba(22, 32, 26, 0.35);
  border-bottom: 1px solid var(--sft-line);
  transform: translateY(-100%); transition: transform .42s cubic-bezier(.4, 0, .2, 1);
  padding: 14px 20px 26px;
  display: flex; flex-direction: column;
}
.sft-mobile-menu.is-open { transform: translateY(0); }
.sft-mobile-menu__top { display: flex; align-items: center; justify-content: space-between; height: 44px; margin-bottom: 12px; }
.sft-mobile-menu__close { width: 44px; height: 44px; border: none; background: transparent; color: var(--sft-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.sft-mobile-menu__close svg { width: 26px; height: 26px; }
.sft-mobile-menu a { text-decoration: none; }
.sft-mobile-menu__links { display: flex; flex-direction: column; gap: 2px; }
.sft-mobile-menu__links a {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; color: var(--sft-ink);
  padding: 14px 4px; border: none; border-radius: 10px;
  transition: color .2s ease, background .2s ease, padding-left .2s ease;
}
@media (hover: hover) { .sft-mobile-menu__links a:hover { color: var(--sft-green); } }
.sft-mobile-menu__links a:active { background: rgba(0, 162, 75, 0.07); padding-left: 10px; }
.sft-mobile-menu__links a.is-active { color: var(--sft-green-dark); }
.sft-mobile-menu__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.sft-mobile-menu__actions .sft-btn { width: 100%; padding: 15px 20px; font-size: 16px; }
.sft-mobile-menu__signin { text-align: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; color: var(--sft-ink); padding: 8px; }

.sft-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(22, 32, 26, 0.32); opacity: 0; pointer-events: none; transition: opacity .42s ease; }
.sft-scrim.is-open { opacity: 1; pointer-events: auto; }
body.sft-menu-open { overflow: hidden; }

/* Desktop never shows mobile menu */
@media (min-width: 901px) {
  .sft-mobile-menu, .sft-scrim { display: none !important; }
}

/* ====================================================================== */
/*  Anchor offset (sticky header) + full-bleed view                        */
/* ====================================================================== */
.sft-landing [id] { scroll-margin-top: 92px; }
body.sft-landing-active .shell {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  gap: 0;
}
body.sft-landing-active .main {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  gap: 0;
}
body.sft-landing-active #view {
  flex: 1 1 auto;
  height: 100%;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  gap: 0;
  background: #EDE9E0;
}
body.sft-landing-active .sft-landing { min-height: 100%; }

/* ====================================================================== */
/*  SKELETON LOADER (shown to unauthenticated visitors before the landing) */
/* ====================================================================== */
.sft-skel-page { min-height: 100vh; background: var(--sft-bg, #EDE9E0); padding: 0 0 60px; }
.sft-skel {
  position: relative; overflow: hidden; border-radius: 10px;
  background: rgba(22, 32, 26, 0.07);
}
.sft-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: sft-shimmer 1.5s infinite;
}
@keyframes sft-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sft-skel::after { animation: none; } }
.sft-skel-header { max-width: 1340px; margin: 0 auto; padding: 26px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sft-skel-brand { width: 180px; height: 40px; border-radius: 12px; }
.sft-skel-navrow { display: flex; align-items: center; gap: 16px; }
.sft-skel-pill { width: 90px; height: 16px; border-radius: 999px; }
.sft-skel-cta { width: 150px; height: 44px; border-radius: 999px; }
.sft-skel-hero { max-width: 1340px; margin: 0 auto; padding: 60px 40px 40px; display: flex; flex-direction: column; gap: 18px; }
.sft-skel-eyebrow { width: 220px; height: 16px; border-radius: 999px; }
.sft-skel-line { height: clamp(40px, 6vw, 78px); border-radius: 14px; display: block; }
.sft-skel-herorow { display: flex; align-items: center; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.sft-skel-cards { max-width: 1340px; margin: 30px auto 0; padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sft-skel-card { height: 220px; border-radius: 22px; }
@media (max-width: 900px) {
  .sft-skel-navrow .sft-skel-pill { display: none; }
  .sft-skel-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sft-skel-header, .sft-skel-hero, .sft-skel-cards { padding-left: 20px; padding-right: 20px; }
}

/* ====================================================================== */
/*  PUBLIC DONATION WIZARD - original functionality, new look & feel.       */
/*  Remap the app theme variables inside the landing so the wizard inline   */
/*  var(--green/--ink/--muted/--border-color) resolve to the new palette,   */
/*  then restyle its class-based parts.                                     */
/* ====================================================================== */
/* Pin the FULL theme-variable set to light values inside the landing (and the
   body-mounted overlays) so toggling dark mode on another page never leaks in.
   color-scheme:light keeps native controls (the select dropdown) light too. */
.sft-landing,
.sft-skel-page,
.sft-mobile-menu,
.sft-scrim {
  color-scheme: light;
  --bg: #EDE9E0;
  --bg-glow-1: rgba(0, 162, 99, 0.07);
  --bg-glow-2: rgba(95, 75, 182, 0.04);
  --bg-glow-3: rgba(0, 100, 50, 0.04);
  --card-start: rgba(255, 255, 255, 0.97);
  --card-end: rgba(250, 248, 242, 0.96);
  --card-rim: rgba(255, 255, 255, 0.8);
  --card-border: rgba(20, 36, 27, 0.08);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(30, 35, 40, 0.08), 0 12px 32px rgba(30, 35, 40, 0.06);
  --blur: none;
  --ink: #16201A;
  --ink-mid: #4a4a48;
  --muted: #7C8579;
  --hairline: rgba(20, 36, 27, 0.10);
  --hover-bg: rgba(20, 36, 27, 0.04);
  --active-bg: rgba(20, 36, 27, 0.06);
  --green: #00A24B;
  --green-soft: #00c47a;
  --green-dim: rgba(0, 162, 99, 0.45);
  --red: #d86251;
  --amber: #e8b554;
  --violet: #5f4bb6;
  --hairline-strong: rgba(20, 36, 27, 0.14);
  --border-color: rgba(22, 32, 26, 0.12);
  --nav-active-border: rgba(20, 36, 27, 0.07);
}
.sft-wizard { max-width: 980px; margin: 0 auto; }
.sft-landing .sponsor-flow { display: flex; flex-direction: column; gap: 18px; }
.sft-landing .sft-wiz__progress { margin: 0 auto 6px; max-width: 760px; width: 100%; }

/* Step content container */
.sft-landing .sponsor-card,
.sft-landing .card.panel.sponsor-card {
  background: var(--sft-surface); border: 1px solid var(--sft-line); border-radius: 22px;
  box-shadow: 0 36px 90px -46px rgba(22, 32, 26, 0.4); padding: clamp(22px, 3vw, 36px);
}
.sft-landing .panel-header { margin-bottom: 18px; padding: 0; border: none; }
.sft-landing .panel-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); color: var(--sft-ink); }
.sft-landing .panel-sub { font-size: 14px; color: var(--sft-muted); margin-top: 4px; }
.sft-landing .field-label { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; color: var(--sft-ink); }

/* Inputs + selects */
.sft-landing .field {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--sft-line-2); border-radius: 12px;
  font-family: inherit; font-size: 15px; color: var(--sft-ink); background: #fff; outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.sft-landing .field:focus { border-color: var(--sft-green); box-shadow: 0 0 0 4px rgba(0, 162, 75, 0.12); }
/* Custom chevron — the native select arrow sat too far inset. Pin it 16px from
   the right edge so it reads as part of the field, not floating. */
.sft-landing select.field {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c7c77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
  padding-right: 42px;
}
.sft-landing .sponsor-filter-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; }

/* School cards - prominent name, quieter pupil count */
.sft-landing .school-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sft-landing .school-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1.5px solid rgba(22, 32, 26, 0.12); border-radius: 16px;
  padding: 18px; cursor: pointer; text-align: left;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
@media (hover: hover) { .sft-landing .school-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(22, 32, 26, 0.32); } }
.sft-landing .school-card:active { transform: translateY(0) scale(.99); }
.sft-landing .school-card.selected { border-color: var(--sft-green); background: rgba(0, 162, 75, 0.06); box-shadow: 0 16px 34px -18px rgba(0, 162, 75, 0.5); }
.sft-landing .school-card > strong { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17.5px; line-height: 1.22; color: var(--sft-ink); overflow-wrap: anywhere; }
.sft-landing .school-card > small { font-size: 12.5px; color: var(--sft-muted); font-weight: 600; }
/* Push the pupil count to the card bottom so it lines up across a row even when
   school names span a different number of lines. */
.sft-landing .school-card-meta { margin-top: auto; padding-top: 10px; }
/* Left-align the pupil count on step-1 school cards so it reads cohesively with
   the left-aligned name and location above it (styles.css centres it by default). */
.sft-landing .school-card[data-sponsor-school-id] .school-card-meta { align-items: flex-start; text-align: left; }
.sft-landing .school-card[data-sponsor-school-id] .school-card-pupils { align-items: flex-start; }
.sft-landing .school-card-pupils { display: flex; align-items: baseline; gap: 6px; }
.sft-landing .school-card-pupils strong { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; color: var(--sft-ink-4); }
.sft-landing .school-card-pupils span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sft-muted-3); }
/* "Selected" badge removed — it overlapped long school names. The selected
   state is now shown by the solid green card fill below. */
.sft-landing .school-card-select-badge { display: none !important; }

/* Step-1 school cards: solid green fill when selected (white text for contrast) */
.sft-landing .school-card[data-sponsor-school-id].selected {
  border-color: var(--sft-green); background: var(--sft-green);
  box-shadow: 0 16px 34px -16px rgba(0, 162, 75, 0.55);
}
.sft-landing .school-card[data-sponsor-school-id].selected > strong,
.sft-landing .school-card[data-sponsor-school-id].selected > small,
.sft-landing .school-card[data-sponsor-school-id].selected .school-card-pupils strong,
.sft-landing .school-card[data-sponsor-school-id].selected .school-card-pupils span { color: #fff; }
.sft-landing .school-card[data-sponsor-school-id].selected > small { opacity: .9; }

/* Subclass + supplier cards reuse .school-card; keep their inline layout */
.sft-landing .subclass-card.selected,
.sft-landing .school-card[data-sponsor-supplier-id].selected { border-color: var(--sft-green); background: rgba(0, 162, 75, 0.06); }

/* Class tabs */
.sft-landing .class-tab-btn.active { background: var(--sft-green); color: #FBFAF6; border-color: var(--sft-green); }

/* Snack cards */
.sft-landing .snack-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sft-landing .snack-card {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1.5px solid rgba(22, 32, 26, 0.12); border-radius: 14px; padding: 14px; cursor: pointer;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
@media (hover: hover) { .sft-landing .snack-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(22, 32, 26, 0.3); } }
.sft-landing .snack-card.selected { border-color: var(--sft-green); background: rgba(0, 162, 75, 0.06); }
.sft-landing .snack-card-info strong { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--sft-ink); }
.sft-landing .snack-card-info p { margin: 2px 0 0; font-size: 12.5px; color: var(--sft-muted); }
.sft-landing .snack-card-cost { margin-left: auto; font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--sft-green); }

/* ── Unified "selected" state across every wizard stage ──
   Mirror the step-1 school card: solid green fill + white text. Subclass, snack
   and supplier cards carry inline color styles, so !important is required. */
.sft-landing .subclass-card.selected,
.sft-landing .snack-card.selected,
.sft-landing .school-card[data-sponsor-supplier-id].selected,
.sft-landing .bundle-card.is-selected {
  border-color: var(--sft-green) !important;
  background: var(--sft-green) !important;
  box-shadow: 0 16px 34px -16px rgba(0, 162, 75, 0.55) !important;
}
.sft-landing .subclass-card.selected,
.sft-landing .subclass-card.selected strong,
.sft-landing .subclass-card.selected p,
.sft-landing .subclass-card.selected > div,
.sft-landing .subclass-card.selected > div > div,
.sft-landing .snack-card.selected .snack-card-info,
.sft-landing .snack-card.selected .snack-card-info strong,
.sft-landing .snack-card.selected .snack-card-info p,
.sft-landing .snack-card.selected .snack-card-info span,
.sft-landing .snack-card.selected .snack-card-cost,
.sft-landing .school-card[data-sponsor-supplier-id].selected > strong,
.sft-landing .school-card[data-sponsor-supplier-id].selected > small,
.sft-landing .school-card[data-sponsor-supplier-id].selected .school-card-meta,
.sft-landing .school-card[data-sponsor-supplier-id].selected .school-card-meta span,
.sft-landing .school-card[data-sponsor-supplier-id].selected .school-card-meta strong,
.sft-landing .bundle-card.is-selected,
.sft-landing .bundle-card.is-selected .bundle-name,
.sft-landing .bundle-card.is-selected .bundle-contents,
.sft-landing .bundle-card.is-selected .bundle-price { color: #fff !important; }
/* Info badge + snack icon need a light chip to stay legible on the green fill */
.sft-landing .subclass-card.selected .badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important; border-color: rgba(255, 255, 255, 0.5) !important;
}
.sft-landing .snack-card.selected .snack-card-icon {
  background: rgba(255, 255, 255, 0.22) !important; color: #fff !important;
}

/* Pager + empty */
.sft-landing .pager.sponsor-school-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--sft-muted); flex-wrap: wrap; }
.sft-landing .empty { color: var(--sft-muted); padding: 24px; text-align: center; grid-column: 1 / -1; }

/* Buttons inside the wizard (scoped so the dashboard is untouched) */
.sft-landing .primary-btn {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; border: none; cursor: pointer;
  color: #FBFAF6; border-radius: 12px; padding: 14px 26px;
  background: linear-gradient(120deg, #00A24B, #0cbf63, #018442); background-size: 200% 100%; background-position: 0% 50%;
  box-shadow: 0 14px 30px -10px rgba(0, 162, 75, 0.5);
  transition: background-position .6s ease, box-shadow .35s ease, transform .25s ease;
}
@media (hover: hover) { .sft-landing .primary-btn:hover { background-position: 100% 50%; transform: translateY(-2px); } }
.sft-landing .primary-btn:active { transform: translateY(0) scale(.98); }
.sft-landing .primary-btn:disabled { background: #DAD5C9; color: var(--sft-muted-3); cursor: not-allowed; box-shadow: none; transform: none; }
.sft-landing .ghost-btn {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; cursor: pointer;
  background: transparent; color: var(--sft-ink); border: 1.5px solid rgba(22, 32, 26, 0.2);
  border-radius: 12px; padding: 13px 22px; transition: background .3s ease, transform .2s ease, border-color .3s ease;
}
@media (hover: hover) { .sft-landing .ghost-btn:hover { background: rgba(22, 32, 26, 0.04); } }
.sft-landing .ghost-btn:active { transform: scale(.97); }
.sft-landing .ghost-btn:disabled { opacity: .45; cursor: not-allowed; }
.sft-landing .ghost-btn.row-btn { padding: 9px 16px; font-size: 13px; }
.sft-landing .wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }

/* Wizard responsive - fixes cramped mobile layout */
@media (max-width: 760px) {
  .sft-landing .sponsor-filter-grid { grid-template-columns: 1fr; }
  .sft-landing .school-card-grid { grid-template-columns: 1fr 1fr; }
  .sft-landing .supplier-card-grid { grid-template-columns: 1fr 1fr !important; }
  .sft-landing .snack-card-grid { grid-template-columns: 1fr; }
  .sft-landing .sponsor-review-grid { grid-template-columns: 1fr !important; }
  .sft-landing .subclass-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 540px) {
  .sft-landing .school-card-grid { grid-template-columns: 1fr; }
  .sft-landing .supplier-card-grid { grid-template-columns: 1fr !important; }
  .sft-landing .sponsor-card { padding: 18px !important; }
  .sft-landing .wizard-actions .primary-btn { padding: 13px 16px; font-size: 14px; }
  .sft-landing .class-selector-tabs { flex-wrap: wrap; }
}