/* Samanvay (/samanvay/): a deck on Deep Navy and Light Background, and a loading screen that is a wall of dials (next/samanvay.js moves them).
   Colours (the owner's references): Deep Navy #111A2E (dark ground), Light Background #F5F7FC (light ground and type on navy), FRAE Blue #2457D6 (primary
   buttons, accents on the light slides: 5.75:1 on Light, and Light on it 5.75:1), Charcoal #242124 (type on the light slides, 14.8:1). The Blue itself is only
   2.8:1 on Navy, so wherever blue is TEXT or a line on Navy it is a lighter tint of it, #8FA8F0 (derived: Blue mixed toward Light; 7.5:1 on Navy). Other derived
   tints, all secondary text or decoration: on Navy #C4CDE2 (10.2:1) and #AAB6D2 (8.5:1), lines #26345A / rgba(143,168,240,.25); on Light #3F3C42 (9.9:1),
   #5C5862 (6.5:1), lines #D5DBEA. Light on Navy is 16.2:1. No pure white or black.
   Type: Inter, and Noto Serif Devanagari for Devanagari (both from the pack). The grounds are flat (html[data-field="flat"]): no contour lines, only the
   squared-off edge (pillars) and its shadow, as on Saksham. */
/* the --sv-* colour tokens are in next/dials.css (loaded first; the homepage uses them too) */

/* the page's ink is Deep Navy and its paper the cool Light Background, so everything that paints them here (the loader, the menu panel, the hint, the nav text) follows */
.sv-page { --ink: var(--sv-navy); --paper: var(--sv-light); background: var(--sv-navy); }
.sv-page .ground { background-color: var(--sv-navy); }
html:has(.sv-page) { background: var(--sv-navy); }

/* dark ground = Deep Navy; light ground = Light Background with Charcoal type */
.sv-page .beat[data-tone="ink"], body.sv-page[data-tone="ink"], .sv-page [data-zone="ink"] {
  --ground: var(--sv-navy); --fg: var(--sv-light); --fg-2: var(--sv-body); --fg-3: var(--sv-label); --line: rgba(143, 168, 240, .25);
  --accent: var(--sv-blue-lt); --accent-text: var(--sv-blue-lt); --hl-bg: var(--sv-light); --hl-fg: var(--sv-navy);
}
.sv-page .beat[data-tone="paper"], body.sv-page[data-tone="paper"], .sv-page [data-zone="paper"] {
  --ground: var(--sv-light); --fg: var(--sv-char); --fg-2: #3F3C42; --fg-3: #5C5862; --line: #D5DBEA;
  --accent: var(--sv-blue); --accent-text: var(--sv-blue); --hl-bg: var(--sv-navy); --hl-fg: var(--sv-light);
}
/* buttons take their colours from the ground they sit on */
.sv-page .beat[data-tone="ink"], body.sv-page[data-tone="ink"], .sv-page [data-zone="ink"]   { --btn-bg: var(--sv-blue); --btn-fg: var(--sv-light); --btn-hv-bg: var(--sv-light); --btn-hv-fg: var(--sv-navy); }
.sv-page .beat[data-tone="paper"], body.sv-page[data-tone="paper"], .sv-page [data-zone="paper"] { --btn-bg: var(--sv-blue); --btn-fg: var(--sv-light); --btn-hv-bg: var(--sv-navy); --btn-hv-fg: var(--sv-light); }
.sv-page .btn-a { background: var(--btn-bg); color: var(--btn-fg); }
.sv-page .btn-a:hover, .sv-page .btn-a:focus-visible { background: var(--btn-hv-bg); color: var(--btn-hv-fg); }
.sv-page .btn-b { border: 1px solid var(--fg-3); color: var(--fg); }
.sv-page .btn-b:hover, .sv-page .btn-b:focus-visible { border-color: var(--accent); color: var(--fg); background: rgba(36, 87, 214, .14); }
.sv-page .btn { font-size: clamp(15px, 1.3vw, 19px); padding: clamp(11px, 1.2vw, 15px) clamp(18px, 2vw, 28px); }
.sv-page .btn:focus-visible, .sv-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hint { background: var(--sv-navy); color: var(--sv-light); border: 1px solid rgba(143, 168, 240, .3); }
body.on-first .edge-l { display: none; }

