/* ==========================================================================
   Saksham deck page. Loaded AFTER /next/base.css (deck primitives) and /next/overhaul.css (nav, hint, field, life).
   Direction: "Mulberry institution". Mulberry is the main dark ground, alternating with Paper; Gold is the one accent on
   Mulberry, Mulberry the accent on Paper. Grounds are flat (html[data-field="flat"]): no contour lines, only the layer
   edge and its shadow. Type is Inter (Noto Serif Devanagari for Hindi) only, the faces in the supplied typography specimen.
   Palette = the supplied Saksham identity (brand/saksham/colours): Mulberry #7A1F5B, Gold #F2A900, Ink #171717, Paper #F7F4ED.
   Contrast (WCAG 2.2): Paper on Mulberry 8.79:1; Gold on Mulberry 4.8:1; Ink on Gold 8.9:1; Mulberry on Paper 8.79:1.
   Ink type on Mulberry is 1.9:1 and is never used. data-tone="ink" below means "dark ground" (the engine's token set).
   Mulberry is outside the Frae brand pack and is used at the product owner's direction.
   ========================================================================== */

/* 0 · tokens ---------------------------------------------------------------------------------------------------- */
:root { --sak-plum: #7A1F5B; --sak-gold: #F2A900; }

body.sak { background: var(--sak-plum); }
.sak .ground { background-color: var(--sak-plum); }

/* dark ground = Mulberry. Secondary and muted type are Paper blended into Mulberry (solid colours, so contrast is exact):
   --fg-2 #E8DADC (7.0:1), --fg-3 #D4B8C4 (5.4:1). */
.sak .beat[data-tone="ink"], body.sak[data-tone="ink"], .sak [data-zone="ink"] {
  --ground: var(--sak-plum); --fg: var(--paper); --fg-2: #E8DADC; --fg-3: #D4B8C4; --line: rgba(247, 244, 237, .28);
  --accent: var(--sak-gold); --accent-text: var(--sak-gold); --hl-bg: var(--paper); --hl-fg: var(--sak-plum);
}
.sak .beat[data-tone="paper"], body.sak[data-tone="paper"], .sak [data-zone="paper"] { --accent: var(--sak-plum); --accent-text: var(--sak-plum); }

/* buttons take their colours from the ground they sit on */
.sak .beat[data-tone="paper"], body.sak[data-tone="paper"], .sak [data-zone="paper"] { --btn-bg: var(--sak-plum); --btn-fg: var(--paper); --btn-hv-bg: var(--ink); --btn-hv-fg: var(--paper); }
.sak .beat[data-tone="ink"], body.sak[data-tone="ink"], .sak [data-zone="ink"]   { --btn-bg: var(--sak-gold); --btn-fg: var(--ink); --btn-hv-bg: var(--paper); --btn-hv-fg: var(--ink); }
.sak .btn-a { background: var(--btn-bg); color: var(--btn-fg); }
.sak .btn-a:hover, .sak .btn-a:focus-visible { background: var(--btn-hv-bg); color: var(--btn-hv-fg); }
.sak .btn-b { border-color: var(--fg-3); }
.sak .btn { font-size: clamp(15px, 1.3vw, 19px); padding: clamp(11px, 1.2vw, 15px) clamp(18px, 2vw, 28px); }

/* dark boxes on the Mulberry slides: Ink laid over Mulberry, with a Paper hairline */
.beat[data-tone="ink"] .sk-mock, .beat[data-tone="ink"] .sk-counter { background: rgba(23, 23, 23, .3); border-color: rgba(247, 244, 237, .22); }
.hint { background: var(--ink); color: var(--paper); border-color: rgba(247, 244, 237, .22); }
body.on-cover .edge-l { display: none; }   /* the cover has no "back" */

/* the supplied lockup in Paper colour: the white variant (logo-primary-horizontal-white.svg) is used as a MASK, so the file is
   untouched and the colour is Paper #F7F4ED instead of its own pure #FFFFFF (the pack rules out pure white). The file is a
   square 1027 x 1024 artboard; the lockup is 547 x 136 units at (228, 444), so the mask is scaled and offset to show just it. */
.sk-mark, .sk-load__mark {
  --w: clamp(190px, 24vw, 340px);
  display: block; width: var(--w); height: calc(var(--w) * .2485); background: var(--paper);
  -webkit-mask: url("/assets/saksham/brand/logo-primary-horizontal-white.svg") no-repeat calc(var(--w) * -.4166) calc(var(--w) * -.8113) / calc(var(--w) * 1.8765) auto;
          mask: url("/assets/saksham/brand/logo-primary-horizontal-white.svg") no-repeat calc(var(--w) * -.4166) calc(var(--w) * -.8113) / calc(var(--w) * 1.8765) auto;
}

/* 1 · cover: full-bleed Mulberry, the lockup, a very large headline ------------------------------------------------ */
.sk-cover { justify-content: center; gap: clamp(12px, 2.2vh, 26px); }
.sk-cover .sk-mark { margin-bottom: clamp(6px, 2.4vh, 30px); }
.sk-kicker { font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); }
.sk-cover h1 { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 6.6vw, 108px); line-height: 1.02; letter-spacing: -.035em; max-width: 13ch; color: var(--fg); text-wrap: balance; }
.sk-cover__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 72px); align-items: end; margin-top: clamp(6px, 1.6vh, 20px); }
.sk-cover .lede { margin: 0; font-size: clamp(15px, 1.3vw, 21px); max-width: 52ch; color: var(--fg-2); }
.sk-cover .acts { margin: 0; }
.sk-cover .sk-chips { margin-top: clamp(14px, 3vh, 36px); padding-top: clamp(12px, 2vh, 20px); border-top: 1px solid var(--line); }
.sk-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px clamp(14px, 1.8vw, 26px); font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.sk-chips li { display: flex; align-items: center; gap: 9px; }
.sk-chips li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sk-chips--col { flex-direction: column; align-items: flex-start; gap: 10px; letter-spacing: .1em; }
@media (max-width: 900px) {
  .sk-cover__row { grid-template-columns: 1fr; align-items: start; }
  .sk-cover .sk-chips { font-size: 11px; letter-spacing: .08em; }
}
@media (max-height: 700px) { .sk-cover .lede { display: none; } .sk-cover h1 { font-size: clamp(32px, 5vw, 64px); } }

/* 1a · loading screen: Ink, with the lockup in Paper colour. The overlay itself (position, Ink ground, fade, failsafe) is
   the shared .loader in overhaul.css; next/saksham-loader.js drives it. The lockup only fades in; it does not move. */
