/* Sainik Desk — components, from the owner's FINAL design:
   split hero with image, four calculator cards, navy feature strip,
   topic tiles, update cards, audience cards — plus the inner-page
   calculator/table/steps in the same navy-orange language. */

/* ---------- hero — text left, image right ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.995) 40%, rgba(255,255,255,.88) 52%, rgba(255,255,255,.25) 68%, rgba(255,255,255,0) 80%),
    url('/assets/img/hero-banner-no-flag-20260802.jpg');
  background-position: center, right center;
  background-size: 100% 100%, auto 100%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
}
/* the hero rises up behind the floating header pill, and its own top
   padding pushes the text back down — so the pill floats over the photo
   instead of sitting glued to its edge (72px = header's flow height) */
@media (min-width: 44.01em) {
  .hero { margin-top: -72px; padding-top: 72px; }
}
.hero-grid {
  display: block;
  min-height: 490px;
  padding-top: 3.1rem;
  padding-bottom: 3.4rem;
}
.hero-grid > div:first-child { position: relative; z-index: 2; max-width: 39rem; }

/* entrance — the hero builds up line by line when the page opens.
   Pure CSS, so it needs no JS; reduced-motion in base.css switches it off. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes hdr-drop {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes hline-up {
  from { transform: translateY(112%); }
  to { transform: none; }
}
.hdr-in { animation: hdr-drop .5s ease-out both; }

/* the headline rises out of an invisible mask, one line after the other */
.hero h1 .hline { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .hline > span { display: inline-block; animation: hline-up .75s cubic-bezier(.2, .7, .2, 1) both; }
.hero h1 .hline:nth-child(2) > span { animation-delay: .16s; }

.hero .lede { animation: hero-rise .65s ease-out .4s both; }
.hero .hero-actions { animation: hero-rise .65s ease-out .55s both; }
.hero .hero-trust { animation: hero-rise .65s ease-out .7s both; }
.hero-media { animation: hero-rise .8s ease-out .5s both; }

.hero h1 { color: var(--navy); font-size: 2.1rem; line-height: 1.25; margin: 0 0 .6em; }
@media (min-width: 52em) { .hero h1 { font-size: 2.6rem; } }
.hero .lede { color: #39465B; font-size: 1.0625rem; line-height: 1.7; max-width: 35rem; margin-bottom: 1.45rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.4rem; }
.hero-trust { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; color: #4A5870; font-size: .9375rem; font-weight: 600; }
.hero-trust b { color: var(--navy); font-weight: 600; }
/* the separator dot travels with its item — it can never sit alone on a line */
.hero-trust b + b::before { content: "•"; color: var(--orange); margin-right: .9rem; }

/* Responsive photo panel. */
.hero-media {
  display: none;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(10, 20, 38, .16));
  pointer-events: none;
}

/* ---------- calculator cards (four) ---------- */

.calcs-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none;
  padding: 0; margin: 0;
}
.calcs-grid > li { display: flex; }
.ccard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.25rem 1.2rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  width: 100%;
}
a.ccard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--orange); }
.ccard .icon-slot { width: 64px; height: 64px; border-radius: 50%; }
.ccard h3 { margin: 0; font-size: 1.0625rem; color: var(--navy); line-height: 1.4; }
.ccard p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.ccard .go { color: var(--orange); font-weight: 700; font-size: 1.2rem; margin-top: auto; padding-top: .2rem; }
.ccard .tag { position: absolute; top: .7rem; right: .7rem; }
div.ccard { opacity: .88; }

/* ---------- navy feature strip ---------- */