/* 1 · the hero ------------------------------------------------------------------------------------------------------------------------------------ */
.sv .frame { justify-content: center; }
.sv-grid { width: 100%; }   /* the copy alone: the wall of instruments is the hero's picture (section 5) */
.sv-copy > * { max-width: 660px; }
.sv-eyebrow { display: flex; align-items: center; gap: 13px; font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sv-blue-lt); }
.sv-eyebrow::before { content: ""; flex: none; width: .7em; height: .7em; background: var(--sv-blue); }
.sv-name { margin-top: clamp(6px, 1.4vh, 16px); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 clamp(12px, 1.6vw, 26px); max-width: none; line-height: 1; padding-bottom: .06em; }
.sv-latin { font-family: var(--display); font-weight: 600; font-size: clamp(56px, 7.3vw, 124px); letter-spacing: -.045em; line-height: 1; color: var(--sv-light); }
.sv-dev { font-family: var(--dev); font-weight: 500; font-size: clamp(20px, 2.2vw, 36px); line-height: 1.5; color: var(--sv-blue-lt); }
.sv-kind { margin-top: clamp(4px, 1vh, 12px); font-family: var(--display); font-size: var(--t-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sv-label); }
.sv-sub { margin-top: clamp(16px, 3vh, 34px); font-family: var(--display); font-weight: 500; font-size: clamp(25px, 3.1vw, 48px); line-height: 1.12; letter-spacing: -.03em; color: var(--sv-light); text-wrap: balance; }
.sv-l1, .sv-l2 { display: block; }
.sv-l2 { color: var(--sv-blue-lt); }
.sv-lede { margin-top: clamp(14px, 2.4vh, 26px); max-width: 52ch; color: var(--sv-body); }
.sv .acts { margin-top: clamp(20px, 3.4vh, 38px); }
.sv-note { margin-top: clamp(14px, 2.4vh, 28px); padding-left: 14px; border-left: 2px solid var(--accent); font-size: var(--t-dense); line-height: 1.55; color: var(--fg-3); }

/* 2 · the dials are in next/dials.css (shared with the homepage's Samanvay hover) ------------------------------------------------------------------ */

/* 3 · slides 2 to 9 --------------------------------------------------------------------------------------------------------------------------------- */
.svs .frame { justify-content: center; }
.svs .frame > div { width: 100%; }
.svs h2 { font-family: var(--display); font-weight: 600; font-size: clamp(27px, 3.6vw, 58px); line-height: 1.08; letter-spacing: -.03em; color: var(--fg); margin-top: clamp(12px, 2vh, 20px); max-width: 24ch; text-wrap: balance; }
.svs .lede { margin-top: clamp(14px, 2.2vh, 24px); max-width: 58ch; color: var(--fg-2); }
.svs strong { color: var(--fg); font-weight: 600; }

.svs-two { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 84px); align-items: center; }
.svs-quote { margin: 0; padding-left: clamp(16px, 2vw, 28px); border-left: 2px solid var(--accent); font-family: var(--display); font-weight: 500; font-size: clamp(19px, 2vw, 30px); line-height: 1.34; letter-spacing: -.022em; color: var(--fg); }
.svs-q1 { color: var(--accent-text); }
.svs-q2 { margin-top: clamp(14px, 2.4vh, 26px); color: var(--accent-text); }

.svs-cards { margin-top: clamp(18px, 3.2vh, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); max-width: 1060px; border-top: 1px solid var(--line); }
.svs-card { padding: clamp(12px, 2vh, 22px) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(12px, 1.4vw, 20px); }
.svs-card:not(:has(.svs-n)) { grid-template-columns: minmax(0, 1fr); }
.svs-n { font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; color: var(--accent-text); padding-top: 4px; }
.svs-card h3 { font-family: var(--display); font-size: var(--t-detail); font-weight: 600; letter-spacing: -.012em; line-height: 1.28; color: var(--fg); }
.svs-card p { margin-top: 6px; font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); max-width: 52ch; }

.svs-frame { margin-top: clamp(18px, 3.2vh, 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); }
.svs-pers { border-top: 1px solid var(--line); padding-top: clamp(12px, 2vh, 20px); }
.svs-pers .sv-dial { --sv-t: 2s; max-width: 230px; margin-bottom: clamp(8px, 1.4vh, 16px); }
.svs-pers h3 { font-family: var(--display); font-size: clamp(18px, 1.7vw, 25px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--fg); }
.svs-pers p { margin-top: 6px; font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); max-width: 30ch; }

