/* School of Immigration, by Vinay Hari: design system v3 "every inch modern" (October 2026)
   The same world as the 3D home (src/experience/): crimson header, heroes and footer; cream pages; white cards;
   gold only for the primary pill, labels, numerals and small accents. Sora for English, Hind for Hindi.
   Every class the 68 inner pages already use keeps working here (old names are mapped to the new look);
   the v3 patterns (facts, cards, steps/tiles, rows, rules, timeline, accordion, art frame, closing) are documented in CONTRACT.md.
   Old token names (--ink, --yellow, --paper, --display, --body) stay as aliases because the app shells (src/app) read them.
   Type pass (5 Oct): a 1240 px grid, section titles at weight 800 up to 64 px, crimson 14 px labels, 17 to 18 px body copy,
   48 px rounded joins between blocks and 0.1 s hover and press. The block for it is at the end of this file. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap");

:root {
  --crimson: #8E1B2A; --crimson-deep: #5E0F1B; --crimson-soft: #F6E4E4;
  --cream: #F7F1E6; --cream-2: #F0E7D4; --white: #FFFFFF;
  --gold: #C9A227; --gold-hi: #E6C76A; --gold-lo: #7F6010; --gold-soft: #F7EDD0;
  --text: #2A1F1A; --muted: #6B5B52;
  --line: #EADFC8; --line-2: #DCCFB2;
  --red: #A3261F; --green: #1E6B3A;
  --bg: var(--cream);
  --shadow: 0 10px 30px -18px rgba(94,15,27,.25);
  --shadow-lg: 0 24px 60px -28px rgba(94,15,27,.35);
  --font-en: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hi: "Hind", "Noto Sans Devanagari", "Kohinoor Devanagari", system-ui, sans-serif;
  --r-card: 24px; --r-art: 28px; --r-input: 14px; --r-tile: 20px;
  --header-h: 64px;
  --max: 1240px; --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 9vw, 120px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* aliases (app shells, older fragments) */
  --paper: var(--cream); --paper-2: var(--cream-2); --ink: var(--crimson); --ink-2: #4A3A33;
  --yellow: var(--gold); --yellow-2: var(--gold-lo);
  --radius: var(--r-input); --r-md: var(--r-tile); --r-lg: var(--r-card); --r-xl: 32px;
  --sans: var(--font-en); --deva: var(--font-hi); --display: var(--font-en); --display-hi: var(--font-hi); --body: var(--font-en);
  --heading: #6E1320; --heading-3: var(--crimson-deep); --join: 48px;
  --on-dark: #FFFFFF; --on-dark-muted: rgba(255,255,255,.8); --glass-line: rgba(230,199,106,.3);
  --grad-gold: linear-gradient(135deg, #E6C76A 0%, #C9A227 100%);
  --grad-crimson: linear-gradient(160deg, #8E1B2A 0%, #6E1320 60%, #5E0F1B 100%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--cream); color: var(--text);
  font-family: var(--font-en); font-size: clamp(17px, 1.3vw, 18px); line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
html[lang="hi"] body, html[lang="hi"] button, html[lang="hi"] input, html[lang="hi"] select, html[lang="hi"] textarea { font-family: var(--font-hi); }
html[lang="hi"] body { font-size: clamp(18px, 1.4vw, 19px); line-height: 1.7; }
body.menu-open { overflow: hidden; }
body.has-sticky { padding-bottom: 78px; }
@media (min-width: 768px) { body.has-sticky { padding-bottom: 0; } }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(201,162,39,.9); }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; border-radius: 8px; }
.sr-only, .sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--crimson); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 8px; }


