/* bharatbhagatfs.com: one stylesheet, self-hosted fonts, no external requests.
   Colours and fonts are the BharatBhagat app's "Mitti" theme
   (../BharatBhagat apps/android/core/.../theme/Color.kt and Type.kt). Values are locked there;
   change them in the app first, then here. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url(/fonts/schibsted-grotesk-wght.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(/fonts/source-serif-4-semibold.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --kagaz: #F2EDE2;       /* ground (LightBackground) */
  --paper: #FBF8F0;       /* card fill (LightSurfaceVariant) */
  --ink: #241C13;         /* text (LightOnBackground) */
  --ink2: #6C5D4B;        /* secondary text (LightOnSurfaceVariant) */
  --line: #D8CBB6;        /* hairlines (LightOutline) */
  --clay: #BC5738;        /* mitti terracotta (LightPrimary) */
  --on-clay: #FFF7EE;     /* text on clay (LightOnPrimary) */
  --clay-tint: #F3E0D3;   /* (LightPrimaryContainer) */
  --link: #A2472C;        /* link text, 5.18:1 on kagaz (LightLinkText) */
  --note-bg: #FBF3E2;     /* haldi advice ground (AdviceSurfaceLight) */
  --note-line: #D5A868;   /* haldi border (AdviceBorderLight) */
  --glow: #E58A52;        /* diya halo */
  --flame: #FFC37E;       /* diya core */
  --serif: "Source Serif 4", Georgia, serif;
  color-scheme: light;  /* light only, by owner decision 14 Oct 2026 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kagaz);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
a:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 2px; }
.serif { font-family: var(--serif); font-weight: 600; }

/* The भ mark: terracotta disc, cream letter (the app icon). */
.mark { display: block; }
.mark circle { fill: var(--clay); }
.mark path { fill: var(--on-clay); }

/* ---------- Home page ---------- */
.landing {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 16px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.landing h1 {
  margin: 0;
  font-size: clamp(2rem, 9vw, 2.5rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.landing h1 .serif { display: block; color: var(--clay); letter-spacing: 0; }
.landing footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  font-size: 0.85rem;
  color: var(--ink2);
}
.landing footer a { color: var(--ink2); }

/* The diya: the भ mark in a pulsing warm glow. Pulse values are the app's SplashLoader.kt:
   1600 ms each way, FastOutSlowIn easing, size 86%→112%, brightness 45%→90%. */
.diya {
  --d: min(108vw, 420px);
  position: relative;
  width: var(--d);
  height: var(--d);
  display: grid;
  place-items: center;
  flex: none;
  margin-bottom: -92px;
}
.diya::before, .diya::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.diya::before {
  inset: 0;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--glow) 100%, transparent) 0%,
    color-mix(in srgb, var(--glow) 82%, transparent) 20%,
    color-mix(in srgb, var(--glow) 52%, transparent) 36%,
    color-mix(in srgb, var(--glow) 22%, transparent) 52%,
    color-mix(in srgb, var(--glow) 7%, transparent) 63%,
    transparent 71%);
  animation: breathe 1.6s cubic-bezier(.4, 0, .2, 1) infinite alternate;
}
.diya::after {
  inset: 16%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--flame) 95%, transparent) 0%,
    color-mix(in srgb, var(--flame) 45%, transparent) 45%,
    transparent 72%);
  animation: flicker 1.6s cubic-bezier(.4, 0, .2, 1) infinite alternate;
}
@keyframes breathe { from { scale: .86; opacity: .45; } to { scale: 1.12; opacity: .9; } }
@keyframes flicker { from { scale: .9; opacity: .35; } to { scale: 1.08; opacity: 1; } }
.diya .mark {
  position: relative;
  z-index: 1;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--flame) 35%, transparent),
              0 0 70px 26px color-mix(in srgb, var(--flame) 55%, transparent);
}

/* "Page not found": the home page's chat, plus a way back home. The h1 holds the two messages;
   the button sits under them and is always visible (it is the way out, so it never animates). */