.svs-who { margin-top: clamp(18px, 3.2vh, 38px); list-style: none; padding: 0; max-width: 780px; border-top: 1px solid var(--line); }
.svs-who li { display: flex; align-items: center; gap: 14px; padding: clamp(11px, 1.9vh, 19px) 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 500; font-size: clamp(18px, 2vw, 30px); line-height: 1.2; letter-spacing: -.02em; color: var(--fg); }
.svs-who li::before { content: ""; flex: none; width: .5em; height: .5em; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.svs-first { margin-top: clamp(14px, 2.4vh, 26px); max-width: 60ch; font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); }

.svs-fam { margin-top: clamp(16px, 2.8vh, 34px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 26px); max-width: 1000px; }
.svs-fcard { display: flex; flex-direction: column; gap: 8px; padding: clamp(14px, 1.9vw, 26px); border: 1px solid var(--line); }
.svs-fcard--here { border-color: var(--accent); background: rgba(36, 87, 214, .06); }
.svs-tag, .svs-here { font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.svs-here { color: var(--accent-text); margin-top: auto; }
.svs-fcard h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.1; letter-spacing: -.03em; color: var(--fg); }
.svs-fcard p { font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); max-width: 46ch; }
.svs-link { margin-top: auto; align-self: flex-start; font-family: var(--display); font-weight: 600; font-size: var(--t-detail); color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.svs-link::after { content: " →"; }
.svs-line { margin-top: clamp(14px, 2.4vh, 26px); max-width: 64ch; font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); }
.svs-need { margin-top: clamp(12px, 2vh, 22px); padding-left: 14px; border-left: 2px solid var(--accent); max-width: 70ch; }
.svs-need h3 { font-family: var(--display); font-size: var(--t-detail); font-weight: 600; color: var(--fg); }
.svs-need p { margin-top: 4px; font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); }

.svs-close h2 { font-size: clamp(32px, 5.2vw, 84px); max-width: 14ch; }
.svs-close .acts { margin-top: clamp(20px, 3.4vh, 38px); display: flex; align-items: center; flex-wrap: wrap; gap: 16px clamp(18px, 2.4vw, 34px); }
.svs-talk { font-family: var(--display); font-weight: 600; font-size: clamp(15px, 1.3vw, 19px); color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.svs-talk::after { content: " →"; }
.svs-ready { margin-top: clamp(20px, 3.4vh, 38px); max-width: 52ch; font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); }
.svs-ready a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent); }

