/* ABHA on Bindu. A wallet and a guided flow.
   The hero: a small headline top-start, two quiet mode links top-end, the
   card wallet on the start side and a vertical stepper on the end side.
   Below: consent as a flow diagram, deactivate and delete side by side,
   Scan and Share as a three-frame storyboard, and help as the number 14477.
   Bindu tokens and logical properties throughout, so RTL works. */

/* ================================================================ hero */
.ab-hero { overflow: hidden; }
.ab-hero .pulse { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; }

.ab-top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem 2rem; padding-top: 1.125rem; }
.ab-head { display: grid; gap: 0.375rem; max-width: 33rem; min-width: 0; }
.ab-title { font-size: clamp(1.5rem, 2.05vw, 1.9375rem); line-height: var(--b-lh-head); letter-spacing: var(--b-track-head); font-stretch: 112%; font-weight: 600; color: #fff; }
.ab-lede { font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.74); max-width: 30rem; }
:root:not([data-script="latn"]) .ab-title { font-size: clamp(1.375rem, 1.8vw, 1.75rem); }

/* the two quiet links that switch the hero */
.ab-modes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1.5rem; padding-top: 0.375rem; flex-shrink: 0; }
.ab-mode {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.125rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: rgba(255, 255, 255, 0.82);
  text-decoration: underline; text-decoration-style: dotted; text-decoration-color: rgba(255, 255, 255, 0.42); text-underline-offset: 0.35em; text-decoration-thickness: 2px;
}
.ab-mode .b-icon { width: 1.1rem; height: 1.1rem; --b-icon-dot: var(--b-rang-glow); }
.ab-mode:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.8); }
.ab-mode[aria-pressed="true"] { color: #fff; text-decoration-style: solid; text-decoration-color: var(--b-rang-glow); }
.ab-mode:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--b-haldi); border-radius: 6px; }