.chat-lines { margin: 0; display: grid; justify-items: start; gap: 10px; font-size: inherit; letter-spacing: 0; }
.chip {
  display: inline-block;
  margin-top: 4px;
  background: var(--paper);
  border: 1.5px solid var(--clay);
  color: var(--link);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.chip:hover { background: var(--clay-tint); }

/* The CFO's two chat messages, looping every 10 s: typing → "Launching Soon." → typing →
   "BharatBhagat." → hold → fade → again. Each element's base style is its FINAL state, so with
   reduced motion (all animation off) visitors simply see both messages and no typing dots. */
.chat {
  position: relative;
  z-index: 2;
  margin: 0;
  display: grid;
  justify-items: start;
  gap: 10px;
  min-width: 250px;
  font-weight: inherit;
}
.slot { display: grid; justify-items: start; }
.slot > * { grid-area: 1 / 1; }
.bubble {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px 22px 22px 22px;
  padding: 14px 20px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
  box-shadow: 0 10px 28px -20px rgba(60, 30, 10, .45);
}
.bubble.brand { color: var(--clay); }
.typing {
  display: flex;
  gap: 6px;
  align-self: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 16px;
  opacity: 0;
  visibility: hidden;
}
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); animation: dot 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }

.t1 { animation: t1 10s linear infinite; }
.m1 { animation: m1 10s cubic-bezier(.4, 0, .2, 1) infinite; }
.t2 { animation: t2 10s linear infinite; }
.m2 { animation: m2 10s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes t1 { 0%, 17% { opacity: 1; visibility: visible; } 19%, 100% { opacity: 0; visibility: hidden; } }
@keyframes m1 { 0%, 18% { opacity: 0; transform: translateY(10px); } 22%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes t2 { 0%, 23% { opacity: 0; visibility: hidden; } 24%, 41% { opacity: 1; visibility: visible; } 43%, 100% { opacity: 0; visibility: hidden; } }
@keyframes m2 { 0%, 42% { opacity: 0; transform: translateY(10px); } 46%, 92% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* ---------- Long-form pages (privacy policy) ---------- */
.doc {
  max-width: 44rem;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.doc header { border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; padding-bottom: 1rem; }
.doc .home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.doc .home .mark { width: 32px; height: 32px; }
.doc .home span { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.doc h1 { font-size: 1.85rem; line-height: 1.2; margin: 1rem 0 0.25rem; letter-spacing: -0.01em; }
.doc h2 { font-size: 1.3rem; line-height: 1.3; margin: 2.25rem 0 0.5rem; }
.doc h3 { font-size: 1.05rem; margin: 1.25rem 0 0.25rem; }
.doc .meta { color: var(--ink2); font-size: 0.9rem; margin: 0; }
.doc ul { padding-left: 1.25rem; }
.doc li { margin: 0.3rem 0; }
.doc .table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); }
.doc tr:last-child td { border-bottom: 0; }
.doc th { color: var(--ink2); font-weight: 600; font-size: 0.85rem; }
.doc .note { background: var(--note-bg); border: 1.5px dashed var(--note-line); border-radius: 12px; padding: 0.75rem 1rem; margin: 1rem 0; }
.doc footer { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1rem; color: var(--ink2); font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* As the app's SplashLoader does: no pulse, the glow held at a calm mid-level. */
  .diya::before { opacity: .68; }
  .diya::after { opacity: .68; }
}

/* Privacy policy: contents list, definitions, numbered clauses */
.doc .toc { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 0.5rem 1.25rem 0.75rem; margin: 0 0 1rem; }
.doc .toc h2 { font-size: 1rem; margin: 0.75rem 0 0.25rem; color: var(--ink2); }
.doc .toc ol { margin: 0; padding-left: 1.5rem; }
.doc .toc li { margin: 0.2rem 0; }
.doc h2[id] { scroll-margin-top: 1rem; }
.doc .defs dt { font-weight: 600; margin-top: 0.9rem; color: var(--link); }
.doc .defs dd { margin: 0.15rem 0 0; }
.doc .defs dd p { margin: 0.4rem 0; }
.doc ol.clauses { padding-left: 1.5rem; }
.doc ol.clauses li { margin: 0.6rem 0; }

/* On phones, each table row becomes a small card: the first column is its title and every other
   cell carries its column heading as a label, so nothing hides off the right edge. */
@media (max-width: 560px) {
  .doc .table-wrap { overflow: visible; background: none; border: 0; border-radius: 0; }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; width: 100%; }
  .doc tr:first-child { display: none; }
  .doc tr { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; margin: 0 0 10px; padding: 4px 0; }
  .doc td { border: 0; padding: 0.35rem 0.85rem; }
  .doc td:first-child { font-weight: 600; }
  .doc td + td::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink2); }
}