/* the pause control (WCAG 2.2.2): the dials on the slides keep changing, so they can be stopped */
.sv-pause { position: fixed; right: var(--gut); bottom: clamp(52px, 8vh, 80px); z-index: 45; width: 38px; height: 38px; padding: 0; background: rgba(17, 26, 46, .85); border: 1px solid rgba(143, 168, 240, .6); color: var(--sv-blue-lt); cursor: pointer; }
.sv-pause::before { content: ""; position: absolute; left: 13px; top: 11px; width: 4px; height: 14px; background: currentColor; box-shadow: 7px 0 0 currentColor; }
.sv-pause.is-paused::before { left: 14px; top: 10px; width: 12px; height: 16px; box-shadow: none; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sv-pause:hover, .sv-pause:focus-visible { background: rgba(36, 87, 214, .35); color: var(--sv-light); }
.sv-pause:focus-visible { outline: 2px solid var(--sv-blue-lt); outline-offset: 3px; }
.sv-pause[hidden] { display: none; }

@media (max-width: 900px) {
  .svs-two, .svs-cards, .svs-fam { grid-template-columns: 1fr; }
  .svs-frame { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sv-pause { display: none; }
  .sv-latin { font-size: clamp(54px, 17vw, 100px); }
  .svs-two { gap: 18px; }
  .svs-pers .sv-dial { max-width: 120px; }
  .svs-pers p { display: none; }
}
@media (max-width: 900px) {
  .svs h2 { font-size: clamp(24px, 6.6vw, 36px); }
  .svs-cards { margin-top: 12px; }
  .svs-card { padding: 9px 0; }
  .svs-card p { margin-top: 3px; font-size: 13px; line-height: 1.45; }
  .svs-fam { margin-top: 12px; gap: 10px; }
  .svs-fcard { padding: 12px 14px; gap: 5px; }
  .svs-fcard h3 { font-size: 22px; }
  .svs-fcard p { font-size: 13px; line-height: 1.45; }
  .svs-line { font-size: 14px; margin-top: 12px; }
  .svs-need { margin-top: 10px; }
  .svs-need p { display: none; }
}
@media (max-width: 900px) and (max-height: 740px) { .svs-card p { display: none; } }
@media (max-height: 700px) { .sv-note { display: none; } .sv-lede { font-size: 15px; } }
html[lang="hi"] .sv-sub, html[lang="hi"] .svs h2 { letter-spacing: 0; line-height: 1.3; }
html[lang="hi"] .sv-eyebrow, html[lang="hi"] .sv-kind { letter-spacing: 0; text-transform: none; }

/* 4 · loading screen (next/product-loader.js decides when it lifts; the shared .loader / html.is-loading rules are in overhaul.css) ---------------------
   Deep Navy, and the WHOLE screen is a wall of dials (sixty on a desktop, forty-two on a tablet, thirty-two on a phone), each rising and falling. They appear
   from the middle outwards; then a soft navy plate clears a space in the middle and "Samanvay" fades in over it at the size it has on the hero. When the page is
   ready the wall and the name lift away while the ground dissolves into the hero. The figures are decorative. Reduced motion: still, then a fade. */
.sv-load { --sv-t: .9s; }
.sv-load__wall { position: absolute; inset: 0; --cols: 10; --rows: 6; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); padding: clamp(6px, .8vw, 14px);
  transition: opacity .8s ease, transform 1s var(--ease); }
.sv-load__wall .sv-w { opacity: 0; place-self: center; width: 100%; max-width: calc((100svh - 2 * clamp(6px, .8vw, 14px)) / var(--rows) * .9); }
.sv-load__plate { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(ellipse 46% 25% at 50% 50%, rgba(17, 26, 46, .97) 0%, rgba(17, 26, 46, .92) 58%, rgba(17, 26, 46, 0) 100%); }
.sv-load__word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gut); opacity: 0; transition: opacity .5s ease, transform .9s var(--ease); }
.sv-load__word .sv-name { margin: 0; justify-content: center; }
.sv-load.is-go .sv-load__wall .sv-w { animation: sv-pop .7s var(--ease) calc(var(--a) * 70ms) forwards; }
.sv-load.is-go .sv-load__plate { animation: sv-in .8s ease .9s forwards; }
.sv-load.is-go .sv-load__word { animation: sv-in .9s ease 1.05s forwards; }
@keyframes sv-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sv-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
/* Lifting, in one piece. From the first frame the loader's own navy is clear (it is the page's ground, so nothing is uncovered); the wall is already in its layer UNDER the page's
   content (next/samanvay.js), dimming under the veil; the middle plate fades; the loader's name glides to its place in the hero and is handed to the hero's own name; the hero's
   copy comes in over the dimmed wall; and the nav and footer, which waited out of sight, fade in. Nothing that is text changes layer, so nothing can pop. */