.strip {
  background:
    radial-gradient(circle at 8% 0%, rgba(244, 123, 32, .16), transparent 17rem),
    linear-gradient(135deg, #101D38 0%, var(--navy-deep) 60%, #0D1A33 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  color: #D7DFEE;
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: .9rem;
  margin: 2.25rem 0 0;
  box-shadow: 0 14px 35px rgba(20, 33, 61, .16);
}
.strip .s-item {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  min-height: 130px;
  padding: 1.15rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.strip .s-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), #FFB04A);
}
.strip .s-item:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.075);
  border-color: rgba(244,123,32,.45);
}
.strip .icon-slot {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: #FFF9F3;
  background-size: 84%;
  border: 1px solid rgba(244,123,32,.75);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .22), inset 0 0 0 3px rgba(244,123,32,.08);
}
.strip b { display: block; color: #fff; font-size: 1rem; line-height: 1.35; margin: .05rem 0 .38rem; }
.strip p { margin: 0; color: #BFCBE0; font-size: .855rem; line-height: 1.55; }

@media (max-width: 62em) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calcs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 38em) {
  .strip { grid-template-columns: 1fr; padding: .75rem; }
  .strip .s-item { min-height: auto; }
}

/* ---------- compact mobile layouts ---------- */

@media (max-width: 44em) {
  .hero {
    background-image: none;
  }
  .hero-grid { gap: 1rem; padding-top: 1.35rem; padding-bottom: 0; min-height: 0; }
  .hero h1 .hline { overflow: visible; }
  .hero h1 { font-size: clamp(1.7rem, 7.6vw, 2rem); line-height: 1.18; margin-bottom: .7rem; }
  .hero .lede { font-size: .96rem; line-height: 1.58; margin-bottom: 1.05rem; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust { align-items: flex-start; gap: .35rem .65rem; font-size: .78rem; margin-bottom: 0; }
  /* the photo runs edge to edge and sits taller — no white gutter around it */
  .hero-media {
    display: block;
    min-height: 220px;
    aspect-ratio: 1.65 / 1;
    margin: 1rem -1rem 0;
    border-radius: 0;
    background: url('/assets/img/hero-banner-no-flag-20260802.jpg') 62% center / cover no-repeat;
    box-shadow: 0 10px 28px rgba(20, 33, 61, .16);
  }
  .calcs-grid { grid-template-columns: 1fr; }
  .ccard { padding: 1.15rem 1rem; }

  .strip { margin-top: 1.5rem; }
  .strip .s-item { grid-template-columns: 48px minmax(0, 1fr); padding: 1rem .9rem; }
  .strip .icon-slot { width: 48px; height: 48px; }

  .topics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .topic { padding: 1rem .6rem .9rem; }
  .topic .icon-slot { width: 48px; height: 48px; }
  .topic b { font-size: .9rem; line-height: 1.3; }
  .topic small { font-size: .75rem; line-height: 1.35; }

  .updates-grid { grid-template-columns: 1fr; }
  .ucard { gap: .8rem; padding: .9rem; }
  .ucard .u-thumb { width: 72px; height: 72px; }
  .ucard .u-top { align-items: flex-start; flex-wrap: wrap; }

  .aud-grid { grid-template-columns: 1fr; }
  .aud { gap: .8rem; padding: 1rem; }
  .aud .icon-slot { width: 50px; height: 50px; }

  .btn {
    min-height: 44px;
    padding: .55rem 1.15rem;
    font-size: .95rem;
    box-shadow: 0 3px 10px rgba(229, 106, 0, .22);
  }
  .btn-outline { box-shadow: 0 2px 8px rgba(20, 33, 61, .07); }
  .calc { padding: 1rem; margin: 1.25rem 0; }
  input[type="number"], input[type="text"], input[type="email"], input[type="search"], select, textarea { max-width: none; }
  .result-card { padding: .95rem 1rem; }
  .result-card .figure { font-size: 1.65rem; }
  .table-wrap { margin-left: -.15rem; margin-right: -.15rem; }
}

/* ---------- topic tiles ---------- */

.topics-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  list-style: none;
  padding: 0; margin: 0;
}
.topic {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.3rem 1rem 1.1rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  height: 100%;
}
a.topic:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--navy); }
.topic .icon-slot { width: 52px; height: 52px; border-radius: 12px; }
.topic b { color: var(--navy); font-size: .9875rem; }
.topic small { color: var(--muted); font-size: .8125rem; }
.topic .go { color: var(--orange); font-weight: 700; font-size: .875rem; margin-top: auto; padding-top: .3rem; }
.topic .tag { position: absolute; top: .6rem; right: .6rem; }

/* ---------- update cards ---------- */

