/* Bindu. One design language for Indian public websites.

   1. Khadi and neel. Pages sit on unbleached cotton and are written in
      indigo ink. Saffron, turmeric and leaf green are for state and for
      the one illustration a service owns, never for decoration.
   2. Every language is a first language. One type family (Anek, by Ek Type)
      draws Latin and nine Indic scripts to the same skeleton. Line height
      and tracking follow the script, not the page.
   3. The bindu grid. Illustrations are made of dots on a grid, the way a
      kolam is drawn around its pulli. Maps, boards, charts, all dots.
   4. The task comes first. The first screen of every service is the thing
      people came to do: book, apply, track, pay.
   5. Logical layout. Margins and alignment use inline/block, so Urdu and
      Kashmiri read right to left without a second stylesheet.

   Sizes are rem so the A- A A+ control scales the whole page. */

:root {
  /* cloth and ink */
  --b-khadi: #f6f2e9;
  --b-paper: #fffdf8;
  --b-sunk: #eee8dc;
  --b-rule: #e2dacb;
  --b-rule-strong: #c9bfac;
  --b-ink: #14162b;
  --b-ink-2: #43455a;
  --b-ink-3: #5a5b6e;

  /* neel: the action colour, and the strip */
  --b-neel: #2a3891;
  --b-neel-hover: #1f2a75;
  --b-neel-deep: #171e57;
  --b-neel-tint: #e7eaf6;
  --b-neel-dot: #aab3dd;

  /* state, and a service's own illustration */
  --b-kesar: #e6772b;
  --b-kesar-tint: #fbeadb;
  --b-haldi: #f4b81f;
  --b-haldi-tint: #fcf0cb;
  --b-patti: #1d7a49;
  --b-patti-tint: #e0f0e5;
  --b-sindoor: #b8322a;
  --b-sindoor-tint: #f8e2df;

  /* the national hairline, official values */
  --b-flag-saffron: #ff9933;
  --b-flag-white: #ffffff;
  --b-flag-green: #138808;

  /* type. --b-font-script is set per language by bindu.js */
  --b-font-script: "Anek Devanagari";
  --b-font: "Anek Latin", var(--b-font-script), "Noto Sans", system-ui, sans-serif;
  --b-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --b-t-display: clamp(2.75rem, 5.4vw, 4.75rem);
  --b-t-h1: clamp(2.125rem, 3.8vw, 3.25rem);
  --b-t-h2: clamp(1.625rem, 2.6vw, 2.125rem);
  --b-t-h3: 1.25rem;
  --b-t-lede: 1.1875rem;
  --b-t-body: 1rem;
  --b-t-small: 0.875rem;
  --b-t-micro: 0.8125rem;

  --b-lh-display: 1;
  --b-lh-head: 1.12;
  --b-lh-body: 1.55;
  --b-track-display: -0.025em;
  --b-track-head: -0.015em;
  --b-lh-field: 1.4;

  --b-r-control: 10px;
  --b-r-button: 12px;
  --b-r-card: 16px;
  --b-r-block: 20px;

  --b-page: 80rem;
  --b-gutter: max(1.5rem, env(safe-area-inset-left, 0px));

  --b-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --b-ease-deal: cubic-bezier(0.18, 1.1, 0.28, 1);

  color-scheme: light;
}

/* Indic scripts carry matras above and below the line. They need air, and
   letter-spacing breaks their conjuncts, so tracking is Latin only. */
:root:not([data-script="latn"]) {
  --b-lh-display: 1.22;
  --b-lh-head: 1.32;
  --b-lh-body: 1.75;
  --b-lh-field: 1.55;
  --b-track-display: 0;
  --b-track-head: 0;
}
:root[data-script="arab"] {
  --b-font: "Noto Nastaliq Urdu", "Anek Latin", serif;
  --b-lh-display: 1.75;
  --b-lh-head: 1.9;
  --b-lh-body: 2.2;
  --b-lh-field: 2.05;
  --b-t-display: clamp(2.25rem, 4.4vw, 3.75rem);
}

/* GIGW asks for a high contrast mode. Same tokens, harder values. */
:root[data-contrast="high"] {
  --b-khadi: #ffffff;
  --b-paper: #ffffff;
  --b-sunk: #f0f0f0;
  --b-rule: #1a1a1a;
  --b-rule-strong: #000000;
  --b-ink: #000000;
  --b-ink-2: #000000;
  --b-ink-3: #1f1f1f;
  --b-neel: #0019a8;
  --b-neel-hover: #00106e;
  --b-neel-tint: #ffffff;
  --b-kesar-tint: #ffffff;
  --b-patti-tint: #ffffff;
  --b-haldi-tint: #fff3b0;
  --b-sindoor-tint: #ffffff;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--b-khadi);
  color: var(--b-ink);
  font-family: var(--b-font);
  font-size: var(--b-t-body);
  line-height: var(--b-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 600; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--b-neel); text-underline-offset: 0.2em; }
a:hover { color: var(--b-neel-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--b-ink); outline-offset: 0; box-shadow: 0 0 0 6px var(--b-haldi); border-radius: 4px; }
.b-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.b-ltr { direction: ltr; unicode-bidi: isolate; }
.b-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-wrap { max-width: var(--b-page); margin-inline: auto; padding-inline: var(--b-gutter); }
@media (max-width: 559px) { :root { --b-gutter: max(1rem, env(safe-area-inset-left, 0px)); } }

.b-skip {
  position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100;
  background: var(--b-haldi); color: var(--b-ink); padding: 0.75rem 1rem; font-weight: 600; text-decoration: none;
}
.b-skip:focus { top: 0.5rem; }

/* ---------------------------------------------------- the national strip */
/* Every Bindu site opens with the same two things: a tricolour hairline
   and a strip that says whose site this is, in Hindi and in the reader's
   language, with text size, contrast and language beside it. */