html.is-loading .sv-load.is-leaving { background-color: transparent; transition: none; }
html.is-loading .nav, html.is-loading .deck-foot, html.is-loading .sv-pause { opacity: 0; }
html.is-loading:has(.sv-load.is-leaving) .nav, html.is-loading:has(.sv-load.is-leaving) .deck-foot, html.is-loading:has(.sv-load.is-leaving) .sv-pause { opacity: 1; transition: opacity .8s ease .15s; }
html.is-loading .sv-load.is-leaving .sv-load__plate { animation: sv-out .8s ease forwards; }   /* a new animation: it takes over from the one that holds the plate at 1 and fades from there */
@keyframes sv-out { from { opacity: 1; } to { opacity: 0; } }
html.sv-flip .sv-copy .sv-name.b { opacity: 0 !important; }   /* while the loader's name glides to it, the hero's own name waits (its entrance runs unseen, and is finished when it is handed over) */
@media (max-width: 1000px) {
  .sv-load__wall { --cols: 6; --rows: 7; }
  .sv-load__wall .sv-w:nth-child(n+43) { display: none; }
  .sv-load.is-go .sv-load__wall .sv-w { animation-delay: calc(var(--b) * 70ms); }
}
@media (max-width: 600px) {
  .sv-load__wall { --cols: 4; --rows: 8; }
  .sv-load__wall .sv-w:nth-child(n+33) { display: none; }
  .sv-load.is-go .sv-load__wall .sv-w { animation-delay: calc(var(--m) * 70ms); }
  .sv-load__plate { background: radial-gradient(ellipse 95% 15% at 50% 50%, rgba(17, 26, 46, .97) 0%, rgba(17, 26, 46, .92) 62%, rgba(17, 26, 46, 0) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-load__wall .sv-w, .sv-load__plate, .sv-load__word { opacity: 1; animation: none !important; transform: none; }
  .sv-load__wall, .sv-load__word { transition: none; }
  .sv-w__val, .sv-w__needle, .sv-w__rot, .sv-w__mark, .sv-w__fill, .sv-w__bar, .sv-w__seg, .sv-w__dot { transition: none; }
  html.is-loading .sv-load.is-leaving .sv-load__wall, html.is-loading .sv-load.is-leaving .sv-load__word { transform: none; }
}

/* 5 · the wall stays ---------------------------------------------------------------------------------------------------------------------------------
   When the loading screen lifts, next/samanvay.js moves its instruments (the same elements, with their readings) into this layer behind the hero. They fade down to a dim
   background (the track's opacity) under a veil that is darkest on the left, where the text is (the veil fades in with them), and drift UP slowly: the track is moved by the
   script, and the row that leaves at the top is put back at the bottom. Away from the first slide the whole thing fades out. Worst case for the type over it: the wall at .27
   under the veil's lightest left-hand value (.6 at the middle of the screen) leaves the dial strokes at about 11% of their brightness behind the text. */
.sv-bgwall { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; --sv-t: 1.8s; }
.sv-bgwall::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease;
  background: linear-gradient(90deg, rgba(17, 26, 46, .86) 0%, rgba(17, 26, 46, .6) 52%, rgba(17, 26, 46, .12) 92%); }
.sv-track { padding: var(--pad); will-change: transform; transition: opacity 1.4s ease; }
.sv-bgwall.is-instant .sv-track, .sv-bgwall.is-instant::after { transition: none; }   /* taking over from the loader's own copy of the same state: no fade */
.sv-bgwall.is-bg .sv-track { opacity: .27; }
.sv-bgwall.is-bg::after { opacity: 1; }
body:not(.on-first) .sv-bgwall.is-bg .sv-track, body:not(.on-first) .sv-bgwall.is-bg::after { opacity: 0; transition-duration: .5s; }
.sv-row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); height: var(--rowh); }
.sv-bgwall .sv-w { opacity: 1; place-self: center; width: 100%; max-width: calc(var(--rowh) * .9); }
@media (max-width: 900px) { .sv-bgwall::after { background: rgba(17, 26, 46, .58); } .sv-bgwall.is-bg .sv-track { opacity: .22; } }
@media (prefers-reduced-motion: reduce) { .sv-track, .sv-bgwall::after { transition-duration: .01s; } }

/* the rewrite: 2 The question · 3 What you see (one illustrative cockpit) · 4 How it works · 5 Who it's for ----------------------------------------------------------------- */
.svs-today { margin-top: clamp(16px, 3vh, 34px); list-style: none; padding: 0; max-width: 520px; border-top: 1px solid var(--line); }
.svs-today li { padding: clamp(9px, 1.6vh, 15px) 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); line-height: 1.4; color: var(--fg-2); }
.svs-quote p:first-child { color: var(--fg-2); }
.svs-quote .svs-q2 { font-size: clamp(24px, 2.8vw, 44px); line-height: 1.16; letter-spacing: -.03em; }