/* stage: wallet on the start side, the flow on the end side */
.ab-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26.5rem); gap: 1.5rem 3rem; align-items: start; padding-block: 0.25rem 6.25rem; }
.ab-wallet { position: relative; z-index: 0; min-width: 0; display: grid; grid-template-rows: auto auto; }
.ab-wallet > canvas { grid-area: 1 / 1; width: 100%; height: clamp(22rem, calc(100vh - 16.5rem), 34rem); display: block; transition: opacity 450ms var(--b-ease); }
.ab-wallet .ab-map { opacity: 0; pointer-events: none; }
.ab-wallet.is-map .ab-map { opacity: 1; pointer-events: auto; }
.ab-wallet.is-map .ab-art { opacity: 0; }
.ab-cap { grid-area: 2 / 1; display: grid; gap: 0.125rem; padding-inline-start: 0.25rem; margin-top: -0.25rem; font-size: var(--b-t-small); color: rgba(255, 255, 255, 0.7); }
.ab-cap b { font-size: 1.0625rem; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.ab-side { position: relative; z-index: 2; min-width: 0; }

/* paper surfaces on the dye */
.ab-card { background: var(--b-paper); color: var(--b-ink); border-radius: var(--b-r-block); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 30px 70px -30px rgba(0, 12, 16, 0.65); }
.ab-hero .ab-card .b-btn { background: var(--b-neel); color: #fff; }
.ab-hero .ab-card h2, .ab-hero .ab-card h3 { color: var(--b-ink); }
.ab-hero .ab-card .st[data-state="next"] .st-title { color: var(--b-ink-3); }
.ab-hero .ab-card .b-btn:hover { background: var(--b-neel-hover); color: #fff; }

/* ---------------------------------------------------- the stepper */
.ab-flow { padding: 0.75rem 1.25rem 1rem; }
.ab-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.st { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.875rem; padding-block: 0.625rem; }
.st::before { content: ""; position: absolute; inset-inline-start: calc(1rem - 1px); top: 3rem; bottom: -0.5rem; border-inline-start: 2px dotted var(--b-rule-strong); }
.st:last-of-type::before, .st:has(~ .st:not([hidden])) ~ .st:last-child::before { display: none; }
.st[data-state="done"]::before { border-inline-start-style: solid; border-color: var(--b-patti); }
.st-n {
  grid-row: 1; align-self: start; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font-size: 0.875rem; font-weight: 700; font-family: "Anek Latin", sans-serif; color: var(--b-ink-3); background: var(--b-paper); box-shadow: inset 0 0 0 2px var(--b-rule-strong);
  transition: background-color 200ms, box-shadow 200ms, color 200ms;
}
.st[data-state="now"] .st-n { background: var(--b-kesar); color: #fff; box-shadow: 0 0 0 4px var(--b-kesar-tint); }
.st[data-state="done"] .st-n { background: var(--b-patti); color: #fff; box-shadow: none; font-size: 0; }
.st[data-state="done"] .st-n::after { content: ""; width: 0.6rem; height: 0.32rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
/* text set from script may be English fallback inside a right-to-left page */
.st-sum, .ab-avail, .ab-hint, .ab-cap b, .ab-cap span, #k-say, .k-time-v, .sb-frame > span:last-child { unicode-bidi: plaintext; }
.st-head { grid-column: 2; display: grid; align-content: center; min-height: 2rem; gap: 0.0625rem; min-width: 0; }
.st-title { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; color: var(--b-ink); }
.st[data-state="next"] .st-title { color: var(--b-ink-3); font-weight: 500; }
.st[data-state="now"] .st-title { font-size: 1.1875rem; }
.st-sum { font-size: var(--b-t-micro); color: var(--b-ink-3); overflow-wrap: anywhere; }
.st-sum:empty { display: none; }
.st[data-state="done"] .st-sum { color: var(--b-patti); font-weight: 500; }
.st-body { grid-column: 2; display: grid; gap: 0.5rem; padding-top: 0.5rem; min-width: 0; animation: ab-in 420ms var(--b-ease-deal) both; }
.st-actions { display: grid; gap: 0.375rem; margin-top: 0.25rem; }
.st-go { width: 100%; min-height: 3.125rem; font-size: 1.125rem; }
.st-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; }
.st-actions > .ab-link { justify-self: start; }

/* fields */
.ab-field { display: grid; gap: 0.3rem; min-width: 0; }
.ab-field > label { font-size: var(--b-t-small); font-weight: 500; color: var(--b-ink-2); }
.ab-input {
  position: relative; display: flex; align-items: center; gap: 0.625rem; min-width: 0; padding: 0.375rem 0.875rem; border-radius: 12px;
  background: var(--b-sunk); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow 140ms, background-color 140ms;
}
.ab-input > .b-icon { width: 1.25rem; height: 1.25rem; color: var(--b-neel); }
.ab-input:focus-within { background: var(--b-paper); box-shadow: inset 0 0 0 2px var(--b-neel); }
.ab-input.is-error { background: var(--b-sindoor-tint); box-shadow: inset 0 0 0 2px var(--b-sindoor); }
.ab-input input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; padding: 0.375rem 0; font-size: 1.3125rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.35; }
.ab-input input::placeholder { color: var(--b-ink-3); font-weight: 400; opacity: 0.75; }
.ab-input input:focus-visible { outline: none; box-shadow: none; }
.ab-input--otp input { letter-spacing: 0.5em; }
[dir="rtl"] .ab-input input[dir="ltr"] { text-align: right; }
.ab-pre, .ab-suffix { font-weight: 700; font-size: 0.9375rem; color: var(--b-ink-2); flex-shrink: 0; }
.ab-suffix { padding: 0.2rem 0.5rem; border-radius: 7px; background: var(--b-paper); box-shadow: inset 0 0 0 1px var(--b-rule); }
/* a row of bindus that light as you type */
.ab-meter { position: absolute; bottom: 0.4rem; inset-inline-start: 2.75rem; display: inline-flex; align-items: center; gap: 4px; direction: ltr; pointer-events: none; }
.ab-input:has(.ab-meter:not([hidden])) { padding-bottom: 0.875rem; }
.ab-meter[hidden] { display: none; }
.ab-meter i { width: 5px; height: 5px; border-radius: 50%; background: var(--b-rule-strong); transition: background-color 120ms, transform 160ms var(--b-ease-deal); }
.ab-meter i.gap { margin-inline-start: 4px; }
.ab-meter i.on { background: var(--b-neel); transform: scale(1.25); }
.ab-err { font-size: var(--b-t-micro); color: var(--b-sindoor); font-weight: 500; }
.ab-hint { font-size: var(--b-t-micro); color: var(--b-ink-3); line-height: 1.45; }
:root:not([data-script="latn"]) .ab-hint { line-height: 1.6; }
.ab-consent { align-items: flex-start; line-height: 1.4; }
.ab-consent input { margin-top: 0.1rem; }
.ab-link {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--b-t-small); font-weight: 600; color: var(--b-neel); border-radius: 6px; text-align: start;
}
.ab-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ab-link .b-icon { width: 1rem; height: 1rem; }
.ab-link--danger { color: var(--b-sindoor); }

/* availability and suggestions */
.ab-avail { display: flex; align-items: center; gap: 0.5rem; font-size: var(--b-t-small); color: var(--b-ink-3); min-height: 1.5em; }
.ab-avail::before { content: ""; flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--b-rule-strong); }
.ab-avail[data-state="checking"]::before { background: var(--b-haldi); animation: ab-blink 700ms ease-in-out infinite alternate; }
.ab-avail[data-state="free"] { color: var(--b-patti); font-weight: 600; }
.ab-avail[data-state="free"]::before { background: var(--b-patti); box-shadow: 0 0 0 3px var(--b-patti-tint); }
.ab-avail[data-state="taken"], .ab-avail[data-state="bad"] { color: var(--b-sindoor); font-weight: 600; }
.ab-avail[data-state="taken"]::before, .ab-avail[data-state="bad"]::before { background: var(--b-sindoor); }
@keyframes ab-blink { to { opacity: 0.3; } }
/* entries move but never fade, so a form is never left invisible if an animation stalls */
@keyframes ab-in { from { transform: translateY(8px); } }
.ab-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.ab-suggest > span:first-child { font-size: var(--b-t-micro); color: var(--b-ink-3); margin-inline-end: 0.125rem; }
.ab-suggest-list { display: contents; }
.ab-sug { border: 0; cursor: pointer; padding: 0.3rem 0.6rem; border-radius: 8px; font: inherit; font-size: var(--b-t-small); font-weight: 600; background: var(--b-neel-tint); color: var(--b-neel); }
.ab-sug span { font-weight: 500; opacity: 0.6; }
.ab-sug:hover { background: var(--b-neel); color: #fff; }

/* the finished card */
.ab-kv { margin: 0; display: grid; border-radius: 12px; background: var(--b-khadi); padding: 0.25rem 0.875rem; }
.ab-kv > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 1rem; padding-block: 0.5rem; }
.ab-kv > div + div { border-top: 1px dotted var(--b-rule-strong); }
.ab-kv dt { font-size: var(--b-t-small); color: var(--b-ink-3); }
.ab-kv dd { margin: 0; margin-inline-start: auto; font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.02em; white-space: nowrap; text-align: end; }
.ab-next { font-size: var(--b-t-small); color: var(--b-ink-2); }

/* ---------------------------------------------------- facility mode */
.ab-pill { position: absolute; z-index: 3; top: 0.25rem; inset-inline: 0; margin-inline: auto; width: min(100%, 36rem); }
.ab-pill-row { display: flex; align-items: stretch; gap: 0.25rem; padding: 0.375rem; border-radius: 18px; background: var(--b-paper); color: var(--b-ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 22px 50px -18px rgba(0, 12, 16, 0.7); }
.ab-pill-field { position: relative; display: grid; align-content: center; gap: 0.0625rem; padding: 0.3rem 0.875rem; border-radius: 13px; min-width: 0; cursor: text; }
.ab-pill-field:focus-within { background: var(--b-neel-tint); }
.ab-pill-field > span { font-size: 0.75rem; color: var(--b-ink-3); line-height: 1.25; }
.ab-pill-field input, .ab-pill-field select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; appearance: none; -webkit-appearance: none; }
.ab-pill-field input:focus-visible, .ab-pill-field select:focus-visible { outline: none; box-shadow: none; }
.ab-pill-field input::placeholder { color: var(--b-ink-3); font-weight: 400; }
.ab-pill-where { flex: 1 1 auto; }
.ab-pill-type { flex: 0 1 10.5rem; cursor: pointer; box-shadow: inset 1px 0 0 var(--b-rule); border-radius: 0 13px 13px 0; }
[dir="rtl"] .ab-pill-type { box-shadow: inset -1px 0 0 var(--b-rule); border-radius: 13px 0 0 13px; }
.ab-pill-type select { padding-inline-end: 1.125rem; cursor: pointer; text-overflow: ellipsis; }
.ab-pill-type::after { content: ""; position: absolute; inset-inline-end: 0.875rem; bottom: 0.85rem; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid var(--b-ink-3); border-bottom: 1.5px solid var(--b-ink-3); transform: rotate(45deg); pointer-events: none; }
.ab-pill-go { flex-shrink: 0; border-radius: 13px; padding-inline: 1.25rem; }
.ab-hero .ab-pill .b-btn { background: var(--b-neel); color: #fff; }
.ab-hero .ab-pill .b-btn:hover { background: var(--b-neel-hover); }
.ab-pill-err { margin: 0.375rem auto 0; width: fit-content; max-width: 100%; padding: 0.25rem 0.75rem; border-radius: 8px; background: var(--b-sindoor-tint); color: var(--b-sindoor); font-size: var(--b-t-small); font-weight: 600; }

.ab-panel { padding: 1.125rem 1.25rem 1.25rem; display: grid; gap: 0.75rem; }
.ab-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.ab-panel-head h2 { font-size: 1.375rem; line-height: 1.25; font-stretch: 108%; }
.ab-panel-head h2:focus { outline: none; }
.ab-panel-head h2:focus-visible { box-shadow: 0 0 0 3px var(--b-haldi); border-radius: 4px; }
.ab-back { font-weight: 500; color: var(--b-ink-3); }
.ab-back .b-icon { transform: scaleX(-1); }
[dir="rtl"] .ab-back .b-icon { transform: none; }
.ab-filters { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; padding: 0.625rem 0.875rem; border-radius: 12px; background: var(--b-khadi); }
.ab-empty { font-size: var(--b-t-small); color: var(--b-ink-2); }
.ab-cities { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.75rem; }
.ab-cities > span { font-size: var(--b-t-micro); color: var(--b-ink-3); margin-inline-end: 0.25rem; }
.ab-panel-foot { display: grid; gap: 0.5rem; margin-top: 0.25rem; }
.ab-sub { font-size: var(--b-t-small); font-weight: 600; color: var(--b-ink-2); margin-top: 0.25rem; }

/* lists inside the side panel */
.ab-list { list-style: none; margin: 0; padding: 0; display: grid; border-radius: 14px; box-shadow: 0 0 0 1px var(--b-rule); overflow: hidden; }
.ab-list li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; animation: ab-in 480ms var(--b-ease-deal) both; }
.ab-list li + li { box-shadow: inset 0 1px 0 var(--b-rule); }
.ab-list li:nth-child(2) { animation-delay: 80ms; } .ab-list li:nth-child(3) { animation-delay: 160ms; } .ab-list li:nth-child(4) { animation-delay: 240ms; } .ab-list li:nth-child(5) { animation-delay: 320ms; }
.ab-list li[data-pin] { cursor: default; }
.ab-list li[data-pin]:hover, .ab-list li[data-pin]:focus-visible { background: var(--b-neel-tint); outline: none; }
.ab-ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--b-neel-tint); color: var(--b-neel); }
.ab-ic .b-icon { width: 1.125rem; height: 1.125rem; }
.f-n { display: grid; place-items: center; width: 2rem; height: 2rem; justify-self: center; border-radius: 50%; background: var(--b-rang-deep); color: var(--b-rang-glow); font-weight: 700; font-family: "Anek Latin", sans-serif; box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-rang-glow) 35%, transparent); }
:root[data-contrast="high"] .f-n { background: #000; color: #fff; box-shadow: none; }
.ab-main { display: grid; min-width: 0; line-height: 1.35; }
.ab-main b { font-weight: 600; font-size: 0.9375rem; overflow-wrap: anywhere; }
.ab-main > span { font-size: var(--b-t-micro); color: var(--b-ink-3); overflow-wrap: anywhere; }
.ab-end { display: grid; justify-items: end; gap: 0.25rem; }
.f-km { font-size: var(--b-t-micro); color: var(--b-ink-2); white-space: nowrap; }
.ab-acts { display: flex; gap: 0.25rem; }
.ab-mini { border: 0; cursor: pointer; padding: 0.35rem 0.7rem; border-radius: 8px; font: inherit; font-size: var(--b-t-micro); font-weight: 600; background: var(--b-neel); color: #fff; }
.ab-mini:hover { background: var(--b-neel-hover); }
.ab-mini--no { background: transparent; color: var(--b-ink-2); box-shadow: inset 0 0 0 1px var(--b-rule-strong); }
.ab-mini--no:hover { background: var(--b-sunk); color: var(--b-ink); }
.ab-list li.denied .ab-ic { background: var(--b-sindoor-tint); color: var(--b-sindoor); }
.ab-list li.allowed .ab-ic { background: var(--b-patti-tint); color: var(--b-patti); }

/* ---------------------------------------------------- hero, smaller screens */
@media (max-height: 820px) and (min-width: 1040px) {
  .ab-top { padding-top: 0.625rem; }
  .ab-flow { padding-block: 0.5rem 0.875rem; }
  .st { padding-block: 0.5rem; }
}
@media (max-width: 1039px) {
  .ab-stage { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding-bottom: 5.5rem; }
  .ab-wallet > canvas { height: 19rem; }
  .ab-side { width: min(100%, 34rem); justify-self: center; }
  .ab-cap { margin-top: -1.75rem; position: relative; z-index: 1; }
}
@media (max-width: 719px) {
  .ab-top { flex-direction: column; gap: 0.5rem; padding-top: 0.75rem; }
  .ab-modes { justify-content: flex-start; padding-top: 0; }
}
@media (max-width: 559px) {
  .ab-lede { display: none; }
  .ab-title { font-size: 1.5rem; }
  .ab-mode { font-size: 0.875rem; }
  .ab-wallet > canvas { height: 13.75rem; }
  .ab-hero[data-mode="find"] .ab-wallet > canvas { height: 21rem; }
  .ab-cap { display: none; }
  .ab-flow { padding-inline: 0.875rem; }
  .st { column-gap: 0.625rem; }
  .ab-input { padding-inline: 0.75rem; }
  .ab-input input { font-size: 1.1875rem; }
  .ab-meter { display: none; }
  .ab-pill-row { flex-wrap: wrap; }
  .ab-pill-where { flex-basis: 100%; }
  .ab-pill-type { flex: 1 1 auto; box-shadow: none; border-radius: 13px; }
  .ab-list li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .ab-end { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; }
}

/* ================================================================ sections */
/* Sections are information, built from Bindu's content patterns. */
.ab-split { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: start; margin-top: 1.75rem; }
.ab-split > .b-stepnav { margin-top: 0; }
.ab-table { max-width: 58rem; }
.ab-table table td:empty { background: var(--b-khadi); }
.ab-last { padding-bottom: 4.5rem; }
@media (max-width: 859px) { .ab-split { grid-template-columns: minmax(0, 1fr); } }
.b-footer { padding-top: 3.5rem; }

/* high contrast on the hero */
:root[data-contrast="high"] .ab-title, :root[data-contrast="high"] .ab-cap b { color: #000; }
:root[data-contrast="high"] .ab-lede, :root[data-contrast="high"] .ab-cap { color: #000; }
:root[data-contrast="high"] .ab-mode { color: #000; text-decoration-color: #000; }
:root[data-contrast="high"] .ab-card, :root[data-contrast="high"] .ab-pill-row { box-shadow: 0 0 0 2px #000; }

/* facility results: the nearest one leads with a photo of that kind of place */
.f-top { margin: 0 0 0.75rem; position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 7; background: var(--b-sunk); animation: ab-in 480ms var(--b-ease-deal) both; }
.f-top img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-top figcaption { position: absolute; inset: auto 0 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.125rem 0.75rem; padding: 2.5rem 0.875rem 0.625rem; color: #fff; background: linear-gradient(to top, rgba(10, 14, 20, 0.82), rgba(10, 14, 20, 0)); }
.f-top .b-status { grid-column: 1 / -1; justify-self: start; margin-bottom: 0.25rem; }
.f-top b { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; }
.f-top .b-num { font-size: var(--b-t-small); }
.f-top small { grid-column: 1 / -1; font-size: var(--b-t-micro); color: rgba(255, 255, 255, 0.72); }

/* ---------------------------------------------------- where it works */
/* Each slide is a real place and what ABHA does there, with a way to do it. */
.ab-where { margin-top: 2rem; }
.ab-where .b-carousel-track { grid-auto-columns: min(38%, 29rem); }
.ab-where .b-slide-media { aspect-ratio: 4 / 3; }
.ab-where figcaption { display: grid; gap: 0.3rem; padding-top: 0.875rem; }
.ab-where figcaption b { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; color: var(--b-ink); }
.ab-where figcaption > span:not(.ab-where-at) { color: var(--b-ink-2); max-width: 34ch; }
.ab-where-at { font-size: var(--b-t-micro); color: var(--b-ink-3); }
.ab-where figcaption a { justify-self: start; margin-top: 0.25rem; font-weight: 500; }
@media (max-width: 899px) { .ab-where .b-carousel-track { grid-auto-columns: 70%; } }
@media (max-width: 559px) { .ab-where .b-carousel-track { grid-auto-columns: 86%; } }

/* ---------------------------------------------------- questions */
.ab-faq { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
.ab-faq .b-details { margin: 0; padding-block: 0.875rem; border-top: 1px solid var(--b-rule); }
.ab-faq .b-details summary { font-size: 1.125rem; font-weight: 600; color: var(--b-ink); text-decoration: none; }
.ab-faq .b-details summary:hover { color: var(--b-neel); text-decoration: underline; }
.ab-faq .b-details > div { padding-top: 0.5rem; }
.ab-faq .b-details p { color: var(--b-ink-2); max-width: 44rem; }
@media (max-width: 799px) { .ab-faq { grid-template-columns: minmax(0, 1fr); } }
:root[data-contrast="high"] .ab-phone-screen { box-shadow: 0 0 0 2px #000; }

/* ================================================================ round 9 */
/* A white page. Sections show the ABHA app itself, drawn in this redesign's
   own language: the mor header, the dotted card, dot-matrix numbers. */
:root:not([data-contrast="high"]) { --b-khadi: #ffffff; --b-paper: #ffffff; --b-sunk: #f2f4f5; --b-rule: #e6e8eb; --b-rule-strong: #cdd1d6; }
body { background: #fff; }

.ab-big { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; font-stretch: 108%; max-width: 16ch; }
:root:not([data-script="latn"]) .ab-big { line-height: 1.25; max-width: 18em; }
.ab-k-lede { margin-top: 0.875rem; font-size: var(--b-t-lede); color: var(--b-ink-2); max-width: 34rem; }

/* consent: words on the start side, the app on a tinted panel on the end side */
.ab-k { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: 2.5rem 4.5rem; align-items: center; }
.ab-k-points { list-style: none; margin: 2.25rem 0 0; padding: 0; max-width: 30rem; border-top: 1px solid var(--b-rule); }
.ab-k-points li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--b-rule); font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
.ab-k-points .b-icon { width: 1.5rem; height: 1.5rem; color: var(--b-rang); }
.ab-device-wrap { margin: 0; display: grid; justify-items: center; gap: 1rem; padding: 2.75rem 1.5rem 1.5rem; border-radius: var(--b-r-block); position: relative; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--b-rang) 16%, #fff) 0%, color-mix(in srgb, var(--b-rang) 7%, #fff) 70%); }
.ab-device-wrap::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--b-rang) 22%, transparent) 1px, transparent 1.6px); background-size: 14px 14px; pointer-events: none; }
.ab-device-wrap > * { position: relative; }
.ab-device-wrap figcaption { font-size: var(--b-t-small); color: var(--b-ink-2); }

/* the device: a slim black frame, an island, a home bar */
.ab-device { width: min(100%, 18.75rem); aspect-ratio: 300 / 630; padding: 9px; border-radius: 46px; background: linear-gradient(150deg, #33373e, #0b0d10 45%); box-shadow: inset 0 0 0 1.5px #464b53, 0 50px 80px -40px rgba(4, 37, 43, 0.5), 0 16px 32px -20px rgba(0, 0, 0, 0.35); }
.ab-device-screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: #fff; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; color: #14162b; text-align: start; }
.ab-device-screen::before { content: ""; position: absolute; z-index: 6; top: 9px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 12px; background: #000; }
.ab-device-screen::after { content: ""; position: absolute; z-index: 6; bottom: 7px; left: 50%; width: 108px; height: 4px; margin-left: -54px; border-radius: 2px; background: rgba(20, 22, 43, 0.85); }
.ph--camera::after { background: rgba(255, 255, 255, 0.85); }

/* app chrome: the mor header with the hero's dot grain */
.ph-top { position: relative; z-index: 2; color: #fff; padding-bottom: 12px; background: radial-gradient(120% 140% at 80% 0%, var(--b-rang) 0%, var(--b-rang-deep) 75%); }
.ph-top::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 0.8px, transparent 1.3px); background-size: 9px 9px; pointer-events: none; }
.ph-status { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 20px 0 28px; font-size: 13px; font-weight: 600; }
.ph-sb { width: 58px; height: 11px; color: currentColor; }
.ph-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 0 16px; min-height: 30px; }
.ph-bar b { font-size: 17px; font-weight: 600; }
.ph-back { display: grid; place-items: center; width: 24px; height: 24px; margin-inline-start: -4px; }
.ph-back .b-icon { width: 20px; height: 20px; stroke-width: 2.2; }
[dir="rtl"] .ph-back .b-icon { transform: scaleX(-1); }
.ph-body { position: relative; flex: 1; padding: 14px 16px 0; overflow: hidden; }
.ph-foot { padding: 12px 16px 24px; box-shadow: 0 -1px 0 #eceef1; background: #fff; }

/* pieces */
.ph-who { display: flex; gap: 10px; align-items: center; }
.ph-who > span:last-child { min-width: 0; }
.ph-who b { display: block; font-size: 14.5px; font-weight: 600; }
.ph-who small { display: block; font-size: 12px; color: #6b6f80; }
.ph-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--b-rang) 10%, #fff); color: var(--b-rang); }
.ph-av .b-icon { width: 20px; height: 20px; }
.ph-why { margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: #f3f5f6; display: grid; gap: 1px; font-size: 11.5px; color: #6b6f80; }
.ph-why b { font-size: 13px; font-weight: 500; color: #14162b; }
.ph-label { margin-top: 14px; font-size: 12px; font-weight: 600; color: #6b6f80; }
.ph-list { list-style: none; margin: 6px 0 0; padding: 0; border-radius: 14px; box-shadow: 0 0 0 1px #eceef1; }
.ph-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px 8px 12px; }
.ph-list li + li { box-shadow: inset 0 1px 0 #eceef1; }
.ph-list b { display: block; font-size: 13px; font-weight: 600; }
.ph-list small { display: block; font-size: 11.5px; color: #8a8d9b; }
.ph-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f2f4f5; color: #3c4052; }
.ph-ic .b-icon { width: 17px; height: 17px; }
.ph-switch { position: relative; width: 40px; height: 24px; border: 0; border-radius: 12px; background: #d6d9de; cursor: pointer; transition: background 160ms; }
.ph-switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 160ms var(--b-ease-deal, ease); }
.ph-switch[aria-checked="true"] { background: var(--b-rang); }
.ph-switch[aria-checked="true"]::after { transform: translateX(16px); }
[dir="rtl"] .ph-switch[aria-checked="true"]::after { transform: translateX(-16px); }
.ph-switch:focus-visible, .ph-seg button:focus-visible, .ph-btn:focus-visible { outline: 2px solid var(--b-neel); outline-offset: 2px; }
.ph-seg { margin-top: 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; border-radius: 11px; background: #f2f4f5; }
.ph-seg button { border: 0; background: none; padding: 7px 2px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 500; color: #55586e; cursor: pointer; }
.ph-seg button[aria-pressed="true"] { background: #fff; color: #14162b; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.ph-until { margin-top: 10px; font-size: 12px; color: #6b6f80; }
.ph-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-btn { display: grid; place-items: center; min-height: 42px; padding: 4px 8px; border: 0; border-radius: 12px; background: var(--b-neel); color: #fff; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer; }
.ph-btn--ghost { background: #fff; color: #14162b; box-shadow: inset 0 0 0 1.5px #d6d9de; }

/* consent states */
.ph-view--done, .ph-acts--done { display: none; }
.ph[data-state="allow"] .ph-view--ask, .ph[data-state="deny"] .ph-view--ask, .ph[data-state="allow"] .ph-acts--ask, .ph[data-state="deny"] .ph-acts--ask { display: none; }
.ph[data-state="allow"] .ph-view--done, .ph[data-state="deny"] .ph-view--done { display: grid; }
.ph[data-state="allow"] .ph-acts--done, .ph[data-state="deny"] .ph-acts--done { display: grid; }
.ph-view--done { justify-items: center; text-align: center; gap: 8px; padding-top: 84px; animation: ab-in 420ms var(--b-ease-deal, ease) both; }
.ph-mark { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 6px; border-radius: 50%; background: #e2f2e9; color: var(--b-patti); }
.ph-mark .b-icon { width: 28px; height: 28px; stroke-width: 2.4; }
.ph-mark .ph-no { display: none; }
.ph[data-state="deny"] .ph-mark { background: var(--b-sindoor-tint); color: var(--b-sindoor); }
.ph[data-state="deny"] .ph-mark .ph-yes { display: none; }
.ph[data-state="deny"] .ph-mark .ph-no { display: block; }
.ph-done-t { font-size: 19px; font-weight: 600; }
.ph-done-p { max-width: 24ch; font-size: 13px; color: #55586e; }

/* scan and share: a mor band with three phones */
.ab-band { position: relative; margin-top: 5rem; color: #fff; background: radial-gradient(80% 110% at 50% 0%, var(--b-rang) 0%, var(--b-rang-deep) 72%); overflow: hidden; }
.ab-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.6px); background-size: 16px 16px; pointer-events: none; }
.ab-band > .b-block { position: relative; padding-block: 5rem; }
.ab-band-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; }
.ab-band-head h2 { color: #fff; }
.ab-band-head p { font-size: var(--b-t-lede); color: rgba(255, 255, 255, 0.8); max-width: 26rem; }
.ab-screens { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.ab-screens > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem 0.75rem; }
.ab-screens .ab-device { grid-column: 1 / -1; justify-self: center; }
.ab-screens-n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--b-rang-glow); color: var(--b-rang-deep); font-weight: 700; font-size: var(--b-t-small); }
.ab-screens > li > b { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: #fff; }
.ab-band-foot { margin-top: 2.5rem; text-align: center; font-weight: 500; }
.ab-band-foot a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.ab-band-foot a:hover { color: #fff; text-decoration-color: #fff; }

/* screen 1: the camera, pointed at the counter's QR standee */
.ph--camera { background: #000; color: #fff; }
.ph-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2.5px) brightness(0.55) saturate(0.85); transform: scale(1.12); }
.ph--camera .ph-top { background: none; padding-bottom: 0; }
.ph--camera .ph-top::after { display: none; }
.ph-aim { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; }
.ph-aim::before { content: ""; position: absolute; width: 196px; height: 196px; left: 50%; top: 50%; margin: -98px 0 0 -98px; border-radius: 22px;
  background: linear-gradient(#fff, #fff) top left / 26px 3px no-repeat, linear-gradient(#fff, #fff) top left / 3px 26px no-repeat,
  linear-gradient(#fff, #fff) top right / 26px 3px no-repeat, linear-gradient(#fff, #fff) top right / 3px 26px no-repeat,
  linear-gradient(#fff, #fff) bottom left / 26px 3px no-repeat, linear-gradient(#fff, #fff) bottom left / 3px 26px no-repeat,
  linear-gradient(#fff, #fff) bottom right / 26px 3px no-repeat, linear-gradient(#fff, #fff) bottom right / 3px 26px no-repeat; }
.ph-standee { width: 140px; padding: 8px 9px 7px; display: grid; justify-items: center; gap: 6px; border-radius: 10px; background: #fff; color: #14162b; transform: rotate(-3deg); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.ph-standee-h { width: 100%; padding: 3px 4px; border-radius: 5px; background: var(--b-rang); color: #fff; font-size: 9.5px; font-weight: 700; text-align: center; }
.ph-standee-qr { width: 104px; }
.ph-standee-qr svg { display: block; width: 100%; fill: #111; }
.ph-standee small { font-size: 9px; color: #55586e; }
.ph-hint { position: relative; z-index: 2; margin: 0 18px 36px; padding: 10px 14px; border-radius: 14px; background: rgba(16, 18, 26, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 12.5px; text-align: center; }

/* screen 2: the share sheet over the app */
.ph--sheet { background: #f2f4f5; }
.ph--sheet .ph-top { padding-bottom: 70px; }
.ph-dim { position: absolute; inset: 0; z-index: 3; background: rgba(4, 22, 26, 0.45); }
.ph-sheet { position: absolute; z-index: 4; inset: auto 0 0 0; display: grid; gap: 11px; padding: 8px 16px 26px; border-radius: 22px 22px 0 0; background: #fff; }
.ph-grab { justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: #d6d9de; }
.ph-sheet-t { font-size: 18px; font-weight: 600; }
.ph-card { position: relative; height: 100px; padding: 12px 14px; border-radius: 14px; display: grid; align-content: space-between; color: #fff; overflow: hidden; background: radial-gradient(130% 150% at 85% 0%, var(--b-rang) 0%, var(--b-rang-deep) 70%); }
.ph-card::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0.8px, transparent 1.3px); background-size: 7px 7px; }
.ph-card > * { position: relative; }
.ph-card-mark { display: flex; align-items: center; gap: 5px; }
.ph-card-mark svg { height: 11px; fill: #fff; }
.ph-card-mark i { width: 5px; height: 5px; border-radius: 50%; background: var(--b-rang-glow); box-shadow: 0 0 6px var(--b-rang-glow); }
.ph-card-name { font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.ph-card-no { font-size: 16px; font-weight: 600; letter-spacing: 0.06em; color: var(--b-rang-glow); }
.ph-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ph-ticks li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ph-ticks .b-icon { width: 16px; height: 16px; color: var(--b-patti); stroke-width: 2.4; }
.ph-sheet .ph-btn { pointer-events: none; }

/* screen 3: the token, in the card's own dot-matrix */
.ph-body--tok { display: grid; justify-items: center; align-content: start; gap: 4px; padding-top: 30px; text-align: center; }
.ph-body--tok .ph-done-p { margin-top: 0; }
.ph-ticket { margin-top: 18px; width: 100%; display: grid; justify-items: center; gap: 10px; padding: 16px 14px 12px; border-radius: 18px; color: #fff; position: relative; overflow: hidden; background: radial-gradient(130% 120% at 80% 0%, var(--b-rang) 0%, var(--b-rang-deep) 72%); }
.ph-ticket::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 0.8px, transparent 1.3px); background-size: 8px 8px; }
.ph-ticket > * { position: relative; }
.ph-ticket-l { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.75); }
.ph-ticket-n svg { display: block; height: 70px; fill: var(--b-rang-glow); filter: drop-shadow(0 0 6px rgba(246, 192, 76, 0.55)); }
.ph-ticket-row { width: 100%; display: flex; justify-content: space-between; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 12px; color: rgba(255, 255, 255, 0.85); }
.ph-hint--ink { margin: 12px 0 0; padding: 0; background: none; color: #55586e; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* deactivate or delete: your card, shown paused or gone */
.ab-opts { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.ab-opt { display: grid; grid-template-rows: auto 1fr; border-radius: var(--b-r-block); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--b-rule); }
.ab-opt-art { position: relative; display: grid; place-items: center; padding: 3rem 2rem; background: #f3f5f6; overflow: hidden; }
.ab-opt--del .ab-opt-art { background: color-mix(in srgb, var(--b-sindoor) 6%, #fff); }
.ab-opt-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(20, 22, 43, 0.07) 1px, transparent 1.6px); background-size: 14px 14px; }
.ab-mini { position: relative; width: min(100%, 17rem); aspect-ratio: 1.6; padding: 1rem 1.125rem; border-radius: 16px; display: grid; align-content: space-between; color: #fff; overflow: hidden; background: radial-gradient(130% 150% at 85% 0%, var(--b-rang) 0%, var(--b-rang-deep) 70%); box-shadow: 0 24px 40px -24px rgba(4, 37, 43, 0.6); transform: rotate(-4deg); }
.ab-mini::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0.8px, transparent 1.3px); background-size: 7px 7px; }
.ab-mini > * { position: relative; }
.ab-mini .ph-card-mark svg { height: 13px; }
.ab-mini-name { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); }
.ab-mini-no { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.06em; color: var(--b-rang-glow); }
/* paused: the same card, gone quiet */
.ab-mini--off { filter: grayscale(1) brightness(1.05); opacity: 0.55; }
/* deleted: only the outline of where the card was, its dots scattering away */
.ab-mini--gone { background: none; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--b-sindoor) 35%, #fff); color: transparent; }
.ab-mini--gone::before { background-image: radial-gradient(circle, color-mix(in srgb, var(--b-sindoor) 45%, #fff) 1.1px, transparent 1.6px); background-size: 9px 9px; -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 85%); mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 85%); }
.ab-mini--gone > * { visibility: hidden; }
.ab-opt-badge { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.7rem 0.3rem 0.5rem; border-radius: 999px; background: #fff; font-size: var(--b-t-small); font-weight: 600; color: var(--b-ink-2); box-shadow: 0 0 0 1px var(--b-rule); }
.ab-opt-badge .b-icon { width: 1rem; height: 1rem; }
.ab-opt--del .ab-opt-badge { color: var(--b-sindoor); }
.ab-opt-body { display: grid; align-content: start; gap: 0.5rem; padding: 1.5rem 1.75rem 1.75rem; }
.ab-opt h3 { font-size: 1.5rem; font-weight: 600; font-stretch: 106%; }
.ab-opt-body > p { color: var(--b-ink-2); font-size: 1.0625rem; max-width: 34ch; }
.ab-opt .ab-opt-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.875rem; font-weight: 500; }
.ab-opt-btn { min-height: 2.75rem; }
.ab-opt--del .ab-opt-btn { background: var(--b-sindoor); }
.ab-opt--del .ab-opt-btn:hover { background: color-mix(in srgb, var(--b-sindoor) 85%, #000); }

/* questions: heading on the start side, answers on the end side */
.ab-faqs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; padding-top: 6rem; }
.ab-faq-side { position: sticky; top: 7rem; }
.ab-arrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-weight: 600; text-decoration: none; }
.ab-arrow .b-icon { width: 1.125rem; height: 1.125rem; transition: transform 160ms; }
.ab-arrow:hover .b-icon { transform: translateX(3px); }
[dir="rtl"] .ab-arrow .b-icon, [dir="rtl"] .ab-help-go { transform: scaleX(-1); }
.ab-faq-list { border-top: 1px solid var(--b-rule); }
.ab-q { border-bottom: 1px solid var(--b-rule); }
.ab-q summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.375rem; cursor: pointer; list-style: none; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; color: var(--b-ink); }
.ab-q summary::-webkit-details-marker { display: none; }
.ab-q summary:hover { color: var(--b-rang); }
.ab-q summary i { flex: none; position: relative; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--b-rule-strong); transition: background 160ms, box-shadow 160ms; }
.ab-q summary i::before, .ab-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; margin: -0.875px 0 0 -6px; border-radius: 1px; background: currentColor; transition: transform 200ms var(--b-ease-deal, ease); }
.ab-q summary i::after { transform: rotate(90deg); }
.ab-q[open] summary i { background: var(--b-ink); color: #fff; box-shadow: none; }
.ab-q[open] summary i::after { transform: rotate(0deg); }
.ab-q p { padding: 0 3.5rem 1.5rem 0; color: var(--b-ink-2); font-size: 1.0625rem; max-width: 42rem; }
[dir="rtl"] .ab-q p { padding: 0 0 1.5rem 3.5rem; }

/* help: the number to call, big; two other ways in beside it */
.ab-help-grid { margin-top: 2.25rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; }
.ab-help-call { position: relative; display: grid; align-content: space-between; gap: 0.5rem; min-height: 19rem; padding: 2rem 2.25rem; border-radius: var(--b-r-block); color: #fff; text-decoration: none; overflow: hidden; background: radial-gradient(110% 130% at 85% 0%, var(--b-rang) 0%, var(--b-rang-deep) 70%); }
.ab-help-call::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.6px); background-size: 14px 14px; pointer-events: none; }
.ab-help-call > * { position: relative; }
.ab-help-k { font-size: var(--b-t-small); font-weight: 600; color: rgba(255, 255, 255, 0.75); }
.ab-help-n { font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 600; font-stretch: 112%; line-height: 1; letter-spacing: -0.02em; color: var(--b-rang-glow); }
.ab-help-d { font-size: 1.125rem; color: rgba(255, 255, 255, 0.85); }
.ab-help-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1rem; }
.ab-help-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 12px; background: #fff; color: var(--b-rang-deep); font-weight: 600; }
.ab-help-btn .b-icon { width: 1.125rem; height: 1.125rem; }
.ab-help-call:hover .ab-help-btn { background: var(--b-rang-glow); }
.ab-help-alt { font-size: var(--b-t-small); color: rgba(255, 255, 255, 0.75); }
.ab-help-side { display: grid; gap: 1.25rem; }
.ab-help-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1.5rem; border-radius: var(--b-r-block); background: #fff; box-shadow: 0 0 0 1px var(--b-rule); color: var(--b-ink); text-decoration: none; transition: box-shadow 160ms; }
.ab-help-card:hover { box-shadow: 0 0 0 1.5px var(--b-rang), 0 14px 30px -22px rgba(4, 37, 43, 0.4); }
.ab-help-card > span:nth-child(2) { display: grid; gap: 0.25rem; }
.ab-help-card b { font-size: 1.125rem; font-weight: 600; }
.ab-help-card .b-num { color: var(--b-rang); font-weight: 600; overflow-wrap: anywhere; }
.ab-help-card small { font-size: var(--b-t-small); color: var(--b-ink-2); }
.ab-help-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: color-mix(in srgb, var(--b-rang) 10%, #fff); color: var(--b-rang); }
.ab-help-ic .b-icon { width: 1.375rem; height: 1.375rem; }
.ab-help-go { width: 1.25rem; height: 1.25rem; color: var(--b-ink-3); margin-top: 0.25rem; }
.ab-last { padding-bottom: 6rem; }
@media (max-width: 959px) {
  .ab-faqs { grid-template-columns: minmax(0, 1fr); }
  .ab-faq-side { position: static; }
  .ab-help-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .ab-opts { grid-template-columns: minmax(0, 1fr); }
  .ab-q summary { font-size: 1.0625rem; }
  .ab-q p { padding-inline-end: 0; }
  .ab-help-call { min-height: 0; padding: 1.5rem; }
}
:root[data-contrast="high"] .ab-help-call { background: #fff; color: #000; box-shadow: 0 0 0 2px #000; }
:root[data-contrast="high"] .ab-help-call * { color: #000 !important; }

.ab-where .b-carousel-track { align-items: start; }

@media (max-width: 1099px) {
  .ab-k { grid-template-columns: minmax(0, 1fr); }
  .ab-device-wrap { justify-self: start; width: min(100%, 32rem); }
  /* the three phones swipe sideways instead of squeezing */
  .ab-screens { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 19.5rem; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--b-gutter)); padding: 0.5rem var(--b-gutter) 1rem; scroll-padding-inline: var(--b-gutter); }
  .ab-screens::-webkit-scrollbar { display: none; }
  .ab-screens > li { scroll-snap-align: start; }
}
@media (max-width: 599px) {
  .ab-opts { grid-template-columns: minmax(0, 1fr); }
  .ab-band > .b-block { padding-block: 3.5rem; }
  .ab-screens { grid-auto-columns: 82%; }
  .ab-device-wrap { padding: 2rem 1rem 1.25rem; }
}
:root[data-contrast="high"] .ab-band { background: #fff; color: #000; }
:root[data-contrast="high"] .ab-band-head h2, :root[data-contrast="high"] .ab-band-head p, :root[data-contrast="high"] .ab-screens > li > b, :root[data-contrast="high"] .ab-band-foot a { color: #000; }
.ph-home { position: relative; z-index: 2; margin-top: -58px; padding: 0 14px; display: grid; gap: 12px; }
.ph-card--home { height: 112px; box-shadow: 0 10px 22px -12px rgba(4, 37, 43, 0.6); }
.ph-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ph-tiles > span { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e6e8eb; }
.ph-tiles .b-icon { width: 20px; height: 20px; color: var(--b-rang); }
.ph-tiles small { font-size: 11.5px; font-weight: 600; color: #14162b; line-height: 1.25; }

/* ================================================================ round 11 */
/* The create journey, refined: one accent for where you are, green for what
   is done, quiet grey for what is next; real OTP boxes; a calm reveal. */
.ab-flow { padding: 1rem 1.5rem 1.25rem; }
.st { padding-block: 0.5rem; }
.st::before { top: 2.75rem; bottom: -0.25rem; border-inline-start: 2px solid var(--b-rule); }
.st[data-state="done"]::before { border-color: var(--b-patti); }
.st-n { width: 1.75rem; height: 1.75rem; font-size: 0.8125rem; box-shadow: inset 0 0 0 1.5px var(--b-rule-strong); }
.st { grid-template-columns: 1.75rem minmax(0, 1fr); }
.st::before { inset-inline-start: calc(0.875rem - 1px); }
.st-head { min-height: 1.75rem; }
.st[data-state="now"] .st-n { background: var(--b-neel); color: #fff; box-shadow: 0 0 0 4px var(--b-neel-tint); }
.st[data-state="done"] .st-n { background: var(--b-patti); }
/* finished steps become one quiet line */
.st[data-state="done"] { padding-block: 0.3rem; }
.st[data-state="done"] .st-title { font-size: 0.9375rem; font-weight: 500; color: var(--b-ink-2); }
.st[data-state="done"] .st-sum { font-size: var(--b-t-micro); font-weight: 500; }
.st[data-state="now"] .st-title { font-size: 1.1875rem; }
.st[data-state="next"] .st-title { font-size: 0.9375rem; }
/* the open step slides down into place */
.st-body { gap: 0.625rem; padding-top: 0.75rem; animation: ab-open 380ms var(--b-ease-deal, cubic-bezier(.2,.8,.2,1)) backwards; }
@keyframes ab-open { from { clip-path: inset(0 -1rem 100% -1rem); transform: translateY(-6px); } to { clip-path: inset(-1rem -1rem -1rem -1rem); transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-body { animation: none; } }

/* fields: white, ringed, calm */
.ab-input { background: #fff; box-shadow: inset 0 0 0 1.5px var(--b-rule-strong); padding: 0.375rem 0.875rem; min-height: 3.25rem; }
.ab-input:hover { box-shadow: inset 0 0 0 1.5px var(--b-ink-3); }
.ab-input:focus-within { box-shadow: inset 0 0 0 2px var(--b-neel), 0 0 0 4px var(--b-neel-tint); }
.ab-input.is-error { background: #fff; box-shadow: inset 0 0 0 2px var(--b-sindoor), 0 0 0 4px var(--b-sindoor-tint); }
.ab-input > .b-icon { color: var(--b-ink-3); }
.ab-input:focus-within > .b-icon { color: var(--b-neel); }
.ab-input input { font-size: 1.25rem; letter-spacing: 0.06em; }
.ab-meter { display: none !important; }
.ab-input:has(.ab-meter) { padding-bottom: 0.375rem; }
.ab-count { flex: none; font-size: var(--b-t-small); font-weight: 600; color: var(--b-ink-3); }
.ab-count:empty { display: none; }
.ab-count.is-full { color: var(--b-patti); }
.ab-err { display: flex; align-items: center; gap: 0.375rem; font-size: var(--b-t-small); }
.ab-err::before { content: "!"; display: grid; place-items: center; flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--b-sindoor); color: #fff; font-size: 0.6875rem; font-weight: 700; }
.ab-err[hidden] { display: none; }
.ab-hint { font-size: var(--b-t-small); color: var(--b-ink-3); }
.ab-consent { padding: 0.75rem 0.875rem; border-radius: 12px; background: var(--b-sunk); font-size: var(--b-t-small); }
.ab-consent:has(input:checked) { background: color-mix(in srgb, var(--b-neel) 7%, #fff); }

/* the OTP: six boxes over one real input */
.ab-input--otp { position: relative; padding: 0; min-height: 0; background: none; box-shadow: none !important; }
.ab-input--otp > .b-icon { display: none; }
.ab-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; width: 100%; direction: ltr; }
.ab-otp span { display: grid; place-items: center; height: 3.5rem; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--b-rule-strong); font-family: "Anek Latin", sans-serif; font-size: 1.625rem; font-weight: 600; color: var(--b-ink); transition: box-shadow 120ms; }
.ab-otp span.is-on { box-shadow: inset 0 0 0 1.5px var(--b-ink-3); animation: ab-pop 180ms ease-out; }
.ab-otp span.is-cur { box-shadow: inset 0 0 0 2px var(--b-neel), 0 0 0 4px var(--b-neel-tint); }
.ab-otp span.is-cur:empty::after { content: ""; width: 2px; height: 1.5rem; background: var(--b-neel); animation: ab-caret 1s steps(1) infinite; }
.ab-input--otp.is-error .ab-otp span { box-shadow: inset 0 0 0 2px var(--b-sindoor); }
.ab-input--otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.01; color: transparent; caret-color: transparent; font-size: 16px; cursor: pointer; }
@keyframes ab-pop { 50% { transform: scale(1.06); } }
@keyframes ab-caret { 50% { opacity: 0; } }
.st-links { justify-content: flex-start; gap: 0 1.25rem; }
.st-links .ab-link:disabled { color: var(--b-ink-3); cursor: default; text-decoration: none; font-weight: 500; }

/* the address: availability takes the rule's place once you type */
.ab-avail { font-size: var(--b-t-small); }
.st-body:has(.ab-avail[data-state="free"], .ab-avail[data-state="taken"], .ab-avail[data-state="checking"]) #c-addr-rule { display: none; }
.ab-suggest { gap: 0.4rem; }
.ab-suggest > span:first-child { font-size: var(--b-t-small); }
.ab-sug { padding: 0.35rem 0.75rem; border-radius: 999px; background: #fff; color: var(--b-ink); box-shadow: inset 0 0 0 1.5px var(--b-rule-strong); font-weight: 500; }
.ab-sug:hover { background: var(--b-neel-tint); color: var(--b-neel); box-shadow: inset 0 0 0 1.5px var(--b-neel); }

/* the finished step: a receipt you can copy from */
.ab-kv { padding: 0.25rem 0; background: #fff; box-shadow: 0 0 0 1px var(--b-rule); border-radius: 14px; }
.ab-kv > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dt btn" "dd btn"; align-items: center; gap: 0.125rem 0.75rem; padding: 0.75rem 1rem; }
.ab-kv > div + div { border-top: 1px solid var(--b-rule); }
.ab-kv dt { grid-area: dt; font-size: var(--b-t-micro); }
.ab-kv dd { grid-area: dd; margin: 0; text-align: start; font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-copy { grid-area: btn; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.7rem; border: 0; border-radius: 999px; background: var(--b-sunk); color: var(--b-ink-2); font: inherit; font-size: var(--b-t-micro); font-weight: 600; cursor: pointer; }
.ab-copy .b-icon { width: 0.875rem; height: 0.875rem; }
.ab-copy:hover { background: var(--b-neel-tint); color: var(--b-neel); }
.ab-copy.is-done { background: var(--b-patti-tint); color: var(--b-patti); }
.st[data-step="done"][data-state="now"] .st-sum { display: inline-flex; justify-self: start; margin-top: 0.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--b-patti-tint); color: var(--b-patti); font-weight: 600; font-size: var(--b-t-micro); }
@media (max-width: 479px) {
  .ab-flow { padding-inline: 1.125rem; }
  .ab-kv > div { padding-inline: 0.875rem; }
  .ab-kv dd { font-size: 1.0625rem; letter-spacing: 0.01em; overflow: visible; text-overflow: clip; }
  .ab-copy { padding: 0.5rem; }
  .ab-copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ab-otp { gap: 0.375rem; }
  .ab-otp span { height: 3.125rem; font-size: 1.375rem; }
}