/* ============================================================
   HOMEPAGE v7 — "The Warm Folio"
   Self-contained stylesheet. No dependency on main.css.
   Fraunces (serif) + Plus Jakarta Sans (body)
   ============================================================ */


/* ============================================================
   S1: RESET, VARIABLES, TYPOGRAPHY
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --parchment: #FAF7F2;
  --parchment-dk: #F2EBE0;
  --paper: #FFFDF9;
  --paper-warm: #FFF9F0;
  --white: #FFFFFF;
  --ink: #1C1917;
  --ink-2: #57534E;
  --ink-3: #A8A29E;
  --ink-4: #D6D3D1;
  --ink-5: #E7E5E4;
  --forest: #1B4332;
  --forest-mid: #2D6A4F;
  --forest-dk: #143728;
  --forest-light: #D8F3DC;
  --forest-glow: rgba(45,106,79,.08);
  --hp-forest: #2D6A4F;
  --sienna: #C4532B;
  --sienna-dk: #A3401F;
  --sienna-lt: rgba(196,83,43,.08);
  --sienna-glow: rgba(196,83,43,.12);
  --gold: #B8860B;
  --gold-lt: rgba(184,134,11,.06);
  --gold-border: rgba(184,134,11,.25);
  --navy: #264673;
  --navy-lt: rgba(38,70,115,.08);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --mono: var(--sans);
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px;
  --sh-sm: 0 1px 3px rgba(28,25,23,.04);
  --sh-md: 0 4px 12px rgba(28,25,23,.06);
  --sh-lg: 0 12px 32px rgba(28,25,23,.08);
  --sh-xl: 0 20px 50px rgba(28,25,23,.10);
  --ease: cubic-bezier(.4,0,.2,1);
}

html {
  scroll-behavior: smooth;
  background: #FAF7F2;
  /* Prevent iOS Safari's horizontal rubber-band / elastic overscroll on mobile.
     Without this, users can drag the whole viewport sideways on a simple swipe,
     which reads as a bug. 2026-04-18 user report on auth modal. */
  overscroll-behavior-x: none;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Grain texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

a { color: var(--forest-mid); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--sienna); }

section, .feed, .hiw, .proof, .premium, .faq, .cta, .newsletter {
  scroll-margin-top: 80px;
}


/* ============================================================
   S2: NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* 1300 so the mobile hamburger/X button (child of .nav) stays above the
     .mobile-menu drawer (1200) and stays clickable when the drawer is open.
     2026-04-18: raised from 1000 after user report that the X was invisible. */
  z-index: 1300;
  /* Height expands into safe area on notch/island devices */
  height: calc(56px + constant(safe-area-inset-top));
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(250,247,242,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(28,25,23,.06);
  box-shadow: 0 1px 12px rgba(28,25,23,.04);
}

/* Belt-and-suspenders: solid cover extends 100px ABOVE the nav so any safe-area gap
   shows the nav colour regardless of env() timing on iOS Safari */
.nav::before {
  content: '';
  position: absolute;
  top: -100px; left: 0; right: 0;
  height: calc(100px + env(safe-area-inset-top, 0px));
  background: #FAF7F2;
  z-index: 1; /* must be above page content, below nav inner */
}

.nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.nav__wordmark {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: -0.04em;
}

.nav__wordmark .g { font-weight: 600; color: var(--ink); }
/* ★★ WCAG AA (2026-08-06) — THE SAME FIX AS `nav-v7.css`, BECAUSE THIS FILE CARRIES ITS
   OWN COPY OF THE RULE. `index.html` and 23 sibling pages do NOT load nav-v7.css, so the
   fix there did not reach them: measured on the shipped homepage, `.nav__wordmark .c`
   still computed #C4532B at 4.25:1 against the bar — below the 4.5:1 floor, on the site's
   name, on its front door. Repointed at `--sienna-dk` (#A3401F), which this file already
   defines with the same value. Found by verifying the nav-v7 fix on five page types
   rather than on /explore alone. Component-scoped for the same reason as there: `--sienna`
   is also a background token here and changing it would restyle surfaces nobody measured. */
.nav__wordmark .c { font-weight: 500; font-style: italic; color: var(--sienna-dk); margin-left: 0.02em; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: 0.25rem 0;
  transition: color .15s var(--ease);
}

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

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1.5px;
  background: var(--sienna);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
  transform-origin: center;
}

.nav__link:hover::after { transform: scaleX(1); }

.nav__auth {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 1.5rem;
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all .2s var(--ease);
}

.btn-ghost {
  padding: 0.4rem 1rem;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
}

.btn-ghost:hover { color: var(--ink); background: rgba(28,25,23,.04); }

.btn-primary {
  padding: 0.42rem 1.2rem;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--white);
  background: var(--sienna);
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
}

.btn-primary:hover {
  background: var(--sienna-dk);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(196,83,43,.2);
}


/* ============================================================
   S3: HERO
   ============================================================ */
.hero {
  position: relative;
  padding: calc(56px + env(safe-area-inset-top, 0px) + 4rem) 0 3rem;
  background: linear-gradient(180deg,
    var(--parchment-dk) 0%,
    var(--parchment) 25%,
    var(--paper-warm) 65%,
    var(--white) 100%
  );
  overflow: hidden;
}

.hero__deco {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: 520px;
  height: 520px;
  pointer-events: none;
  opacity: 0.035;
}

.hero__deco svg { width: 100%; height: 100%; }

.hero__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sienna);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(140, 50, 40, 0.07);
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .hero__eyebrow {
    font-size: 0.6rem;
    padding: 0.4rem 1rem;
    letter-spacing: 0.04em;
  }
}

.hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8c3228;
  animation: pulse 2s ease-in-out infinite;
}

.hero__title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 1.25rem;
}

.hero__title em {
  display: block;
  font-style: italic;
  color: var(--sienna);
  font-weight: 600;
}

.hero__sub {
  font-size: 1.125rem;
  color: var(--ink-2);
  max-width: 540px;
  margin: 0 auto 1.5rem;
  line-height: 1.65;
}

.hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}

.hero__trust-item svg { flex-shrink: 0; }

/* Quiz Card */
.quiz-card {
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: 0 12px 32px rgba(28,25,23,.08), inset 0 0 60px rgba(250,247,242,0.4);
  padding: 2.5rem 2.5rem 2rem;
  /* CLS fix: contain:layout creates a new layout context — internal
     quiz step transitions won't push elements below the card.
     Field CLS was 0.47 (all from quiz interaction, confirmed via Clarity).
     contain:layout isolates the shift without clipping content. */
  contain: layout;
  max-width: 780px;
  margin: 0 auto;
  border: 1px solid rgba(28,25,23,.03);
  position: relative;
  overflow: hidden;
}

.quiz-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--forest-mid),
    var(--sienna),
    var(--gold),
    var(--sienna),
    var(--forest-mid)
  );
  /* 2026-06-20: removed the left↔right "zip" shimmer animation — it read as
     a page still-loading indicator. The accent line is now a static, full,
     symmetric gradient (applies to every quiz card incl. control). */
}

.quiz-card__header {
  text-align: center;
  margin-bottom: 2rem;
}

.quiz-card__header h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.quiz-card__header p {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.quiz-card__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.quiz-type {
  background: var(--parchment);
  border: 2px solid rgba(28,25,23,0.06);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem;
  cursor: pointer;
  transition: all .3s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  position: relative;
}

.quiz-type:hover {
  border-color: var(--sienna);
  background: var(--paper-warm);
  box-shadow: 0 6px 20px rgba(196,83,43,.08);
  transform: translateY(-3px);
}

.quiz-type::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sienna);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity: 0;
  transition: opacity .25s var(--ease);
}

.quiz-type:hover::before { opacity: 1; }

.quiz-type__icon {
  width: 54px;
  height: 54px;
  background: var(--sienna-lt);
  color: var(--sienna);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s var(--ease);
}

.quiz-type:hover .quiz-type__icon {
  background: var(--sienna-glow);
  transform: scale(1.05);
}

.quiz-type h4 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}

.quiz-type p {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.4;
}

.quiz-type__details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.quiz-type__detail {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.quiz-type__detail svg { color: var(--forest-mid); flex-shrink: 0; }

.quiz-type__detail--highlight {
  color: var(--forest);
  font-weight: 600;
}

.quiz-type__arrow {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  color: var(--ink-4);
  transition: all .25s var(--ease);
}

.quiz-type:hover .quiz-type__arrow {
  color: var(--sienna);
  transform: translateX(4px);
}

/* Hero Stats */
.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 3rem;
  padding: 1.75rem 2.5rem;
  background: rgba(250,247,242,.6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(28,25,23,.04);
}

.hero__stat { text-align: center; }

.hero__stat-num {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero__stat-num--live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hero__stat-lbl {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero__stat-div {
  width: 1px;
  height: 40px;
  background: var(--ink-4);
}

.hero__explore {
  margin-top: 1.75rem;
  text-align: center;
}

.hero__explore-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.75rem;
  color: var(--white);
  background: var(--forest-mid);
  border: none;
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all .2s var(--ease);
}

.hero__explore-link:hover {
  background: var(--forest-mid);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45,106,79,.2);
}

.hero__explore-link svg { transition: transform .2s var(--ease); }
.hero__explore-link:hover svg { transform: translateX(3px); }

.hero__browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-2);
  background: transparent;
  border: 1.5px solid var(--ink-4);
  text-decoration: none;
  transition: all 0.2s;
  margin-top: 1rem;
}
.hero__browse-btn:hover {
  color: var(--ink);
  border-color: var(--ink-3);
  background: rgba(28,25,23,.03);
}
.hero__browse-btn svg { transition: transform .2s var(--ease); }
.hero__browse-btn:hover svg { transform: translateX(3px); }

.hero__explore-note {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}


/* ============================================================
   S4: DIVIDERS & SECTION TRANSITIONS
   ============================================================ */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 3.5rem 2rem;
}

.divider__line {
  flex: 1;
  max-width: 200px;
  height: 1.5px;
  background: var(--ink-3);
  opacity: 0.4;
}

.divider svg { opacity: 0.28; flex-shrink: 0; }

.section-transition {
  height: 48px;
  pointer-events: none;
}

.section-transition--feed-to-hiw {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--white) 100%);
}

.section-transition--hiw-to-proof {
  background: linear-gradient(180deg, var(--white) 0%, var(--parchment) 100%);
}

.section-transition--proof-to-premium {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--white) 100%);
}

.section-transition--premium-to-faq {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment) 100%);
}

.section-transition--faq-to-cta {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--white) 100%);
}

.section-transition--cta-to-newsletter {
  background: linear-gradient(180deg, var(--white) 0%, var(--forest) 100%);
}


/* ============================================================
   S5: FEED LAYOUT, SIDEBAR, FILTERS
   ============================================================ */
.feed {
  padding: 0 2rem 4rem;
  background: var(--parchment);
}

.feed__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: calc(56px + 1.5rem);
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--sh-sm);
}

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.sidebar__header h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.sidebar__reset {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: color .15s var(--ease);
  background: none;
  border: none;
}

.sidebar__reset:hover { color: var(--sienna); }

.filter-group {
  margin-bottom: 1rem;
}

.filter-group__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.filter-group__input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--parchment);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  color: var(--ink);
  font-family: var(--sans);
  transition: all .15s var(--ease);
}

.filter-group__input:focus {
  outline: none;
  border-color: var(--forest-mid);
  box-shadow: 0 0 0 3px var(--forest-glow);
  background: var(--white);
}

.filter-group__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.pill-btn {
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--parchment);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.pill-btn:hover { border-color: var(--ink-4); color: var(--ink-2); }

.pill-btn--active,
.filter-btn.active {
  background: var(--forest-mid);
  color: var(--white);
  border-color: var(--forest-mid);
  box-shadow: 0 2px 6px rgba(45,106,79,.18);
}

.filter-group__select {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  background: var(--parchment);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  color: var(--ink);
  font-family: var(--sans);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}

/* ── Premium Filter Lock ────────────────────────────────── */
.filter-group--divider {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border, #E7E0D8);
    margin-bottom: 0.25rem;
}
.filter-group__label--premium {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--forest-mid, #2D6A4F);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}
.filter-group__lock-icon {
    flex-shrink: 0;
}
.filter-group--premium {
    position: relative;
    cursor: pointer;
}
.filter-group--premium:hover .filter-group__select {
    opacity: 0.6;
}
.filter-group--premium:hover .filter-group__lock-badge {
    background: var(--forest-mid, #2D6A4F);
    color: #fff;
}
.filter-group--premium:hover .filter-group__lock-badge svg {
    stroke: #fff;
}
.filter-group__premium-wrap {
    position: relative;
}
.filter-group--premium .filter-group__select {
    opacity: 0.45;
    pointer-events: none;
}
.filter-group__lock-badge {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--forest-mid, #2D6A4F);
    background: var(--paper, #FFFCF7);
    padding: 0.15rem 0.4rem;
    border-radius: var(--r-full, 100px);
    border: 1px solid var(--forest-mid, #2D6A4F);
    pointer-events: none;
    z-index: 2;
}

/* When premium is active — unlock filters */
body.is-premium .filter-group--premium .filter-group__select {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}
body.is-premium .filter-group__lock-badge {
    display: none;
}
body.is-premium .filter-group--divider .filter-group__label--premium .filter-group__lock-icon {
    display: none;
}

.filter-premium-tooltip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--forest-deep, #1B4332);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--r-md, 8px);
    z-index: 10;
    animation: filterTipIn 0.2s ease;
    line-height: 1.4;
}
.filter-premium-tooltip a {
    color: #A8D5BA;
    text-decoration: underline;
    pointer-events: auto;
    font-weight: 600;
}
@keyframes filterTipIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.sidebar__bookmarks {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-5);
}

.sidebar__bookmarks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar__bookmarks-header h4 {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0;
}

.sidebar__bookmarks-header h4 svg { color: var(--sienna); }

.sidebar__bookmark-count {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--sienna);
  background: var(--sienna-lt);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
}

.sidebar__bookmarks-empty,
.no-bookmarks {
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-top: 0.5rem;
  line-height: 1.5;
}

.no-bookmarks p {
  margin: 0;
}

/* Bookmark items in sidebar */
.bookmark-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ink-5);
  cursor: pointer;
  transition: background .1s var(--ease);
}

.bookmark-item:last-child {
  border-bottom: none;
}

.bookmark-item:hover {
  background: var(--parchment);
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: var(--r-sm);
}

.bookmark-info {
  flex: 1;
  min-width: 0;
}

.bookmark-info h5 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bookmark-info p {
  font-size: 0.6875rem;
  color: var(--forest-mid);
  font-weight: 500;
  margin: 0.1rem 0 0;
}

.bookmark-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink-4);
  cursor: pointer;
  border-radius: var(--r-full);
  transition: all .15s var(--ease);
  flex-shrink: 0;
  padding: 0;
}

.bookmark-remove:hover {
  background: rgba(220,38,38,.06);
  color: #dc2626;
}

.bookmark-remove i,
.bookmark-remove svg {
  width: 14px;
  height: 14px;
}

.bookmarks-list {
  margin-top: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
}

/* Results main */
.results {
  min-width: 0;
}

.results__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.results__header h2 {
  font-size: 1.5rem;
  font-weight: 600;
}

.results__count {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: 0.15rem;
}

.results__sort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.results__sort label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
}

.results__sort select {
  padding: 0.35rem 2rem 0.35rem 0.6rem;
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  color: var(--ink);
  font-family: var(--sans);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}


/* ============================================================
   S6: MOCKUP CARD / TAG BASE STYLES (reference/fallback)
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.card {
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  cursor: pointer;
  transition: all .25s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  background: var(--sienna);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transform: scaleY(0);
  transition: all .25s var(--ease);
  transform-origin: center;
}

@media (hover: hover) {
  .card:hover::before {
    opacity: 1;
    transform: scaleY(1);
  }

  .card:hover {
    background: var(--paper);
    box-shadow: 0 8px 24px rgba(28,25,23,.08), 0 0 0 1px rgba(28,25,23,.05);
    transform: translateY(-2px);
    border-color: rgba(196,83,43,0.12);
  }
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__amount {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--forest-mid);
  letter-spacing: -0.01em;
}

.card__deadline {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-3);
  padding: 0.15rem 0.5rem;
  background: var(--parchment);
  border-radius: var(--r-full);
}

.card__deadline--urgent {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  color: #dc2626;
  background: rgba(220,38,38,.07);
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-full);
  letter-spacing: 0.01em;
}

.card__title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.card__title {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.card__org {
  font-size: 0.75rem;
  color: var(--ink-3);
  padding-left: 1rem;
}

.card__tip {
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.5;
  padding: 0.6rem 0.75rem;
  background: var(--gold-lt);
  border-left: 2px solid var(--gold-border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.tag {
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
}

.tag--grant { background: rgba(45,106,79,.08); color: var(--forest-mid); }
.tag--federal { background: rgba(38,70,115,.08); color: #264673; }
.tag--tax-credit { background: rgba(38,70,115,.08); color: #264673; }
.tag--industry { background: var(--parchment); color: var(--ink-3); }
.tag--level { background: var(--parchment); color: var(--ink-2); }

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ink-5);
  margin-top: 0.25rem;
}

.card__details {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--forest-mid);
}

@media (hover: hover) {
  .card:hover .card__details { color: var(--sienna); text-decoration: underline; text-underline-offset: 3px; }
}

.card__save {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--r-full);
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.card__save:hover {
  background: var(--sienna-lt);
  color: var(--sienna);
}

/* Premium blur card */
.card--premium {
  position: relative;
  min-height: 200px;
}

.card--premium .card__blur {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
}

.card__premium-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255,253,249,.7);
  border-radius: var(--r-lg);
  z-index: 2;
  text-align: center;
  padding: 1.5rem;
}

.card__premium-overlay svg { color: var(--forest-mid); }
.card__premium-overlay strong { font-size: 0.9375rem; color: var(--ink); }
.card__premium-overlay span { font-size: 0.8125rem; color: var(--ink-2); }

.card__premium-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.5rem;
  background: var(--forest-mid);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(45,106,79,0.2);
  margin-top: 0.25rem;
  transition: all .15s var(--ease);
}

.card__premium-cta:hover {
  background: var(--forest);
  color: var(--white);
  transform: translateY(-1px);
}

/* Pagination (mockup version) */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-5);
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.pagination__btn:hover { border-color: var(--forest-mid); color: var(--forest-mid); }
.pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pagination__info {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-3);
}


/* ============================================================
   S7: HOW IT WORKS
   ============================================================ */
.hiw {
  padding: 4.5rem 2rem;
  background: var(--white);
}

.hiw__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.section-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sienna);
  background: rgba(140, 50, 40, 0.06);
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

.hiw__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.hiw__sub {
  font-size: 1rem;
  color: var(--ink-3);
  margin-bottom: 3.5rem;
}

.hiw__steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.hiw__step { text-align: center; padding: 1rem; }

.hiw__step-num {
  width: 44px;
  height: 44px;
  margin: 0 auto 1rem;
  background: var(--sienna-lt);
  color: var(--sienna);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
}

.hiw__step-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forest-mid);
}

.hiw__step h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  letter-spacing: 0;
}

.hiw__step p {
  font-size: 0.875rem;
  color: var(--ink-3);
  line-height: 1.55;
}

.hiw__arrow {
  width: 28px;
  color: var(--ink-4);
}

.hiw__arrow svg { width: 100%; height: auto; }

.hiw__cta { margin-top: 2.5rem; }

.hiw__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2.25rem;
  background: var(--sienna);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.hiw__cta-btn:hover {
  background: var(--sienna-dk);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(196,83,43,.2);
}

.hiw__cta-note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}


/* ============================================================
   S8: TESTIMONIALS
   ============================================================ */
.proof {
  padding: 4.5rem 2rem;
  background: var(--parchment);
}

.proof__inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.proof__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  margin-bottom: 2.5rem;
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: left;
}

.proof__card {
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all .25s var(--ease);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(28,25,23,.04);
}

@media (hover: hover) {
  .proof__card:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
  }
}

.proof__card:nth-child(1) { border-left: 3px solid var(--sienna); }
.proof__card:nth-child(2) { border-left: 3px solid var(--forest-mid); }
.proof__card:nth-child(3) { border-left: 3px solid var(--gold); }

.proof__stars {
  color: var(--gold);
  font-size: 1.125rem;
  letter-spacing: 3px;
}

.proof__quote {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.7;
  flex: 1;
  font-style: italic;
  position: relative;
  padding-left: 1.5rem;
}

.proof__quote::before {
  content: '\201C';
  position: absolute;
  top: -0.15rem;
  left: -0.1rem;
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.2;
  line-height: 1;
}

.proof__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink-5);
}

.proof__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.proof__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  font-style: normal;
}

.proof__role {
  font-size: 0.75rem;
  color: var(--ink-3);
  display: block;
}


/* ============================================================
   S9: PREMIUM
   ============================================================ */
.premium {
  padding: 4.5rem 2rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--parchment) 100%);
  border-top: 1px solid var(--ink-5);
  position: relative;
  overflow: hidden;
}

.premium::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(45,106,79,.04) 0%, transparent 70%);
  pointer-events: none;
}

.premium__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.premium__badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--forest-mid);
  background: var(--forest-glow);
  padding: 0.35rem 1rem;
  border-radius: var(--r-full);
  margin-bottom: 1rem;
}

.premium__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.premium__sub {
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 580px;
  margin: 0 auto 2.5rem;
  line-height: 1.65;
}

.premium__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.premium__card {
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all .25s var(--ease);
}

@media (hover: hover) {
  .premium__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
  }
}

.premium__card--hero {
  border-left: 3px solid var(--forest-mid);
  background: linear-gradient(180deg, rgba(45,106,79,.03) 0%, var(--white) 100%);
  box-shadow: 0 2px 12px rgba(45,106,79,.06);
}

@media (hover: hover) {
  .premium__card--hero:hover {
    box-shadow: 0 8px 24px rgba(45,106,79,.1);
  }
}

.premium__card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium__card-icon--roadmap { background: var(--sienna-lt); color: var(--sienna); }
.premium__card-icon--draft { background: var(--forest-glow); color: var(--forest-mid); }
.premium__card-icon--scores { background: var(--gold-lt); color: var(--gold); }
.premium__card-icon--tips { background: var(--navy-lt); color: var(--navy); }

.premium__card h3 {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  letter-spacing: 0;
}

.premium__card p {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.5;
}

.premium__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 2rem;
  background: var(--forest-mid);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 600;
  transition: all .15s var(--ease);
}

.premium__cta:hover {
  background: var(--forest);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,67,50,.2);
}

.premium__fine {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: 0.75rem;
}


/* ============================================================
   S10: FAQ
   ============================================================ */
.faq {
  padding: 4.5rem 2rem;
  background: var(--parchment);
}

.faq__inner {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}

.faq__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.faq__sub {
  font-size: 1rem;
  color: var(--ink-3);
  margin-bottom: 2.5rem;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.faq__item {
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow .25s var(--ease);
}

.faq__item[open] { box-shadow: var(--sh-sm); }

.faq__item summary {
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color .15s var(--ease);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--ink-3);
  flex-shrink: 0;
}

.faq__item[open] summary::after {
  content: '\2212';
  color: var(--sienna);
}

.faq__item summary:hover { color: var(--sienna); }

.faq__answer {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.65;
}


/* ============================================================
   S11: FINAL CTA
   ============================================================ */
.cta {
  padding: 5rem 2rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--paper-warm) 40%, var(--parchment) 100%);
  text-align: center;
  border-top: 1px solid var(--ink-5);
  position: relative;
  overflow: hidden;
}

.cta__deco {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.035;
  pointer-events: none;
}

.cta__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.cta__sub {
  font-size: 1rem;
  color: var(--ink-3);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.cta__primary {
  padding: 0.9rem 2.5rem;
  background: var(--forest-mid);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 1.0625rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
  box-shadow: 0 4px 12px rgba(27,67,50,.15);
  font-family: var(--sans);
}

.cta__primary:hover {
  background: var(--forest);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27,67,50,.25);
}

.cta__secondary {
  padding: 0.75rem 2rem;
  color: var(--ink-2);
  border: 1.5px solid var(--ink-5);
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 600;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  background: transparent;
  cursor: pointer;
}

.cta__secondary:hover { border-color: var(--ink-4); color: var(--ink); }


/* ============================================================
   S12: NEWSLETTER
   ============================================================ */
.newsletter {
  padding: 6rem 2rem;
  background: var(--forest);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 24px 24px;
}

.newsletter__inner {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.newsletter__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.5rem;
}

.newsletter__sub {
  font-size: 1rem;
  opacity: 0.75;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.newsletter__form {
  display: flex;
  gap: 0.5rem;
  max-width: 460px;
  margin: 0 auto;
}

.newsletter__input {
  flex: 1;
  padding: 0.85rem 1.15rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-full);
  color: var(--white);
  font-size: 1rem;
  font-family: var(--sans);
}

.newsletter__input::placeholder { color: rgba(255,255,255,.5); }

.newsletter__btn {
  padding: 0.85rem 1.75rem;
  background: var(--sienna);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.newsletter__btn:hover {
  background: var(--sienna-dk);
  transform: translateY(-1px);
}

.newsletter__trust {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  opacity: 0.45;
  letter-spacing: 0.01em;
}


/* ============================================================
   S13: FOOTER
   ============================================================ */
.footer {
  padding: 3rem 2rem 2rem;
  background: var(--forest);
  color: rgba(255,255,255,.7);
}

.footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 2.5rem;
}

.footer__brand { max-width: 320px; }

.footer__brand-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.footer__brand-name {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--white);
}

.footer__brand-name .g { font-weight: 600; }
.footer__brand-name .c { font-weight: 500; font-style: italic; color: var(--sienna); margin-left: 0.02em; }

.footer__brand p {
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  opacity: 0.7;
}

.footer__col h4 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 1rem;
}

.footer__col a {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255,255,255,.6);
  padding: 0.2rem 0;
  transition: color .15s var(--ease);
}

.footer__col a:hover { color: var(--white); }

/* Sister-product sub-group inside a footer column (Jul 2026) — the footer grid
   is a fixed 4-column layout (1.5fr + 3×1fr), so a 5th "More from GrantCompass"
   column would need a grid-template change; a clearly-separated sub-block
   inside the Platform column is the lower-risk fit. */
.footer__subgroup {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer__subgroup h5 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.5);
  margin: 0 0 0.5rem;
}

.footer__bottom {
  grid-column: 1 / -1;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 1rem;
}

.footer__bottom p {
  font-size: 0.75rem;
  opacity: 0.5;
  line-height: 1.6;
}

.footer__bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================================
   S14: RESPONSIVE (mockup breakpoints)
   ============================================================ */

