/* Yotra · the website.
   Two worlds: night (indigo, with rice-white kolam lines and gold) and paper
   (an old manuscript's ivory, with ink). Doorways shaped like temple arches
   take you from one to the other. The product itself appears as it really
   looks: light, plain, and readable. */

:root {
  --night: #0c0e22;
  --night-2: #12153a;
  --indigo: #1c2160;
  --paper: #f2e8d3;
  --paper-2: #e7d8b8;
  --paper-ink: #2b2118;
  --ink-soft: #6b5843;
  --rice: #f5efe2;
  --rice-dim: rgba(245, 239, 226, 0.66);
  --rice-faint: rgba(245, 239, 226, 0.4);
  --saffron: #e8892f;
  --turmeric: #e3b04b;
  --gold: #c9a24f;
  --gold-line: rgba(227, 176, 75, 0.28);
  --peacock: #12807d;
  --sindoor: #b8442f;
  --glass: linear-gradient(180deg, rgba(255, 246, 228, 0.09), rgba(255, 246, 228, 0.035));
  --serif: "Tiro Devanagari Sanskrit", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--night);
  color: var(--rice);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: "hidden" makes the body a scroll box of its own, and position: sticky (the
     doorways) would stick to that box, which never scrolls, instead of to the page. */
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; }
::selection { background: var(--saffron); color: var(--night); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; }
[lang="sa"] { font-family: var(--serif); }

/* Paper grain over everything, so nothing reads as flat digital colour */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; background-image: var(--grain, none); background-size: var(--grain-size, 160px); transform: translateZ(0); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1.05; }
h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.18; }
p { margin: 0; }
.kicker { font: 500 12px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--turmeric); margin-bottom: 18px; }
.paper .kicker { color: var(--sindoor); }
.eyebrow { font: 500 13px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--turmeric); }

/* ---------- buttons ---------- */
.btn:not(.app *) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #f0a24a, var(--saffron));
  color: #241404; font: 600 15px/1 var(--sans); text-decoration: none;
  box-shadow: 0 10px 30px rgba(232, 137, 47, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.25s, box-shadow 0.25s;
}
.btn:not(.app *):hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(232, 137, 47, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn:not(.app *):focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--turmeric); outline-offset: 3px; }
.btn-small { height: 38px; padding: 0 18px; font-size: 14px; }
.link-arrow { font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--gold-line); padding-bottom: 3px; transition: border-color 0.2s; }
.link-arrow::after { content: " ↓"; color: var(--turmeric); }
.link-arrow:hover { border-color: var(--turmeric); }

.glass {
  background: var(--glass);
  border: 1px solid var(--gold-line);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 80px rgba(0, 0, 0, 0.35);
}

/* ---------- nav ---------- */
header.nav {
  position: fixed; inset: 14px var(--gutter) auto; z-index: 50;
  display: flex; align-items: center; gap: 28px; height: 58px; padding: 0 10px 0 18px;
  border-radius: 999px; border: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
header.nav.solid { background: rgba(12, 14, 34, 0.82); border-color: var(--gold-line); backdrop-filter: blur(10px) saturate(125%); -webkit-backdrop-filter: blur(10px) saturate(125%); }
header.nav.on-paper { color: var(--paper-ink); }
header.nav.on-paper.solid { background: rgba(242, 232, 211, 0.86); border-color: rgba(43, 33, 24, 0.14); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* The knot, in one colour (mark.svg as a mask), so it takes the colour of the bar it sits on. */
.brand-mark { width: 28px; height: 28px; flex: none; color: var(--turmeric); background: currentColor; -webkit-mask: url(../mark.svg) center / contain no-repeat; mask: url(../mark.svg) center / contain no-repeat; }
.brand-word { font: 400 24px/1 var(--serif); letter-spacing: 0.01em; }
.brand-dev { font-size: 16px; color: var(--turmeric); transform: translateY(1px); }
header.nav.on-paper .brand-dev, header.nav.on-paper .brand-mark { color: var(--sindoor); }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.nav-links a { text-decoration: none; opacity: 0.78; transition: opacity 0.2s; }
.nav-links a:hover { opacity: 1; }
/* Log in: a button of its own beside Early access, outlined so Early access stays the one to press. */
.nav-signin { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border: 1px solid rgba(245, 239, 226, 0.38); border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color 0.2s, background 0.2s; }
.nav-signin:hover { border-color: rgba(245, 239, 226, 0.75); background: rgba(245, 239, 226, 0.06); }
header.nav.on-paper .nav-signin { border-color: rgba(43, 33, 24, 0.3); }
header.nav.on-paper .nav-signin:hover { border-color: rgba(43, 33, 24, 0.6); background: rgba(43, 33, 24, 0.05); }
@media (max-width: 880px) { .nav-links { display: none; } header.nav .nav-signin { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 120px var(--gutter) 92px; overflow: hidden; isolation: isolate; }
.hero-glow { position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60vmax 50vmax at 78% 40%, rgba(28, 33, 96, 0.95), transparent 70%),
    radial-gradient(40vmax 30vmax at 90% 90%, rgba(18, 128, 125, 0.22), transparent 70%),
    radial-gradient(30vmax 24vmax at 64% 22%, rgba(232, 137, 47, 0.16), transparent 70%),
    var(--night); }
/* The knot, as thread (js/knot.js ties it from two hanging and two coiled strings, keeps the rope running through it,
   and turns it as you scroll). The ornaments further down are the same knot, faint, in one colour. */
.hero-knot { position: absolute; z-index: -1; width: min(660px, 72vmin); height: auto; aspect-ratio: 1; right: max(2vw, 16px); top: 50%; translate: 0 -50%; overflow: visible; will-change: transform; } /* its own layer: turning it doesn't repaint it */
.knot-ornament { position: absolute; height: auto; aspect-ratio: 1; pointer-events: none; }
.hero-copy { max-width: 720px; position: relative; }
.hero-title { display: flex; flex-direction: column; margin: 22px 0 26px; line-height: 0.9; }
.hero-dev { font-size: clamp(54px, 8vw, 104px); color: var(--turmeric); line-height: 1.3; }
.hero-word { font-size: clamp(96px, 17vw, 230px); letter-spacing: -0.035em; line-height: 0.82; margin-left: -0.04em; }
.hero-word { overflow: hidden; padding-bottom: 0.08em; }
.hero-word .ch { display: inline-block; }
.hero-lede { max-width: 560px; font-size: clamp(18px, 1.5vw, 21px); color: var(--rice-dim); }
.hero-what { max-width: 560px; margin-top: 10px; font-size: 14.5px; letter-spacing: 0.01em; color: var(--rice-dim); opacity: 0.8; }
.hero-cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 34px; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; width: 22px; height: 36px; border: 1px solid var(--gold-line); border-radius: 12px; translate: -50% 0; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--turmeric); animation: cue 1.8s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 720px) { .hero-knot { width: 92vmin; right: -30vmin; top: 30%; opacity: 0.5; } .hero { padding-bottom: 80px; } }