/* ---------- dark surfaces: swap the tokens, every component follows ---------- */
.hero, .section--ink, .card--ink {
  --text: #FFFFFF; --muted: rgba(255,255,255,.78); --ink-2: rgba(255,255,255,.88); --heading: #FFFFFF; --heading-3: #FFFFFF;
  --white: rgba(255,255,255,.08); --cream-2: rgba(255,255,255,.1); --paper-2: rgba(255,255,255,.1);
  --line: rgba(230,199,106,.3); --line-2: rgba(255,255,255,.3); --gold-lo: var(--gold-hi); --gold-soft: rgba(230,199,106,.16);
  --crimson-soft: rgba(255,255,255,.1); --shadow: none; --shadow-lg: none; --bg: #6E1320;
  background: var(--grad-crimson); color: var(--text);
}
.hero a, .section--ink a, .card--ink a { text-decoration-color: rgba(230,199,106,.7); }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; color: var(--heading); }
h3, h4 { color: var(--heading-3); letter-spacing: -.01em; }
h1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.05; }
h2 { font-size: clamp(28px, 3.6vw, 44px); max-width: 20ch; }
h3 { font-size: 20px; line-height: 1.25; }
h4 { font-size: 17px; letter-spacing: 0; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4 { letter-spacing: 0; }
html[lang="hi"] h1 { font-size: clamp(36px, 5.4vw, 66px); line-height: 1.2; }
html[lang="hi"] h2 { font-size: clamp(29px, 3.8vw, 46px); line-height: 1.25; }
html[lang="hi"] h3 { font-size: 21px; line-height: 1.35; }
html[lang="hi"] .tiles p, html[lang="hi"] .step p, html[lang="hi"] .timeline p, html[lang="hi"] .facts > *, html[lang="hi"] .rows small { font-size: 16px; }
html[lang="hi"] .rules > li { font-size: 17px; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(19px, 1.75vw, 23px); line-height: 1.5; color: var(--text); max-width: 50ch; }
.lead, .prose p, .prose li, .copy-block, .site-footer li, .callout p, .empty { overflow-wrap: anywhere; }
.small { font-size: 15px; }
.tiny { font-size: 13px; }
.muted { color: var(--muted); }
.kick { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); line-height: 1.3; }
.kick::before { content: ""; width: 26px; height: 2px; flex: none; background: var(--gold); border-radius: 2px; }
.hero .kick, .section--ink .kick, .card--ink .kick { color: var(--gold-hi); }
.hero .kick::before, .section--ink .kick::before { background: var(--gold-hi); }
html[lang="hi"] .kick { letter-spacing: 0; font-size: 16px; }
@media (max-width: 599px) { .kick { letter-spacing: .09em; font-size: 14px; } html[lang="hi"] .kick { font-size: 15.5px; } }
.center .kick { justify-content: center; }
.gold-text { color: var(--gold-lo); }
.rule { width: 40px; height: 3px; border-radius: 3px; background: var(--gold); margin: 10px 0 18px; }
ul, ol { padding-left: 22px; margin: 0 0 1em; }
li { margin-bottom: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
strong, b { font-weight: 700; }
.num { font-weight: 700; letter-spacing: -.02em; }
.scroll-hint { display: none; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
@media (max-width: 719px) { .scroll-hint { display: block; } }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--tight { padding: clamp(24px, 4vw, 40px) 0; }
.section--paper2, .section--alt { background: var(--cream-2); --bg: var(--cream-2); }
.section--white { background: var(--white); --bg: var(--white); }
.section--ink { position: relative; overflow: hidden; isolation: isolate; }
.section--ink::before { content: ""; position: absolute; z-index: -1; width: 60vw; max-width: 760px; aspect-ratio: 1; right: -18vw; top: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(230,199,106,.22) 0%, rgba(201,162,39,.06) 40%, transparent 68%); filter: blur(10px); pointer-events: none; }
/* the facts strip rides up over the bottom of the hero */
.section--facts { position: relative; z-index: 2; padding: 0 0 clamp(40px, 6vw, 72px); margin-top: -34px; }
.section--facts .facts { margin-top: 0; }
.section--outcomes { padding-top: 0; }
.section--outcomes .copy-block { margin: 0; font-size: 14px; }
.section .lead { margin-bottom: 26px; }
.section h2 + p:not(.lead) { max-width: 62ch; }
.grid-2, .grid-3, .grid-4, .cards { display: grid; gap: 16px; }
.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 64px); } .split--rev > :first-child { order: 2; } }
.grid-2 > *, .grid-3 > *, .grid-4 > *, .cards > *, .split > *, .steps > *, .tiles > *, .facts > * { min-width: 0; }
.card, .callout, .empty, .toc, .rung, .rows, .rules { overflow-wrap: anywhere; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.center h1, .center h2, .center .lead, .center .narrow, .center p { margin-inline: auto; }
.center .btn-row { justify-content: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 28px; }
.wrap > :is(.grid-2, .grid-3, .grid-4, .cards, .tiles, .steps, .rows, .rules, .timeline, .faq, .table-wrap, .ladder, .facts):not(:first-child) { margin-top: 26px; }

main > :first-child:not(.hero) { padding-top: calc(var(--header-h) + 24px); }

/* ---------- buttons on crimson (the pills themselves live in chrome.css): the primary pill is gold, outlines turn white ---------- */
.hero .btn, .section--ink .btn, .card--ink .btn { background: var(--gold); color: var(--crimson-deep); border-color: var(--gold-hi); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.hero .btn:hover, .section--ink .btn:hover, .card--ink .btn:hover { background: var(--gold-hi); }
.hero .btn--ghost, .hero .btn--wa, .section--ink .btn--ghost, .section--ink .btn--wa, .card--ink .btn--ghost, .card--ink .btn--wa { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.6); box-shadow: none; }
.hero .btn--ghost:hover, .hero .btn--wa:hover, .section--ink .btn--ghost:hover, .section--ink .btn--wa:hover, .card--ink .btn--ghost:hover, .card--ink .btn--wa:hover { background: rgba(255,255,255,.12); border-color: #FFFFFF; }
@media (max-width: 599px) { .hero .btn-row .btn, .closing .btn-row .btn { width: 100%; } }
/* ---------- hero band: crimson, label + h1 + one sentence + pills, the art on the right (above on phones) ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(44px, 7vw, 96px)) 0 clamp(64px, 8vw, 104px); }
.hero::before { content: ""; position: absolute; z-index: -1; right: -12vw; top: -20%; width: 56vw; max-width: 720px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(230,199,106,.3) 0%, rgba(201,162,39,.1) 40%, transparent 68%); filter: blur(10px); pointer-events: none; }
.hero::after { content: ""; position: absolute; z-index: -1; left: -10vw; bottom: -40%; width: 40vw; max-width: 520px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,.18) 0%, transparent 65%); pointer-events: none; }
.hero--light { padding-bottom: clamp(40px, 6vw, 64px); }
.hero .kick { margin-bottom: 18px; }
.hero h1 { margin-bottom: 18px; max-width: 16ch; }
html[lang="hi"] .hero h1 { max-width: 20ch; }
.hero .lead { max-width: 44ch; color: rgba(255,255,255,.9); margin-bottom: 6px; }
.hero .wrap.narrow h1, .hero .center h1 { max-width: none; }
.hero .small.muted, .hero .muted { color: rgba(255,255,255,.72); }
.hero .btn-row { margin-top: 22px; }
@media (min-width: 900px) { .hero .split { grid-template-columns: 1.1fr .9fr; column-gap: clamp(32px, 5vw, 72px); } .hero .split:not(:has(.art, .photo img, .stack, .chat, .ring-art)) { grid-template-columns: 1fr; } }
.hero__aside { display: grid; gap: 14px; }
.hero .photo { width: 100%; min-height: 0; }
.hero .photo--arch, .hero__aside .photo { max-width: 420px; justify-self: end; aspect-ratio: 4/5; }
.hero .photo:not(:has(img)) { display: none; }
@media (max-width: 899px) {
  .hero .split { display: grid; gap: 22px; }
  .hero .split > .hero__aside, .hero .split > .art, .hero .split > .photo, .hero .split > .stack { order: -1; }
  .hero .photo--arch, .hero__aside .photo { max-width: none; justify-self: stretch; aspect-ratio: 4/3; }
}
@media (max-width: 599px) { .hero .photo--arch { aspect-ratio: 1/1; } }

/* ---------- art frame: a 3D cutout from the home's scene on a cream disc with a gold glow; cream disc alone while the file is missing ---------- */
.art { position: relative; margin: 0; width: min(100%, 440px); aspect-ratio: 1; justify-self: end; }
.art::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(circle, rgba(230,199,106,.55) 0%, rgba(230,199,106,.18) 42%, transparent 66%); filter: blur(8px); pointer-events: none; }
.art::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 28%, #FFFAEC 0%, #F4EBD8 58%, #EADFC6 100%); box-shadow: inset 0 0 0 1px rgba(201,162,39,.5), 0 30px 60px -28px rgba(0,0,0,.55); }
.art__img, .art > img { position: absolute; z-index: 1; left: 50%; bottom: 8%; transform: translateX(-50%); width: auto; max-width: none; height: 108%; object-fit: contain; filter: drop-shadow(0 24px 36px rgba(60,8,16,.45)); }
.art--arch { aspect-ratio: 4/5; }
.art--arch::after { inset: 0; border-radius: 999px 999px var(--r-art) var(--r-art); background: radial-gradient(circle at 50% 22%, #FFFAEC 0%, #F4EBD8 55%, #EADFC6 100%); }
.art--arch::before { inset: -10%; }
.art--arch .art__img, .art--arch > img { bottom: 0; height: 100%; clip-path: inset(0 0 0 0 round 999px 999px var(--r-art) var(--r-art)); }
.art[data-missing="true"] .art__img, .art[data-missing="true"] > img { display: none; }
.art figcaption { position: absolute; z-index: 2; left: 50%; bottom: 2%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--crimson); background: rgba(255,255,255,.9); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.art--still { aspect-ratio: 4/3; border-radius: var(--r-art); overflow: hidden; background: var(--cream-2); border: 1px solid rgba(230,199,106,.45); box-shadow: 0 30px 60px -28px rgba(0,0,0,.55); }
.art--still::before, .art--still::after { display: none; }
.art--still .art__img, .art--still > img { position: absolute; inset: 0; left: 0; bottom: 0; transform: none; width: 100%; height: 100%; object-fit: cover; filter: none; clip-path: none; }
@media (max-width: 899px) { .art { width: min(68vw, 300px); margin: 0 auto; justify-self: center; } .art--still { width: 100%; } .art__img, .art > img { filter: drop-shadow(0 16px 24px rgba(60,8,16,.4)); } }
.section .art { justify-self: center; }

/* ---------- facts strip: 3 to 5 white tiles, icon + label + value (old tiles: value first, then a line of text) ---------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(var(--cols, auto-fit), minmax(160px, 1fr)); gap: 14px; } }
@media (max-width: 599px) { .facts > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.facts > * { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 18px 18px 16px; border-radius: var(--r-tile); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; line-height: 1.4; color: var(--muted); transition: transform .25s var(--ease), box-shadow .25s; }
.facts > *:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.facts .ic { width: 22px; height: 22px; color: var(--gold); margin-bottom: 8px; }
.facts span { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html[lang="hi"] .facts span { letter-spacing: .03em; font-size: 13px; }
.facts b { display: block; font-size: clamp(19px, 1.9vw, 23px); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--crimson); }
.hero .facts b, .section--ink .facts b { color: #FFFFFF; }
.hero .facts { margin-top: clamp(32px, 5vw, 48px); }
.hero .facts > *, .section--ink .facts > * { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---------- cards ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px; box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: 8px; }
.card p, .card li { color: var(--ink-2); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card > .ic:first-child, .card__ic { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--gold-soft); color: var(--gold-lo); margin-bottom: 16px; }
.card--y::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--gold); margin-bottom: 16px; }
.card--ink { border-color: rgba(230,199,106,.35); }
.card--ink > .ic:first-child, .card--ink .card__ic { background: rgba(230,199,106,.16); color: var(--gold-hi); }
.card .badge { margin-top: auto; }
.section--ink .grid-2 > div:not(.card), .section--ink .grid-3 > div:not(.card), .section--ink .grid-4 > div:not(.card) { padding: 24px 22px; border-radius: var(--r-tile); background: rgba(255,255,255,.06); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.section--ink .grid-2 > div:not(.card) p:last-child, .section--ink .grid-3 > div:not(.card) p:last-child { margin-bottom: 0; }
.callout { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 16px; padding: 16px 20px; margin: 18px 0; }
.callout--red { border-left-color: var(--crimson); }
.callout p:last-child { margin-bottom: 0; }
.notice { background: var(--crimson-deep); color: #FFFFFF; padding: 10px var(--gutter); font-size: 14px; text-align: center; }
.notice a { color: var(--gold-hi); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--gold-lo); background: var(--gold-soft); border-color: transparent; }
.badge--y { background: var(--gold); color: var(--crimson-deep); }
.badge--muted { background: transparent; border-color: var(--line-2); color: var(--muted); }
@media (max-width: 599px) { .card { padding: 22px 20px; } }

/* ---------- photos: the eight reference photos, only where a real place matters; arch frames, captions as pills ---------- */
figure { margin: 0; }
.photo { position: relative; overflow: hidden; border-radius: var(--r-art); background: var(--cream-2); border: 1px solid var(--line); min-height: 220px; display: flex; align-items: flex-end; justify-content: flex-start; padding: 12px; box-shadow: var(--shadow-lg); }
.photo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(0,0,0,.03) 18px 19px); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.photo:hover img { transform: scale(1.03); }
.photo figcaption, .photo .cap { position: relative; z-index: 1; font-size: 12px; font-weight: 600; line-height: 1.35; color: #FFFFFF; background: rgba(94,15,27,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 999px; max-width: 100%; }
.split > .photo, .grid-2 > .photo { aspect-ratio: 4/3; min-height: 0; }
.photo--tall { min-height: 320px; }
.photo--arch { border-radius: 999px 999px var(--r-art) var(--r-art); overflow: visible; min-height: 0; }
.photo--arch::before, .photo--arch img { border-radius: inherit; overflow: hidden; }
.photo--arch::after { content: ""; position: absolute; inset: -9px; border-radius: 999px 999px calc(var(--r-art) + 9px) calc(var(--r-art) + 9px); border: 1.5px solid rgba(230,199,106,.6); pointer-events: none; }
.photo--arch figcaption { margin: 0 8px 8px; }
.photo--arch:hover img { transform: none; }
.photo .float { position: absolute; right: -16px; top: 36%; z-index: 2; background: #FFFFFF; color: #2A1F1A; border-radius: 18px; padding: 16px 20px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); min-width: 160px; }
.photo .float b { display: block; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #8E1B2A; }
.photo .float span { display: block; font-size: 13px; color: #6B5B52; margin-top: 6px; font-weight: 600; }
@media (max-width: 899px) { .photo--tall { min-height: 230px; } .photo--arch::after { inset: -7px; } .photo .float { right: 10px; top: auto; bottom: 14px; padding: 12px 16px; min-width: 0; } .photo .float b { font-size: 26px; } .photo:has(.float) figcaption { max-width: 48%; } }

/* ---------- rules tiles (compliance) and copy blocks ---------- */
.rules { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rules--1 { grid-template-columns: 1fr; } }
.rules > li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 16px; font-size: 16px; line-height: 1.5; }
.rules .ic { width: 22px; height: 22px; color: var(--gold-lo); margin-top: 3px; }
.rules b { display: block; color: var(--crimson); margin-bottom: 2px; }
.rules > li > div { min-width: 0; overflow-wrap: anywhere; }
.rules p { margin: 0; }
.copy-block { font-size: 15px; line-height: 1.55; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 16px; padding: 16px 20px; margin: 18px 0; }
.copy-block b, .copy-block strong { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); margin-bottom: 6px; }

/* ---------- steps and tiles: white tiles with a big gold numeral (steps) or an icon (tiles) ---------- */
.steps, .tiles { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
@media (min-width: 900px) { .tiles--5, .steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tiles--3, .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step, .tiles > li, .tiles > div { display: flex; flex-direction: column; margin: 0; padding: 22px 20px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s; }
.step:hover, .tiles > li:hover, .tiles > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.step .k, .tiles .n { display: block; width: auto; height: auto; margin: 0 0 14px; padding: 0; background: none; font-family: var(--font-en); font-size: 44px; line-height: 1; font-weight: 700; color: var(--gold); letter-spacing: -.02em; }
.tiles > * > .ic:first-child { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-lo); margin-bottom: 14px; }
.tiles > li, .tiles > div { position: relative; }
.tiles h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.step h3, .tiles h3 { font-size: 20px; margin: 0 0 8px; line-height: 1.2; color: var(--crimson); }
.step p, .tiles p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.step .when, .tiles .when { display: block; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--gold-lo); }
@media (max-width: 599px) { .step, .tiles > li, .tiles > div { padding: 18px 16px 20px; } .step .k, .tiles .n { font-size: 34px; } .step h3, .tiles h3 { font-size: 17px; } }

/* ---------- rows: a table as tiles (label left, value right) ---------- */
.rows { list-style: none; margin: 0; padding: 4px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.rows > li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding: 13px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.rows > li:last-child { border-bottom: 0; }
.rows > li > span { flex: 1 1 0; min-width: 40%; color: var(--text); }
.rows small { display: block; font-size: 14px; color: var(--muted); }
.rows b { flex: 0 1 auto; max-width: 55%; font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--crimson); text-align: right; }
.rows > li.rows__sum { border-top: 2px solid var(--gold); }
.rows--list > li { display: block; }
.rows--list b { display: inline; max-width: none; font-size: inherit; text-align: left; }
.rows .ic { width: 18px; height: 18px; color: var(--gold); vertical-align: -.2em; margin-right: 8px; }
@media (max-width: 599px) { .rows { padding: 2px 16px; } .rows b { font-size: 16px; max-width: 100%; margin-left: auto; } .rows > li { flex-wrap: wrap; row-gap: 4px; } .rows > li > span { flex: 1 1 50%; } .rows--list > li > span { flex: none; } }

/* ---------- timeline: vertical with gold dots; .timeline--row lays four nodes in a row on desktop ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 2px solid rgba(201,162,39,.5); display: grid; gap: 20px; }
.timeline li { position: relative; margin: 0; }
.timeline li::before { content: ""; position: absolute; left: -37px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--bg); }
.timeline b { display: block; font-size: 18px; color: var(--crimson); line-height: 1.25; }
.timeline .when { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-lo); margin: 4px 0 6px; }
html[lang="hi"] .timeline .when { letter-spacing: .02em; font-size: 14px; }
.timeline p { margin: 0; color: var(--muted); font-size: 15px; }
@media (min-width: 900px) {
  .timeline--row { position: relative; border-left: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .timeline--row::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: rgba(201,162,39,.5); }
  .timeline--row li { padding-top: 30px; }
  .timeline--row li::before { left: 0; top: 0; }
}

/* ---------- tables (kept) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; border-radius: var(--r-tile); border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { background: var(--cream-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
td.n, th.n { white-space: nowrap; }
.price { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--crimson); }
.table--wide { min-width: 560px; }
.table--wide td:first-child, .table--wide th:first-child { min-width: 200px; }
.outcomes-table { min-width: 640px; }
.outcomes-table td:first-child { min-width: 180px; }
.outcomes-table th { white-space: normal; }
@media (max-width: 600px) {
  .table-wrap:has(.table--stack) { border: 0; background: transparent; border-radius: 0; box-shadow: none; }
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody { display: block; width: 100%; }
  .table--stack tr { display: block; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 10px; background: var(--white); }
  .table--stack td { display: block; border: 0; padding: 6px 16px; }
  .table--stack td:first-child { padding-top: 12px; }
  .table--stack td:last-child { padding-bottom: 14px; }
  .table--stack td::before { content: attr(data-label); display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
}

/* ---------- accordion (FAQ) ---------- */
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-tile); padding: 0 22px; margin-bottom: 10px; box-shadow: var(--shadow); transition: box-shadow .25s; }
.faq details[open] { box-shadow: var(--shadow-lg); }
.faq summary { cursor: pointer; padding: 18px 48px 18px 0; font-weight: 700; font-size: 17px; color: var(--crimson); list-style: none; position: relative; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--crimson); font-size: 20px; font-weight: 700; font-family: var(--font-en); transition: background .2s; }
.faq details[open] summary::after { content: "\2212"; background: var(--gold); color: var(--crimson-deep); }
.faq .a { padding: 0 0 20px; color: var(--ink-2); }
.faq .a p:last-child { margin-bottom: 0; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: 15px; }
.field .hint { font-size: 13px; color: var(--muted); }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], select, textarea { width: 100%; min-height: 52px; padding: 10px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-input); background: var(--white); font: inherit; font-size: 17px; color: var(--text); transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,162,39,.22); }
textarea { min-height: 110px; resize: vertical; }
input:user-invalid, .form input[data-touched]:invalid { border-color: var(--red); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 15px; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--crimson); }
.form-msg { font-size: 15px; padding: 12px 16px; border-radius: var(--r-input); background: var(--cream-2); display: none; }
.form-msg[data-show="true"] { display: block; }
.form-msg--ok { background: #E6F2EA; color: var(--green); }
.form-msg--err { background: var(--crimson-soft); color: var(--red); }
fieldset { border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; margin: 0; background: var(--white); box-shadow: var(--shadow); }
legend { font-weight: 700; padding: 0 8px; }
[data-step-dot][aria-current="step"] { background: var(--gold); border-color: transparent; color: var(--crimson-deep); }
/* the apply form (v5): one screen per step, big fields, the message for a wrong answer right under its field */
.form--apply { max-width: none; scroll-margin-top: calc(var(--header-h, 64px) + 16px); }
.form--apply fieldset[data-step] { display: grid; gap: 18px; padding: 22px 20px 24px; min-width: 0; }
.form--apply fieldset[data-step] > legend { float: left; width: 100%; padding: 0; font-size: 19px; color: var(--crimson); }
.form--apply fieldset[data-step] > p { margin: 0; }
.form--apply .field label { font-size: 16px; }
.form--apply .field .hint { font-size: 14px; }
.form--apply input[type="text"], .form--apply input[type="tel"], .form--apply input[type="email"] { min-height: 56px; font-size: 18px; }
.form--apply .check { font-size: 16px; line-height: 1.45; }
.form--apply .check input { width: 24px; height: 24px; }
.form--apply .btn-row { margin-top: 4px; }
.form [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(163,38,31,.14); }
.form .check input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; box-shadow: none; }
/* a wrong answer shows its own message, so the grey hint steps aside (no line said twice) */
.form--apply .field:has([aria-invalid="true"]) .hint { display: none; }
/* on the apply page the phone bar's "Apply now" would point at this same page and sit over the form's own buttons */
body:has(form[data-apply]) .sticky { display: none; }
.field-err { margin: -10px 0 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--red); }
.field-err::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--red); color: var(--white); font-size: 12px; font-family: var(--font-en); vertical-align: 1px; }
.fee-box { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 18px 20px; border-radius: 16px; background: var(--gold-soft); }
.fee-box b { font-family: var(--font-en); font-size: 44px; line-height: 1; letter-spacing: -.02em; color: var(--crimson); }
.fee-box span { font-size: 17px; font-weight: 700; color: var(--crimson-deep); }
.form--apply .copy-block { margin: 0; font-size: 16px; }
.form--apply .copy-block .btn-row { display: flex; margin-top: 14px; }
.summary { margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.summary > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 2px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.summary > div:last-child { border-bottom: 0; }
.summary dt { font-size: 14px; color: var(--muted); }
.summary dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 520px) { .summary > div { grid-template-columns: 1fr; } }
.apply-done { display: grid; gap: 14px; padding: 26px 22px; border-radius: var(--r-card); background: #E6F2EA; border: 1px solid rgba(30,107,58,.28); }
.apply-done:focus { outline: 0; }
.apply-done h3 { margin: 0; color: var(--green); font-size: 24px; line-height: 1.2; }
.apply-done .lead, .apply-done p { margin: 0; max-width: none; }
.apply-done ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.apply-done li { margin: 0; }
.apply-done .summary { background: var(--white); border-color: rgba(30,107,58,.2); }
.apply-done .summary > div { border-color: rgba(30,107,58,.14); }
/* the one button of the last step is the main action, so the WhatsApp button is filled here */
.apply-done .btn--wa { background: var(--crimson); color: #FFFFFF; border-color: var(--crimson-deep); }
.apply-done .btn--wa:hover { background: var(--crimson-deep); }
/* the ID upload (v6): the whole dashed box is the file input, so the tap target is the box. After a choice it shows the file line */
.upload { position: relative; display: grid; align-items: center; min-height: 96px; padding: 16px 18px; border: 2px dashed var(--line-2); border-radius: var(--r-input); background: var(--white); transition: border-color .2s, box-shadow .2s; }
.upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.upload:hover { border-color: var(--gold); }
.upload:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,162,39,.22); }
.upload:has([aria-invalid="true"]) { border-color: var(--red); box-shadow: 0 0 0 3px rgba(163,38,31,.14); }
.upload[data-has-file] { border-style: solid; border-color: var(--line-2); background: var(--gold-soft); }
.upload__ask, .upload__file { pointer-events: none; }
.upload__ask { display: grid; gap: 4px; justify-items: center; text-align: center; }
.upload__ask b { font-size: 17px; color: var(--crimson); }
.upload__ask b::before { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--gold-soft); color: var(--crimson); font-family: var(--font-en); font-size: 18px; line-height: 1; vertical-align: -3px; }
.upload__ask small, .upload__file small { font-size: 14px; color: var(--muted); }
.upload__file { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; }
.upload__file b { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.upload__file small { grid-column: 1; }
.upload__change { grid-column: 2; grid-row: 1 / span 2; position: relative; z-index: 1; pointer-events: auto; min-height: 44px; padding: 8px 18px; border: 1.5px solid rgba(142,27,42,.45); border-radius: 999px; background: var(--white); color: var(--crimson); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.upload__change:hover { border-color: var(--crimson); }
/* a second upload (the resume) can be changed or taken out again: two small buttons side by side, under the name on a phone */
.upload__acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; }
@media (max-width: 520px) { .upload__file:has(.upload__acts) { grid-template-columns: minmax(0, 1fr); } .upload__acts { grid-column: 1; grid-row: auto; margin-top: 10px; } }
/* "(optional)" beside a label: quieter than the label itself */
label .opt { font-weight: 500; color: var(--muted); }
.form--apply .choice { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.form--apply .choice label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 400; cursor: pointer; }
.form--apply .choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--crimson); }
/* a field people never see: it stays empty, and the server drops whatever fills it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* while the application is being saved or the payment confirmed, the button waits and says so */
.form--apply .btn[disabled] { opacity: .6; cursor: default; pointer-events: none; }
.form--apply .btn[data-busy]::after { content: ""; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: applySpin .8s linear infinite; }
@keyframes applySpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .form--apply .btn[data-busy]::after { animation-duration: 2.4s; } }
@media (max-width: 520px) { .form--apply .btn-row .btn { width: 100%; justify-content: center; } }