html.is-loading { background-color: var(--ink); }
.sk-load__mark { --w: clamp(200px, 34vw, 440px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: sk-load-in .55s var(--ease) .1s both; }
@keyframes sk-load-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sk-load__mark { animation: none; } }

/* 1b · drawn glyphs ---------------------------------------------------------------------------------------------
   The supplied Inter file is a Latin subset: it has no right or up-right arrow, tick, circles, triangle, diamond or rupee sign,
   so the browser would borrow them from Arial / Segoe UI Symbol / Cambria Math. Only the pack's fonts are to be used, so
   these are drawn with CSS shapes (decorative, aria-hidden; the words carry the meaning). */
:root {
  --arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 14'%3E%3Cpath d='M0 7h19M13 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  --arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 11 11 1M3 1h8v8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}
.btn.go::after { content: ""; display: inline-block; width: 1.05em; height: .68em; margin-left: .6em; vertical-align: -.01em; background: currentColor; -webkit-mask: var(--arrow-r) no-repeat center / contain; mask: var(--arrow-r) no-repeat center / contain; }
.ne { display: inline-block; width: .72em; height: .72em; margin-left: .45em; background: currentColor; -webkit-mask: var(--arrow-ne) no-repeat center / contain; mask: var(--arrow-ne) no-repeat center / contain; }
.ck { display: inline-block; flex: none; width: .72em; height: .38em; margin: .3em .6em 0 .1em; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg); }
.gl { display: inline-block; width: .62em; height: .62em; margin-right: .5em; vertical-align: -.02em; background: currentColor; color: var(--accent-text); }
.gl--dot { border-radius: 50%; }
.gl--half { border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
.gl--tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dm { display: inline-block; width: .62em; height: .62em; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* 2 · common content ---------------------------------------------------------------------------------------------- */
/* The text rises 20px into place as a slide arrives (overhaul.css section 5). A transformed child still counts towards a
   scroll region's scrollable overflow, so for a moment the region overflowed, grew a scrollbar and took 10px of width: the
   text reflowed ("bounced") and a bar flashed up mid-animation. The bottom padding (larger than the rise) keeps the risen
   text inside the region's own box, so it only scrolls when its content genuinely does not fit. */
.sk { display: flex; flex-direction: column; min-height: 0; max-height: 100%; padding-bottom: 28px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--fg-3) transparent; }
.sk:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.sk h2 { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: var(--t-head); line-height: 1.1; letter-spacing: -.03em; max-width: 22ch; color: var(--fg); }
.sk .rule { margin-top: 24px; flex: none; }
.sk h2, .sk-diff h3 { text-wrap: balance; }
.sk h2 + .lede { margin-top: 14px; }
#s07 h2 { max-width: 40ch; }
.sk .lede { max-width: 52ch; }
.sk-n { font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .09em; line-height: 1; color: var(--accent-text); }
.sk-note { margin-top: 18px; font-size: var(--t-dense); line-height: 1.6; color: var(--fg-3); max-width: 58ch; }
.sk-fine { font-size: var(--t-dense); line-height: 1.55; color: var(--fg-3); max-width: 62ch; }
.sk-sub { margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: var(--t-lede); letter-spacing: -.02em; color: var(--fg); }

/* two columns: heading left, content right */
.sk-split { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.5fr); gap: clamp(24px, 4.6vw, 80px); align-items: center; align-content: center; }
.sk-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sk-head .lede { margin-top: 20px; }
.sk-side { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 24px); align-items: flex-start; }
.sk-side .acts { margin-top: 4px; }

/* S2 · problems */
.sk-cards { margin-top: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(14px, 1.6vw, 24px); }
.sk-card:nth-child(3n + 1) { border-left: 1px solid var(--line); }
.sk-card:nth-child(-n + 3) { border-top: 1px solid var(--line); }
.sk-card h3 { margin-top: 10px; font-family: var(--display); font-size: var(--t-detail); font-weight: 600; letter-spacing: -.012em; line-height: 1.28; color: var(--fg); }
.sk-card p { margin-top: 6px; font-size: var(--t-dense); line-height: 1.5; color: var(--fg-2); }
.sk-close { margin-top: clamp(16px, 2vw, 26px); font-family: var(--display); font-weight: 600; font-size: var(--t-lede); line-height: 1.4; letter-spacing: -.02em; color: var(--fg); }

/* S3 / S4 · module rows */
.sk-row:first-child { border-top: 1px solid var(--line); }
.sk-row { display: grid; grid-template-columns: clamp(28px, 3vw, 44px) minmax(110px, .55fr) minmax(0, 1.6fr); gap: clamp(8px, 1.6vw, 26px); padding: clamp(8px, 1vw, 14px) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.sk-row h3 { font-family: var(--display); font-size: var(--t-detail); font-weight: 600; letter-spacing: -.012em; line-height: 1.28; color: var(--fg); }
.sk-row p { font-size: var(--t-dense); line-height: 1.5; color: var(--fg-2); }

/* S5 / S6 · differentiators with product illustrations */
.sk-top { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(14px, 3vw, 48px); flex-wrap: wrap; }
.sk-top .lede { margin: 0; max-width: 46ch; font-size: var(--t-body); }
.sk-diffs { margin-top: clamp(16px, 2.4vw, 32px); display: grid; gap: clamp(18px, 3vw, 56px); }
.sk-diffs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-diffs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 40px); }
.sk-diff { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 12px); min-width: 0; }
.sk-diff > .sk-n { font-size: clamp(24px, 2.8vw, 40px); letter-spacing: -.02em; }
.sk-diff h3 { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 28px); line-height: 1.2; letter-spacing: -.02em; color: var(--fg); }
.sk-diff p { font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); }
.sk-diff .sk-fine { font-size: clamp(12.5px, .95vw, 14px); }
.sk-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.sk-tags li { border: 1px solid var(--fg-3); padding: 3px 9px; font-family: var(--display); font-size: clamp(11.5px, .86vw, 13px); font-weight: 500; color: var(--fg-2); }