/* ---------- doorways (temple arches between worlds) ----------
   A doorway lies over the last screen of the section before it (pulled up by one screen, see-through
   there), so the arch rises over that section's closing lines instead of after them: no stretch of
   empty colour while it starts. Below that first screen it's the colour you're leaving. */
.portal { --from: var(--night); position: relative; z-index: 3; height: 150vh; margin-top: -100vh; pointer-events: none; background: linear-gradient(to bottom, transparent 100vh, var(--from) 100vh); }
.portal[data-from="paper"] { --from: var(--paper); }
.portal-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --a: 0; }
.portal-fill {
  position: absolute; inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cpath d='M0 130V64A13.5 13.5 0 0 0 3.59 42.53A13.5 13.5 0 0 0 13.98 23.39A13.5 13.5 0 0 0 30.03 8.68A13.5 13.5 0 0 0 50 0A13.5 13.5 0 0 0 69.97 8.68A13.5 13.5 0 0 0 86.02 23.39A13.5 13.5 0 0 0 96.41 42.53A13.5 13.5 0 0 0 100 64V130Z'/%3E%3C/svg%3E") 50% 100% / calc(var(--a) * 1vmax) auto no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cpath d='M0 130V64A13.5 13.5 0 0 0 3.59 42.53A13.5 13.5 0 0 0 13.98 23.39A13.5 13.5 0 0 0 30.03 8.68A13.5 13.5 0 0 0 50 0A13.5 13.5 0 0 0 69.97 8.68A13.5 13.5 0 0 0 86.02 23.39A13.5 13.5 0 0 0 96.41 42.53A13.5 13.5 0 0 0 100 64V130Z'/%3E%3C/svg%3E") 50% 100% / calc(var(--a) * 1vmax) auto no-repeat;
}
.portal[data-to="paper"] .portal-fill { background: var(--paper); }
.portal[data-to="night"] .portal-fill { background: radial-gradient(80vmax 60vmax at 50% 100%, var(--indigo), var(--night) 70%); }
/* Grows by scaling, which the browser can do without laying the page out again on every frame. */
.portal-frame { position: absolute; left: 50%; bottom: 0; width: 100vmax; aspect-ratio: 100 / 130; height: auto; translate: -50% 0; scale: calc(var(--a, 0) / 100); transform-origin: 50% 100%; fill: none; overflow: visible; will-change: scale; }
.portal-frame path { vector-effect: non-scaling-stroke; stroke-width: 1.4; }
.portal[data-from="night"] .portal-frame path { stroke: var(--turmeric); }
.portal[data-from="paper"] .portal-frame path { stroke: var(--sindoor); }
.portal-frame .arch-inner { stroke-width: 0.8; opacity: 0.6; }
.portal-frame .finial { stroke-width: 1.2; }
/* The doorway's word, with its meaning in English on the same line. */
.portal-word { position: absolute; left: 50%; bottom: 18vh; translate: -50% 0; display: flex; align-items: baseline; gap: 0.22em; font-size: clamp(56px, 12vw, 190px); color: var(--paper-ink); opacity: 0; line-height: 1.2; white-space: nowrap; }
.portal-word em { font: italic 400 0.3em/1 var(--serif); letter-spacing: 0.01em; color: var(--ink-soft); }
.portal[data-to="night"] .portal-word { color: var(--turmeric); text-shadow: 0 0 60px rgba(227, 176, 75, 0.25); }
.portal[data-to="night"] .portal-word em { color: var(--rice-dim); text-shadow: none; }

/* ---------- paper sections ---------- */
.paper { background: var(--paper); color: var(--paper-ink); position: relative; }
.paper::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80vmax 60vmax at 20% 0%, rgba(255, 255, 255, 0.45), transparent 60%), radial-gradient(60vmax 50vmax at 100% 100%, rgba(184, 68, 47, 0.07), transparent 70%); }