.b-tricolour { height: 6px; background: linear-gradient(var(--b-flag-saffron) 0 2px, var(--b-flag-white) 2px 4px, var(--b-flag-green) 4px 6px); }
.b-strip { position: relative; z-index: 45; background: var(--b-rang-deep); color: #eef0fb; font-size: var(--b-t-micro); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
:root[data-contrast="high"] .b-strip { background: #000; color: #fff; }
.b-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; }
.b-strip-who { display: flex; align-items: center; gap: 0.75rem; min-width: 0; white-space: nowrap; }
/* the national mark: a tiny flag, its chakra drawn as a bindu */
.b-flag { flex-shrink: 0; width: 1.375rem; height: 0.9375rem; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  background: radial-gradient(circle at 50% 50%, #0b2a8f 0 0.13rem, transparent 0.14rem), linear-gradient(var(--b-flag-saffron) 0 33.3%, var(--b-flag-white) 33.3% 66.6%, var(--b-flag-green) 66.6%); }
.b-strip-gov { display: inline-flex; align-items: baseline; gap: 0.5rem; font-weight: 600; letter-spacing: 0.01em; }
.b-strip-gov [lang="hi"] { font-family: "Anek Latin", "Anek Devanagari", sans-serif; font-weight: 600; }
.b-strip-gov .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); align-self: center; }
.b-strip-dept { color: rgba(255, 255, 255, 0.62); overflow: hidden; text-overflow: ellipsis; padding-inline-start: 0.75rem; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18); }
[dir="rtl"] .b-strip-dept { box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.18); }
.b-strip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--b-t-micro); line-height: 1.2; }
.b-official { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.625rem 0.3rem 0.5rem; border-radius: 999px; color: #c9f0d6 !important; background: rgba(29, 122, 73, 0.28) !important; box-shadow: inset 0 0 0 1px rgba(160, 230, 190, 0.28); }
.b-official:hover { background: rgba(29, 122, 73, 0.42) !important; }
.b-official .b-icon { width: 0.95rem; height: 0.95rem; }
.b-official .chev { width: 0.75rem; height: 0.75rem; transition: transform 200ms var(--b-ease); }
.b-official[aria-expanded="true"] .chev { transform: rotate(180deg); }
.b-strip-tools { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.b-sizes { display: flex; align-items: center; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.b-sizes button { min-width: 1.75rem; height: 1.625rem; padding: 0 0.4rem; border-radius: 999px; font-weight: 600; font-family: "Anek Latin", sans-serif; }
.b-sizes button:nth-child(1) { font-size: 0.6875rem; }
.b-sizes button:nth-child(3) { font-size: 0.9375rem; }
.b-sizes button:hover { background: rgba(255, 255, 255, 0.1); }
.b-sizes button[aria-pressed="true"] { background: #fff; color: var(--b-rang-deep); }
.b-strip-icon { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.07) !important; }
.b-strip-icon:hover { background: rgba(255, 255, 255, 0.14) !important; }
.b-strip-icon[aria-pressed="true"] { background: #fff !important; color: var(--b-rang-deep); }
.b-strip-icon .b-icon { width: 1rem; height: 1rem; }
.b-lang-btn { display: inline-flex; align-items: center; gap: 0.4rem; height: 1.875rem; padding: 0 0.625rem 0 0.5rem; border-radius: 999px; font-weight: 600; font-size: 0.875rem !important;
  background: rgba(255, 255, 255, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.b-lang-btn:hover { background: rgba(255, 255, 255, 0.2) !important; }
.b-lang-btn .b-icon { width: 1rem; height: 1rem; --b-icon-dot: var(--b-rang-glow); }
.b-lang-btn .chev { width: 0.75rem; height: 0.75rem; opacity: 0.7; }
.b-strip button:focus-visible { box-shadow: 0 0 0 2px var(--b-rang-deep), 0 0 0 4px var(--b-haldi); outline: none; }
/* how to know it's real */
.b-official-panel { background: color-mix(in srgb, var(--b-rang-deep) 88%, #fff); color: #eef0fb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
.b-official-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; padding-block: 1.25rem; }
.b-official-grid > div { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.875rem; align-items: start; }
.b-official-grid .b-icon-tile { grid-row: span 2; width: 2.5rem; height: 2.5rem; background: rgba(255, 255, 255, 0.1); color: #fff; }
.b-official-grid b { font-weight: 600; font-size: 0.9375rem; }
.b-official-grid p { color: rgba(255, 255, 255, 0.72); font-size: var(--b-t-small); }
@media (max-width: 719px) { .b-official-grid { grid-template-columns: 1fr; } }
@media (max-width: 899px) { .b-strip-dept { display: none; } }
@media (max-width: 719px) {
  .b-strip-gov .en, .b-strip-gov .dot, .b-official span, .b-official .chev { display: none; }
  .b-official { padding: 0.3rem; }
  .b-sizes { display: none; }
}

/* language chooser */
.b-langs {
  width: min(44rem, calc(100vw - 2rem)); max-height: min(40rem, calc(100vh - 2rem)); padding: 0; border: 0;
  border-radius: var(--b-r-block); background: var(--b-paper); color: var(--b-ink);
  box-shadow: 0 0 0 1px var(--b-rule), 0 24px 64px rgba(20, 22, 43, 0.18);
}
.b-langs::backdrop { background: rgba(20, 22, 43, 0.4); }
.b-langs-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--b-rule); }
.b-langs-head h2 { font-size: var(--b-t-h3); line-height: var(--b-lh-head); }
.b-langs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; }
.b-langs-grid button {
  display: grid; gap: 0.125rem; text-align: start; padding: 0.75rem 0.875rem; border: 0; cursor: pointer;
  border-radius: var(--b-r-control); background: var(--b-khadi); box-shadow: inset 0 0 0 1px transparent;
}
.b-langs-grid button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--b-rule-strong); }
.b-langs-grid button[aria-current="true"] { background: var(--b-neel); color: #fff; }
.b-langs-grid button:disabled { opacity: 0.5; cursor: default; }
.b-langs-grid .n { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.b-langs-grid .e { font-size: var(--b-t-micro); opacity: 0.75; font-family: "Anek Latin", sans-serif; }
.b-langs-sub { padding: 0 1.5rem; font-size: var(--b-t-small); color: var(--b-ink-3); }

/* ---------------------------------------------------------- the header */
.b-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--b-khadi) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow 200ms var(--b-ease); }
.b-header.is-scrolled { box-shadow: 0 1px 0 var(--b-rule); }
.b-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.25rem; }
.b-lockup { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--b-ink); text-decoration: none; min-width: 0; }
.b-lockup:hover { color: var(--b-ink); }
.b-lockup-mark { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.b-lockup-text { display: grid; line-height: 1.2; min-width: 0; }
.b-lockup-name { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
.b-lockup-org { font-size: var(--b-t-micro); color: var(--b-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-nav { display: flex; align-items: center; gap: 0.25rem; }
.b-nav a, .b-nav button {
  color: var(--b-ink-2); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 8px; border: 0; background: none; cursor: pointer; font-size: 0.9375rem;
}
.b-nav a:hover, .b-nav button:hover { color: var(--b-ink); background: var(--b-sunk); }
.b-header-end { display: flex; align-items: center; gap: 0.5rem; }
@media (max-width: 959px) { .b-nav { display: none; } }

/* ---------------------------------------------------------- buttons */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.5rem; border: 0; border-radius: var(--b-r-button);
  background: var(--b-neel); color: #fff; font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background-color 140ms var(--b-ease); white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.b-btn:hover { background: var(--b-neel-hover); color: #fff; }
.b-btn:active { transform: translateY(1px); box-shadow: none; }
.b-btn--secondary { background: var(--b-paper); color: var(--b-ink); box-shadow: inset 0 0 0 1.5px var(--b-rule-strong); }
.b-btn--secondary:hover { background: var(--b-sunk); color: var(--b-ink); }
.b-btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }
.b-btn--block { width: 100%; }

/* ---------------------------------------------------------- form */
.b-field {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; min-width: 0;
  padding: 0.625rem 0.875rem; border-radius: var(--b-r-control); background: var(--b-sunk);
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 140ms, background-color 140ms;
}
.b-field:focus-within { background: var(--b-paper); box-shadow: inset 0 0 0 2px var(--b-neel); }
.b-field:has(:focus-visible) { outline: none; }
.b-field input:focus-visible, .b-field select:focus-visible { box-shadow: none; outline: none; }
.b-field > label, .b-field > .b-label { font-size: var(--b-t-micro); color: var(--b-ink-3); line-height: 1.3; }
.b-field input, .b-field select {
  width: 100%; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent;
  font-size: 1.125rem; font-weight: 600; line-height: var(--b-lh-field); appearance: none; -webkit-appearance: none;
}
.b-select select { padding-inline-end: 1.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.b-field input::placeholder { color: var(--b-ink-3); font-weight: 400; }
.b-field .b-sub { font-size: var(--b-t-micro); color: var(--b-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.25em; line-height: var(--b-lh-field); padding-block: 0.05em; }
.b-field--error .b-sub { color: var(--b-sindoor); }
.b-field--error { box-shadow: inset 0 0 0 2px var(--b-sindoor); }
.b-select::after {
  content: ""; position: absolute; inset-inline-end: 0.875rem; top: 50%; width: 0.45rem; height: 0.45rem;
  border-right: 1.5px solid var(--b-ink-3); border-bottom: 1.5px solid var(--b-ink-3);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.b-error { font-size: var(--b-t-small); color: var(--b-sindoor); font-weight: 500; }
.b-hint { font-size: var(--b-t-small); color: var(--b-ink-3); }

.b-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--b-t-small); color: var(--b-ink-2); cursor: pointer; }
.b-check input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: 0; border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px var(--b-rule-strong); background: var(--b-paper); cursor: pointer; display: grid; place-items: center;
}
.b-check input:checked { background: var(--b-neel); box-shadow: none; }
.b-check input:checked::after { content: ""; width: 0.55rem; height: 0.3rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }

.b-chip {
  border: 0; cursor: pointer; padding: 0.4rem 0.8rem; border-radius: 8px; font-size: var(--b-t-micro); line-height: 1.4;
  background: transparent; color: var(--b-ink-2); box-shadow: inset 0 0 0 1px var(--b-rule-strong);
}
.b-chip:hover { background: var(--b-sunk); }
.b-chip[aria-pressed="true"] { background: var(--b-ink); color: var(--b-paper); box-shadow: none; }

/* ---------------------------------------------------------- tabs */
.b-tabs { display: flex; gap: 0.125rem; padding: 0.5rem 0.5rem 0; border-bottom: 1px solid var(--b-rule); }
.b-tab {
  position: relative; flex: 0 1 auto; min-width: 0; padding: 0.75rem 0.875rem 0.875rem; border: 0; background: none; cursor: pointer; text-align: start; line-height: 1.25;
  color: var(--b-ink-3); font-size: 0.9375rem; font-weight: 600;
}
.b-tab[aria-selected="true"] { color: var(--b-ink); }
.b-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0.875rem; bottom: -1px; height: 3px; background: var(--b-kesar); border-radius: 3px 3px 0 0; }
.b-tab:hover { color: var(--b-ink); }

/* ---------------------------------------------------------- surfaces */
.b-card { background: var(--b-paper); border-radius: var(--b-r-card); box-shadow: 0 0 0 1px var(--b-rule); }
.b-task { background: var(--b-paper); border-radius: var(--b-r-block); box-shadow: 0 0 0 1px var(--b-rule), 0 1px 0 var(--b-rule-strong); }

/* The bindu ground: a pulli grid, for wells that hold an illustration. */
.b-bindu {
  background-color: var(--b-khadi);
  background-image: radial-gradient(circle at center, var(--b-rule-strong) 1.1px, transparent 1.6px);
  background-size: 14px 14px; background-position: 7px 7px;
}

/* ---------------------------------------------------------- status */
.b-status { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--b-t-micro); font-weight: 600; line-height: 1.4; padding: 0.125rem 0.5rem; border-radius: 6px; white-space: nowrap; }
.b-status::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.b-status--ok { color: var(--b-patti); background: var(--b-patti-tint); }
.b-status--wait { color: #9a5200; background: var(--b-haldi-tint); }
.b-status--info { color: var(--b-neel); background: var(--b-neel-tint); }
.b-status--error { color: var(--b-sindoor); background: var(--b-sindoor-tint); }

/* ---------------------------------------------------------- notice */
.b-notice { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.875rem; align-items: start; padding: 1rem 1.25rem; border-radius: var(--b-r-card); background: var(--b-haldi-tint); }
.b-notice::before { content: "!"; grid-row: span 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--b-ink); color: var(--b-haldi); font-weight: 700; font-family: "Anek Latin", sans-serif; }
.b-notice b { font-weight: 600; }
.b-notice p { color: var(--b-ink-2); font-size: var(--b-t-small); }
.b-notice--info { background: var(--b-neel-tint); }
.b-notice--info::before { content: "i"; background: var(--b-neel); color: #fff; }

/* ---------------------------------------------------------- steps */
/* A service in stages, drawn as a line of bindus. */
.b-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8rem, 1fr); list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.b-steps li { position: relative; display: grid; gap: 0.25rem; padding-top: 1.75rem; padding-inline-end: 1rem; font-size: var(--b-t-small); color: var(--b-ink-3); }
.b-steps li::before { content: ""; position: absolute; top: 0.5rem; inset-inline: 0; border-top: 2px dotted var(--b-rule-strong); }
.b-steps li::after { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--b-paper); box-shadow: inset 0 0 0 2px var(--b-rule-strong); }
.b-steps li:last-child::before { display: none; }
.b-steps li b { color: var(--b-ink); font-weight: 600; font-size: var(--b-t-body); }
.b-steps li[data-state="done"]::after { background: var(--b-patti); box-shadow: none; }
.b-steps li[data-state="done"]::before { border-top-style: solid; border-color: var(--b-patti); }
.b-steps li[data-state="now"]::after { background: var(--b-kesar); box-shadow: 0 0 0 4px var(--b-kesar-tint); }

/* ---------------------------------------------------------- sections */
.b-section { padding-block: 6rem 0; }
.b-section-head { max-width: 42rem; display: grid; gap: 0.875rem; }
.b-section-head h2 { font-size: var(--b-t-h1); line-height: var(--b-lh-head); letter-spacing: var(--b-track-head); font-stretch: 108%; }
.b-section-head p { color: var(--b-ink-2); font-size: var(--b-t-lede); }
.b-display { font-size: var(--b-t-display); line-height: var(--b-lh-display); letter-spacing: var(--b-track-display); font-weight: 600; font-stretch: 112%; }
.b-lede { color: var(--b-ink-2); font-size: var(--b-t-lede); line-height: var(--b-lh-body); }
@media (max-width: 559px) { .b-section { padding-block: 4rem 0; } }

.b-band { margin-top: 6rem; background: var(--b-neel-tint); }
.b-band-inner { padding-block: 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.b-band h2 { font-size: var(--b-t-h1); line-height: var(--b-lh-head); letter-spacing: var(--b-track-head); font-stretch: 108%; }
.b-band p { margin-top: 0.75rem; color: var(--b-ink-2); font-size: var(--b-t-lede); max-width: 46ch; }
@media (max-width: 759px) { .b-band { margin-top: 4rem; } .b-band-inner { grid-template-columns: 1fr; padding-block: 3.25rem; } }

/* ---------------------------------------------------------- footer */
.b-footer { padding-block: 3.5rem 0; }
.b-footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 2rem; }
.b-footer h4 { margin: 0 0 0.75rem; font-size: var(--b-t-small); font-weight: 600; }
.b-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.b-footer a { font-size: var(--b-t-small); color: var(--b-ink-3); text-decoration: none; }
.b-footer a:hover { color: var(--b-ink); text-decoration: underline; }
.b-footer-about p { margin-top: 0.75rem; font-size: var(--b-t-small); color: var(--b-ink-3); max-width: 32ch; }
.b-footer-base { margin-top: 3rem; padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--b-rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: var(--b-t-micro); color: var(--b-ink-3); }
.b-footer-policies { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
@media (max-width: 859px) { .b-footer-cols { grid-template-columns: 1fr 1fr; } .b-footer-about { grid-column: 1 / -1; } }

/* ---------------------------------------------------------- toast */
.b-toast {
  position: fixed; inset-inline-start: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)); z-index: 90;
  transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; max-width: calc(100% - 2rem);
  background: var(--b-ink); color: var(--b-paper); padding: 0.75rem 1.125rem; border-radius: 12px; font-size: var(--b-t-small);
  transition: opacity 200ms, transform 300ms var(--b-ease-deal);
}
[dir="rtl"] .b-toast { transform: translate(50%, 1rem); }
.b-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
[dir="rtl"] .b-toast.is-on { transform: translate(50%, 0); }