/* ── Narrow-desktop relief band, 769–1099px (2026-08-16, Who Wins promotion) ──
   ⚠ VERBATIM COPY of the block in nav-v7.css. index.html and its 23 siblings
   load THIS file and NOT nav-v7.css, so a nav rule written only there does not
   reach the front door — the same split that left the wordmark's contrast fix
   unshipped on the homepage (see the .nav__wordmark note above). Keep in sync.

   MEASURED (dev-assets/winners-dist-2026-08-16/nav-width-probe.js): the nav's
   only responsive rule hides the whole link row at ≤768px, so between 769px and
   the 1280px max-width the row absorbs every item at full size — and it was
   already over capacity BEFORE this change (11 of 25 page×width samples in
   769–1023 wrapped a nav label onto two lines; 3 overflowed .nav__inner).
   A uniform gutter/gap reclaim, not a per-item hide (a pattern this nav has
   nowhere). Net vs the pre-change baseline, while carrying an EXTRA item:
   overflow 3 → 1, wrapped labels 11 → 10, brand gap under 8px 11 → 10. */
@media (min-width: 769px) and (max-width: 1099px) {
  .nav__inner { padding: 0 1rem; }
  .nav__links { gap: 0.5rem; }
}

@media (max-width: 1024px) {
  .feed__inner { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .premium__grid { grid-template-columns: repeat(2, 1fr); }
  .hiw__steps { grid-template-columns: 1fr; gap: 1rem; }
  .hiw__arrow { display: none; }
  .proof__grid { grid-template-columns: 1fr 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }

  .hero { padding: calc(56px + env(safe-area-inset-top, 0px) + 2.5rem) 0 2rem; }
  .hero__title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .hero__trust { flex-direction: column; gap: 0.5rem; }
  .quiz-card { padding: 1.5rem 1.25rem 1.25rem; }
  .quiz-card__options { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }

  /* Mobile filter collapse */
  .sidebar {
    position: relative;
    top: auto;
    border: none;
    padding: 0;
    background: var(--parchment);
    box-shadow: none;
    overflow: hidden;
    z-index: 2;
  }

  .sidebar__header {
    background: var(--white);
    border: 1px solid var(--ink-5);
    border-radius: var(--r-lg);
    padding: 0.85rem 1.25rem;
    margin-bottom: 0;
    cursor: pointer;
  }

  .sidebar__header h3::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg);
    margin-left: 0.5rem;
    transition: transform .2s var(--ease);
    vertical-align: 1px;
  }

  .sidebar.sidebar--open .sidebar__header h3::after {
    transform: rotate(-135deg);
  }

  .sidebar__filters {
    display: none;
    background: var(--white);
    border: 1px solid var(--ink-5);
    border-radius: var(--r-lg);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
  }

  .sidebar.sidebar--open .sidebar__filters {
    display: block;
  }

  .sidebar__bookmarks {
    display: none;
  }

  .sidebar.sidebar--open .sidebar__bookmarks {
    display: block;
  }

  .sidebar.sidebar--open {
    overflow: visible;
  }

  .results__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .results__header h2 {
    font-size: 1.125rem;
  }

  /* Mobile touch target improvements (44px min) */
  .hp-card__bookmark {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .hp-card__hide {
    min-width: 44px;
    min-height: 44px;
    opacity: 0.5; /* always visible on mobile (no hover) */
  }

  .nav__hamburger,
  .mobile-menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .results__sort select {
    min-height: 44px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
  }

  .pagination__btn {
    min-height: 44px;
    padding: 0.6rem 1.25rem;
  }

  /* Modal header: flex-shrink:0 already keeps it visible.
     Removed position:sticky — causes iOS Safari rendering glitch
     where sticky + overflow:hidden on parent makes header disappear. */
  .modal-header {
    flex-shrink: 0;
    background: var(--paper);
  }

  /* Trim hero subtitle on mobile */
  .hero__sub {
    font-size: 1rem;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .proof__grid { grid-template-columns: 1fr; }
  .premium__grid { grid-template-columns: 1fr; }
  .newsletter__form { flex-direction: column; }
  .footer__inner { grid-template-columns: 1fr; }
  .hero__stats {
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
  }
  .hero__stat-num { font-size: 1.5rem; }
  .section-transition { height: 32px; }
  .cta { padding: 5rem 2rem; }
  .cta__deco { display: none; }
}

@media (max-width: 480px) {
  .hero__inner { padding: 0 1rem; }
  .quiz-card { padding: 1rem; }
  .hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; }
  .hero__stat-div { display: none; }
}


/* ============================================================
   S15: MOBILE STICKY CTA
   ============================================================ */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--forest-mid);
  z-index: 100;
  box-shadow: 0 -4px 16px rgba(28,25,23,.12);
}

/* Belt-and-suspenders: solid cover extends 100px BELOW the CTA so any safe-area gap
   shows the CTA colour regardless of env() timing on iOS Safari */
.mobile-sticky-cta::before {
  content: '';
  position: absolute;
  bottom: -100px; left: 0; right: 0;
  height: calc(100px + env(safe-area-inset-bottom, 0px));
  background: var(--forest-mid);
  z-index: 1;
}

.mobile-sticky-cta button {
  width: 100%; height: 100%;
  color: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  background: none; border: none; cursor: pointer;
}

@media (max-width: 768px) {
  .mobile-sticky-cta { display: flex; align-items: center; justify-content: center; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .pill-btn { min-height: 40px; padding: 0.5rem 0.85rem; }
}


/* ============================================================
   S16: GRANT CARDS (hp-card) — JS-rendered cards
   ============================================================ */

/* Container: the grant list uses #grantsList / .grants-list */
.grants-list,
#grantsList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.hp-card {
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  cursor: pointer;
  transition: all .25s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.hp-card::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  background: var(--sienna);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transform: scaleY(0);
  transition: all .25s var(--ease);
  transform-origin: center;
}

@media (hover: hover) {
  .hp-card:hover::before {
    opacity: 1;
    transform: scaleY(1);
  }

  .hp-card:hover {
    background: var(--paper);
    box-shadow: 0 8px 24px rgba(28,25,23,.08), 0 0 0 1px rgba(28,25,23,.05);
    transform: translateY(-2px);
    border-color: rgba(196,83,43,0.12);
  }
}

.hp-card--closed {
  opacity: 0.55;
  background: var(--parchment);
}

@media (hover: hover) {
  .hp-card--closed:hover {
    opacity: 0.7;
    background: var(--parchment-dk);
  }
}

/* D2 (2026-05-14): Granular non-active card states.
   --non-active: between-intakes / upcoming / paused — softer mute,
                 user may still want to track these.
   --permanently-closed: closed / discontinued — stronger mute,
                         pursuing these has no near-term value.
   The existing .hp-card--closed (hardGates.closed flag) stays as-is. */
.hp-card--non-active {
  opacity: 0.82;
}

@media (hover: hover) {
  .hp-card--non-active:hover {
    opacity: 1;
  }
}

.hp-card--permanently-closed {
  opacity: 0.6;
  background: var(--parchment);
}

@media (hover: hover) {
  .hp-card--permanently-closed:hover {
    opacity: 0.75;
    background: var(--parchment-dk);
  }
}

/* Notify-me inline CTA in the feed card actions area */
.hp-card__notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: #92400E;
  background: rgba(180,83,9,.08);
  border: 1px solid rgba(180,83,9,.18);
  border-radius: var(--r-full);
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, color .14s;
  letter-spacing: -.003em;
}
.hp-card__notify-btn:hover { background: rgba(180,83,9,.14); color: #78350f; }
.hp-card__notify-btn:focus-visible { outline: 2px solid #92400e; outline-offset: 2px; }
.hp-card__notify-btn--done {
  color: var(--forest-mid);
  background: rgba(45,106,79,.08);
  border-color: rgba(45,106,79,.18);
  cursor: default;
  pointer-events: none;
}

/* See-similar CTA in the feed card actions area */
.hp-card__similar-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--forest-mid);
  text-decoration: none;
  letter-spacing: -.003em;
  transition: color .12s;
}
.hp-card__similar-link:hover { color: var(--forest-dk); text-decoration: underline; text-underline-offset: 2px; }
.hp-card__similar-link:focus-visible { outline: 2px solid var(--forest-mid); outline-offset: 2px; border-radius: 3px; }

.hp-card--premium-blur {
  position: relative;
  min-height: 200px;
}

.hp-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hp-card__amount {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--forest-mid);
  letter-spacing: -0.01em;
  margin-top: 0.3rem;
  padding-left: 1.05rem;
}

.hp-card__deadline {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-3);
  padding: 0.15rem 0.5rem;
  background: var(--parchment);
  border-radius: var(--r-full);
}

.hp-card__deadline--urgent {
  color: #dc2626;
  background: rgba(220,38,38,.07);
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hp-card__deadline--closed {
  color: var(--ink-3);
  background: var(--ink-5);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Card status pill variants — Sprint A Tier 2 (2026-05-03)
   Unified with modal banner. Each variant has consistent color tone with
   the modal status. tabindex=0 makes them keyboard-focusable for tooltip. */
.hp-card__deadline--discontinued {
  color: #57534E;
  background: rgba(120,113,108,.12);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 600;
}
.hp-card__deadline--between-intakes {
  color: #92400E;
  background: rgba(180,83,9,.10);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 600;
}
.hp-card__deadline--paused {
  color: #991B1B;
  background: rgba(185,28,28,.08);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 600;
}
.hp-card__deadline--upcoming {
  color: #1E40AF;
  background: rgba(29,78,216,.08);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 600;
}
.hp-card__deadline--winding-down {
  color: #991B1B;
  background: rgba(185,28,28,.08);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  font-size: 0.6875rem;
  font-weight: 600;
}
/* Cursor + focus state for any tabindex-bearing status pill */
.hp-card__deadline[tabindex] {
  cursor: help;
}
.hp-card__deadline[tabindex]:focus-visible {
  outline: 2px solid var(--forest, #1F3A2E);
  outline-offset: 2px;
}

/* Card header: title row + deadline badge */
.hp-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.hp-card__title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.hp-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.hp-card__title {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.hp-card__org {
  font-size: 0.75rem;
  color: var(--ink-3);
  padding-left: 1.05rem;
  margin-top: 0.15rem;
}

.hp-card__desc {
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.5;
  padding: 0.55rem 0.75rem;
  background: var(--paper-warm, #f5f1e8);
  border-left: 2px solid var(--ink-3, #b0a99e);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-top: 0.45rem;
}

.hp-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.hp-card__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--ink-5);
  margin-top: 0.35rem;
}

.hp-card__details-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--forest-mid);
  cursor: pointer;
  transition: color .15s var(--ease);
  background: none;
  border: none;
  font-family: var(--sans);
  margin-right: auto;
  text-decoration: none;
}

@media (hover: hover) {
  .hp-card:hover .hp-card__details-link {
    color: var(--sienna);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.hp-card__bookmark {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--r-full);
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.hp-card__bookmark:hover {
  background: var(--sienna-lt);
  color: var(--sienna);
}

.hp-card__bookmark--active {
  color: var(--sienna);
  background: var(--sienna-lt);
}

.hp-card__bookmark--active:hover {
  background: var(--sienna-glow);
}

/* ── Hide grant button (in actions row) ── */
.hp-card__hide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--ink-4);
  cursor: pointer;
  border-radius: var(--r-full);
  transition: all .15s var(--ease);
  opacity: 0;
  padding: 0;
  flex-shrink: 0;
}

@media (hover: hover) {
  .hp-card:hover .hp-card__hide {
    opacity: 0.7;
  }
}

.hp-card__hide:hover {
  opacity: 1;
  background: rgba(28,25,23,.06);
  color: var(--ink-2);
}

.hp-card__hide + .hp-card__bookmark {
  margin-left: 0.25rem;
}

.hp-card__hide svg {
  width: 13px;
  height: 13px;
}

/* ── Card meta row (amount + deadline) ── */
.hp-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.hp-card__meta-sep {
  color: var(--ink-4);
  font-size: 0.75rem;
}

/* ── Inline hidden confirmation overlay ── */
.hp-card__hidden-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--parchment);
  border-radius: var(--r-lg);
  z-index: 3;
  color: var(--ink-3);
  animation: fadeIn .2s var(--ease);
}

.hp-card__hidden-overlay svg {
  width: 20px;
  height: 20px;
  opacity: 0.4;
}

.hp-card__hidden-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-3);
}

.hp-card__undo {
  background: none;
  border: none;
  color: var(--forest-mid);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-full);
  transition: all .15s var(--ease);
  font-family: var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hp-card__undo:hover {
  color: var(--sienna);
  background: var(--sienna-lt);
  text-decoration: none;
}

/* Premium blur content inside card */
.hp-card__blur-content {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
}

.hp-card__premium-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255,253,249,.7);
  border-radius: var(--r-lg);
  z-index: 2;
  text-align: center;
  padding: 1.5rem;
}

.hp-card__premium-overlay svg { color: var(--forest-mid); }
.hp-card__premium-overlay strong { font-size: 0.9375rem; color: var(--ink); }
.hp-card__premium-overlay span { font-size: 0.8125rem; color: var(--ink-2); }

.hp-card__premium-overlay a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.5rem;
  background: var(--forest-mid);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(45,106,79,0.2);
  margin-top: 0.25rem;
  transition: all .15s var(--ease);
}

.hp-card__premium-overlay a:hover {
  background: var(--forest);
  color: var(--white);
  transform: translateY(-1px);
}


/* ============================================================
   S17: GRANT PILLS (hp-pill) — JS-rendered pills/tags
   ============================================================ */
.hp-pill {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  white-space: nowrap;
  font-family: var(--sans);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-pill--grant { background: rgba(45,106,79,.08); color: var(--forest-mid); }
.hp-pill--tax-credit { background: rgba(38,70,115,.08); color: var(--navy); }
.hp-pill--award { background: var(--gold-lt); color: var(--gold); border: 1px solid var(--gold-border); }
.hp-pill--program { background: var(--parchment); color: var(--ink-2); }
.hp-pill--loan { background: var(--parchment); color: var(--ink-2); }
.hp-pill--forgivable-loan { background: var(--parchment); color: var(--ink-2); }
.hp-pill--level { background: var(--parchment); color: var(--ink-2); }
.hp-pill--industry { background: var(--parchment); color: var(--ink-3); }
.hp-pill--federal { background: rgba(38,70,115,.08); color: var(--navy); }
.hp-pill--provincial { background: rgba(45,106,79,.08); color: var(--forest-mid); }
.hp-pill--municipal { background: var(--sienna-lt); color: var(--sienna); }
.hp-pill--private { background: var(--gold-lt); color: var(--gold); }


/* ============================================================
   S18: GRANT DETAIL MODAL (hp-modal)
   ============================================================ */
.hp-modal-overlay {
  display: none;
  position: fixed;
  top: -env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  bottom: -env(safe-area-inset-bottom, 0px);
  z-index: 2000;
  background: rgba(28,25,23,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.hp-modal-overlay.active {
  display: flex;
}

.hp-modal {
  background: var(--white);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: modalSlideUp .25s var(--ease);
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hp-modal__header {
  padding: 1.75rem 2rem 1.25rem;
  border-bottom: 1px solid var(--ink-5);
  flex-shrink: 0;
}

.hp-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--parchment);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  transition: all .15s var(--ease);
  z-index: 1;
}

.hp-modal__close:hover {
  background: var(--ink-5);
  color: var(--ink);
}

.hp-modal__amount {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--forest-mid);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.hp-modal__approval-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.hp-modal__approval-badge svg {
  color: var(--ink-3);
}

.hp-modal__approval-badge .dots {
  display: flex;
  gap: 3px;
}

.hp-modal__approval-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
}

.hp-modal__approval-badge .dot--filled {
  background: var(--forest-mid);
}

.hp-modal__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.35rem;
  padding-right: 2.5rem;
}

.hp-modal__org {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.hp-modal__body {
  padding: 1.5rem 2rem;
  overflow-y: auto;
  flex: 1;
}

.hp-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.hp-modal__section {
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--ink-5);
}

.hp-modal__section:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.hp-modal__section-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: 0.6rem;
}

.hp-modal__desc {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.7;
}

.hp-modal__tip {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.65;
  padding: 1rem 1.25rem;
  background: var(--gold-lt);
  border-left: 3px solid var(--gold-border);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.hp-modal__tip-section {
  margin-top: 1.25rem;
}

.hp-modal__elig {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hp-modal__elig-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.5;
}

.hp-modal__elig-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--forest-mid);
  margin-top: 1px;
}

/* Single CTA below the eligibility list — captures "I want more detail" taps that
   were previously dead-clicking individual ✓ rows (see Clarity audit Apr 20, 2026). */
.hp-modal__elig-official {
  display: inline-flex;
  align-items: center;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--paper-warm-border, rgba(168, 162, 158, 0.18));
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--forest-mid);
  text-decoration: none;
  transition: color 0.15s ease;
}
.hp-modal__elig-official:hover,
.hp-modal__elig-official:focus-visible {
  color: var(--forest-deep, var(--ink-1));
  text-decoration: underline;
}

.hp-modal__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.hp-modal__grid-item {
  background: var(--parchment);
  border-radius: var(--r-md);
  padding: 1rem;
  text-align: center;
  position: relative;
}

.hp-modal__grid-item--premium {
  position: relative;
}

.hp-modal__grid-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}

.hp-modal__grid-value {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.hp-modal__premium-blur {
  filter: blur(4px);
  opacity: 0.5;
  user-select: none;
}

.hp-modal__lock-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: var(--ink-4);
  width: 14px;
  height: 14px;
}

.hp-modal__premium-gate {
  background: linear-gradient(180deg, rgba(45,106,79,.04) 0%, var(--parchment) 100%);
  border: 1px solid var(--forest-glow);
  border-radius: var(--r-lg);
  padding: 2rem;
  text-align: center;
  margin-top: 1.5rem;
}

.hp-modal__premium-gate p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.hp-modal__premium-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 2rem;
  background: var(--hp-forest);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.hp-modal__premium-cta:hover {
  background: var(--forest);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,67,50,.2);
}

.hp-modal__premium-fine {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: 0.5rem;
}

.hp-modal__footer {
  padding: 1rem 2rem;
  border-top: 1px solid var(--ink-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  background: var(--white);
}

.hp-modal__bookmark {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  background: transparent;
  border: 1.5px solid var(--ink-5);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.hp-modal__bookmark:hover {
  border-color: var(--sienna);
  color: var(--sienna);
  background: var(--sienna-lt);
}

.hp-modal__bookmark.bookmarked {
  border-color: var(--sienna);
  color: var(--sienna);
  background: var(--sienna-lt);
}

.hp-modal__apply {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.75rem;
  background: var(--forest-mid);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
  text-decoration: none;
  font-family: var(--sans);
}

.hp-modal__apply:hover {
  background: var(--forest);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,67,50,.2);
}


/* ============================================================
   S18b: PRODUCTION MODAL CLASSES (grant detail modal uses these)
   The grant detail modal HTML uses production class names, not hp-modal.
   ============================================================ */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(28,25,23,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal.active {
  display: flex;
  animation: modalFadeIn .25s var(--ease);
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-content {
  background: var(--paper);
  border-radius: var(--r-xl);
  max-width: 680px;
  width: 100%;
  max-height: 78vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-xl), 0 0 0 1px rgba(28,25,23,.04);
  animation: modalSlideUp .3s var(--ease);
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.25rem 1.75rem 1rem;
  border-bottom: 1px solid var(--ink-5);
  background: var(--paper);
  flex-shrink: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.modal-header h3 {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  padding-right: 2rem;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0.5rem;
  transition: all .15s var(--ease);
  border-radius: var(--r-md);
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--parchment);
  color: var(--ink);
}

.modal-close svg, .modal-close i {
  width: 20px;
  height: 20px;
  display: block;
}

.modal-body {
  padding: 1.25rem 1.75rem 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

.modal-grant-info {
  margin-bottom: 1.5rem;
}

.modal-amount {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--forest-mid);
  margin-bottom: 0;
  letter-spacing: -0.01em;
}

/* Sprint B QA Round 2B (T1-4 R2 regression) — mirror .modal-amount-detail
   from main.css into homepage-v7.css per the documented drift pattern.
   index.html only loads homepage-v7.css, not main.css, so any modal-related
   selector defined in main.css falls back to browser defaults. Subordinate
   subline beneath compact amountDisplay surfaces the verbose `amount` field. */
.modal-amount-detail {
  font-size: 0.8125rem;
  color: var(--ink-2, #57534e);
  line-height: 1.5;
  margin-top: 4px;
  margin-bottom: 8px;
  font-style: italic;
  max-width: 100%;
}

.modal-organization {
  font-size: 0.9375rem;
  color: var(--ink-3);
  margin-bottom: 1rem;
}

.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.modal-description {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 1.5rem;
}

/* Insider tip in modal */
#modalTipSection {
  margin-bottom: 1.5rem;
}

#modalTipSection h4 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}

#modalInsiderTip {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.65;
  padding: 0.75rem 1rem;
  background: var(--gold-lt);
  border-left: 2.5px solid var(--gold-border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.modal-details {
  background: var(--parchment);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--ink-5);
}

.detail-section {
  margin-bottom: 1.25rem;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h4 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: 0.75rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.75rem;
  background: var(--white);
  border-radius: var(--r-md);
  border: 1px solid var(--ink-5);
}

.detail-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-item span:last-child {
  font-size: 0.8125rem;
  color: var(--ink);
  font-weight: 500;
}

/* Premium blur in modal */
.hp-modal__premium-blur {
  filter: blur(5px);
  opacity: 0.5;
  user-select: none;
}

.hp-modal__grid-item--premium {
  position: relative;
}

.hp-modal__elig-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.5;
  padding: 0.3rem 0;
}

.hp-modal__elig-check {
  color: var(--forest-mid);
  font-weight: 700;
  flex-shrink: 0;
}

/* Premium gate in modal */
#modalPremiumGate {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(45,106,79,.04) 0%, var(--parchment) 100%);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  margin-bottom: 1.5rem;
}

#modalPremiumGate p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}

#modalPremiumGate a {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.6rem 1.5rem;
  background: var(--forest-mid);
  color: var(--white);
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all .15s var(--ease);
}

#modalPremiumGate a:hover {
  background: var(--forest);
  color: var(--white);
  transform: translateY(-1px);
}

/* Modal actions (sticky bottom bar) */
.modal-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--ink-5);
  background: var(--paper);
  flex-shrink: 0;
}

.modal-actions .bookmark-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem;
  background: var(--parchment);
  color: var(--ink-2);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.modal-actions .bookmark-btn:hover {
  background: var(--sienna-lt);
  color: var(--sienna);
  border-color: rgba(196,83,43,.2);
}

.modal-actions .bookmark-btn.bookmarked {
  background: var(--sienna-lt);
  color: var(--sienna);
  border-color: rgba(196,83,43,.2);
}

.modal-actions .bookmark-btn svg,
.modal-actions .bookmark-btn i {
  width: 16px;
  height: 16px;
}

/* Sprint 2 T4.1 (2026-05-05) — Modal action hierarchy correction.
   Pre-Sprint-2: "Open full grant page" (apply-btn) was the visual primary
   (flex:2, filled forest, large). "+ Pursue this grant" (pursue-btn--compact)
   was visual secondary. Blind reviewer flagged this as inverted: Pursue
   represents commitment (becomes a tracked grant in pipeline) while
   "Open full grant page" represents browsing — Pursue should win the eye.
   Fix v1: pursue-btn--compact gets flex:2 + larger padding/font. apply-btn
   demoted to outlined-forest secondary.
   Fix v2 (Sprint 2 T6 follow-up 2026-05-05 PM): user feedback flagged
   "Open full grant page" wrapping to 2 lines (amateur), and 4 buttons
   total when Bookmark + Pursue both visible. v2 changes:
   - pursue-wrap--modal now flex:1 (was flex:2). Pursue is still visually
     primary because it's filled forest green vs outlined; flex:2 was
     over-doing it and squeezing apply-btn into a 2-line wrap.
   - apply-btn padding tightened so it never wraps at narrow widths.
   - white-space:nowrap on both pursue-btn--compact and apply-btn to
     guarantee single-line CTAs.
   - grant-page-link (Visit official) gets justify-content:center so it
     center-aligns on mobile column layout (was left-aligned). */
.modal-actions .pursue-wrap--modal {
  flex: 1;
  display: flex;
  min-width: 0; /* prevents flex children from forcing min-content overflow */
}
.modal-actions .pursue-wrap--modal .pursue-btn--compact {
  flex: 1;
  width: 100%;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.modal-actions .apply-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  background: transparent;
  color: var(--forest);
  border: 1.5px solid var(--forest);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  white-space: nowrap;
  min-width: 0;
}

.modal-actions .apply-btn:hover {
  background: var(--forest);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,67,50,.2);
}

.modal-actions .apply-btn svg,
.modal-actions .apply-btn i {
  width: 16px;
  height: 16px;
}

.modal-actions .grant-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.65rem 1rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  text-decoration: none;
  border: 1.5px solid var(--ink-6);
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.modal-actions .grant-page-link:hover {
  color: var(--forest-mid);
  border-color: var(--forest-mid);
}
.modal-actions .grant-page-link svg { flex-shrink: 0; }

/* ── Pursue this grant (Dashboard V1 Phase 4, Apr 24 2026) ────────
   Modal-scoped outlined pill. Only rendered for signed-in users;
   empty wrap collapses via :empty. Also applied to the quiz .cb-card
   aside (icon variant) and homepage detail modal. Grant-page-level
   primary variant lives in grant-page.css. */
.pursue-wrap {
  display: inline-flex;
  align-items: center;
}
.pursue-wrap:empty { display: none; }
/* Apr 25 2026 (post-QA strategic decision D) — filled forest green;
   was outlined. Visual continuity with post-pursue Tracking pill +
   primary-action confidence on a high-intent surface. */
.pursue-btn.pursue-btn--compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 1.1rem;
  background: var(--forest-mid);
  color: var(--white);
  border: 1.5px solid var(--forest-mid);
  border-radius: var(--r-full);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
  box-shadow: 0 1px 3px rgba(27, 67, 50, .15);
}
.pursue-btn.pursue-btn--compact:hover {
  background: var(--forest);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(27, 67, 50, .22);
}
.pursue-btn.pursue-btn--compact:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}
.pursue-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #E8EFEA;
  border: 1px solid #C8D9CE;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
}
.pursue-status__label {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
}
.pursue-status__link {
  color: var(--forest-mid);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
}
.pursue-status__link:hover { text-decoration: underline; }

