/* ==========================================================================
   Ask For Helping Hand — page-level layout.
   Header, hero, panel, footer. Components live in base.css.
   ========================================================================== */

/* --- Logo lockup — built in HTML so the brand font always applies ------- */
.lockup { display: inline-flex; align-items: center; gap: 0.65em; text-decoration: none; font-size: 1.25rem; }
.lockup__mark { width: 2.4em; height: 2.4em; flex: none; }
.lockup__text {
  font-family: var(--font-display); font-weight: var(--fw-black);
  line-height: 1.04; letter-spacing: -0.03em; text-align: left; color: var(--text);
}
.lockup__text i { display: block; font-style: normal; }
.lockup__text .l1 { font-size: 0.72em; font-weight: var(--fw-semibold); opacity: 0.6; }
.lockup__text .l2 { font-size: 1em; }
.lockup--on-dark .lockup__text { color: #fff; }
.lockup--on-dark .lockup__text .l1 { opacity: 0.75; }

/* --- Announcement bar --------------------------------------------------- */
.topbar {
  background: var(--navy); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-2); min-height: 36px;
}
.topbar a { color: #fff; font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; }
.topbar a:hover { color: var(--cyan-400); }
.topbar span { color: rgba(255,255,255,0.78); }
@media (max-width: 34rem) { .topbar span { display: none; } .topbar__inner { justify-content: center; } }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  padding-block: var(--sp-3); min-height: 72px;
}
.site-nav { display: flex; gap: var(--sp-5); margin-left: auto; }
.site-nav a {
  color: var(--text-muted); text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text); }

@media (max-width: 62rem) {
  .site-nav { display: none; }
  .site-header__inner { justify-content: space-between; }
  .site-header .phone-pill { margin-left: auto; }
}
@media (max-width: 30rem) {
  .site-header .phone-pill__text { display: none; }
  .site-header .phone-pill { padding: var(--sp-2); }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(70rem 40rem at 85% -10%, var(--blue-50), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-sunken) 100%);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
}
@media (max-width: 64rem) { .hero__grid { grid-template-columns: 1fr; } }

.hero__copy h1 { margin-top: var(--sp-5); }
.hero__copy h1 .hl { color: var(--brand); }

.hero__lede {
  margin-top: var(--sp-5); max-width: 34rem;
  font-size: var(--fs-lg); color: var(--text-muted); line-height: var(--lh-relaxed);
}