.updates-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  padding: 0; margin: 0;
}
.ucard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.ucard > div { min-width: 0; flex: 1; }
.ucard .u-thumb {
  width: 86px; height: 86px;
  border-radius: var(--radius-s);
  flex: none;
  display: block;
  object-fit: cover;
}
.ucard .u-top { display: flex; justify-content: space-between; align-items: center; gap: .3rem .6rem; margin-bottom: .3rem; flex-wrap: wrap; }
.ucard .u-date { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.ucard b { display: block; color: var(--navy); line-height: 1.45; margin-bottom: .25rem; }
.ucard p { margin: 0 0 .4rem; color: var(--muted); font-size: .875rem; line-height: 1.55; }
.ucard .more { color: var(--orange); font-weight: 700; font-size: .9rem; text-decoration: none; }
.ucard .more:hover { text-decoration: underline; }
@media (max-width: 52em) {
  .updates-grid { grid-template-columns: 1fr; }
}
@media (max-width: 30em) {
  .ucard { display: grid; grid-template-columns: 64px minmax(0,1fr); }
  .ucard .u-thumb { width: 64px; height: 64px; }
  .ucard .u-top { display: grid; justify-items: start; }
}

.tag {
  font-size: .75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .18rem .6rem;
  white-space: nowrap;
}
.tag.policy { background: var(--navy-tint); color: var(--navy); }
.tag.update { background: var(--orange-tint); color: #A24E08; }
.tag.plan   { background: var(--plan-bg); color: var(--muted); }
.tag.soon   { background: var(--soon-bg); color: var(--soon); }
.tag.live   { background: var(--tile-live); color: var(--live); }

.view-all {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--orange);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .9rem;
}
span.view-all { color: var(--muted); border-color: var(--border); cursor: default; }

/* ---------- homepage FAQ ---------- */

.faq-list {
  display: grid;
  gap: .75rem;
  max-width: 52rem;
  margin: 0 auto;
}
.faq-list details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.faq-list summary {
  position: relative;
  padding: 1rem 3rem 1rem 1.15rem;
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color .18s ease, background-color .18s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  position: absolute;
  right: 1.15rem;
  top: 50%;
  color: var(--orange);
  font-size: 1.5rem;
  line-height: 1;
  transform: translateY(-50%);
}
.faq-list details[open] summary { color: var(--orange); background: var(--orange-tint); }
.faq-list details[open] summary::after { content: '−'; }
.faq-list summary:hover { background: var(--navy-tint); }
.faq-list details p { margin: 0; padding: 0 1.15rem 1rem; color: var(--muted); line-height: 1.65; }
.faq-list details p a { font-weight: 700; }

/* ---------- audience cards ---------- */

.aud-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  padding: 0; margin: 0;
}
.aud {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.aud .icon-slot { width: 58px; height: 58px; border-radius: 12px; }
.aud b { display: block; color: var(--orange); font-size: 1.0625rem; margin-bottom: .3rem; }
.aud p { margin: 0 0 .4rem; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.aud .more { color: var(--orange); font-weight: 700; font-size: .9rem; text-decoration: none; }
.aud .more:hover { text-decoration: underline; }
.aud .more.soon-link { color: var(--muted); cursor: default; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 52px;
  justify-content: center;
  background: linear-gradient(180deg, var(--orange-btn) 0%, #C95600 100%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  padding: 0 2rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(229, 106, 0, .28);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover {
  filter: brightness(.94);
  color: #fff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 26px rgba(229, 106, 0, .4);
}
.btn:active { transform: translateY(0) scale(.99); box-shadow: 0 4px 12px rgba(229, 106, 0, .25); }
.btn .icon-slot { width: 22px; height: 22px; border-radius: 6px; border-color: rgba(255,255,255,.5); background-color: transparent; }
.btn-outline { background: rgba(255,255,255,.9); color: var(--navy); border: 1.5px solid rgba(28,46,84,.22); box-shadow: 0 3px 12px rgba(20,33,61,.08); }
.btn-outline:hover { background: var(--navy-tint); color: var(--navy); border-color: rgba(28,46,84,.5); box-shadow: 0 7px 18px rgba(20,33,61,.13); }
.btn-sm { min-height: 42px; padding: 0 1.2rem; font-size: .9375rem; }

/* ---------- search (header drawer) ---------- */

.search {
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 4px 4px 4px 14px;
  display: flex; gap: .6rem; align-items: center;
  position: relative;
  max-width: 34rem;
}
.search input { flex: 1; min-width: 0; border: 0; font: inherit; color: var(--ink); background: transparent; padding: .55rem 0; }
.search input:focus { outline: none; }
.search:focus-within { outline: 3px solid var(--orange); outline-offset: 2px; }
.search button {
  border: 0;
  background: var(--orange-btn);
  color: #fff;
  font: inherit;
  font-weight: 700;
  border-radius: 8px;
  padding: .65rem 1.1rem;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.search button:hover { background: #C95D00; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(229, 106, 0, .3); }
.search-results {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-lift);
  list-style: none;
  margin: 0; padding: .4rem;
  z-index: 55;
}
.search-results a { display: block; padding: .6rem .75rem; border-radius: 8px; text-decoration: none; color: var(--ink); }
.search-results a:hover, .search-results a:focus { background: var(--navy-tint); }
.search-results .r-sec { display: block; font-size: .8125rem; color: var(--muted); }
.search-results .none { padding: .6rem .75rem; color: var(--muted); margin: 0; }

/* ---------- inner pages: calculator ---------- */

.calc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin: 1.75rem 0;
  box-shadow: var(--shadow);
}
.calc h2 { margin-top: 0; color: var(--navy); }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; margin-bottom: .35rem; color: var(--navy); }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .875rem; }

input[type="number"], input[type="text"], input[type="email"], input[type="search"], select, textarea {
  font: inherit;                 /* ≥16px — below that, phones zoom on focus */
  width: 100%;
  max-width: 22rem;
  padding: .65rem .8rem;
  border: 1.5px solid var(--muted-2);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
}
.search input[type="search"] { border: 0; max-width: none; }
input:focus, select:focus, textarea:focus { border-color: var(--navy); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-weight: 700; margin-top: .3rem; }

.calc-result { border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 1.25rem; }
.result-card {
  background: var(--navy-tint);
  border: 1px solid var(--border);
  border-left: 5px solid var(--navy);
  border-radius: var(--radius);
  padding: 1.05rem 1.2rem;
  margin-bottom: .85rem;
}
.js .result-card { animation: pop .35s ease both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } }
.result-card .which { font-weight: 700; margin-bottom: .45rem; color: var(--navy); }
.result-card .figure {
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--navy);
}
.result-card .duration { color: var(--muted); }
.result-note { color: var(--muted); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; margin: 1rem 0; border-radius: var(--radius); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
caption { text-align: right; caption-side: top; padding: .45rem .6rem; color: var(--muted); font-size: .875rem; background: var(--surface); }
th, td { border: 1px solid var(--border); padding: .65rem .8rem; text-align: right; vertical-align: top; }
thead th { background: var(--navy); color: #fff; font-weight: 700; border-color: var(--navy-2); }
tbody th { background: var(--navy-tint); font-weight: 700; }
tbody tr:nth-child(even) td { background: #F8FAFC; }

/* ---------- callouts / sources / disclaimer ---------- */

.callout {
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.25rem 0;
  border: 1px solid var(--border);
  border-left: 5px solid var(--navy);
  background: var(--surface);
  max-width: var(--measure);
}
.callout .callout-label { font-weight: 700; display: block; margin-bottom: .3rem; }
.callout-warn, .callout-stuck { background: var(--soon-bg); border-left-color: var(--orange); border-color: #F0DFC2; }
.callout-warn { color: var(--soon); }
.callout-stuck .callout-label { color: var(--soon); }
.callout-info { background: var(--navy-tint); }

.sources, .page-disclaimer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
  box-shadow: var(--shadow);
}
.sources { border-left: 5px solid var(--navy); }
.page-disclaimer { border-left: 5px solid var(--orange); }
.sources h2, .page-disclaimer h2 { margin-top: 0; font-size: 1.125rem; color: var(--navy); }
.sources ul { margin-bottom: 0; }
.page-disclaimer p:last-child { margin-bottom: 0; }

/* ---------- changelog / cards / steps (inner pages) ---------- */

.changelog { list-style: none; padding: 0; margin: 1.25rem 0 0; max-width: var(--measure); }
.changelog li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--orange);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: .7rem;
  box-shadow: var(--shadow);
}
.changelog .date {
  display: inline-block;
  background: var(--orange-tint);
  color: #A24E08;
  font-weight: 700;
  font-size: .875rem;
  padding: .15rem .65rem;
  border-radius: 999px;
  margin-bottom: .35rem;
}

.card-grid { display: grid; gap: .9rem; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 1.25rem 0 0; }
@media (min-width: 40em) { .card-grid { grid-template-columns: 1fr 1fr; } }
.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  min-height: 88px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--orange); }
.card .card-q { font-weight: 700; display: block; margin-bottom: .3rem; color: var(--navy); }
.card .card-a { color: var(--orange); font-weight: 700; }