/* Icon variant — compact chip for quiz .cb card aside */
.pursue-btn.pursue-btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  color: var(--forest-mid);
  border: 1px solid var(--forest-mid);
  border-radius: 4px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  line-height: 1.1;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.pursue-btn.pursue-btn--icon:hover {
  background: var(--forest-mid);
  color: var(--white);
}
.pursue-btn.pursue-btn--icon:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
}
.pursue-btn.pursue-btn--icon svg { flex-shrink: 0; }
/* May 4 2026: icon variant used inside .cb__aside (156px wide). The default
   inline-flex + nowrap caused horizontal overflow when text was "TRACKING ·
   Open in dashboard →". Stacks vertically + label/link both shorter font. */
.pursue-status.pursue-status--icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 8px;
  gap: 1px;
  font-size: 11px;
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
  cursor: help;
}
.pursue-status.pursue-status--icon .pursue-status__label { font-size: 9px; }
.pursue-status.pursue-status--icon .pursue-status__link {
  font-size: 11px;
  line-height: 1.1;
}

/* Quiz .cb-card aside wrapper */
.cb__pursue {
  margin-top: 6px;
}
.cb__pursue:empty { display: none; }

/* ============================================================
   S19: GRANT MODAL — VERDICT + ACCORDION + TOOLKIT (Apr 2026)
   ============================================================ */

/* Modal header description (below title) */
.modal-header__desc {
  font-size: 0.875rem; color: var(--ink-3); line-height: 1.55;
  padding-right: 2rem; margin-bottom: 0;
}
.desc-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--sienna); font-size: inherit; font-family: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.modal-header h3 { margin-bottom: 0.25rem; }

/* Program Status Banner — Sprint A Tier 2 (2026-05-03)
   Unified with card pill. Each non-active state has an explanatory
   tooltip on the label and an actionable CTA (bookmark or browse-similar).
   Layout: __line (label + note + tooltip-trigger) + CTA (button or link). */
.modal-status-banner {
  padding: 0.625rem 0.85rem;
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin: 0.75rem 0 0;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.modal-status-banner__line {
  display: inline-block;
  cursor: help; /* indicate hoverable for tooltip */
}
.modal-status-banner strong { font-weight: 700; }

/* State variants — color reflects severity / action urgency */
.modal-status--between-intakes { background: rgba(180,83,9,.08); color: #92400E; }
.modal-status--paused          { background: rgba(185,28,28,.06); color: #991B1B; }
.modal-status--winding-down    { background: rgba(185,28,28,.06); color: #991B1B; }
.modal-status--upcoming        { background: rgba(29,78,216,.06); color: #1E40AF; }
.modal-status--closed          { background: rgba(120,113,108,.10); color: #57534E; }
.modal-status--discontinued    { background: rgba(120,113,108,.10); color: #57534E; }

/* CTA button: bookmark to be notified (between-intakes / paused / upcoming) */
.modal-status-cta {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
  transition: background 0.15s, transform 0.1s;
}
.modal-status-cta--bookmark {
  background: var(--sienna, #C4532B);
  color: var(--paper, #FAF7F2);
  border: none;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-md);
}
.modal-status-cta--bookmark:hover {
  background: var(--sienna-dk, #A8431F);
  transform: translateY(-1px);
}
.modal-status-cta--bookmark:focus-visible {
  outline: 2px solid var(--forest, #1F3A2E);
  outline-offset: 2px;
}
.modal-status-cta--done {
  color: var(--forest, #1F3A2E);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.4rem 0;
}
.modal-status-cta--similar {
  color: var(--forest, #1F3A2E);
  text-decoration: underline;
  text-decoration-color: rgba(31,58,46,.4);
  text-underline-offset: 3px;
  padding: 0.2rem 0;
}
.modal-status-cta--similar:hover {
  text-decoration-color: var(--forest, #1F3A2E);
}

/* Quick Verdict Card */
.verdict-card {
  background: var(--parchment);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  padding: 0.85rem 1rem;
  margin: 1rem 0;
}
.verdict-stats {
  display: flex; align-items: center; justify-content: space-between;
}
.verdict-stat {
  display: flex; flex-direction: column; align-items: center; flex: 1; gap: 0.1rem;
}
.verdict-stat__val {
  font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.2;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.verdict-stat__val--forest { color: var(--forest-mid); }
.verdict-stat__val--amber { color: #B45309; }
.verdict-stat__val--ink { color: var(--ink-2); }
/* A premium stat this visitor has not unlocked. Without it the whole stat CELL disappeared
   when the value stopped being published: a four-stat row silently became three, and the
   thing we sell left no trace of itself on the surface with the most traffic. Blurred says
   "there is a number here"; absent says "we do not have one". Not selectable, not hoverable,
   and never a figure we invented about a programme. */
.verdict-stat__val--veiled {
  color: var(--ink-2);
  filter: blur(4.5px);
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
.verdict-badge--veiled {
  filter: blur(4px);
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
.verdict-stat__label {
  font-size: 0.5625rem; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600;
}
/* Dot meter for difficulty/accessibility scales */
.vd-meter { display: flex; gap: 3px; margin-top: 2px; }
.vd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200, #e5e7eb); }
.vd-dot--green { background: var(--forest-mid, #2d6a4f); }
.vd-dot--amber { background: #d97706; }
.vd-dot--red { background: #dc2626; }
.vd-meter-label { font-size: 0.6rem; color: var(--ink-3); margin-top: 1px; font-weight: 500; }
.verdict-sep { width: 1px; height: 26px; background: var(--ink-4); flex-shrink: 0; }

.verdict-badges { display: flex; gap: 0.35rem; margin-top: 0.6rem; flex-wrap: wrap; }
.verdict-badge {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.625rem; font-weight: 600; padding: 0.15rem 0.5rem;
  border-radius: var(--r-sm);
}
.verdict-badge--green { background: rgba(45,106,79,.08); color: var(--forest-mid); }
.verdict-badge--muted { background: var(--white); color: var(--ink-3); border: 1px solid var(--ink-5); }

/* Accordion sections */
.modal-accordion { border-top: 1px solid var(--ink-5); }

.acc-section { border-bottom: 1px solid var(--ink-5); }
.acc-section + .acc-section { margin-top: 0.5rem; }

.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0.85rem; background: var(--parchment); border: 1px solid rgba(28,25,23,.08);
  border-radius: var(--r-md); cursor: pointer;
  font-family: var(--sans); text-align: left; transition: background .15s var(--ease), border-color .15s var(--ease);
}
@media (hover: hover) {
  .acc-trigger:hover { background: var(--parchment-dk); border-color: rgba(28,25,23,.12); }
}
.acc-trigger:active { background: var(--parchment-dk); }
.acc-section.open .acc-trigger { border-color: rgba(28,25,23,.12); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }

.acc-trigger__left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }

.acc-trigger__icon {
  width: 26px; height: 26px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.acc-trigger__icon--elig { background: rgba(45,106,79,.12); color: var(--forest-mid); }
.acc-trigger__icon--details { background: rgba(196,83,43,.12); color: var(--sienna); }

.acc-trigger__label { font-size: 0.875rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.acc-trigger__hint {
  font-size: 0.7rem; color: var(--ink-4); font-weight: 400; margin-left: 0.25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}

.acc-trigger__arrow { color: var(--ink-3); transition: transform .2s var(--ease); flex-shrink: 0; margin-left: 0.5rem; }
.acc-section.open .acc-trigger__arrow { transform: rotate(180deg); }

.acc-panel { max-height: 0; overflow: hidden; transition: max-height .25s var(--ease); }
.acc-section.open .acc-panel { max-height: 600px; border: 1px solid rgba(28,25,23,.08); border-top: none; border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.acc-panel__inner { padding: 0.5rem 0.85rem 0.85rem; }

/* Application Toolkit — free (locked) */
.modal-toolkit {
  margin: 1rem -1.75rem 0; padding: 1.25rem 1.75rem 1.5rem;
  background: linear-gradient(180deg, var(--parchment) 0%, rgba(184,134,11,.06) 50%, rgba(184,134,11,.06) 100%);
  border-top: 1px solid var(--ink-4);
}

.tk-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.tk-header__icon {
  width: 36px; height: 36px; background: rgba(184,134,11,.10); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; color: #B8860B; flex-shrink: 0;
}
.tk-header__title { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.tk-header__sub { font-size: 0.75rem; color: var(--ink-3); }

.tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }

.tk-tile {
  background: var(--white); border-radius: var(--r-md); padding: 0.75rem 0.85rem;
  border: 1px solid rgba(184,134,11,.25); display: flex; flex-direction: column; gap: 0.35rem;
}
.tk-tile--locked { cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); position: relative; }
.tk-tile--locked:active { border-color: #B8860B; box-shadow: 0 0 0 2px rgba(184,134,11,.15); }
@media (hover: hover) {
  .tk-tile--locked:hover { border-color: #B8860B; box-shadow: 0 0 0 2px rgba(184,134,11,.12); }
}
.tk-tile__lock {
  font-size: 0.625rem; font-weight: 600; color: #B8860B; letter-spacing: 0.03em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.25rem; margin-top: 0.15rem;
}
.tk-tile--wide { grid-column: 1 / -1; }

.tk-tile__top { display: flex; align-items: center; gap: 0.45rem; }
.tk-tile__icon {
  width: 24px; height: 24px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tk-tile__icon--tip { background: rgba(184,134,11,.10); color: #B8860B; }
.tk-tile__icon--steps { background: rgba(196,83,43,.08); color: var(--sienna); }
.tk-tile__icon--docs { background: rgba(45,106,79,.08); color: var(--forest-mid); }
.tk-tile__icon--pitfalls { background: rgba(185,28,28,.05); color: #991B1B; }
.tk-tile__icon--strategy { background: rgba(45,106,79,.08); color: var(--forest-mid); }

.tk-tile__name { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.tk-tile__count { font-size: 0.6875rem; font-weight: 700; color: #B8860B; margin-left: auto; }
.tk-tile__preview {
  font-size: 0.75rem; color: var(--ink-3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tk-tile__preview em { font-style: italic; }

.tk-cta { display: flex; align-items: center; gap: 0.75rem; }
.tk-cta-btn {
  background: #B8860B; color: var(--white); border: none;
  padding: 0.65rem 1.5rem; border-radius: var(--r-full); font-size: 0.875rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--sans); transition: all .15s var(--ease); text-decoration: none;
}
@media (hover: hover) {
  .tk-cta-btn:hover { filter: brightness(1.1); transform: translateY(-1px); color: var(--white); }
}
.tk-cta-btn--pulse { animation: tkPulse .6s ease; }
@keyframes tkPulse { 0%,100% { transform: scale(1); } 30% { transform: scale(1.04); box-shadow: 0 0 16px rgba(184,134,11,.3); } }
.tk-cta-price { font-size: 0.75rem; color: var(--ink-3); }
.tk-cta-detail { font-size: 0.6875rem; color: var(--ink-3); margin-top: 0.5rem; }

/* Application Toolkit — premium (unlocked) */
.modal-toolkit--unlocked {
  margin: 1rem -1.75rem 0; padding: 1.25rem 1.75rem 1.5rem;
  background: rgba(184,134,11,.06);
}

.tip-callout {
  font-size: 0.875rem; color: var(--ink-2); line-height: 1.65;
  padding: 0.75rem 1rem; background: var(--white);
  border-left: 2.5px solid rgba(184,134,11,.25);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 1rem;
}
.tip-callout__label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #B8860B; margin-bottom: 0.3rem;
  display: flex; align-items: center; gap: 0.3rem;
}
.tip-callout p { margin: 0; }

.tk-section-label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #B8860B; margin: 1rem 0 0.5rem;
}

.tk-steps { display: flex; flex-direction: column; gap: 0; }
.tk-step { display: flex; gap: 0.65rem; padding: 0.35rem 0; }
.tk-step__num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--forest-mid); color: var(--white);
  font-family: var(--sans); font-size: 0.625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.tk-step:not(:last-child) .tk-step__num::after {
  content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 1px; height: calc(100% + 4px); background: var(--ink-4);
}
.tk-step__title { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.tk-step__desc { font-size: 0.75rem; color: var(--ink-3); line-height: 1.4; }

.tk-prep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.tk-prep-card {
  background: var(--white); border-radius: var(--r-md); padding: 0.65rem 0.75rem;
  border: 1px solid var(--ink-5);
}
.tk-prep-card--full { grid-column: 1 / -1; }
.tk-prep-card__label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-3); margin-bottom: 0.35rem;
}
.tk-prep-card ul { list-style: none; padding: 0; }
.tk-prep-card li {
  font-size: 0.8125rem; color: var(--ink-2); padding: 0.12rem 0;
  display: flex; gap: 0.3rem; line-height: 1.45;
}
.tk-prep-card li .doc-bullet { color: var(--forest-mid); flex-shrink: 0; }
.tk-prep-card li .pit-bullet { color: #991B1B; flex-shrink: 0; }
.tk-prep-card li.more-items { font-size: 0.75rem; color: var(--ink-3); }
.tk-prep-card p { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.5; }

.tk-stack-item {
  display: flex; align-items: flex-start; gap: 0.3rem; padding: 0.2rem 0; font-size: 0.8125rem;
}
.tk-stack-item strong { color: var(--ink); font-size: 0.78rem; }
.tk-stack-item span { color: var(--ink-3); font-size: 0.72rem; }
.tk-stack-check { color: var(--forest-mid); flex-shrink: 0; margin-top: 0.1rem; }

/* Auth modal overrides */
.auth-modal {
  display: flex;
  flex-direction: row;
  max-width: 780px;
  overflow: hidden;
}

.auth-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

/* ---------------------------------------------------------------
   Orphan auth-modal CSS block (lines ~3683-3811) removed 2026-04-18.
   These were leftover duplicates from a prior auth modal redesign,
   silently adding margins/paddings/gaps on top of the canonical
   rules at line ~5426+. Cleaning them up resolved the form-group
   margin-bottom bug AND the .auth-divider 1.25rem margin bug.

   Unique rules that didn't have a duplicate elsewhere have been
   moved into the canonical block at line ~5426+ where applicable.
   --------------------------------------------------------------- */

.password-input-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0.25rem;
}

.password-toggle i, .password-toggle svg {
  width: 18px;
  height: 18px;
}

/* (orphan .submit-btn / .auth-footer / .auth-footer .link-btn rules
   removed 2026-04-18 — duplicates of canonical rules at line ~5593+.
   The orphan .auth-footer had margin-top: 1.25rem which compounded
   with the sticky-footer layout.) */

/* Modal responsive — non-auth modal rules only. Auth modal mobile
   rules live in their own breakpoint at line ~6383+. */
@media (max-width: 768px) {
  .modal { padding: 1rem; }
  .modal-content { max-height: 92vh; }
  .modal-header { padding: 1.25rem 1.5rem 1rem; }
  .modal-body { padding: 1.25rem 1.5rem 1.5rem; }
  .detail-grid { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column; }
  .tk-grid { grid-template-columns: 1fr; }
  .tk-prep-grid { grid-template-columns: 1fr; }
  .modal-toolkit { margin: 1rem -1.5rem 0; padding: 1.25rem 1.5rem 1.5rem; }
  .modal-toolkit--unlocked { margin: 1rem -1.5rem 0; padding: 1.25rem 1.5rem 1.5rem; }
}


/* ============================================================
   S19: QUIZ FUNCTIONAL ELEMENTS
   ============================================================ */

/* Quiz mode selection */
.quiz-selection-container {
  display: none;
}

.quiz-selection-container.active {
  display: block;
}

.finder-header {
  text-align: center;
  margin-bottom: 2rem;
  width: 100%;
}

.finder-header h3 {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.finder-header p {
  font-size: 0.9375rem;
  color: var(--ink-3);
  line-height: 1.5;
}

.quiz-options-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.quiz-type-option {
  background: var(--parchment);
  border: 2px solid rgba(28,25,23,0.06);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem;
  cursor: pointer;
  transition: all .3s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}

.quiz-type-option:hover {
  border-color: var(--sienna);
  background: var(--paper-warm);
  box-shadow: 0 6px 20px rgba(196,83,43,.08);
  transform: translateY(-3px);
}

.quiz-type-option::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sienna);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  opacity: 0;
  transition: opacity .25s var(--ease);
}

.quiz-type-option:hover::before { opacity: 1; }

.quiz-type-icon {
  width: 54px;
  height: 54px;
  background: var(--sienna-lt);
  color: var(--sienna);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s var(--ease);
}

.quiz-type-option:hover .quiz-type-icon {
  background: var(--sienna-glow);
  transform: scale(1.05);
}

.quiz-type-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.quiz-type-content h4 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}

.quiz-type-content p {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.4;
}

.quiz-type-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.quiz-detail {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  padding-left: 1.1rem;
}

.quiz-detail::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--forest-mid);
  font-weight: 700;
  font-size: 0.7rem;
}

.quiz-detail svg { color: var(--forest-mid); flex-shrink: 0; }

.quiz-type-arrow {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  color: var(--ink-4);
  transition: all .25s var(--ease);
}

.quiz-type-option:hover .quiz-type-arrow {
  color: var(--sienna);
  transform: translateX(4px);
}

/* Quiz steps */
.quiz-container {
  display: none;
}

.quiz-container.active {
  display: block !important;
}

/* Ensure precision quiz stacks header above content */
.quiz-container.advanced-quiz .finder-header {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

.quiz-step {
  display: none;
}

.quiz-step.active {
  display: block;
  animation: fadeIn .3s var(--ease);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-step h3 {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin-bottom: 0.5rem;
}

.quiz-step p {
  font-size: 0.9375rem;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* Quiz question label */
.quiz-label {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1.25rem;
  text-align: center;
  line-height: 1.3;
}

.multi-select-hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-3);
  text-align: center;
  margin-top: -0.75rem;
  margin-bottom: 1rem;
}

/* Back to quiz selection */
.back-to-selection-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-full);
  transition: all .15s var(--ease);
  font-family: var(--sans);
  margin-bottom: 1rem;
}

.back-to-selection-btn:hover {
  color: var(--sienna);
  background: var(--sienna-lt);
}

.back-to-selection-btn i,
.back-to-selection-btn svg {
  width: 14px;
  height: 14px;
}

/* Quiz options — default 2-column compact grid */
.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.quiz-options[data-multi="true"] {
  grid-template-columns: repeat(2, 1fr);
}

/* Quiz option — horizontal card with text left */
.quiz-option {
  background: var(--white);
  border: 1.5px solid var(--ink-5);
  border-radius: var(--r-md);
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  transition: all .15s var(--ease);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  position: relative;
  text-align: left;
  min-height: auto;
}

.quiz-option:hover {
  border-color: rgba(196,83,43,.35);
  background: var(--paper-warm);
  box-shadow: 0 2px 8px rgba(196,83,43,.06);
}

.quiz-option.selected {
  border-color: var(--sienna);
  background: var(--sienna-lt);
}

/* Selected checkmark — centered inside the .quiz-auto-advance-ring (32×32 at top:3/right:3 → centre at 19,19 from edges; 18×18 checkmark needs top:10/right:10 to share that centre) */
.quiz-option.selected::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  background: var(--sienna);
  color: var(--white);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  z-index: 1;
}

/* Auto-advance countdown ring on multi-select single-pick */
.quiz-auto-advance-ring {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 2.5px solid transparent;
  border-top-color: var(--sienna);
  opacity: 0;
  pointer-events: none;
}
.quiz-auto-advance-ring--active {
  opacity: 1;
  animation: quizAutoAdvanceSpin 1.2s linear forwards;
}
@keyframes quizAutoAdvanceSpin {
  0% { transform: rotate(0deg); border-color: transparent; border-top-color: var(--sienna); }
  25% { border-right-color: var(--sienna); }
  50% { border-bottom-color: var(--sienna); }
  75% { border-left-color: var(--sienna); }
  100% { transform: rotate(360deg); border-color: var(--sienna); }
}

/* Option icon — small, inline */
.quiz-option .option-icon,
.option-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  border-radius: var(--r-sm);
  background: var(--parchment);
  flex-shrink: 0;
  transition: all .15s var(--ease);
}

.quiz-option .option-icon i,
.quiz-option .option-icon svg {
  width: 18px;
  height: 18px;
}

.quiz-option.selected .option-icon {
  color: var(--sienna);
  background: var(--sienna-glow);
}

.quiz-option:hover .option-icon {
  color: var(--sienna);
  background: var(--sienna-lt);
}

/* Option content */
.option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 20px;
  min-width: 0;
}

.option-title {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.option-desc {
  font-size: 0.6875rem;
  color: var(--ink-3);
  line-height: 1.3;
}

/* Compact grid — 3 columns for province/industry (hides descriptions) */
.quiz-options.compact-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.quiz-options.compact-grid .quiz-option {
  padding: 0.55rem 0.75rem;
  justify-content: center;
  text-align: center;
  min-height: 44px;
}

.quiz-options.compact-grid .option-icon {
  display: none;
}

.quiz-options.compact-grid .option-content {
  padding-right: 0;
  align-items: center;
}

.quiz-options.compact-grid.multi-select .option-content {
  padding-right: 18px;
}

.quiz-options.compact-grid .option-desc {
  display: none;
}

.quiz-options.compact-grid .option-title {
  white-space: normal;
  line-height: 1.25;
  font-size: 0.8125rem;
}

.quiz-options.compact-grid .quiz-option.selected::after {
  top: 11px;
  right: 11px;
  width: 16px;
  height: 16px;
  font-size: 9px;
}

/* quick_quiz_q4_v1: the "Optional" reassurance is the most important line on this step — `.quiz-step p`
   (0,1,1) was painting it ink-3 grey. */
.quiz-container[data-quiz-mode="quick"] .quiz-step[data-step="4"] p.multi-select-hint {
  color: var(--ink-2);
}
.quiz-container[data-quiz-mode="quick"] .quiz-step[data-step="4"] p.multi-select-hint strong {
  color: var(--ink);
  font-weight: 700;
}

/* quick_quiz_q4_v1 (2026-09-18): on a phone the 7 ownership options stacked full-width pushed
   Find Grants below the fold (the step ended at 811px on a 375x812 screen) — friction on the one
   question designed to cost nothing. Phones only: two columns, titles only. Desktop keeps the
   descriptions ("Arrived within the last 5 years" carries meaning). Scoped to quick step 4, and
   !important because the phone rule it overrides (.quiz-options, 1fr) is !important. */
@media (max-width: 560px) {
  .quiz-container[data-quiz-mode="quick"] .quiz-step[data-step="4"] .quiz-options {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
  }
  .quiz-container[data-quiz-mode="quick"] .quiz-step[data-step="4"] .quiz-option {
    padding: 0.6rem 2rem 0.6rem 0.7rem;
    min-height: 48px;
    align-items: center;
  }
  .quiz-container[data-quiz-mode="quick"] .quiz-step[data-step="4"] .option-icon,
  .quiz-container[data-quiz-mode="quick"] .quiz-step[data-step="4"] .option-desc {
    display: none;
  }
  .quiz-container[data-quiz-mode="quick"] .quiz-step[data-step="4"] .option-title {
    font-size: 0.8125rem;
    line-height: 1.25;
    white-space: normal;
  }
  /* The checkbox stays in its corner: it sits exactly over the generic .quiz-option.selected::after
     badge, and moving it (centring was tried) uncovers that badge — two checkmarks per tick. */
}

/* Multi-select with checkboxes */
.quiz-options.multiple-select .quiz-option {
  padding-right: 2.5rem;
}

.option-checkbox {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink-4);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s var(--ease);
}

/* Hide the Lucide check icon inside checkbox by default */
.option-checkbox i,
.option-checkbox svg {
  display: none;
}

/* Show checkmark only when selected */
.quiz-option.selected .option-checkbox {
  border-color: var(--sienna);
  background: var(--sienna);
}

.quiz-option.selected .option-checkbox i,
.quiz-option.selected .option-checkbox svg {
  display: block;
  width: 12px;
  height: 12px;
  color: var(--white);
  stroke-width: 3;
}

.quiz-option.selected .option-checkbox::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
  margin-top: -2px;
}

/* Quiz navigation */
.quiz-navigation,
.quick-quiz-nav,
.advanced-quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--ink-5);
  gap: 1rem;
}

.quiz-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem;
  background: transparent;
  border: 1.5px solid var(--ink-5);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.quiz-back:hover {
  border-color: var(--ink-4);
  color: var(--ink);
}

.quiz-next {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.5rem;
  background: var(--forest-mid);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.quiz-next:hover {
  background: var(--forest);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,67,50,.2);
}

.quiz-next:disabled {
  /* Apr 25 (post-QA Lens 2) — was 0.35 but white-on-green at 0.35 is borderline
     unreadable. 0.45 keeps the "clearly inactive" feel while making the "Next"
     label legible enough that users see where the button will appear. */
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

.quiz-next:disabled:hover {
  background: var(--forest-mid);
  transform: none;
  box-shadow: none;
}

.quiz-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.progress-fill {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--ink-5);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--sienna), var(--sienna-dk));
  border-radius: 4px;
  transition: width .3s var(--ease);
}

.progress-text {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-3);
}

/* Quiz results */
.quiz-results {
  text-align: center;
}

.results-header {
  margin-bottom: 2rem;
}

.results-header h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.results-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
#quizMatchCount,
#quizFundingTotal {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: 0.25rem;
}

#quizSignupCta {
  background: linear-gradient(135deg, var(--sienna-lt), rgba(196,83,43,.04));
  border: 1px solid rgba(196,83,43,.15);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-top: 1.5rem;
  text-align: center;
}

#quizSignupCta h4 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

#quizSignupCta p {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}

#quizSignupCta button,
#quizSignupCta .btn-primary {
  padding: 0.6rem 1.75rem;
  background: var(--sienna);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

#quizSignupCta button:hover,
#quizSignupCta .btn-primary:hover {
  background: var(--sienna-dk);
  transform: translateY(-1px);
}

/* ── Quiz Auth Gate (dynamically injected by main.js) ── */
.quiz-auth-gate {
  background: linear-gradient(180deg, rgba(196,83,43,.05) 0%, var(--parchment) 100%);
  border: 1.5px solid rgba(196,83,43,.12);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  margin: 1.5rem 0;
  position: relative;
}

.quiz-auth-gate__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 420px;
  margin: 0 auto;
}

.quiz-auth-gate__icon {
  color: var(--ink-3);
  margin-bottom: 0.25rem;
}

.quiz-auth-gate__icon svg {
  width: 32px;
  height: 32px;
}

.quiz-auth-gate__content h3,
.quiz-auth-gate__content strong {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}

.quiz-auth-gate__content p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

.quiz-auth-gate__google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  max-width: 320px;
  padding: 0.75rem 1.5rem;
  min-height: 48px;
  background: var(--forest-mid);
  color: var(--white);
  border: none;
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  margin-top: 0.5rem;
}

.quiz-auth-gate__google:hover {
  background: var(--forest);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,67,50,.2);
}

.quiz-auth-gate__google img,
.quiz-auth-gate__google svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.quiz-auth-gate__email {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--forest-mid);
  text-decoration: none;
  transition: color .15s var(--ease);
}

.quiz-auth-gate__email:hover {
  color: var(--sienna);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quiz-auth-gate__teaser {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.8rem; font-weight: 600; color: var(--forest);
  margin: -4px 0 8px; letter-spacing: -0.01em;
}
.quiz-auth-gate__free {
  font-size: 0.75rem !important;
  color: var(--ink-3) !important;
  margin-top: 0.25rem !important;
}

/* "No thanks" dismiss — intentionally subtle, NOT a primary CTA */
.quiz-auth-gate__dismiss {
  display: inline-block !important;
  margin-top: 0.75rem;
  padding: 0.4rem 0 !important;
  background: none !important;
  border: none !important;
  color: var(--ink-3) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  cursor: pointer;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  transition: color .15s var(--ease);
  font-family: var(--sans);
}

.quiz-auth-gate__dismiss:hover {
  color: var(--ink-2);
}

/* ── Quiz Results Action Buttons (Retake Quiz / Browse All Grants) ── */
.results-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-5);
}

.results-actions .btn,
.results-actions .secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  background: transparent;
  color: var(--ink-2);
  border: 1.5px solid var(--ink-5);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.results-actions .btn:hover,
.results-actions .secondary-btn:hover {
  border-color: var(--ink-4);
  color: var(--ink);
  background: var(--parchment);
}

.results-actions .btn i,
.results-actions .btn svg {
  width: 14px;
  height: 14px;
}

/* Quick quiz auth gate variant */
.quick-quiz-auth-gate {
  margin: 1rem 0;
  padding: 2rem 1.5rem;
}

@media (max-width: 768px) {
  .quiz-auth-gate {
    padding: 1.75rem 1.25rem;
  }

  .quiz-auth-gate__content h3,
  .quiz-auth-gate__content strong {
    font-size: 1.125rem;
  }

  .results-actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .results-actions .btn,
  .results-actions .secondary-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Quiz funding highlight (results header) */
.quiz-funding-highlight {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--parchment);
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-5);
}

.quiz-funding-amount {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--sienna);
  display: block;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.quiz-funding-label {
  font-size: 0.875rem;
  color: var(--ink-2);
  display: block;
  line-height: 1.5;
}

.quiz-funding-sublabel {
  font-size: 0.8125rem;
  color: var(--ink-3);
  display: block;
  margin-top: 0.25rem;
}

.results-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  color: var(--forest-mid);
}

.results-icon svg {
  width: 100%;
  height: 100%;
}#resultsSummaryText {
  font-size: 0.9375rem;
  color: var(--ink-2);
  line-height: 1.5;
}/* Quiz signup bar */
.quiz-signup-bar {
  background: linear-gradient(135deg, var(--sienna-lt), rgba(196,83,43,.04));
  border: 1px solid rgba(196,83,43,.15);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  margin-top: 1rem;
  text-align: center;
}

