/* ==========================================================================
   Portal layout — the dense, information-first design.
   Modelled on what the audience already knows (SarkariResult and similar), but
   fixing the three things those sites get wrong:
     1. They are unreadable on a phone. This is mobile-first with real tap targets.
     2. They shift layout constantly as ads load. Every ad slot here has a
        reserved height.
     3. They tell you a form exists but not whether YOU can apply. Hence the
        eligibility checker sitting at the top.
   Self-contained: does not depend on shared.css.
   ========================================================================== */

:root {
  --red: #c1272d;
  --red-dark: #9e1f24;
  --navy: #12235c;
  --navy-2: #1b3080;
  --link: #0b40b0;
  --visited: #6b2fb0;
  --ok: #157347;
  --ok-bg: #e6f4ec;
  --warn: #b25a00;
  --warn-bg: #fdf3e6;
  --bad: #b02a24;
  --bad-bg: #fdecea;
  --ink: #16181d;
  --ink-2: #464a52;
  --muted: #767b85;
  --line: #dfe2e8;
  --bg: #f4f6f9;
  --card: #ffffff;
  /* Noto Sans Devanagari must be in the stack or Hindi renders in a fallback
     that breaks conjuncts. No web font is downloaded — system only. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
          "Noto Sans Devanagari", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.5;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--visited); }
img { max-width: 100%; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 10px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 10px; z-index: 99; }

/* ---------- Masthead ---------- */
.masthead {
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  color: #fff; text-align: center; padding: 14px 10px 12px;
}
.masthead h1 { font-size: 28px; font-weight: 800; letter-spacing: .5px; }
.masthead .domain { font-size: 15px; font-weight: 600; opacity: .95; margin-top: 2px; }
@media (min-width: 700px) { .masthead h1 { font-size: 38px; } }

/* ---------- Nav ---------- */
.mainnav { background: var(--navy); position: sticky; top: 0; z-index: 40; }
.mainnav ul {
  list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mainnav ul::-webkit-scrollbar { display: none; }
.mainnav a {
  display: block; color: #fff; padding: 12px 14px; font-size: 14.5px;
  font-weight: 600; white-space: nowrap; min-height: 44px;
}
.mainnav a:hover, .mainnav a[aria-current="page"] { background: var(--navy-2); text-decoration: none; }

/* ---------- Tagline + language ---------- */
.tagline {
  background: #fff; border-bottom: 1px solid var(--line); padding: 10px;
  text-align: center; font-size: 14.5px; color: var(--ink-2);
}
.langbar { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.langbar button {
  font: inherit; font-size: 13px; font-weight: 700; padding: 6px 14px; min-height: 36px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 6px; cursor: pointer;
}
.langbar button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- WhatsApp ---------- */
.wa-wrap { text-align: center; padding: 14px 10px; background: #fff; border-bottom: 1px solid var(--line); }
.wa {
  display: inline-flex; align-items: center; gap: 9px; background: #25D366;
  color: #06331c; font-weight: 800; font-size: 16.5px; padding: 13px 26px;
  border-radius: 8px; min-height: 50px; border: 1px solid #1aa851;
  box-shadow: 0 2px 0 #1aa851;
}
.wa:hover { background: #1fbe5b; text-decoration: none; }
.wa-note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 7px; }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  display: flex; flex-direction: column; justify-content: center;
  padding: 12px 11px; border-radius: 7px; color: #fff !important;
  font-weight: 700; font-size: 14px; text-align: center; min-height: 74px;
  line-height: 1.35;
}
.tile:hover { text-decoration: none; filter: brightness(1.08); }
.tile span { display: block; font-weight: 600; font-size: 12px; opacity: .95; margin-top: 3px; }
.t1 { background: #c1272d; } .t2 { background: #d97706; }
.t3 { background: #b02a8f; } .t4 { background: #1e3a8a; }
.t5 { background: #6b7c1e; } .t6 { background: #1d6fb8; }
.t7 { background: #7a1e1e; } .t8 { background: #14663d; }

/* ---------- Panels ---------- */
.grid { display: grid; gap: 12px; }
@media (min-width: 860px) { .cols-2 { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.panel__head {
  background: var(--navy); color: #fff; padding: 10px 13px;
  font-size: 15.5px; font-weight: 700; display: flex; justify-content: space-between;
  align-items: center; gap: 8px;
}
.panel__head a { color: #cddaff; font-size: 12.5px; font-weight: 600; }
.panel__body { padding: 4px 0; }
.panel--red .panel__head { background: var(--red); }
.panel--green .panel__head { background: var(--ok); }

.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { border-bottom: 1px solid var(--line); }
.linklist li:last-child { border-bottom: 0; }
.linklist a { display: block; padding: 11px 13px; font-size: 14.5px; min-height: 44px; }
.linklist a:hover { background: #f7f9fc; text-decoration: none; }
.linklist .meta { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 400; }
.new {
  display: inline-block; background: var(--red); color: #fff; font-size: 9.5px;
  font-weight: 800; padding: 1px 5px; border-radius: 3px; vertical-align: middle;
  margin-left: 5px; letter-spacing: .4px;
}

/* ---------- Days-left badges ---------- */
.days {
  display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 7px;
  border-radius: 20px; background: #eef1f6; color: var(--ink-2);
}
.days--soon { background: var(--warn-bg); color: var(--warn); }
.days--urgent { background: var(--bad-bg); color: var(--bad); }
.days--closed { background: #eceef2; color: var(--muted); }

/* ---------- Eligibility checker ---------- */
.checker { background: #fff; border: 2px solid var(--ok); border-radius: 9px; margin: 12px 0; }
.checker__head { background: var(--ok); color: #fff; padding: 12px 14px; }
.checker__head h2 { font-size: 18px; }
.checker__head p { font-size: 13px; opacity: .95; margin-top: 3px; }
.checker__body { padding: 14px; }
.fields { display: grid; gap: 11px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .fields { grid-template-columns: 1fr 1fr; } }
.f label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 5px; }
.f input, .f select {
  width: 100%; font: inherit; font-size: 16px; padding: 11px;
  border: 1px solid #c3c8d2; border-radius: 6px; min-height: 46px; background: #fff;
}
.f input:focus, .f select:focus { outline: 2px solid var(--navy-2); outline-offset: 1px; }
.checks { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.checks label { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; }
.checks input { width: 19px; height: 19px; }
.btn-go {
  width: 100%; font: inherit; font-size: 17px; font-weight: 800; color: #fff;
  background: var(--red); border: 0; border-radius: 7px; padding: 14px;
  min-height: 52px; cursor: pointer; margin-top: 14px;
}
.btn-go:hover { background: var(--red-dark); }
.privacy { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 9px; }

/* ---------- Results ---------- */
.result-head { padding: 13px 14px; background: var(--ok-bg); border-bottom: 1px solid var(--line); }
.result-head h2 { font-size: 19px; color: #0c4a2c; }
.result-head b { font-size: 23px; }
.result-head p { color: #2f6b4a; margin-top: 3px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
table.data th, table.data td {
  padding: 10px 11px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th { background: #eef1f6; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
table.data td.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.v { display: inline-block; font-size: 12.5px; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.v--yes { background: var(--ok-bg); color: var(--ok); }
.v--maybe { background: var(--warn-bg); color: var(--warn); }
.v--no { background: var(--bad-bg); color: var(--bad); }
.why { margin-top: 6px; display: grid; gap: 3px; }
.why span { font-size: 12px; line-height: 1.45; padding-left: 15px; position: relative; color: var(--ink-2); }
.why span::before { position: absolute; left: 0; font-weight: 800; }
.why__true::before { content: "✓"; color: var(--ok); }
.why__false::before { content: "✕"; color: var(--bad); }
.why__unknown::before { content: "?"; color: var(--warn); }
.btn-apply {
  display: inline-block; background: var(--ok); color: #fff !important; font-weight: 700;
  font-size: 13px; padding: 8px 14px; border-radius: 6px; white-space: nowrap; min-height: 36px;
}
.btn-apply:hover { text-decoration: none; background: #106b3e; }

/* ---------- Ads: reserved height, always ---------- */
.ad {
  margin: 12px auto; display: flex; align-items: center; justify-content: center;
  background: #eef1f6; border: 1px dashed #c3c8d2; border-radius: 6px;
  color: #9aa0aa; font-size: 11.5px;
}
.ad--top { min-height: 100px; }
.ad--mid { min-height: 250px; }
.ad--foot { min-height: 100px; }
.ad-label {
  display: block; text-align: center; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #a7adb7; font-weight: 700; margin-top: 10px;
}

/* ---------- Footer ---------- */
.foot { background: var(--navy); color: #c3cfe8; margin-top: 18px; padding: 22px 0 16px; font-size: 14px; }
.foot a { color: #e4ebf8; }
.foot h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 9px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot .cols { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .foot .cols { grid-template-columns: repeat(4, 1fr); } }
.disclaimer {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15);
  font-size: 12.5px; color: #9db0d0; line-height: 1.6;
}

/* ---------- Sticky mobile WhatsApp bar ---------- */
.sticky {
  position: sticky; bottom: 0; z-index: 30; background: #fff;
  border-top: 1px solid var(--line); padding: 9px 10px;
  box-shadow: 0 -3px 12px rgba(0,0,0,.08);
}
@media (min-width: 860px) { .sticky { display: none; } }

.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.small { font-size: 13.5px; }
.center { text-align: center; }
.mt { margin-top: 12px; }

/* ==========================================================================
   Three-column bulleted link boards — Results | Admit Cards | Latest Jobs.
   The format this audience already scans by muscle memory: dark red header,
   underlined blue bullet links, dense. Kept deliberately close to the familiar
   pattern, with two fixes: real 44px tap targets, and it collapses to one
   column on a phone instead of forcing horizontal scroll.
   ========================================================================== */
.boards { display: grid; gap: 12px; margin: 12px 0; grid-template-columns: 1fr; }
@media (min-width: 700px) { .boards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .boards { grid-template-columns: repeat(3, 1fr); } }

.board {
  background: #fff; border: 2px solid var(--red-dark); border-radius: 4px;
  display: flex; flex-direction: column;
}
.board__head {
  background: var(--red-dark); color: #fff; text-align: center;
  font-size: 19px; font-weight: 800; padding: 9px 10px; letter-spacing: .2px;
}
.board__body { padding: 10px 10px 10px 6px; }
.bullets { margin: 0; padding-left: 20px; }
.bullets li { margin: 0 0 11px; font-size: 14.5px; line-height: 1.45; }
.bullets li:last-child { margin-bottom: 0; }
/* Underlined by default: in this layout the underline IS the affordance, and
   removing it makes the page read as plain text. */
.bullets a { text-decoration: underline; display: inline-block; padding: 2px 0; }
.bullets a:hover { color: var(--red-dark); }
.bullets .tag {
  display: inline-block; font-size: 11px; font-weight: 800; color: var(--bad);
  margin-left: 4px; text-decoration: none;
}
.board__more {
  margin-top: auto; text-align: center; border-top: 1px solid var(--line);
  padding: 10px; font-size: 14px; font-weight: 700;
}

/* ==========================================================================
   CONTENT LAYER
   The article/detail pages were originally written against shared.css. Rather
   than rewrite every page's markup, the classes those pages use are redefined
   here in the portal's visual language. One stylesheet for the whole site means
   there is no load-order fight between two competing :root blocks, and no page
   can drift visually because it forgot an import.
   ========================================================================== */

.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 12px; }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.card__head {
  background: #f3f5f9; border-bottom: 1px solid var(--line); padding: 11px 13px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card__title { font-size: 16px; font-weight: 700; margin: 0; }
.card__body { padding: 14px; }

/* ---------- Sections ---------- */
.section { padding: 22px 0; }
.section--tight { padding: 14px 0; }
.section__eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red-dark); margin-bottom: 6px;
}
.section__title { font-size: 22px; margin-bottom: 8px; font-weight: 800; }
.section__lede { font-size: 16px; color: var(--ink-2); max-width: 64ch; }

/* ---------- Layout helpers ---------- */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stack { display: grid; gap: 12px; }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  font-weight: 700; padding: 3px 10px; border-radius: 20px;
  background: #e9eefb; color: var(--navy); border: 1px solid #ccd8f5;
}
.pill--neutral { background: #eef1f6; color: var(--ink-2); border-color: var(--line); }
.pill--accent { background: var(--warn-bg); color: var(--warn); border-color: #f3d9b4; }
.pill--danger { background: var(--bad-bg); color: var(--bad); border-color: #f3c4c0; }
.pill--ok { background: var(--ok-bg); color: var(--ok); border-color: #bce3ce; }
.verdict {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 800; padding: 4px 10px; border-radius: 20px; white-space: nowrap;
  border: 1px solid transparent;
}
.verdict__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.verdict--eligible { background: var(--ok-bg); color: var(--ok); border-color: #bce3ce; }
.verdict--likely-eligible { background: var(--ok-bg); color: var(--ok); border: 1px dashed var(--ok); }
.verdict--not-eligible { background: var(--bad-bg); color: var(--bad); border-color: #f3c4c0; }
.verdict--likely-not { background: var(--bad-bg); color: var(--bad); border: 1px dashed var(--bad); }
.verdict--needs-info { background: var(--warn-bg); color: var(--warn); border-color: #f3d9b4; }
.verdict--needs-verify { background: #e9eefb; color: var(--navy); border-color: #ccd8f5; }
.verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ok); }
.verified--pending { color: var(--warn); }

/* ---------- Source citation ---------- */
.source {
  display: block; margin-top: 7px; padding: 9px 11px; background: #f7f9fc;
  border-left: 3px solid var(--navy-2); border-radius: 0 5px 5px 0;
  font-size: 13px; color: var(--ink-2);
}
.source__quote { font-style: italic; }
.source__meta { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ---------- Reason traces ---------- */
.reasons { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 8px; }
.reason { display: flex; gap: 9px; font-size: 14px; align-items: flex-start; }
.reason__icon {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: grid;
  place-items: center; font-size: 11px; font-weight: 800; color: #fff; margin-top: 1px;
}
.reason--pass .reason__icon { background: var(--ok); }
.reason--fail .reason__icon { background: var(--bad); }
.reason--unknown .reason__icon { background: var(--warn); }
.reason__text { color: var(--ink-2); }
.reason__text strong { color: var(--ink); }

/* ---------- Forms ---------- */
.field { display: block; margin-bottom: 14px; }
.field__label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.field__hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.field__req { color: var(--bad); }
.input, .select {
  width: 100%; font: inherit; font-size: 16px; padding: 11px; min-height: 46px;
  border: 1px solid #c3c8d2; border-radius: 6px; background: #fff; color: var(--ink);
}
.input:focus, .select:focus { outline: 2px solid var(--navy-2); outline-offset: 1px; }
.choice-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.choice {
  display: flex; align-items: center; gap: 9px; padding: 12px; min-height: 48px;
  border: 1px solid #c3c8d2; border-radius: 6px; background: #fff; cursor: pointer;
  font-size: 15px; font-weight: 500;
}
.choice input { width: 18px; height: 18px; flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--navy-2); background: #eef2fd; box-shadow: inset 0 0 0 1px var(--navy-2); }
.choice__sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 15px; font-weight: 700; padding: 11px 18px;
  min-height: 44px; border-radius: 6px; border: 1px solid transparent; cursor: pointer;
  text-align: center;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--navy); color: #fff !important; }
.btn--primary:hover { background: var(--navy-2); }
.btn--accent { background: var(--red); color: #fff !important; }
.btn--accent:hover { background: var(--red-dark); }
.btn--ghost { background: #fff; color: var(--navy) !important; border-color: #c3c8d2; }
.btn--ghost:hover { background: #f3f5f9; }
.btn--quiet { background: transparent; color: var(--ink-2) !important; }
.btn--sm { font-size: 13.5px; padding: 8px 13px; min-height: 38px; }
.btn--lg { font-size: 16.5px; padding: 14px 24px; min-height: 52px; }
.btn--block { width: 100%; }

/* ---------- Progress / chips / steps ---------- */
.progress { height: 6px; background: var(--line); border-radius: 20px; overflow: hidden; }
.progress__bar { height: 100%; background: var(--navy); border-radius: 20px; }
.progress--ok .progress__bar { background: var(--ok); }
.progress--warn .progress__bar { background: var(--warn); }
.chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; }
.chip {
  flex: 0 0 auto; font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 13px;
  border-radius: 20px; background: #fff; border: 1px solid #c3c8d2; color: var(--ink-2);
  min-height: 38px; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.steps { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 700; }

/* ---------- Runway / alerts / diff ---------- */
.runway { display: grid; gap: 9px; }
.runway__item {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid #c3c8d2; border-radius: 6px;
}
.runway__item--critical { border-left-color: var(--bad); }
.runway__item--soon { border-left-color: var(--warn); }
.runway__item--calm { border-left-color: var(--ok); }
.runway__count { flex: 0 0 auto; width: 50px; text-align: center; }
.runway__count b { display: block; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.runway__count span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; }
.runway__item--critical .runway__count b { color: var(--bad); }
.runway__item--soon .runway__count b { color: var(--warn); }
.runway__item--calm .runway__count b { color: var(--ok); }
.alert-item { display: flex; gap: 11px; padding: 13px; border-bottom: 1px solid var(--line); }
.alert-item:last-child { border-bottom: 0; }
.alert-item__icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; }
.alert-item--good .alert-item__icon { background: var(--ok-bg); }
.alert-item--bad .alert-item__icon { background: var(--bad-bg); }
.alert-item--info .alert-item__icon { background: #e9eefb; }
.alert-item__time { font-size: 12.5px; color: var(--muted); }
.diff { font-size: 14px; }
.diff__old { color: var(--bad); background: var(--bad-bg); padding: 1px 6px; border-radius: 4px; text-decoration: line-through; }
.diff__new { color: var(--ok); background: var(--ok-bg); padding: 1px 6px; border-radius: 4px; font-weight: 700; }

/* ---------- details/summary ---------- */
details.card > summary { cursor: pointer; font-weight: 700; padding: 13px 15px; }
details.card > summary::marker { color: var(--red-dark); }

/* ---------- Locked (unused now everything is free, kept for safety) ---------- */
.locked { position: relative; }
.locked__blur { filter: blur(3px); pointer-events: none; user-select: none; }
.locked__veil {
  position: absolute; inset: 0; border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.97) 60%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 9px; padding: 16px; text-align: center;
}

/* ---------- Utilities ---------- */
.strong { font-weight: 700; }
.hide-sm { display: none; }
@media (min-width: 700px) { .hide-sm { display: inline-flex; } }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 7px; } .mt-2 { margin-top: 14px; } .mt-3 { margin-top: 21px; }
.mb-1 { margin-bottom: 7px; } .mb-2 { margin-bottom: 14px; } .mb-3 { margin-bottom: 21px; }
.mock-banner { background: #2b1a08; color: #ffd9a8; font-size: 12.5px; padding: 6px 12px; text-align: center; font-weight: 700; }
.mock-banner a { color: #ffc078; }

/* Site name on inner pages. Visually identical to the homepage masthead h1, but
   NOT an <h1>: each page's single h1 belongs to that page's own topic, or the
   primary keyword gets diluted on every page of the site. */
.masthead .brand { font-size: 28px; font-weight: 800; letter-spacing: .5px; line-height: 1.25; }
@media (min-width: 700px) { .masthead .brand { font-size: 38px; } }

/* ==========================================================================
   Ad slots are HIDDEN until a publisher ID exists.
   An empty dashed box labelled "ADVERTISEMENT" makes a site look broken or
   unfinished — and to an AdSense reviewer it reads as placeholder content,
   which is a rejection reason in itself. The markup stays in place so nothing
   has to be rebuilt later: config.js adds `ads-on` to <html> the moment
   adsenseClient is set, and the slots appear.
   ========================================================================== */
.ad, .ad-label { display: none; }
html.ads-on .ad { display: flex; }
html.ads-on .ad-label { display: block; }

/* ==========================================================================
   BRAND LOGO — inline SVG, not an image file.
   Deliberate: an <img> would be an extra request and a layout-shift risk on a
   2G connection, and a raster logo blurs on the cheap high-DPI Android screens
   this audience uses. Inline SVG costs ~1 KB inside the already-gzipped HTML,
   is sharp at any size, and paints with the first byte.
   ========================================================================== */
.masthead { background: #fff; padding: 14px 12px 12px; border-bottom: 3px solid var(--navy); }
.brandlink {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; flex-wrap: nowrap;
}
.brandlink:hover { text-decoration: none; }
.logo-mark { flex: 0 0 auto; width: 46px; height: 46px; display: block; }
.logo-mark svg { width: 100%; height: 100%; display: block; }
@media (min-width: 700px) { .logo-mark { width: 66px; height: 66px; } }

.logo-word {
  display: grid; grid-template-columns: auto auto; align-items: baseline;
  gap: 0 6px; line-height: .96; font-weight: 800; letter-spacing: -.01em;
}
.logo-word .lw1, .logo-word .lw2, .logo-word .lw3 { font-size: 22px; }
@media (min-width: 700px) { .logo-word .lw1, .logo-word .lw2, .logo-word .lw3 { font-size: 30px; } }
.lw1 { color: #12235c; grid-column: 1; }
.lw2 { color: #F47216; grid-column: 1; }
.lw3 { color: #16A34A; grid-column: 1; }
.lw-dot {
  grid-column: 2; grid-row: 3; align-self: end; background: #F47216; color: #fff;
  font-size: 12px; font-weight: 800; padding: 2px 6px; border-radius: 4px;
}
@media (min-width: 700px) { .lw-dot { font-size: 15px; padding: 3px 8px; } }

.tagline-brand {
  text-align: center; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); font-weight: 600;
}
@media (min-width: 700px) { .tagline-brand { font-size: 14px; } }

/* The masthead is now white, so the nav needs its own top edge. */
.mainnav { border-top: 0; }

/* Homepage H1. Sits above the tiles, carries the primary keyword, and is styled
   modestly because the eligibility form — not the heading — is the thing users
   came to use. A page with no h1 is a real ranking loss; this is not decoration. */
.page-h1 {
  font-size: 18px; font-weight: 700; color: var(--ink); text-align: center;
  margin: 14px auto 0; max-width: 40ch; line-height: 1.35;
}
@media (min-width: 700px) { .page-h1 { font-size: 21px; } }