.steps { counter-reset: step; list-style: none; padding: 0; max-width: var(--measure); }
.steps > li { counter-increment: step; border-left: 3px solid var(--navy); padding: 0 0 1.5rem 1.4rem; position: relative; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: -1.05rem; top: .1rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  display: grid; place-items: center;
}
.steps > li h3 { margin-top: .25rem; }
.steps > li h3::before { content: "Step " counter(step) " — "; color: var(--navy); }
[lang="hi"] .steps > li::before { content: counter(step, devanagari); }
[lang="hi"] .steps > li h3::before { content: "चरण " counter(step, devanagari) " — "; }

/* timeline (Hindi pages still use it) */
.tl { border-left: 2px solid var(--border); margin-left: 7px; padding-left: 20px; }
.tl .e { position: relative; padding-bottom: 1.4rem; }
.tl .e::before { content: ''; position: absolute; left: -26.5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.tl .d { font-size: .8125rem; font-weight: 700; color: var(--navy); }
.tl .t { font-size: .9995rem; line-height: 1.55; margin-top: 2px; }

.noscript-note { max-width: var(--measure); }

/* ---------- reveal (only when JS runs; reduced-motion kills it in base) ---------- */

.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- guide visuals ----------
   Honest illustrations, never fake screenshots: flow diagrams, a formula
   strip, the 70/30 bar, and a labeled document sketch. */

.flow {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 2.1rem;
  padding: 0;
  margin: 1.6rem 0;
}
.flow > li {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem .85rem .95rem;
  text-align: center;
}
.flow > li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -1.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4rem;
  text-align: center;
  color: var(--orange-btn);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
}
.flow .n {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--orange-btn);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: .5rem;
}
.flow svg { display: block; margin: 0 auto .5rem; color: var(--navy); }
.flow b { display: block; color: var(--navy); font-size: .95rem; line-height: 1.35; margin: 0 0 .3rem; }
.flow small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.flow-note { margin: -0.6rem 0 1.6rem; color: var(--muted); font-size: .875rem; }