/* ---------- ladder (the path page): one row of seven cream discs with padlocks, the label under each, nothing more.
   The learner app's demo (archive/demo-shells/app/learn, not part of the site) reuses .rungs/.rung as a card list with the other states. ---------- */
.ladder { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.ladder .rung { flex: 0 0 110px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 0; }
.ladder .rung b { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.ladder .rung .no { width: 72px; height: 72px; font-size: 24px; }
.ladder + .btn-row { justify-content: center; margin-top: 28px; }
@media (max-width: 599px) { .ladder { gap: 16px 4px; } .ladder .rung { flex-basis: 96px; } .ladder .rung .no { width: 64px; height: 64px; font-size: 22px; } }
.rungs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 18px 0; padding: 0; list-style: none; }
.rungs .rung { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 0; padding: 20px 12px 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.rung .no { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--cream); border: 1.5px solid rgba(201,162,39,.6); display: grid; place-items: center; font-family: var(--font-en); font-weight: 700; font-size: 22px; line-height: 1; color: var(--gold-lo); }
.rung[data-state="coming_soon"] .no::after, .rung[data-state="locked"] .no::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F6010' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V7.75a3.5 3.5 0 0 1 7 0v2.75'/%3E%3C/svg%3E") center / 14px no-repeat; border: 1px solid var(--line-2); }
.rung .t b { display: block; font-size: 14px; color: var(--crimson); line-height: 1.3; }
.rung .t span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.rung[data-state="next"] .no { border: 2px solid var(--gold); color: var(--text); }
.rung[data-state="in_progress"] .no { border: 3px solid var(--crimson); color: var(--text); background: conic-gradient(var(--gold) 0 40%, var(--white) 40% 100%); }
.rung[data-state="completed"] .no { background: var(--gold); border-color: transparent; color: var(--crimson-deep); }

/* ---------- closing call ---------- */
.closing, .section--cta { text-align: center; }
.closing h2, .closing .lead, .closing p, .section--cta h2, .section--cta .lead { margin-inline: auto; }
.closing .kick, .section--cta .kick { justify-content: center; }
.closing .btn-row, .section--cta .btn-row { justify-content: center; }
.cta-box { position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 48px); border-radius: var(--r-xl); background: linear-gradient(180deg, #FFFFFF, var(--cream-2)); border: 1px solid var(--line); box-shadow: var(--shadow-lg); text-align: center; }
.cta-box::before { content: ""; position: absolute; left: 50%; bottom: -45%; transform: translateX(-50%); width: 70%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(201,162,39,.24), transparent 70%); pointer-events: none; }
.cta-box > * { position: relative; }
.cta-box h2, .cta-box .lead { margin-inline: auto; }
.cta-box .btn-row { justify-content: center; }

/* ---------- misc ---------- */
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 10px 0; }
.pill-list li { border: 1px solid var(--line-2); background: var(--white); border-radius: 999px; padding: 6px 14px; font-size: 14px; margin: 0; }
.day { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.day:last-of-type { border-bottom: 1px solid var(--line-2); }
.day b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--crimson); }
.quote { font-size: clamp(20px, 2vw, 26px); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; border-left: 3px solid var(--gold); padding-left: 18px; margin: 22px 0; color: var(--crimson-deep); }
html[lang="hi"] .quote { line-height: 1.55; letter-spacing: 0; }
.quote cite { display: block; font-style: normal; font-weight: 500; font-size: 14px; color: var(--muted); margin-top: 10px; letter-spacing: 0; }
.empty { border: 1.5px dashed rgba(201,162,39,.7); border-radius: var(--r-tile); padding: 20px 22px; color: var(--muted); background: var(--white); }
.empty b { color: var(--text); display: block; margin-bottom: 4px; }
.toc { font-size: 15px; background: var(--white); border: 1px solid var(--line); padding: 14px 18px; border-radius: var(--r-tile); }
.toc ol { margin: 0; padding-left: 20px; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 28px; }
.prose p, .prose li { max-width: 64ch; }
.wa-float { display: none; }

/* ---------- reveal on scroll: fade + 12px rise, 420 ms ease-out, staggered 50 ms inside groups (site.js sets --i, capped at 6, so a group
   is done within 720 ms). JS adds .rv, so nothing is hidden without it; site.js also sweeps after every scroll, focus and hash jump, so a
   missed observer can never leave content hidden, and print always shows everything. ---------- */
.rv { opacity: 0; }
.rv.in { animation: reveal .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes reveal { from { opacity: 0; translate: 0 12px; } to { opacity: 1; } }
@media print { .rv { opacity: 1 !important; animation: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; translate: none; }
  .btn:hover, .card:hover, .facts > *:hover, .step:hover, .tiles > li:hover { transform: none; }
}

/* =====================================================================================================================
   v4 playful kit (October 2026). One hero variant and one signature "toy" per page (PLAYFUL-ASSIGNMENTS.md), documented
   with a snippet each in CONTRACT.md "v4 playful kit". Rules: motion is scroll- or hover-linked, under 600 ms, eased;
   every component reserves its space (no layout shift: transforms, clip-paths and opacity only); everything is still and
   complete without JS or under prefers-reduced-motion, because site.js only ever ARMS a component (.track--arm,
   .chat--arm, .checklist--arm) and the CSS default is the finished state. Kit cutouts keep class="art__img" so the build
   serves their WebP twin; each component overrides the .art__img placement for itself.
   ===================================================================================================================== */

/* ---------- hero H2 Stage: an office still behind a crimson gradient, the cutout standing bottom-right, the still on parallax ---------- */
.hero--stage { padding-bottom: 0; }
.hero--stage .hero__still { position: absolute; z-index: -2; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; object-position: center 42%; opacity: .9; translate: 0 var(--par, 0%); will-change: translate; pointer-events: none; }
.hero--stage::before { left: 0; right: 0; top: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; filter: none; background: linear-gradient(100deg, rgba(94,15,27,.97) 0%, rgba(104,17,30,.92) 34%, rgba(142,27,42,.5) 56%, rgba(142,27,42,.16) 78%, rgba(142,27,42,.06) 100%); }
.hero--stage::after { display: none; }
.hero--stage .wrap { display: grid; gap: 20px; }
.hero--stage .hero__text { padding-bottom: clamp(56px, 7vw, 96px); }
.hero__cut { position: relative; margin: 0; min-height: 240px; }
.hero__cut::before { content: ""; position: absolute; left: 50%; bottom: -10%; width: 90%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(230,199,106,.5) 0%, rgba(230,199,106,.14) 45%, transparent 68%); filter: blur(10px); pointer-events: none; }
.hero__cut .art__img { position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translateX(-50%); width: auto; max-width: none; height: 112%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(40,5,12,.55)); }
.hero__cut--flip .art__img { transform: translateX(-50%) scaleX(-1); }
@media (min-width: 900px) {
  .hero--stage .wrap { grid-template-columns: 1.15fr .85fr; align-items: end; column-gap: clamp(24px, 4vw, 56px); }
  .hero__cut { min-height: clamp(380px, 38vw, 540px); align-self: stretch; }
}
@media (max-width: 899px) {
  .hero__cut { order: 1; height: clamp(230px, 52vw, 320px); min-height: 0; width: 100%; }
  .hero__cut .art__img { height: 100%; }
  .hero--stage .hero__text { padding-bottom: 8px; }
  .hero--stage .hero__still { opacity: .85; top: auto; bottom: 0; height: min(64%, 420px); object-position: center 60%; }
  .hero--stage::before { background: linear-gradient(180deg, rgba(94,15,27,1) 0%, rgba(94,15,27,.97) 42%, rgba(104,17,30,.62) 66%, rgba(142,27,42,.22) 100%); }
  .hero--stage .stickers { padding-bottom: 16px; }
}