.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
  margin-block: var(--sp-8) var(--sp-6);
}
.hero__hours { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.hero__hours strong { color: var(--text); }
.hero__hours span { color: var(--text-muted); }

/* --- Hero side panel ---------------------------------------------------- */
.panel {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  box-shadow: var(--sh-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.panel__eyebrow {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: var(--fw-black); letter-spacing: var(--ls-tight);
}
.panel__note { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-5); }

.panel__list { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-2); }
.panel__list li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.panel__li-icon {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem;
  background: var(--surface); color: var(--brand);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.panel__list div { display: flex; flex-direction: column; line-height: 1.3; }
.panel__list strong { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.panel__list span { font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Hotline number ----------------------------------------------------- */
.hotline-num {
  margin-top: auto; padding-top: var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-xl);
  font-weight: var(--fw-black); letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  color: var(--cyan-400); text-decoration: none;
}
.hotline-num:hover { color: #fff; }

/* --- Callback form ------------------------------------------------------ */
.callback-form {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  box-shadow: var(--sh-md);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}
.consent {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin-top: var(--sp-6); padding: var(--sp-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-relaxed);
}
.consent input {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--brand); cursor: pointer;
}

/* --- Final CTA ---------------------------------------------------------- */
.final-cta { background: var(--navy); color: #fff; }
.final-cta h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.final-cta .eyebrow { color: var(--cyan-400); }
.final-cta__lede {
  max-width: 44rem; margin: var(--sp-5) auto 0;
  font-size: var(--fs-lg); color: var(--text-on-dark-mut); line-height: var(--lh-relaxed);
}
.final-cta__actions { margin-top: var(--sp-8); }
.final-cta .phone-cta { background: #fff; color: var(--navy); box-shadow: 0 10px 34px rgba(0,0,0,0.35); }
.final-cta .phone-cta:hover { background: var(--cyan-400); color: var(--navy); }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--navy); color: #fff;
  padding-block: var(--sp-16) var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__top {
  display: grid; gap: var(--sp-10);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--border-on-dark);
}
@media (max-width: 52rem) { .footer__top { grid-template-columns: 1fr; } }

.footer__blurb {
  margin-top: var(--sp-5); max-width: 34rem;
  font-size: var(--fs-sm); color: var(--text-on-dark-mut); line-height: var(--lh-relaxed);
}
.footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sp-8); }
.footer__nav h3 {
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer__nav a {
  display: block; padding-block: var(--sp-2);
  color: var(--text-on-dark-mut); font-size: var(--fs-sm); text-decoration: none;
}
.footer__nav a:hover { color: var(--cyan-400); }

.footer__disclosures {
  display: grid; gap: var(--sp-4);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--border-on-dark);
}
.footer__disclosures p {
  font-size: var(--fs-xs); line-height: var(--lh-relaxed);
  color: rgba(255,255,255,0.62);
}
@media (min-width: 900px) {
  .footer__disclosures { display: block; columns: 2; column-gap: var(--sp-10); }
  .footer__disclosures p { break-inside: avoid; margin-bottom: var(--sp-4); }
  .footer__disclosures p:last-child { margin-bottom: 0; }
}
.footer__disclosures strong { color: rgba(255,255,255,0.92); }

.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
  padding-top: var(--sp-6);
  font-size: var(--fs-xs); color: rgba(255,255,255,0.55);
}
.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.footer__legal-links a { color: rgba(255,255,255,0.72); text-decoration: none; }
.footer__legal-links a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Interior pages — mirrors konnectx's legal/[slug] layout:
   hero-soft band with breadcrumb, then article + sticky call-aside.
   ========================================================================== */
.page-hero {
  background: var(--hero-soft);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.crumbs { font-size: var(--fs-sm); color: var(--text-subtle); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy); }
.crumbs span { color: var(--navy); }
.page-hero h1 { margin-top: var(--sp-3); color: var(--navy); font-size: var(--fs-4xl); }
.page-hero__meta { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.page-hero__lede {
  margin-top: var(--sp-4); max-width: 46rem;
  font-size: var(--fs-lg); color: var(--text-muted); line-height: var(--lh-relaxed);
}

.doc-grid {
  display: grid; gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}
@media (max-width: 62rem) { .doc-grid { grid-template-columns: 1fr; } }

.doc { max-width: 48rem; }
.doc > p { color: var(--text-muted); line-height: var(--lh-relaxed); }
.doc > p + p { margin-top: var(--sp-4); }
.doc__intro p { font-size: var(--fs-lg); color: var(--text-muted); }
.doc__intro p + p { margin-top: var(--sp-4); }
.doc section { margin-top: var(--sp-10); }
.doc section h2 { font-size: var(--fs-xl); color: var(--navy); }
.doc section p { margin-top: var(--sp-3); color: var(--text-muted); line-height: var(--lh-relaxed); }
.doc section ul { margin-top: var(--sp-3); padding-left: 1.2rem; color: var(--text-muted); }
.doc section li + li { margin-top: var(--sp-2); }

.doc__more { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--border); }
.doc__more p {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-subtle);
}
.policy-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.policy-pills a {
  padding: 0.4rem var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-full);
  font-size: var(--fs-sm); color: var(--navy); text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
}
.policy-pills a:hover { border-color: var(--brand); color: var(--brand); }

.aside-card {
  background: var(--navy); color: #fff;
  border-radius: var(--r-2xl); padding: var(--sp-6);
  box-shadow: var(--sh-card);
}
@media (min-width: 62rem) { .aside-sticky { position: sticky; top: 116px; } }
.aside-card__eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--cyan-400); }
.aside-card__title { margin-top: var(--sp-1); font-size: var(--fs-xl); font-weight: var(--fw-black); }
.aside-card__note { margin-top: var(--sp-2); font-size: var(--fs-sm); color: rgba(255,255,255,0.62); line-height: var(--lh-relaxed); }
.aside-card .btn { margin-top: var(--sp-4); width: 100%; }