@media (max-width: 52em) {
  .flow { flex-direction: column; gap: 1.9rem; }
  .flow > li:not(:last-child)::after {
    content: "↓";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1.75rem;
    transform: translateX(-50%);
  }
}

/* the formula strip — the whole calculation in one line of boxes */
.formula {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem .6rem;
  background: var(--navy-tint);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin: 1.6rem 0;
  font-weight: 700;
  color: var(--navy);
}
.formula .f-box {
  background: #fff;
  border: 1.5px solid rgba(28, 46, 84, .45);
  border-radius: 10px;
  padding: .45rem .75rem;
  font-size: .95rem;
  text-align: center;
}
.formula .f-box small { display: block; font-weight: 600; color: var(--muted); font-size: .75rem; }
.formula .f-op { color: var(--orange-btn); font-size: 1.25rem; font-weight: 800; flex: none; }
.formula .f-res {
  background: linear-gradient(180deg, var(--orange-btn) 0%, #C95600 100%);
  border: 0;
  color: #fff;
  border-radius: 10px;
  padding: .55rem .85rem;
  font-size: .95rem;
  text-align: center;
}
.formula .f-res small { display: block; font-weight: 600; color: #FFE1C4; font-size: .75rem; }

/* the 70/30 split bar */
.splitbar { margin: 1.6rem 0; }
.splitbar .bar {
  display: flex;
  height: 58px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  color: #fff;
  font-weight: 800;
  text-align: center;
}
.splitbar .in { flex: 7; background: linear-gradient(180deg, var(--navy-2), var(--navy)); display: grid; place-items: center; }
.splitbar .sn { flex: 3; background: linear-gradient(180deg, #FF9840, var(--orange-btn)); display: grid; place-items: center; }
.splitbar .bar small { display: block; font-weight: 600; font-size: .75rem; opacity: .85; }
.splitbar > small { display: block; color: var(--muted); margin-top: .45rem; font-size: .8125rem; }

/* labeled document sketch — clearly a sketch, never a reproduction */
.doc-sketch {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-width: 34rem;
  padding: 1.15rem 1.2rem 1.25rem;
  margin: 1.6rem 0 .4rem;
}
.doc-sketch .d-head {
  text-align: center;
  font-weight: 800;
  color: var(--navy);
  font-size: .9rem;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--navy);
  padding-bottom: .5rem;
  margin-bottom: .9rem;
}
.doc-sketch .d-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .42rem 0;
}
.doc-sketch .d-line { flex: 1; height: 9px; border-radius: 5px; background: #E8ECF3; }
.doc-sketch .d-line.w2 { flex: .6; }
.doc-sketch .d-tag {
  flex: none;
  background: var(--orange-tint);
  border: 1px solid rgba(244, 123, 32, .65);
  color: #96500A;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .12rem .6rem;
  white-space: nowrap;
}
.doc-sketch + .flow-note { margin-top: .2rem; }

/* real screenshots of public portals — dated in the caption */
.shot { margin: 1.6rem 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.shot figcaption { color: var(--muted); font-size: .8125rem; line-height: 1.5; margin-top: .55rem; }

/* real portal screenshot with numbered, responsive callouts */
.visual-guide { margin: 1.6rem 0 2rem; }
.screen-wrap { position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.screen-wrap img { display: block; width: 100%; height: auto; }
.screen-pin { position: absolute; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--orange-btn); color: #fff; border: 3px solid #fff; box-shadow: 0 2px 9px rgba(16,29,56,.35); font-weight: 800; line-height: 1; transform: translate(-50%,-50%); }
.screen-pin.p1 { left: 94%; top: 12%; }
.screen-pin.p2 { left: 20%; top: 25%; }
.screen-pin.p3 { left: 79%; top: 88%; }
.screen-wrap.afd .screen-pin.p1 { left: 22%; top: 13%; }
.screen-wrap.afd .screen-pin.p2 { left: 79%; top: 71%; }
.screen-wrap.jp .screen-pin.p1 { left: 59%; top: 12%; }
.screen-wrap.jp .screen-pin.p2 { left: 66%; top: 12%; }
.screen-wrap.jp .screen-pin.p3 { left: 92%; top: 12%; }
.screen-steps { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .65rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
.screen-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .55rem; align-items: start; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.screen-steps .n { display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--orange-btn); color:#fff; font-weight:800; }
.screen-steps strong { color: var(--navy); }
@media(max-width:42em){.screen-pin{width:1.55rem;height:1.55rem;font-size:.78rem;border-width:2px}.screen-steps{grid-template-columns:1fr}}

/* multi-screen, privacy-redacted portal walkthroughs */
.shot-steps { list-style:none; padding:0; margin:1.6rem 0 2rem; display:grid; gap:1.35rem; }
.shot-step { background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.shot-step figure { margin:0; }
.shot-step img { display:block; width:100%; height:auto; background:#eef1f5; }
.shot-step-body { display:grid; grid-template-columns:2.6rem 1fr; gap:.8rem; padding:1rem 1.1rem 1.15rem; align-items:start; }
.shot-step-no { display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:50%; background:var(--orange-btn); color:#fff; font-weight:800; }
.shot-step h2 { margin:0 0 .28rem; font-size:1.15rem; }
.shot-step p { margin:0; color:var(--muted); line-height:1.6; }
.privacy-caption { margin:.45rem 0 0; color:var(--muted); font-size:.78rem; }
@media(min-width:66em){.shot-steps{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.shot-step.wide{grid-column:1/-1}}

/* privacy-first ATS resume builder */
.resume-builder { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:1.5rem; align-items:start; margin:1.5rem 0 3rem; }
.resume-form-panel,.resume-preview { background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:1.25rem; }
.resume-form-panel h2,.resume-preview h2 { margin-top:0; }
.resume-form-panel textarea { width:100%; min-height:7rem; resize:vertical; }
.resume-preview { position:sticky; top:1rem; background:#f5f6f8; }
.resume-sheet { min-height:38rem; padding:1.4rem; background:#fff; color:#161b24; font-family:Arial,sans-serif; font-size:.9rem; line-height:1.45; box-shadow:0 2px 12px rgba(16,27,50,.09); }
.resume-sheet header { text-align:center; border-bottom:2px solid #222; padding-bottom:.7rem; }
.resume-sheet header h2 { color:#111; font-size:1.65rem; margin:0; text-transform:uppercase; }
.resume-sheet header h3 { border:0; margin:.45rem 0 0; padding:0; font-size:1rem; }
.resume-sheet header p { margin:.25rem 0; overflow-wrap:anywhere; }
.resume-sheet section { margin:1rem 0 0; }
.resume-sheet section h3 { font-size:.88rem; letter-spacing:.06em; border-bottom:1px solid #555; padding-bottom:.18rem; margin:0 0 .35rem; color:#111; }
.resume-sheet p,.resume-sheet ul { margin:.25rem 0; }
.resume-sheet ul { padding-left:1.15rem; }
#resume-warnings .callout { margin-bottom:.4rem; }
.resume-warn-list { margin:.2rem 0 1rem; padding-left:1.2rem; color:#7a4a00; font-size:.9rem; }
.resume-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 0; }
.resume-actions .btn { font-size:.88rem; padding:.65rem .9rem; }
@media(max-width:58em){.resume-builder{grid-template-columns:1fr}.resume-preview{position:static}}
@media print { body *{visibility:hidden}.resume-preview,.resume-preview *{visibility:visible}.resume-preview{position:absolute;inset:0;padding:0;border:0;box-shadow:none;background:#fff}.resume-preview>h2,.resume-actions,#resume-message{display:none!important}.resume-sheet{box-shadow:none;padding:0;min-height:0}@page{margin:14mm} }

/* Shared Back + Home controls */
.page-nav-actions{position:fixed;left:max(.75rem,env(safe-area-inset-left));bottom:max(.75rem,env(safe-area-inset-bottom));z-index:90;display:flex;gap:.45rem;padding:.35rem;background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:999px;box-shadow:0 6px 24px rgba(16,27,50,.18)}
.page-nav-actions button,.page-nav-actions a{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:.65rem 1rem;font:inherit;font-weight:750;text-decoration:none;cursor:pointer}
.page-nav-back{background:#eef2f6;color:var(--navy)}
.page-nav-home{background:var(--navy);color:#fff}
.page-nav-actions button:hover,.page-nav-actions a:hover{filter:brightness(.94)}
.page-nav-actions button:focus-visible,.page-nav-actions a:focus-visible{outline:3px solid var(--orange-btn);outline-offset:2px}
@media(max-width:30em){.page-nav-actions{right:.75rem;left:.75rem}.page-nav-actions button,.page-nav-actions a{flex:1;padding:.6rem .7rem}}
@media print{.page-nav-actions{display:none!important}}

/* Sainik Sahayak — site-aware local assistant */
.sahayak{position:fixed;right:max(.8rem,env(safe-area-inset-right));bottom:max(.8rem,env(safe-area-inset-bottom));z-index:100;font-size:.92rem}
.sahayak-launch{display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:.65rem 1rem;border:0;border-radius:999px;background:var(--orange-btn);color:#fff;box-shadow:0 7px 26px rgba(16,27,50,.24);cursor:pointer}
.sahayak-launch img{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;object-position:center 25%;border:2px solid rgba(255,255,255,.9)}
.sahayak-panel{position:absolute;right:0;bottom:3.7rem;width:min(24rem,calc(100vw - 1.6rem));max-height:min(38rem,calc(100vh - 6rem));overflow:auto;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 42px rgba(16,27,50,.25)}
.sahayak-panel header{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1rem;background:var(--navy);color:#fff;border-radius:15px 15px 0 0}
.sahayak-panel header>span{display:flex;align-items:center;gap:.6rem}.sahayak-panel header img{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;object-position:center 25%;border:2px solid rgba(255,255,255,.85)}
.sahayak-close{width:2rem;height:2rem;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.35rem;cursor:pointer}
.sahayak-body{padding:1rem}.sahayak-message{padding:.8rem;background:#eef6f8;border-radius:12px;line-height:1.55}
.sahayak-listen{margin:.55rem 0;border:0;background:transparent;color:var(--navy);font-weight:700;cursor:pointer}
.sahayak-quick{display:flex;flex-wrap:wrap;gap:.4rem;margin:.35rem 0 .8rem}.sahayak-quick button{border:1px solid var(--border);border-radius:999px;background:#fff;padding:.4rem .65rem;cursor:pointer}
.sahayak-quick a{display:inline-flex;align-items:center;border:1px solid #0b7a3e;border-radius:999px;background:#0b7a3e;color:#fff;padding:.4rem .65rem;font-weight:700;text-decoration:none}
.sahayak-results p{margin:.55rem 0}.sahayak-results ul{list-style:none;padding:0;margin:.45rem 0}.sahayak-results li{padding:.55rem 0;border-top:1px solid var(--border)}.sahayak-results li a{display:block;font-weight:750}.sahayak-results li span{display:block;color:var(--muted);font-size:.78rem}
.sahayak-form{display:flex;gap:.45rem;padding:.8rem;border-top:1px solid var(--border)}.sahayak-form input{min-width:0;flex:1}.sahayak-form button{border:0;border-radius:8px;padding:0 .85rem;background:var(--navy);color:#fff;font-weight:750;cursor:pointer}
.sahayak-panel>small{display:block;padding:0 .85rem .75rem;color:var(--muted)}
.sahayak button:focus-visible,.sahayak a:focus-visible,.sahayak input:focus-visible{outline:3px solid var(--orange-btn);outline-offset:2px}
@media(max-width:62em){.sahayak{left:auto;right:.75rem;bottom:.75rem}.sahayak-launch{width:3.35rem;height:3.35rem;min-height:0;padding:.35rem;border-radius:50%}.sahayak-launch b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.sahayak-panel{position:fixed;left:.75rem;right:.75rem;bottom:4.75rem;width:auto;max-height:calc(100vh - 6rem)}}
@media print{.sahayak{display:none!important}}

/* Site-wide WhatsApp Channel invitation */
.channel-strip{display:flex;align-items:center;justify-content:center;gap:.8rem 1.2rem;padding:.55rem 1rem;background:#eaf8f0;border-bottom:1px solid #b9e4c9;color:#164d2e;font-size:.88rem;text-align:center}
.channel-strip a{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:none;min-height:2.6rem;padding:.52rem 1rem;border:2px solid #08783e;border-radius:999px;background:#0b7a3e;color:#fff;font-weight:800;line-height:1.2;text-decoration:none;box-shadow:0 3px 10px rgba(11,122,62,.24);transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease}
.channel-strip a>span:last-child{font-size:.9rem;color:#fff}
.channel-strip-icon{display:inline-block;width:1.25rem;height:1.25rem;flex:0 0 1.25rem;background:url('/assets/img/icons/whatsapp.svg') center/contain no-repeat;filter:brightness(0) invert(1)}
.channel-strip a:hover{background:#075f30}
.channel-strip a:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(11,122,62,.3)}
.channel-strip a:focus-visible{outline:3px solid var(--orange-btn);outline-offset:2px}
@media(max-width:38em){.channel-strip{align-items:stretch;flex-direction:column;gap:.45rem;padding:.65rem .8rem}.channel-strip a{width:100%;min-height:2.85rem}}
@media print{.channel-strip{display:none!important}}

/* WhatsApp CTA remains green even when used with the generic outline button. */
a[href*="whatsapp.com/channel"]{--wa-green:#0b7a3e}
.hero-actions a[href*="whatsapp.com/channel"]{background:var(--wa-green);border-color:var(--wa-green);color:#fff;box-shadow:0 4px 14px rgba(11,122,62,.25)}
.hero-actions a[href*="whatsapp.com/channel"]:hover{background:#075f30;border-color:#075f30;color:#fff}

/* Contextual lead image on long-form guides */
.article-lead-visual{display:grid;grid-template-columns:clamp(110px,16vw,180px) minmax(0,1fr);align-items:center;gap:1rem;margin:1.15rem 0 1.6rem;padding:1rem 1.2rem;border:1px solid var(--border);border-radius:16px;background:linear-gradient(135deg,#f5f8fb,#fff8ef);box-shadow:var(--shadow)}
.article-lead-visual img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:14px}
.article-lead-visual figcaption{color:var(--navy);font-weight:750;line-height:1.55}
@media(max-width:34em){.article-lead-visual{grid-template-columns:86px minmax(0,1fr);padding:.8rem}.article-lead-visual figcaption{font-size:.84rem}}
@media print{.article-lead-visual{box-shadow:none;break-inside:avoid}}

/* In-page task shortcuts for long service guides. */
.topic-jumps{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0 1.5rem;padding:.8rem;border:1px solid var(--border);border-radius:14px;background:#f6f8fb}
.topic-jumps a{display:inline-flex;align-items:center;min-height:2.6rem;padding:.55rem .85rem;border:1px solid #cbd4df;border-radius:999px;background:#fff;color:var(--navy);font-weight:750;text-decoration:none}
.topic-jumps a:hover{border-color:var(--orange-btn);color:#b64a00}
.topic-jumps a:focus-visible{outline:3px solid var(--orange-btn);outline-offset:2px}
@media(max-width:34em){.topic-jumps{display:grid;grid-template-columns:1fr 1fr}.topic-jumps a{justify-content:center;text-align:center;font-size:.86rem}}

/* ---------- "ज़रूरी विषय" par aane wala dhun-card ---------- */
/* Neeche se aata hai, tirange ki ek patli lakeer ke saath. Band karne par
   gayab. Reduced-motion me bina sarke aata hai. */
.anthem{position:fixed;left:50%;bottom:1.1rem;transform:translate(-50%,120%);z-index:60;width:min(26rem,calc(100vw - 1.6rem));background:var(--navy);color:#EAF0FA;border-radius:16px;box-shadow:0 10px 34px rgba(9,15,30,.45);overflow:hidden;opacity:0;transition:transform .32s cubic-bezier(.2,.8,.25,1),opacity .32s ease}
.anthem.is-in{transform:translate(-50%,0);opacity:1}
.anthem::before{content:"";display:block;height:3px;background:linear-gradient(90deg,#FF9933 0 33.3%,#FFFFFF 33.3% 66.6%,#138808 66.6% 100%)}
.anthem-in{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem}
.anthem-txt{min-width:0;flex:1}
.anthem-txt b{display:block;font-size:.98rem;line-height:1.25;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anthem-txt small{display:block;font-size:.78rem;color:#A9BAD6;margin-top:.1rem}
.anthem button{font-family:inherit;font-weight:700;cursor:pointer;border-radius:999px;border:0;transition:background-color .16s ease,color .16s ease,transform .16s ease}
.anthem-play{flex:none;min-height:2.4rem;padding:.5rem .95rem;background:var(--orange);color:#fff;font-size:.9rem;white-space:nowrap}
.anthem-play:hover{background:var(--orange-btn);transform:translateY(-1px)}
.anthem-close{flex:none;width:2.1rem;height:2.1rem;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#DCE5F3;font-size:1.1rem;line-height:1}
.anthem-close:hover{background:rgba(255,255,255,.2);color:#fff}
.anthem button:focus-visible{outline:3px solid #FFB067;outline-offset:2px}
.anthem-bar{height:3px;background:rgba(255,255,255,.14)}
.anthem-bar::after{content:"";display:block;height:100%;width:var(--p,0%);background:var(--orange);transition:width .25s linear}
@media(max-width:26em){.anthem-txt small{display:none}.anthem-in{padding:.7rem .75rem;gap:.6rem}}
@media(prefers-reduced-motion:reduce){.anthem{transition:opacity .2s ease;transform:translate(-50%,0)}.anthem-bar::after{transition:none}}

/* Footer ke social icon ab link ke andar hain — dabane par kaam karein,
   aur keyboard se pahunche to saaf dikhein. */
.f-social a{display:inline-flex;border-radius:50%}
.f-social a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.f-social a:hover .icon-slot{background-color:var(--orange);border-color:var(--orange);transform:translateY(-2px)}