/* ---------- hero H3 Poster: centred headline, the cutout breaking out of a big gold ring, stickers floating around it ---------- */
.hero--poster .wrap { display: grid; justify-items: center; text-align: center; }
.hero--poster .kick, .hero--poster .btn-row { justify-content: center; }
.hero--poster h1 { max-width: 20ch; }
html[lang="hi"] .hero--poster h1 { max-width: 24ch; }
.hero--poster .lead { margin-inline: auto; }
.hero--poster .ring-art { margin-top: clamp(64px, 9vw, 96px); }
.hero--poster { padding-bottom: clamp(32px, 5vw, 56px); }
.ring-art { position: relative; margin: 0 auto; width: min(100%, 360px); aspect-ratio: 1; }
.ring-art::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: clamp(10px, 1.6vw, 16px) solid var(--gold); box-shadow: 0 0 0 12px rgba(230,199,106,.14), 0 30px 60px -30px rgba(0,0,0,.6); }
.ring-art::after { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(255,250,236,.22), rgba(255,255,255,.03) 70%); }
.ring-art .art__img { position: absolute; z-index: 1; left: 50%; bottom: 10%; transform: translateX(-50%); width: auto; max-width: none; height: 112%; object-fit: contain; clip-path: inset(-40% -40% 0 -40%); filter: drop-shadow(0 24px 36px rgba(40,5,12,.5)); }
.ring-art--bust .art__img { height: 96%; }
.ring-art .sticker { position: absolute; z-index: 2; left: var(--x, 0%); top: var(--y, 0%); }
.section .ring-art { width: min(100%, 300px); }
@media (max-width: 599px) { .ring-art { width: min(100%, 270px); } .ring-art .sticker { font-size: 13px; padding: 6px 10px; } }

/* ---------- hero H4 Card stack: three playing cards fanned from a low pivot (the values stay readable); the stack tilts toward the pointer, the cutout peeks over the middle card ---------- */
.stack { position: relative; margin: 0; width: min(100%, 460px); aspect-ratio: 5/4; justify-self: end; perspective: 1200px; cursor: default; }
.stack__cards { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease); }
.stack__peek { position: absolute; z-index: 0; left: 50%; bottom: 52%; width: 38%; margin: 0; translate: -50% 0; transform: translateZ(-30px); }
.stack__peek .art__img { position: static; width: 100%; height: auto; max-width: none; transform: none; filter: drop-shadow(0 14px 24px rgba(40,5,12,.5)); }
.stack__card { position: absolute; z-index: 1; left: 50%; bottom: 4%; width: 37%; aspect-ratio: 5/7; margin-left: -18.5%; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 14px; border-radius: 18px; background: linear-gradient(180deg, #FFFFFF 0%, #FBF6EA 100%); border: 2px solid var(--gold); box-shadow: 0 24px 50px -24px rgba(0,0,0,.6), inset 0 0 0 6px #FFFFFF; color: #2A1F1A; transform-origin: 50% 170%; rotate: var(--r, 0deg); translate: var(--tx, 0) var(--ty, 0); transition: rotate .45s var(--ease), translate .45s var(--ease); }
.stack__card:nth-child(2) { --r: -12deg; --tx: -74%; --ty: 2%; }
.stack__card:nth-child(2) b { text-align: left; }
.stack__card:nth-child(3) { --r: 0deg; --tx: 0; --ty: -4%; z-index: 2; }
.stack__card:nth-child(4) { --r: 12deg; --tx: 74%; --ty: 2%; }
.stack__card:nth-child(4) b { text-align: right; }
.stack__card small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-lo); line-height: 1.2; }
html[lang="hi"] .stack__card small { letter-spacing: .02em; font-size: 12px; }
.stack__card small:last-child { rotate: 180deg; align-self: flex-end; }
.stack__card b { font-family: var(--font-en); font-size: clamp(19px, 2.1vw, 27px); line-height: 1.1; letter-spacing: -.02em; color: var(--crimson); text-align: center; overflow-wrap: anywhere; margin: 6% 0 auto; }
html[lang="hi"] .stack__card b { font-family: var(--font-hi); }
.stack.is-flat .stack__card { --r: 0deg; --ty: 0; }
.stack.is-flat .stack__card:nth-child(2) { --tx: -104%; } .stack.is-flat .stack__card:nth-child(3) { --tx: 0; } .stack.is-flat .stack__card:nth-child(4) { --tx: 104%; }
@media (max-width: 899px) { .stack { width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; justify-self: center; } .stack__card { width: 36%; margin-left: -18%; bottom: 2%; padding: 12px 10px; } .stack__card:nth-child(2) { --tx: -62%; } .stack__card:nth-child(4) { --tx: 62%; } .stack__peek { bottom: 60%; width: 34%; } }