/* Tier grants container */
.tier-grants-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

/* Advanced quiz results */
.tiered-results {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.result-tier {
  text-align: left;
}

.tier-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink-5);
}

.tier-header h4 {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}

.tier-badge {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.75rem;
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
}

.tier-badge--perfect {
  background: rgba(45,106,79,.1);
  color: var(--forest-mid);
}

.tier-badge--strong {
  background: rgba(45,106,79,.06);
  color: var(--forest);
}

.tier-badge--good {
  background: var(--gold-lt);
  color: var(--gold);
}

.unified-quiz-results {
  text-align: left;
}

.quiz-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
/* Override .quiz-step p { text-align: center }/* Level badge */
.level-badge {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  display: inline-block;
}

.level-badge.federal { background: rgba(38,70,115,.08); color: var(--navy); }
.level-badge.provincial { background: rgba(45,106,79,.08); color: var(--forest-mid); }
.level-badge.municipal { background: var(--sienna-lt); color: var(--sienna); }
.level-badge.private { background: var(--gold-lt); color: var(--gold); }
.level-badge.territorial { background: var(--parchment-dk); color: var(--ink-2); }


/* ============================================================
   S21: QUICK QUIZ CARDS
   ============================================================ */
.qr-card {
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all .25s var(--ease);
  position: relative;
  text-align: left;
}

.qr-card p, .qr-card h4, .qr-card span, .qr-card div {
  text-align: left !important;
}

@media (hover: hover) {
  .qr-card:hover {
    box-shadow: 0 8px 24px rgba(28,25,23,.08);
    transform: translateY(-2px);
    border-color: rgba(196,83,43,.12);
    cursor: pointer;
  }
}

.qr-card--blurred {
  filter: blur(4px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.qr-card--hidden {
  display: none;
}

.qr-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* 2026-09-18: a long amount ("$75K-$1M typical (up to $10M)") used to squeeze the badges into a
     vertical stack beside a 2-line amount. Badges keep one row; the amount takes its own line
     when both do not fit. */
  flex-wrap: wrap;
  row-gap: 0.35rem;
}
.qr-card-top > .qr-card-badges { flex: 0 0 auto; }
/* The guest's card #1 shares a desktop grid row with the sign-up panel, which is taller; stretched
   to it, the card showed an empty band between its summary and its footer. Content height instead —
   only for the card the gate sits beside, so signed-in side-by-side cards keep equal heights. */
.results-preview .qr-card:has(+ .quick-quiz-auth-gate) { align-self: start; }

.qr-card-badges {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.qr-card-amount {
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--forest-mid);
}

.qr-card-title {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.qr-card-org {
  font-size: 0.75rem;
  color: var(--ink-3);
}

.qr-card-desc {
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 2026-09-18: the two rules above LOSE on every quick-quiz card. `.quiz-step p` (0,0,1,1) beats a
   single class (0,0,1,0), so the funder line and the summary both rendered at 15px with a 1.5rem
   bottom margin: the secondary line read as body copy, and a long funder name ran to 7 lines on a
   phone (53 open records carry a delivery partnership in `organization`, up to 197 chars). The same
   trap `.cb p.cb__desc` fixed for the precision card in May. Compound selectors at (0,0,2,1); the
   card's own flex gap owns the spacing, and the funder line clamps to 2 lines. */
.qr-card p.qr-card-org {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-2);   /* ink-3 is ~2.5:1 on white, unreadable at 12px; matches .cb__org */
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qr-card p.qr-card-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);   /* `.quiz-step p` was painting this ink-3 (~2.5:1) too */
  margin: 0;
}

.qr-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ink-5);
  margin-top: auto;
}

.qr-card-deadline {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-3);
}

.qr-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qr-card-save {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--r-full);
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.qr-card-save:hover {
  background: var(--sienna-lt);
  color: var(--sienna);
}

.qr-card-save.saved {
  color: var(--sienna);
  background: var(--sienna-lt);
}

.qr-card-details {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--forest-mid);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--r-full);
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.qr-card-details:hover {
  color: var(--sienna);
  background: var(--sienna-lt);
}

.match-badge {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: var(--r-full);
  background: rgba(45,106,79,.1);
  color: var(--forest-mid);
}

.qr-card-empty {
  background: var(--parchment);
  border: 2px dashed var(--ink-5);
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--ink-3);
  font-size: 0.875rem;
}


/* ============================================================
   S22: AUTH MODAL
   ============================================================ */
#loginModal.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(28,25,23,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

#loginModal.modal.active,
#loginModal.modal[style*="flex"] {
  display: flex;
}

.modal-content.auth-modal {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  max-width: 840px;
  width: 100%;
  max-height: 92vh;
  /* Outer modal stays fixed; scroll happens inside .auth-modal-form so the
     submit button can be position:sticky at the bottom of the form column.
     This ensures the primary CTA is always visible without users having to
     discover hidden scroll behavior. */
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px 1fr;
  position: relative;
  animation: modalSlideUp .25s var(--ease);
}

.auth-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(28,25,23,.06);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  transition: all .15s var(--ease);
  z-index: 2;
}

.auth-modal-close:hover {
  background: var(--ink-5);
  color: var(--ink);
}

/* Auth sidebar (left panel) */
.auth-modal-sidebar {
  background: var(--forest);
  color: var(--white);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  /* Stretches to fill the grid row (outer modal's max-height) so the dark
     panel is never visually truncated behind the scrolling form column. */
  align-self: stretch;
  min-height: 100%;
}

.auth-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white);
}

.auth-sidebar-logo svg {
  width: 28px;
  height: 28px;
}

.auth-sidebar-heading {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
}

.auth-sidebar-sub {
  font-size: 0.875rem;
  opacity: 0.75;
  line-height: 1.5;
}

.auth-sidebar-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.auth-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.auth-feature svg,
.auth-feature i {
  flex-shrink: 0;
  color: var(--forest-light);
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

.auth-sidebar-trust {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-top: auto;
}

/* Auth form (right panel) — scroll container for the form itself */
.auth-modal-form {
  padding: 1.25rem 1.5rem 0;     /* tighter — no longer wasting horizontal space either */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.625rem;                  /* between header + methods sections */
  /* Explicit max-height so overflow-y:auto actually activates. Without this
     the grid cell grows to natural content height (bypasses modal's clip),
     and sticky positioning never triggers because there's no scroll. */
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  position: relative;             /* for the ::after fade below */
}

/* Scroll affordance — fade at bottom of form when content overflows, cues
   users that the submit button below is on pinned/scrollable content. */
.auth-modal-form::after {
  content: '';
  position: sticky;
  bottom: 108px;                 /* above the sticky submit+footer */
  left: 0;
  right: 0;
  height: 32px;
  margin-top: -32px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
  pointer-events: none;
  z-index: 1;
}

.auth-form-header {
  margin-bottom: 0.5rem;
}

#authFormTitle {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

#authFormSubtitle {
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* Google + email methods */
.auth-methods {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.auth-method-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.auth-method-btn.google-btn {
  background: var(--white);
  border: 1.5px solid var(--ink-5);
  color: var(--ink);
}

.auth-method-btn.google-btn:hover {
  border-color: var(--ink-4);
  box-shadow: var(--sh-sm);
}

.auth-method-btn.google-btn svg,
.auth-method-btn.google-btn img {
  width: 20px;
  height: 20px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ink-5);
}

/* Email form */
.email-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-group label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  font-family: var(--sans);
}

.form-group input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--parchment);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  color: var(--ink);
  font-family: var(--sans);
  transition: all .15s var(--ease);
}

.form-group input:focus {
  outline: none;
  border-color: var(--forest-mid);
  box-shadow: 0 0 0 3px var(--forest-glow);
  background: var(--white);
}

.password-input-wrapper {
  position: relative;
}

.password-input-wrapper input {
  padding-right: 2.5rem;
}

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s var(--ease);
}

.password-toggle:hover {
  color: var(--ink-2);
}

.submit-btn {
  width: 100%;
  padding: 0.95rem 1rem;  /* 48px effective height — clears 44px touch-target minimum */
  background: var(--forest-mid);
  color: var(--white);
  border: none;
  border-radius: var(--r-md);
  font-size: 1rem;         /* bumped from 0.9375 to give primary CTA clear dominance over the Google button */
  font-weight: 700;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  margin-top: 0.25rem;
}

.submit-btn:hover {
  background: var(--forest);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,67,50,.2);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Sticky submit row — pins the primary CTA + sign-in link to the bottom of
   the scrolling form column so users always know where to tap. Only the
   auth-footer gets an opaque white bg; the button keeps its forest-green
   background from the base .submit-btn rule (don't override it). */
.auth-modal-form .email-form > .submit-btn,
.auth-modal-form .auth-footer {
  position: sticky;
  z-index: 2;
}
.auth-modal-form .email-form > .submit-btn {
  bottom: 58px;  /* space for auth-footer below */
  margin-top: 0.5rem;
  /* Subtle top shadow hints at scrollable content above */
  box-shadow: 0 -12px 16px -16px rgba(28,25,23,0.12), 0 2px 0 0 var(--white);
}
.auth-modal-form .auth-footer {
  bottom: 0;
  background: var(--white);
  padding: 0.85rem 0 1.25rem;
}

.auth-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.link-btn {
  background: none;
  border: none;
  color: var(--forest-mid);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.8125rem;
  font-family: var(--sans);
  text-decoration: none;
  transition: color .15s var(--ease);
}

.link-btn:hover {
  color: var(--sienna);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ============================================================
   S23: USER MENU & DROPDOWN
   ============================================================ */
.user-menu {
  display: none;
  position: relative;
}

.user-menu.active {
  display: flex;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-full);
  transition: background .15s var(--ease);
  font-family: var(--sans);
}

.user-btn:hover {
  background: rgba(28,25,23,.04);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--forest-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--forest-mid);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(28,25,23,.1);
  min-width: 210px;
  padding: 0.5rem;
  /* Hover bridge: extra top padding closes the visual gap inside the element,
     so mouse traversal trigger→menu keeps :hover alive on .user-menu parent. */
  padding-top: calc(0.5rem + 4px);
  background-clip: padding-box;
  z-index: 1100;
}

.user-dropdown.active,
.user-dropdown.show,
.user-menu:hover .user-dropdown {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .1s var(--ease);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  text-decoration: none;
}

.dropdown-item:hover {
  background: var(--parchment);
  color: var(--ink);
}

.dropdown-item i,
.dropdown-item svg { flex-shrink: 0; color: var(--ink-3); width: 15px; height: 15px; }

.dropdown-item:hover i,
.dropdown-item:hover svg { color: var(--sienna); }

.logout-item {
  color: #dc2626;
  border-top: 1px solid var(--ink-5);
  margin-top: 0.25rem;
  padding-top: 0.75rem;
}

.logout-item:hover {
  background: rgba(220,38,38,.05);
  color: #dc2626;
}

/* Auth buttons (pre-auth state) */
.auth-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.auth-btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all .15s var(--ease);
  border: none;
  border-radius: var(--r-full);
}

.login-btn {
  padding: 0.4rem 1rem;
  color: var(--ink-2);
  background: transparent;
}

.login-btn:hover { color: var(--ink); background: rgba(28,25,23,.04); }

.signup-btn {
  padding: 0.4rem 1.2rem;
  color: var(--white);
  background: var(--forest-mid);
}

.signup-btn:hover {
  background: var(--forest);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,67,50,.2);
}


/* ============================================================
   S24: SEARCH SUGGESTIONS
   ============================================================ */
#searchSuggestions,
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sh-md);
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
  display: none;
}

#searchSuggestions.active,
.search-suggestions.active {
  display: block;
}

#searchSuggestions .suggestion-item,
.search-suggestions .suggestion-item {
  padding: 0.6rem 0.85rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .1s var(--ease);
  font-family: var(--sans);
}

#searchSuggestions .suggestion-item:hover,
.search-suggestions .suggestion-item:hover {
  background: var(--parchment);
  color: var(--ink);
}

#searchSuggestions .suggestion-item mark,
.search-suggestions .suggestion-item mark {
  background: var(--gold-lt);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* Make the search wrapper relative for suggestions positioning */
.filter-group:has(.filter-group__input) {
  position: relative;
}


/* ============================================================
   S25: LOADING & PAGINATION (functional)
   ============================================================ */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  min-height: 200px;
}

/* ---- Homepage feed: reserve the space the grant cards will occupy -----------
   2026-08-17. The homepage feed rendered a 200px loading box and then populated
   to ~3,090px on a phone, pushing 2,893px of content down about one second after
   load. Below the fold that costs nothing, which is why lab tools scored CLS ~0
   and `docs/OPEN-LOOPS.md` recorded "CLS ~0 everywhere" — but a reader who has
   scrolled into the feed by then takes the whole shift in their viewport.
   Measured in the field over 465 homepage page-views: median 0.01, p75 0.40,
   p90 1.00, max 2.00, with 137 views (29%) in Google's "poor" band. Reproduced
   at CLS 0.92 by scrolling to the feed before it populates, versus 0.03 after.

   Reserving the height on the loading box removes the push entirely. Values are
   the MEASURED populated heights of #grantsList (10 cards) at each breakpoint,
   not estimates; re-measure if the page size or card design changes.

   Scoped to #grantsList so it cannot reach the other surfaces that share
   .loading-container. The element and its class are deliberately left in place:
   main.src.js:2021 clears the feed only when innerHTML still contains
   "loading-container", so renaming or replacing it would strand the placeholder
   above the real cards. CSS-only for that reason.
   --------------------------------------------------------------------------
   ⚠ RESERVE ON THE LIST, NOT ON THE LOADING BOX, AND NOT WITH :empty.
   Two live measurements shaped this:
   1. `hideLoadingState()` (main.src.js:2022) empties the list and the cards render on
      a LATER frame. Sampling every animation frame on production showed
      3090px -> 0px (33ms, zero element children) -> 3093px. Reserving only on the
      loading box therefore turns one big shift into a bigger one: the collapse to
      zero becomes 3,090px instead of 200px, and measured CLS went UP, not down.
   2. `:empty` cannot carry the reservation across that frame. The list keeps
      whitespace TEXT nodes between renders, so at the collapse frame it reported
      kids=0 but nodes=2 and `:empty=false`. :empty matches only when there is no
      child node at all, whitespace included.
   So the height is reserved on #grantsList itself and released the moment any real
   content lands, keyed on ELEMENT children via :has(). Values are the MEASURED
   populated heights at each breakpoint; re-measure if page size or card design
   changes. Behind @supports so that a browser without :has() simply falls back to
   today's unreserved behaviour rather than being left with a permanent blank block.
   -------------------------------------------------------------------------- */
#grantsList .loading-container {
  align-items: flex-start;     /* keep the spinner in view, not centred 1,500px down */
  padding-top: 3rem;
}

@supports selector(:has(*)) {
  #grantsList { min-height: 3090px; }                              /* phone: 10 cards, one column */
  #grantsList:has(> :not(.loading-container)) { min-height: 0; }   /* real content -> release */

  @media (min-width: 768px) {
    #grantsList { min-height: 2720px; }
    #grantsList:has(> :not(.loading-container)) { min-height: 0; }
  }
  @media (min-width: 1025px) {
    #grantsList { min-height: 1480px; }                            /* two columns, five rows */
    #grantsList:has(> :not(.loading-container)) { min-height: 0; }
  }
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--ink-5);
  border-top-color: var(--forest-mid);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Pagination — functional version matching production class names */
.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.pagination-btn:hover { border-color: var(--forest-mid); color: var(--forest-mid); }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pagination-info {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* Zero results state */
.no-results,
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--ink-3);
}

.no-results h3,
.empty-state h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.no-results p,
.empty-state p {
  font-size: 0.9375rem;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ============================================================
   S26: MOBILE MENU
   ============================================================ */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: 4px;
}

.mobile-menu-toggle .menu-open { display: block; }
.mobile-menu-toggle .menu-close { display: none; }
.mobile-menu-toggle.active .menu-open { display: none; }
.mobile-menu-toggle.active .menu-close { display: block; }

.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: -env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  bottom: -env(safe-area-inset-bottom, 0px);
  z-index: 1100;
  background: rgba(28,25,23,.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.mobile-menu-overlay.active {
  display: block;
}

/* ★★ 2026-08-06 — THE SAME CLOSED-DRAWER TAB TRAP AS nav-v7.css, ON THE HIGHEST-
   TRAFFIC PAGE ON THE SITE. The 2026-08-05 fix went into nav-v7.css, and the
   homepage does not load nav-v7.css — it is governed from here. Measured at
   1440x900 on `/index.html` from a fresh load, pressing Tab: SEVENTEEN stops
   inside the closed drawer, every one of them painted at x1460 outside a 1440px
   viewport, `visibility: visible`. `right: -320px` moves the panel off screen and
   changes nothing about focusability, exactly as `translateX(100%)` did there.
   ⚠ NOT the same code, so not the same fix by copy. This drawer travels on
   `right`, nav-v7's travels on `transform`, and eight pages
   (/resources/* + the store) load BOTH — with this file last, so its `transition`
   shorthand replaces nav-v7's wholesale. That is why `transform` is listed here
   even though nothing in this file sets one: without it, those eight pages kept
   nav-v7's instant `translateX(100%)` on close while only `right` animated, and
   the drawer jumped its full width in one frame. Measured before this change on
   /resources/: `0ms:hidden@x390` — the panel was already gone on the first frame.
   `visibility` is not animatable; it survives the close only because of the 0.3s
   DELAY, and a delay lives in the shorthand that the later file overwrites.
   Verified after: visible at 0/80/160/260ms, hidden by 420ms, on both this page
   and the eight dual-load pages. */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100dvh;
  background: var(--white);
  z-index: 1200;
  box-shadow: var(--sh-xl);
  visibility: hidden;
  transition: right .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  overflow-y: auto;
  /* 72px top padding = 56px nav height + 16px breathing room, so drawer content
     starts BELOW the fixed nav (which is z-indexed above the drawer for the X).
     2026-04-18: fixed after Sign Up Free button was hidden behind the nav. */
  padding: calc(72px + env(safe-area-inset-top, 0px)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-menu.active {
  right: 0;
  visibility: visible;
  transition: right .3s var(--ease), transform .3s var(--ease), visibility 0s linear 0s;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu-link {
  display: block;
  padding: 0.85rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink-5);
  transition: color .15s var(--ease);
  text-decoration: none;
}

.mobile-menu-link:hover {
  color: var(--sienna);
}

.mobile-menu-divider {
  height: 1px;
  background: var(--ink-5);
  margin: 0.5rem 0;
}

.mobile-auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mobile-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  width: 100%;
}

.mobile-auth-btn.primary {
  background: var(--forest-mid);
  color: var(--white);
  border: none;
}

.mobile-auth-btn.primary:hover {
  background: var(--forest);
}

.mobile-auth-btn.secondary {
  background: transparent;
  color: var(--ink-2);
  border: 1.5px solid var(--ink-5);
}

.mobile-auth-btn.secondary:hover {
  border-color: var(--ink-4);
  color: var(--ink);
}

.mobile-menu-section-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 0.25rem;
  margin-top: 0.75rem;
}

body.mobile-menu-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
}


/* ============================================================
   S27: NAV DROPDOWN
   ============================================================ */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0;
  transition: color .15s var(--ease);
  font-family: var(--sans);
}

.nav-dropdown-toggle:hover { color: var(--ink); }

.nav-dropdown-toggle svg {
  transition: transform .2s var(--ease);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -12px;
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(28,25,23,.1);
  min-width: 230px;
  padding: 0.5rem;
  /* Hover bridge: extra top padding closes the visual gap inside the element,
     so mouse traversal trigger→menu keeps :hover alive on .nav-dropdown parent. */
  padding-top: calc(0.5rem + 4px);
  background-clip: padding-box;
  z-index: 1050;
}

/* Show on hover (desktop) AND on JS click toggle */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu.is-open {
  display: block;
}

.nav-dropdown:hover .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: all .1s var(--ease);
  text-decoration: none;
}

.nav-dropdown-item:hover {
  background: var(--parchment);
  color: var(--ink);
}

.nav-dropdown-item svg {
  color: var(--ink-3);
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.nav-dropdown-item:hover svg {
  color: var(--sienna);
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--ink-5);
  margin: 0.35rem 0.75rem;
}


/* ============================================================
   S28: ADDITIONAL RESPONSIVE for functional elements
   ============================================================ */
@media (max-width: 1024px) {
  .grants-list,
  #grantsList {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp-modal__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-content.auth-modal {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .auth-modal-sidebar {
    display: none;
  }

  .quiz-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .results-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .grants-list,
  #grantsList {
    grid-template-columns: 1fr;
  }

  .hp-modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    margin-top: auto;
  }

  .hp-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .hp-modal__header {
    padding: 1.25rem 1.25rem 1rem;
  }

  .hp-modal__body {
    padding: 1.25rem;
  }

  .hp-modal__footer {
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .hp-modal__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .hp-modal__title {
    font-size: 1.25rem;
  }

  .modal-header__desc {
    padding-right: 0;
    line-height: 1.45;
  }

  .hp-modal__amount {
    font-size: 1.125rem;
  }

  .modal-content.auth-modal {
    grid-template-columns: 1fr;
    max-width: calc(100% - 2rem);
    max-height: 95vh;
    border-radius: var(--r-lg);   /* all 4 corners rounded — modal floats, not a bottom-sheet */
  }

  .auth-modal-sidebar {
    display: none;
  }

  .auth-modal-form {
    padding: 1.5rem 1.25rem 0;  /* bottom 0 keeps sticky submit flush */
    max-height: 95vh;           /* match modal cap at this breakpoint */
  }

  .quiz-options {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }

  .quiz-options.compact-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px;
  }

  .quiz-options.compact-grid .quiz-option {
    padding: 0.5rem 0.6rem;
    min-height: 44px;
  }

  .quiz-options.compact-grid .option-title {
    font-size: 0.75rem;
  }

  .quiz-options-container {
    grid-template-columns: 1fr;
  }

  .quiz-label {
    font-size: 1.0625rem;
  }

  .quiz-navigation,
  .quick-quiz-nav,
  .advanced-quiz-nav {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* The progress takes the whole first row; Back + Next share the second. `width:100%` alone never did it —
     the base `.quiz-progress { flex: 1 }` sets flex-basis 0%, which wins over width, so "8 of 8" sat beside
     Back and pushed "Get My Matches" onto a third row (2026-10-01). */
  .quiz-progress {
    order: -1;
    width: 100%;
    flex: 1 1 100%;
  }

  .quiz-navigation .quiz-back,
  .quiz-navigation .quiz-next {
    white-space: nowrap;
    justify-content: center;
  }

  .quiz-navigation .quiz-back {
    flex: 0 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .quiz-navigation .quiz-next {
    flex: 0 1 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .results-preview {
    grid-template-columns: 1fr;
  }

  .quiz-funding-amount {
    font-size: 1.5rem;
  }
  .user-dropdown {
    position: fixed;
    top: 56px;
    right: 1rem;
    left: auto;
    width: 260px;
  }
}

/* Narrowest phones (320px): Back + "Get My Matches" only share a row without the button's target icon. */
@media (max-width: 359px) {
  .quiz-navigation { gap: 0.5rem; }
  .quiz-navigation .quiz-next svg,
  .quiz-navigation .quiz-next i { display: none; }
}

@media (max-width: 480px) {
  .hp-card {
    padding: 1.125rem;
  }

  .hp-card__desc {
    font-size: 0.75rem;
    padding: 0.5rem 0.6rem;
    margin-top: 0.4rem;
  }

  .quiz-options {
    grid-template-columns: 1fr;
  }

  .quiz-option {
    padding: 0.75rem;
    flex-direction: row;
    text-align: left;
    gap: 0.75rem;
  }

  .quiz-option .option-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .hp-modal__grid {
    grid-template-columns: 1fr 1fr;
  }

  .hp-modal__footer {
    flex-direction: column;
    gap: 0.5rem;
  }

  .hp-modal__bookmark,
  .hp-modal__apply {
    width: 100%;
    justify-content: center;
  }

  .cta__actions {
    flex-direction: column;
  }
}


/* ============================================================
   S29: MISC / AUTH GATE / REENTRY
   ============================================================ */
.quiz-auth-reentry {
  background: linear-gradient(135deg, var(--forest-glow), rgba(45,106,79,.03));
  border: 1px solid rgba(45,106,79,.12);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.quiz-auth-reentry p {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.5;
}

.quiz-auth-reentry strong {
  color: var(--ink);
}

.quiz-auth-reentry button {
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
  background: var(--forest-mid);
  color: var(--white);
  border: none;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.quiz-auth-reentry button:hover {
  background: var(--forest);
  transform: translateY(-1px);
}

/* (Removed 2026-04-18: legacy #quizAuthGate CSS block — styled the old precision-quiz
   gate DOM. The new precision gate uses .qag5 (see end of file) with class-specificity
   rules. Orphan ID rules here were winning the cascade over .qag5 and breaking padding,
   background, and button styling. Caught by dev-tools/css-cascade-trace.js on 2026-04-18.) */

/* Toast / notification */
.toast,
.gc-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--sh-lg);
  z-index: 3000;
  opacity: 0;
  transition: all .3s var(--ease);
  font-family: var(--sans);
  white-space: nowrap;
}

.toast.show,
.gc-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Verification banner */
.verification-banner {
  background: var(--gold-lt);
  border-bottom: 1px solid var(--gold-border);
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-2);
  position: sticky;
  top: 56px;
  z-index: 999;
}

.verification-banner a {
  font-weight: 600;
  color: var(--forest-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Accessibility: skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--forest-mid);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 9999;
  transition: top .2s var(--ease);
}

.skip-link:focus {
  top: 0.5rem;
  color: var(--white);
}

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

/* Focus visible for keyboard nav */
*:focus-visible {
  outline: 2px solid var(--forest-mid);
  outline-offset: 2px;
}


/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ============================================================
   S31: ROADMAP PROGRESS TRACKER
   Injected by main.js after precision quiz for logged-in users.
   ============================================================ */
.rm-progress-tracker {
  background: var(--white);
  border: 1px solid var(--ink-5);
  border-radius: var(--r-xl);
  padding: 2rem;
  margin: 1.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.rm-progress-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ink-5);
}