.sk-mock { margin-top: auto; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 5%, transparent); font-size: var(--t-dense); }
.sk-mock__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 14px; 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-3); }
.sk-mock__h em { font-style: normal; font-weight: 500; letter-spacing: .04em; text-transform: none; white-space: nowrap; }
.sk-kpi { display: grid; grid-template-columns: 1fr auto minmax(5.6em, auto); gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.sk-kpi:last-child, .sk-line:last-child { border-bottom: 0; }
.sk-kpi span:nth-child(2) { font-weight: 600; color: var(--fg); }
.sk-line > i:not(.ck) { font-style: normal; }
.sk-kpi:last-child .st { font-weight: 600; color: var(--accent-text); }
.sk-ai { padding: 12px 14px; display: grid; gap: 10px; }
.sk-ai .q { font-weight: 500; color: var(--fg); }
.sk-ai .a { color: var(--fg-2); line-height: 1.5; }
.sk-ai .acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.sk-ai .acts span { border: 1px solid var(--fg-3); padding: 3px 10px; font-size: clamp(12px, .9vw, 13.5px); font-weight: 500; color: var(--fg); }
.sk-line { display: flex; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.sk-line--warn { color: var(--fg); font-weight: 500; }
.sk-own { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.sk-own > div { padding: 10px 14px; display: grid; gap: 3px; }
.sk-own > div + div { border-left: 1px solid var(--line); }
.sk-own b { font-family: var(--display); font-size: var(--t-detail); font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.sk-own span { font-size: clamp(12px, .9vw, 13.5px); line-height: 1.4; color: var(--fg-3); }

/* S8 · journey */
.sk-stats { margin-top: clamp(16px, 2.4vw, 32px); display: grid; grid-template-columns: repeat(4, max-content); justify-content: start; gap: clamp(20px, 4.4vw, 72px); }
.sk-stats b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(38px, 4.6vw, 70px); line-height: .95; letter-spacing: -.03em; color: var(--fg); }
.sk-stats span { display: block; margin-top: 8px; font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.sk-phases { margin-top: clamp(18px, 2.6vw, 36px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 36px); }
.sk-phase { border-top: 2px solid var(--accent); padding-top: 12px; }
.sk-phase__h { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; margin-bottom: 8px; }
.sk-phase__h span { grid-column: 1 / -1; font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.sk-phase__h h3 { font-family: var(--display); font-size: var(--t-lede); font-weight: 600; letter-spacing: -.02em; color: var(--fg); }
.sk-phase__h em { font-style: normal; font-size: var(--t-dense); color: var(--fg-3); }
.sk-phase ol { list-style: none; }
.sk-phase li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--t-dense); color: var(--fg-2); }
.sk-phase li .nm { color: var(--fg); font-weight: 500; }
.sk-phase li .eta { color: var(--fg-3); white-space: nowrap; }
.sk-phase li.is-live .nm { font-weight: 600; }

/* S9 · founding programme */
.sk-lists { margin-top: clamp(16px, 2.2vw, 28px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 40px); }
.sk-lists h4 { font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.sk-lists ul { list-style: none; display: grid; gap: 8px; }
.sk-lists li { position: relative; padding-left: 1.3em; font-size: var(--t-dense); line-height: 1.5; color: var(--fg-2); }
.sk-lists li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5em; height: .5em; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sk-counter { border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 5%, transparent); padding: clamp(18px, 2.4vw, 34px); display: grid; gap: 6px; width: 100%; max-width: 440px; }
.sk-counter .n { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 8vw, 124px); line-height: .9; letter-spacing: -.04em; color: var(--fg); }
.sk-counter > span { font-size: var(--t-dense); color: var(--fg-2); }
.sk-counter .rem { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.sk-counter .rem b { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3vw, 44px); color: var(--accent-text); }
.sk-counter em { font-style: normal; font-size: var(--t-dense); color: var(--fg-3); }

/* S10 · terms */
.sk-terms { list-style: none; counter-reset: term; margin-top: clamp(18px, 2.4vw, 32px); columns: 2; column-gap: clamp(24px, 4.6vw, 80px); }
.sk-terms li { counter-increment: term; break-inside: avoid; position: relative; padding: 0 0 clamp(10px, 1.2vw, 16px) 2.4em; font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); }
.sk-terms li::before { content: "0" counter(term); position: absolute; left: 0; top: .1em; font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .09em; color: var(--accent-text); }
.sk-terms strong { color: var(--fg); font-weight: 600; }

/* the terms slide is long: a one-line heading and slightly smaller text keep nine terms in one box on a laptop */
#f02 h2 { max-width: none; font-size: clamp(26px, 2.8vw, 40px); }
#f02 .sk-terms { margin-top: clamp(14px, 1.8vw, 24px); }
#f02 .sk-terms li { font-size: clamp(13.5px, 1vw, 15.5px); line-height: 1.4; padding-bottom: clamp(7px, .85vw, 12px); }   /* tight enough that the nine terms fit without a bar on common laptop heights */
#f02 .rule { margin-top: 16px; }

/* S11 · final */
.sk-final { margin: 0 !important; max-width: 17ch !important; font-size: clamp(30px, min(5vw, 8vh), 76px) !important; line-height: 1.04 !important; }
.sk .sub { max-width: 46ch; }
.sk-trust { margin-top: clamp(26px, 4vw, 54px); padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 44px); }
.sk-trust h3 { font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; }
.sk-trust p { font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); }
.sk-trust + .sk-fine { margin-top: 14px; }

/* story · "A school, enabled": ONE slide, three steps (data-steps on the slide, data-step the current one). The school stays in the
   middle; the reasons are notes scattered round it. Moving between steps changes the page in real time: no transition, no entrance
   animation. The campus (tools/saksham-scene.cjs) is drawn in three states, each in its own block, and CSS shows the current one. */