/* State food-bank pages */
.fb-list { display: grid; gap: var(--sp-4); }
.fb-item {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.fb-item__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.fb-item__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.fb-item__tel {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-lg); color: var(--text-brand); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.state-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.state-jump a {
  padding: 0.3rem var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-full); font-size: var(--fs-sm);
  color: var(--text-muted); text-decoration: none;
}
.state-jump a:hover { border-color: var(--brand); color: var(--brand); }

/* --- Form: honeypot, status, success ------------------------------------ */

/* Honeypot. Positioned off-screen rather than display:none, because a
   fair number of bots skip display:none fields. aria-hidden + tabindex=-1
   on the markup keep it away from screen readers and keyboard users. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm); line-height: var(--lh-relaxed);
}
.form-status--pending { background: var(--surface-sunken); color: var(--text-muted); }
.form-status--error {
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  font-weight: var(--fw-semibold);
}

.form-done {
  display: grid; gap: var(--sp-3); justify-items: center; text-align: center;
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  box-shadow: var(--sh-card);
}
.form-done__icon {
  display: grid; place-items: center;
  width: 4rem; height: 4rem;
  background: var(--success-bg); color: var(--success);
  border-radius: var(--r-full);
}
.form-done h3 { font-size: var(--fs-2xl); }
.form-done p { max-width: 42ch; color: var(--text-muted); line-height: var(--lh-relaxed); }
.form-done__urgent {
  margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-5);
  background: var(--surface-sunken); border-radius: var(--r-xl);
  font-size: var(--fs-sm);
}
.form-done__urgent a { font-weight: var(--fw-bold); white-space: nowrap; }

/* ==========================================================================
   Long-form topic pages
   ========================================================================== */

/* Illustrations take their hue from whatever section holds them. */
.art { width: 100%; height: auto; display: block; color: var(--brand); }
.art--muted { color: var(--n-400); }
.art-frame {
  display: grid; place-items: center;
  padding: var(--sp-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  box-shadow: var(--sh-card);
}

.topic-hero { background: var(--hero-soft); border-bottom: 1px solid var(--border); }
.topic-hero__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 56rem) {
  .topic-hero__grid { grid-template-columns: 1fr; }
  .topic-hero .art-frame { max-width: 18rem; margin-inline: auto; }
}
.topic-hero h1 { margin-top: var(--sp-4); color: var(--navy); font-size: var(--fs-4xl); }

/* --- Programme cards ---------------------------------------------------- */
.program {
  display: grid; gap: var(--sp-4);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xs);
}
.program + .program { margin-top: var(--sp-4); }
.program__name { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--navy); }
.program__rows { display: grid; gap: var(--sp-3); }
.program__row {
  display: grid; gap: var(--sp-1) var(--sp-4);
  grid-template-columns: 7rem minmax(0, 1fr);
}
@media (max-width: 40rem) { .program__row { grid-template-columns: 1fr; } }
.program__label {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-subtle); padding-top: 0.2em;
}
.program__value { color: var(--text-muted); line-height: var(--lh-relaxed); }
.program__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); text-decoration: none;
}
.program__link:hover { gap: var(--sp-3); }

/* --- Document checklist ------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.checklist li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text-muted); line-height: var(--lh-relaxed);
}
.checklist svg { flex: none; margin-top: 0.25em; color: var(--brand); }

/* --- "What people miss" ------------------------------------------------- */
.insight {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-lg);
}
.insight + .insight { margin-top: var(--sp-3); }
.insight__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.insight__body { color: var(--text-muted); line-height: var(--lh-relaxed); }
.section--inverse .insight {
  background: rgba(255,255,255,0.05);
  border-color: var(--border-on-dark);
  border-left-color: var(--cyan-400);
}
.section--inverse .insight__body { color: var(--text-on-dark-mut); }