.svs-cockpit { margin-top: clamp(14px, 2.6vh, 30px); max-width: 1180px; border: 1px solid var(--line); background: rgba(245, 247, 252, .04); }
.svs-ck-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px clamp(14px, 1.6vw, 22px); border-bottom: 1px solid var(--line); font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.svs-ck-h em { font-style: normal; letter-spacing: .1em; color: var(--fg-3); }
.svs-ck-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, 1fr); }
.svs-ck-body > section { padding: clamp(12px, 2vh, 20px) clamp(14px, 1.6vw, 22px); border-left: 1px solid var(--line); min-width: 0; }
.svs-ck-body > section:first-child { border-left: 0; }
.svs-ck-body h3 { margin-bottom: clamp(8px, 1.4vh, 14px); font-family: var(--display); font-size: var(--t-detail); font-weight: 600; letter-spacing: -.012em; color: var(--fg); }
.svs-cap { margin-top: clamp(8px, 1.4vh, 14px); font-size: clamp(12.5px, .95vw, 14px); line-height: 1.5; color: var(--fg-3); }
.svs-ck-attn ol, .svs-ck-cal ul { list-style: none; padding: 0; display: grid; gap: clamp(7px, 1.2vh, 12px); }
.svs-ck-attn li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; align-items: baseline; }
.svs-ck-attn b { font-size: var(--t-dense); font-weight: 600; color: var(--fg); }
.svs-ck-attn li > span:last-child { grid-column: 1 / -1; font-size: clamp(12.5px, .95vw, 14px); line-height: 1.4; color: var(--fg-2); }
.svs-ck-cal li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; align-items: baseline; font-size: var(--t-dense); color: var(--fg); }
.svs-ck-cal li em { grid-column: 1; font-style: normal; font-size: clamp(12.5px, .95vw, 14px); color: var(--fg-2); }
.svs-ck-cal li .svs-st { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.svs-ck-cal .svs-next { margin-top: 2px; padding-top: clamp(7px, 1.2vh, 12px); border-top: 1px solid var(--line); }
.svs-ck-cal .svs-next em { color: var(--accent-text); font-weight: 600; }
.svs-st { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.svs-st::before { content: ""; flex: none; width: .75em; height: .75em; background: var(--accent); }
.svs-st--red::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }                                   /* a triangle: alert */
.svs-st--amber::before { border-radius: 50%; background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--accent); }   /* half a disc: watch */
.svs-st--green::before { border-radius: 50%; }                                                           /* a disc: fine */
.svs-ck-pers .svs-frame { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.4vh, 16px) clamp(10px, 1.2vw, 18px); }
.svs-ck-pers .svs-pers { border-top: 0; padding-top: 0; display: flex; align-items: center; gap: 10px; }
.svs-ck-pers .sv-dial { width: clamp(54px, 5.4vw, 84px); max-width: none; margin: 0; flex: none; }
.svs-ck-pers h4 { font-family: var(--display); font-size: var(--t-dense); font-weight: 600; line-height: 1.25; color: var(--fg); }

.svs-flow { margin-top: clamp(18px, 3.2vh, 40px); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 36px); max-width: 1180px; }
.svs-step { position: relative; border-top: 2px solid var(--accent); padding-top: clamp(12px, 2vh, 18px); }
.svs-step:not(:last-child)::after { content: "→"; position: absolute; top: clamp(8px, 1.4vh, 14px); right: calc(-1 * clamp(14px, 1.7vw, 26px)); font-size: var(--t-detail); color: var(--accent-text); }
.svs-step h3 { margin-top: 8px; font-family: var(--display); font-size: clamp(18px, 1.55vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.22; color: var(--fg); }
.svs-step p { margin-top: 8px; font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); }
.svs-flow + .svs-need { margin-top: clamp(16px, 3vh, 34px); }
.svs .lede strong { font-weight: 600; }
@media (max-width: 900px) {
  .svs-ck-body { grid-template-columns: 1fr; }
  .svs-ck-body > section { border-left: 0; border-top: 1px solid var(--line); padding: 10px 14px; }
  .svs-ck-body > section:first-child { border-top: 0; }
  .svs-ck-cal, .svs-ck-pers .svs-cap, .svs-ck-attn .svs-cap { display: none; }
  .svs-ck-body h3 { margin-bottom: 6px; }
  .svs-flow { grid-template-columns: 1fr; gap: 0; margin-top: 12px; }
  .svs-step { padding: 9px 0 10px; }
  .svs-step:not(:last-child)::after { display: none; }
  .svs-step p { margin-top: 3px; font-size: 13px; line-height: 1.45; }
  .svs-today li { padding: 8px 0; font-size: 15px; }
}
html[lang="hi"] .svs-step h3, html[lang="hi"] .svs-ck-body h3 { letter-spacing: 0; line-height: 1.4; }