/* ---------- hero H5 Chat: a WhatsApp-style chat mock, bubbles typed in on reveal (.chat--arm is set by site.js) ---------- */
.chat { position: relative; margin: 0; width: min(100%, 420px); justify-self: end; display: grid; gap: 10px; align-content: start; padding: 16px 16px 18px; border-radius: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(230,199,106,.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.chat__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 14px; font-weight: 700; line-height: 1.2; }
.chat__head .art__img { position: static; width: 38px; height: 38px; max-width: none; transform: none; filter: none; object-fit: cover; object-position: 50% 10%; border-radius: 50%; background: var(--cream); border: 2px solid var(--gold); }
.chat__head small { display: block; font-size: 12px; font-weight: 500; opacity: .75; }
.chat__b { position: relative; margin: 0; max-width: 88%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #FFFFFF; color: #2A1F1A; font-size: 15px; line-height: 1.4; box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.chat__b--me { justify-self: end; border-radius: 18px 18px 6px 18px; background: #F7EDD0; }
.chat__b .chat__t { display: block; font-size: 11px; color: #6B5B52; text-align: right; margin-top: 4px; }
.chat--arm .chat__b { opacity: 0; translate: 0 8px; transition: opacity .35s var(--ease), translate .35s var(--ease); }
.chat--arm .chat__b.is-typing, .chat--arm .chat__b.is-in { opacity: 1; translate: 0 0; }
.chat__b.is-typing > * { visibility: hidden; }
.chat__b.is-typing::after { content: ""; position: absolute; left: 16px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: #8E1B2A; box-shadow: 11px 0 0 #8E1B2A, 22px 0 0 #8E1B2A; animation: dots 1s ease-in-out infinite; }
@keyframes dots { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.section .chat { background: var(--white); border-color: var(--line); box-shadow: var(--shadow-lg); justify-self: center; margin: 0 auto; }
.section .chat__head { color: var(--crimson); border-bottom-color: var(--line); }
.section .chat__b { box-shadow: none; border: 1px solid var(--line); }
@media (max-width: 899px) { .chat { width: 100%; justify-self: stretch; } }

/* ---------- hero H6 Minimal cream: for legal pages, apply/status and 404; crimson headline, a small bust in the corner, no tiles ---------- */
.hero--min { --text: #2A1F1A; --muted: #6B5B52; --ink-2: #4A3A33; --heading: #6E1320; --heading-3: #5E0F1B; --white: #FFFFFF; --cream-2: #F0E7D4; --line: #EADFC8; --line-2: #DCCFB2; --gold-lo: #7F6010; --gold-soft: #F7EDD0; --bg: #F7F1E6; background: linear-gradient(180deg, #F7F1E6 0%, #F0E7D4 100%); color: var(--text); padding-bottom: clamp(40px, 6vw, 64px); }
.hero--min::before, .hero--min::after { display: none; }
.hero--min .kick { color: var(--crimson); } .hero--min .kick::before { background: var(--gold); }
.hero--min .lead { color: var(--ink-2); }
.hero--min .small.muted, .hero--min .muted { color: var(--muted); }
.hero--min a { text-decoration-color: rgba(201,162,39,.9); }
.hero--min .btn { background: var(--crimson); color: #FFFFFF; border-color: var(--crimson-deep); box-shadow: none; }
.hero--min .btn:hover { background: var(--crimson-deep); }
.hero--min .btn--wa, .hero--min .btn--ghost { background: transparent; color: var(--crimson); border-color: rgba(142,27,42,.45); }
.hero--min .btn--wa:hover, .hero--min .btn--ghost:hover { background: rgba(142,27,42,.06); border-color: var(--crimson); }
.hero--min .wrap { position: relative; padding-right: clamp(120px, 18vw, 220px); }
.hero__bust { position: absolute; right: var(--gutter); bottom: calc(-1 * clamp(40px, 6vw, 64px)); width: clamp(96px, 14vw, 180px); margin: 0; }
.hero__bust .art__img { position: static; width: 100%; height: auto; max-width: none; transform: none; filter: drop-shadow(0 16px 24px rgba(40,5,12,.3)); }
.hero--min + .section { padding-top: clamp(36px, 5vw, 64px); }

/* ---------- stickers: rotated gold tags; --rot sets the tilt. Only hero stickers float (4.5 s, 4px, --d staggers the phase; see "hero entrance"
   below); beside reading text they sit still. site.js marks an off-screen hero .is-off, which pauses the loop. ---------- */
.sticker { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 15px; border-radius: 12px; background: var(--grad-gold); color: #5E0F1B; font-weight: 700; font-size: 15px; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 12px 26px -12px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.45); rotate: var(--rot, -4deg); }
.sticker small { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; line-height: 1.2; }
html[lang="hi"] .sticker small { letter-spacing: .03em; font-size: 12px; }
.sticker--big { padding: 12px 20px 11px; font-size: clamp(22px, 2.4vw, 30px); border-radius: 16px; }
.sticker--ink { background: var(--crimson-deep); color: #FFFFFF; box-shadow: 0 12px 26px -12px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(230,199,106,.5); }
.sticker--ink small { opacity: .8; color: var(--gold-hi); }
.sticker--paper { background: #FFFFFF; color: #8E1B2A; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.stickers { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; margin: 28px 0 0; padding: 4px 0; list-style: none; }
.stickers > li { margin: 0; }
.stickers > li:nth-child(2) .sticker { --rot: 3deg; --d: -1s; } .stickers > li:nth-child(3) .sticker { --rot: -2deg; --d: -2s; } .stickers > li:nth-child(4) .sticker { --rot: 4deg; --d: -.5s; }
.wrap > .stickers:not(:first-child) { margin-top: 26px; }
.center .stickers { justify-content: center; }

/* ---------- track: a 16-week line that fills with gold as you scroll (horizontal on desktop, vertical on phones), four milestone chips that pop.
   Each leg carries --from and --at (its share of the whole, 0 to 1); site.js sets --p on the list and marks chips .is-on. ---------- */
.track { --p: 1; --rail: rgba(201,162,39,.26); display: grid; margin: 0; padding: 0; list-style: none; }
.track__leg { --f: clamp(0, (var(--p) - var(--from, 0)) / (var(--at, 1) - var(--from, 0)), 1); position: relative; margin: 0; }
.track__leg::before, .track__leg::after { content: ""; position: absolute; border-radius: 3px; }
.track__leg::before { background: repeating-linear-gradient(90deg, var(--rail) 0 calc(25% - 3px), transparent calc(25% - 3px) 25%); }
.track__leg::after { background: repeating-linear-gradient(90deg, var(--gold) 0 calc(25% - 3px), transparent calc(25% - 3px) 25%); clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0); transition: clip-path .25s linear; }
.track__leg--live::after { background: repeating-linear-gradient(90deg, var(--crimson) 0 calc(25% - 3px), transparent calc(25% - 3px) 25%); }
.track__note .when { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-lo); margin: 0 0 6px; }
html[lang="hi"] .track__note .when { letter-spacing: .02em; font-size: 14px; }
.track__leg--live .track__note .when { color: var(--crimson); }
.track__note b { display: block; font-size: 18px; color: var(--crimson); line-height: 1.25; margin-bottom: 4px; }
.track__note p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.track__chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--crimson-deep); color: #FFFFFF; border: 2px solid var(--gold); font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); transition: scale .45s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.track__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hi); flex: none; }
.track--arm .track__chip:not(.is-on) { scale: 0; opacity: 0; }
.track__chip::after { content: ""; position: absolute; width: 3px; height: 10px; background: var(--gold); border-radius: 2px; left: 50%; top: 100%; translate: -50% 0; }
@media (min-width: 900px) {
  .track { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 8px; }
  .track__leg { padding: 78px 22px 0 0; }
  .track__leg::before, .track__leg::after { left: 0; right: 0; top: 44px; height: 12px; border-radius: 4px; }
  .track__chip { right: 0; top: 0; translate: 50% 0; }
  .track__leg:last-child .track__chip { translate: 0 0; }
  .track__leg:last-child .track__chip::after { left: auto; right: 14px; translate: 0 0; }
  .track__leg:last-child { padding-right: 0; }
}
@media (max-width: 899px) {
  .track { gap: 0; }
  .track__leg { padding: 0 0 64px 38px; min-height: 120px; }
  .track__leg::before, .track__leg::after { left: 8px; top: 0; bottom: 0; width: 12px; border-radius: 4px; background: repeating-linear-gradient(180deg, var(--rail) 0 calc(25% - 3px), transparent calc(25% - 3px) 25%); }
  .track__leg::after { background: repeating-linear-gradient(180deg, var(--gold) 0 calc(25% - 3px), transparent calc(25% - 3px) 25%); clip-path: inset(0 0 calc((1 - var(--f)) * 100%) 0); }
  .track__leg--live::after { background: repeating-linear-gradient(180deg, var(--crimson) 0 calc(25% - 3px), transparent calc(25% - 3px) 25%); }
  .track__chip { left: 34px; bottom: 22px; translate: 0 50%; }
  .track__chip::after { left: auto; right: 100%; top: 50%; translate: 0 -50%; width: 14px; height: 3px; }
  .track__leg:last-child { padding-bottom: 36px; }
  .track__leg:last-child .track__chip { bottom: 0; translate: 0 0; }
}

/* ---------- quest: numbered tiles on a dotted gold path; each tile flips (hover, click, Enter, Space) to show what you need ---------- */
.quest { position: relative; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.quest__tile { position: relative; margin: 0; perspective: 1000px; cursor: pointer; }
.quest__n { display: block; font-family: var(--font-en); font-size: 44px; line-height: 1; font-weight: 700; color: var(--gold); letter-spacing: -.02em; margin-bottom: 12px; }
.quest h3 { font-size: 20px; margin: 0 0 8px; color: var(--crimson); }
.quest p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.quest__date { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto; padding: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--gold-lo); }
.quest__date::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.quest__here { position: absolute; z-index: 3; left: 16px; top: -16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--crimson); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); animation: float 2.4s ease-in-out .6s 3; pointer-events: none; }
.quest__here::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 0 3px rgba(230,199,106,.35); }
.quest .flip__back b { color: var(--gold-hi); display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
html[lang="hi"] .quest .flip__back b { letter-spacing: .02em; }
.quest .flip__back ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.45; }
.quest .flip__back li { margin-bottom: 4px; }
@media (min-width: 900px) {
  .quest { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 10px; }
  .quest::before { content: ""; position: absolute; left: 8%; right: 8%; top: 44%; border-top: 4px dotted var(--gold); }
  .quest > :nth-child(even) { margin-top: 48px; }
}
@media (max-width: 899px) {
  .quest { padding-left: 0; }
  .quest::before { content: ""; position: absolute; left: 34px; top: 10px; bottom: 10px; border-left: 3px dotted var(--gold); }
  .quest__tile { margin-left: 0; }
}

/* ---------- flip faces (shared by quest, flip-deck and coins): the two faces share one grid cell, so the card is as tall as its taller face ---------- */
.flip__inner { position: relative; display: grid; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.45,.05,.3,1); height: 100%; }
.flip__front, .flip__back { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: var(--r-card); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow-wrap: anywhere; }
.flip__back { transform: rotateY(180deg); background: var(--crimson-deep); color: #FFFFFF; border-color: rgba(230,199,106,.45); }
.flip__back p { color: rgba(255,255,255,.88); margin: 0; font-size: 15px; line-height: 1.45; }
.flip__back a { color: #FFFFFF; }
.is-flipped .flip__inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { [data-flip]:hover .flip__inner { transform: rotateY(180deg); } }
[data-flip]:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 4px; border-radius: var(--r-card); }
.flip__hint { position: absolute; right: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-lo); display: grid; place-items: center; }
.flip__hint::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.5-5.8'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.5-5.8'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- flip-deck: question cards that flip to a plain answer ---------- */
.flip-deck { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; list-style: none; }
.flip-deck > li { margin: 0; perspective: 1000px; cursor: pointer; min-width: 0; }
.flip-deck .flip__front { padding-right: 52px; }
.flip-deck .flip__front h3 { font-size: 18px; margin: 0; line-height: 1.3; }
.flip-deck .flip__front .kick { margin-bottom: 10px; }
.flip-deck .flip__front .card__when, .flip__more { margin-top: auto; padding-top: 14px; }
.flip-deck .flip__back p { font-size: 14.5px; line-height: 1.42; }
@media (min-width: 900px) { .flip-deck .flip__front, .flip-deck .flip__back { padding: 20px 18px 18px; } .flip-deck .flip__front { padding-right: 50px; } }

/* ---------- counter: counts up on reveal (site.js); the HTML holds the final text, tabular numerals keep the width steady ---------- */
.counter { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.counter--big { display: block; font-family: var(--font-en); font-size: clamp(48px, 8vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--crimson); }
.counter--big small { display: block; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 10px; font-weight: 700; }
html[lang="hi"] .counter--big small { letter-spacing: .02em; }
.card .counter--big { font-size: clamp(38px, 4.6vw, 56px); white-space: nowrap; }

/* ---------- split-bar: proportional segments (--w) that grow in on reveal; a legend below for phones ---------- */
.split-bar { display: flex; gap: 4px; height: 60px; margin: 16px 0 0; border-radius: 14px; overflow: hidden; }
.split-bar > span { --sx: 1; flex: var(--w, 1) 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6px; background: var(--gold); color: var(--crimson-deep); font-weight: 700; font-size: 15px; line-height: 1.15; text-align: center; transform-origin: left; transform: scaleX(var(--sx)); transition: transform .45s var(--ease) calc(var(--k, 0) * 70ms); overflow: hidden; }
.split-bar > span:nth-child(even) { background: var(--crimson); color: #FFFFFF; }
.split-bar > span:nth-child(2) { --k: 1; } .split-bar > span:nth-child(3) { --k: 2; } .split-bar > span:nth-child(4) { --k: 3; } .split-bar > span:nth-child(5) { --k: 4; }
.split-bar > span small { font-size: 11px; font-weight: 600; opacity: .85; white-space: nowrap; }
.split-bar.rv > span { --sx: 0; } .split-bar.in > span { --sx: 1; }
.split-bar__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.split-bar__legend li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.split-bar__legend li::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--gold); flex: none; }
.split-bar__legend li:nth-child(even)::before { background: var(--crimson); }
@media (max-width: 599px) { .split-bar { height: 52px; } .split-bar > span small { display: none; } }

/* ---------- coins: four gold coins that flip to "paid" (hover, click, Enter) ---------- */
.coins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.coin { position: relative; margin: 0 auto; width: 100%; max-width: 140px; aspect-ratio: 1; perspective: 800px; cursor: pointer; }
.coin .flip__front, .coin .flip__back { border-radius: 50%; align-items: center; justify-content: center; text-align: center; padding: 10px; gap: 2px; }
.coin .flip__front { background: var(--grad-gold); border: 3px solid var(--gold-hi); color: #5E0F1B; box-shadow: inset 0 0 0 7px rgba(255,255,255,.28), 0 16px 26px -14px rgba(0,0,0,.5); }
.coin .flip__back { background: var(--crimson-deep); border: 3px solid var(--gold); color: var(--gold-hi); box-shadow: inset 0 0 0 7px rgba(230,199,106,.18); }
.coin b { font-family: var(--font-en); font-size: clamp(20px, 2.4vw, 26px); line-height: 1; }
.coin small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
html[lang="hi"] .coin small { letter-spacing: .02em; font-size: 12px; }
[data-flip]:focus-visible.coin { border-radius: 50%; }
@media (max-width: 599px) { .coins { gap: 10px; } .coin b { font-size: 18px; } }

/* ---------- floormap: the office as grid rooms (office stills as tiles, --img), a tooltip on hover or focus ---------- */
.floormap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); gap: 10px; margin: 0; padding: 14px; list-style: none; border-radius: var(--r-card); background: var(--cream-2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.floormap > li { margin: 0; min-width: 0; grid-column: span var(--span, 2); grid-row: span var(--rows, 1); }
.floormap__room { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px; width: 100%; height: 100%; min-height: 104px; margin: 0; padding: 10px; border: 1px solid rgba(201,162,39,.45); border-radius: 16px; background: var(--white) var(--img) center / cover no-repeat; color: #FFFFFF; text-align: left; cursor: pointer; overflow: visible; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s; isolation: isolate; font: inherit; }
.floormap__room::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(94,15,27,0) 30%, rgba(94,15,27,.85) 100%); }
.floormap__room b { position: relative; z-index: 1; font-size: 14px; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; }
.floormap__room b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hi); flex: none; }
.floormap__room:hover, .floormap__room:focus-visible { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-lg); z-index: 3; }
.floormap__room .tip { position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 10px); width: max(200px, 100%); max-width: 260px; translate: -50% 4px; padding: 10px 12px; border-radius: 12px; background: #FFFFFF; color: #2A1F1A; font-size: 13.5px; font-weight: 500; line-height: 1.4; box-shadow: 0 20px 40px -18px rgba(0,0,0,.5); border: 1px solid var(--line); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), translate .25s var(--ease), visibility 0s .25s; text-align: left; white-space: normal; }
.floormap__room .tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; translate: -50% -50%; rotate: 45deg; background: #FFFFFF; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.floormap__room:hover .tip, .floormap__room:focus-visible .tip, .floormap__room:focus .tip { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
.floormap > li:first-child .floormap__room .tip, .floormap > li:nth-child(2) .floormap__room .tip { bottom: auto; top: calc(100% + 10px); translate: -50% -4px; }
.floormap > li:first-child .floormap__room .tip::after, .floormap > li:nth-child(2) .floormap__room .tip::after { top: auto; bottom: 100%; translate: -50% 50%; rotate: 225deg; }
.floormap > li:first-child .floormap__room:hover .tip, .floormap > li:first-child .floormap__room:focus .tip, .floormap > li:nth-child(2) .floormap__room:hover .tip, .floormap > li:nth-child(2) .floormap__room:focus .tip { translate: -50% 0; }
@media (min-width: 900px) { .floormap { transform: perspective(1400px) rotateX(5deg); transform-origin: 50% 100%; } }
@media (max-width: 599px) { .floormap { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(96px, auto); gap: 8px; padding: 10px; } .floormap > li { grid-column: span min(var(--span, 2), 2); grid-row: span 1; } }

/* ---------- dial: an SVG clock whose hand turns as you scroll (data-from and data-to in degrees; site.js sets --deg) ---------- */
.dial { display: block; width: min(100%, 300px); margin: 0 auto; overflow: visible; }
.dial__face { fill: #FFFFFF; stroke: var(--gold); stroke-width: 4; }
.dial__tick { stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; }
.dial__arc { fill: none; stroke: var(--gold); stroke-width: 10; stroke-linecap: round; opacity: .9; }
.dial__hand { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(var(--deg, 0deg)); transition: transform .2s linear; }
.dial__hand line { stroke: var(--crimson); stroke-width: 6; stroke-linecap: round; }
.dial__hand circle { fill: var(--crimson-deep); stroke: var(--gold); stroke-width: 3; }
.dial__label { font-family: var(--font-en); font-size: 13px; font-weight: 700; fill: var(--crimson); text-anchor: middle; }
.dial__slots { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 15px; }
.dial__slots li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; margin: 0; padding: 8px 0; border-top: 1px solid var(--line-2); }
.dial__slots b { color: var(--crimson); font-family: var(--font-en); }