/* --- Related topics ----------------------------------------------------- */
.related-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.related {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-2xl); text-decoration: none; color: inherit;
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.related:hover { border-color: var(--border-brand); transform: translateY(-3px); box-shadow: var(--sh-md); color: inherit; }
.related__art { width: 4.5rem; color: var(--brand); }
.related__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.related__note { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-relaxed); }

/* --- Two-column media row ---------------------------------------------- */
.media-row {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
}
.media-row--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.media-row--flip > .art-frame { order: 2; }
@media (max-width: 56rem) {
  .media-row, .media-row--flip { grid-template-columns: 1fr; }
  .media-row--flip > .art-frame { order: 0; }
  .media-row .art-frame { max-width: 16rem; margin-inline: auto; }
}

/* Scene art used inside a card — the 240x180 illustrations need room to read,
   so they get their own width rather than the 3.25rem icon box. */
.card__art { width: 6.5rem; color: var(--brand); margin-bottom: var(--sp-1); }

/* ==========================================================================
   Guide pages (help/<guide>.html) — answer-first, sectioned, sticky TOC
   ========================================================================== */
.guide-hero { background: var(--hero-soft); border-bottom: 1px solid var(--border); }
.guide-hero__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}
@media (max-width: 56rem) {
  .guide-hero__grid { grid-template-columns: 1fr; }
  .guide-hero .art-frame { display: none; }
}
.guide-hero h1 { margin-top: var(--sp-3); color: var(--navy); font-size: var(--fs-4xl); }
.guide-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5);
              font-size: var(--fs-sm); color: var(--text-muted); }
.guide-meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.guide-meta svg { color: var(--brand); }

.guide-layout {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  grid-template-columns: 250px minmax(0, 1fr);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
@media (max-width: 62rem) { .guide-layout { grid-template-columns: 1fr; } }

/* --- Table of contents --- */
.toc { position: sticky; top: 100px; display: grid; gap: var(--sp-5); }
@media (max-width: 62rem) { .toc { position: static; } }
.toc details { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface-raised); }
.toc summary { padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
               font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
               text-transform: uppercase; color: var(--text-subtle); }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0 var(--sp-3) var(--sp-4); counter-reset: toc; }
.toc li a {
  display: flex; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-muted);
  text-decoration: none; line-height: 1.35;
}
.toc li a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero);
                    font-weight: var(--fw-bold); color: var(--blue-300); font-variant-numeric: tabular-nums; }
.toc li a:hover { background: var(--surface-accent); color: var(--text-brand); }
.toc .aside-card { padding: var(--sp-5); }

/* --- Guide body --- */
.guide { min-width: 0; max-width: 50rem; }
.guide > section { margin-top: var(--sp-16); scroll-margin-top: 100px; }
.guide > section:first-of-type { margin-top: var(--sp-10); }
.sec-head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.sec-num {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-lg); background: var(--surface-accent); color: var(--text-brand);
  font-weight: var(--fw-black); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.sec-head h2 { font-size: var(--fs-2xl); color: var(--navy); }
.sec-head p { margin-top: var(--sp-1); color: var(--text-muted); font-size: var(--fs-sm); }
.guide p.body { color: var(--text-muted); line-height: 1.75; }
.guide p.body + p.body { margin-top: var(--sp-4); }
.guide p.body strong { color: var(--text); }

/* Answer box — the 50-word answer search engines and assistants lift */
.answer-box {
  position: relative; padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  background: linear-gradient(135deg, var(--blue-50), #fff 70%);
  border: 1px solid var(--border-brand); border-radius: var(--r-2xl);
}
.answer-box::before { content: ""; position: absolute; left: 0; top: var(--sp-6); bottom: var(--sp-6);
                      width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.answer-box__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
                     text-transform: uppercase; color: var(--text-brand); }
.answer-box p { margin-top: var(--sp-2); font-size: var(--fs-lg); line-height: 1.65; color: var(--text); }

/* At-a-glance facts */
.facts { display: grid; gap: var(--sp-3); margin-top: var(--sp-5);
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.fact { padding: var(--sp-4) var(--sp-5); background: var(--surface-raised);
        border: 1px solid var(--border); border-radius: var(--r-xl); }
.fact__label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.06em;
               text-transform: uppercase; color: var(--text-subtle); }
.fact__value { margin-top: var(--sp-1); font-weight: var(--fw-bold); color: var(--navy); line-height: 1.35; }

/* Eligibility grid */
.who-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.who-item { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4);
            background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-lg);
            color: var(--text-muted); line-height: var(--lh-relaxed); font-size: var(--fs-sm); }
