/* AstroAshva home page (landing v2).
   Palette, theme ids and header come from site-theme.css; this file only adds
   the sections. Motion uses transform and opacity only, driven by landing.js. */

:root {
  --font-heading:'Noto Serif','Noto Serif Devanagari','Noto Serif Bengali','Noto Serif Gurmukhi','Noto Serif Gujarati','Noto Serif Oriya','Noto Serif Tamil','Noto Serif Telugu','Noto Serif Kannada','Noto Serif Malayalam',Georgia,serif;
  --font-mantra:'Tiro Devanagari Sanskrit','Noto Serif Devanagari',serif;
  --gutter:clamp(16px,4vw,40px);
  --maxw:1240px;
  --radius:12px;
  /* Motion system: one curve, three speeds, one stagger, used by every scene. */
  --m-ease:cubic-bezier(.2,.7,.1,1);
  --m-fast:.24s; --m-med:.6s; --m-slow:1.2s;
  --m-stagger:.07s;
  --ease:var(--m-ease);
  /* The thread's colour: the theme tint (gold, orange), ink in the B&W themes. */
  --thread:var(--tint);
  /* Meaning tones (AastroTone), used for feature icons only. */
  --t-saffron:#D9480F; --t-rose:#C73E65; --t-purple:#7C4DDB; --t-teal:#007F78;
  --t-blue:#2563C4; --t-gold:#9A6A00; --t-green:#25833B; --t-indigo:#5B5BD6;
  --t-neutral:var(--fg2);
}
[data-theme$="dark"] {
  --t-saffron:#FFAE57; --t-rose:#FF829F; --t-purple:#C2A0FF; --t-teal:#4DD9C5;
  --t-blue:#76B6FF; --t-gold:#FFD24A; --t-green:#7DDB88; --t-indigo:#B2A5FF;
  --t-neutral:var(--fg2);
}
/* Meaning icons retain their semantic colour in every base theme. */

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--fg); overflow-x:clip; line-height:1.5; }
@supports not (overflow:clip) { body { overflow-x:hidden; } }
img { display:block; max-width:100%; }
a { color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html[data-lang="en"] [lang="hi"]:not(html):not(option), html[data-lang="hi"] [lang="en"]:not(html):not(option) { display:none !important; }
/* The other eleven languages (i18n.js): Hindi stays hidden, a translated
   English element hands over to its clone, an untranslated one stays English. */
html[data-tr] [lang="hi"]:not(html):not(option), html[data-tr] .i18n-off { display:none !important; }
/* Until the strings file arrives (at most 2.5 s), hold the English text back. */
html.i18n-wait body [lang="en"] { visibility:hidden; }
html[data-indic] .eyebrow, html[data-indic] .vs .who, html[data-indic] .chip i { letter-spacing:.03em; }
[data-theme$="dark"] .phone, [data-theme$="dark"] .side-phone { box-shadow:0 0 0 1px #3a3a3a, 0 40px 80px -30px rgba(0,0,0,.7); }
[data-theme$="dark"] .feat .peek > div { border-color:#2a2a2a; }
:focus-visible { outline:2px solid var(--tint); outline-offset:3px; }

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.grad { background:var(--tint-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
[data-theme^="mono"] .grad { background:none; color:var(--fg); -webkit-text-fill-color:currentColor; }
.h2 { font-family:var(--font-heading); font-weight:700; letter-spacing:-.025em; font-size:clamp(36px,6.2vw,84px); line-height:1.02; color:var(--fg); }
html[data-indic] .h2 { letter-spacing:0; line-height:1.18; }
.lead { font-size:clamp(17px,1.9vw,22px); line-height:1.5; color:var(--fg2); max-width:680px; text-wrap:balance; }
.h2, .q .txt, .foot-line, .hero-sub { text-wrap:balance; }
.sec { padding:clamp(80px,12vw,160px) 0; }
.sec-head { text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:clamp(40px,6vw,72px); }
.sec-head .lead { margin:0 auto; }

/* ---------- Header (site-theme.css), tightened for the home page ---------- */
.site-header { position:relative; z-index:5; border-bottom:none; background:transparent; min-height:0; padding:16px var(--gutter); max-width:var(--maxw); margin:0 auto; }
.site-brand .site-mark { width:32px; height:32px; }
.home-theme-picker { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border:.5px solid var(--line); border-radius:999px; color:var(--fg2); font:600 12px var(--font-body); }
.home-theme-picker svg { width:14px; height:14px; }
.home-theme-swatch { width:12px; height:12px; flex:none; border-radius:50%; background:var(--tint); box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line); margin:0 3px; }
.home-theme-picker select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font:inherit; }
.home-theme-picker:focus-within { outline:2px solid var(--tint); outline-offset:4px; }
/* The language picker: the Theme picker's pill, a globe and the native name. */
.home-lang-picker .lang-name { white-space:nowrap; letter-spacing:0; }
.home-lang-picker .lang-globe { width:15px; height:15px; flex:none; }
.site-nav a { font-size:13px; }
@media (max-width:580px) {
  .site-header { flex-wrap:nowrap; align-items:center; padding:12px 16px; gap:10px; }
  .site-controls { width:auto; gap:10px; flex-wrap:nowrap; }
  .site-controls { gap:8px; }
  .site-nav a { font-size:12px; }
  .site-themes, .home-theme-picker { flex:none; }
  .home-theme-picker { padding:0 10px; gap:6px; }
}
@media (max-width:340px) {
  .site-themes button { width:28px; height:28px; }
  .site-brand .site-mark { width:28px; height:28px; }
}
@media (max-width:380px) {
  .site-header { padding:12px 12px; gap:6px; }
  .site-controls { gap:6px; }
  .home-theme-picker { padding:0 9px; }
}

/* ---------- 1. Hero ---------- */
.hero { text-align:center; }
.hero-top { display:flex; flex-direction:column; align-items:center; padding:clamp(34px,13vh,150px) 0 0; }
@media (max-width:760px) { .hero-top { padding-top:clamp(26px,6vh,56px); } }
/* The name is plain ink in every theme (black on light, white on dark).
   site-theme.css paints every h1 with the tint gradient, so undo that here. */
.wordmark, [data-theme] h1.wordmark {
  font-family:'Noto Serif',Georgia,serif; font-weight:700; text-transform:uppercase;
  white-space:nowrap; line-height:1; letter-spacing:-.01em;
  font-size:clamp(38px,7vw,124px);
  padding:0 var(--gutter); margin:0 auto;
  color:var(--fg); background:none; -webkit-text-fill-color:currentColor;
}
.tagline { margin-top:clamp(8px,1.2vw,16px); font-family:var(--font-heading); font-weight:600; font-size:clamp(19px,2.2vw,30px); color:var(--fg2); letter-spacing:-.01em; }
html[data-indic] .tagline { letter-spacing:0; }

.marquee { position:relative; margin-top:clamp(18px,3vh,36px); }
.marquee-scroll {
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; cursor:grab; touch-action:pan-x pan-y; overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.marquee-scroll::-webkit-scrollbar { display:none; }
.marquee-scroll.dragging { cursor:grabbing; }
.marquee-track { display:flex; gap:clamp(10px,1.3vw,18px); width:max-content; padding:4px clamp(10px,1.3vw,18px) 0 0; }
.card-shot {
  /* Top half of each screen only, sized from the viewport height so the whole
     row fits in the first screen under the name and badges. */
  --h:clamp(150px, calc(100svh - 610px), 330px);
  --w:calc(var(--h) * 1080 / 1110);
  flex:none; width:var(--w); height:var(--h); overflow:hidden; background:#fff;
  border-radius:0; border:.5px solid var(--line); border-bottom:none;
  user-select:none; -webkit-user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
}
@media (max-width:760px) { .card-shot { --h:clamp(170px, 35svh, 300px); } }
.card-shot img { width:100%; height:100%; object-fit:cover; object-position:top; pointer-events:none; -webkit-user-drag:none; }

.hero-sub { margin:clamp(12px,2vh,22px) auto 0; padding:0 var(--gutter); max-width:640px; font-size:clamp(16px,1.6vw,19px); color:var(--muted); }
.store-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin-top:clamp(16px,2.6vh,26px); padding:0 var(--gutter); }
.dl-stat { margin-top:12px; font-size:14px; font-weight:600; color:var(--fg2); }
.dl-stat b { color:var(--fg); }
.play-badge img { height:56px; width:auto; }
.store-badge { display:inline-flex; align-items:center; gap:11px; height:56px; background:#000; color:#fff; border:1px solid #333; border-radius:12px; padding:0 18px; text-decoration:none; min-width:176px; }
.store-badge .ico { width:26px; height:26px; flex:none; }
.store-badge small { display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; opacity:.85; line-height:1.2; }
.store-badge b { display:block; font-size:19px; font-weight:600; line-height:1.15; }
.play-badge, .store-badge { transition:transform .2s var(--ease); }
.play-badge:hover, .store-badge:hover { transform:translateY(-2px); }
.hero-note { margin-top:8px; font-size:13px; color:var(--muted); padding:0 var(--gutter); }
.hero-note a, .dl-note a { color:var(--fg); text-underline-offset:3px; }

/* ---------- 2. Scroll story ---------- */
.story { position:relative; height:600vh; height:600svh; margin-top:clamp(64px,9vw,120px); }
.story-pin { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mantra { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-evenly; pointer-events:none; padding:3vh 0; }
.m-row {
  font-family:var(--font-mantra); font-weight:400; white-space:nowrap; line-height:1.25;
  font-size:clamp(54px,10.5vw,176px); color:color-mix(in srgb,var(--fg) 8%,transparent);
  will-change:transform;
}
[data-theme$="dark"] .m-row { color:color-mix(in srgb,var(--fg) 9%,transparent); }
[data-theme="yellow-light"] .m-row { color:color-mix(in srgb,var(--tint) 16%,transparent); }
[data-theme="white-light"] .m-row { color:color-mix(in srgb,var(--tint) 12%,transparent); }
.m-row span { padding-right:.6em; }
.phone {
  --pw:min(clamp(214px,21vw,292px), calc((100svh - 230px) * 540 / 1110));
  position:relative; z-index:2; width:var(--pw); padding:9px; border-radius:calc(var(--pw) * .16);
  background:#0B0B0C; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px var(--line);
}
.phone .screen { position:relative; aspect-ratio:540/1110; border-radius:calc(var(--pw) * .13); overflow:hidden; background:#fff; isolation:isolate; }
.phone .screen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; will-change:transform,opacity; }
.story .phone { --pw:min(clamp(196px,19vw,292px), calc((100svh - 300px) * 1206 / 2622)); }
/* Two phones, staggered for depth, showing the same feature: an Android phone
   (punch-hole camera, slim bezel, squarer corners) and an iPhone (Dynamic
   Island, rounder corners). Screens are stacked, with the next screenshot
   fading over the current one so the frame stays filled through a scroll. */
.story .phone.and { padding:6px; border-radius:calc(var(--pw) * .1); }
.story .phone.and .screen { border-radius:calc(var(--pw) * .075); }
.story .phone.and .screen::after { content:""; position:absolute; z-index:3; top:calc(var(--pw) * .03); left:50%; width:calc(var(--pw) * .045); aspect-ratio:1; margin-left:calc(var(--pw) * -.0225); border-radius:50%; background:#0B0B0C; box-shadow:0 0 0 1.5px rgba(255,255,255,.06); }
.story .phone.ios { padding:8px; border-radius:calc(var(--pw) * .19); background:#111113; box-shadow:0 0 0 1.5px #4a4a4e inset, 0 0 0 1px rgba(255,255,255,.1) inset, 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px var(--line); }
.story .phone.ios .screen { aspect-ratio:1206/2622; border-radius:calc(var(--pw) * .16); }
.story .phone.ios .screen::after { content:""; position:absolute; z-index:3; top:1.3%; left:50%; width:31%; aspect-ratio:125/37; transform:translateX(-50%); border-radius:999px; background:#000; }
.duo { position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:center; gap:clamp(22px,4vw,64px); }
.pw { display:flex; flex-direction:column; align-items:center; }
.pw.a { transform:translate3d(0,-14px,0); }
.pw.b { transform:translate3d(0,0,0); }
.story .screen .reel { position:absolute; inset:0; }
.story .screen .sl { position:absolute; inset:0; overflow:hidden; opacity:0; will-change:opacity; }
.story .screen .sl:first-child { opacity:1; }
.story .phone .screen { background:#FBF7EE; }
[data-theme$="dark"] .story .phone .screen { background:#0B0B0C; }
/* Android: hide the capture's own status bar; the frame draws one. The iPhone
   captures keep their real iOS status bar (9:30, set on the simulator). */
.story .screen .sl img { position:absolute; left:0; top:-5.4%; width:100%; height:105.4%; object-fit:cover; object-position:top; }
.sbar { position:absolute; z-index:2; top:0; left:0; right:0; height:5.4%; display:flex; align-items:center; justify-content:space-between; padding:0 9% 0 10%;
  font:600 calc(var(--pw) * .043) var(--font-body); color:#1A1A1A; background:linear-gradient(#fff 55%,rgba(255,255,255,0)); }
.sbar svg { height:44%; width:auto; fill:#1A1A1A; }
.sl.dk .sbar { color:#F4F4F4; background:linear-gradient(#0B0B0C 55%,rgba(11,11,12,0)); }
.sl.dk .sbar svg { fill:#F4F4F4; }
.sl .sbar { font-size:calc(var(--pw) * .043); padding:0 7% 0 8%; }
.story .phone.ios .sl img { top:0; height:100%; }
.dev { margin-top:12px; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--fg2); }
.pcaps { position:relative; z-index:2; margin-top:20px; height:74px; width:min(90vw,460px); }
.cap { position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.cap.on { opacity:1; transform:none; }
.chip { display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:999px; background:var(--card); border:.5px solid var(--line); font-weight:700; font-size:15px; box-shadow:0 10px 30px -18px rgba(0,0,0,.35); white-space:nowrap; }
.chip i { font-style:normal; font-size:11px; font-weight:700; letter-spacing:.06em; padding:3px 8px; border-radius:999px; background:var(--tint-grad); color:var(--on-accent); }
.cap p { font-size:15px; color:var(--fg2); max-width:440px; }
.story-bar { position:absolute; z-index:2; right:clamp(14px,3vw,40px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; }
.story-bar b { display:block; width:4px; height:34px; border-radius:4px; background:var(--line); overflow:hidden; position:relative; }
.story-bar b::after { content:""; position:absolute; inset:0; background:var(--tint); transform:scaleY(var(--f,0)); transform-origin:top; }
.story-static { display:none; }
@media (max-width:760px) {
  .story { height:480vh; height:480svh; }
  .story .phone { --pw:min(40vw, calc((100svh - 330px) * 1206 / 2622)); }
  .story .phone.and { padding:4px; }
  .story .phone.ios { padding:5px; }
  .dev { margin-top:8px; font-size:11px; }
  .duo { gap:14px; }
  .pw.a { transform:translate3d(0,-10px,0); }
  .pw.b { transform:translate3d(0,0,0); }
  .m-row { font-size:clamp(44px,14vw,96px); }
  .story-bar { display:none; }
  .pcaps { width:calc(100vw - 32px); height:68px; margin-top:10px; }
  .cap { gap:5px; }
  .cap p { font-size:13px; }
  .chip { font-size:13px; padding:5px 10px 5px 6px; gap:6px; }
  .chip i { font-size:10px; padding:2px 6px; }
}

/* ---------- 3. Why different ---------- */
.why .h2 { max-width:17ch; margin:0 auto; }
html[data-indic] .why .h2 { max-width:14ch; }
.vs { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; margin:0 auto; }
.vs > div { border:.5px solid var(--line); border-radius:12px; padding:clamp(20px,2.6vw,30px); background:var(--card); }
.vs .who { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.vs .big { margin-top:10px; font-family:var(--font-heading); font-weight:700; font-size:clamp(20px,2.3vw,28px); line-height:1.2; }
.vs .sm { margin-top:8px; color:var(--fg2); font-size:15px; }
.vs .us { border-color:color-mix(in srgb,var(--tint) 55%,var(--line)); background:color-mix(in srgb,var(--tint) 6%,var(--card)); }
.vs .them .big { color:var(--fg2); }
.q { text-align:center; margin:clamp(64px,9vw,110px) auto 0; max-width:960px; }
.q .txt { margin-top:14px; font-family:var(--font-heading); font-weight:700; font-size:clamp(30px,5vw,60px); line-height:1.1; letter-spacing:-.02em; }
html[data-indic] .q .txt { line-height:1.3; letter-spacing:0; }
.steps { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(36px,5vw,60px); counter-reset:s; }
.steps li { position:relative; border:.5px solid var(--line); border-radius:12px; padding:24px 22px 26px; background:var(--card); }
.steps .n { font-family:var(--font-heading); font-weight:700; font-size:44px; line-height:1; }
.steps h3 { margin-top:16px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
html[data-indic] .steps h3 { letter-spacing:.02em; font-size:15px; }
.steps p { margin-top:8px; font-size:17px; line-height:1.45; }
.steps em { font-style:normal; font-weight:700; }
.steps li:last-child { border-color:color-mix(in srgb,var(--tint) 55%,var(--line)); }
.says { margin:16px auto 0; max-width:none; border-radius:26px; padding:clamp(26px,3.4vw,40px); background:var(--btn-bg); color:var(--btn-fg); display:grid; grid-template-columns:auto 1fr; gap:14px 28px; align-items:center; }
.says .eyebrow { color:inherit; opacity:.7; grid-column:1 / -1; }
.says blockquote { grid-column:1 / -1; font-family:var(--font-heading); font-weight:600; font-size:clamp(20px,2.6vw,32px); line-height:1.3; }
.foot-line { margin-top:clamp(40px,6vw,70px); text-align:center; font-family:var(--font-heading); font-weight:700; font-size:clamp(24px,3.4vw,42px); letter-spacing:-.015em; }

/* ---------- 3b. AshvaAI with several people: animated illustration ----------
   Play on view (landing.js adds s1..s5 to .ai-demo). Transforms and opacity
   only, except the thin SVG strokes that draw themselves. */
.ai .h2 { max-width:18ch; margin:0 auto; }
.demo-steps { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.demo-steps li { border:.5px solid var(--line); border-radius:12px; padding:18px 20px 20px; background:var(--card); opacity:.42; transition:opacity .5s var(--ease), border-color .5s var(--ease); }
.demo-steps li.on { opacity:1; }
.demo-steps li.cur { border-color:color-mix(in srgb,var(--tint) 60%,var(--line)); }
.demo-steps .n { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line); font-weight:700; font-size:15px; color:var(--muted); transition:background .4s, color .4s, border-color .4s; }
.demo-steps li.on .n { background:var(--tint-grad); border-color:transparent; color:var(--on-accent); }
.demo-steps b { display:block; margin-top:12px; font-family:var(--font-heading); font-weight:700; font-size:clamp(20px,2vw,27px); line-height:1.15; letter-spacing:-.015em; }
html[data-indic] .demo-steps b { line-height:1.35; letter-spacing:0; }
.demo-steps small { display:block; margin-top:6px; font-size:14.5px; line-height:1.45; color:var(--fg2); }

.stage { position:relative; display:grid; grid-template-columns:.85fr 1.05fr .8fr 1.5fr; gap:clamp(16px,2.6vw,40px); align-items:center;
  border:.5px solid var(--line); border-radius:32px; padding:clamp(22px,3vw,44px); min-height:540px; overflow:hidden;
  background:radial-gradient(120% 90% at 60% 50%, color-mix(in srgb,var(--tint) 7%,var(--card)) 0%, var(--card) 70%); }
.flows { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.flows path { fill:none; stroke:color-mix(in srgb,var(--tint) 55%,var(--line)); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1s var(--ease); }
.flows path.f2 { transition-delay:.15s; }
.flows path.pulse { stroke:var(--tint); stroke-width:3.5; stroke-dasharray:.05 .95; stroke-dashoffset:1; opacity:0; transition:opacity .4s; }
.ai-demo.s2 .flows .f1, .ai-demo.s3 .flows .f2, .ai-demo.s4 .flows .f3 { stroke-dashoffset:0; }
.ai-demo.s3 .flows .pulse { opacity:1; animation:flow 1.8s linear infinite; }
@keyframes flow { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }

.stage .col { position:relative; z-index:1; display:flex; flex-direction:column; }
.stage .people, .stage .charts { align-self:stretch; justify-content:space-around; gap:18px; }
.person { display:flex; align-items:center; gap:12px; padding:9px 18px 9px 9px; border-radius:999px; background:var(--card); border:.5px solid var(--line); box-shadow:0 14px 30px -20px rgba(0,0,0,.4); align-self:flex-start;
  opacity:0; transform:translate3d(-18px,0,0) scale(.92); transition:opacity .55s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i) * .22s); }
.person .av { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--tint-grad); color:var(--on-accent); font-weight:700; font-size:18px; flex:none; }
[data-theme="white-light"] .person .av, [data-theme="white-light"] .cq { color:#fff; }
.person .pn b { display:block; font-size:17px; line-height:1.2; }
.person .pn small { display:block; font-size:12.5px; color:var(--muted); }
.ai-demo.s1 .person { opacity:1; transform:none; }

.kc { display:flex; align-items:center; gap:12px; align-self:flex-start; opacity:0; transform:scale(.9); transition:opacity .5s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i) * .25s); }
.kcg { display:block; flex:none; line-height:0; }
.kcg svg { width:86px; height:86px; flex:none; background:var(--card); border-radius:10px; }
.kcg svg path { fill:none; stroke:var(--fg2); stroke-width:1.6; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s var(--ease); transition-delay:calc(var(--i) * .25s + .1s); }
.kcg svg circle { fill:var(--tint); opacity:0; transform:scale(.2); transform-box:fill-box; transform-origin:center; transition:opacity .4s, transform .5s var(--ease); transition-delay:calc(var(--i) * .25s + 1s); }
.kc .facts { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.fact { font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:999px; background:color-mix(in srgb,var(--tint) 14%,var(--card)); color:var(--fg); white-space:nowrap;
  opacity:0; transform:translate3d(0,6px,0); transition:opacity .4s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i) * .25s + .8s); }
.fact + .fact { transition-delay:calc(var(--i) * .25s + 1s); }
.ai-demo.s2 .kc { opacity:1; transform:none; }
.ai-demo.s2 .kcg svg path { stroke-dashoffset:0; }
.ai-demo.s2 .kcg svg circle { opacity:1; transform:none; }
.ai-demo.s2 .fact { opacity:1; transform:none; }

.stage .core { align-items:center; justify-content:center; gap:18px; }
.node { position:relative; width:108px; height:108px; border-radius:50%; background:var(--card); border:2px solid color-mix(in srgb,var(--tint) 70%,var(--line)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  opacity:.35; transform:scale(.86); transition:opacity .5s var(--ease), transform .7s var(--ease); }
.node .site-mark { width:40px; height:40px; }
.node b { font-size:13px; }
.node::after { content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--tint); opacity:0; }
.ai-demo.s3 .node { opacity:1; transform:none; }
.ai-demo.s3 .node::after { animation:ring 2.4s var(--ease) infinite; }
@keyframes ring { 0% { opacity:.7; transform:scale(1); } 100% { opacity:0; transform:scale(1.45); } }
.rules { display:flex; flex-direction:column; gap:8px; align-items:center; }
.rule { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; border:1px solid color-mix(in srgb,var(--tint) 45%,var(--line)); background:var(--card); white-space:nowrap;
  opacity:0; transform:translate3d(0,8px,0) scale(.9); transition:opacity .4s var(--ease), transform .55s var(--ease); transition-delay:calc(var(--i) * .3s + .6s); }
.rule::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--tint); flex:none; }
.ai-demo.s3 .rule { opacity:1; transform:none; }

.stage .chat { gap:14px; }
.cq { align-self:flex-end; max-width:92%; background:var(--tint-grad); color:var(--on-accent); font-weight:600; font-size:16px; line-height:1.4; padding:12px 16px; border-radius:18px 18px 4px 18px;
  opacity:0; transform:translate3d(0,10px,0); transition:opacity .5s var(--ease), transform .6s var(--ease); transition-delay:.7s; }
.ai-demo.s1 .cq { opacity:1; transform:none; }
.ca { background:var(--card); border:.5px solid var(--line); border-radius:18px 18px 18px 4px; padding:14px 18px 16px; box-shadow:0 20px 40px -28px rgba(0,0,0,.4); min-height:206px;
  opacity:0; transform:translate3d(0,10px,0); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.ai-demo.s4 .ca { opacity:1; transform:none; }
.ca-h { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--muted); }
.ca-h .site-mark { width:20px; height:20px; }
.dots { display:inline-flex; gap:4px; margin-left:4px; transition:opacity .3s; }
.dots i { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay:.15s; } .dots i:nth-child(3) { animation-delay:.3s; }
@keyframes dot { 0%,100% { opacity:.3; transform:translateY(0); } 50% { opacity:1; transform:translateY(-3px); } }
.ai-demo.s5 .dots { opacity:0; }
.ln { margin-top:9px; font-size:15.5px; line-height:1.45; opacity:0; transform:translate3d(0,8px,0); transition:opacity .45s var(--ease), transform .55s var(--ease); transition-delay:calc(var(--i) * .5s); }
.ln b { color:var(--fg); }
.ai-demo.s5 .ln { opacity:1; transform:none; }
.src { margin-top:12px; display:flex; gap:8px; align-items:center; opacity:0; transition:opacity .5s var(--ease) 1.6s; }
.ai-demo.s5 .src { opacity:1; }
.chip-s, .lang-s { font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; border:.5px solid var(--line); color:var(--fg2); }
.chip-s { border-color:color-mix(in srgb,var(--tint) 50%,var(--line)); color:var(--fg); }
.replay { margin:16px auto 0; display:flex; align-items:center; gap:8px; border:.5px solid var(--line); background:transparent; color:var(--fg2); font:600 13px var(--font-body); padding:8px 16px; border-radius:999px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .4s; }
.replay svg { width:16px; height:16px; }
.ai-demo.done .replay { opacity:1; pointer-events:auto; }
.ai-note { margin:clamp(24px,4vw,44px) auto 0; max-width:720px; text-align:center; color:var(--muted); font-size:15px; }

@media (max-width:980px) {
  .demo-steps { grid-template-columns:repeat(2,1fr); }
  .stage { grid-template-columns:1fr; min-height:0; gap:30px; padding:24px 18px; }
  .stage .people, .stage .charts { flex-direction:row; justify-content:space-around; gap:8px; }
  .person { flex-direction:column; gap:6px; padding:10px 8px; border-radius:18px; text-align:center; align-self:auto; width:31%; transform:translate3d(0,-14px,0) scale(.92); }
  .kc { flex-direction:column; width:31%; gap:8px; }
  .kcg svg { width:min(76px,20vw); height:min(76px,20vw); }
  .kc .facts { align-items:center; }
  .fact { font-size:11px; padding:4px 8px; white-space:normal; text-align:center; }
  .stage .core { flex-direction:row; justify-content:center; gap:16px; }
  .node { width:88px; height:88px; flex:none; }
  .rules { align-items:flex-start; }
  .rule { white-space:normal; }
  .cq { font-size:15px; }
}
@media (max-width:420px) {
  .demo-steps small { font-size:13px; }
  .demo-steps li { padding:14px 14px 16px; }
}

.kc { flex-wrap:wrap; }
/* The four datasets AshvaAI reads per person; lit only where that person has it. */
.ds { flex-basis:100%; display:flex; gap:5px; }
.dsc { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 7px 3px 5px; border-radius:999px; border:1px dashed var(--line); color:var(--muted); background:var(--card);
  opacity:0; transform:translate3d(0,6px,0); transition:opacity .4s var(--ease), transform .5s var(--ease), background .4s, color .4s; transition-delay:calc(var(--i) * .25s + 1.1s + var(--j) * .1s); }
.dsc svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.dsc:not(.on) { opacity:0; }
.dsc.on { border-style:solid; border-color:color-mix(in srgb,var(--tint) 50%,var(--line)); color:var(--fg); }
.ai-demo.s2 .dsc { opacity:.45; transform:none; }
.ai-demo.s2 .dsc.on { opacity:1; }
.ai-demo.s3 .dsc.on { background:color-mix(in srgb,var(--tint) 16%,var(--card)); animation:dsflow 2.4s var(--ease) calc(var(--j) * .15s) 2; }
@keyframes dsflow { 0%,100% { transform:none; } 40% { transform:translate3d(4px,0,0) scale(1.06); } }
@media (max-width:980px) {
  .kc { flex-wrap:nowrap; }
  .ds { flex-basis:auto; display:grid; grid-template-columns:repeat(2,auto); justify-content:center; gap:3px; }
  .dsc { padding:2px; gap:0; }
  .dsc svg { width:12px; height:12px; }
  .dsl { display:none; }
}

/* ---------- 4. Everything in one app ---------- */
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(300px,auto); gap:14px; grid-auto-flow:dense; }
.feat { position:relative; overflow:hidden; border:.5px solid var(--line); border-radius:var(--radius); background:var(--card); padding:24px 24px 0; display:flex; flex-direction:column; min-height:330px; }
.feat.big { grid-column:span 2; grid-row:span 2; }
.feat.wide { grid-column:span 2; }
.feat .ic { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:var(--tone); background:color-mix(in srgb,var(--tone) 13%,var(--card)); flex:none; }
.feat .ic svg { width:24px; height:24px; }
.feat h3 { margin-top:16px; font-family:var(--font-heading); font-weight:700; font-size:clamp(22px,2vw,28px); line-height:1.12; letter-spacing:-.015em; }
.feat.big h3 { font-size:clamp(28px,3.4vw,44px); }
html[data-indic] .feat h3 { letter-spacing:0; line-height:1.3; }
.feat p { margin-top:8px; color:var(--fg2); font-size:15.5px; line-height:1.45; max-width:420px; }
.feat.big p { font-size:clamp(16px,1.6vw,19px); }
.feat .peek { margin-top:auto; padding-top:22px; display:flex; justify-content:center; }
.feat .peek > div { width:min(72%,230px); aspect-ratio:540/640; overflow:hidden; border:7px solid #0B0B0C; border-bottom:none; border-radius:26px 26px 0 0; background:#fff; transition:transform .6s var(--ease); }
.feat.big .peek > div { width:min(62%,330px); aspect-ratio:540/880; border-width:9px; border-radius:36px 36px 0 0; }
.feat .peek img { width:100%; height:auto; }
.feat:hover .peek > div { transform:translateY(-8px); }
.feat .small { margin-top:6px; font-size:12px; color:var(--muted); }
.loshu { margin:auto auto 24px; padding-top:20px; display:grid; grid-template-columns:repeat(3,58px); gap:8px; }
.loshu span { height:58px; border-radius:14px; display:grid; place-items:center; font-family:var(--font-heading); font-weight:700; font-size:24px; border:.5px solid var(--line); color:var(--muted); }
.loshu span.h { color:var(--tone); border-color:color-mix(in srgb,var(--tone) 45%,var(--line)); background:color-mix(in srgb,var(--tone) 10%,var(--card)); }
.feat.wide .loshu-wrap { display:flex; gap:28px; align-items:flex-end; margin-top:auto; }
@media (max-width:1000px) {
  .bento { grid-template-columns:repeat(2,1fr); }
  .feat.big { grid-column:span 2; grid-row:auto; }
}
@media (max-width:600px) {
  .bento { grid-template-columns:1fr; grid-auto-rows:auto; }
  .feat.big, .feat.wide { grid-column:auto; }
  .feat { min-height:0; }
  .feat .peek > div { width:min(66%,220px); }
}

/* ---------- 5. Reviews (hidden until reviews.json holds three) ---------- */
.reviews[hidden] { display:none; }
.rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.rev { border:.5px solid var(--line); border-radius:12px; padding:26px; background:var(--card); display:flex; flex-direction:column; gap:14px; }
.rev .stars { color:var(--tint); letter-spacing:2px; font-size:16px; }
.rev blockquote { font-size:17px; line-height:1.5; }
.rev .who { margin-top:auto; font-weight:700; font-size:14px; }
.rev .who small { display:block; font-weight:500; color:var(--muted); }
@media (max-width:860px) { .rev-grid { grid-template-columns:1fr; } }

/* ---------- 6. Download ---------- */
.dl { position:relative; overflow:hidden; }
.dl-cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,330px)); justify-content:center; gap:16px; }
.dl-card { border:.5px solid var(--line); border-radius:var(--radius); background:var(--card); padding:28px 26px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; box-shadow:0 30px 60px -40px rgba(0,0,0,.35); }
.dl-card .plat { display:flex; align-items:center; gap:10px; font-weight:700; font-size:22px; }
.dl-card .plat svg { width:26px; height:26px; }
.dl-card .sub { font-size:14px; color:var(--muted); }
.dl-card .qr { margin:8px 0 6px; width:176px; height:176px; padding:10px; border-radius:18px; background:#fff; border:.5px solid var(--line); }
.dl-card .qr img { width:100%; height:100%; image-rendering:pixelated; }
.dl-card .scan { font-size:13px; color:var(--muted); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 22px; border-radius:14px; background:var(--btn-bg); color:var(--btn-fg); font-weight:700; font-size:15px; text-decoration:none; margin-top:6px; width:100%; transition:transform .2s var(--ease); }
.btn:hover { transform:translateY(-2px); }
.dl-note { margin-top:26px; text-align:center; font-size:14px; color:var(--muted); position:relative; z-index:2; }
.disclaimer { margin:14px auto 0; max-width:720px; text-align:center; font-size:12px; color:var(--muted); position:relative; z-index:2; }
.stats { display:flex; justify-content:center; gap:28px; margin-top:22px; position:relative; z-index:2; }
.stats .n { font-family:var(--font-heading); font-weight:700; font-size:26px; text-align:center; }
.stats .l { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.side-phone { position:absolute; z-index:1; top:50%; width:230px; padding:8px; border-radius:38px; background:#0B0B0C; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); display:none; }
.side-phone > div { aspect-ratio:540/1110; border-radius:31px; overflow:hidden; background:#fff; }
.side-phone img { width:100%; height:100%; object-fit:cover; object-position:top; }
.side-phone.l { left:max(2vw, calc(50% - 640px)); transform:translateY(-44%) rotate(-9deg); }
.side-phone.r { right:max(2vw, calc(50% - 640px)); transform:translateY(-40%) rotate(9deg); }
@media (min-width:1180px) { .side-phone { display:block; } }
@media (max-width:700px) {
  .dl-cards { grid-template-columns:minmax(0,360px); }
  .dl-card .qr { width:150px; height:150px; }
}

/* ---------- Reveal on scroll ---------- */
html.js [data-reveal] { opacity:0; transform:translate3d(0,34px,0); transition:opacity .9s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s); }
html.js [data-reveal].in { opacity:1; transform:none; }

/* ---------- 7. Footer (copied from the previous home page) ---------- */
footer { border-top:.5px solid var(--line); }
.jyotish-invite { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:48px; align-items:center; margin:0 var(--gutter); padding:58px 30px; color:var(--fg); text-decoration:none; border-bottom:.5px solid var(--line); border-radius:8px; }
.jyotish-invite-kicker { font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--fg2); margin:0 0 18px; }
.jyotish-invite h2 { display:flex; flex-wrap:wrap; align-items:center; gap:22px; font-family:var(--font-heading); font-size:clamp(34px,4.5vw,68px); line-height:1.3; letter-spacing:-.035em; font-weight:600; margin:0; }
.jyotish-invite-arrow { display:inline-block; color:var(--tint); font:400 .7em/1 var(--font-body); transition:transform .25s ease; }
.jyotish-invite-description { max-width:510px; margin:20px 0 0; color:var(--fg2); font-size:17px; line-height:1.7; }
.jyotish-invite-action { display:inline-flex; align-items:center; gap:22px; margin-top:25px; font-size:13px; border-bottom:1px solid var(--fg2); padding-bottom:5px; }
.jyotish-invite-art { display:block; width:100%; height:auto; color:var(--tint); }
.jyotish-invite:focus-visible { outline:2px solid var(--tint); outline-offset:-2px; }
html[data-indic] .jyotish-invite h2 { font-family:'Noto Serif Devanagari',var(--font-heading); line-height:1.5; }
html[data-indic] .jyotish-invite-kicker { letter-spacing:.04em; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .jyotish-invite:hover .jyotish-invite-arrow { transform:translate(4px,-4px); }
}
@media(max-width:768px) {
  .jyotish-invite { grid-template-columns:minmax(0,1fr) 150px; gap:18px; padding:40px 10px; }
  .jyotish-invite h2 { gap:12px; }
  .jyotish-invite-description { font-size:15px; }
}
@media(max-width:520px) {
  .jyotish-invite { display:flex; flex-direction:column-reverse; align-items:flex-start; gap:25px; padding:35px 4px 42px; }
  .jyotish-invite-art { width:158px; align-self:center; }
  .jyotish-invite h2 { font-size:clamp(30px,8vw,41px); gap:10px; }
  .jyotish-invite-kicker { font-size:10px; }
}
.foot-simple { display:grid; grid-template-columns:repeat(5,1fr); max-width:var(--maxw); margin:0 auto; }
.foot-simple > * { padding:12px 30px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; text-decoration:none; }
.foot-simple > *:not(:last-child) { border-right:1px solid var(--line); }
.foot-simple a:hover { color:var(--tint); }
.foot-big { display:none; }
.foot-top { display:flex; flex-direction:column; gap:22px; padding:26px 22px; }
.fb-row { display:flex; align-items:flex-start; gap:9px; }
.fb-row .site-mark { width:26px; height:26px; }
.fb-name { font-family:'Noto Serif',serif; font-size:20px; font-weight:700; color:var(--fg); line-height:1; }
.fb-tag { margin-top:9px; font-size:14px; color:var(--fg2); }
.fb-sub { margin-top:3px; font-size:12.5px; color:var(--muted); }
.foot-cols { display:flex; gap:40px; flex-wrap:wrap; }
.fcol { display:flex; flex-direction:column; gap:9px; }
.fcol b { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:2px; }
.fcol a { font-size:14px; color:var(--fg2); text-decoration:none; }
.fcol a:hover { color:var(--tint); }
.fc-addr { font-size:12.5px; color:var(--muted); }
.foot-word { padding:clamp(26px,5vw,64px) clamp(16px,4vw,40px) clamp(10px,2vw,18px); max-width:var(--maxw); margin:0 auto; }
.foot-word svg { display:block; width:100%; height:auto; overflow:visible; }
.foot-word text { font-family:'Noto Serif',Georgia,serif; font-weight:700; fill:var(--fg); letter-spacing:-.012em; }
[data-theme="white-light"] .foot-word text { fill:var(--tint); }
.foot-word .fw-sub { text-align:center; margin-top:clamp(6px,1.2vw,14px); font-size:clamp(10px,1.05vw,13px); letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }
html[data-indic] .foot-word .fw-sub { letter-spacing:.06em; }
.foot-legal { border-top:.5px solid var(--line); padding:15px clamp(16px,4vw,30px); display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; text-align:center; font-size:11.5px; color:var(--muted); }
.foot-legal a { color:inherit; text-decoration:none; }
footer { max-width:var(--maxw); margin:0 auto; }
/* Order: the big ASTROASHVA, the legal line, then the links at the very
   bottom (the grid on wide screens, the columns on phones). */
.foot-simple, .foot-big { border-top:.5px solid var(--line); }
.foot-word text { letter-spacing:.01em; }
@media (max-width:900px) {
  .foot-simple { display:none; }
  .foot-big { display:block; }
}

/* ---------- Tablet and phone ---------- */
@media (max-width:1000px) {
  .steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .vs { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .play-badge img, .store-badge { height:50px; }
  .store-badge { min-width:160px; }
  .store-badge b { font-size:17px; }
}

@media (max-width:400px) {
  .store-row { gap:8px; padding:0 12px; }
  .play-badge img, .store-badge { height:46px; }
  .store-badge { min-width:0; padding:0 12px; gap:8px; }
  .store-badge .ico { width:22px; height:22px; }
  .store-badge b { font-size:16px; }
}

/* ---------- Reduced motion: no pinning, no drifting, everything visible ---------- */
@media (prefers-reduced-motion:reduce) {
  html.js [data-reveal] { opacity:1; transform:none; transition:none; }
  .story { height:auto; padding:60px 0; }
  .story-pin { position:relative; height:auto; overflow:visible; }
  .story-pin > .duo, .story-bar, .mantra { display:none; }
  .story-static { display:grid; grid-template-columns:repeat(3,minmax(0,300px)); justify-content:center; gap:28px 20px; padding:0 var(--gutter); width:100%; }
  .story-static figure { text-align:center; }
  .story-static .pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
  .story-static img { border-radius:18px; border:5px solid #0B0B0C; aspect-ratio:540/1110; object-fit:cover; object-position:top; width:100%; height:auto; }
  .story-static img[data-dev="ios"] { border-radius:24px; aspect-ratio:1206/2622; }
  .story-static figcaption { margin-top:10px; font-weight:700; }
  .ai-demo *, .ai-demo *::before, .ai-demo *::after { transition:none !important; animation:none !important; }
  .cap, .feat .peek > div, .btn, .play-badge, .store-badge { transition:none; }
  body { transition:none; }
}
@media (prefers-reduced-motion:reduce) and (max-width:760px) {
  .story-static { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
}

/* TestFlight companion badge follows the Play badge's proportions. */
.store-badge[data-store="ios"] {
  width:188px; min-width:0; height:56px; box-sizing:border-box;
  padding:0 12px; gap:10px; border:1px solid #a6a6a6;
  border-radius:7px; justify-content:center; text-align:left;
}
.store-badge[data-store="ios"] .ico { width:32px; height:38px; }
.store-badge[data-store="ios"] small { font-size:10px; letter-spacing:.025em; opacity:1; line-height:1.25; }
.store-badge[data-store="ios"] b { font-size:23px; font-weight:500; letter-spacing:-.035em; line-height:1.12; }
@media(max-width:640px) {
  .store-badge[data-store="ios"] { width:168px; height:50px; padding:0 10px; gap:8px; }
  .store-badge[data-store="ios"] b { font-size:21px; }
}
@media(max-width:400px) {
  .store-badge[data-store="ios"] { width:154px; height:46px; }
  .store-badge[data-store="ios"] .ico { width:28px; height:34px; }
  .store-badge[data-store="ios"] b { font-size:19px; }
  .store-badge[data-store="ios"] small { font-size:9px; }
}

@media(max-width:380px) { .hc .store-badge[data-store="ios"] { width:168px; height:50px; } }

[data-theme="yellow-light"] .says { background:var(--soft); color:var(--fg); border:1px solid var(--accent-soft); }
[data-theme="yellow-light"] .says .eyebrow { color:var(--muted); }

/* Long words in the other languages (Tamil, Malayalam...) wrap inside a
   heading rather than push the page sideways on a phone. */
html[data-tr] .h2, html[data-tr] h2, html[data-tr] h3 { overflow-wrap:break-word; }
@media (max-width:480px) {
  html[data-lang="ta"] .h2, html[data-lang="ml"] .h2, html[data-lang="te"] .h2, html[data-lang="kn"] .h2 { font-size:30px; }
}

/* Questions (#faq): a hairline list of native disclosures, like the engine
   review. Answers are in the HTML for every visitor and crawler; the FAQPage
   JSON-LD in <head> mirrors the English text. */
.faq { padding-top:0; }
.faq-list { max-width:820px; margin:0 auto; border-top:.5px solid var(--line); }
.faq-item { border-bottom:.5px solid var(--line); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 2px; min-height:44px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:""; flex:none; width:9px; height:9px; margin-right:4px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:translateY(-3px) rotate(45deg); transition:transform .3s var(--ease); }
.faq-item[open] summary::after { transform:translateY(2px) rotate(-135deg); }
.faq-item summary:focus-visible { outline:2px solid var(--tint); outline-offset:2px; border-radius:6px; }
.faq-item h3 { font-size:clamp(16px,1.6vw,18px); font-weight:600; line-height:1.4; color:var(--fg); }
.faq-item p { padding:0 2px 22px; max-width:720px; font-size:15px; line-height:1.7; color:var(--fg2); }
.faq-more { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin-top:28px; font-size:14px; }
.faq-more a { color:var(--fg); text-underline-offset:3px; padding-block:6px; }
@media (prefers-reduced-motion:reduce) { .faq-item summary::after { transition:none; } }