/* ---------- holo: a crimson card with a shine that follows the pointer and a sweep on hover ---------- */
.holo { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-card); padding: 28px 26px; background: linear-gradient(160deg, #7A1524 0%, #5E0F1B 100%); color: #FFFFFF; border: 1px solid rgba(230,199,106,.5); box-shadow: var(--shadow-lg); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease); }
.holo::before { content: ""; position: absolute; inset: -20%; z-index: 0; background: radial-gradient(circle at var(--mx, 72%) var(--my, 18%), rgba(255,255,255,.38) 0%, rgba(230,199,106,.22) 16%, transparent 42%); mix-blend-mode: screen; pointer-events: none; }
.holo::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 40%; z-index: 0; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%); translate: -140% 0; rotate: 12deg; pointer-events: none; transition: translate .6s var(--ease); }
.holo:hover::after { translate: 320% 0; }
.holo > * { position: relative; z-index: 1; }
.holo .kick { color: var(--gold-hi); } .holo .kick::before { background: var(--gold-hi); }
.holo h2, .holo h3 { color: #FFFFFF; }
.holo p { color: rgba(255,255,255,.88); }
.holo .holo__pin { position: absolute; right: 22px; top: 22px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--gold); display: grid; place-items: center; font-family: var(--font-en); font-weight: 700; font-size: 15px; color: var(--gold-hi); letter-spacing: .02em; }
.holo .art__img { position: absolute; right: -4%; bottom: 0; height: 110%; width: auto; max-width: none; transform: none; filter: drop-shadow(0 20px 30px rgba(0,0,0,.45)); z-index: 0; opacity: .95; }
.holo--with-art { padding-right: clamp(150px, 34%, 260px); min-height: 280px; }
@media (max-width: 599px) { .holo--with-art { padding-right: 26px; padding-bottom: 180px; min-height: 0; } .holo .art__img { height: 190px; right: 10px; } }

/* ---------- scrub: a horizontal timeline strip with snap points; drag, swipe or wheel through the years ---------- */
.scrub { position: relative; display: flex; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 30px var(--gutter) 10px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%); }
.scrub::-webkit-scrollbar { display: none; }
.scrub > li { position: relative; flex: 0 0 min(72vw, 250px); margin: 0; padding: 22px 16px 0 0; scroll-snap-align: start; }
.scrub > li::before { content: ""; position: absolute; left: 0; right: -14px; top: 0; height: 2px; background: rgba(201,162,39,.5); }
.scrub > li::after { content: ""; position: absolute; left: 0; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--bg); }
.scrub > li:last-child::before { right: 0; }
.scrub .when { display: block; font-family: var(--font-en); font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--crimson); line-height: 1; margin-bottom: 8px; }
.scrub b { display: block; font-size: 16px; color: var(--text); margin-bottom: 4px; }
.scrub p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.scrub:focus-visible { outline-offset: -3px; }

/* ---------- scoreboard: a shell of tabular zeros, no fake data; a sticker says when the first numbers arrive ---------- */
.scoreboard { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 28px 22px 22px; border-radius: var(--r-card); background: linear-gradient(180deg, #6E1320, #5E0F1B); border: 1px solid rgba(230,199,106,.45); color: #FFFFFF; box-shadow: var(--shadow-lg); }
.scoreboard > div { text-align: center; min-width: 0; }
.scoreboard b { display: block; font-family: var(--font-en); font-variant-numeric: tabular-nums; font-size: clamp(36px, 6vw, 72px); font-weight: 700; line-height: 1; letter-spacing: .06em; color: var(--gold-hi); padding: 14px 0; border-radius: 12px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(230,199,106,.25); }
.scoreboard span { display: block; margin-top: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }
html[lang="hi"] .scoreboard span { letter-spacing: .02em; font-size: 13px; }
.scoreboard .sticker { position: absolute; right: -6px; top: -16px; z-index: 2; }
@media (max-width: 599px) { .scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px 14px 16px; } .scoreboard .sticker { right: 8px; } }

/* ---------- wall: an empty batch wall of silhouettes, one lit sample ---------- */
.wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.wall > li { position: relative; margin: 0; aspect-ratio: 4/5; border-radius: 14px; border: 1.5px dashed rgba(201,162,39,.55); background: var(--white); overflow: hidden; }
.wall > li::before { content: ""; position: absolute; left: 50%; top: 20%; width: 36%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--cream-2); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.wall > li::after { content: ""; position: absolute; left: 50%; top: 62%; width: 70%; aspect-ratio: 2/1.1; translate: -50% 0; border-radius: 999px 999px 0 0; background: var(--cream-2); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.wall__sample { border-style: solid !important; border-color: var(--gold) !important; background: var(--gold-soft) !important; box-shadow: 0 0 0 4px rgba(230,199,106,.3), var(--shadow); }
.wall__sample::before, .wall__sample::after { background: var(--gold) !important; box-shadow: none !important; }
.wall > li.wall__sample { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.wall__sample::after { display: none; }
.wall__sample p { position: absolute; z-index: 1; inset: 52% 0 0; margin: 0; padding: 0 6px; display: grid; align-content: center; background: var(--gold-soft); text-align: center; font-size: 13px; line-height: 1.35; color: var(--text); }
.wall__sample p b { display: block; }

/* ---------- ticket: a "coming 2027" stub with a perforated divider and a QR-like pattern ---------- */
.ticket { --stub: 168px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); max-width: 600px; margin: 0 auto; border-radius: 20px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.ticket__main { padding: 26px 26px 24px; min-width: 0; }
.ticket__main h3 { margin-bottom: 6px; }
.ticket__main p { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.ticket__main .btn-row { margin-top: 14px; }
.ticket__stub { position: relative; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 24px 16px; border-left: 2px dashed var(--line-2); border-radius: 0 20px 20px 0; background: var(--gold-soft); text-align: center; }
.ticket__stub b { font-family: var(--font-en); font-size: 26px; color: var(--crimson); line-height: 1; letter-spacing: -.02em; }
.ticket__stub small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-lo); }
html[lang="hi"] .ticket__stub small { letter-spacing: .02em; font-size: 12.5px; }
.ticket::before, .ticket::after { content: ""; position: absolute; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); right: calc(var(--stub) - 12px); }
.ticket::before { top: -13px; border-top-color: transparent; } .ticket::after { bottom: -13px; border-bottom-color: transparent; }
.ticket__qr { width: 64px; height: 64px; border-radius: 8px; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' shape-rendering='crispEdges'%3E%3Cpath fill='%235E0F1B' d='M0 0h3v3H0zM8 0h3v3H8zM0 8h3v3H0zM4 0h1v1H4zM6 1h1v1H6zM4 2h2v1H4zM5 4h1v1H5zM8 4h2v1H8zM1 5h2v1H1zM4 5h1v2H4zM6 6h1v1H6zM9 6h1v2H9zM7 8h1v1H7zM5 8h1v1H5zM4 10h2v1H4zM7 10h1v1H7zM10 9h1v1h-1z'/%3E%3Cpath fill='%23FFFFFF' d='M1 1h1v1H1zM9 1h1v1H9zM1 9h1v1H1z'/%3E%3C/svg%3E") center / 52px no-repeat; border: 1px solid var(--line); }
@media (max-width: 599px) {
  .ticket { grid-template-columns: 1fr; --stub: 0px; }
  .ticket__stub { border-left: 0; border-top: 2px dashed var(--line-2); border-radius: 0 0 20px 20px; grid-auto-flow: column; align-items: center; justify-content: center; gap: 16px; }
  .ticket::before, .ticket::after { right: auto; top: auto; bottom: auto; }
  .ticket::before { left: -13px; border: 1px solid var(--line); border-left-color: transparent; } .ticket::after { right: -13px; border: 1px solid var(--line); border-right-color: transparent; }
  .ticket:has(.ticket__stub)::before, .ticket:has(.ticket__stub)::after { top: calc(100% - var(--stub-h, 112px) - 12px); }
}

/* ---------- ring-progress: an SVG ring that fills per apply step (site.js sets --ring from the [data-step] index) ---------- */
.ring-progress { --ring: .333; position: relative; width: 104px; height: 104px; margin: 0 auto 18px; display: grid; place-items: center; }
.ring-progress svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.ring-progress circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring-progress circle:first-child { stroke: var(--cream-2); }
.ring-progress circle:last-child { stroke: var(--gold); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ring)); transition: stroke-dashoffset .6s var(--ease); }
.ring-progress b { position: relative; font-family: var(--font-en); font-size: 18px; color: var(--crimson); font-variant-numeric: tabular-nums; }

/* ---------- scanner: a gold-cornered frame around the certificate lookup, corners pulse, the result slides in ---------- */
.scanner { position: relative; padding: 30px 26px 26px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.scanner::before, .scanner::after, .scanner__c::before, .scanner__c::after { content: ""; position: absolute; width: 30px; height: 30px; border: 3px solid var(--gold); animation: pulse 2.4s ease-in-out infinite; pointer-events: none; }
.scanner:focus-within::before, .scanner:focus-within::after, .scanner:focus-within .scanner__c::before, .scanner:focus-within .scanner__c::after { animation: none; }
.scanner.is-off::before, .scanner.is-off::after, .scanner.is-off .scanner__c::before, .scanner.is-off .scanner__c::after { animation-play-state: paused; }
.scanner::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.scanner::after { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.scanner__c::before { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.scanner__c::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.scanner__c { position: absolute; inset: 0; pointer-events: none; }
.scanner input[type="text"] { font-family: var(--font-en); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.scanner .form-msg[data-show="true"] { animation: slideUp .36s var(--ease) both; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes slideUp { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* ---------- chips and readbar: quick-read jump chips (sticky column on desktop) and a gold reading-progress bar under the header ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.chips li { margin: 0; }
.chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-2); color: var(--crimson); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.chips a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; transition: background .2s; }
.chips a:hover, .chips a.is-here { background: var(--crimson); color: #FFFFFF; border-color: transparent; }
.chips a.is-here::before { background: var(--gold-hi); }
.with-chips { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .with-chips { grid-template-columns: 230px minmax(0, 1fr); gap: 40px; } .with-chips .chips { position: sticky; top: calc(var(--header-h) + 20px); flex-direction: column; align-items: stretch; margin: 0; } .with-chips .chips a { justify-content: flex-start; } }
.readbar { position: fixed; z-index: 51; left: 0; top: var(--header-h); width: 100%; height: 3px; background: var(--gold); transform-origin: left; transform: scaleX(var(--read, 0)); pointer-events: none; }

/* ---------- flow: yes/no diamonds in a column ---------- */
.flow { display: grid; justify-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.flow > li { position: relative; display: grid; justify-items: center; margin: 0; min-width: 0; width: 100%; }
.flow > li:not(:last-child)::after { content: ""; width: 3px; height: 30px; border-radius: 2px; background: rgba(201,162,39,.6); margin: 2px 0 6px; }
.flow__q { position: relative; z-index: 1; width: 196px; height: 196px; display: grid; place-items: center; padding: 34px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--crimson); }
.flow__q::before { content: ""; position: absolute; z-index: -1; inset: 22px; rotate: 45deg; border-radius: 16px; background: var(--white); border: 2px solid var(--gold); box-shadow: var(--shadow); }
.flow__branch { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-top: 10px; }
.flow__yes, .flow__no { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--white); border: 1px solid var(--line-2); color: var(--text); max-width: 100%; }
.flow__yes::before, .flow__no::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.flow__yes::before { background: var(--gold); } .flow__no::before { background: var(--crimson); }
.flow__end { padding: 16px 24px; border-radius: 16px; background: var(--crimson-deep); color: #FFFFFF; font-weight: 700; text-align: center; max-width: 420px; }
@media (max-width: 599px) { .flow__q { width: 170px; height: 170px; padding: 30px; font-size: 14px; } }

/* ---------- checklist: ticks as the items scroll in (site.js adds .checklist--arm); the pill after it lights up when all are ticked ---------- */
.checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; max-width: 660px; }
.checklist > li { position: relative; margin: 0; padding: 14px 18px 14px 58px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); font-size: 16px; line-height: 1.45; transition: border-color .3s, box-shadow .3s; }
.checklist > li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 28px; height: 28px; translate: 0 -50%; border-radius: 9px; background: var(--gold); border: 2px solid var(--gold); transition: background .3s, border-color .3s; }
.checklist > li::after { content: ""; position: absolute; left: 16px; top: 50%; width: 28px; height: 28px; translate: 0 -50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E0F1B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; transition: scale .45s cubic-bezier(.34,1.56,.64,1); }
.checklist--arm > li:not(.is-on)::before { background: var(--white); border-color: var(--line-2); }
.checklist--arm > li:not(.is-on)::after { scale: 0; }
.checklist > li.is-on { border-color: rgba(201,162,39,.6); }
.checklist__end { margin-top: 22px; }
.checklist__end .btn { transition: box-shadow .5s var(--ease), transform .2s var(--ease), background .2s; }
.checklist:not(.checklist--arm) + .checklist__end .btn, .checklist.is-done + .checklist__end .btn { box-shadow: 0 0 0 6px rgba(230,199,106,.38), 0 14px 30px -10px rgba(201,162,39,.9); }

/* ---------- tilt: pointer tilt for any card, 6 degrees at most (site.js sets --rx and --ry) ---------- */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease), box-shadow .25s var(--ease); will-change: transform; }
.card.tilt:hover, .tiles > li.tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-2px); }