.sk-steps { list-style: none; display: flex; align-items: flex-end; gap: clamp(14px, 2.6vw, 40px); flex: none; }
.sk-steps li { font-family: var(--display); font-size: clamp(14px, 1.25vw, 24px); font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--fg-3); }
.sk-steps button { display: flex; align-items: flex-end; gap: 10px; padding: 4px 2px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sk-steps button:hover { color: var(--fg); }
.sk-steps li i { display: block; width: 18px; border: 2px solid currentColor; }
.sk-steps li:nth-child(1) i { height: 12px; } .sk-steps li:nth-child(2) i { height: 22px; } .sk-steps li:nth-child(3) i { height: 32px; }
.sk-steps li.is-done i { background: currentColor; }
.sk-steps li.is-on { color: var(--fg); }
.sk-steps li.is-on i { background: var(--accent); border-color: var(--accent); }

.sk-story { gap: clamp(6px, 1.2vh, 14px); justify-content: center; }
.sc { visibility: hidden; }
#s02[data-step="1"] .sc-1, #s02[data-step="2"] .sc-2, #s02[data-step="3"] .sc-3 { visibility: visible; }
.sk-story__head, .sk-stage__fig { display: grid; }
.sk-story__head > .sc, .sk-stage__fig > .sc { grid-area: 1 / 1; }
.sk-story__head h2 { margin-top: 0; font-size: clamp(24px, 2.8vw, 42px); max-width: 34ch; }
.sk-story__head .lede { margin-top: 8px; font-size: var(--t-dense); max-width: 76ch; }
.sk-story__head .sk-close { margin-top: 6px; font-size: var(--t-body); }

.sk-stage { position: relative; height: clamp(300px, calc(100svh - 450px), 520px); margin-top: clamp(2px, .8vh, 10px); }
.sk-stage__fig { position: absolute; inset: 0; margin: 0; z-index: 0; pointer-events: none; }
.sk-stage__fig { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.sk-stage__fig > .sc { height: 100%; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.st-svg { display: block; height: 100%; width: auto; max-width: 62%; overflow: hidden; }
.sk-notes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* the reasons: sticky notes, scattered on purpose (a few degrees off, uneven spacing); step 3 answers them in tidy cards */
.note { position: absolute; left: var(--x); top: var(--y); width: var(--w, 21.5%); margin: 0; padding: clamp(5px, .7svh, 7px) clamp(10px, .9vw, 14px); transform: rotate(var(--r, 0deg)); background: var(--sak-gold); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--display); font-size: clamp(16px, min(1.42vw, 2.27svh), 26px); font-weight: 500; line-height: 1.34; letter-spacing: -.005em; pointer-events: auto; }
.note--tidy { background: var(--paper); border: 1.5px solid var(--sak-plum); box-shadow: 3px 3px 0 var(--sak-plum); font-weight: 400; }
.note--tidy h3 { margin-bottom: clamp(2px, .5svh, 4px); font-family: var(--display); font-size: clamp(14px, 1.25vw, 24px); font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--sak-plum); }
.note--tidy p { font-size: inherit; line-height: inherit; }

/* s02 on a desktop (VEL-CAP-0535, 7 Oct 2026, bigger labels and notes): the notes stand in two columns, one on each side of the campus, each column a flex stack, so larger type can never land a note on its neighbour; --x and --y
   (the percentages the notes used to be placed by) stay for the phone list. The stage takes the height the frame leaves (--fh the frame's inner height as next/base.css pads it: 9.6 / 7.6 vh, 9 / 7 vh up to 820px tall; --cc the height
   of everything above the stage, measured 258px at 1280 wide to 297px from 1500 wide); the campus is a little smaller to leave the columns room. Scoped to #s02 (the Saksham page only). */
@media (min-width: 901px) {
  #s02 .sk-stage { --fh: calc(100svh - clamp(78px, 9.6svh, 120px) - clamp(58px, 7.6svh, 92px)); --cc: clamp(258px, calc(258px + (100vw - 1280px) * .15), 297px); --nw: 31%; --ah: 76%; height: clamp(300px, calc(var(--fh) - var(--cc) - 32px), 600px); }
  #s02 .sk-notes.sc-3, #s02 .sk-stage__fig .sc-3 .st-svg { --nw: 34%; }
  #s02 .st-svg { height: var(--ah); max-width: calc(100% - 2 * var(--nw) - 36px); }   /* the campus keeps clear of both columns */
  #s02 .sk-notes { display: flex; justify-content: space-between; align-items: stretch; padding: 0 10px; }   /* the slide's edge clips what a tilt or a shadow reaches past it */
  #s02 .sk-notes__col { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(8px, 1.1svh, 22px); padding: clamp(6px, 1.2svh, 12px) 0; width: var(--nw); min-width: 0; }   /* the padding keeps a tilted corner inside the stage */
  #s02 .note { position: relative; left: auto; top: auto; width: auto; }
  #s02 .sk-notes__col--l .note:nth-child(even) { margin-left: 3.5%; }
  #s02 .sk-notes__col--r .note:nth-child(even) { margin-right: 3.5%; }
}
@media (min-width: 901px) and (max-height: 899px) {   /* a laptop under 900px tall (1536x864): the stage is shorter than at 900, so the type is a little smaller there */
  #s02 .note { font-size: clamp(16px, min(1.42vw, 2.08svh), 26px); }
}
@media (min-width: 940px) and (max-height: 820px) {   /* a short laptop: the same, tighter (the stage ends clear of the deck's hint, the notes use more width and a smaller campus) */
  #s02 .sk-stage { --fh: calc(100svh - clamp(64px, 9svh, 96px) - clamp(48px, 7svh, 76px)); --nw: 33%; --ah: 68%; height: clamp(270px, calc(var(--fh) - var(--cc) - 58px), 600px); }
  #s02 .sk-notes.sc-3, #s02 .sk-stage__fig .sc-3 .st-svg { --nw: 37%; }
  #s02 .note { line-height: 1.28; padding: 5px 10px; font-size: clamp(16px, min(1.35vw, 2.1svh), 26px); }
  #s02 .note--tidy h3 { margin-bottom: 2px; }
  #s02 .sk-notes__col { gap: 6px; }
}

/* faces: top, front-left, front-right (the colours are set per scene, as custom properties on the svg) */
.st-svg polygon, .st-svg rect, .st-svg path, .st-svg circle { stroke-linejoin: miter; }
.st-svg .f-t { fill: var(--i-top); stroke: var(--i-line); stroke-width: 1.4; }
.st-svg .f-l { fill: var(--i-l); stroke: var(--i-line); stroke-width: 1.4; }
.st-svg .f-r { fill: var(--i-r); stroke: var(--i-line); stroke-width: 1.4; }
.st-svg .plate.f-t { fill: var(--i-plate-t); } .st-svg .plate.f-l { fill: var(--i-plate-l); } .st-svg .plate.f-r { fill: var(--i-plate-r); }
.st-svg--3 .plate { stroke: var(--i-gold); }
.st-svg .grid { fill: none; stroke: var(--i-grid); stroke-width: 1; }
.st-svg .pole { fill: var(--i-line); }
.st-svg .flag { fill: var(--i-gold); stroke: var(--i-line); stroke-width: 1.2; }
.st-svg .win { stroke: var(--i-line); stroke-width: .8; }
.st-svg .win.off { fill: var(--i-win); }
.st-svg .win.on { fill: var(--i-mul); }
.st-svg .win.on-g { fill: var(--i-gold); }

/* sprites: forms, sheets, chat */
.st-svg .card { fill: var(--i-card); stroke: var(--i-line); stroke-width: 1.4; }
.st-svg .ink { fill: none; stroke: var(--i-ink); stroke-width: 1.4; opacity: .5; }
.st-svg .tint { fill: color-mix(in srgb, var(--i-mul) 22%, var(--i-card)); stroke: var(--i-line); stroke-width: 1.4; }
.st-svg .tint2 { fill: var(--i-gold); stroke: var(--i-line); stroke-width: 1.4; }
.st-svg .tangle { fill: none; stroke: var(--i-mul); stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }

/* step 2: tools */
.st-svg .tl.f-t { fill: var(--i-gold); } .st-svg .tl.f-l { fill: color-mix(in srgb, var(--i-gold) 82%, var(--ink)); } .st-svg .tl.f-r { fill: color-mix(in srgb, var(--i-gold) 62%, var(--ink)); }
.st-svg .screen { fill: var(--ink); stroke: none; }
.st-svg .dbs.f-t { fill: var(--i-top); }
.st-svg .tether { fill: none; stroke: var(--i-line); stroke-width: 1.4; stroke-dasharray: 4 5; }
.st-svg .link path { fill: none; stroke: var(--i-line); stroke-width: 2; stroke-dasharray: 7 6; }
.st-svg .link .x { stroke: var(--i-mul); stroke-width: 3.2; stroke-dasharray: none; }
.st-svg .ask rect, .st-svg .ask path { fill: var(--i-gold); stroke: var(--i-line); stroke-width: 1.4; }
.st-svg .ask text { fill: var(--ink); font-family: var(--display); font-size: 32px; font-weight: 600; }

/* step 3: one platform */
.st-svg .pipe { fill: none; stroke: var(--i-gold); stroke-width: 4; stroke-linecap: square; }
.st-svg .nd.f-t { fill: var(--i-gold); } .st-svg .nd.f-l { fill: color-mix(in srgb, var(--i-gold) 82%, var(--ink)); } .st-svg .nd.f-r { fill: color-mix(in srgb, var(--i-gold) 62%, var(--ink)); }
.st-svg .mdl.f-t { fill: var(--i-gold); } .st-svg .mdl.f-l { fill: color-mix(in srgb, var(--i-gold) 80%, var(--ink)); } .st-svg .mdl.f-r { fill: color-mix(in srgb, var(--i-gold) 58%, var(--ink)); }
.st-svg .board .bar { fill: color-mix(in srgb, var(--ink) 20%, var(--i-card)); }
.st-svg .board .g1, .st-svg .board .g2, .st-svg .board .g3 { fill: var(--i-mul); }
.st-svg .board .g2o { fill: none; stroke: var(--i-mul); stroke-width: 1.8; }

/* between the stages ----------------------------------------------------------------------------------------------------
   Stepping to a stage plays that stage in: the head text and the campus fade in, the sprites drift in, the tools drop, the links
   break, the modules slide into the grid, the windows light one by one, and each note lands in turn (messy ones drop in off-angle,
   the tidy cards slide in from the sides). The stage you leave fades out over half a second (data-prev, set by saksham.js). Every
   animation is one-shot and under 2.5 s; under reduced motion the stage simply swaps. Hooks: .st-* (drawn elements), .note, .sc. */
.st-svg .st { transform-box: fill-box; transform-origin: center; opacity: 0; }
#s02.live[data-step="1"] .sc-1 .st, #s02.live[data-step="2"] .sc-2 .st, #s02.live[data-step="3"] .sc-3 .st { animation: st-in .8s var(--ease) var(--d, 0s) both; }
#s02.live[data-step="1"] .sc-1 .st-draw, #s02.live[data-step="3"] .sc-3 .st-draw { animation-name: st-draw; animation-duration: 1.1s; }
#s02.live[data-step="3"] .sc-3 .st-light { animation-name: st-light; animation-duration: .35s; }
.st-svg .st-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Hidden until the slide goes live, like every other slide's content, so nothing shows and then blinks out as the entrance starts (the
   cover hands over with the diagonal fill, and the slide only goes live once the page is full). Then it all plays in. */