/* Text not yet translated keeps its English and says so to a screen reader
   through lang="en"; in review mode it is underlined. */
[data-bindu-review] [data-i18n-missing] { text-decoration: underline wavy var(--b-sindoor); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ================================================================ icons */
.b-icon {
  width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -0.22em;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.bi-dot { fill: var(--b-icon-dot, var(--b-kesar)); stroke: none; }
.bi-fill { fill: currentColor; stroke: none; }
.b-icon--lg { width: 1.5rem; height: 1.5rem; }
/* An icon on a tinted tile, for service lists. */
.b-icon-tile {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: var(--b-neel-tint); color: var(--b-neel);
}
.b-icon-tile .b-icon { width: 1.5rem; height: 1.5rem; }
[dir="rtl"] .b-icon--flip { transform: scaleX(-1); }

/* ================================================================ rang */
/* Every service is dyed one colour. The hero is a full-bleed band of that
   dye, with bandhani dots tied into it, dissolving into khadi at the foot.
   Set data-rang on <html>; neel is the default. Glow is where the dye
   pools lighter, the warm light behind a service's illustration. */
:root, [data-rang="neel"] {
  --b-rang-deep: #0d1240; --b-rang: #22308c; --b-rang-glow: #f08a3c; --b-rang-tie: #ffe9d2;
}
[data-rang="lac"] { --b-rang-deep: #33081a; --b-rang: #7d1d3a; --b-rang-glow: #f4a443; --b-rang-tie: #ffe6cf; }
[data-rang="mehendi"] { --b-rang-deep: #121f0c; --b-rang: #3c5a27; --b-rang-glow: #e9c84a; --b-rang-tie: #f6f0d2; }
[data-rang="jamun"] { --b-rang-deep: #1a0c2b; --b-rang: #4b2a72; --b-rang-glow: #ff8e6a; --b-rang-tie: #f6e3ff; }
[data-rang="mor"] { --b-rang-deep: #04252b; --b-rang: #0d5c67; --b-rang-glow: #f6c04c; --b-rang-tie: #dff8f6; }
[data-rang="kattha"] { --b-rang-deep: #26110a; --b-rang: #6c3a20; --b-rang-glow: #f3b15d; --b-rang-tie: #ffeedd; }

.b-hero { position: relative; isolation: isolate; color: #fff; background: var(--b-rang-deep); }
.b-hero-dye { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.b-hero .b-display, .b-hero h1, .b-hero h2 { color: #fff; }
.b-hero .b-lede { color: rgba(255, 255, 255, 0.92); }
.b-hero-foot { height: 2.5rem; }
:root[data-contrast="high"] .b-hero { background: #fff; color: #000; }
:root[data-contrast="high"] .b-hero .b-display, :root[data-contrast="high"] .b-hero h1 { color: #000; }
:root[data-contrast="high"] .b-hero .b-lede { color: #000; }
:root[data-contrast="high"] .b-hero-dye { display: none; }

/* The header floats on the dye until you scroll. */
.b-header--dye:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.b-header--dye:not(.is-scrolled) .b-lockup, .b-header--dye:not(.is-scrolled) .b-lockup:hover { color: #fff; }
.b-header--dye:not(.is-scrolled) .b-lockup-org { color: rgba(255, 255, 255, 0.66); }
.b-header--dye:not(.is-scrolled) .b-nav a, .b-header--dye:not(.is-scrolled) .b-nav button { color: rgba(255, 255, 255, 0.84); }
.b-header--dye:not(.is-scrolled) .b-nav a:hover, .b-header--dye:not(.is-scrolled) .b-nav button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.b-header--dye:not(.is-scrolled) .b-btn { background: var(--b-paper); color: var(--b-ink); }
.b-header--dye:not(.is-scrolled) .b-btn:hover { background: #fff; }
.b-header--dye:not(.is-scrolled) .b-menu-btn { color: #fff; }
:root[data-contrast="high"] .b-header--dye:not(.is-scrolled) .b-lockup,
:root[data-contrast="high"] .b-header--dye:not(.is-scrolled) .b-nav a,
:root[data-contrast="high"] .b-header--dye:not(.is-scrolled) .b-nav button,
:root[data-contrast="high"] .b-header--dye:not(.is-scrolled) .b-lockup-org { color: #000; }
.b-header--dye + .b-hero, .b-header--dye + main > .b-hero:first-child { margin-top: -4.25rem; padding-top: 4.25rem; }

/* nav links can carry icons */
.b-nav a, .b-nav button { display: inline-flex; align-items: center; gap: 0.4rem; }
.b-nav .b-icon { width: 1.1rem; height: 1.1rem; opacity: 0.85; }

/* small-screen menu */
.b-menu-btn { display: none; border: 0; background: none; cursor: pointer; color: var(--b-ink); padding: 0.5rem; border-radius: 8px; }
.b-menu-btn .b-icon { width: 1.5rem; height: 1.5rem; }
@media (max-width: 959px) {
  .b-menu-btn { display: inline-grid; }
  .b-header.is-open .b-nav {
    display: grid; position: absolute; inset-inline: var(--b-gutter); top: 100%; padding: 0.5rem; gap: 0.125rem;
    background: var(--b-paper); border-radius: var(--b-r-card); box-shadow: 0 0 0 1px var(--b-rule), 0 16px 40px rgba(20, 22, 43, 0.14);
  }
  .b-header.is-open .b-nav a, .b-header.is-open .b-nav button { color: var(--b-ink) !important; padding: 0.75rem; justify-content: flex-start; }
}

/* ============================================================ map parts */
/* Controls and popovers for any bindu dot map. */
.b-mapctl { position: absolute; inset-inline-end: 0.75rem; bottom: 0.75rem; display: grid; gap: 0.375rem; z-index: 4; }
.b-mapctl button {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color 140ms;
}
.b-mapctl button:hover { background: rgba(255, 255, 255, 0.22); }
.b-mapctl button[aria-pressed="true"] { background: #fff; color: var(--b-rang-deep); }
.b-mapctl button:disabled { opacity: 0.35; cursor: default; }
.b-mapctl .b-icon { width: 1.25rem; height: 1.25rem; }
.b-mapctl .gap { height: 0.25rem; }
.b-pop {
  position: absolute; z-index: 6; min-width: 15rem; max-width: 18rem; padding: 1rem; border-radius: var(--b-r-card);
  background: var(--b-paper); color: var(--b-ink); box-shadow: 0 0 0 1px var(--b-rule), 0 18px 48px rgba(10, 12, 40, 0.35);
  display: grid; gap: 0.75rem; text-align: start;
}
.b-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.b-pop-head b { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; display: block; }
.b-pop-head span { font-size: var(--b-t-micro); color: var(--b-ink-3); }
.b-pop-close { border: 0; background: none; cursor: pointer; color: var(--b-ink-3); padding: 0.125rem; border-radius: 6px; }
.b-pop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
.b-pop-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: var(--b-t-micro); color: var(--b-ink-2); }
.b-pop-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.b-layers { position: absolute; inset-inline-end: 3.75rem; bottom: 0.75rem; z-index: 5; min-width: 12rem; padding: 0.5rem; border-radius: var(--b-r-card); background: var(--b-paper); color: var(--b-ink); box-shadow: 0 0 0 1px var(--b-rule), 0 18px 48px rgba(10, 12, 40, 0.35); display: grid; gap: 0.125rem; }
.b-layers label { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 8px; cursor: pointer; font-size: var(--b-t-small); }
.b-layers label:hover { background: var(--b-sunk); }
.b-layers .b-icon { color: var(--b-ink-3); }
.b-layers input { margin-inline-start: auto; accent-color: var(--b-neel); width: 1rem; height: 1rem; }
.b-maphint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none;
  padding: 0.625rem 1rem; border-radius: 10px; background: rgba(10, 12, 40, 0.78); color: #fff; font-size: var(--b-t-small);
  opacity: 0; transition: opacity 200ms;
}
.b-maphint.is-on { opacity: 1; }

/* icons inside parts */
.b-field > .b-field-icon { position: absolute; inset-inline-start: 0.875rem; top: 50%; transform: translateY(-50%); width: 1.375rem; height: 1.375rem; color: var(--b-neel); pointer-events: none; }
.b-field:has(> .b-field-icon) { padding-inline-start: 2.875rem; }
.b-tab { display: inline-flex; align-items: center; gap: 0.5rem; }
.b-tab .b-icon { width: 1.125rem; height: 1.125rem; }
.b-tab[aria-selected="false"] .b-icon { --b-icon-dot: currentColor; }
.b-btn .b-icon { width: 1.15em; height: 1.15em; --b-icon-dot: currentColor; }
.b-chip { display: inline-flex; align-items: center; gap: 0.35rem; }
.b-chip .b-icon { width: 1rem; height: 1rem; }
/* surfaces set their own ink, so they read the same on khadi or on a dye */
.b-task, .b-card, .b-pop, .b-layers { color: var(--b-ink); }
.b-header-end, .b-menu-btn { flex-shrink: 0; }
@media (max-width: 479px) {
  .b-header-end .b-btn > span { display: none; }
  .b-header-end .b-btn { padding-inline: 0.75rem; }
}
/* buttons sitting straight on a dye invert; inside a card they stay neel */
.b-hero .b-btn { background: var(--b-paper); color: var(--b-ink); }
.b-hero .b-btn:hover { background: #fff; color: var(--b-ink); }
.b-hero .b-btn--secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
.b-hero .b-btn--secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.b-hero .b-task .b-btn { background: var(--b-neel); color: #fff; }
.b-hero .b-task .b-btn:hover { background: var(--b-neel-hover); }
.b-hero .b-task .b-btn--secondary { background: var(--b-paper); color: var(--b-ink); box-shadow: inset 0 0 0 1.5px var(--b-rule-strong); }
[dir="rtl"] .b-field input[dir="ltr"] { text-align: right; }
.b-strip-gov:has(.en[hidden]) .dot { display: none; }

/* long words in long languages wrap instead of pushing the page wide */
h1, h2, h3, .b-display { overflow-wrap: break-word; hyphens: auto; }
.b-tab:focus-visible { box-shadow: inset 0 0 0 3px var(--b-haldi); outline: none; }
.b-sizes { direction: ltr; }
.b-sizes button.is-on { background: rgba(255, 255, 255, 0.22); }
.b-sizes button:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 559px) { .b-tab { padding-inline: 0.625rem; font-size: 0.875rem; } .b-tab .b-icon { display: none; } }
.b-section-head > *, .b-band-inner > * { min-width: 0; }
/* break a word only when it cannot fit on a line by itself */
:root:not([data-script="latn"]) h1, :root:not([data-script="latn"]) h2, :root:not([data-script="latn"]) .b-display { overflow-wrap: break-word; hyphens: manual; }

/* ======================================================= more rangs */
[data-rang="kesar"] { --b-rang-deep: #2e1004; --b-rang: #9a3f0e; --b-rang-glow: #ffcf6e; --b-rang-tie: #fff0d9; }
[data-rang="aasmani"] { --b-rang-deep: #061c36; --b-rang: #17589e; --b-rang-glow: #8fe0ff; --b-rang-tie: #e3f6ff; }
[data-rang="kajal"] { --b-rang-deep: #0b0d12; --b-rang: #2b323e; --b-rang-glow: #ffd23f; --b-rang-tie: #eef1f6; }
[data-rang="gulal"] { --b-rang-deep: #2a0823; --b-rang: #8a1d63; --b-rang-glow: #ffb36b; --b-rang-tie: #ffe4f4; }
[data-rang="sindoor"] { --b-rang-deep: #2e0605; --b-rang: #9b1d17; --b-rang-glow: #ffc35a; --b-rang-tie: #ffe7da; }

/* ================================================= the hero layout */
/* Words and the task card on the start side, the service's dot
   illustration on the end side. One column on small screens. */
.b-hero-grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 33rem) minmax(0, 1fr);
  grid-template-areas: "copy art" "task art"; grid-template-rows: auto 1fr; gap: 1.25rem 3.5rem; padding-block: 1.5rem 0; align-items: start;
}
.b-hero-copy { grid-area: copy; display: grid; gap: 0.75rem; padding-top: 0.5rem; }
.b-hero-copy .b-display { font-size: clamp(2.5rem, 4.6vw, 4.25rem); }
.b-hero-copy .b-lede { font-size: 1.0625rem; max-width: 30rem; }
:root:not([data-script="latn"]) .b-hero-copy .b-display { font-size: clamp(2.125rem, 3.6vw, 3.25rem); }
:root:not([data-script="latn"]) .b-hero-copy .b-lede { font-size: 1rem; line-height: 1.6; }
.b-hero-task { grid-area: task; min-width: 0; }
.b-hero-art { grid-area: art; position: relative; min-width: 0; align-self: stretch; min-height: 26rem; }
.b-hero-art canvas { width: 100%; height: 100%; display: block; }
.b-hero-cap { position: absolute; inset-inline-end: 0; top: 2%; z-index: 2; display: grid; gap: 0.25rem; justify-items: end; text-align: end; max-width: 45%; font-size: var(--b-t-micro); color: rgba(255, 255, 255, 0.72); pointer-events: none; }
.b-hero-cap .big { font-size: 2.5rem; font-weight: 600; font-stretch: 112%; color: #fff; line-height: 1.1; letter-spacing: -0.02em; }
.b-hero-cap b { font-size: 1rem; font-weight: 600; color: #fff; }
:root[data-contrast="high"] .b-hero-cap, :root[data-contrast="high"] .b-hero-cap .big, :root[data-contrast="high"] .b-hero-cap b { color: #000; }
@media (max-height: 820px) and (min-width: 1040px) { .b-hero-copy .b-display { font-size: clamp(2.25rem, 3.8vw, 3.5rem); } }
@media (max-width: 1039px) {
  .b-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "task" "art"; }
  .b-hero-art { min-height: 22rem; }
  .b-hero-cap { position: static; justify-items: start; text-align: start; max-width: none; margin-bottom: 0.75rem; }
}

/* ================================================ task card parts */
/* Tabs on top, grouped rows inside, and a counterfoil stub at the foot:
   every service's main action sits on a perforated tear-off, like the
   counterfoil of a government form. */
.b-task .b-tabs { padding-top: 0.375rem; }
.b-task .b-tab { padding-block: 0.625rem 0.75rem; }
:root:not([data-script="latn"]) .b-task .b-tab .b-icon { display: none; }
.b-panel { padding: 1rem 1.125rem 1.125rem; }
.b-task.has-stub:not(.is-listing) {
  --b-notch: calc(100% - 5.25rem);
  -webkit-mask: radial-gradient(circle 0.75rem at 0 var(--b-notch), transparent 96%, #000 100%), radial-gradient(circle 0.75rem at 100% var(--b-notch), transparent 96%, #000 100%);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 0.75rem at 0 var(--b-notch), transparent 96%, #000 100%), radial-gradient(circle 0.75rem at 100% var(--b-notch), transparent 96%, #000 100%);
  mask-composite: intersect;
}
.b-stub { position: relative; margin: 1rem -1.125rem -1.125rem; padding: 1rem 1.125rem 1.125rem; border-top: 2px dashed var(--b-rule-strong); }
.b-stub .b-btn { width: 100%; min-height: 3.125rem; font-size: 1.125rem; }

.b-group { position: relative; display: grid; border-radius: 14px; background: var(--b-paper); box-shadow: 0 0 0 1px var(--b-rule-strong); }
.b-group + .b-group { margin-top: 0.5rem; }
.b-group--split { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.b-row { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; min-height: 3.875rem; padding-inline-end: 0.875rem; transition: background-color 140ms; }
.b-group > .b-row + .b-row { box-shadow: inset 0 1px 0 var(--b-rule); }
.b-group--split > .b-row + .b-row { box-shadow: inset 1px 0 0 var(--b-rule); }
[dir="rtl"] .b-group--split > .b-row + .b-row { box-shadow: inset -1px 0 0 var(--b-rule); }
.b-group:not(.b-group--split) > .b-row:first-child { border-start-start-radius: 14px; border-start-end-radius: 14px; }
.b-group:not(.b-group--split) > .b-row:last-child { border-end-start-radius: 14px; border-end-end-radius: 14px; }
.b-group--split > .b-row:first-child { border-start-start-radius: 14px; border-end-start-radius: 14px; }
.b-group--split > .b-row:last-child { border-start-end-radius: 14px; border-end-end-radius: 14px; }
.b-row:hover, .b-row:focus-within { background: var(--b-neel-tint); }
.b-row.is-error { background: var(--b-sindoor-tint); }
.b-row-icon { justify-self: center; width: 1.3rem; height: 1.3rem; color: var(--b-neel); }
.b-row-body { display: grid; min-width: 0; }
.b-row-body > label, .b-row-label { font-size: var(--b-t-micro); color: var(--b-ink-3); line-height: 1.3; }
.b-row-body input, .b-row-body select {
  width: 100%; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none;
  font-size: 1.125rem; font-weight: 600; line-height: var(--b-lh-field); text-overflow: ellipsis;
}
.b-row-body input:focus-visible, .b-row-body select:focus-visible { box-shadow: none; }
.b-row-body input::placeholder { color: var(--b-ink-3); font-weight: 400; opacity: 0.8; }
.b-row-body select { padding-inline-end: 1.25rem; cursor: pointer; white-space: nowrap; overflow: hidden; }
.b-row-body.b-select::after { inset-inline-end: 0; top: auto; bottom: 0.65em; transform: rotate(45deg); }
.b-row-err { font-size: var(--b-t-micro); color: var(--b-sindoor); line-height: 1.35; }
.b-row-trail { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.2rem 0.45rem; border-radius: 6px; background: var(--b-sunk); color: var(--b-ink-2); font-variant-numeric: tabular-nums; }
.b-row-trail:empty { display: none; }
.b-quick { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.625rem; }
.b-quick .b-chip { padding: 0.3rem 0.65rem; }
.b-panel-note { margin-top: 0.625rem; font-size: var(--b-t-small); color: var(--b-ink-3); }
.b-panel > .b-error { margin-top: 0.625rem; }

/* a result inside the task card */
.b-out { margin-top: 0.875rem; padding: 1rem; border-radius: 12px; box-shadow: 0 0 0 1px var(--b-rule); background: var(--b-paper); display: grid; gap: 0.75rem; }
.b-out-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.b-out-head h3 { font-size: 1.0625rem; line-height: 1.3; }
.b-out-head p { font-size: var(--b-t-small); color: var(--b-ink-3); }
.b-kv { display: grid; gap: 0; }
.b-kv > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; border-top: 1px solid var(--b-rule); font-size: var(--b-t-small); }
.b-kv > div > :first-child { color: var(--b-ink-3); }
.b-kv > div > :last-child { font-weight: 600; text-align: end; }

/* ================================================ page sections */
.b-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
@media (max-width: 959px) { .b-cards { grid-template-columns: 1fr; } }
.b-card--well { padding: 0.625rem; display: flex; flex-direction: column; border-radius: var(--b-r-block); }
.b-well { position: relative; border-radius: 12px; height: 16rem; overflow: hidden; display: grid; place-items: center; }
.b-card-body { padding: 1.125rem 0.75rem 0.75rem; display: grid; gap: 0.375rem; }
.b-card-body h3 { font-size: var(--b-t-h3); line-height: var(--b-lh-head); }
.b-card-body p { color: var(--b-ink-2); }
.b-card-body a { margin-top: 0.375rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; }
.b-card-body a:hover { text-decoration: underline; }
/* a small UI fragment shown inside a well */
.b-mini { width: min(80%, 17.5rem); background: var(--b-paper); border-radius: 12px; padding: 0.875rem; box-shadow: 0 0 0 1px var(--b-rule); display: grid; gap: 0.625rem; font-size: var(--b-t-micro); }
.b-play > * { animation: b-rise 600ms var(--b-ease-deal) both; }
.b-play > *:nth-child(2) { animation-delay: 220ms; } .b-play > *:nth-child(3) { animation-delay: 440ms; } .b-play > *:nth-child(4) { animation-delay: 700ms; } .b-play > *:nth-child(5) { animation-delay: 1000ms; }
@keyframes b-rise { from { opacity: 0; transform: translateY(8px); } }

.b-tiles { margin-top: 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: var(--b-r-block); }
.b-tiles a { padding: 1.25rem 1.375rem; text-decoration: none; color: var(--b-ink); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem 0.875rem; align-content: start; align-items: center; box-shadow: inset -1px -1px 0 var(--b-rule); }
.b-tiles a:hover { background: var(--b-sunk); color: var(--b-ink); }
.b-tiles a .b-icon-tile { grid-row: span 2; }
.b-tiles a:hover .b-icon-tile { background: var(--b-neel); color: #fff; }
.b-tiles b { font-weight: 600; }
.b-tiles span:not(.b-icon-tile) { font-size: var(--b-t-small); color: var(--b-ink-3); }
@media (max-width: 759px) { .b-tiles { grid-template-columns: 1fr 1fr; } }

.b-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
@media (max-width: 859px) { .b-facts { grid-template-columns: 1fr; } }
.b-fact { padding: 1.5rem; display: grid; gap: 0.5rem; align-content: start; justify-items: start; }
.b-fact .b-icon-tile { margin-bottom: 0.5rem; }
.b-fact .big { font-size: 2.75rem; font-weight: 600; font-stretch: 112%; letter-spacing: var(--b-track-display); line-height: 1.15; color: var(--b-neel); }
.b-fact h3 { font-size: 1.0625rem; margin-top: 0.5rem; }
.b-fact p { color: var(--b-ink-2); font-size: var(--b-t-small); }

.b-rows { margin-top: 2.5rem; border-top: 1px solid var(--b-rule); }
.b-rows > a, .b-rows > div { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 0.5rem 1.5rem; align-items: center; padding-block: 1.5rem; border-bottom: 1px solid var(--b-rule); text-decoration: none; color: var(--b-ink); }
.b-rows h3 { font-size: 1.375rem; font-weight: 600; line-height: var(--b-lh-head); }
.b-rows p { color: var(--b-ink-2); max-width: 60ch; }
.b-rows .go { font-weight: 600; white-space: nowrap; color: var(--b-neel); display: inline-flex; align-items: center; gap: 0.375rem; }
.b-rows > a:hover h3 { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.b-rows > a:hover .b-icon-tile { background: var(--b-neel); color: #fff; }
@media (max-width: 759px) { .b-rows > a, .b-rows > div { grid-template-columns: auto minmax(0, 1fr); } .b-rows p, .b-rows .go { grid-column: 2; } }

.b-phones { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.b-phones > div { display: grid; grid-template-columns: auto auto; gap: 0 0.875rem; align-items: center; justify-content: start; }
.b-phones .b-icon-tile { grid-row: span 2; background: var(--b-paper); }
.b-phones b { font-size: 2.5rem; font-weight: 600; font-stretch: 112%; line-height: 1.1; color: var(--b-neel); }
.b-phones span:not(.b-icon-tile) { font-size: var(--b-t-small); color: var(--b-ink-2); }
.b-concept { padding-bottom: 1.5rem; font-size: var(--b-t-micro); color: var(--b-ink-3); }
[dir="rtl"] .b-icon--flip { transform: scaleX(-1); }

/* ===================================================== official logos */
/* A service's real logo sits on a small white plate, so logos drawn for
   white pages read the same on khadi, on any dye, and in high contrast. */
.b-lockup-logo { flex-shrink: 0; display: grid; place-items: center; height: 2.875rem; min-width: 2.875rem; padding: 0.3rem 0.45rem; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 22, 43, 0.08); }
.b-lockup-logo img { height: 2.25rem; width: auto; max-width: 9rem; object-fit: contain; display: block; }
.b-lockup-logo--wide { padding-inline: 0.625rem; }
.b-footer .b-lockup-logo { box-shadow: 0 0 0 1px var(--b-rule); }
/* For services whose official mark is the State Emblem, Bindu uses the
   service name as a wordmark instead: the emblem is not reproduced. */
.b-wordmark { display: grid; line-height: 1.05; }
.b-wordmark b { font-size: 1.25rem; font-weight: 700; font-stretch: 112%; letter-spacing: -0.01em; text-transform: none; }
.b-wordmark span { font-size: var(--b-t-micro); opacity: 0.7; }
@media (max-width: 559px) { .b-lockup-logo { height: 2.5rem; min-width: 2.5rem; } .b-lockup-logo img { height: 1.9rem; max-width: 6.5rem; } }
.b-row-body { position: relative; }

/* The illustration keeps a fixed box, so results opening in the task card
   don't stretch it, and a canvas sized to 100% can't feed its own growth. */
.b-hero-art { align-self: start; height: clamp(28rem, 72vh, 42rem); min-height: 0; }
@media (max-width: 1039px) {
  .b-hero-art { height: auto; display: flex; flex-direction: column; }
  .b-hero-art canvas { height: 22rem; flex: none; }
  .b-hero-cap { order: -1; }
}

/* ===================================================== standard controls */
/* Compositions differ from service to service; controls never do. Every
   Bindu site uses these for text entry, choices and selects, so a citizen
   who has used one site knows how the next one behaves. */
.b-input { display: grid; gap: 0.375rem; min-width: 0; }
.b-input > label, .b-input > .b-input-label, .b-choice > legend { font-size: var(--b-t-small); font-weight: 600; color: var(--b-ink); }
.b-input-hint { font-size: var(--b-t-micro); color: var(--b-ink-3); }
.b-input input, .b-input select, .b-input textarea {
  width: 100%; min-width: 0; min-height: 3rem; padding: 0.625rem 0.875rem; border-radius: var(--b-r-control);
  border: 1.5px solid var(--b-rule-strong); background: var(--b-paper); color: var(--b-ink);
  font-size: 1.0625rem; font-weight: 500; line-height: var(--b-lh-field);
  transition: border-color 120ms, box-shadow 120ms;
}
.b-input input::placeholder { color: var(--b-ink-3); font-weight: 400; }
.b-input input:hover, .b-input select:hover { border-color: var(--b-ink-3); }
.b-input input:focus, .b-input select:focus, .b-input textarea:focus { outline: none; border-color: var(--b-neel); box-shadow: 0 0 0 3px var(--b-neel-tint); }
.b-input input:focus-visible, .b-input select:focus-visible { box-shadow: 0 0 0 3px var(--b-haldi); }
.b-input select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.5rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--b-ink-2) 50%), linear-gradient(135deg, var(--b-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 55%, calc(100% - 0.85rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
[dir="rtl"] .b-input select { background-position: 1.2rem 55%, 0.85rem 55%; }
.b-input.is-error input, .b-input.is-error select { border-color: var(--b-sindoor); }
.b-input-err { font-size: var(--b-t-small); color: var(--b-sindoor); font-weight: 500; }
.b-inputs { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 0.875rem; }
@media (max-width: 559px) { .b-inputs { grid-template-columns: 1fr; } }

/* choices: real radio buttons, an obvious selected state */
.b-choice { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.5rem; }
.b-choice > legend { padding: 0; margin-bottom: 0.5rem; }
.b-choice-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.b-choice label { position: relative; cursor: pointer; }
.b-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.b-choice label > span {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1rem 0.5rem 0.75rem; border-radius: 999px;
  border: 1.5px solid var(--b-rule-strong); background: var(--b-paper); color: var(--b-ink); font-weight: 500; font-size: 0.9375rem;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.b-choice label > span::before { content: ""; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 1.5px solid var(--b-ink-3); flex-shrink: 0; transition: box-shadow 120ms, border-color 120ms; }
.b-choice label:hover > span { border-color: var(--b-ink-3); }
.b-choice input:checked + span { background: var(--b-neel-tint); border-color: var(--b-neel); color: var(--b-neel); font-weight: 600; }
.b-choice input:checked + span::before { border-color: var(--b-neel); box-shadow: inset 0 0 0 4px var(--b-paper), inset 0 0 0 10px var(--b-neel); }
.b-choice input:focus-visible + span { box-shadow: 0 0 0 3px var(--b-haldi); }
.b-choice small { color: var(--b-ink-3); font-weight: 400; }
:root[data-contrast="high"] .b-choice input:checked + span { background: #000; color: #fff; }

/* ============================================================ media */
/* Real photos and footage, sourced under open licences and credited on
   the page. Media is content: it sits in sections, never behind a form. */
.b-media { position: relative; margin: 0; border-radius: var(--b-r-block); overflow: hidden; background: var(--b-sunk); }
.b-media img, .b-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-media figcaption { position: absolute; inset-inline-start: 0.75rem; bottom: 0.75rem; max-width: calc(100% - 4.5rem); padding: 0.375rem 0.625rem; border-radius: 8px; background: rgba(13, 14, 30, 0.62); color: #fff; font-size: var(--b-t-micro); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.b-media-pause { position: absolute; inset-inline-end: 0.75rem; bottom: 0.75rem; z-index: 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(13, 14, 30, 0.62); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.b-media-pause:hover { background: rgba(13, 14, 30, 0.8); }
.b-media-pause svg { width: 1rem; height: 1rem; fill: currentColor; }
.b-credits { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--b-rule); font-size: var(--b-t-micro); color: var(--b-ink-3); }
.b-credits summary { cursor: pointer; font-weight: 600; color: var(--b-ink-2); }
.b-credits ol { margin: 0.75rem 0 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; }
.b-credits a { color: inherit; }

/* ======================================================= content patterns */
/* The patterns the best public-service sites use (GOV.UK, Singapore, New
   Zealand, USWDS) in Bindu's type and colour. Sections are built from these:
   a process is a step-by-step list, data is a table, a caution is warning
   text, contacts are a contact block. Not roads, boards, signs or stamps. */

.b-page-head { display: grid; gap: 0.75rem; max-width: 46rem; }
.b-page-head h2 { font-size: var(--b-t-h1); line-height: var(--b-lh-head); letter-spacing: var(--b-track-head); font-weight: 600; }
.b-page-head p { font-size: var(--b-t-lede); color: var(--b-ink-2); }
.b-prose { max-width: 42rem; display: grid; gap: 0.875rem; color: var(--b-ink-2); }
.b-prose h3 { font-size: 1.25rem; color: var(--b-ink); line-height: var(--b-lh-head); margin-top: 0.5rem; }
.b-prose ul, .b-prose ol { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.375rem; }
.b-prose strong { color: var(--b-ink); }

/* on-page contents */
.b-subnav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding-block: 1rem; border-top: 1px solid var(--b-rule); border-bottom: 1px solid var(--b-rule); }
.b-subnav a { font-weight: 500; text-decoration: none; color: var(--b-neel); }
.b-subnav a:hover { text-decoration: underline; }

/* step-by-step: numbered steps on a thin line, each expandable */
.b-stepnav { max-width: 46rem; margin-top: 2rem; }
.b-stepnav-all { border: 0; background: none; padding: 0; cursor: pointer; color: var(--b-neel); font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; }
.b-stepnav > ol { list-style: none; margin: 0; padding: 0; }
.b-stepnav > ol > li { position: relative; padding-inline-start: 3.25rem; padding-bottom: 0.25rem; }
.b-stepnav > ol > li::before { content: ""; position: absolute; inset-inline-start: 1rem; top: 2.25rem; bottom: 0; border-inline-start: 2px solid var(--b-rule-strong); }
.b-stepnav > ol > li:last-child::before { bottom: 1rem; }
.b-stepnav-n { position: absolute; inset-inline-start: 0; top: 1rem; width: 2.125rem; height: 2.125rem; border-radius: 50%; display: grid; place-items: center; background: var(--b-paper); box-shadow: inset 0 0 0 2px var(--b-ink); font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.b-stepnav-n.is-and { box-shadow: none; background: transparent; font-size: var(--b-t-small); }
.b-stepnav details { border-top: 1px solid var(--b-rule); padding-block: 1rem; }
.b-stepnav summary { list-style: none; cursor: pointer; display: grid; gap: 0.25rem; }
.b-stepnav summary::-webkit-details-marker { display: none; }
.b-stepnav summary h3 { font-size: 1.1875rem; line-height: 1.35; font-weight: 600; }
.b-stepnav summary .b-stepnav-toggle { font-size: var(--b-t-small); color: var(--b-neel); font-weight: 500; display: inline-flex; align-items: center; gap: 0.35rem; }
.b-stepnav summary .b-stepnav-toggle::before { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); transition: transform 160ms var(--b-ease); }
.b-stepnav details[open] .b-stepnav-toggle::before { transform: rotate(225deg) translate(-2px, 0); }
.b-stepnav summary:focus-visible { outline: 3px solid var(--b-ink); box-shadow: 0 0 0 6px var(--b-haldi); }
.b-stepnav-body { padding-top: 0.75rem; color: var(--b-ink-2); display: grid; gap: 0.5rem; max-width: 38rem; }
.b-stepnav-body ul { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.3rem; }
.b-stepnav-meta { font-size: var(--b-t-small); color: var(--b-ink-3); }

/* tables */
.b-table-wrap { overflow-x: auto; margin-top: 1.5rem; border-radius: var(--b-r-card); box-shadow: 0 0 0 1px var(--b-rule); background: var(--b-paper); }
.b-table { width: 100%; border-collapse: collapse; font-size: var(--b-t-body); }
.b-table caption { text-align: start; padding: 1rem 1.25rem 0; font-weight: 600; }
.b-table th, .b-table td { text-align: start; vertical-align: top; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--b-rule); }
.b-table thead th { font-size: var(--b-t-small); color: var(--b-ink-3); font-weight: 600; background: var(--b-khadi); }
.b-table tbody tr:last-child > * { border-bottom: 0; }
.b-table tbody th { font-weight: 600; }
.b-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-table td small { display: block; color: var(--b-ink-3); font-size: var(--b-t-micro); margin-top: 0.125rem; }
@media (max-width: 599px) {
  .b-table--stack thead { display: none; }
  .b-table--stack tr { display: grid; gap: 0.25rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--b-rule); }
  .b-table--stack th, .b-table--stack td { padding: 0; border: 0; }
  .b-table--stack td[data-label]::before { content: attr(data-label) ": "; color: var(--b-ink-3); font-size: var(--b-t-small); }
  .b-table--stack .num { text-align: start; }
}

/* summary list: label, value, optional action */
.b-summary { margin: 1.5rem 0 0; display: grid; border-top: 1px solid var(--b-rule); max-width: 46rem; }
.b-summary > div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; gap: 0.25rem 1.5rem; padding-block: 0.875rem; border-bottom: 1px solid var(--b-rule); }
.b-summary dt { font-weight: 600; }
.b-summary dd { margin: 0; color: var(--b-ink-2); }
.b-summary .b-summary-act { justify-self: end; font-weight: 500; }
@media (max-width: 599px) { .b-summary > div { grid-template-columns: 1fr; } .b-summary .b-summary-act { justify-self: start; } }

/* warning text and inset text */
.b-warning { display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; align-items: start; max-width: 46rem; margin-top: 1.5rem; }
.b-warning::before { content: "!"; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--b-ink); color: var(--b-paper); font-weight: 700; font-size: 1.25rem; font-family: "Anek Latin", sans-serif; }
.b-warning strong { font-weight: 600; font-size: 1.0625rem; line-height: 1.45; padding-top: 0.25rem; display: block; }
.b-warning p { color: var(--b-ink-2); margin-top: 0.375rem; }
.b-inset { max-width: 42rem; margin-top: 1.5rem; padding: 0.25rem 0 0.25rem 1.25rem; border-inline-start: 4px solid var(--b-rule-strong); color: var(--b-ink-2); }
.b-inset strong { color: var(--b-ink); }

/* expandable detail */
.b-details { max-width: 42rem; margin-top: 1rem; }
.b-details summary { cursor: pointer; color: var(--b-neel); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.b-details > div { margin-top: 0.75rem; padding-inline-start: 1.25rem; border-inline-start: 4px solid var(--b-rule); color: var(--b-ink-2); display: grid; gap: 0.5rem; }

/* contact block */
.b-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem 2.5rem; margin-top: 1.5rem; }
.b-contact > div { display: grid; gap: 0.25rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--b-ink); }
.b-contact h3 { font-size: 1.0625rem; font-weight: 600; }
.b-contact .b-contact-big { font-size: 1.75rem; font-weight: 600; font-stretch: 108%; letter-spacing: -0.01em; color: var(--b-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.b-contact .b-contact-big:hover { color: var(--b-neel); text-decoration: underline; }
.b-contact p { color: var(--b-ink-2); font-size: var(--b-t-small); }

/* link list: a grid of plain destinations, each with one line */
.b-linklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.75rem 2.5rem; margin-top: 1.75rem; }
.b-linklist > a { display: grid; gap: 0.375rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--b-rule-strong); text-decoration: none; color: var(--b-ink-2); }
.b-linklist > a b { color: var(--b-neel); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; font-size: 1.0625rem; }
.b-linklist > a:hover b { text-decoration-thickness: 2px; }
.b-linklist > a:hover { color: var(--b-ink); }

/* a simple section rhythm */
.b-block { padding-block: 4.5rem 0; }
.b-block + .b-block { margin-top: 0; }
@media (max-width: 559px) { .b-block { padding-block: 3rem 0; } }

/* ======================================================= the series bar */
/* Every public Bindu page says, before anything else, that it is a concept,
   which day of the series it is, and that nothing typed is sent anywhere. */
.b-series { background: #111; color: #f3f1ea; font-size: var(--b-t-micro); }
.b-series-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.25rem; flex-wrap: wrap; min-height: 2.25rem; padding-block: 0.375rem; }
.b-series b { font-weight: 700; color: #fff; }
.b-series .day { display: inline-flex; align-items: center; gap: 0.5rem; }
.b-series .day i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #ff9933; box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.25); }
.b-series a { color: #fff; font-weight: 600; text-underline-offset: 0.2em; }
.b-series a:hover { color: #ffcf8a; }
@media (max-width: 559px) { .b-series .note { display: none; } }

/* long Indic words in narrow cells wrap instead of widening the page */
:root:not([data-script="latn"]) main p, :root:not([data-script="latn"]) main span, :root:not([data-script="latn"]) main td, :root:not([data-script="latn"]) main li { overflow-wrap: break-word; }

/* ============================================================ carousel */
/* A row of large photos or clips that scroll-snaps. Swipe, drag, the
   arrow buttons, the dots, or the arrow keys. Captions sit under each. */
.b-carousel { position: relative; }
.b-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 46rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 0.25rem; overscroll-behavior-x: contain; }
.b-carousel-track::-webkit-scrollbar { display: none; }
.b-carousel-track:focus-visible { outline: 3px solid var(--b-ink); outline-offset: 4px; }
.b-slide { scroll-snap-align: start; margin: 0; display: grid; gap: 0.625rem; }
.b-slide-media { position: relative; border-radius: var(--b-r-block); overflow: hidden; aspect-ratio: 16 / 10; background: var(--b-sunk); }
.b-slide-media img, .b-slide-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-slide figcaption { display: grid; gap: 0.125rem; padding-inline: 0.125rem; }
.b-slide figcaption b { font-weight: 600; }
.b-slide figcaption span { font-size: var(--b-t-small); color: var(--b-ink-3); }
.b-carousel-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.b-carousel-dots { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.b-carousel-dots button { width: 0.625rem; height: 0.625rem; border-radius: 999px; border: 0; padding: 0; background: var(--b-rule-strong); cursor: pointer; transition: width 200ms var(--b-ease), background-color 200ms; }
.b-carousel-dots button[aria-current="true"] { width: 1.75rem; background: var(--b-ink); }
.b-carousel-nav { display: flex; gap: 0.5rem; }
.b-carousel-nav button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--b-rule-strong); background: var(--b-paper); color: var(--b-ink); cursor: pointer; display: grid; place-items: center; }
.b-carousel-nav button:hover:not(:disabled) { border-color: var(--b-ink); }
.b-carousel-nav button:disabled { opacity: 0.35; cursor: default; }
.b-carousel-nav svg { width: 1.125rem; height: 1.125rem; }
[dir="rtl"] .b-carousel-nav svg { transform: scaleX(-1); }
@media (max-width: 599px) { .b-carousel-track { grid-auto-columns: 86%; } }

/* SARKARI: the series wordmark and the footer joke that changes on every visit */
.sk-mark { letter-spacing: 0.08em; font-weight: 800; }
.sk-joke { margin: 1.5rem 0 0.5rem; font-size: 1.0625rem; font-weight: 600; color: var(--b-ink-2); }
.sk-joke b { color: var(--b-ink); font-weight: 800; }
.sk-joke small { display: block; margin-top: 0.25rem; font-size: var(--b-t-micro); font-weight: 400; color: var(--b-ink-3); }