.rm-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--forest-mid), var(--sienna));
  width: 0%;
  transition: width 1s var(--ease);
}

.rm-progress-content {
  position: relative;
}

.rm-progress-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.rm-progress-header__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sienna-lt);
  border-radius: var(--r-md);
  color: var(--sienna);
  flex-shrink: 0;
}

.rm-progress-header__icon svg {
  width: 20px;
  height: 20px;
}

.rm-progress-header__text h3 {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-align: left;
}

.rm-progress-header__text p {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin: 0.15rem 0 0;
  text-align: left;
}

.rm-progress-stages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
  margin: 0 auto 1.5rem;
}

.rm-progress-stage {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-md);
  transition: all .3s var(--ease);
}

.rm-progress-stage--active {
  background: var(--forest-glow);
}

.rm-progress-stage--pending {
  opacity: 0.4;
}

.rm-progress-stage--complete {
  opacity: 1;
}

.rm-progress-stage--complete .rm-progress-stage__indicator {
  background: var(--forest-mid);
  color: var(--white);
}

.rm-progress-stage__indicator {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--parchment);
  border-radius: var(--r-full);
  color: var(--ink-3);
  flex-shrink: 0;
}

.rm-progress-stage__indicator svg {
  width: 14px;
  height: 14px;
}

.rm-progress-stage__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
}

/* 2026-10-04 — the tracker on the precision results (id-scoped: the homepage is the only page that renders it).
   It was a 357px card, its steps centred in a 360px column, waiting steps at 40% opacity (unreadable), and
   finished steps never turned green: the JS writes `--completed`, this file only styled `--complete` (main.css,
   which the homepage does not load, had the right name). Now: left-aligned like every block around it, the four
   steps as one compact row (2×2 on a phone), every step readable, finished = green tick, active = highlighted. */
#roadmapProgressTracker.rm-progress-tracker { padding: 18px 20px 16px; margin: 0 0 16px; text-align: left; border-radius: var(--r-lg); }
#roadmapProgressTracker .rm-progress-header { justify-content: flex-start; margin-bottom: 14px; }
#roadmapProgressTracker .rm-progress-header__text p { color: var(--ink-2); }
#roadmapProgressTracker .rm-progress-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: none; margin: 0; }
#roadmapProgressTracker .rm-progress-stage { align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--ink-5); background: var(--paper-warm); }
#roadmapProgressTracker .rm-progress-stage--pending { opacity: 1; }
#roadmapProgressTracker .rm-progress-stage--pending .rm-progress-stage__indicator { background: transparent; border: 1px dashed var(--ink-4); color: var(--ink-3); }
#roadmapProgressTracker .rm-progress-stage--active { background: var(--forest-glow); border-color: rgba(45,106,79,.3); }
#roadmapProgressTracker .rm-progress-stage--active .rm-progress-stage__label { color: var(--ink); font-weight: 600; }
#roadmapProgressTracker .rm-progress-stage--completed .rm-progress-stage__indicator { background: var(--forest-mid); color: var(--white); }
#roadmapProgressTracker .rm-progress-stage--completed .rm-progress-stage__label { color: var(--forest); }
#roadmapProgressTracker .rm-progress-stage__label { font-size: 12.5px; line-height: 1.35; padding-top: 5px; }
#roadmapProgressTracker .rm-progress-stage__indicator { width: 26px; height: 26px; }
#roadmapProgressTracker .rm-progress-cta { text-align: left; padding-top: 14px; }
#roadmapProgressTracker .rm-progress-preview__tile-desc { color: var(--ink-2); }
@media (max-width: 680px) {
  #roadmapProgressTracker.rm-progress-tracker { padding: 16px 14px 14px; }
  #roadmapProgressTracker .rm-progress-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* CTA (shown when roadmap is ready) */
.rm-progress-cta {
  display: none;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-5);
}

.rm-progress-cta.visible,
.rm-progress-tracker--complete .rm-progress-cta {
  display: block;
}

.rm-progress-cta__title {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.rm-progress-cta__subtitle {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-bottom: 1rem;
}

.rm-progress-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.75rem;
  background: var(--forest-mid);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.rm-progress-cta__btn:hover {
  background: var(--forest);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,67,50,.2);
}

.rm-progress-cta__btn svg {
  width: 16px;
  height: 16px;
}

/* #4 (2026-06-04) — strengthened "roadmap ready" state: outcome-led copy, a
   3-tile what's-inside preview, and a larger primary CTA. NEW unique classes
   only (no edits to the .rm-progress-cta__* base selectors, which are
   duplicated across homepage-v7.css + main.css). */
.rm-progress-cta--ready .rm-progress-cta__title {
  font-size: 1.3rem;
}

.rm-progress-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
  margin: 0 0 1.25rem;
}

.rm-progress-preview__tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  background: #F2F8F4;
  border: 1px solid rgba(45, 106, 79, 0.16);
  border-radius: 10px;
}

.rm-progress-preview__tile-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--forest);
}

.rm-progress-preview__tile-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-3);
}

.rm-progress-cta__btn--lg {
  padding: 0.85rem 2.25rem;
  font-size: 1rem;
}

@media (max-width: 560px) {
  .rm-progress-preview { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Error state */
.rm-progress-error {
  display: none;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-5);
}

.rm-progress-error.visible,
.rm-progress-tracker--error .rm-progress-error {
  display: block;
}

/* Hide stages when complete/error */
.rm-progress-tracker--complete .rm-progress-stages,
.rm-progress-tracker--error .rm-progress-stages {
  display: none;
}

.rm-progress-error__text {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin-bottom: 0.75rem;
}

.rm-progress-error__retry {
  padding: 0.5rem 1.25rem;
  background: transparent;
  color: var(--sienna);
  border: 1.5px solid var(--sienna);
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.rm-progress-error__retry:hover {
  background: var(--sienna-lt);
}

@media (max-width: 768px) {
  .rm-progress-tracker {
    padding: 1.5rem 1.25rem;
  }

  .rm-progress-header {
    flex-direction: column;
    text-align: center;
  }

  .rm-progress-header__text h3,
  .rm-progress-header__text p {
    text-align: center;
  }
}


/* ============================================================
   S32: DYNAMIC UI COMPONENTS (injected by main.js under specific conditions)
   These only appear for authenticated users, after quiz completion,
   or during specific interactions. ALL must have CSS or they render raw.
   ============================================================ */

/* ── Quick Quiz Premium Teaser (after 3+ results, upsell to premium) ── */
.qr-premium-teaser {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1rem 1.25rem;
  background: var(--gold-lt);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-lg);
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.55;
}

.qr-premium-teaser svg { flex-shrink: 0; color: var(--gold); margin-top: 2px; }
.qr-premium-teaser a { color: var(--forest-mid); font-weight: 600; margin-left: 0.25rem; }
.qr-premium-teaser a:hover { color: var(--sienna); }

/* ── Precision Quiz Premium CTA (between result tiers) ── */
.quiz-premium-cta {
  margin: 1.5rem 0;
}

.quiz-premium-cta-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, var(--forest-glow), rgba(45,106,79,.03));
  border: 1px solid rgba(45,106,79,.12);
  border-radius: var(--r-lg);
}

.quiz-premium-cta-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forest-glow);
  border-radius: var(--r-md);
  color: var(--forest-mid);
  flex-shrink: 0;
}

.quiz-premium-cta-icon i,
.quiz-premium-cta-icon svg { width: 18px; height: 18px; }

.quiz-premium-cta-text { flex: 1; }
.quiz-premium-cta-text strong { display: block; font-size: 0.875rem; color: var(--ink); margin-bottom: 0.2rem; }
.quiz-premium-cta-text span { font-size: 0.8125rem; color: var(--ink-3); }

.quiz-premium-cta-btn {
  padding: 0.5rem 1.25rem;
  background: var(--forest-mid);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--r-full);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s var(--ease);
}

.quiz-premium-cta-btn:hover { background: var(--forest); color: var(--white); }

/* ── Precision Quiz Signup CTA (for guests, after results) ── */
.precision-quiz-signup-cta {
  margin: 1.5rem 0;
}

.precision-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--sienna-lt);
  border: 1px solid rgba(196,83,43,.12);
  border-radius: var(--r-lg);
}

.precision-cta-left h4 {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.2rem;
}

.precision-cta-left p {
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin: 0;
}

.precision-cta-right { text-align: center; flex-shrink: 0; }

.precision-cta-signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.5rem;
  background: var(--sienna);
  color: var(--white);
  border: none;
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}

.precision-cta-signup-btn:hover { background: var(--sienna-dk); }
.precision-cta-signup-btn i,
.precision-cta-signup-btn svg { width: 14px; height: 14px; }

.precision-cta-note { display: block; font-size: 0.6875rem; color: var(--ink-3); margin-top: 0.35rem; }

/* ── Post-Quiz Auto-Save (brand overrides) ── */
/* 2026-10-04: the base rules for this toast lived only in main.css, which the homepage does not load —
   it painted as bare text flush to the column edge with a browser-default × box (Khalid's recording). */
.auto-save-toast { margin: 0 0 14px; animation: autoSaveSlideDown .35s ease; }
.auto-save-toast--fading { opacity: 0; transform: translateY(-6px); transition: opacity .4s ease, transform .4s ease; }
@keyframes autoSaveSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auto-save-toast { animation: none; } }
.auto-save-toast__inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 8px 12px 16px;
  background: linear-gradient(135deg, var(--parchment), rgba(16,185,129,.04));
  border: 1px solid rgba(16,185,129,.2);
  border-radius: var(--r-md);
  color: var(--forest);
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.45;
}
.auto-save-toast__inner svg { flex-shrink: 0; margin-top: 1px; color: var(--forest-mid); }
.auto-save-toast__inner span { flex: 1; min-width: 0; }
.auto-save-toast__inner strong { font-weight: 600; }
.auto-save-toast__close {
  flex-shrink: 0;
  margin: -12px -2px -12px auto;
  min-width: 44px; min-height: 44px;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}
.auto-save-toast__close:hover { background: var(--forest-glow); color: var(--forest); }
.rm-reveal {
  background: linear-gradient(135deg, var(--parchment), rgba(16,185,129,.04)) !important;
  border: 1px solid rgba(16,185,129,.2) !important;
  border-radius: var(--r-lg) !important;
  padding: 28px !important;
  margin-bottom: 20px !important;
}
.rm-reveal__header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.rm-reveal__header svg { color: var(--forest-mid); flex-shrink: 0; }
.rm-reveal__title {
  font-family: var(--serif);
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ink);
  margin: 0 !important;
}
.rm-reveal__grants {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
}
.rm-reveal__grants li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  font-size: 0.9rem !important;
  color: var(--forest) !important;
  font-weight: 500 !important;
  font-family: var(--sans);
}
.rm-reveal__grants li svg { color: var(--forest-mid); flex-shrink: 0; }
.rm-reveal__pitch {
  background: rgba(255,255,255,.5) !important;
  border: 1px solid rgba(16,185,129,.12) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
  margin: 16px 0 20px !important;
  text-align: center !important;
}
.rm-reveal__pitch-text { color: var(--ink-2); margin: 0 0 14px !important; font-size: 0.95rem; line-height: 1.5; font-family: var(--sans); }
.rm-reveal__pitch-guarantee { display: block; margin-top: 8px; font-size: 0.75rem; color: var(--ink-3); font-family: var(--sans); }
.rm-reveal__pitch-dismiss { display: block !important; margin: 8px auto 0 !important; background: none !important; border: none !important; color: var(--ink-3) !important; font-size: 0.78rem !important; cursor: pointer; font-family: var(--sans); text-decoration: none !important; padding: 4px !important; text-align: center !important; }
.rm-reveal__pitch-dismiss:hover { color: var(--ink-2) !important; }
.rm-reveal__pitch-cta {
  display: inline-block !important;
  background: var(--forest) !important;
  color: var(--white) !important;
  padding: 12px 28px !important;
  border-radius: var(--r-full) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .15s var(--ease);
  font-family: var(--sans);
}
.rm-reveal__pitch-cta:hover {
  background: var(--forest-dk) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
}
.rm-reveal__roadmap-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  background: var(--forest) !important;
  color: var(--white) !important;
  border-radius: var(--r-full) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  margin-top: 0 !important;
}
.rm-reveal__roadmap-cta:hover {
  background: var(--forest-dk) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
}
.rm-reveal__roadmap-cta svg { stroke: var(--white); }
.rm-reveal__pitch-dismiss { color: var(--ink-3); font-family: var(--sans); }
.rm-reveal__pitch-guarantee { color: var(--ink-3); }
/* ── Profile summary above results ── */
.quiz-results-profile {
  font-size: 0.8rem;
  color: #78716c;
  font-family: var(--sans);
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--ink-5);
  margin-bottom: 16px;
}

/* ── Category headers ── */
.quiz-results-category {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  padding: 16px 0 8px;
  letter-spacing: -0.01em;
}
.quiz-results-category:first-child { padding-top: 0; }
/* ── Funding type badge ── */
.funding-type-badge {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--parchment);
  border: 1px solid var(--ink-5);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-family: var(--sans);
  text-transform: capitalize;
}
/* ── Undo toast ── */
.undo-not-relevant-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #f9fafb;
  padding: 12px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.88rem;
  font-family: var(--sans);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
}
.undo-not-relevant-toast.active { opacity: 1; transform: translateX(-50%) translateY(0); }
.undo-not-relevant-toast button {
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--sienna-lt);
  padding: 4px 14px;
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
}
/* ── Mobile card layout + touch-target fixes ── */
@media (max-width: 480px) {  .quiz-next, .quiz-back { min-height: 44px !important; }
  /* (Removed 2026-04-18: #quizAuthGate button + .quiz-auth-gate__dismiss/email-link mobile overrides.
     They targeted the old precision-gate DOM. New .qag5 gate sets its own mobile touch targets.) */
  /* Roadmap reveal card mobile */
  .rm-reveal { padding: 20px 16px !important; }
  .rm-reveal__pitch { padding: 16px !important; }
  .rm-reveal__pitch-cta { width: 100% !important; text-align: center !important; display: block !important; }
  .rm-reveal__roadmap-cta { width: 100% !important; justify-content: center !important; }
  /* Funding type badge */
  .funding-type-badge { font-size: 0.65rem !important; }
}

/* ── Guest Bookmark Modal (prompt to sign up when guest bookmarks) ── */
.guest-bookmark-modal {
  position: fixed;
  inset: 0;
  background: rgba(28,25,23,.5);
  backdrop-filter: blur(4px);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: modalFadeIn .25s var(--ease);
}

.guest-bookmark-content {
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: var(--sh-xl);
  animation: modalSlideUp .3s var(--ease);
}

.close-guest-modal {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: var(--r-full);
  transition: background .15s var(--ease);
}

.close-guest-modal:hover { background: var(--parchment); }
.close-guest-modal i,
.close-guest-modal svg { width: 18px; height: 18px; }

.guest-modal-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sienna-lt);
  border-radius: var(--r-full);
  color: var(--sienna);
}

.guest-modal-icon i,
.guest-modal-icon svg { width: 24px; height: 24px; }

.guest-bookmark-content h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.guest-bookmark-content > p {
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.guest-modal-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  text-align: left;
}

.guest-modal-benefits li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
  padding: 0.3rem 0;
}

.guest-modal-benefits li i,
.guest-modal-benefits li svg { width: 16px; height: 16px; color: var(--forest-mid); flex-shrink: 0; }

.guest-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.guest-signup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem;
  background: var(--forest-mid);
  color: var(--white);
  border: none;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  width: 100%;
}

.guest-signup-btn:hover { background: var(--forest); }
.guest-signup-btn i,
.guest-signup-btn svg { width: 16px; height: 16px; }

.guest-login-btn,
.guest-continue-btn {
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.4rem;
  font-family: var(--sans);
  transition: color .15s var(--ease);
}

.guest-login-btn:hover,
.guest-continue-btn:hover { color: var(--ink); }

/* ── Roadmap Ready State (green checkmark variant) ── */
.rm-progress-tracker--ready .rm-progress-header__icon {
  background: rgba(34,197,94,.1);
  color: #16a34a;
}

.rm-progress-ready-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.5rem;
  background: var(--forest-mid);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 0.75rem;
  transition: all .15s var(--ease);
}

.rm-progress-ready-link:hover { background: var(--forest); color: var(--white); }
.rm-progress-ready-link svg { width: 16px; height: 16px; }

/* ── Error message (generic, used by auth flows) ── */
.error-message {
  padding: 0.75rem 1rem;
  background: rgba(220,38,38,.06);
  border: 1px solid rgba(220,38,38,.15);
  border-radius: var(--r-md);
  color: #dc2626;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

/* ── Responsive for dynamic components ── */
@media (max-width: 768px) {
  .quiz-premium-cta-inner { flex-direction: column; text-align: center; }
  .precision-cta-inner { flex-direction: column; text-align: center; }
  .guest-bookmark-content { padding: 1.5rem; }
}


/* ============================================================
   S30: EMAIL-CAPTURE COMPATIBILITY
   email-capture.css uses main.css CSS variables. Since v7 doesn't
   load main.css, provide the missing variable values here.
   ============================================================ */
:root {
  /* Spacing tokens used by email-capture.css */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radius tokens */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Color tokens */
  --gray-50: #FAFBFC;
  --gray-100: #F4F6F8;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #ADB5BD;
  --gray-600: #6C757D;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #212529;

  /* Transition tokens */
  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 250ms cubic-bezier(0.4,0,0.2,1);

  /* Shadow tokens */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.1);

  /* Text size tokens */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Primary/Accent tokens used by email-capture */
  --primary: #2D6A4F;
  --primary-dark: #1B4332;
  --primary-light: rgba(45,106,79,.08);
  /* ★ 2026-08-06 — KEEP THESE TWO WITH THE `--primary` RE-POINT ABOVE, NOT ELSEWHERE.
     Re-pointing `--primary` is what makes this a page-scoped palette, and main.css's
     footer newsletter CTA cannot read `--primary` directly: on every page that does
     NOT load this file, `--primary` is still the legacy `#0066FF`, which is the very
     defect that rule was written to correct. So it reads a component token that
     defaults to sienna, and the file that scopes the primary opts its own footer CTA
     back onto it here. Copy this pair whenever a surface re-points `--primary`, or its
     footer CTA silently reverts to sienna. Measured: /resources/* and the 7 store
     pages paint `rgb(45, 106, 79)`, matching origin/main. */
  --footer-cta-bg: var(--primary);
  --footer-cta-bg-hover: var(--primary-dark);
  --accent: #C4532B;
  --accent-dark: #A3401F;
  --success: #16a34a;
  --success-light: rgba(22,163,74,.08);
  --error: #dc2626;
  --error-light: rgba(220,38,38,.06);
}

/* Override email-capture content box to use v7 radius */
.email-capture-content {
  border-radius: var(--r-xl) !important;
}

/* Fix email-capture form field spacing */
.email-capture-form {
  display: flex;
  gap: 0.5rem;
}

.email-capture-form input[type="email"] {
  border-radius: var(--r-full) !important;
  padding: 0.75rem 1.15rem !important;
}

.email-capture-form button[type="submit"] {
  border-radius: var(--r-full) !important;
  padding: 0.75rem 1.5rem !important;
  white-space: nowrap;
}

/* Exit-intent modal dark theme overrides for v7 */
.exit-intent-modal .email-capture-content {
  border-radius: var(--r-xl) !important;
}

.exit-intent-modal .email-capture-form {
  gap: 0.5rem;
}

.exit-intent-modal .email-capture-form input[type="email"] {
  border-radius: var(--r-md) !important;
}

.exit-intent-modal .email-capture-form button[type="submit"] {
  border-radius: var(--r-md) !important;
}

/* Roadmap ready notification.
   z-index must clear the shortlist basket's full-viewport scrim (9590) + dock (9600) +
   panel (9601) — at 8000 an expanded basket buried this 24.6%-CTR notice (Khalid hit it
   live, 2026-07-16). Stays below the homepage modals (10000+). */
.roadmap-ready-notification {
    position: fixed; bottom: 24px; right: 24px; z-index: 9650;
    max-width: 380px; background: #fefdfb;
    border: 1px solid #e8e5df; border-left: 3px solid #15803d;
    border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    transform: translateY(20px); opacity: 0;
    transition: all 0.3s ease-out; pointer-events: none;
}
.roadmap-ready-notification.active {
    transform: translateY(0); opacity: 1; pointer-events: auto;
}
.roadmap-ready-notification__content {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; position: relative;
}
.roadmap-ready-notification__icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: #f0fdf4; color: #15803d;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.roadmap-ready-notification__text { flex: 1; min-width: 0; }
.roadmap-ready-notification__text strong {
    display: block; font-size: 14px; font-weight: 700; color: #111827;
}
.roadmap-ready-notification__text span { font-size: 12.5px; color: #6b7280; }
.roadmap-ready-notification__cta {
    padding: 8px 14px; background: #15803d; color: #fff !important;
    border-radius: 8px; font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap; transition: background 0.15s;
}
.roadmap-ready-notification__cta:hover { background: #166534; }
.roadmap-ready-notification__close {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px;
}
@media (max-width: 560px) {
    .roadmap-ready-notification { bottom: 16px; right: 16px; left: 16px; max-width: none; }
}

/* ========================================================================= */
/* Progressive profiling — conditional form-field visibility                  */
/* ========================================================================= */

/* Name field shown only in signup mode (switchToSignUpMode toggles the class) */
#loginModal.auth-mode--signup .form-group--fullname {
    display: block !important;
}

/* ============================================================
   QUIZ AUTH GATE v5 (qag5) — Apr 18, 2026
   Ported from mockups/2026-04-18-auth-gate-redesign/mockup-a5-final.html.
   Used by the PRECISION quiz gate only. Quick-quiz gate still uses the
   legacy .quiz-auth-gate block above (4423-4610).
   ============================================================ */
.qag5 {
  background: var(--paper-warm);
  border: 1.5px solid rgba(45,106,79,.2);
  border-radius: 16px;
  padding: 22px 28px 14px;
  margin: 20px 0 0;
  box-shadow: var(--sh-md);
  display: grid;
  /* 2fr/1fr (not 1fr/1fr) because production container is ~698px (inside
     .hero__inner 860 → .quiz-card → .grant-finder-card max-width 800 chain),
     NOT the 920px the mockup assumed. At 1fr/1fr the copy column is ~310px
     and the 24px h2 headline (ink ~360px) always wrapped to 2 lines on
     desktop. 2fr/1fr gives copy ~413px (53px margin) while preview at
     ~207px still holds the 32-char-truncated ranked-roadmap teaser.
     minmax(0, _) still needed to prevent intrinsic content inflation. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas:
    "copy  preview"
    "footer footer";
  gap: 22px;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.qag5::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--forest-mid) 0%, var(--sienna) 100%);
  opacity: 0.5;
}
/* Degrade gracefully when there's no preview column (low-match edge case) */
.qag5--no-preview {
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "footer";
}

/* ─── Left column: headline + sub + CTA ─── */
.qag5__copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left; /* defensive — avoid inherited center from legacy */
  min-width: 0; /* allow child overflow rules to take effect */
}
.qag5 h2 {
  font-family: var(--serif);
  /* 24px chosen so "Unlock the 8 grants below — free." fits on 1 line even at
     tightest real-integration column width (~396px). 26px cleared my mockup by
     only 10px — too brittle for production. */
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--forest);
  margin: 0 0 8px;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.qag5 h2 em {
  font-style: normal;
  color: var(--sienna);
  font-weight: 700;
}
.qag5__sub {
  font-size: 12.5px;
  color: var(--forest-mid);
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.qag5__sub-sep { color: var(--ink-4); font-weight: 400; }

/* Google button — primary action */
.qag5__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--forest);
  color: white;
  border: none;
  padding: 14px 20px;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease);
  min-height: 52px;
  margin-bottom: 8px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.qag5__google:hover {
  background: var(--forest-dk);
  box-shadow: 0 6px 16px rgba(27,67,50,.2);
}
.qag5__google:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(27,67,50,.15);
}
.qag5__google:disabled {
  opacity: .7;
  cursor: wait;
  transform: none;
}
.qag5__google svg { flex-shrink: 0; }