#s02:not(.live) .sk-steps, #s02:not(.live) .sc { opacity: 0; }
#s02.live .sk-steps { animation: sc-in .5s ease both; }
#s02.live[data-step="1"] .sc-1 .note, #s02.live[data-step="2"] .sc-2 .note, #s02.live[data-step="3"] .sc-3 .note { animation: note-in .8s var(--ease) var(--d, 0s) both; }
#s02.live[data-step="1"] .sc-1, #s02.live[data-step="2"] .sc-2, #s02.live[data-step="3"] .sc-3 { animation: sc-in .55s ease both; }
#s02[data-prev="1"] .sc-1, #s02[data-prev="2"] .sc-2, #s02[data-prev="3"] .sc-3 { visibility: visible; pointer-events: none; animation: sc-out .45s ease .15s both; }   /* holds for a beat, so the two stages never both thin out at once */
#s02[data-prev="1"] .sc-1 .st, #s02[data-prev="2"] .sc-2 .st, #s02[data-prev="3"] .sc-3 .st { opacity: 1; animation: none; }
@keyframes st-in { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -16px)) rotate(var(--r, 0deg)); } to { opacity: 1; transform: none; } }
@keyframes st-draw { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes st-light { from { opacity: 0; } to { opacity: 1; } }
@keyframes note-in { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -26px)) rotate(calc(var(--r, 0deg) + var(--rr, 8deg))); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }
@keyframes sc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .st-svg .st { opacity: 1 !important; animation: none !important; }
  #s02 .note, #s02 .sc, #s02 .sk-steps { animation: none !important; }
  #s02:not(.live) .sk-steps, #s02:not(.live) .sc { opacity: 1; }
  #s02[data-prev] .sc-1, #s02[data-prev] .sc-2, #s02[data-prev] .sc-3 { visibility: hidden; }
  #s02[data-step="1"] .sc-1, #s02[data-step="2"] .sc-2, #s02[data-step="3"] .sc-3 { visibility: visible !important; }
}

/* "What makes it different", the first reason: a whole slide (Fully managed, zero IT burden), set like every other slide */
.sk-emph { gap: clamp(8px, 1.6vh, 18px); }
.sk-emph__copy { margin-top: clamp(10px, 3vh, 36px); }
.sk-emph__copy h2 { margin-top: 10px; }

/* a scroll region that must always show its bar (the terms: long legal text) */
.sk[data-scroll="always"] { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) var(--line); }   /* a bar only when the text really overflows (it used to be forced, so it showed empty on tall screens); slim, and in the slide's accent */