.who-item svg { flex: none; margin-top: 0.2em; color: var(--success); }
.who-note { margin-top: var(--sp-4); }

/* Stepper */
.stepper { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.stepper li { position: relative; padding: 0 0 var(--sp-8) 3.75rem; }
.stepper li::before {
  counter-increment: st; content: counter(st);
  position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--brand); color: #fff; font-weight: var(--fw-black);
  box-shadow: 0 0 0 6px var(--blue-50);
}
.stepper li::after { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.9rem; bottom: 0.4rem;
                     width: 2px; background: var(--border); }
.stepper li:last-child { padding-bottom: 0; }
.stepper li:last-child::after { display: none; }
.stepper h3 { font-size: var(--fs-lg); color: var(--navy); padding-top: 0.45rem; }
.stepper p { margin-top: var(--sp-2); color: var(--text-muted); line-height: 1.7; }

/* Timeline */
.tl { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; }
.tl__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); background: var(--surface-raised); }
.tl__row + .tl__row { border-top: 1px solid var(--border); }
.tl__when { padding: var(--sp-4) var(--sp-5); background: var(--surface-sunken); font-weight: var(--fw-bold);
            color: var(--navy); font-size: var(--fs-sm); }
.tl__what { padding: var(--sp-4) var(--sp-5); color: var(--text-muted); line-height: var(--lh-relaxed); font-size: var(--fs-sm); }
@media (max-width: 40rem) { .tl__row { grid-template-columns: 1fr; } .tl__when { padding-bottom: var(--sp-2); } }

/* Mistakes */
.mistakes { display: grid; gap: var(--sp-3); }
.mistake { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-5);
           background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-xl); }
.mistake__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
                 border-radius: var(--r-md); background: var(--danger-bg); color: var(--danger); }
.mistake h3 { font-size: var(--fs-base); color: var(--navy); }
.mistake p { margin-top: var(--sp-1); color: var(--text-muted); line-height: var(--lh-relaxed); font-size: var(--fs-sm); }

/* State note */
.state-card { display: grid; gap: var(--sp-5); grid-template-columns: 9rem minmax(0, 1fr); align-items: center;
              padding: var(--sp-6); background: var(--navy); color: #fff; border-radius: var(--r-2xl); }
.state-card .art { color: var(--cyan-400); }
.state-card p { color: var(--text-on-dark-mut); line-height: var(--lh-relaxed); }
.state-card a { color: var(--cyan-400); font-weight: var(--fw-bold); }
@media (max-width: 40rem) { .state-card { grid-template-columns: 1fr; } .state-card .art { width: 7rem; } }

/* Phone chips + sources */
.phones { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.phone-chip { display: grid; gap: 2px; padding: var(--sp-4) var(--sp-5); background: var(--surface-raised);
              border: 1px solid var(--border); border-radius: var(--r-xl); text-decoration: none; }
.phone-chip:hover { border-color: var(--border-brand); }
.phone-chip span { font-size: var(--fs-sm); color: var(--text-muted); }
.phone-chip strong { font-size: var(--fs-lg); color: var(--text-brand); font-variant-numeric: tabular-nums; }
.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sources a { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
             border: 1px solid var(--border); border-radius: var(--r-lg); text-decoration: none;
             font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sources a:hover { border-color: var(--brand); background: var(--surface-accent); }
.sources small { color: var(--text-subtle); font-weight: var(--fw-regular); }

/* Guide cards (hubs, related) */
.guide-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.guide-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5);
              background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-2xl);
              text-decoration: none; color: inherit; transition: all var(--dur-base) var(--ease); }