/* ---------- rhythm: a wide card then two narrow ones, alternating (1 wide, 2 narrow, 1 wide, ...) ---------- */
.rhythm { display: grid; gap: 16px; }
@media (min-width: 720px) { .rhythm { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rhythm > :nth-child(4n+1), .rhythm > :nth-child(4n) { grid-column: span 2; } .rhythm > :nth-child(4n+3):last-child { grid-column: 1 / -1; } }
.card--wide { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; }
.card--wide > .ic:first-child { grid-column: 1; }
.card--wide .card__big { grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right; font-family: var(--font-en); font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--gold); }
.card--wide .card__big small { display: block; font-family: inherit; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
html[lang="hi"] .card--wide .card__big small { font-family: var(--font-hi); letter-spacing: .02em; font-size: 13px; }
@media (max-width: 599px) { .card--wide { grid-template-columns: 1fr; } .card--wide .card__big { grid-column: 1; grid-row: auto; text-align: left; margin-top: 10px; font-size: 40px; } }

/* ---------- card footnotes and the holo card's hover (keeps the pointer tilt instead of the plain lift) ---------- */
.card__when { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--gold-lo); }
.card.holo:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* ---------- fee card on a crimson surface: rows read white ---------- */
.card--ink .rows { box-shadow: none; }
.card--ink .rows > li > span, .card--ink .rows b { color: #FFFFFF; }
.card--ink .rows small { color: rgba(255,255,255,.72); }
.card--ink .counter--big { color: var(--gold-hi); }
.card--ink .counter--big small { color: rgba(255,255,255,.75); }
.card--ink h3 { color: #FFFFFF; }

/* ---------- hero H4 and H5 hooks: the stack and the chat sit centred against the headline ---------- */
.hero--stack .split, .hero--chat .split { align-items: center; }

/* ---------- faq--v4: the open summary gets a gold tick and the answer slides in; group headers can carry a ring-art bust with "?" stickers ---------- */
.faq--v4 details[open] summary::after { content: ""; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E0F1B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.faq--v4 details[open] .a { animation: slideUp .3s var(--ease) both; }
.faq__head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; margin: 0 0 18px; }
.faq__head .ring-art { width: 120px; margin: 0; }
.faq__head .ring-art::before { border-width: 6px; }
@media (max-width: 599px) { .faq__head { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; } .faq__head .ring-art { width: 88px; } }

/* ---------- ladder--map (the path page): the seven discs zig-zag along a dotted S-curve (an SVG .ladder__path behind them), padlocks wobble on hover, .rung--glow lights the Batch 1 disc ---------- */
.ladder--map { position: relative; isolation: isolate; padding: 40px 0 36px; }
.ladder--map .rung { position: relative; }
.ladder--map .rung:hover .no { animation: wobble .5s var(--ease); }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -8deg; } 75% { rotate: 8deg; } }
.ladder--map .rung--glow .no { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 6px rgba(230,199,106,.35), 0 12px 26px -8px rgba(201,162,39,.8); }
.ladder__path { position: absolute; z-index: -1; left: 0; right: 0; top: 16px; margin: 0 auto; width: min(860px, 100%); height: auto; pointer-events: none; }
.ladder__path path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }

/* ---------- reveal variants: .rv--pop (scale), .rv--slide-l / .rv--slide-r (from the side), .rv--draw (SVG strokes with pathLength="1" draw themselves; the dotted .ladder__path carries no pathLength and is wiped in instead, so it stays dotted) ---------- */
.rv--pop.in { animation-name: rvPop; }
@keyframes rvPop { from { opacity: 0; scale: .86; } 60% { opacity: 1; scale: 1.03; } to { opacity: 1; scale: 1; } }
.rv--slide-l.in { animation-name: rvSlideL; }
@keyframes rvSlideL { from { opacity: 0; translate: -24px 0; } to { opacity: 1; } }
.rv--slide-r.in { animation-name: rvSlideR; }
@keyframes rvSlideR { from { opacity: 0; translate: 24px 0; } to { opacity: 1; } }
.rv--draw.rv [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rv--draw.in [pathLength] { animation: rvDraw .7s cubic-bezier(.45,.05,.3,1) forwards; animation-delay: calc(var(--i, 0) * 50ms + 100ms); }
@keyframes rvDraw { to { stroke-dashoffset: 0; } }

/* ---------- hero entrance: one short sequence per hero variant, in CSS so it starts with the first paint and needs no JS (site.js leaves
   everything inside .hero alone). Text first (0 to 140 ms), art second (160 ms), stickers and fact tiles last (300 ms on); all done by 700 ms.
   Entrances ease out, the pops carry a small spring; fill is backwards only, so hover and tap states work as soon as it ends. The text starts at opacity .01, not 0, so the headline still counts as the largest paint. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .kick, .hero h1, .hero .lead, .hero .btn-row { animation: heroText .4s var(--ease) backwards; }
  .hero h1 { animation-delay: 40ms; } .hero .lead { animation-delay: 90ms; } .hero .btn-row { animation-delay: 140ms; }
  .hero .art, .hero .photo, .hero__bust { animation: heroArt .44s var(--ease) 160ms backwards; }
  .hero__cut { animation: heroCut .46s var(--ease) 160ms backwards; }
  .hero--stage .hero__still { animation: heroStill .7s var(--ease) backwards; }
  .hero .ring-art { animation: heroRing .46s cubic-bezier(.3,1.3,.5,1) 160ms backwards; }
  .hero .stack__card { animation: heroCard .48s cubic-bezier(.3,1.25,.5,1) 160ms backwards; }
  .hero .stack__peek { animation: heroPeek .4s var(--ease) 280ms backwards; }
  .hero .chat { animation: heroChat .44s var(--ease) 160ms backwards; }
  .hero .facts > * { animation: heroText .36s var(--ease) backwards; animation-delay: calc(300ms + var(--si, 0) * 40ms); }
  .hero .facts > :nth-child(2) { --si: 1; } .hero .facts > :nth-child(3) { --si: 2; } .hero .facts > :nth-child(4) { --si: 3; } .hero .facts > :nth-child(n+5) { --si: 4; }
  .hero .sticker { animation: stickerIn .3s cubic-bezier(.3,1.4,.5,1) backwards, float 4.5s ease-in-out infinite; animation-delay: calc(300ms + var(--si, 0) * 45ms), calc(.7s + var(--d, 0s)); }
  .hero .stickers > li:nth-child(2) .sticker, .hero .ring-art .sticker ~ .sticker { --si: 1; }
  .hero .stickers > li:nth-child(n+3) .sticker, .hero .ring-art .sticker ~ .sticker ~ .sticker { --si: 2; }
  .hero.is-off .sticker, .is-off .quest__here { animation-play-state: paused; }
}
@keyframes heroText { from { opacity: .01; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes heroArt { from { opacity: 0; scale: .95; } to { opacity: 1; scale: 1; } }
@keyframes heroCut { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes heroStill { from { scale: 1.06; } to { scale: 1; } }
@keyframes heroRing { from { opacity: 0; scale: .88; } to { opacity: 1; scale: 1; } }
@keyframes heroCard { from { opacity: 0; rotate: 0deg; translate: 0 8%; } }
@keyframes heroPeek { from { opacity: 0; translate: -50% 40%; } }
@keyframes heroChat { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes stickerIn { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sticker, .quest__here, .scanner::before, .scanner::after, .scanner__c::before, .scanner__c::after, .chat__b.is-typing::after { animation: none !important; }
  .hero--stage .hero__still { translate: none; }
  .stack__cards, .holo, .tilt, .card.tilt:hover { transform: none; }
  .holo::after { display: none; }
  .track--arm .track__chip:not(.is-on), .checklist--arm > li:not(.is-on)::after { scale: 1; opacity: 1; }
  .rv--draw.rv [pathLength] { stroke-dashoffset: 0; }
}

/* ---------- review pass, 4 Oct: shared fixes ---------- */
/* email addresses never break mid-word; in a closing lead the address drops to its own line whole */
a[href^="mailto:"] { white-space: nowrap; overflow-wrap: normal; }
.closing .lead a[href^="mailto:"] { display: inline-block; }
@media (max-width: 380px) { a[href^="mailto:"] { font-size: .92em; } }
/* inside tiles and cards on phones the box is narrower than the address, so there it may wrap rather than push the page sideways */
@media (max-width: 599px) { .rules a[href^="mailto:"], .card a[href^="mailto:"], .rows a[href^="mailto:"], .tiles a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; } }
.rules { grid-template-columns: minmax(0, 1fr); }
.rules > li { min-width: 0; }

/* card stack: one label per card (no upside-down twin), the fact sits in the middle and is large enough to read */
.stack__card small { font-size: 12.5px; color: var(--crimson); opacity: .8; }
.stack__card b ~ small { display: none; }
.stack__card b { font-size: clamp(20px, 2.3vw, 30px); margin: auto 0; }
@media (max-width: 599px) { .stack { width: min(100%, 304px); } .stack__card small { font-size: 11.5px; } .stack__card b { font-size: 19px; } }

/* poster stickers stay readable on phones */
@media (max-width: 599px) { .ring-art .sticker { min-width: 30px; min-height: 30px; justify-content: center; font-size: 15px; } }

/* fee coins: the label stays on one line on phones */
@media (max-width: 599px) { .coin small { font-size: 9px; letter-spacing: .02em; white-space: nowrap; } html[lang="hi"] .coin small { font-size: 10.5px; } }

/* minimal hero on phones: the headline uses the full width, only the lead makes room for the bust */
@media (max-width: 599px) { .hero--min .wrap { padding-right: var(--gutter); } .hero--min .lead { padding-right: 92px; } .hero--min .hero__bust { right: 4px; width: 84px; } }

/* scrub strip: the snap keeps the gutter; on desktop every rung fits, nothing scrolls or fades */
.scrub { scroll-padding-inline: var(--gutter); }
@media (min-width: 900px) {
  .scrub { margin-inline: 0; padding-inline: 0; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; }
  .scrub > li { flex: 1 1 0; min-width: 0; }
  .scrub p { font-size: 15px; color: var(--ink-2); }
}

/* checklist: two columns on desktop, so the section fills its width */
@media (min-width: 900px) { .checklist { grid-template-columns: 1fr 1fr; max-width: none; align-items: stretch; } }

/* Devanagari carries no letter-spacing, anywhere. Latin numerals in the display face keep theirs. */
html[lang="hi"] :is(.kick, .badge, .when, .sticker, .sticker small, .stack__card small, .stack__card b, .facts span, .facts b, .coin small, .counter small, .counter--big small, .card__big small, .card__when, .scoreboard span, .split-bar small, .rows b, .rules b, .ticket small, .ticket__stub small, .copy-block b, .copy-block strong, .callout b, .quest__here, .quest .flip__back b, .day b, .quote, .table--stack td::before, legend, th, small) { letter-spacing: 0 !important; text-transform: none; }
html[lang="hi"] .copy-block b, html[lang="hi"] .copy-block strong { font-size: 14px; }
@media (max-width: 599px) { .hero--min .btn-row, .hero--min .wrap > p:not(.kick) { padding-right: 92px; } }

/* ---------- shared fixes, round 2 (4 Oct): rules the page fixers asked for, so their inline styles could go ---------- */
/* utilities */
.nowrap { white-space: nowrap; }
.nowrap--fit { font-size: .85em; }

/* stage hero with a framed photo instead of a cutout (the floor page) */
.hero--stage .wrap > .photo { order: 1; aspect-ratio: 4/3; align-self: center; margin: 0 0 clamp(44px, 7vw, 96px); }

/* minimal hero: the bust can face the text */
.hero__bust--flip .art__img { transform: scaleX(-1); }