/* short laptop screens: the first story slide carries four points and a closing line */
@media (max-height: 820px) and (min-width: 901px) {
  .sk-story__copy h2 { font-size: clamp(24px, 2.7vw, 40px); }
  .sk-pts { gap: 6px; margin-top: 10px; }
  .sk-pts li { padding-top: 6px; }
  .sk-pts p { font-size: 13px; line-height: 1.4; }
  .sk-story__copy .sk-close, .sk-story__copy .sk-note { margin-top: 8px; font-size: 16px; }
}
@media (max-height: 740px) { .sk-trust { margin-top: 16px; } .sk-final { font-size: clamp(28px, min(5vw, 7vh), 64px) !important; } }

/* 3 · narrower screens ------------------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .sk-diffs--3 { gap: 16px; }
  .sk-diff p, .sk-card p, .sk-row p { font-size: clamp(13px, 1.25vw, 14.5px); }
  .sk-diff h3 { font-size: clamp(17px, 2vw, 22px); }
  .sk-phase li { font-size: clamp(13px, 1.25vw, 14.5px); }
}
@media (max-width: 900px) {
  .sk-split, .sk-split--even { grid-template-columns: 1fr; align-content: start; gap: 18px; }
  .sk-stage { height: auto; display: grid; gap: 10px; }
  .sk-stage__fig { position: static; }
  .sk-stage__fig > .sc { height: 38svh; }
  .st-svg { max-width: 100%; }
  .sk-notes { position: static; display: none; gap: 10px; grid-template-columns: 1fr; }
  #s02[data-step="1"] .sk-notes.sc-1, #s02[data-step="2"] .sk-notes.sc-2, #s02[data-step="3"] .sk-notes.sc-3 { display: grid; }
  .note { position: static; width: auto; transform: none; }
    .sk-steps { gap: 10px 16px; flex-wrap: wrap; } .sk-steps li { font-size: clamp(14px, 3.7vw, 17px); letter-spacing: .05em; }
  .sk-notes__col { display: contents; }   /* a phone shows the notes as one list again */
  .sk-notes { gap: clamp(22px, 6vw, 52px); }   /* the tilt a note keeps swings its corners by up to half its width times 0.05: at 10px they touched the next note */
  .sk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-card:nth-child(3n + 1) { border-left: 0; } .sk-card:nth-child(2n + 1) { border-left: 1px solid var(--line); }
  .sk-card:nth-child(3) { border-top: 0; }
  .sk-diffs--2, .sk-diffs--3 { grid-template-columns: 1fr; }
  .sk-phases { grid-template-columns: 1fr; }
  .sk-row { grid-template-columns: 28px 1fr; }
  .sk-row p { grid-column: 2; }
  .sk-stats { grid-template-columns: repeat(2, max-content); row-gap: 18px; }
  .sk-terms { columns: 1; }
  .sk-trust, .sk-lists { grid-template-columns: 1fr; }
  .sk .acts .btn { flex: 1 1 auto; text-align: center; }
  .sk-top .lede { font-size: var(--t-dense); }
  .sk-chips { font-size: 11px; letter-spacing: .08em; }
  .sk-diff p, .sk-card p, .sk-row p, .sk-phase li { font-size: var(--t-dense); }
}
@media (max-width: 600px) {
  .sk-cards { grid-template-columns: 1fr; }
  .sk-card { border-left: 1px solid var(--line); } .sk-card:nth-child(2) { border-top: 0; }
}

/* 4 · Hindi: no letter-spacing on Devanagari, taller lines ------------------------------------------------------- */
html[lang="hi"] .sk h2, html[lang="hi"] .sk-final, html[lang="hi"] .sk-panel h1, html[lang="hi"] .sk-diff h3, html[lang="hi"] .sk-close, html[lang="hi"] .sk-sub { letter-spacing: 0; line-height: 1.34; word-spacing: .03em; }
html[lang="hi"] .sk-chips, html[lang="hi"] .sk-kicker, html[lang="hi"] .sk-mock__h, html[lang="hi"] .sk-stats span, html[lang="hi"] .sk-phase__h span, html[lang="hi"] .sk-lists h4, html[lang="hi"] .sk-trust h3 { letter-spacing: 0; text-transform: none; }
html[lang="hi"] .sk p, html[lang="hi"] .sk-card p, html[lang="hi"] .sk-row p, html[lang="hi"] .sk-terms li { line-height: 1.7; }
html[lang="hi"] .eyebrow, html[lang="hi"] .sk-chips li { letter-spacing: 0; text-transform: none; }   /* Devanagari must not be letter-spaced */
html[lang="hi"] .sk-card h3, html[lang="hi"] .sk-row h3 { letter-spacing: 0; line-height: 1.45; }
/* Hindi on the emphasis and three-reason slides: Devanagari sets taller than Latin, so the largest type steps down */
html[lang="hi"] .sk-diff p { line-height: 1.6; }