.guide-card:hover { border-color: var(--border-brand); transform: translateY(-3px); box-shadow: var(--sh-md); color: inherit; }
.guide-card__cat { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
                   text-transform: uppercase; color: var(--text-brand); }
.guide-card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--navy); line-height: 1.3; }
.guide-card__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-relaxed); }
.guide-card__more { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-brand); }

.cat-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.cat-tabs a { padding: 0.5rem var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-full);
              font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); text-decoration: none; }
.cat-tabs a:hover { border-color: var(--brand); color: var(--brand); }
.cat-block + .cat-block { margin-top: var(--sp-16); }
.cat-block__head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.cat-block__head .art { width: 4.5rem; }
.cat-block__head h2 { font-size: var(--fs-2xl); color: var(--navy); }
.cat-block__head p { color: var(--text-muted); font-size: var(--fs-sm); }

/* Real situations */
.examples { display: grid; gap: var(--sp-4); }
.example { padding: var(--sp-5) var(--sp-6); background: var(--surface-sunken);
           border: 1px solid var(--border); border-radius: var(--r-2xl); }
.example__label { display: inline-flex; align-items: center; gap: var(--sp-2);
                  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
                  text-transform: uppercase; color: var(--text-brand); }
.example h3 { margin-top: var(--sp-2); font-size: var(--fs-lg); color: var(--navy); }
.example p { margin-top: var(--sp-2); color: var(--text-muted); line-height: 1.7; }
.example p.example__outcome { color: var(--text); font-weight: var(--fw-semibold); }

/* TOC: sidebar list on desktop, collapsed disclosure on smaller screens */
.toc__desk { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface-raised); padding-top: var(--sp-4); }
.toc__title { padding: 0 var(--sp-5) var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-bold);
              letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-subtle); }
.toc__desk ol, .toc__mob ol { list-style: none; margin: 0; padding: 0 var(--sp-3) var(--sp-4); counter-reset: toc; }
.toc__mob { display: none; }
.toc__mob summary::after { content: "+"; float: right; font-size: var(--fs-lg); line-height: 1; color: var(--brand); }
.toc__mob[open] summary::after { content: "\2212"; }
@media (max-width: 62rem) {
  .toc__desk, .toc .aside-card { display: none; }
  .toc__mob { display: block; }
}

/* Comparison table */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm);
       border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; }
.cmp th { background: var(--navy); color: #fff; text-align: left; padding: var(--sp-3) var(--sp-4);
          font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.cmp td { padding: var(--sp-4); border-top: 1px solid var(--border); vertical-align: top;
          color: var(--text-muted); line-height: var(--lh-relaxed); background: var(--surface-raised); }
.cmp td:first-child { font-weight: var(--fw-bold); color: var(--navy); width: 26%; }
.cmp tr.is-this td { background: var(--surface-accent); }
.cmp tr.is-this td:first-child::after { content: "This guide"; display: block; margin-top: 4px;
          font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-brand); }

/* Key terms */
.glossary { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin: 0; }
.glossary div { padding: var(--sp-4) var(--sp-5); background: var(--surface-raised);
                border: 1px solid var(--border); border-radius: var(--r-xl); }
.glossary dt { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--navy); }
.glossary dd { margin: var(--sp-1) 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* Hub "start here" routing */
.routes { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
.route { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-1) var(--sp-5);
         padding: var(--sp-4) var(--sp-5); background: var(--surface-raised); border: 1px solid var(--border);
         border-radius: var(--r-xl); text-decoration: none; color: inherit; transition: all var(--dur-fast) var(--ease); }
.route:hover { border-color: var(--brand); background: var(--surface-accent); color: inherit; }
.route__situation { font-weight: var(--fw-bold); color: var(--navy); grid-row: span 2; align-self: center; }
.route__guide { font-weight: var(--fw-semibold); color: var(--text-brand); font-size: var(--fs-sm); }
.route__note { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 40rem) { .route { grid-template-columns: 1fr; } .route__situation { grid-row: auto; } }