/* ---------- the word ---------- */
.meaning { margin-top: -1px; }
.meaning-stage { position: relative; min-height: 100svh; max-width: var(--max); margin: 0 auto; padding: 110px var(--gutter) 60px; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.meaning-h { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.08; max-width: 540px; margin: 0 0 26px; }
.lexicon { border-top: 1px solid rgba(43, 33, 24, 0.3); border-bottom: 1px solid rgba(43, 33, 24, 0.3); padding: 22px 0 20px; max-width: 470px; }
.lexicon header { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.lex-dev { font-size: 56px; line-height: 1.1; color: var(--sindoor); }
.lex-roman { font: 400 22px/1 var(--serif); color: var(--ink-soft); }
.lexicon ol { margin: 14px 0 0; padding-left: 22px; font: 400 20px/1.45 var(--serif); }
.lexicon li::marker { color: var(--sindoor); }
.lex-note { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.meaning-lines { position: relative; margin-top: 44px; min-height: 160px; max-width: 520px; }
.m-line { position: absolute; inset: 0 auto auto 0; font: 400 clamp(26px, 2.8vw, 38px)/1.2 var(--serif); }
.meaning-art { margin: 0; }
.yoke { width: 100%; height: auto; overflow: visible; }
.yoke .ink { fill: none; stroke: var(--paper-ink); stroke-width: 2.2; stroke-linecap: round; }
.yoke .ink.thick { stroke-width: 5; }
.yoke .cord { fill: none; stroke: var(--sindoor); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 0; }
.yoke .ink-dot { fill: var(--paper-ink); }
.yoke .label { font: italic 400 17px var(--serif); fill: var(--ink-soft); }
.yoke .plate { fill: rgba(255, 250, 238, 0.5); stroke: rgba(43, 33, 24, 0.35); stroke-width: 1; }
.yoke .plate.thin { fill: none; stroke: rgba(43, 33, 24, 0.18); }
.yoke .plate-corner { fill: none; stroke: var(--sindoor); stroke-width: 1.4; }
.yoke .furrow { fill: none; stroke: rgba(43, 33, 24, 0.25); stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; }
.yoke .plate-cap { font: italic 400 14px var(--serif); fill: var(--ink-soft); letter-spacing: 0.02em; }
.yoke .leader { fill: none; stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 4; }
@media (max-width: 860px) { .meaning-stage { grid-template-columns: 1fr; padding-top: 96px; align-content: center; } .meaning-art { order: -1; max-width: 460px; } .meaning-lines { min-height: 140px; margin-top: 28px; } }

/* ---------- why ---------- */
.why { position: relative; max-width: var(--max); margin: 0 auto; padding: max(18vh, 150px) var(--gutter) 22vh; }
.toran { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: auto; max-height: 130px; overflow: visible; }
.toran .string { fill: none; stroke: var(--gold-line); stroke-width: 1.4; }
.toran .leaf { fill: rgba(18, 128, 125, 0.16); stroke: #3fa69f; stroke-width: 1.1; }
.toran .vein { fill: none; stroke: #3fa69f; stroke-width: 0.7; opacity: 0.7; }
.toran .marigold { fill: var(--saffron); }
.toran .marigold-in { fill: var(--turmeric); }
.why-big { font-size: clamp(40px, 6.6vw, 96px); line-height: 1.02; max-width: 1100px; }
.reveal-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.reveal-line > span { display: inline-block; }
.promises { list-style: none; padding: 0; margin: 64px 0 0; display: flex; flex-wrap: wrap; gap: 12px 14px; max-width: 980px; }
.promises li { padding: 10px 18px 10px 30px; border-radius: 999px; border: 1px solid var(--gold-line); background: rgba(255, 246, 228, 0.04); position: relative; font-size: 16px; color: var(--rice-dim); }
.promises li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--turmeric); }
.why-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; margin-top: 80px; align-items: end; }
.why-body p { font-size: clamp(18px, 1.5vw, 21px); color: var(--rice-dim); max-width: 600px; }
.why-body .why-close { font: 400 clamp(26px, 2.6vw, 36px)/1.25 var(--serif); color: var(--rice); }
@media (max-width: 860px) { .why-body { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- the problem ---------- */
.problems { position: relative; max-width: var(--max); margin: 0 auto; padding: 4vh var(--gutter) 16vh; }
.cord-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cord-line { fill: none; stroke: var(--rice); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cord-glow { fill: none; stroke: var(--turmeric); stroke-width: 12; stroke-linecap: round; opacity: 0.08; } /* a soft wide stroke: no blur to redraw as it's drawn on */
.pulli circle { fill: var(--rice); opacity: 0.8; }
.problems-head { position: relative; max-width: 640px; margin-bottom: 10vh; }
.problems-head p:last-child { margin-top: 18px; color: var(--rice-dim); font-size: 19px; }
.scene { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 6vw, 96px); align-items: center; min-height: 92vh; padding: 6vh 0; }
.scene[data-side="left"] .scene-text { order: 2; }
.scene-text { max-width: 470px; position: relative; z-index: 2; }
.scene-no { display: block; font: 400 88px/1 var(--serif); color: transparent; -webkit-text-stroke: 1px var(--gold-line); margin-bottom: 4px; }
.scene-tag { font: 500 13px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--turmeric); margin-bottom: 14px; }
.scene-text h3 { margin-bottom: 18px; }
.scene-text p:last-child { color: var(--rice-dim); }
.scene-art { position: relative; perspective: 1200px; display: flex; justify-content: center; }
.knot { position: absolute; width: 1px; height: 1px; top: -34px; left: 50%; }
/* The cord's knot sits in the gap between the words and the picture, so the line weaves down the middle. */
.scene[data-side="right"] .knot { left: calc(clamp(28px, 6vw, 96px) / -2); top: 50%; }
.scene[data-side="left"] .knot { left: auto; right: calc(clamp(28px, 6vw, 96px) / -2); top: 50%; }
.artifact { position: relative; width: min(520px, 100%); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06); font-size: 13px; line-height: 1.35; transform-origin: 50% 80%; }
@media (max-width: 860px) {
  .scene { grid-template-columns: 1fr; min-height: auto; padding: 8vh 0; }
  .scene[data-side="left"] .scene-text { order: 0; }
  .scene .knot { display: none; }
}

/* 01 inbox */
.inbox { background: #fbfbfd; color: #1d2433; }
.ib-bar { display: flex; gap: 10px; align-items: baseline; padding: 12px 16px; background: #eef1f7; border-bottom: 1px solid #dfe3ec; }
.ib-bar span { color: #6b7385; font-size: 12px; }
.ib-count { margin-left: auto; color: #c2410c !important; font-weight: 600; }
.ib-row { display: grid; grid-template-columns: 10px 1fr auto 44px; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: 1px solid #eceef4; }
.ib-row.read { grid-template-columns: 1fr auto 44px; padding-left: 36px; color: #5d6577; }
.ib-row div { display: flex; flex-direction: column; min-width: 0; }
.ib-row div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4b5366; }
.ib-dot { width: 8px; height: 8px; border-radius: 50%; background: #2563eb; }
.seen { font-size: 11px; color: #8a91a2; background: #f1f3f8; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.ib-row time { font-size: 12px; color: #8a91a2; text-align: right; }
.ib-stamp { position: absolute; right: 18px; bottom: 16px; rotate: -8deg; border: 2px solid #b8442f; color: #b8442f; font: 700 13px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 12px; border-radius: 6px; background: rgba(251, 251, 253, 0.85); }

/* 02 sheet */
.sheet { background: #fff; color: #1f2937; }
.sh-title { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #1e6e42; color: #fff; font-size: 12.5px; }
.sh-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: #fff; color: #1e6e42; font-weight: 700; font-size: 11px; }
.sh-grid { display: grid; grid-template-columns: 28px 1.25fr 1fr 1fr 1.1fr; font-size: 12px; }
.sh-grid span { padding: 7px 8px; border-right: 1px solid #e3e6ea; border-bottom: 1px solid #e3e6ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 31px; }
.sh-grid .h { background: #f3f4f6; color: #6b7280; text-align: center; font-size: 11px; }
.sh-grid .th { font-weight: 600; background: #f9fafb; }
.sh-grid .ok { background: #ecfdf3; color: #166534; }
.sh-grid .bad { background: #fde8e4; color: #9f1239; }
.sh-grid .warn { background: #fef6dc; color: #92400e; }
.sh-comment { margin: 10px 14px 14px auto; width: fit-content; max-width: 70%; background: #fff7d6; border: 1px solid #f1d98a; border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #6b4f0f; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }

/* 03 chat */
.chat { background: #e9e2d7 radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35) 0 2px, transparent 3px) 0 0 / 22px 22px; color: #111b21; padding-bottom: 14px; }
.wa-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f0f2f5; border-bottom: 1px solid #d9dde1; }
.wa-bar div { display: flex; flex-direction: column; }
.wa-bar span:not(.wa-av) { font-size: 11.5px; color: #667781; }
.wa-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0f766e; color: #fff; font-size: 12px; font-weight: 600; }
.wa-day { width: fit-content; margin: 12px auto 6px; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.85); font-size: 11px; color: #54656f; }
.wa { position: relative; width: fit-content; max-width: 78%; margin: 4px 14px; padding: 7px 10px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }
.wa time { position: absolute; right: 8px; bottom: 3px; font-size: 10px; color: #667781; }
.wa.out { margin-left: auto; background: #d9fdd3; }
.wa.in { background: #fff; padding-right: 48px; }
.wa-wait { width: fit-content; margin: 14px auto 0; padding: 7px 14px; border-radius: 999px; background: #b8442f; color: #fff; font-size: 12.5px; }

/* 04 letter */
.letter { background: #fbf7ee; color: #2b2118; padding: 26px 28px 22px; font-family: var(--serif); font-size: 15px; width: min(440px, 92%); transform: rotate(-2deg); }
.lt-head { font-size: 22px; }
.lt-to { color: #6b5843; font-size: 14px; margin-top: 2px; }
.lt-sub { margin-top: 18px; font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #b8442f; }
.letter ol { margin: 10px 0 0; padding-left: 20px; line-height: 1.7; }
.lt-sign { margin-top: 18px; font-style: italic; color: #6b5843; font-size: 13.5px; }
.sticky { position: absolute; width: 170px; padding: 12px 12px 30px; background: #fff3a6; color: #3d3510; font: 500 13px/1.3 var(--sans); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); }
.sticky .stamp { position: absolute; left: 10px; bottom: 8px; font: 700 10px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #b8442f; border: 1.5px solid #b8442f; padding: 3px 5px; border-radius: 3px; rotate: -4deg; }
.sticky.s1 { right: -2%; top: -8%; rotate: 6deg; }
.sticky.s2 { left: -4%; bottom: -10%; rotate: -7deg; background: #ffd9c2; }
.sticky.s3 { right: 2%; bottom: -16%; rotate: 3deg; background: #d8f1e4; }
@media (max-width: 560px) { .sticky { width: 140px; font-size: 12px; } .sticky.s2 { left: 0; } }

/* 05 calls */
.calls { background: #15182f; color: var(--rice); padding: 18px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--gold-line); }
.call { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.call div { display: flex; flex-direction: column; }
.call span:not(.c-av) { font-size: 12px; color: var(--rice-faint); }
.c-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 600; flex: none; }
.c-av.r { background: #be185d; } .c-av.a { background: #4f46e5; } .c-av.k { background: #0e7490; }
.call-answer { margin-top: 6px; align-self: flex-end; max-width: 80%; padding: 12px 16px; border-radius: 14px 14px 4px 14px; background: rgba(232, 137, 47, 0.16); border: 1px dashed rgba(232, 137, 47, 0.6); font: italic 400 17px/1.3 var(--serif); }

/* ---------- the turn ---------- */
.turn { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 0 var(--gutter); }
.kolam { position: absolute; width: min(820px, 112vmin); height: auto; left: 50%; top: 50%; translate: -50% -50%; overflow: visible; }
.kolam-line { fill: none; stroke: var(--rice); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.kolam-dots circle { fill: var(--turmeric); }
.turn-copy { position: relative; max-width: 640px; padding: 34px 30px; border-radius: 26px; }
.turn-copy p { margin-top: 16px; font-size: 19px; color: var(--rice-dim); }

/* ---------- what it does: the stage ---------- */
.features { position: relative; }
.features { padding-top: 14vh; }
.features-head { max-width: var(--max); margin: 0 auto 34px; padding: 0 var(--gutter); }
.features-head h2 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.06; max-width: 15ch; }
.features-head > p:not(.kicker) { margin-top: 14px; max-width: 58ch; color: var(--rice-dim); font-size: 17px; }
/* Cards that turn by themselves: the caption on the left, the app on the right. */
.stage { position: relative; height: clamp(600px, 82vh, 880px); display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 24px; padding: 0 var(--gutter) 10vh; outline: none; }
.stage-caption { position: relative; border-radius: 22px; padding: 28px 28px 22px; align-self: center; min-height: 360px; display: flex; flex-direction: column; }
.caps { position: relative; display: grid; }
.cap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s, visibility 0.3s, transform 0.3s; }
.cap.on { opacity: 1; visibility: visible; transform: none; }
.cap-name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cap-dev { font-size: 34px; color: var(--turmeric); line-height: 1.2; }
.cap-roman { font: italic 400 20px/1 var(--serif); color: var(--rice); }
/* The English name, as large and as gold as the Sanskrit, so it reads as easily; the page's number beside it, quiet. */
.cap-en { width: 100%; display: flex; align-items: baseline; gap: 10px; font: 400 34px/1.15 var(--serif); color: var(--turmeric); }
.cap-no { font: 500 12px/1 var(--sans); letter-spacing: 0.12em; color: var(--rice-faint); }
.cap h3 { font-size: 26px; margin: 16px 0 12px; }
.cap p { color: var(--rice-dim); font-size: 16px; }
.caps { flex: 1; }
.cap-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--gold-line); }
.cap-arrow { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-line); background: transparent; color: var(--rice); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.cap-arrow:hover { background: rgba(245, 239, 226, 0.08); border-color: var(--turmeric); }
.cap-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cap-rail { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; }
/* A dot for each page; the open one widens and fills while it waits to turn. */
.cap-rail button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--rice-faint); opacity: 0.5; cursor: pointer; overflow: hidden; transition: width 0.35s, opacity 0.3s; }
.cap-rail button:hover { opacity: 0.85; }
.cap-rail button.on { width: 30px; opacity: 1; background: rgba(245, 239, 226, 0.22); }
.cap-rail button.on::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--turmeric); border-radius: inherit; animation: cap-fill var(--dwell, 7000ms) linear forwards; }
.stage.paused .cap-rail button.on::after { animation-play-state: paused; }
html.still .cap-rail button.on::after { animation: none; width: 100%; }
@keyframes cap-fill { to { width: 100%; } }
.cap-arrow:focus-visible, .cap-rail button:focus-visible { outline: 2px solid var(--turmeric); outline-offset: 2px; }
.stage-view { position: relative; overflow: hidden; border-radius: 22px; }
.stage-view::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; box-shadow: inset 0 0 0 1px var(--gold-line); }
.cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
@media (max-width: 900px) {
  .stage { height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 0 14px 10vh; gap: 12px; }
  .stage-view { height: 52vh; min-height: 340px; }
  .stage-caption { order: 2; min-height: 0; padding: 18px 18px 16px; }
  .cap h3 { font-size: 20px; margin: 10px 0 6px; }
  .cap p { font-size: 14px; }
  .cap-dev, .cap-en { font-size: 26px; }
  .cap-rail { margin-bottom: 12px; }
  .stage-caption .kicker { display: none; }
}

/* The app itself: its own stylesheet, scoped (css/app.css, written by scripts/site-tour/build.mjs).
   Here only what the stage needs: the size, one page at a time, and the ring around the part. */
.app { position: relative; width: 1440px; height: 900px; border-radius: 14px; overflow: hidden; box-shadow: 0 50px 120px rgba(0, 0, 0, 0.55); pointer-events: none; user-select: none; }
/* The website's own type and resets stop at its edge: inside, the browser's defaults, as in the app. */
.app { line-height: normal; }
.app :is(h1, h2, h3, h4) { font-family: revert; font-weight: revert; font-size: revert; line-height: revert; letter-spacing: revert; margin: revert; text-wrap: revert; }
.app p { margin: revert; }
.app :is(svg, img) { display: revert; }
.app .main { position: relative; }
.app .scr { position: absolute; inset: 50px 0 0; display: flex; flex-direction: column; min-height: 0; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.app .scr.on { opacity: 1; visibility: visible; }
.app .scr > :last-child { flex: 1; min-height: 0; }
.app * { scrollbar-width: none; }
.app *::-webkit-scrollbar { display: none; }
.focus-ring { position: absolute; border-radius: 12px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px #e8892f, 0 0 0 9999px rgba(12, 14, 34, 0.18); transition: left 0.35s, top 0.35s, width 0.35s, height 0.35s, opacity 0.25s; }

/* ---------- for Indian firms ---------- */
/* ---------- Sakha: the friend at work ---------- */
.sakha { position: relative; overflow: clip; padding: 22vh 0 16vh; background: radial-gradient(120% 70% at 50% 0%, rgba(28, 33, 96, 0.55), transparent 70%), var(--night); }
.sakha-knot { width: min(900px, 120vmin); left: 50%; top: 4vh; translate: -50% 0; color: var(--turmeric); opacity: 0.1; }
.sakha-intro { position: relative; max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
/* Sakha's mark, as rope like the knot (generated by design/brand/build.py). */
.sakha-sign { display: block; width: clamp(96px, 11vw, 132px); height: auto; margin: 0 auto 18px; }
.sakha-intro h2 { font-size: clamp(36px, 5.4vw, 74px); line-height: 1.04; }
.sk-dev { display: block; font-size: clamp(64px, 10vw, 150px); line-height: 1; color: var(--turmeric); margin-bottom: 18px; text-shadow: 0 0 60px rgba(227, 176, 75, 0.25); }
.sakha-lede { max-width: 640px; margin: 26px auto 0; font-size: clamp(17px, 1.4vw, 20px); color: var(--rice-dim); }

/* The evening, as it happens: captions on the left, Sakha's window on the right. */
.sk-stage { position: relative; margin-top: 12vh; }
.sk-pin { height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(280px, 420px) minmax(320px, 460px); justify-content: center; align-items: center; gap: clamp(32px, 6vw, 96px); padding: 80px var(--gutter) 40px; }
.sk-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: c; }
.sk-caps li { position: relative; padding-left: 48px; color: var(--rice-faint); font-size: 16.5px; line-height: 1.55; transition: color 0.5s, opacity 0.5s; }
.sk-caps li span { position: absolute; left: 0; top: 2px; font: 400 15px/1 var(--serif); color: var(--rice-faint); transition: color 0.5s; }
.sk-caps li b { display: block; font: 400 clamp(20px, 1.8vw, 26px)/1.2 var(--serif); color: var(--rice-faint); transition: color 0.5s; }
/* Only the capability on screen says more. */
.sk-caps li p { margin: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.5s ease; }
.sk-caps li.on p { max-height: 140px; opacity: 1; margin-top: 8px; }
.sk-caps li.on { color: var(--rice-dim); }
.sk-caps li.on b { color: var(--rice); }
.sk-caps li.on span { color: var(--turmeric); }
.sk-caps li::before { content: ""; position: absolute; left: 6px; top: 24px; bottom: -14px; width: 1px; background: var(--gold-line); }
.sk-caps li:last-child::before { display: none; }

/* The window is the app's own: warm paper, ink, night indigo for Sakha. */
.sk-win { --sk-ink: #2b2620; --sk-ink-3: #6f665a; --sk-ink-4: #988e80; --sk-line: #e8e1d4; --sk-paper: #fbf9f5; --sk-sun: #f3eee5; --sk-indigo: #1c2160;
  position: relative; height: min(600px, calc(100svh - 150px)); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--sk-paper); color: var(--sk-ink); font: 400 14px/1.5 "IBM Plex Sans", var(--sans);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(227, 176, 75, 0.25); }
.sk-h { display: flex; align-items: baseline; gap: 8px; height: 50px; flex: none; padding: 15px 16px 0; border-bottom: 1px solid var(--sk-line); }
.sk-h b { font-weight: 600; font-size: 15px; }
.sk-h span { font: 400 15px var(--serif); color: #b07a2a; }
.sk-h em { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--sk-ink-4); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--sk-line); background: var(--sk-sun); }
.sk-mark { width: 15px; height: 15px; align-self: center; flex: none; border-radius: 50%; border: 1.4px solid rgba(201, 134, 43, 0.6); position: relative; }
.sk-mark::after { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: var(--saffron); }
.sk-body { flex: 1; min-height: 0; overflow: hidden; padding: 16px; }
.sk-scene { display: flex; flex-direction: column; gap: 12px; }
.sk-scene + .sk-scene { display: none; }
.sk-ans > * + * { margin-top: 6px; }
.sk-draft { border: 1px solid var(--sk-line); border-radius: 10px; overflow: hidden; }
.sk-draft small { display: block; padding: 6px 10px; font-size: 11.5px; color: var(--sk-ink-4); background: var(--sk-sun); border-bottom: 1px solid var(--sk-line); }
.sk-draft p { padding: 9px 12px; font-size: 13.5px; }
.sk-draft em { display: flex; gap: 16px; padding: 0 12px 9px; font-style: normal; }
.sk-draft u, .sk-done u { text-decoration: none; color: #0d6f6c; font-size: 12.5px; }
.sk-page { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--sk-line); box-shadow: 0 1px 2px rgba(40, 30, 15, 0.06); }
.sk-page small { font-size: 11.5px; color: var(--sk-ink-4); }
.sk-page b { font: 600 15px/1.3 "IBM Plex Sans", var(--sans); margin: 2px 0 2px; }
.sk-page span { font-size: 13.5px; }
.sk-msg { flex-shrink: 0; }
.sk-msg p + p, .sk-msg p + ul, .sk-msg ul + p { margin-top: 6px; }
.sk-a { max-width: 96%; }
.sk-me { align-self: flex-end; max-width: 84%; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: #ece4d6; min-height: 37px; }
.sk-typed::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; background: var(--sk-ink); vertical-align: -2px; animation: sk-caret 0.9s steps(2) infinite; }
.sk-typed.done::after { display: none; }
@keyframes sk-caret { 50% { opacity: 0; } }
.sk-look { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sk-ink-4); }
.sk-look i { width: 6px; height: 6px; border-radius: 50%; background: #c9862b; }
.sk-list { margin: 4px 0 0; padding-left: 18px; }
.sk-list li { margin: 1px 0; }
.sk-list s { text-decoration: none; color: var(--sk-ink-4); }
.sk-list s::before { content: " · "; }
.sk-list .more { list-style: none; margin-left: -18px; color: var(--sk-ink-4); }
.sk-choices { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sk-choices span { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px; border: 1px solid #d9d0c0; font-weight: 500; }
.sk-choices .sk-yes { background: var(--sk-indigo); border-color: var(--sk-indigo); color: #f6f1e6; }
.sk-done { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--sk-sun); border: 1px solid var(--sk-line); font-size: 13px; margin-bottom: 8px; }
.sk-done i { font-style: normal; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #1f7a4f; color: #fff; font-size: 10px; }
.sk-done u { margin-left: auto; }
.sk-f { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 9px 10px 9px 14px; border: 1px solid #d9d0c0; border-radius: 10px; color: var(--sk-ink-4); font-size: 13.5px; }
.sk-f span { flex: 1; }
.sk-mic { width: 14px; height: 18px; border: 1.6px solid var(--sk-ink-3); border-radius: 7px; position: relative; }
.sk-mic::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 1.6px; height: 4px; background: var(--sk-ink-3); translate: -50% 0; }

/* Ask, act, write */
.sk-says { position: relative; max-width: var(--max); margin: 12vh auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.sk-says > div { padding: 8px clamp(18px, 2.6vw, 40px) 10px; border-left: 1px solid var(--gold-line); }
.sk-says > div:first-child { border-left: 0; padding-left: 0; }
.sk-verb { font: 400 clamp(34px, 3.6vw, 52px)/1 var(--serif); color: var(--turmeric); margin-bottom: 22px; }
.sk-q { font: italic 400 clamp(18px, 1.5vw, 21px)/1.35 var(--serif); color: var(--rice); margin-bottom: 12px; }
.sk-note { margin-top: 20px; font-size: 15px; color: var(--rice-dim); max-width: 340px; }

/* On every screen */
.sk-where { position: relative; max-width: var(--max); margin: 18vh auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sk-where-copy p:last-child { margin-top: 16px; color: var(--rice-dim); font-size: 17px; max-width: 520px; }
.sk-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; justify-items: start; }
.sk-chips li { padding: 10px 18px 10px 44px; border-radius: 999px; background: var(--glass); border: 1px solid var(--gold-line); color: var(--rice-dim); font-size: 15px; position: relative; }
.sk-chips li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle, var(--saffron) 0 3px, transparent 3.5px), #2a3080; box-shadow: 0 0 0 1px rgba(245, 239, 226, 0.25); }
.sk-chips li b { color: var(--rice); font-weight: 500; }
.sk-chips li:nth-child(2) { margin-left: 8%; }
.sk-chips li:nth-child(3) { margin-left: 16%; }
.sk-chips li:nth-child(4) { margin-left: 6%; }
.sk-chips li:nth-child(5) { margin-left: 20%; }

/* Voice */
.sk-voice { position: relative; max-width: var(--max); margin: 18vh auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.sk-wave { position: relative; height: 260px; display: grid; place-items: center; }
.sk-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sk-wave path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.sk-wave .w1 { stroke: var(--turmeric); }
.sk-wave .w2 { stroke: var(--saffron); opacity: 0.6; }
.sk-wave .w3 { stroke: var(--rice); opacity: 0.35; }
.sk-bol { position: relative; font-size: clamp(70px, 9vw, 130px); line-height: 1; color: var(--rice); text-shadow: 0 0 40px rgba(12, 14, 34, 0.9), 0 0 80px rgba(12, 14, 34, 0.9); }
.sk-voice .kicker em { font-style: normal; margin-left: 10px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--gold-line); color: var(--rice-dim); letter-spacing: 0.12em; }
.sk-voice-copy > p:not(.kicker) { margin-top: 16px; color: var(--rice-dim); font-size: 17px; }
.sk-heard { display: flex; flex-direction: column; gap: 8px; }
.sk-heard span { font: italic 400 19px/1.3 var(--serif); color: var(--rice); }
.sk-heard span[lang="hi"], .sk-heard span[lang="mr"] { font-family: var(--serif); font-style: normal; }

/* The promises */
.sk-trust { position: relative; max-width: var(--max); margin: 18vh auto 0; padding: 36px var(--gutter) 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 1px solid var(--gold-line); }
.sk-trust li { color: var(--rice-dim); font-size: 15px; }
.sk-trust b { display: block; font: 400 21px/1.25 var(--serif); color: var(--rice); margin-bottom: 8px; }

@media (max-width: 900px) {
  .sk-pin { height: auto; grid-template-columns: 1fr; padding: 40px 16px; gap: 28px; }
  .sk-caps { gap: 16px; }
  .sk-caps li { color: var(--rice-dim); }
  .sk-caps li b { color: var(--rice); font-size: 21px; }
  .sk-win { height: auto; }
  .sk-body { overflow: visible; }
  .sk-caps li p { max-height: none; opacity: 1; margin-top: 6px; }
  .sk-says { grid-template-columns: 1fr; gap: 40px; padding: 0 16px; }
  .sk-says > div { border-left: 0; padding: 0; }
  .sk-where, .sk-voice { grid-template-columns: 1fr; gap: 32px; padding: 0 16px; }
  .sk-chips li { margin-left: 0 !important; }
  .sk-wave { height: 180px; }
  .sk-trust { grid-template-columns: 1fr 1fr; padding: 28px 16px 0; }
}
@media (max-width: 560px) { .sk-trust { grid-template-columns: 1fr; } }

.india { margin-top: -1px; overflow: hidden; }
.india-knot { width: min(820px, 100vmin); right: -24vmin; top: 50%; translate: 0 -50%; color: var(--sindoor); opacity: 0.18; }
.india-copy { position: relative; max-width: var(--max); margin: 0 auto; padding: 10vh var(--gutter) 20vh; }
.india-copy h2 { max-width: 720px; }
.facts { list-style: none; padding: 0; margin: 56px 0 0; max-width: 700px; display: flex; flex-direction: column; }
.facts li { position: relative; padding: 22px 0 22px 46px; border-top: 1px solid rgba(43, 33, 24, 0.16); font-size: 18px; color: #4a3c2e; }
.facts li:last-child { border-bottom: 1px solid rgba(43, 33, 24, 0.16); }
.facts li b { color: var(--paper-ink); font-weight: 600; }
.facts li::before { content: ""; position: absolute; left: 6px; top: 30px; width: 14px; height: 14px; border: 1.5px solid var(--sindoor); rotate: 45deg; }
.facts li::after { content: ""; position: absolute; left: 11px; top: 35px; width: 5px; height: 5px; background: var(--sindoor); border-radius: 50%; }

/* ---------- early access ---------- */
.access { position: relative; min-height: 100svh; display: grid; justify-items: center; align-content: start; padding: 10vh var(--gutter) 12vh;
  background: radial-gradient(60vmax 50vmax at 50% 110%, rgba(28, 33, 96, 0.9), transparent 70%), radial-gradient(30vmax 30vmax at 15% 20%, rgba(18, 128, 125, 0.18), transparent 70%); }
.niche { position: relative; width: min(640px, 100%); padding: 120px clamp(22px, 5vw, 56px) 48px; border-radius: 320px 320px 28px 28px / 260px 260px 28px 28px; text-align: center; }
.niche::before { content: ""; position: absolute; inset: 10px; border-radius: inherit; border: 1px solid var(--gold-line); pointer-events: none; }
.kalash { position: absolute; left: 50%; top: 34px; width: 46px; translate: -50% 0; fill: none; stroke: var(--turmeric); stroke-width: 1.6; stroke-linecap: round; }
.kalash .flame { fill: rgba(232, 137, 47, 0.35); stroke: var(--saffron); }
.niche h2 { font-size: clamp(32px, 4.4vw, 52px); }
.access-sub { margin: 16px auto 30px; max-width: 440px; color: var(--rice-dim); }
.access-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.access-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--rice-dim); }
.access-form label em { font-style: normal; color: var(--rice-faint); }
.access-form .wide { grid-column: 1 / -1; }
.access-form input, .access-form select { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--gold-line); background: rgba(12, 14, 34, 0.45); color: var(--rice); font: 400 15px var(--sans); }
.access-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--turmeric) 50%), linear-gradient(135deg, var(--turmeric) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.access-form button { margin-top: 8px; }
.form-note { min-height: 20px; text-align: center; font-size: 14px; color: var(--turmeric); }
.form-privacy { margin: -6px 0 0; text-align: center; font-size: 12.5px; color: var(--rice-faint); }
.form-privacy a { color: inherit; text-underline-offset: 3px; }
.access-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.access-done { padding: 28px 8px 8px; text-align: center; }
.access-done h3 { font: 400 28px/1.2 var(--serif); margin: 0 0 10px; color: var(--rice); }
.access-done p { margin: 0; color: var(--rice-dim); }
@media (max-width: 560px) { .access-form { grid-template-columns: 1fr; } .niche { padding-top: 104px; border-radius: 220px 220px 24px 24px / 180px 180px 24px 24px; } }

/* ---------- footer ---------- */
.foot { position: relative; padding: 0 var(--gutter) 34px; color: var(--rice-faint); font-size: 14px; }
.arcade { width: 100%; height: 64px; }
.arcade path { fill: none; stroke: var(--gold-line); stroke-width: 1.2; }
.foot-row { max-width: var(--max); margin: 18px auto 0; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.foot-row .brand { color: var(--rice); }
.foot-row nav { display: flex; gap: 22px; margin-left: auto; }
.foot-row nav a { text-decoration: none; }
.foot-row nav a:hover { color: var(--rice); }
.foot-note { max-width: var(--max); margin: 14px auto 0; font-size: 12.5px; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .portal { height: 40vh; margin-top: -1px; background: var(--from); }
  .portal-pin { --a: 400; }
  .scroll-cue span { animation: none; }
}

/* The still version: everything in place, nothing moving */
html.still .portal { height: 40vh; margin-top: -1px; background: var(--from); }
html.still .portal-pin { --a: 400; }
html.still .portal-frame, html.still .portal-word { display: none; }
html.still .meaning-lines { min-height: 0; }
html.still .m-line { position: relative; margin-bottom: 14px; }
html.still .scr { transition: none; }

/* Phones and the still version: all six conversations, one after another, each saying where it is. */
@media (max-width: 900px) {
  .sk-scene + .sk-scene { display: flex; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sk-line); }
  .sk-scene::before { content: attr(data-where); align-self: flex-start; font-size: 12px; color: var(--sk-ink-4); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--sk-line); background: var(--sk-sun); }
  .sk-chip, .sk-look { display: none; }
}
html.still .sk-scene + .sk-scene { display: flex; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sk-line); }
html.still .sk-scene::before { content: attr(data-where); align-self: flex-start; font-size: 12px; color: var(--sk-ink-4); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--sk-line); background: var(--sk-sun); }
html.still .sk-chip, html.still .sk-look { display: none; }
html.still .sk-win { height: auto; }
html.still .sk-body { overflow: visible; }
html.still .sk-pin { height: auto; align-items: start; }
html.still .sk-caps li p { max-height: none; opacity: 1; margin-top: 6px; }
html.still .sk-caps li b { color: var(--rice); }

/* ---------- legal pages (privacy.html, terms.html) ----------
   Paper and ink, one readable column, the night footer below. */
.legal .legal-paper { position: relative; background: var(--paper); color: var(--paper-ink); }
.legal .legal-paper::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80vmax 60vmax at 20% 0%, rgba(255, 255, 255, 0.45), transparent 60%), radial-gradient(60vmax 50vmax at 100% 100%, rgba(184, 68, 47, 0.07), transparent 70%); }
.legal .legal-head, .legal .legal-main { position: relative; max-width: calc(720px + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.legal .legal-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 8px; }
.legal .legal-head .brand-mark { color: var(--sindoor); }
.legal .legal-head .brand-dev { color: var(--sindoor); }
.legal .legal-head nav { display: flex; gap: 20px; margin-left: auto; font-size: 14px; }
.legal .legal-head nav a { text-decoration: none; color: var(--ink-soft); }
.legal .legal-head nav a:hover, .legal .legal-head nav a[aria-current="page"] { color: var(--paper-ink); }
.legal .legal-head nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--sindoor); }
.legal .legal-main { padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(64px, 9vw, 112px); font-size: 17px; line-height: 1.75; }
.legal .kicker { color: var(--sindoor); }
.legal .legal-main h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.05; }
.legal .legal-updated { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.legal .legal-lede { margin-top: 28px; font-size: 19px; line-height: 1.65; }
.legal .legal-main h2 { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(43, 33, 24, 0.14); font-size: clamp(25px, 3vw, 30px); line-height: 1.2; scroll-margin-top: 24px; }
.legal .legal-main h3 { margin-top: 30px; font: 600 17px/1.4 var(--sans); letter-spacing: 0; }
.legal .legal-main p, .legal .legal-main ul, .legal .legal-main ol { margin: 14px 0 0; }
.legal .legal-main ul, .legal .legal-main ol { padding-left: 1.3em; }
.legal .legal-main li + li { margin-top: 8px; }
.legal .legal-main li::marker { color: var(--ink-soft); }
.legal .legal-main a { text-decoration: underline; text-decoration-color: rgba(184, 68, 47, 0.45); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal .legal-main a:hover { text-decoration-color: var(--sindoor); }
.legal .legal-main a:focus-visible { outline-color: var(--sindoor); }
.legal .legal-main code { font: 400 0.86em/1.5 "IBM Plex Mono", ui-monospace, monospace; background: rgba(43, 33, 24, 0.06); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.legal .legal-toc { margin-top: 36px; padding: 18px 22px; border: 1px solid rgba(43, 33, 24, 0.14); border-radius: 12px; background: rgba(255, 252, 244, 0.45); font-size: 15px; line-height: 1.5; }
.legal .legal-toc b { display: block; font-weight: 500; color: var(--ink-soft); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.legal .legal-toc ol { columns: 2 240px; column-gap: 32px; margin-top: 10px; }
.legal .legal-toc li { break-inside: avoid; }
.legal .legal-toc li + li { margin-top: 4px; }
.legal .legal-toc a { text-decoration: none; }
.legal .legal-toc a:hover { text-decoration: underline; }
.legal .legal-box { margin-top: 18px; padding: 16px 20px; border-left: 3px solid var(--sindoor); background: rgba(255, 252, 244, 0.5); border-radius: 0 10px 10px 0; }
.legal .legal-box p:first-child { margin-top: 0; }
.legal .foot { padding-top: 0; }
@media (max-width: 560px) {
  .legal .legal-main { font-size: 16px; }
  .legal .legal-lede { font-size: 17.5px; }
  .legal .legal-head nav { margin-left: 0; width: 100%; }
}