/* the nav carries six links here (Digital readiness was added): tighter type and spacing from 901px up to the laptop widths, so the labels stay on one line */
@media (min-width: 901px) and (max-width: 1439px) {
  .sak .nav ul { gap: clamp(2px, .6vw, 10px); }
  .sak .nav ul > li { padding-inline: clamp(5px, .75vw, 11px); }
  .sak .nav ul a { font-size: 11px; letter-spacing: .07em; white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .sak .nav ul > li { padding-inline: 5px; }
  .sak .nav ul a { font-size: 10.5px; letter-spacing: .02em; }
}
@media (min-width: 901px) and (max-width: 980px) {
  .sak .nav ul > li { padding-inline: 3px; }
  .sak .nav ul a { font-size: 10px; letter-spacing: 0; }
}
html[lang="hi"] .sak .nav ul a { white-space: nowrap; }

/* What's included: the major features, together (four short groups; the finance note stays below, word for word) */
.sk-groups-wrap { display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 26px); min-width: 0; }
.sk-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.6vh, 30px) clamp(20px, 3.2vw, 56px); }
.sk-group { border-top: 1px solid var(--line); padding-top: 12px; min-width: 0; }
.sk-group h3 { display: flex; align-items: center; gap: .6em; margin-bottom: 10px; font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.7vw, 26px); letter-spacing: -.02em; line-height: 1.2; color: var(--fg); }
.sk-group h3::before { content: ""; flex: none; width: .5em; height: .5em; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sk-group ul { list-style: none; display: grid; gap: 7px; }
.sk-group li { font-size: var(--t-dense); line-height: 1.45; color: var(--fg-2); }
/* Why it pays: the vision, what you stop paying for, the proof */
.sk-value { margin-top: clamp(14px, 2.4vh, 30px); }
.sk-value .sk-diff { border-top: 1px solid var(--line); padding-top: 14px; }
.sk-list { list-style: none; display: grid; gap: 8px; }
.sk-list li { position: relative; padding-left: 20px; font-size: var(--t-dense); line-height: 1.45; color: var(--fg-2); }
.sk-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 2px; background: var(--accent); }
.sk .sk-value-h { margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.1vw, 46px); line-height: 1.1; letter-spacing: -.03em; max-width: 30ch; color: var(--fg); text-wrap: balance; }
.sk-value-foot { margin-top: clamp(16px, 3vh, 34px); padding-top: clamp(14px, 2.2vh, 24px); border-top: 1px solid var(--line); }
@media (max-height: 780px) { .sk .sk-value-h { font-size: clamp(24px, 2.6vw, 36px); } .sk-value { margin-top: 10px; } .sk-value .sk-diff { gap: 6px; padding-top: 10px; } .sk-list { gap: 5px; } .sk-value-foot { margin-top: 12px; padding-top: 10px; } }
.sk-value-foot .acts { margin-top: 0; }
@media (max-width: 700px) { .sk-groups { grid-template-columns: 1fr; } }
html[lang="hi"] .sk-group li, html[lang="hi"] .sk-list li { line-height: 1.6; }
html[lang="hi"] .sk-group h3 { letter-spacing: 0; line-height: 1.4; }
/* Collages: the five screens of a demonstration school, shown small, overlapping and a little off-square, on three slides: s03 (two), s05 (two), s06 (one). Built by tools/build-saksham.cjs, VEL-CAP-0535.
   Rules the pictures keep (tools/test/screens-slide.mjs checks them): plain <img> at its own ratio (CSS height auto: never object-fit, never a fixed height, never overflow or clip), so the SAMPLE DATA band
   at the foot of every picture stays whole; a picture in front never overlaps the band of one behind it (the upper picture is the front one, and the offset below is larger than the band plus the tilt);
   no filter, no blend, no cursor change, nothing to click. The tilt is the `rotate` property, so the deck's own reveal (`.b`: rise and fade, staggered by reading order, overhaul.css 5) keeps its `transform`,
   and under reduced motion the base sheet shows everything at once. The collage keeps 10px clear of the slide region's edges, which clip anything a rotation reaches past them. Squared hairline frame in the
   slide's own line colour, a soft shadow of a very dark plum (never pure black), no new face or colour. The width each slide gives it (--cw) follows the room the slide's text leaves, in width and in height;
   the builder's `sizes` strings are those widths. */
.sk-col { --sh: 0 14px 30px -10px rgba(34, 12, 28, .38), 0 2px 6px rgba(34, 12, 28, .16); flex: none; margin: 0; padding: 6px 10px 0; width: 100%; min-width: 0; }
.sk-col__stage { position: relative; width: var(--cw, 100%); max-width: 100%; aspect-ratio: var(--car, 1.9); }
.sk-col__p { position: absolute; width: var(--pw, 60%); border: 1px solid var(--line); box-shadow: var(--sh); }
.sk-col__p picture { display: block; }
.sk-col__p img { display: block; width: 100%; height: auto; }
.sk-col--2 { --car: 1.89; }
.sk-col--2 .sk-col__p--1 { left: 0; bottom: 0; rotate: -2.4deg; z-index: 1; }   /* behind, lower left */
.sk-col--2 .sk-col__p--2 { right: 0; top: 0; rotate: 1.8deg; z-index: 2; }      /* in front, upper right: it overlaps the other's upper right corner, never its band */
.sk-col--1 { --car: 1.52; --pw: 94%; }
.sk-col--1 .sk-col__p { left: 3%; top: 1.5%; rotate: -1.4deg; }
.sk-col__line { margin-top: 10px; font-size: var(--t-dense); line-height: 1.5; color: var(--fg-2); }
/* the reveal is the deck's own (.b: rise and fade, delay = 75ms x reading order, capped at 700ms); on a slide with a lot of text before the collage the cap would make everything land together,
   so the second picture and the line wait a little longer than the one before (the same animation, only a later start) */
.beat.live .sk-col__p--2 { animation-delay: calc(min(var(--bi, 0) * 75ms, 700ms) + 260ms); }
.beat.live .sk-col__line { animation-delay: calc(min(var(--bi, 0) * 75ms, 700ms) + 380ms); }
/* s06, reason 02: the cockpit between the paragraph and the illustrative card, as large as the room left in the column allows (the column is as tall as reason 03's text) */
.sk-diff .sk-col { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 14px; padding-top: 2px; --cw: min(100% - 130px, max(200px, calc((82.8svh - 577px) * 1.52))); }   /* the picture, with the line at its right (the column has no height to spare for a line under it) */
.sk-diff .sk-col__stage { flex: none; }
.sk-diff .sk-col__line { flex: 1 1 110px; margin: 0 0 6px; }
/* s05, Fully managed: the copy at the left, the collage at the right */
.sk-emph .sk-col { --cw: 100%; }
@media (min-width: 901px) {
  /* s03, What's included: under the four groups, the finance note at the left and the collage at the right (the note keeps every word; it is only set narrower) */
  .sk-split--col { align-items: start; align-content: start; }   /* the region is as tall as its content (up to the slide), so `center` only ever acts when the content overflows, and then it hides the top of it, out of reach of the scroll; start keeps the eyebrow reachable */
  .sk-groups-wrap--col { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "groups" "shots"; gap: clamp(14px, 2.2vh, 26px) 0; }
  .sk-groups-wrap--col .sk-groups { grid-area: groups; }
  .sk-groups-wrap--col .sk-col { grid-area: shots; --cw: min(100%, max(240px, calc((82.8svh - 512px) * 1.89))); padding-top: 0; }
  .sk-groups-wrap--col .sk-col__stage { margin-left: auto; }   /* the stack ends at the right margin, under the right group */
  .sk-emph { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "top top" "copy shots"; gap: clamp(8px, 1.6vh, 18px) clamp(24px, 4.6vw, 80px); align-items: center; align-content: start; }
  .sk-emph .sk-top { grid-area: top; }
  .sk-emph__copy { grid-area: copy; }
  .sk-emph .sk-col { grid-area: shots; --cw: min(100%, 640px); justify-self: end; }}