/* poster hero on a laptop: ring, figure and stickers fit an 800 px tall screen */
@media (min-width: 900px) {
  .hero--poster { padding-top: calc(var(--header-h) + clamp(28px, 3.4vw, 44px)); padding-bottom: clamp(24px, 3vw, 40px); }
  .hero--poster h1 { margin-bottom: 12px; }
  .hero--poster .btn-row { margin-top: 16px; }
  .hero--poster .ring-art { margin-top: clamp(40px, 7vh, 64px); width: min(100%, 360px, max(230px, 33vh)); }
}

/* a crimson card that stands on a cream section too (inside an ink section or a hero it stays glass) */
.card.card--ink:not(.holo) { background: var(--grad-crimson); }
.section--ink .card.card--ink:not(.holo), .hero .card.card--ink:not(.holo) { background: var(--white); }

/* stickers on phones: three fit one row */
@media (max-width: 599px) {
  .stickers { gap: 12px 10px; }
  .sticker { padding: 8px 11px; }
  .sticker--big { padding: 9px 12px 8px; font-size: 19px; border-radius: 14px; }
}

/* floormap: a second caption line under the room name; on touch screens and phones each room is a card (picture, name, what happens there) */
.floormap__room small { position: relative; z-index: 1; display: block; padding-left: 14px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,.9); }
@media (hover: none), (max-width: 599px) {
  .floormap { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; transform: none; }
  .floormap > li { grid-column: span 1; grid-row: auto; }
  .floormap > li:first-child { grid-column: 1 / -1; }
  .floormap__room { justify-content: flex-start; gap: 4px; height: 100%; padding: 8px 10px 12px; background: var(--white); color: var(--text); cursor: default; }
  .floormap__room::before { position: static; display: block; width: 100%; aspect-ratio: 16/9; margin-bottom: 6px; border-radius: 10px; background: var(--img) center / cover no-repeat; }
  .floormap > li:first-child .floormap__room::before { aspect-ratio: 21/9; }
  .floormap__room b { color: var(--crimson); font-size: 15px; align-items: baseline; }
  .floormap__room b::before { background: var(--gold); }
  .floormap__room small { color: var(--gold-lo); font-weight: 700; }
  .floormap__room:hover, .floormap__room:focus-visible { transform: none; box-shadow: var(--shadow); }
  .floormap__room .tip, .floormap > li:first-child .floormap__room .tip, .floormap > li:nth-child(2) .floormap__room .tip { position: static; display: block; width: auto; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font-size: 13.5px; font-weight: 400; opacity: 1; visibility: visible; translate: none; transition: none; }
  .floormap__room .tip::after { display: none; }
}
@media (max-width: 599px) { .floormap { grid-template-columns: 1fr; } }

/* track on desktop: the notes read at body size */
@media (min-width: 900px) {
  .track__note b { font-size: 20px; }
  .track__note p { font-size: 16px; line-height: 1.5; }
  .track__note .when { font-size: 13px; }
  html[lang="hi"] .track__note p { font-size: 17px; }
}
@media (max-width: 899px) { .track__leg { padding-bottom: 56px; min-height: 0; } }

/* an accordion in a full-width wrap keeps a reading width */
.wrap:not(.narrow) > .faq { max-width: 920px; }
.wrap.center > .faq { margin-inline: auto; }

/* read more: a plain disclosure inside prose (not the FAQ card) */
.readmore { margin: 22px 0 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.readmore summary { position: relative; cursor: pointer; list-style: none; padding: 14px 44px 14px 0; font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--crimson); }
.readmore summary::-webkit-details-marker { display: none; }
.readmore summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--crimson); font-family: var(--font-en); font-size: 20px; font-weight: 700; }
.readmore details[open] summary::after { content: "\2212"; background: var(--gold); color: var(--crimson-deep); }
.readmore .a { padding: 2px 0 20px; color: var(--ink-2); }
.readmore .a > :first-child { margin-top: 0; }
.readmore .a > :last-child { margin-bottom: 0; }
.readmore details[open] .a { animation: slideUp .3s var(--ease) backwards; }

/* a checklist inside a split column is one column of full rows */
.split .checklist { grid-template-columns: 1fr; }

/* ladder map. The dotted curve is wiped in from the left (no dash override, so it stays dotted). The discs alternate below and above the line
   by :nth-of-type, so the SVG being the first child never flips them. --3 is the three-stop version (associates). */
.ladder--map .rung:nth-of-type(odd) { top: 28px; }
.ladder--map .rung:nth-of-type(even) { top: -24px; }
.ladder--map .ladder__path { top: 36px; }
.ladder--map--3 .ladder__path { top: 16px; width: min(370px, 100%); }
.ladder__path.rv--draw.rv { clip-path: inset(-12px 100% -12px -12px); }
.ladder__path.rv--draw.in { animation: rvWipe .9s cubic-bezier(.45,.05,.3,1) 100ms both; }
@keyframes rvWipe { from { opacity: 1; clip-path: inset(-12px 100% -12px -12px); } to { opacity: 1; clip-path: inset(-12px); } }
@media (max-width: 899px) {
  .ladder--map:not(.ladder--map--3) .rung:nth-of-type(n) { top: 0; }
  .ladder--map:not(.ladder--map--3) .ladder__path { display: none; }
}
@media (max-width: 599px) {
  .ladder--map { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 14px; width: max-content; max-width: 100%; margin-inline: auto; padding: 6px 0 6px 12px; }
  .ladder--map::before { content: ""; position: absolute; z-index: -1; left: 42px; top: 34px; bottom: 34px; border-left: 3px dotted var(--gold); }
  .ladder--map .ladder__path { display: none; }
  .ladder--map .rung:nth-of-type(n) { top: 0; flex: 0 0 auto; flex-direction: row; align-items: center; text-align: left; gap: 18px; }
  .ladder--map .rung b { font-size: 15px; }
  .ladder--map .rung:nth-of-type(odd) .no { translate: 9px 0; }
  .ladder--map .rung:nth-of-type(even) .no { translate: -9px 0; }
}

/* =====================================================================================================================
   Type pass, 5 October 2026: scale, not design. Bigger and darker titles, a wider grid, readable small copy, rounded
   joins between blocks, and hover and press that answer in 0.1 s. Scoped to .hero and .section so the app shells
   (src/app), which also load this file, keep their own sizes.
   ===================================================================================================================== */

/* ---------- titles: weight 800, tight leading; the hero title is one step above the section title ---------- */
.hero h1 { font-size: clamp(36px, 5.4vw, 72px); font-weight: 800; line-height: 1.03; letter-spacing: -.035em; text-wrap: balance; }
.section h2 { font-size: clamp(32px, 4.6vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
.section h3 { font-size: clamp(20px, 1.7vw, 23px); }
/* titles that sit inside a card, a reading column or beside a small figure stay at card scale */
.section :is(.card, .holo, .prose, .faq__head, .copy-block, .rows, .apply-done, .scanner, .ticket, .flip__front, .flip__back, fieldset) h2 { font-size: clamp(25px, 2.5vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; max-width: 26ch; }
.section .cta-box h2 { font-size: clamp(30px, 4vw, 54px); }
/* Hindi: Hind draws smaller than Sora at the same size, so it runs a step up; Devanagari needs the taller line and no tracking (Hind stops at 700) */
html[lang="hi"] .hero h1 { font-size: clamp(38px, 5.8vw, 78px); font-weight: 700; line-height: 1.2; letter-spacing: 0; }
html[lang="hi"] .section h2 { font-size: clamp(34px, 4.9vw, 68px); font-weight: 700; line-height: 1.24; letter-spacing: 0; max-width: 24ch; }
html[lang="hi"] .section h3 { font-size: clamp(21px, 1.8vw, 24px); line-height: 1.35; }
html[lang="hi"] .section :is(.card, .holo, .prose, .faq__head, .copy-block, .rows, .apply-done, .scanner, .ticket, .flip__front, .flip__back, fieldset) h2 { font-size: clamp(26px, 2.7vw, 36px); line-height: 1.3; }
html[lang="hi"] .section .cta-box h2 { font-size: clamp(31px, 4.2vw, 56px); }
/* hero variants that share the row with art (split, stage) run a step under the centred poster title, so a long title holds to three lines */
.hero .split h1, .hero--stage h1 { font-size: clamp(36px, 4.7vw, 62px); max-width: 18ch; }
html[lang="hi"] .hero .split h1, html[lang="hi"] .hero--stage h1 { font-size: clamp(38px, 5vw, 66px); max-width: 20ch; }
@media (max-width: 380px) {
  .hero h1, .hero .split h1, .hero--stage h1 { font-size: 32px; }
  .section h2 { font-size: 30px; }
  html[lang="hi"] .hero h1, html[lang="hi"] .hero .split h1, html[lang="hi"] .hero--stage h1 { font-size: 35px; }
  html[lang="hi"] .section h2 { font-size: 32px; }
}

/* ---------- copy: nothing a visitor reads is under 16 px; running text holds a measure of about 65 characters ---------- */
.wrap > p:not(.kick):not(.lead), .split > div > p:not(.kick):not(.lead) { max-width: 62ch; }
.cta-box p { margin-inline: auto; }
.step p, .tiles p, .timeline p, .quest p, .track__note p, .flip__back p, .ticket__main p, .scrub p { font-size: 16px; line-height: 1.5; }
.facts > * { font-size: 15px; }
.facts span { font-size: 12.5px; }
.rows small { font-size: 15px; }
.rules > li { font-size: 17px; }
table, .copy-block, .toc, .day, .dial__slots { font-size: 16px; }
.step h3, .tiles h3, .quest h3 { font-size: 21px; }
.flip-deck .flip__front h3 { font-size: 19px; }
.flip-deck .flip__back p, .quest .flip__back ul { font-size: 15.5px; }
.card__when, .step .when, .tiles .when, .quest__date { font-size: 14px; }
html[lang="hi"] :is(.step, .tiles, .timeline, .quest, .track__note, .flip__back, .scrub) p, html[lang="hi"] .rows small, html[lang="hi"] .facts > * { font-size: 17px; }
html[lang="hi"] .rules > li { font-size: 18px; }
@media (max-width: 599px) { .step h3, .tiles h3, .quest h3 { font-size: 19px; } }
/* the email address never breaks (see the mailto rule above), so inside the larger lead it steps down to fit a phone */
@media (max-width: 599px) { .lead a[href^="mailto:"] { font-size: min(1em, 4.3vw); } }
/* stage hero on phones: the longer lead stays on the dark part of the still */
@media (max-width: 899px) {
  .hero--stage .hero__still { height: min(56%, 360px); }
  .hero--stage .lead { text-shadow: 0 1px 14px rgba(94,15,27,.75); }
}

/* ---------- rounded joins: the hero ends in a rounded edge over the first block, each block rises over the one before it,
   and the last block rounds off into the footer (the shadow paints the footer's crimson in the two corners) ---------- */
@media (max-width: 839px) { :root { --join: 24px; } }
main > .hero { border-radius: 0 0 var(--join) var(--join); }
main > .section { background-color: var(--bg); }
main > .hero + .section { margin-top: calc(-1 * var(--join)); padding-top: calc(var(--section) + var(--join)); }
main > .hero--min + .section { padding-top: calc(clamp(36px, 5vw, 64px) + var(--join)); }
main > .section:has(+ .section) { padding-bottom: calc(var(--section) + var(--join)); }
main > .section + .section { margin-top: calc(-1 * var(--join)); border-radius: var(--join) var(--join) 0 0; }
main > .section:last-child { border-radius: var(--join); box-shadow: 0 var(--join) 0 0 var(--crimson); }
main > .section--ink:last-child { border-radius: var(--join) var(--join) 0 0; box-shadow: none; }
@media print { main > .section:last-child { box-shadow: none; } }

/* ---------- hover and press: 0.1 s in, a small give under the finger ---------- */
.card, .facts > *, .step, .tiles > li, .tiles > div { transition: transform .1s var(--ease), box-shadow .1s var(--ease), border-color .1s; }
.card:not(.tilt):not(.holo):active, .facts > *:active, .step:active, .tiles > li:not(.tilt):active, .tiles > div:active { transform: scale(.985); box-shadow: var(--shadow); }
.tilt, .holo { transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.chips a, .chips a::before { transition: background .1s, color .1s, border-color .1s, transform .1s; }
.chips a:active { transform: scale(.96); }
.faq details { transition: box-shadow .1s, border-color .1s; }
.faq details:hover { border-color: var(--line-2); }
.faq summary::after { transition: background .1s; }
.faq summary:hover::after { background: var(--gold); }
.floormap__room { transition: transform .12s var(--ease), box-shadow .12s; }
.checklist > li { transition: border-color .1s, box-shadow .1s; }
main .btn { transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) { .card:active, .facts > *:active, .step:active, .tiles > li:active, .tiles > div:active, .chips a:active { transform: none; } }