.qag5__email {
  color: var(--forest-mid);
  text-decoration: none;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 0;
  border-radius: var(--r-sm);
  transition: color .15s var(--ease);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qag5__email:hover { color: var(--forest-dk); text-decoration: underline; text-underline-offset: 3px; }

.qag5__trust {
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.qag5__trust-sep { color: var(--ink-4); }

/* ─── Right column: ranked roadmap preview ─── */
.qag5__preview {
  grid-area: preview;
  background: var(--paper);
  border: 1px solid rgba(28,25,23,.08);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* prevent content from forcing column expansion */
}
.qag5__preview-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--forest-mid);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(28,25,23,.06);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qag5__preview-head-ico { width: 14px; height: 14px; color: var(--forest-mid); }

.qag5__preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(28,25,23,.08);
}
.qag5__preview-row:last-child { border-bottom: 0; }
.qag5__preview-rank {
  background: var(--sienna);
  color: white;
  font-weight: 700;
  font-size: 10px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.qag5__preview-row--locked .qag5__preview-rank { background: var(--ink-4); }

.qag5__preview-title {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--forest);
  line-height: 1.25;
  flex-grow: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.qag5__preview-title--blur {
  filter: blur(4px);
  color: var(--ink-3);
  user-select: none;
}
.qag5__preview-score {
  font-size: 11px;
  font-weight: 600;
  color: var(--forest-mid);
  flex-shrink: 0;
}
.qag5__preview-score--blur {
  filter: blur(3.5px);
  color: var(--gold);
}
.qag5__preview-more {
  color: var(--ink-3);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 8px 0 2px;
  font-weight: 500;
  margin: 0;
}
.qag5__preview-more strong { color: var(--forest-mid); font-weight: 700; }

/* ─── Footer row ─── */
.qag5__footer {
  grid-area: footer;
  padding-top: 12px;
  border-top: 1px solid rgba(28,25,23,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.qag5__down {
  font-size: 12px;
  color: var(--forest-mid);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.qag5__down-ico {
  width: 12px; height: 12px;
  animation: qag5-bounce 1.8s ease-in-out infinite;
}
@keyframes qag5-bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .qag5__down-ico { animation: none; }
  .qag5__google { transition: none; }
}
.qag5__dismiss {
  background: none;
  border: none;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 2px;
  border-radius: var(--r-sm);
  transition: color .15s var(--ease);
}
.qag5__dismiss:hover { color: var(--ink-2); }

/* A11y focus — matches site pattern */
.qag5 :focus-visible {
  outline: 2px solid var(--forest-mid);
  outline-offset: 2px;
}

/* ─── Responsive: reorder headline → preview → CTA → footer when stacking ───
   Breakpoint 880px chosen so tablets AND tight desktop widths go single-col.
   2-col only kicks in at ≥880px when column width is comfortable for the
   headline (verified by automated wrap-line-count check at 8 viewports). */
@media (max-width: 880px) {
  .qag5 {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "preview" "footer";
    gap: 18px;
    padding: 22px 20px 16px;
  }
  .qag5--no-preview {
    grid-template-areas: "copy" "footer";
  }
  /* display: contents lets h2+sub and CTA block be grid items individually */
  .qag5__copy { display: contents; }
  .qag5__copy-headline {
    order: 1;
    grid-column: 1;
  }
  .qag5__preview {
    order: 2;
    grid-column: 1;
  }
  .qag5__copy-cta {
    order: 3;
    grid-column: 1;
  }
  .qag5__footer { order: 4; }
  .qag5 h2 { font-size: 24px; margin-bottom: 6px; }
  .qag5__sub { margin-bottom: 14px; font-size: 12px; }
  .qag5__trust { flex-wrap: wrap; row-gap: 2px; }
}
@media (max-width: 560px) {
  .qag5 { padding: 20px 18px 14px; border-radius: 14px; }
  .qag5 h2 { font-size: 21px; line-height: 1.15; }
}
@media (max-width: 400px) {
  .qag5 h2 { font-size: 20px; }
  .qag5__google { font-size: 14px; padding: 13px 16px; }
  .qag5__preview-title { font-size: 12px; }
  .qag5__footer { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   QUIZ RESULT CARD v2 (.cb) — Apr 19, 2026
   Replaces legacy .quiz-result-card. Split design: content column
   + fixed 156px aside. Uses production tokens. Tooltips escape via
   NO overflow:hidden — aside has own border-radius instead.
   Spec: docs/superpowers/specs/2026-04-19-quiz-results-redesign.md
   ============================================================ */

.cb {
  position: relative;
  background: #fff;
  border: 1px solid rgba(28,25,23,.1);
  border-radius: var(--r-md);
  box-shadow: 0 1px 4px rgba(28,25,23,.04);
  cursor: pointer;
  transition: box-shadow .15s var(--ease), transform .1s var(--ease), border-color .15s var(--ease);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
}
.cb:hover {
  box-shadow: 0 4px 14px rgba(28,25,23,.06);
  transform: translateY(-1px);
  border-color: rgba(28,25,23,.18);
}
.cb:focus-within {
  box-shadow: 0 0 0 2px rgba(27,67,50,.18), 0 4px 14px rgba(28,25,23,.06);
}

.cb__content {
  position: relative; /* scope .cb__lock-overlay (inset:0) to the left column so the right aside tease stays crisp */
  padding: 14px 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: var(--r-md) 0 0 var(--r-md);
  /* Reset inherited text-align:center from .quiz-results parent. Without this,
     title + org render center-aligned on production (bug caught Apr 20). */
  text-align: left;
}
/* Explicitly left-align <p> inside .cb__content. Needed because .quiz-step p
   { text-align: center } (declared elsewhere) targets <p> tags with specificity
   0,0,1,1 — equal to .cb__content p below, but ours is later in source so wins.
   Fixes the .cb__org center-alignment bug (Apr 20 local testing). */
.cb .cb__content p { text-align: left; }
.cb__eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; flex-wrap: wrap;
}
.cb__eyebrow b { color: var(--sienna); font-weight: 700; flex-shrink: 0; }
.cb__eyebrow-sep { color: var(--ink-3); font-weight: 400; flex-shrink: 0; }
.cb__eyebrow-level { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cb__type-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 3px;
  background: rgba(45,106,79,.1); color: var(--forest-mid); flex-shrink: 0;
  cursor: help; user-select: none;
}
.cb__type-pill--tax-credit { background: rgba(196,83,43,.1); color: var(--sienna-dk); }
.cb__type-pill--loan, .cb__type-pill--forgivable-loan { background: rgba(87,83,78,.12); color: var(--ink-2); }
.cb__type-pill--award { background: rgba(184,139,20,.14); color: #b88b14; }
.cb__type-pill--program { background: rgba(125,95,60,.12); color: #7d5f3c; }

.cb__title {
  font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.22;
  letter-spacing: -.015em; margin: 0;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cb__org {
  font-size: 12px; color: var(--ink-2); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* May 4 2026: card body description (shortSummary). Fills the empty content
   column space that previously made cards feel hollow. 2-line clamp keeps
   card height predictable.
   IMPORTANT: compound selector `.cb p.cb__desc` (specificity 0,0,2,1) needed
   to beat `.quiz-step p { font-size: 0.9375rem }` (0,0,1,1) — the canonical
   specificity trap documented in CLAUDE.md `feedback_quiz_step_specificity_trap.md`.
   Without it, desc renders at 15px (parent rule wins) instead of 12.5px. */
.cb p.cb__desc {
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
  margin: 4px 0 0;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cb__reasons {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px;
}
/* May 4 2026: footer-row now hosts BOTH the Playbook unlock link (left) and
   the "Not relevant?" link (right), pushed to opposite ends. Repositioned
   from .cb__view-wrap in the aside (was wrapping to 2 lines at 156px width). */
.cb__footer-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 10px;
}
/* When unlock link is hidden (premium user / blurred card), Not-relevant
   should still anchor to the right. flex-end fallback via :only-child. */
.cb__footer-row > :only-child { margin-left: auto; }

.cb__aside {
  background: var(--paper-warm); border-left: 1px solid rgba(28,25,23,.08);
  padding: 14px 14px 12px; display: flex; flex-direction: column; align-items: stretch;
  justify-content: space-between; gap: 10px; text-align: center; min-width: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.cb__score-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: help; position: relative; }
.cb__score {
  font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.cb--perfect  .cb__score { color: var(--forest); }
.cb--strong   .cb__score { color: var(--sienna); }
.cb--good     .cb__score { color: #b88b14; }
/* May 4 2026: 4th tier — score <45. Muted neutral signals "low fit" without
   killing card visibility entirely. Subtle desaturation on the whole card
   tells the eye "this is a stretch option" without looking broken. */
.cb--possible .cb__score { color: #8b7d6f; }
.cb--possible {
  opacity: 0.85;
  background: #fdfbf7;
}
.cb--possible:hover { opacity: 1; }
.cb--possible .cb__aside { background: #f7f3ec; }

/* D2 (2026-05-14): non-active quiz card states.
   Applied on top of existing tier classes.
   Specificity matches .cb--possible (0,0,1,0) — same-tier, last wins. */
.cb--non-active {
  opacity: 0.82;
  background: #fdfbf7;
}
.cb--non-active:hover { opacity: 1; }
.cb--non-active .cb__aside { background: #f7f3ec; }

.cb--permanently-closed {
  opacity: 0.6;
  background: #faf7f2;
  filter: grayscale(0.12);
}
.cb--permanently-closed:hover { opacity: 0.82; filter: grayscale(0); }
.cb--permanently-closed .cb__aside { background: #f2efe8; }

/* Status pill on .cb quiz cards (D2) — rendered in the eyebrow row.
   Specificity: .cb .cb__status-pill = (0,0,2,0) — beats .quiz-step p (0,0,1,1)
   because our selector has two classes and no element. Safe from cascade traps. */
.cb .cb__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-full);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.cb .cb__status-pill--amber {
  color: #92400E;
  background: rgba(180,83,9,.12);
}
.cb .cb__status-pill--gray {
  color: #57534E;
  background: rgba(120,113,108,.12);
}

/* Notify-me / see-similar view-link replacements in .cb aside */
.cb .cb__notify-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: #92400E;
  background: rgba(180,83,9,.09);
  border: 1px solid rgba(180,83,9,.18);
  border-radius: var(--r-full);
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  transition: background .14s, color .14s;
  letter-spacing: -.002em;
}
.cb .cb__notify-btn:hover { background: rgba(180,83,9,.16); color: #78350f; }
.cb .cb__notify-btn:focus-visible { outline: 2px solid #92400e; outline-offset: 2px; }
.cb .cb__notify-btn--done {
  color: var(--forest-mid);
  background: rgba(45,106,79,.09);
  border-color: rgba(45,106,79,.18);
  pointer-events: none;
}

.cb .cb__similar-link {
  font-size: 11.5px;
  color: var(--forest-mid);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  letter-spacing: -.002em;
  transition: color .12s;
  text-align: center;
}
.cb .cb__similar-link:hover { color: var(--forest-dk); text-decoration: underline; text-underline-offset: 2px; }

.cb__score-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); margin-top: 2px;
}

.cb__amount-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cb__amount {
  font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--forest);
  font-variant-numeric: tabular-nums; letter-spacing: -.008em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Narrative amounts ("30% rate", "Varies", "Up to 8%") now match the dollar amount's
   type (was 11.5px sans → looked small + wrong-font next to 14px Fraunces $ amounts).
   Keeps the 2-line clamp so a long narrative still fits the aside. */
.cb__amount--narrative {
  font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--forest);
  font-variant-numeric: tabular-nums; letter-spacing: -.008em; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cb__amount--missing { font-style: italic; color: var(--ink-2); font-weight: 500; font-size: 12px; }

.cb__deadline {
  font-size: 10.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help;
}
.cb__deadline--ongoing { color: var(--forest-mid); font-weight: 600; }
.cb__deadline--urgent { color: var(--sienna); font-weight: 700; }
.cb__deadline--urgent::before { content: '⏰ '; }

.cb__actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.cb__save-region { display: flex; justify-content: center; }
.cb .save-btn { width: 100%; }
.cb__view-wrap { text-align: center; }

/* Shared Save button + View link + Not-relevant link */
.save-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--sienna); color: #fff; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(163,64,31,.2);
  transition: background .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease);
  white-space: nowrap; letter-spacing: -.003em;
}
.save-btn:hover { background: var(--sienna-dk); box-shadow: 0 3px 8px rgba(163,64,31,.26); }
.save-btn:active { transform: translateY(1px); }
.save-btn:focus-visible { outline: 2px solid var(--sienna); outline-offset: 2px; }
.save-btn--saved { background: var(--forest-mid); box-shadow: 0 1px 2px rgba(45,106,79,.2); }
.save-btn--saved:hover { background: var(--forest); box-shadow: 0 3px 8px rgba(27,67,50,.26); }

.cb .view-link {
  font-size: 12px; color: var(--forest-mid); text-decoration: none; font-weight: 500;
  display: inline-flex; align-items: center; gap: 3px; letter-spacing: -.002em;
  transition: color .12s var(--ease);
}
.cb .view-link:hover { color: var(--forest-dk); text-decoration: underline; text-underline-offset: 2px; }
.cb .view-link:focus-visible { outline: 2px solid var(--forest-mid); outline-offset: 2px; border-radius: 4px; }

/* Per-card $19 Playbook Unlock link. May 4 2026: repositioned from aside
   to left footer-row (was wrapping to 2 lines at 156px width). Inline link
   in the footer-row, opposite "Not relevant?". Sienna semibold for visual
   weight (this is a high-intent action). */
.cb .cb__unlock-link {
  font-size: 12px; color: var(--sienna); text-decoration: none; font-weight: 600;
  letter-spacing: -.002em;
  white-space: nowrap;
  transition: color .12s var(--ease);
}
.cb .cb__unlock-link:hover { color: var(--sienna-dk); text-decoration: underline; text-underline-offset: 2px; }
.cb .cb__unlock-link:focus-visible { outline: 2px solid var(--sienna); outline-offset: 2px; border-radius: 4px; }

.cb .not-relevant {
  font-size: 11px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; border: none; background: none; font-family: var(--sans); padding: 0;
  letter-spacing: -.002em; transition: color .12s var(--ease);
}
.cb .not-relevant:hover, .cb .not-relevant:focus-visible { color: var(--sienna); outline: none; }

/* Reason pills (scoped to card and summary) */
.cb .reason-pill, .sc .reason-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: var(--forest-mid);
  background: rgba(45,106,79,.08);
  padding: 3px 9px; border-radius: var(--r-full);
  letter-spacing: -.003em; white-space: nowrap;
  position: relative; cursor: help;
  transition: background .12s ease, color .12s ease;
}
.cb .reason-pill::before, .sc .reason-pill::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--forest-mid);
}
.cb .reason-pill:hover, .cb .reason-pill:focus-visible { background: rgba(45,106,79,.14); color: var(--forest-dk); outline: none; }
.cb .reason-pill--more { background: rgba(28,25,23,.06); color: var(--ink-2); font-weight: 600; }
.cb .reason-pill--more::before { display: none; }

/* ── Receipts v1 (2026-07-16) — gate-verified chips + the amber question ──
   Scoped .cb .rcpt to clear the legacy single-class cascade (same discipline
   as .reason-pill above). [hidden] guard is load-bearing: display:inline-flex
   would otherwise silently defeat the hidden attribute on overflow chips. */
.cb .cb__reasons--receipts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; contain: inline-size; max-width: 100%; }
/* The amber chip can also join a LEGACY pill row — same intrinsic-width guard. */
.cb .cb__reasons { contain: inline-size; max-width: 100%; }
.cb .rcpt-lead {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3, #9a9085); margin-right: 2px;
}
.cb .rcpt {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  padding: 3px 10px; border-radius: var(--r-full); border: 1px solid transparent;
  letter-spacing: -.003em; position: relative; transition: background .12s ease;
}
.cb .rcpt[hidden] { display: none; }
.cb .rcpt--pass { background: rgba(45,106,79,.09); border-color: rgba(45,106,79,.22); color: var(--forest-dk); cursor: help; }
.cb .rcpt--pass::before { content: '✓'; font-weight: 800; color: var(--forest-mid); }
.cb .rcpt--open {
  background: rgba(184,134,11,.08); border-color: rgba(184,134,11,.28); color: #8a6508; cursor: pointer;
}
.cb .rcpt--open::before { content: '?'; font-weight: 800; }
.cb .rcpt--open:hover, .cb .rcpt--open:focus-visible { background: rgba(184,134,11,.15); outline: none; }
.cb .rcpt--denied { background: rgba(28,25,23,.05); border-color: rgba(28,25,23,.12); color: var(--ink-2); cursor: help; }
.cb .rcpt--more {
  background: transparent; border: 1px dashed rgba(28,25,23,.25); color: var(--ink-2);
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.4;
  padding: 3px 10px; border-radius: var(--r-full); cursor: pointer;
}
.cb .rcpt--more:hover, .cb .rcpt--more:focus-visible { background: rgba(28,25,23,.05); outline: none; }
/* Expanded question state (B's answer-inline behavior): the chip grows into a
   full-width row inside the flex-wrap container. */
.cb .rcpt.rcpt-ask--expanded {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  background: rgba(184,134,11,.07); border: 1px solid rgba(184,134,11,.25);
  border-radius: 10px; padding: 10px 14px; cursor: default;
}
.cb .rcpt.rcpt-ask--expanded::before { display: none; }
.cb .rcpt-ask__q { font-size: 12px; font-weight: 500; color: var(--ink-1, #1c1917); line-height: 1.5; flex: 1 1 240px; min-width: 0; }
.cb .rcpt-ask__btns { display: flex; gap: 6px; flex-shrink: 0; }
.cb .rcpt-ask__btns button {
  font-family: inherit; font-size: 12px; font-weight: 700; color: #8a6508;
  background: #fff; border: 1px solid rgba(184,134,11,.4); border-radius: var(--r-full);
  padding: 8px 16px; min-height: 36px; cursor: pointer; transition: background .12s ease;
}
.cb .rcpt-ask__btns button:hover, .cb .rcpt-ask__btns button:focus-visible { background: rgba(184,134,11,.12); outline: none; }
/* Collapsed question is ALWAYS one line (Khalid, 2026-07-18: a 3-line
   paragraph in a pill is the wrong form factor no matter the copy) — the
   phrase ellipsizes, the full question lives in the expanded state. */
.cb .rcpt--open { max-width: 100%; min-width: 0; overflow: hidden; }
.cb .rcpt--open .rcpt-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb .rcpt--open .rcpt-hint { flex: none; opacity: .8; }
.cb .rcpt--open .rcpt-hint::before { content: '·'; margin: 0 5px; opacity: .7; }
.cb .rcpt-ask__note { flex-basis: 100%; font-size: 10.5px; font-weight: 500; color: var(--ink-3, #9a9085); }
/* Honest demotion after a "No" on this card's required condition: the score
   was computed BEFORE that answer (label swaps to say so in JS). */
.cb--cond-no .cb__score { color: var(--ink-3, #9a9085); }
.cb--cond-no .cb__score-label { color: var(--ink-3, #9a9085); }
.cb--cond-no { opacity: .82; }

/* Card states */
.cb--saved { border-color: rgba(45,106,79,.26); }
.cb--rejected {
  opacity: .5; background: #f5f1e8; filter: grayscale(.3); pointer-events: none;
  transition: opacity .3s ease, filter .3s ease;
}
.cb__rejected-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(253,249,241,.85); font-size: 12px; color: var(--ink-2); font-weight: 500;
  pointer-events: auto; border-radius: var(--r-md);
}
.cb__rejected-overlay svg { color: var(--forest-mid); }
.cb__rejected-undo {
  background: var(--forest-mid); color: #fff; border: none; padding: 6px 14px;
  border-radius: var(--r-sm); font-weight: 600; font-size: 12px; cursor: pointer; letter-spacing: -.003em;
}
.cb__rejected-undo:hover { background: var(--forest); }

.cb--locked { pointer-events: none; }
/* Re-gate (2026-06-07): blur the left DESCRIPTION (it was readable and gave away
   the $ details) + the title/org/pills; LEAVE the right-column amount + status
   crisp so the value is teased on the right, under the match %. */
.cb--locked .cb__title, .cb--locked .cb__org, .cb--locked .cb__desc,
.cb--locked .reason-pill {
  filter: blur(5px); user-select: none;
}
.cb__lock-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink-2); font-size: 12px; font-weight: 600; background: rgba(255,255,255,.45);
  letter-spacing: -.003em; pointer-events: none; border-radius: var(--r-md);
}
/* The pill IS the signup trigger. The overlay stays pointer-events:none (so the rest
   of the blurred card passes clicks through to the card's scroll-to-gate), but the
   pill re-enables pointer events + opens the signup modal directly. */
.cb__lock-cta {
  pointer-events: auto; cursor: pointer; appearance: none; -webkit-appearance: none; border: 0;
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: -.003em; color: var(--ink-2);
  background: rgba(255,255,255,.92); display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 999px; box-shadow: 0 2px 10px rgba(22,58,43,.14);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cb__lock-cta:hover, .cb__lock-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(22,58,43,.2); }
.cb__lock-cta u { text-underline-offset: 2px; }

/* Save micro-interaction (reduced-motion aware) */
@media (prefers-reduced-motion: no-preference) {
  .save-btn--saved svg { animation: save-pulse .35s var(--ease); }
  @keyframes save-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1); }
  }
}

/* Mobile (single column) */
@media (max-width: 680px) {
  .cb { grid-template-columns: 1fr; }
  .cb__content { padding: 12px 14px; border-radius: var(--r-md) var(--r-md) 0 0; }
  .cb__aside {
    flex-direction: row; justify-content: space-between; align-items: center;
    border-left: 0; border-top: 1px solid rgba(28,25,23,.08); padding: 10px 14px; gap: 10px;
    border-radius: 0 0 var(--r-md) var(--r-md);
  }
  .cb__score-wrap { flex-direction: row; align-items: baseline; gap: 5px; }
  .cb__score { font-size: 16px; }
  .cb__score-label { margin-top: 0; font-size: 10px; }
  .cb__amount-wrap { flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .cb__amount { font-size: 13px; }
  .cb__amount--narrative { -webkit-line-clamp: 1; font-size: 13px; }
  .cb__actions { flex-direction: row; width: auto; align-items: center; gap: 8px; }
  .cb__actions .save-btn { width: auto; padding: 7px 14px; font-size: 12px; }
  .cb__view-wrap { text-align: left; }
}

/* ============================================================
   SUMMARY CARD (.sc) — Apr 19, 2026 — Version C
   Replaces .results-summary-banner + .results-stats-row.
   ============================================================ */

.sc {
  background: var(--paper-warm);
  border: 1.5px solid rgba(45,106,79,.18);
  border-radius: var(--r-xl);
  padding: 26px 30px 20px;
  position: relative;
  box-shadow: 0 4px 14px rgba(28,25,23,.06);
  margin: 0 0 18px;
}
.sc::before {
  /* 2026-09-20 (Khalid): the 2px accent was a FLAT bar across a ROUNDED card, so both ends poked past the corners
     (a 2px-high box cannot carry a 20px radius). Now a full-size layer that inherits the card's radius, masked to its
     top 2px, so the strip follows the curve at every radius (r-xl desktop, r-lg mobile). */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--forest-mid) 0%, var(--sienna) 100%);
  opacity: .5;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 2px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% 2px no-repeat;
  pointer-events: none;
}
.sc__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sienna); margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.sc__kicker::after { content: ''; flex: 1; height: 1px; background: rgba(196,83,43,.22); }

.sc-c__headline {
  font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.18;
  letter-spacing: -.015em; color: var(--forest); margin: 0 0 14px;
}
.sc-c__headline strong { font-weight: 600; color: var(--ink); }
.sc-c__headline b { font-weight: 700; color: var(--sienna); font-style: normal; }
.sc-c__headline sup {
  font-size: 11px; color: var(--ink-2); font-weight: 400; letter-spacing: .01em; vertical-align: super;
}

.sc-c__stats {
  font-size: 13px; color: var(--ink-2); font-weight: 500;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0;
}
.sc-c__stats strong { color: var(--forest); font-weight: 700; }
.sc-c__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-2); display: inline-block; }
/* guests only: points at the free unlock further down (2026-10-04). 44px tall tap area, quiet look. */
.sc .sc__unlock {
  display: block; width: fit-content; margin: 2px auto -10px; padding: 12px 8px;
  font: 600 13px/20px var(--sans); color: var(--forest-mid);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(45,106,79,.4);
}
.sc .sc__unlock:hover, .sc .sc__unlock:focus-visible { color: var(--forest); text-decoration-color: currentColor; }

.sc__footer {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(28,25,23,.14);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-2);
}
.sc__footer strong { color: var(--forest-mid); font-weight: 700; }
.sc__edit {
  color: var(--forest-mid); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .12s var(--ease);
}
.sc__edit:hover { color: var(--forest-dk); text-decoration: underline; text-underline-offset: 3px; }

.sc-c__methodology {
  border-bottom: 1px dotted var(--ink-2); cursor: help;
  transition: color .15s ease;
  display: inline-flex; align-items: center; gap: 4px;
}
.sc-c__methodology:hover { color: var(--forest-mid); border-bottom-color: var(--forest-mid); }
.sc-c__methodology:focus-visible { outline: 2px solid var(--forest-mid); outline-offset: 2px; border-radius: 2px; }
.sc-c__methodology-icon {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid currentColor; font-size: 9px; font-weight: 700; line-height: 10px;
  text-align: center; font-family: var(--sans); font-style: normal;
}

/* Mobile */
@media (max-width: 680px) {
  .sc { padding: 18px 18px 14px; border-radius: var(--r-lg); margin-bottom: 14px; }
  .sc__kicker { font-size: 10px; margin-bottom: 10px; }
  .sc-c__headline { font-size: 19px; line-height: 1.24; margin-bottom: 10px; }
  .sc-c__stats { font-size: 12px; gap: 8px; }
  .sc__footer { margin-top: 12px; padding-top: 10px; font-size: 11px; }
}

/* ============================================================
   QUICK CHECK (.qchk) + its three small companions — 2026-09-20
   ⚠ Named .qchk, NOT .gcq: `.gcq` is the SEO quiz widget's namespace in seo-conversion.css (`.gcq *`, `.gcq--done .gcq__head
   { display:none }`…). The homepage does not load that file today, but a page that loads both would have broken this box.
   One small optional box under the summary card: up to three yes/no questions about the programmes the visitor is about
   to see. Khalid's review: this view is already busy, so the box is deliberately quiet — one context line, one question,
   one-line reason, three 36px buttons (the house size of the chip's own Yes/No). Compound selectors on purpose:
   `.quiz-step p` / `.quiz-step h3` are (0,0,1,1) and beat any single class (see the .sc boosters below).
   ============================================================ */
.advanced-quiz .qchk { background: var(--paper); border: 1px solid rgba(184,134,11,.32); border-radius: var(--r-md); padding: 12px 16px 13px; margin: 0 0 14px; text-align: left; }
.advanced-quiz .qchk .qchk__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.advanced-quiz .qchk .qchk__kicker { font: 700 10px/1 var(--sans); letter-spacing: .13em; color: #8a6508; text-transform: uppercase; }
.advanced-quiz .qchk p.qchk__title { font: 500 15px/1.3 var(--sans); color: var(--ink-2); margin: 0 0 9px; text-align: left; letter-spacing: 0; text-transform: none; }
.advanced-quiz .qchk p.qchk__title b { color: var(--ink); font-weight: 700; }
.advanced-quiz .qchk p.qchk__ask { font: 700 14px/1.35 var(--sans); color: var(--ink); margin: 0 0 9px; text-align: left; }
.advanced-quiz .qchk p.qchk__ask + p.qchk__why { margin-top: -7px; }
.advanced-quiz .qchk p.qchk__why { font: 500 12.5px/1.4 var(--sans); color: var(--ink-2); margin: 0 0 9px; text-align: left; }
.advanced-quiz .qchk .qchk__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.advanced-quiz .qchk button.qchk__btn { min-height: 36px; padding: 0 15px; border-radius: var(--r-full); border: 1px solid var(--forest-mid); background: #fff; color: var(--forest); font: 700 12.5px/1 var(--sans); cursor: pointer; transition: background .12s ease, color .12s ease; }
.advanced-quiz .qchk button.qchk__btn:hover, .advanced-quiz .qchk button.qchk__btn:focus-visible { background: var(--forest-mid); color: #fff; outline: none; }
.advanced-quiz .qchk button.qchk__btn--quiet { border-color: var(--ink-4); color: var(--ink-2); font-weight: 600; }
.advanced-quiz .qchk button.qchk__btn--quiet:hover, .advanced-quiz .qchk button.qchk__btn--quiet:focus-visible { background: var(--parchment-dk); color: var(--ink); }
.advanced-quiz .qchk button.qchk__skip { background: none; border: 0; padding: 6px 0; min-height: 0; color: var(--ink-2); font: 600 11.5px/1 var(--sans); text-decoration: underline; cursor: pointer; }
.advanced-quiz .qchk.qchk--done { border-color: rgba(45,106,79,.28); background: rgba(45,106,79,.04); padding: 9px 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font: 500 13px/1.4 var(--sans); color: var(--ink); }
.advanced-quiz .qchk--done .qchk__tick { flex: none; width: 17px; height: 17px; border-radius: 50%; background: var(--forest-mid); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.advanced-quiz .qchk--done .qchk__msg { flex: 1 1 200px; }
/* the score was computed without this answer */
.cb .cb__aside .cb__score-if { display: block; font: 600 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8a6508; margin-top: 3px; }
/* Phone card footer (2026-10-04, after Khalid's before/after review + two independent visual rounds): one shape
   for EVERY card, whatever the content. Row 1 = the money on the left (wraps to 2 lines, never "…") and the verdict
   on the right (score, label, "if you qualify" stacked, right-aligned); row 2 = two equal 44px buttons, Save
   primary + View details secondary. The old single flex row cut every amount ("U..", "Varies b..."); a first fix
   flipped long amounts to their own row, so neighbouring cards looked like two templates. Compound selectors on
   purpose: the legacy (max-width: 680px) .cb__aside block earlier in this file must lose. */
@media (max-width: 680px) {
  .cb .cb__aside, .cb .cb__aside.cb__aside--long {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "money score" "actions actions";
    align-items: start; column-gap: 14px; row-gap: 12px; padding: 12px 14px 14px; text-align: left;
  }
  .cb .cb__aside .cb__score-wrap { grid-area: score; display: grid; grid-template-columns: auto; justify-items: end; text-align: right; row-gap: 1px; }
  .cb .cb__aside .cb__score { font-size: 20px; }
  .cb .cb__aside .cb__score-label { white-space: nowrap; font-size: 10px; }
  .cb .cb__aside .cb__score-if { grid-column: auto; margin-top: 0; text-align: right; white-space: nowrap; }
  .cb .cb__aside .cb__amount-wrap, .cb .cb__aside.cb__aside--long .cb__amount-wrap { grid-area: money; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; max-width: none; min-width: 0; }
  .cb .cb__aside .cb__amount { font-size: 15px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cb .cb__aside .cb__amount--narrative { font-size: 14px; -webkit-line-clamp: 2; }
  .cb .cb__aside .cb__deadline { font-size: 11.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cb .cb__aside .cb__actions, .cb .cb__aside.cb__aside--long .cb__actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: auto; margin: 0; }
  .cb .cb__aside .cb__save-region, .cb .cb__aside .cb__view-wrap { display: flex; min-width: 0; }
  .cb .cb__aside .cb__actions .save-btn { width: 100%; min-height: 44px; padding: 0 12px; font-size: 13.5px; }
  .cb .cb__aside .cb__view-wrap .view-link,
  .cb .cb__aside .cb__view-wrap .cb__similar-link,
  .cb .cb__aside .cb__view-wrap .cb__notify-btn {
    width: 100%; min-height: 44px; justify-content: center; align-items: center; display: inline-flex;
    border: 1px solid rgba(45,106,79,.35); border-radius: var(--r-md); background: #fff;
    font-size: 13.5px; font-weight: 600; color: var(--forest-mid);
  }
  .cb .cb__aside .cb__view-wrap .view-link:hover { text-decoration: none; border-color: var(--forest-mid); color: var(--forest); }
}
/* Narrowest phones (≤360px): stack the match label under the score so the money keeps its room (at 320 the two
   ran into each other), and keep the locked-card pill on one line (as a flex row its text split into two
   columns: "#3 match / —" beside "sign up free / to unlock"). */
@media (max-width: 360px) {
  .cb .cb__lock-cta { display: inline-block; white-space: nowrap; font-size: 12px; padding: 9px 14px; }
}
/* Phone polish round 2 (2026-10-04, independent visual review on real worst-case content):
   · a LONG amount (prose like "25–30% of co-op wages, max $3,000", or >15 chars; flagged at render time as
     .cb__aside--long) gets its own full-width row under the verdict instead of being squeezed to "…";
   · the amber question chip wraps instead of cutting the question to three words;
   · titles get a third line before "…". */
@media (max-width: 680px) {
  .cb .rcpt.rcpt--open { border-radius: 12px; align-items: flex-start; flex-wrap: wrap; row-gap: 1px; padding: 5px 10px; }
  .cb .rcpt--open .rcpt-t { white-space: normal; overflow: visible; }
  .cb h4.cb__title { -webkit-line-clamp: 3; }
}
/* Phone polish round 2, page level:
   · the results sat in a padded, bordered quiz panel INSIDE the page gutter (cards 254px wide on a 320 phone);
     once the precision RESULTS are showing, the panel drops its chrome below 480px (cards 288px);
   · the roadmap steps read as a list below 400px (the 2×2 tiles ran labels to four lines);
   · the end box loses its inner border (three boxes deep) and its button breaks only between phrases;
   · the end panel is left-aligned throughout and the testimonial byline keeps "Vancouver BC" together. */
@media (max-width: 480px) {
  .quiz-card:has(.advanced-quiz.active .quiz-step.active[data-step="results"]) { padding: 0; background: transparent; box-shadow: none; border: 0; overflow: visible; }
  .quiz-card:has(.advanced-quiz.active .quiz-step.active[data-step="results"])::before { display: none; }
  .quiz-results-end .quiz-results-end__pitch-v3 { border: 0; padding: 4px 0 2px; background: transparent; }
}
@media (max-width: 400px) {
  #roadmapProgressTracker .rm-progress-stages { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #roadmapProgressTracker .rm-progress-stage { align-items: center; padding: 8px 10px; }
  #roadmapProgressTracker .rm-progress-stage__label { padding-top: 0; }
}
.quiz-results-end__pitch-v3 .pitch-btn span { white-space: nowrap; }
#unifiedQuizResults .quiz-results-end p.quiz-results-more-premium { text-align: left; margin-left: 0; }
.quiz-results-end__testimonial-v2 p.testi-attr span { white-space: nowrap; }
/* Roadmap ready (reveal) card: same button shape as every other button on the page, one line. */
#roadmapRevealCard .rm-reveal__roadmap-cta, #roadmapExistingNotice .rm-reveal__roadmap-cta { border-radius: var(--r-md) !important; white-space: nowrap !important; }
/* Phone polish round 3: the tracker header stays a left-aligned row (an older ≤560 rule stacked + centred it);
   the question chip flows as text (as flex items its "?" sat alone on line one); the Premium button's guarantee
   becomes a quiet second line instead of a line starting with "·"; the summary footer centres like its headline. */
@media (max-width: 680px) {
  #roadmapProgressTracker .rm-progress-header { flex-direction: row; align-items: flex-start; text-align: left; }
  #roadmapProgressTracker .rm-progress-header__text h3, #roadmapProgressTracker .rm-progress-header__text p { text-align: left; }
  .cb .rcpt.rcpt--open { display: block; }
  .cb .rcpt.rcpt--open::before { margin-right: 5px; }
  .quiz-results-end__pitch-v3 .pitch-btn .pb-sep { display: none; }
  .quiz-results-end__pitch-v3 .pitch-btn .pb-g { display: block; font-size: 12px; font-weight: 600; opacity: .85; margin-top: 2px; }
}
@media (max-width: 480px) {
  .sc .sc__footer { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
}
/* Round 4 (third independent visual review), all widths:
   · desktop/tablet right column: long money wraps to 2 lines and the timing line to 2, never "…";
   · the amber question chip wraps at every width (it was cut at 768 too);
   · funder line gets 2 lines on a phone;
   · the roadmap card is ONE component in its three states (building / ready / already have one): white shell,
     40px icon slot, 20px serif title, the same 44px forest button;
   · phone: while the roadmap builds, only the current step shows (members' first screen reached no result);
   · the end box uses the normal card border (it was the only near-black border on the page). */
.cb .cb__aside .cb__amount { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb .cb__aside .cb__deadline { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb .rcpt.rcpt--open { display: block; border-radius: 12px; padding: 5px 10px; }
.cb .rcpt.rcpt--open::before { margin-right: 5px; }
.cb .rcpt--open .rcpt-t { white-space: normal; overflow: visible; }
@media (max-width: 680px) { .cb .cb__org { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
#roadmapProgressTracker .rm-progress-header__text h3 { font-size: 20px; }
#roadmapProgressTracker .rm-progress-cta__btn, #roadmapProgressTracker .rm-progress-cta__btn--lg { border-radius: var(--r-md); min-height: 44px; padding: 0 22px; font-size: 15px; background: var(--forest-mid); }
#roadmapRevealCard.rm-reveal, #roadmapExistingNotice.rm-reveal { background: var(--white) !important; border: 1px solid var(--ink-5) !important; padding: 18px 20px !important; margin: 0 0 16px !important; }
#roadmapRevealCard .rm-reveal__header, #roadmapExistingNotice .rm-reveal__header { align-items: center !important; margin-bottom: 10px !important; }
#roadmapRevealCard .rm-reveal__header svg, #roadmapExistingNotice .rm-reveal__header svg { width: 40px; height: 40px; padding: 9px; box-sizing: border-box; background: var(--forest-glow); border-radius: var(--r-md); color: var(--forest-mid); }
#roadmapRevealCard .rm-reveal__title, #roadmapExistingNotice .rm-reveal__title { font-size: 20px !important; font-weight: 600 !important; line-height: 1.25 !important; }
#roadmapRevealCard .rm-reveal__grants { padding-left: 52px !important; margin: 0 0 14px !important; }
#roadmapRevealCard .rm-reveal__grants li { padding: 3px 0 !important; align-items: flex-start !important; }
#roadmapRevealCard .rm-reveal__grants li svg { margin-top: 3px; }
#roadmapRevealCard .rm-reveal__roadmap-cta, #roadmapExistingNotice .rm-reveal__roadmap-cta { display: inline-flex !important; width: auto !important; min-height: 44px; padding: 0 22px !important; background: var(--forest-mid) !important; font-size: 15px !important; margin-left: 52px !important; }
.quiz-results-end .quiz-results-end__pitch-v3 { border: 1px solid rgba(45,106,79,.28); }
#unifiedQuizResults .quiz-results-end p.quiz-results-more-premium { font-size: 14px; }
@media (max-width: 680px) {
  #roadmapRevealCard.rm-reveal, #roadmapExistingNotice.rm-reveal { padding: 16px 14px !important; }
  #roadmapRevealCard .rm-reveal__grants { padding-left: 0 !important; }
  #roadmapRevealCard .rm-reveal__roadmap-cta, #roadmapExistingNotice .rm-reveal__roadmap-cta { display: flex !important; width: 100% !important; margin-left: 0 !important; }
}
@media (max-width: 480px) {
  #roadmapProgressTracker .rm-progress-stages { grid-template-columns: minmax(0, 1fr); }
  #roadmapProgressTracker .rm-progress-stage:not(.rm-progress-stage--active) { display: none; }
  #roadmapProgressTracker .rm-progress-stage { align-items: center; padding: 8px 10px; }
  #roadmapProgressTracker .rm-progress-stage__label { padding-top: 0; }
}
/* Round 5 (fourth independent visual review): the phone Premium box keeps its padding (a later rule had put its
   border back with none), the summary card sits on the column's left edge like every block below it, the tracker
   header is a row at EVERY width (a ≤768 rule still stacked it at tablet), the existing-roadmap notice shares the
   ready card's component, money gets a third line before "…", "answer once" never splits, and the phone tracker drops
   its top progress stub (read as a broken border; the current step already shows progress). */
#roadmapExistingNotice .rm-existing-notice__sub { margin: 0 0 14px 52px; font-size: 14px; line-height: 1.45; color: var(--ink-2); text-align: left; }
#roadmapProgressTracker .rm-progress-header { flex-direction: row; align-items: flex-start; text-align: left; }
#roadmapProgressTracker .rm-progress-header__text h3, #roadmapProgressTracker .rm-progress-header__text p { text-align: left; }
#resultsSummaryCard.sc { padding-left: 20px; padding-right: 20px; }
.cb .cb__aside .cb__amount { -webkit-line-clamp: 3; }
.cb .rcpt--open .rcpt-hint { white-space: nowrap; }
@media (max-width: 680px) {
  #resultsSummaryCard.sc { padding-left: 14px; padding-right: 14px; }
  #roadmapExistingNotice .rm-existing-notice__sub { margin-left: 0; }
}
@media (max-width: 480px) {
  .quiz-results-end .quiz-results-end__pitch-v3 { border: 1px solid rgba(45,106,79,.28); padding: 16px; background: var(--paper); }
  #roadmapProgressTracker .rm-progress-bar { display: none; }
}
/* Round 6 (final review round 5): narrative money gets 3 lines at every width (the right column cut
   "25–30% of co-op wages, max…" before the cap); on tall cards the desktop right column keeps verdict + money
   together at the top and the buttons at the bottom instead of spreading all three; headings that left one word on
   its own line at 320 balance their lines; on a phone the end panel stops wrapping the Premium box in a second box. */
.cb .cb__aside .cb__amount--narrative { -webkit-line-clamp: 3; }
@media (min-width: 681px) {
  .cb .cb__aside { justify-content: flex-start; }
  .cb .cb__aside .cb__actions { margin-top: auto; }
}
#resultsSummaryHeadline, .quiz-results-end__pitch-v3 p.pitch-head, #roadmapRevealCard .rm-reveal__title, #roadmapExistingNotice .rm-reveal__title { text-wrap: balance; }
@media (max-width: 480px) {
  #unifiedQuizResults .quiz-results-end { background: transparent; padding: 0; }
}
/* a programme that took a vacated place */
.cb .cb__eyebrow .gc-moved { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: var(--r-full); background: rgba(45,106,79,.1); color: var(--forest); font: 700 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
/* what the visitor's "no" answers set aside */
.unified-quiz-results .gc-aside, #unifiedQuizResults .gc-aside { margin: 18px 0 0; border: 1px dashed var(--ink-4); border-radius: var(--r-md); padding: 12px 16px; font: 500 13px/1.5 var(--sans); color: var(--ink-2); background: rgba(255,255,255,.6); text-align: left; }
#unifiedQuizResults .gc-aside summary { cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; }
#unifiedQuizResults .gc-aside summary::-webkit-details-marker { display: none; }
#unifiedQuizResults .gc-aside summary::after { content: ' \00b7  show'; font-weight: 600; color: var(--ink-3); }
#unifiedQuizResults .gc-aside[open] summary::after { content: ' \00b7  hide'; }
#unifiedQuizResults .gc-aside ul { margin: 8px 0 0; padding: 0; list-style: none; }
#unifiedQuizResults .gc-aside li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--ink-5); }
#unifiedQuizResults .gc-aside li span:last-child { color: var(--ink-3); text-align: right; flex: 0 1 48%; }
@media (max-width: 680px) {
  .advanced-quiz .qchk { padding: 11px 13px 12px; }
  .advanced-quiz .qchk p.qchk__title { font-size: 14px; }
  #unifiedQuizResults .gc-aside li { flex-direction: column; gap: 2px; }
  #unifiedQuizResults .gc-aside li span:last-child { text-align: left; flex: none; }
}

/* ============================================================
   PROFILE MODAL (.profile-modal) — Apr 19, 2026 — v1 read-only
   Opens from summary card's "Edit profile →" whisper.
   ============================================================ */

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.profile-modal[aria-hidden="false"] { display: flex; }
.profile-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.profile-modal__dialog {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-lg);
  max-width: 540px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(28,25,23,.25);
  padding: 0;
  display: flex; flex-direction: column;
}
.profile-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(28,25,23,.1);
}
.profile-modal__head h2 {
  font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--forest);
  margin: 0; letter-spacing: -.015em;
}
.profile-modal__close {
  background: none; border: none; cursor: pointer;
  font-size: 24px; color: var(--ink-2); padding: 4px 8px; border-radius: var(--r-sm);
  line-height: 1;
  transition: color .12s ease, background .12s ease;
}
.profile-modal__close:hover { color: var(--ink); background: rgba(28,25,23,.06); }
.profile-modal__close:focus-visible { outline: 2px solid var(--forest-mid); outline-offset: 2px; }

.profile-modal__intro {
  font-size: 13px; color: var(--ink-2); line-height: 1.55;
  padding: 14px 24px 0;
  margin: 0;
}
.profile-modal__body {
  padding: 12px 24px 4px;
  flex: 1;
}
.profile-section { margin-bottom: 20px; }
.profile-section__title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sienna); margin: 0 0 8px;
}
.profile-field {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(28,25,23,.08);
  font-size: 13px;
}
.profile-field:last-child { border-bottom: 0; }
.profile-field__label { color: var(--ink-2); }
.profile-field__value { font-family: var(--serif); font-weight: 600; color: var(--ink); text-align: right; max-width: 60%; }
.profile-field__value--missing { font-style: italic; color: var(--ink-2); font-weight: 400; font-family: var(--sans); }

.profile-modal__footer {
  padding: 14px 24px 20px;
  display: flex; justify-content: flex-end; gap: 10px;
  border-top: 1px solid rgba(28,25,23,.1);
}
.profile-modal__footer .btn-ghost,
.profile-modal__footer .btn-primary {
  padding: 9px 18px; border-radius: var(--r-md); font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; transition: all .15s var(--ease);
}
.profile-modal__footer .btn-ghost { background: transparent; color: var(--ink-2); }
.profile-modal__footer .btn-ghost:hover { background: rgba(28,25,23,.06); color: var(--ink); }
.profile-modal__footer .btn-primary { background: var(--forest-mid); color: #fff; }
.profile-modal__footer .btn-primary:hover { background: var(--forest); }
.profile-modal__footer .btn-primary:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* Reduced motion — no backdrop blur */
@media (prefers-reduced-motion: reduce) {
  .profile-modal__backdrop { backdrop-filter: none; }
}

/* ============================================================
   URGENT DEADLINE BANNER (.urgent-banner) — Apr 19, 2026
   ============================================================ */

.urgent-banner {
  background: rgba(196,83,43,.06);
  border: 1px solid rgba(196,83,43,.22);
  border-left: 3px solid var(--sienna);
  border-radius: var(--r-md);
  padding: 10px 16px;
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink);
}
.urgent-banner__icon { font-size: 16px; line-height: 1; }
.urgent-banner__text strong { color: var(--sienna-dk); font-weight: 700; }
.urgent-banner__link { color: var(--sienna-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-left: 6px; }
.urgent-banner__link:hover { color: var(--sienna); }

/* ============================================================
   BOTTOM CTA (.quiz-results-end) — Apr 19, 2026
   ============================================================ */

.quiz-results-end {
  background: var(--paper-warm);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin: 20px 0 0;
  display: flex; flex-direction: column; gap: 12px;
}
.quiz-results-end__retake {
  font-size: 13px; color: var(--ink-2);
}
.quiz-results-end__retake a {
  color: var(--forest-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.quiz-results-end__retake a:hover { color: var(--forest-dk); }

.quiz-results-end__premium-cta {
  font-size: 14px; color: var(--ink);
  padding-top: 12px; border-top: 1px dashed rgba(28,25,23,.12);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.quiz-results-end__premium-cta strong { color: var(--forest-dk); font-weight: 700; }
.quiz-results-end__premium-cta .premium-cta {
  background: var(--sienna); color: #fff; padding: 9px 18px; border-radius: var(--r-md);
  text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
  flex-shrink: 0;
}
.quiz-results-end__premium-cta .premium-cta:hover { background: var(--sienna-dk); box-shadow: 0 3px 8px rgba(163,64,31,.26); }
.quiz-results-end__premium-cta .premium-cta:focus-visible { outline: 2px solid var(--sienna); outline-offset: 2px; }

@media (max-width: 680px) {
  .quiz-results-end { padding: 14px 16px; }
  .quiz-results-end__premium-cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   QUIZ-RESULTS END PITCH V2 + Ownr incorp banner
   (revenue-sprint 2026-05-28)
   Compound selectors (.quiz-results-end__pitch-v2 p.x) beat the .quiz-step
   p / h3 typography descendants per the specificity-trap rule in CLAUDE.md.
   ============================================================ */
.quiz-results-end__pitch-v2 {
  background: var(--paper);
  border: 1.5px solid var(--forest-dk);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin: 16px 0 0;
}
.quiz-results-end__pitch-v2 .pitch-eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--forest-mid);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 4px;
  display: block;
  text-align: left;
}
.quiz-results-end__pitch-v2 p.pitch-amount {
  font-size: 34px; font-weight: 800;
  color: var(--forest-dk);
  line-height: 1.0;
  margin: 0;
  text-align: left;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.quiz-results-end__pitch-v2 .pitch-note {
  font-size: 12px;
  color: var(--ink-2);
  margin: 6px 0 14px;
  display: block;
  text-align: left;
}
.quiz-results-end__pitch-v3 p.pitch-head {
  font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  color: var(--forest-dk); margin: 2px 0 8px; text-align: left;
}
.quiz-results-end__pitch-v2 p.pitch-body {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 14px;
  text-align: left;
}
.quiz-results-end__pitch-v2 p.pitch-body strong {
  color: var(--forest-dk); font-weight: 700;
}
.quiz-results-end__pitch-v2 .pitch-btn {
  display: block;
  text-align: center;
  background: var(--forest-dk);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  transition: background .15s ease;
}
.quiz-results-end__pitch-v2 .pitch-btn:hover {
  background: var(--forest);
  color: #fff;
  text-decoration: none;
}
/* ── URL-scan premium pitch cards (2026-06-07): mid R1+ "Math" · end R3+ "head
   start". .up- prefix. Animations play on .up-in (added when scrolled into view).
   Compound h3.up-h / p.up-lead beat the .quiz-step descendant trap. Checkout = new tab. */
.url-pitch { max-width: 520px; margin: 18px auto; border-radius: 18px; overflow: hidden; text-align: center; }
.url-pitch h3.up-h { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -.01em; margin: 0 0 9px; }
.url-pitch p.up-lead { margin: 0 auto 22px; line-height: 1.5; max-width: 42ch; }
.url-pitch .up-cta { display: block; width: 100%; text-align: center; text-decoration: none; font-weight: 700; border-radius: 12px; padding: 16px; font-size: 16px; transition: transform .15s, box-shadow .15s; }
.url-pitch .up-cta--sien { background: var(--sienna, #c2410c); color: #fff; box-shadow: 0 10px 24px -8px rgba(194,65,12,.5); }
.url-pitch .up-cta--sien:hover, .url-pitch .up-cta--sien:focus, .url-pitch .up-cta--sien:visited, .url-pitch .up-cta--sien:active { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(194,65,12,.6); color: #fff; text-decoration: none; }
.url-pitch .up-trust { margin-top: 13px; font-size: 12.5px; }
.url-pitch [data-tip] { border-bottom: 1px dotted; cursor: help; }
/* The mid-card lives INSIDE the single-column results grid. Without this, the base
   `margin:auto` makes it shrink to its content and float narrow in the middle of the
   column. Fill the column like the .cb cards. (The end-card lives OUTSIDE the grid
   and keeps the base centered max-width.) */
.quiz-results-grid > .url-pitch--mid { grid-column: 1 / -1; justify-self: stretch; max-width: none; margin: 18px 0; }
/* mid — dark forest */
.url-pitch--mid { background: linear-gradient(165deg,#163a2b 0%,#0f2a20 100%); color: #f4efe6; padding: 20px 28px 16px; }
.url-pitch--mid .up-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9fb2aa; margin-bottom: 8px; }
.url-pitch--mid .up-eyebrow .up-amt { color: #e7c873; }
.url-pitch--mid h3.up-h { font-size: 22px; color: #fff; margin-bottom: 5px; }
.url-pitch--mid p.up-lead { font-size: 13px; color: #cfe2d6; margin-bottom: 14px; max-width: 46ch; }
/* Content is horizontally constrained (the comparison boxes do NOT stretch to fill);
   the CTA stays full-width. Everything sized down a notch to keep the card compact. */
.url-pitch--mid .up-scale { display: flex; align-items: stretch; gap: 12px; justify-content: center; margin: 0 auto 14px; max-width: 430px; }
.url-pitch--mid .up-side { flex: 1; border-radius: 13px; padding: 9px 14px; max-width: 195px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.url-pitch--mid .up-cta { padding: 11px 18px; font-size: 15px; }
.url-pitch--mid .up-side--diy { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); opacity: .82; }
.url-pitch--mid .up-k { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: #9fb2aa; margin-bottom: 3px; }
.url-pitch--mid .up-v { font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 600; line-height: 1; color: #f4efe6; }
.url-pitch--mid .up-u { font-size: 11.5px; color: #9fb2aa; margin-top: 2px; }
.url-pitch--mid .up-side--diy .up-num { color: #c2b3a8; }
.url-pitch--mid .up-strike { text-decoration: line-through; text-decoration-color: #c2410c; text-decoration-thickness: 2.5px; }
.url-pitch--mid .up-side--prem { background: linear-gradient(160deg,rgba(184,134,11,.22),rgba(184,134,11,.08)); border: 1.5px solid rgba(240,200,105,.55); box-shadow: 0 0 18px -6px rgba(240,200,105,.35); }
.url-pitch--mid .up-side--prem .up-k { color: #e7c873; }
.url-pitch--mid .up-side--prem .up-v { color: #f3cf78; }
.url-pitch--mid .up-side--prem .up-per { font-size: 13px; color: #cdb98a; }
.url-pitch--mid .up-side--prem .up-u { color: #d8c9a3; }
.url-pitch--mid .up-vs { align-self: center; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 14px; color: #9fb2aa; }
.url-pitch--mid .up-trust { color: #9fb2aa; margin-top: 9px; }
.url-pitch--mid .up-trust [data-tip] { color: #cfe2d6; }
.url-pitch--mid.up-in .up-side--prem { animation: upWin .6s ease .25s both; }
@keyframes upWin { 0% { transform: scale(.97); } 100% { transform: scale(1); } }
/* end — white */
.url-pitch--end { background: #fff; border: 1px solid var(--line, #e4dccd); box-shadow: 0 16px 44px -22px rgba(22,58,43,.22); padding: 28px 26px 26px; }
.url-pitch--end .up-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a6508; margin-bottom: 11px; }
.url-pitch--end h3.up-h { font-size: 24px; color: #163a2b; }
.url-pitch--end p.up-lead { font-size: 13.5px; color: #4b5852; }
.url-pitch--end .up-doc { background: #faf7f2; border: 1px solid var(--line, #e4dccd); border-radius: 13px; padding: 16px 18px; margin: 0 0 14px; text-align: left; }
.url-pitch--end .up-doc-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: #59635c; margin-bottom: 13px; padding-bottom: 11px; border-bottom: 1px solid var(--line, #e4dccd); }
.url-pitch--end .up-doc-r { color: #177044; display: flex; align-items: center; gap: 5px; }
.url-pitch--end .up-d { width: 6px; height: 6px; border-radius: 50%; background: #1a7f4b; }
.url-pitch--end.up-in .up-d { animation: upBlink 1.4s ease-in-out infinite; }
@keyframes upBlink { 50% { opacity: .3; } }
.url-pitch--end .up-sec { margin-bottom: 13px; opacity: 0; transform: translateY(4px); }
.url-pitch--end .up-sec:last-of-type { margin-bottom: 0; }
.url-pitch--end.up-in .up-sec { animation: upIn .4s ease forwards; }
.url-pitch--end.up-in .up-sec:nth-of-type(2) { animation-delay: .5s; }
.url-pitch--end.up-in .up-sec:nth-of-type(3) { animation-delay: 1s; }
@keyframes upIn { to { opacity: 1; transform: translateY(0); } }
.url-pitch--end .up-sec-h { font-size: 11.5px; font-weight: 700; color: #163a2b; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.url-pitch--end .up-ck { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg,#163a2b,#2c6b4d); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.url-pitch--end .up-ln { height: 8px; border-radius: 4px; background: #ece6db; margin-bottom: 7px; position: relative; overflow: hidden; }
.url-pitch--end .up-ln:last-child { margin-bottom: 0; }
.url-pitch--end .up-ln::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#163a2b,#3a7a5b); transform: scaleX(0); transform-origin: left; }
.url-pitch--end.up-in .up-ln::after { animation: upFill .55s cubic-bezier(.2,.8,.3,1) forwards; }
.url-pitch--end.up-in .up-sec:nth-of-type(1) .up-ln:nth-child(3)::after { animation-delay: .15s; width: 84%; }
.url-pitch--end.up-in .up-sec:nth-of-type(2) .up-ln:nth-child(2)::after { animation-delay: .65s; }
.url-pitch--end.up-in .up-sec:nth-of-type(2) .up-ln:nth-child(3)::after { animation-delay: .78s; width: 72%; }
.url-pitch--end.up-in .up-sec:nth-of-type(3) .up-ln:nth-child(2)::after { animation-delay: 1.15s; width: 90%; }
@keyframes upFill { to { transform: scaleX(1); } }
.url-pitch--end .up-doc-more { text-align: center; font-size: 11.5px; color: #59635c; font-style: italic; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #d8cdbb; }
.url-pitch--end .up-metrics { display: flex; gap: 10px; margin: 0 0 18px; }
.url-pitch--end .up-met { flex: 1; text-align: center; background: #faf7f2; border-radius: 11px; padding: 13px 8px; }
.url-pitch--end .up-met-v { font-family: 'Fraunces', Georgia, serif; font-size: 17px; font-weight: 600; color: #163a2b; }
.url-pitch--end .up-met-per { font-size: 12px; color: #59635c; }
.url-pitch--end .up-met-k { font-size: 11px; color: #59635c; margin-top: 3px; }
.url-pitch--end .up-trust { color: #59635c; }
.url-pitch--end .up-trust [data-tip] { color: #1a7f4b; font-weight: 600; }
@media (max-width: 560px) {
  .url-pitch--mid { padding: 24px 16px 20px; }
  .url-pitch--mid h3.up-h { font-size: 22px; }
  .url-pitch--mid .up-v { font-size: 21px; }
  .url-pitch--mid .up-scale { gap: 8px; }
  .url-pitch--end h3.up-h { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .url-pitch--end .up-sec { opacity: 1; transform: none; animation: none !important; }
  .url-pitch--end .up-ln::after { animation: none !important; transform: scaleX(1); }
  .url-pitch--mid .up-side--prem, .url-pitch--end .up-d { animation: none !important; }
}

.quiz-results-end__testimonial-v2 {
  margin: 14px 0 0;
  background: #fffaf3;
  border: 1px solid #e7d8b8;
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.quiz-results-end__testimonial-v2 p.testi-quote {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 6px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  text-align: left;
}
.quiz-results-end__testimonial-v2 p.testi-attr {
  font-size: 11px;
  color: var(--ink-2);
  margin: 0;
  text-align: left;
}
.quiz-results-end__testimonial-v2 p.testi-attr strong {
  color: var(--ink); font-weight: 700;
}

/* Ownr incorporation banner — shown when at least 1 top quiz match requires
   incorporation AND the user is not already incorporated. Sits above the
   .quiz-results-grid as a contextual nudge. */
.quiz-results-incorp-banner {
  background: #fffbf3;
  border: 1.5px solid #d4a574;
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.quiz-results-incorp-banner__text {
  flex: 1;
  min-width: 200px;
}
.quiz-results-incorp-banner p.quiz-results-incorp-banner__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  text-align: left;
}
.quiz-results-incorp-banner p.quiz-results-incorp-banner__body {
  font-size: 12px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
  text-align: left;
}
.quiz-results-incorp-banner__cta {
  background: #b45309;
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.quiz-results-incorp-banner__cta:hover {
  background: #964509;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 540px) {
  .quiz-results-incorp-banner__cta {
    width: 100%; text-align: center;
  }
}
/* Growth note (2026-06-12) — incorporated-but-pre-revenue variant of the banner.
   Reuses the banner's text styles; no affiliate CTA. Cooler forest accent
   distinguishes it from the warm Ownr (incorporation) banner. */
.quiz-results-incorp-banner.quiz-results-growth-note {
  background: #f3f8f4;
  border-color: #9cc3a8;
}

/* ============================================
   V1.1 FIX (UX walk 2026-04-24) — hide free-signup + start-premium CTAs
   for premium subscribers. Surfaced by Chrome DevTools MCP walkthrough:
   a paying customer saw "Start Premium · $29/mo" + "Create Free Account"
   + the #signupToast simultaneously with their authenticated-user nav
   avatar. Confusing + undermines product coherence.
   `body.is-premium` is set by main.src.js / dashboard.src.js /
   explore.src.js auth handlers once Firestore subscription resolves.
   ============================================ */
body.is-premium .premium__cta,
body.is-premium .cta__actions,
body.is-premium .signup-toast,
body.is-premium #signupToast {
  display: none !important;
}

/* ============================================================
   QUICK-QUIZ "View All Matching Grants" button — restored Apr 19
   (removed in error during Task 13 legacy CSS cleanup; precision quiz
   moved to .quiz-results-end, but quick quiz still uses .view-all-btn)
   ============================================================ */
.view-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  margin: 1rem auto 0;
  background: var(--forest-mid);
  color: var(--white);
  border-radius: var(--r-full);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--sans);
  width: fit-content;
}
.view-all-btn:hover {
  background: var(--forest);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,67,50,.2);
}

/* ============================================================
   .sc + .cb SPECIFICITY BOOSTERS — Apr 20 bugfix
   .quiz-step h3 (0,0,1,1) and .quiz-step p (0,0,1,1) were winning over
   my single-class rules like .sc-c__headline (0,0,1,0). These compound
   selectors have specificity (0,0,2,1) which beats those.
   ============================================================ */

/* Summary card typography — override .quiz-step h3/p defaults */
.sc h3.sc-c__headline {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--forest);
  margin: 0 0 14px;
  text-align: center;
}
.sc p.sc__kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sienna);
  margin: 0 0 14px;
  line-height: 1.3;
  /* .sc__kicker has ::after pseudo-element — keep its flex display */
  display: flex;
  align-items: center;
  gap: 10px;
}
.sc p.sc-c__stats {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Grant card typography — override .quiz-step h3/h4/p defaults */
.cb h4.cb__title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
  text-align: left;
}
.cb p.cb__org {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.45;
  text-align: left;
}
.cb p.cb__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
  text-align: left;
  line-height: 1.3;
}

/* Mobile overrides for summary card typography (re-apply at narrow widths) */
@media (max-width: 680px) {
  .sc h3.sc-c__headline { font-size: 19px; line-height: 1.24; margin-bottom: 10px; }   /* 2026-09-20 (Khalid): 22px ran to four lines on a phone */
  .sc p.sc__kicker { font-size: 10px; margin-bottom: 10px; }
  .sc p.sc-c__stats { font-size: 12px; gap: 8px; }
}

/* ─── Mobile homepage search bar (Apr 26, 2026) ─────────────────────────
   Visible only on mobile/tablet (<1024px) — the desktop sidebar containing
   #searchInput is hidden at this breakpoint and there was no replacement,
   so 50%+ of homepage traffic had no way to filter the grant feed.
   See docs/SEARCH-INVESTIGATION-2026-04-25.md P0 #2. */
.hp-mobile-search { display: none; }
@media (max-width: 1023px) {
  .hp-mobile-search {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--paper, #FAF7F2);
    border: 1px solid var(--ink-line, rgba(28, 22, 18, 0.12));
    border-radius: 12px;
    padding: 0 12px 0 14px;
    margin: 16px 16px 12px 16px;
    box-shadow: 0 2px 8px rgba(28, 22, 18, 0.04);
    position: sticky;
    top: 64px;
    z-index: 40;
  }
  .hp-mobile-search:focus-within {
    border-color: var(--forest, #1F3528);
    box-shadow: 0 0 0 3px rgba(31, 53, 40, 0.12);
  }
  .hp-mobile-search__icon { flex: 0 0 auto; color: var(--ink-3, #706660); margin-right: 8px; }
  .hp-mobile-search__input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    outline: none;
    height: 44px;
    font-size: 16px; /* iOS no-zoom */
    color: var(--ink-1, #1C1612);
    line-height: 1.3;
    padding: 0;
    min-width: 0;
  }
  .hp-mobile-search__input::placeholder { color: var(--ink-3, #A29A93); font-weight: 400; }
  .hp-mobile-search__clear {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--ink-3, #706660);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hp-mobile-search__clear:hover { background: rgba(28, 22, 18, 0.06); color: var(--ink-1); }
  .hp-mobile-search__clear[hidden] { display: none; }
}
@media (max-width: 480px) {
  .hp-mobile-search { margin: 12px 12px 10px 12px; top: 60px; }
}
/* The autocomplete dropdown is anchored to the desktop sidebar input which is hidden
   at <=1023px, so it would render off-screen on mobile. Suppress on mobile until we
   build a properly-anchored mobile dropdown. */
@media (max-width: 1023px) {
  #searchSuggestions { display: none !important; }
}

/* ============================================================
   Resources mega-menu (v2) — Apr 2026
   ============================================================
   index.html doesn't load nav-v7.css (legacy choice from when nav was
   inline-with-page-styles), so the v2 mega-menu CSS lives here too.
   These are scoped to .nav-dropdown[data-nav-version="v2"] so they
   never affect the legacy dropdown structure used elsewhere.
   Mirror of the block at end of nav-v7.css — keep both in sync. */
.nav-dropdown[data-nav-version="v2"] .nav-dropdown-menu {
  min-width: 280px;
  padding: 8px;
}
.nav-dropdown-link--featured {
  display: block !important;
  padding: 12px 16px !important;
  background: var(--forest-glow);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.nav-dropdown-link-title {
  display: block; font: 600 14px/1.2 var(--sans); color: var(--ink);
}
.nav-dropdown-link-sub {
  display: block; font: 400 12px/1.3 var(--sans); color: var(--ink-2); margin-top: 2px;
}
.nav-dropdown-section {
  padding: 8px 0;
  border-top: 1px solid var(--ink-5);
}
.nav-dropdown-section:first-of-type { border-top: none; padding-top: 0; }
.nav-dropdown-heading {
  display: block;
  font: 600 11px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 16px 4px;
}
.nav-dropdown[data-nav-version="v2"] .nav-dropdown-link {
  padding: 8px 16px !important;
  font: 500 14px/1.3 var(--sans) !important;
  color: var(--ink) !important;
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.nav-dropdown[data-nav-version="v2"] .nav-dropdown-link:hover {
  background: var(--forest-glow); color: var(--forest-dk) !important;
}
/* ★★ ROUND 16 — the deferral from batch 1, closed. That round fixed `.nav__wordmark .c`
   and REPORTED this sibling as found-outside-scope: same token used as TEXT, same
   measured 4.25:1 against the same fill, 14px/600 so the 4.5:1 body floor applies.
   Reporting a failing state and shipping it is the "I could not verify X is a TODO,
   not a finding" shape. Same component-level repoint, same existing token.
   ⚠ BOTH FILES. homepage-v7.css carries its own copy of this rule, which is exactly
   how batch 1's wordmark fix reached only some page types on its first pass. */
.nav-dropdown-link--store { color: var(--sienna-dk) !important; font-weight: 600 !important; }
.nav-dropdown-link--store:hover { background: var(--sienna-lt) !important; color: var(--sienna-dk) !important; }
.nav-dropdown-link-pill {
  font: 700 9px/1 var(--sans); letter-spacing: 0.1em;
  background: var(--sienna); color: var(--paper);
  padding: 3px 6px; border-radius: var(--r-sm);
}
.nav-dropdown-divider { height: 1px; background: var(--ink-5); margin: 4px 0; }
.nav-dropdown-link--meta { color: var(--ink-2) !important; font-size: 13px !important; }

/* ============================================================
   Sister-product tiles ("More from GrantCompass") — Jul 2026
   GC Arts + GC US, injected at the bottom of the Resources dropdown
   just above the divider/Contact-us row. Mirror block: nav-v7.css.
   ============================================================ */
.nav-sis {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 10px !important;
  margin: 2px 6px;
  border: 1px solid var(--ink-5);
  border-radius: var(--r-md);
  text-decoration: none;
  font: 500 14px/1.3 var(--sans) !important;
  color: var(--ink) !important;
}
.nav-sis:hover {
  background: var(--paper-2, #faf8f4);
  border-color: var(--ink-4, #d6d1c4);
}
.nav-sis__mono {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font: 800 0.68rem/1 var(--sans);
  color: #fff;
  letter-spacing: 0.02em;
}
.nav-sis__body { display: flex; flex-direction: column; min-width: 0; }
.nav-sis__name { font-weight: 600; color: var(--ink); }
.nav-sis__desc {
  font-size: 0.72rem;
  color: var(--ink-2);
  margin-top: 1px;
  white-space: normal;
}
.nav-sis__go { margin-left: auto; color: var(--ink-3); flex: 0 0 auto; }

/* Bottom premium teaser line: "You matched X more programs — get Premium…" (2026-06-05).
   Compound selector clears the .quiz-step p trap; link color locked past the sitewide a:hover. */
.quiz-results-end p.quiz-results-more-premium { margin: 14px auto 0; max-width: 620px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2, #57534E); text-align: center; }
.quiz-results-end p.quiz-results-more-premium a,
.quiz-results-end p.quiz-results-more-premium a:visited { color: var(--forest-mid, #2D6A4F); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.quiz-results-end p.quiz-results-more-premium a:hover,
.quiz-results-end p.quiz-results-more-premium a:focus { color: var(--forest-dk, #143728); }

/* ============================================================
   GC Arts bridge (2026-07-03) — AB1 results card + AB6 ping/pill.
   Namespaced .gc-artsb-*; NEW selectors only (no existing-class edits →
   no css-debt-audit needed). Lives here (not main.css) because the quiz
   surface (index.html) loads homepage-v7.css, NOT main.css.
   Palette: purple #6C3FA5 · tint #f7f3fb · border #ddd0ee.
   Inner text/interactive rules scoped for (0,0,2,0) specificity so they
   sit safely inside .quiz-step (clears the .quiz-step h3/p legacy traps).
   ============================================================ */
.gc-artsb-card {
    background: #f7f3fb;
    border: 1px solid #ddd0ee;
    border-top: 3px solid #6C3FA5;
    border-radius: 12px;
    padding: 18px;
    margin: 18px 0 0;
    text-align: left;
}
.gc-artsb-card .gc-artsb-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.gc-artsb-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: conic-gradient(#6C3FA5 0 30%, #E8A838 30% 55%, #b98ae0 55% 80%, #f3d9a4 80% 100%);
    box-shadow: inset 0 0 0 2px #fff;
}
.gc-artsb-card .gc-artsb-wm {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6C3FA5;
}
.gc-artsb-card .gc-artsb-h {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: #3c2660;
    margin: 0 0 6px;
}
.gc-artsb-card .gc-artsb-p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4a3b60;
    margin: 0 0 12px;
}
.gc-artsb-card .gc-artsb-p strong { color: #3c2660; }
.gc-artsb-card .gc-artsb-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.gc-artsb-card .gc-artsb-stats span {
    background: #fff;
    border: 1px solid #e6dcf2;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.8rem;
    color: #4a3b60;
}
.gc-artsb-card .gc-artsb-stats b { color: #6C3FA5; font-weight: 700; }
/* Lock the CTA text colour across every state — beats the sitewide a:hover colour rule. */
.gc-artsb-card .gc-artsb-cta,
.gc-artsb-card .gc-artsb-cta:hover,
.gc-artsb-card .gc-artsb-cta:focus,
.gc-artsb-card .gc-artsb-cta:visited,
.gc-artsb-card .gc-artsb-cta:active,
.gc-artsb-ping .gc-artsb-cta,
.gc-artsb-ping .gc-artsb-cta:hover,
.gc-artsb-ping .gc-artsb-cta:focus,
.gc-artsb-ping .gc-artsb-cta:visited,
.gc-artsb-ping .gc-artsb-cta:active {
    color: #fff;
}
.gc-artsb-card .gc-artsb-cta,
.gc-artsb-ping .gc-artsb-cta {
    display: inline-block;
    background: #6C3FA5;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 8px;
    padding: 9px 18px;
    line-height: 1.3;
    min-height: 44px;
    box-sizing: border-box;
    transition: background 0.15s ease;
}
.gc-artsb-card .gc-artsb-cta:hover,
.gc-artsb-ping .gc-artsb-cta:hover { background: #5a3389; }
.gc-artsb-ping .gc-artsb-cta--sm {
    padding: 6px 12px;
    font-size: 0.8rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.gc-artsb-card .gc-artsb-micro {
    display: block;
    margin-top: 8px;
    font-size: 0.74rem;
    color: #7a6b93;
}
/* AB6 ping bar */
.gc-artsb-ping {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: #f7f3fb;
    border: 1px solid #ddd0ee;
    border-left: 3px solid #6C3FA5;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 16px;
    text-align: left;
}
.gc-artsb-ping .gc-artsb-ping-txt {
    flex: 1 1 200px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #4a3b60;
}
.gc-artsb-ping .gc-artsb-ping-txt strong { color: #3c2660; }
.gc-artsb-ping .gc-artsb-ping-sub { color: #7a6b93; font-size: 0.8rem; }
.gc-artsb-ping .gc-artsb-x {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #7a6b93;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    transition: background 0.15s ease;
}
.gc-artsb-ping .gc-artsb-x:hover { background: #ece2f6; color: #6C3FA5; }
/* AB6 pill (collapsed state on later steps) */
.gc-artsb-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f7f3fb;
    border: 1px solid #ddd0ee;
    border-radius: 999px;
    padding: 7px 14px;
    margin: 0 0 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6C3FA5;
    cursor: pointer;
    min-height: 36px;
    transition: background 0.15s ease;
}
.gc-artsb-pill:hover { background: #ece2f6; }
@media (max-width: 400px) {
    .gc-artsb-ping .gc-artsb-cta { flex: 1 1 auto; text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .gc-artsb-card .gc-artsb-cta, .gc-artsb-ping .gc-artsb-cta, .gc-artsb-ping .gc-artsb-x, .gc-artsb-pill { transition: none; }
}

/* ── Quick-results → Precision upsell (2026-08-25 quick-quiz overhaul) ──
   All text rules are compound (.quiz-precision-upsell .qpu-*) at (0,0,2,0) so the legacy
   element-qualified .quiz-step p / h3 rules at (0,0,1,1) cannot silently win the cascade. */
.quiz-precision-upsell {
  margin: 1.25rem 0 0.25rem;
  padding: 1.25rem 1.4rem;
  background: #1B4332;
  border-radius: var(--r-lg);
  text-align: center;
}
.quiz-precision-upsell .qpu-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.4rem;
}
.quiz-precision-upsell .qpu-body {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0 0 0.9rem;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.quiz-precision-upsell .qpu-btn {
  display: inline-block;
  padding: 12px 26px;
  background: #fff;
  color: #1B4332;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quiz-precision-upsell .qpu-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.quiz-precision-upsell .qpu-fine {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  margin: 0.6rem 0 0;
}
@media (max-width: 500px) {
  .quiz-precision-upsell { padding: 1.1rem 1rem; }
  .quiz-precision-upsell .qpu-btn { width: 100%; white-space: normal; }
}

/* ============================================================
   PRECISION-QUIZ SIGN-UP WALL v6 (qag6) — 2026-10-04
   Re-imagined around ONE focal point, the sign-in button: a card sized to Google's button (GIS caps it at 400px;
   experiment gsi_wall renders Google's button here for half of visitors), the next match as one ranked row,
   ghost rows for the rest, an email fallback. Replaces the qag5 card (rules above kept until qag5 markup is gone
   from every cached main.js). Compound selectors (.qag6 .x, 0,2,0) beat the single-class .qag5__google base rules.
   ============================================================ */
.qag6 { position: relative; overflow: hidden; box-sizing: border-box; width: 100%; min-width: 0; max-width: 440px; margin: 28px auto 8px; padding: 28px 20px 14px;
  background: var(--paper); border: 1px solid rgba(27,67,50,.16); border-radius: 20px;
  box-shadow: 0 16px 40px -18px rgba(28,25,23,.30), 0 1px 2px rgba(28,25,23,.04); text-align: center; font-family: var(--sans); }
/* the same forest→sienna hairline the results summary card wears, so the wall reads as part of the results, not an ad */
.qag6::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--forest-mid, #2D6A4F), var(--sienna)); opacity: .55; }
.qag6 .qag6__h { margin: 0 0 6px; font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.12; letter-spacing: -.01em; color: var(--forest); text-wrap: balance; }
.qag6 .qag6__sub { margin: 0 auto 18px; max-width: 340px; font-size: 14px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.qag6 .qag6__next { min-width: 0; overflow: hidden; margin: 0 0 18px; padding: 12px 14px 10px; border: 1px solid #EFE7DA; border-radius: 14px; background: #fff; text-align: left; }
.qag6 .qag6__next-head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.qag6 .qag6__next-head svg { width: 13px; height: 13px; flex: 0 0 13px; }
@media (max-width: 360px) { .qag6 .qag6__by { display: none; } }
.qag6 .qag6__row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 44%; align-items: center; column-gap: 10px; min-height: 30px; }
.qag6 .qag6__count { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1; color: var(--sienna); text-align: right; font-variant-numeric: tabular-nums; }
.qag6 .qag6__type { min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qag6 .qag6__track { display: block; height: 6px; border-radius: 4px; background: #F3EEE6; overflow: hidden; }
.qag6 .qag6__fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(196,83,43,.55), rgba(196,83,43,.25)); }
.qag6 .qag6__google { width: 100%; max-width: 400px; min-height: 48px; margin: 0 auto; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 999px; background: var(--forest); color: #fff; font: 600 15.5px var(--sans); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(27,67,50,.6); transition: background .15s ease, transform .15s ease; }
.qag6 .qag6__google:hover { background: #24573f; transform: translateY(-1px); }
.qag6 .qag6__google:active { transform: translateY(0); }
.qag6 .qag6__google:focus-visible { outline: 3px solid rgba(27,67,50,.35); outline-offset: 3px; }
.qag6 .qag6__google svg { flex-shrink: 0; width: 24px; height: 24px; padding: 3px; background: #fff; border-radius: 50%; }
.qag6 .qag6__fine { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.qag6 .qag6__email { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; color: var(--forest); text-decoration: underline; text-decoration-color: rgba(27,67,50,.35); text-underline-offset: 3px; }
.qag6 .qag6__email:hover { text-decoration-color: currentColor; }
@media (max-width: 480px) { .qag6 { margin: 24px auto 8px; padding: 24px 16px 10px; } .qag6 .qag6__h { font-size: 24px; }
  .qag6 .qag6__row { grid-template-columns: 24px minmax(0, 1fr) 26%; column-gap: 8px; } .qag6 .qag6__type { font-size: 14px; } .qag6 .qag6__next { padding: 12px 12px 10px; } }
@media (prefers-reduced-motion: reduce) { .qag6 .qag6__google { transition: none; } .qag6 .qag6__google:hover { transform: none; } }