/* s03: the finance note (CEO, 7 Oct 2026) is a block of the left column, in the lower left under "Every plan. All modules included. ...", every word kept; its old place in the right column is now the collage's */
.sk-split--col .sk-head .sk-fine { margin-top: 18px; }
@media (min-width: 901px) {
  .sk-split--col .sk-head .sk-fine { margin-top: clamp(14px, 2.2svh, 26px); margin-bottom: -20px; }   /* the last line may use the slide's bottom padding, like the collage does */
}
html[lang="hi"] .sk-groups-wrap--col .sk-col { --hx: 26px; }   /* Hindi mode applies the Hindi line-heights (1.6 to 1.7) to this English text: the groups are taller, so the stack gives some height back (the slide scrolled in Hindi mode before, existing) */
/* The left column is now the tallest on a short screen (heading, lede, two notes), so below 900px of height its gaps and the finance note tighten (no word, size of the heading or colour changes) and the slide still does not scroll */
@media (min-width: 901px) and (max-height: 899px) {
  .sk-split--col .sk-head h2 { margin-top: 12px; }
  .sk-split--col .sk-head h2 + .lede { margin-top: 10px; }
  .sk-split--col .sk-head .rule { margin-top: 16px; }
  .sk-split--col .sk-head .sk-note { margin-top: 12px; }
  .sk-split--col .sk-head .sk-fine { margin-top: 14px; font-size: min(var(--t-dense), 15px); line-height: 1.5; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .sk-split--col .sk-head h2 { margin-top: 10px; }
  .sk-split--col .sk-head h2 + .lede { margin-top: 8px; }
  .sk-split--col .sk-head .rule { margin-top: 12px; }
  .sk-split--col .sk-head .sk-note { margin-top: 10px; }
  .sk-split--col .sk-head .sk-fine { margin-top: 12px; font-size: min(var(--t-dense), 14px); line-height: 1.45; }
}
@media (min-width: 901px) and (max-height: 760px) {   /* a short screen: s03 is a little taller than the slide with its collage, so it scrolls; a start below the nav keeps its eyebrow clear of it */
  .sk-split--col { padding-top: 26px; }
}
/* Bigger collages (VEL-CAP-0535, size): the two-picture collage is re-composed as a stack, the second picture only a little to the right of and below the first (d = .14 / .08 of a picture's width, k = .14 / .26 of its
   height), so each picture is as large as the slide's free area allows. The band of the picture behind stays whole: the picture in front ends above it (k keeps the offset larger than the band plus the tilt;
   tools/test/screens-slide.mjs and the browser check sample the band with elementFromPoint). s03 only from 1280px wide (the groups wrap differently on a narrower desktop: the pull-up would reach their text), s05 from 901px; a phone and a tablet keep the sizes above. */
@media (min-width: 901px) {
  /* s05: the copy at the left, the collage at the right and a little way into the copy column's gap (the lede ends at the column edge; the stage keeps 14px clear of it) */
  .sk-emph .sk-col { --x: calc(clamp(24px, 4.6vw, 80px) - 14px); width: calc(100% + var(--x)); --cw: min(100%, calc((100svh - 250px) * 1.2916)); }
  .sk-emph .sk-col--2 { --car: 1.2916; --pw: 92.59%; }
}
@media (min-width: 1280px) and (min-height: 700px) {
  /* s03 (finance note moved to the lower left, 7 Oct 2026): the whole right column below the groups is the collage's. The stack uses the height the groups leave (--sh), starts one row-gap above its cell, uses the slide's
     bottom padding, and is right-aligned under the right group; the visible line sits at its left, bottom-aligned (it needs no row of its own). The size follows the height, as before: --sh is calibrated on the viewport. */
  .sk-groups-wrap--col .sk-col { --fh: calc(100svh - clamp(78px, 9.6svh, 120px) - clamp(58px, 7.6svh, 92px)); --gh: clamp(423px, calc(423px + (100vw - 1366px) * .28), 467px); --pmax: clamp(300px, min(calc(345px + (100vw - 1280px) * .34), calc(400px + (100vw - 1440px) * .104)), 460px); --pu: 16px; --hx: 0px; --ts: 0px; --sh: min(calc(var(--fh) - var(--gh) - 18px + var(--pu) - var(--hx) - var(--ts)), calc(var(--pmax) * .7565 - var(--hx))); display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; column-gap: 18px; margin: calc(-1 * clamp(14px, 2.2svh, 26px) - var(--pu)) 0 -16px; padding: 0 10px 0 0; --cw: min(calc(100% - 220px), calc(var(--sh) * 1.507)); }
  .sk-groups-wrap--col .sk-col--2 { --car: 1.507; --pw: 87.72%; }
  .sk-groups-wrap--col .sk-col__stage { flex: none; margin-left: 0; }
  /* --fh is the slide frame's inner height (next/base.css pads the frame by 9.6 / 7.6 vh, and by 9 / 7 vh up to 820px tall), --gh the four groups' height (measured 423px at 1366 wide to 467px from 1740 wide), --pmax the
     widest a picture may be (about twice the earlier 200px at 1440 and 225px at 1920): the stack takes what the groups leave, up to that */
  .sk-groups-wrap--col .sk-col__line { order: -1; flex: 0 1 auto; margin: 0 0 4px; text-align: right; }
}
@media (min-width: 1280px) and (min-height: 700px) and (max-height: 820px) {
  .sk-groups-wrap--col .sk-col { --fh: calc(100svh - clamp(64px, 9svh, 96px) - clamp(48px, 7svh, 76px)); --ts: 20px; }   /* --ts: a short screen keeps the eyebrow row clear of the nav (the slide is not filled to the frame's edge) */
}
@media (min-width: 901px) and (min-height: 1000px) {   /* a tall screen has the height for a larger cockpit with its line underneath */
  .sk-diff .sk-col { --cw: min(100%, 440px); }
  .sk-diff .sk-col__line { flex-basis: 100%; margin: 12px 0 0; }
}

@media (max-width: 900px) {
  .sk-split .sk-groups-wrap, .sk-emph { padding-bottom: 76px; }   /* the previous / next arrows float 65px above the foot on a phone: the collage and its line scroll clear of them */
  .sk-col__stage { --cw: min(100%, 520px); }
}

/* the small product mark in the nav (next/overhaul.css 15): the icon of the supplied lockup, as a mask like the cover's large mark, so it is Paper on Mulberry and Mulberry on Paper (never pure white). The icon sits at (417, 411) in its artboard, 193 x 203 units. */
.sk-ico { --h: 34px; display: block; width: calc(var(--h) * .9507); height: var(--h); background: var(--paper);
  -webkit-mask: url(/assets/saksham/brand/logo-icon-submark-white.svg) no-repeat calc(var(--h) * -2.0542) calc(var(--h) * -2.0246) / calc(var(--h) * 5.0591) auto;
          mask: url(/assets/saksham/brand/logo-icon-submark-white.svg) no-repeat calc(var(--h) * -2.0542) calc(var(--h) * -2.0246) / calc(var(--h) * 5.0591) auto; }
.sak[data-tone="paper"] .nav .sk-ico { background: var(--sak-plum); }