/* =========================================================================
   सारथि Sarathi · meetsarathi.com
   One stylesheet. No build step.
   Owner rule (17 Oct 2026): the red bindi (kanku flame) stays on every logo, at every size.
   Brand rules: Kanku is kept for the bindi. Cocoa is the text colour
   on cream. Kesar is a fill and stroke colour here (it is below AA as text on
   cream). No shadows or gradients on the mark. Motion is gentle (>= 400ms,
   ease-in-out); only the flame moves continuously; reduced motion is honoured.
   ========================================================================= */

:root {
  /* Brand palette */
  --kesar: #E18601;
  --cocoa: #2A1F14;
  --kanku: #D01F3F;
  --cream: #FBF6EE;
  --sand: #EDDCC2;
  --deep-sand: #D9C2A0;
  --muted: #6B5A45;

  /* Derived surfaces (tints of the palette) */
  --card: #FFFDF9;
  --card-glass: rgba(255, 253, 249, 0.72);
  --card-edge: rgba(255, 255, 255, 0.85);
  --line: rgba(42, 31, 20, 0.12);
  --line-strong: rgba(42, 31, 20, 0.22);
  --sand-glass: rgba(237, 220, 194, 0.55);

  /* Morning wash (page background only, never on the mark) */
  --wash-peach: rgba(255, 216, 170, 0.74);
  --wash-gold: rgba(244, 204, 120, 0.50);
  --wash-coral: rgba(242, 166, 134, 0.36);
  --wash-rose: rgba(236, 174, 174, 0.34);

  /* Type */
  --serif: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --deva: "Noto Serif Devanagari", "Noto Serif", serif;
  --guj: "Noto Serif Gujarati", "Noto Serif", serif;

  --fs-xs: 0.875rem;     /* 14 */
  --fs-sm: 0.9375rem;    /* 15 */
  --fs-body: 1.0625rem;  /* 17 */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h3: clamp(1.375rem, 1.3rem + 0.3vw, 1.5625rem);
  --fs-h2: clamp(2.125rem, 1.55rem + 2.2vw, 3.25rem);
  --fs-h1: clamp(2.75rem, 1.35rem + 5.2vw, 5.375rem);

  /* Space and shape */
  --gutter: clamp(16px, 4.5vw, 48px);
  --max: 1180px;
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --r-card: 26px;
  --r-sm: 14px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --dur: 480ms;
}

/* ---------- Base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .22 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--cocoa);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

/* Morning light from above: two soft washes on the body that slowly
   cross-fade (the drift) and fade toward cream down the page. The film grain
   sits on the page canvas (html background). Nothing extends past the body,
   so there is never extra scroll. */
body::before,
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(clamp(1200px, 110vh + 30vmax, 1900px), 100%);
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 42%, transparent 92%);
}
body::before {
  background:
    radial-gradient(40vmax 30vmax at 26% 10%, var(--wash-gold), transparent 70%),
    radial-gradient(42vmax 32vmax at 80% 14%, var(--wash-peach), transparent 70%),
    radial-gradient(38vmax 30vmax at 10% 46%, var(--wash-rose), transparent 70%),
    radial-gradient(38vmax 30vmax at 92% 52%, var(--wash-coral), transparent 70%);
}
body::after {
  background:
    radial-gradient(44vmax 34vmax at 8% 12%, var(--wash-peach), transparent 70%),
    radial-gradient(40vmax 30vmax at 94% 16%, var(--wash-gold), transparent 70%),
    radial-gradient(36vmax 30vmax at 16% 54%, var(--wash-coral), transparent 70%),
    radial-gradient(40vmax 30vmax at 88% 60%, var(--wash-rose), transparent 70%),
    radial-gradient(56vmax 36vmax at 50% 34%, rgba(255, 253, 249, 0.5), transparent 75%);
  animation: wash-drift 36s var(--ease) infinite alternate;
}
@keyframes wash-drift {
  from { opacity: 1; }
  to   { opacity: 0.25; }
}

img, svg { display: block; max-width: 100%; height: auto; }
svg { overflow: visible; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--kesar);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a:hover { text-decoration-color: var(--cocoa); }

:focus-visible {
  outline: 3px solid var(--cocoa);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--sand); color: var(--cocoa); }

/* Devanagari and Gujarati: Noto Serif, never italic */
.deva, :lang(hi) { font-family: var(--deva); font-style: normal; }
.guj, :lang(gu) { font-family: var(--guj); font-style: normal; }
.deva { font-weight: 600; font-size: 1.04em; }
span.deva, span:lang(hi), span:lang(gu) { line-height: 1; }
h1 .deva, h2 .deva, h3 .deva, summary .deva { font-size: 0.82em; font-weight: 500; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -120px;
  z-index: 100;
  padding: 12px 18px;
  min-height: 44px;
  background: var(--cocoa);
  color: var(--cream);
  font-weight: 500;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.skip-link:focus { top: 12px; outline-color: var(--kesar); }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

/* ---------- Header and navigation ---------------------------------------- */

.site-header {
  position: relative;
  z-index: 20;
  padding-block: 18px;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 4px;
  text-decoration: none;
  border-radius: 8px;
}
.brand img { height: 44px; width: auto; }

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.site-nav a:hover { background: rgba(255, 253, 249, 0.85); }
.site-nav a[aria-current="page"] { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }

.menu-btn {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--card-glass);
  color: var(--cocoa);
  font: 500 var(--fs-sm)/1 var(--sans);
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.menu-btn .bars { position: relative; width: 16px; height: 10px; }
.menu-btn .bars::before,
.menu-btn .bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.menu-btn .bars::before { top: 1px; }
.menu-btn .bars::after { top: 7.5px; }
.menu-open .menu-btn .bars::before { top: 4.25px; transform: rotate(45deg); }
.menu-open .menu-btn .bars::after { top: 4.25px; transform: rotate(-45deg); }

@media (min-width: 900px) {
  .site-nav ul {
    padding: 5px;
    background: var(--card-glass);
    border: 1px solid var(--card-edge);
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: var(--r-pill);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

@media (max-width: 899.98px) {
  .js .menu-btn { display: inline-flex; }
  .js .site-nav {
    position: absolute;
    top: calc(100% - 4px);
    left: var(--gutter);
    right: var(--gutter);
    padding: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 24px 48px -28px rgba(80, 50, 20, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .js.menu-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
  }
  .js .site-nav ul { flex-direction: column; gap: 2px; }
  .js .site-nav a {
    display: flex;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: var(--fs-body);
  }
  .no-js .header-inner { flex-wrap: wrap; }
}

/* ---------- Shared section rhythm --------------------------------------- */

.section { padding-top: var(--section); }
.section-head { max-width: 40rem; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { margin-top: 1.1rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--cocoa); }
.section-head.center { margin-inline: auto; text-align: center; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  background: var(--kesar);
  color: var(--cocoa);
  font-weight: 700;
  font-size: var(--fs-body);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.pill-link:hover { background: #EC9A24; }
.pill-link svg { width: 14px; height: 14px; }

/* ---------- Hero ---------------------------------------------------------- */

.hero {
  padding-top: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  padding-bottom: clamp(1rem, 2vw, 2rem);
  text-align: center;
}
.hero-title {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 14ch;
  margin-inline: auto;
}
@media (min-width: 1100px) { .hero-title { max-width: none; } }
.hero-line {
  margin: 1.1rem auto 0;
  max-width: 30ch;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  line-height: 1.3;
  color: var(--muted);
}
.hero-pitch {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.stores {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 2rem;
}
.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 18px 8px 14px;
  border-radius: 16px;
  background: var(--card-glass);
  border: 1px solid var(--line-strong);
  text-align: left;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.store svg { width: 24px; height: 24px; flex: none; }
@media (min-width: 560px) { .store { min-width: 196px; padding: 8px 20px 8px 16px; } }
.store-text { display: flex; flex-direction: column; line-height: 1.15; }
.store-soon { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.store-name { font-size: 1.1875rem; font-weight: 700; letter-spacing: 0.005em; }
.stores-note { margin-top: 0.9rem; font-size: var(--fs-sm); color: var(--muted); }

/* Stage: a temple window of morning light, framing the phone */
.hero-stage {
  position: relative;
  margin: clamp(2.5rem, 2rem + 3vw, 4.5rem) auto 0;
  width: min(100%, 600px);
  display: grid;
  place-items: center;
  padding-top: clamp(28px, 4vw, 56px);
}
.arch {
  position: absolute;
  inset: 0 0 clamp(-24px, -2vw, -12px);
  border-radius: 999px 999px 36px 36px;
  background:
    linear-gradient(180deg, rgba(255, 236, 205, 0.95) 0%, rgba(255, 246, 232, 0.75) 38%, rgba(251, 246, 238, 0.35) 100%);
  border: 1px solid rgba(217, 194, 160, 0.7);
  box-shadow: inset 0 0 0 10px rgba(255, 253, 249, 0.35);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
}
.arch::before {
  /* inner line of the window */
  content: "";
  position: absolute;
  inset: 16px 16px 0;
  border-radius: 999px 999px 24px 24px;
  border: 1px solid rgba(217, 194, 160, 0.45);
  border-bottom: 0;
}

/* ---------- Phone mock (HTML-drawn, illustrative) ------------------------ */

.phone {
  position: relative;
  margin: 0;
  width: min(84vw, 304px);
  aspect-ratio: 304 / 628;
  padding: 10px;
  border-radius: 48px;
  background: var(--cocoa);
  box-shadow:
    0 0 0 1px rgba(42, 31, 20, 0.9),
    0 50px 80px -40px rgba(110, 66, 20, 0.55),
    0 18px 36px -24px rgba(110, 66, 20, 0.35);
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
}
.phone::before {
  /* side button */
  content: "";
  position: absolute;
  right: -3px; top: 120px;
  width: 3px; height: 64px;
  border-radius: 0 3px 3px 0;
  background: #3a2c1f;
}
.ps {
  position: relative;
  height: 100%;
  border-radius: 38px;
  background: var(--cream);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 0;
}
.ps-island {
  position: absolute;
  top: 10px; left: 50%;
  width: 86px; height: 24px;
  transform: translateX(-50%);
  background: var(--cocoa);
  border-radius: 20px;
}
.ps-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  font-weight: 700;
  font-size: 12px;
}
.ps-icons { display: flex; gap: 5px; align-items: center; }
.ps-icons i { display: block; background: var(--cocoa); border-radius: 1px; }
.ps-icons .sig { width: 14px; height: 9px; background: none; display: flex; gap: 1.5px; align-items: flex-end; }
.ps-icons .sig b { display: block; width: 2.5px; background: var(--cocoa); border-radius: 1px; }
.ps-icons .bat { width: 20px; height: 10px; border-radius: 3px; background: none; box-shadow: inset 0 0 0 1px var(--cocoa); padding: 1.5px; }
.ps-icons .bat::before { content: ""; display: block; height: 100%; width: 70%; background: var(--cocoa); border-radius: 1.5px; }

.ps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.ps-head img { height: 24px; width: auto; }
.ps-date { font-size: 12px; color: var(--muted); font-weight: 500; }
.ps-greet {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.1;
}
.ps-ringrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--sand);
  border-radius: 20px;
}
.ps-ring { width: 76px; height: 76px; flex: none; }
.ps-ringtext strong { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.1; }
.ps-ringtext span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

.ps-card {
  margin-top: 10px;
  padding: 14px 15px 14px;
  background: var(--card);
  border: 1px solid var(--sand);
  border-radius: 20px;
}
.ps-label { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.ps-quote {
  margin-top: 6px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.22;
}
.ps-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--sand);
  font-size: 11.5px;
  font-weight: 500;
}
.ps-journal { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ps-journal strong { display: block; font-family: var(--serif); font-size: 17px; line-height: 1.1; }
.ps-journal span { font-size: 11.5px; color: var(--muted); }
.ps-btn {
  flex: none;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--kesar);
  color: var(--cocoa);
  font-weight: 700;
  font-size: 12px;
}
.ps-next {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(237, 220, 194, 0.55);
  font-size: 12px;
}
.ps-next svg { width: 16px; height: 16px; flex: none; }
.ps-next strong { font-weight: 700; }
.ps-tabs {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  padding: 10px 6px 18px;
  border-top: 1px solid var(--sand);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
}
.ps-tabs span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ps-tabs span::before {
  content: "";
  width: 18px; height: 18px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px currentColor;
  opacity: 0.6;
}
.ps-tabs .on { color: var(--cocoa); }
.ps-tabs .on::before { background: var(--kesar); box-shadow: none; opacity: 1; }

/* The flame: the only Kanku in view, and the only thing that moves */
.flame-kindle { animation: kindle 900ms var(--ease) 500ms both; }
.flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway 800ms var(--ease) 1400ms infinite alternate both;
}
@keyframes kindle { from { opacity: 0; } to { opacity: 1; } }
@keyframes sway {
  from { transform: rotate(-2.5deg); }
  to   { transform: rotate(2.5deg); }
}
.hero-title, .hero-line { animation: rise 900ms var(--ease) both; }
.hero-line { animation-delay: 120ms; }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }

/* ---------- About -------------------------------------------------------- */

.about-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.about-copy h2 { font-size: var(--fs-h2); }
.about-copy .lead {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  line-height: 1.3;
}
.about-copy p + p { margin-top: 1.1rem; }
.about-copy .lead + p { margin-top: 1.6rem; }
.about-copy p:not(.lead) { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.65; }

.mark-card {
  margin: 0;
  padding: clamp(28px, 4vw, 44px);
  background: var(--card-glass);
  border: 1px solid var(--card-edge);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 32px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.mark-card img { width: clamp(120px, 26vw, 168px); margin-inline: auto; }
.mark-card ul { list-style: none; margin-top: 28px; display: grid; gap: 16px; }
.mark-card li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start; }
.mark-card li::before {
  content: "";
  width: 14px; height: 14px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--cocoa);
}
.mark-card li.becoming::before { background: var(--kesar); }
.mark-card li.between::before { background: none; box-shadow: inset 0 0 0 1.5px var(--deep-sand); }

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.25fr 0.85fr; }
}

/* ---------- Features (bento of frosted cards) ---------------------------- */

.features-grid {
  list-style: none;
  display: grid;
  gap: 16px;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--card-glass);
  border: 1px solid var(--card-edge);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.feature h3 { font-size: var(--fs-h3); }
.feature h3 + p { margin-top: 0.6rem; line-height: 1.6; }
.feature .demo { margin-top: auto; padding-top: 22px; }
.feature--soft { background: var(--sand-glass); }

/* small illustrations inside cards */
.demo-quote {
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--sand);
}
.demo-quote q {
  quotes: none;
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
}
.demo-quote small { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }

.dayline { position: relative; height: 34px; margin-top: 4px; }
.dayline-track {
  position: absolute;
  left: 0; right: 0; top: 10px;
  height: 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--deep-sand) 0 29.17%, var(--card) 29.17% 91.67%, var(--deep-sand) 91.67% 100%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dayline-dot {
  position: absolute;
  top: 13px;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--kesar);
}
.dayline-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.demo-question {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--sand);
}
.demo-question p { font-family: var(--serif); font-weight: 600; font-size: 1.1875rem; line-height: 1.25; }
.demo-question small { display: block; margin-top: 4px; font-family: var(--sans); font-weight: 400; font-size: var(--fs-sm); color: var(--muted); }
.demo-question svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--sand);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.chips li.more { background: var(--sand); border-color: var(--sand); }
.chips-caption { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }

.bubble {
  max-width: 92%;
  margin-left: auto;
  padding: 12px 16px;
  border-radius: 18px 18px 6px 18px;
  background: var(--sand);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.bubble.reply {
  margin-left: 0;
  margin-top: 8px;
  border-radius: 18px 18px 18px 6px;
  background: var(--card);
  border: 1px solid var(--sand);
}

.practice-list { list-style: none; display: grid; gap: 0; }
.practice-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.practice-list li:last-child { border-bottom: 0; }
.practice-list span { color: var(--muted); }

.ladder { list-style: none; display: grid; gap: 6px; }
.ladder li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
}
.ladder li::before {
  content: "";
  width: 10px; height: 10px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--kesar);
}
.ladder li:first-child::before { background: var(--kesar); }
.ladder li:nth-child(2) { padding-left: 14px; }
.ladder li:nth-child(3) { padding-left: 28px; }
.ladder li:nth-child(4) { padding-left: 42px; color: var(--muted); }

.scripts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; }
.scripts li { line-height: 1.5; }
.scripts .en { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); }
.scripts .deva, .scripts .guj { font-weight: 500; font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.25rem); }

.okay {
  padding: 16px 18px 14px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--sand);
}
.okay p { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; line-height: 1.2; }
.okay-scale { display: flex; justify-content: space-between; margin-top: 12px; gap: 4px; }
.okay-scale span {
  flex: 1;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--sand);
}
.okay-scale span.on { background: var(--kesar); }
.okay-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }

@media (min-width: 720px) {
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature--wide { grid-column: span 2; }
}
@media (min-width: 1100px) {
  .features-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .feature { grid-column: span 2; }
  .feature--wide { grid-column: span 4; }
  .feature--half { grid-column: span 3; }
  .feature--wide.split { flex-direction: row; gap: 32px; align-items: stretch; }
  .feature--wide.split > .copy { flex: 1 1 0; }
  .feature--wide.split > .demo { flex: 1.1 1 0; margin-top: 0; padding-top: 0; align-self: center; }
}

/* ---------- How it works -------------------------------------------------- */

.steps {
  list-style: none;
  display: grid;
  gap: 28px;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  counter-reset: step;
}
.step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }
.step-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--sand);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.step-num::after {
  /* a kesar arc: progress made, one step at a time */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--kesar);
  border-right-color: var(--kesar);
  transform: rotate(-45deg);
}
.step:nth-child(1) .step-num::after { border-right-color: transparent; transform: rotate(-20deg); }
.step:nth-child(3) .step-num::after { border-color: var(--kesar); }
.step h3 { font-size: var(--fs-h3); margin-top: 0.35rem; }
.step p { margin-top: 0.55rem; line-height: 1.6; max-width: 32rem; }

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
  .step { grid-template-columns: 1fr; gap: 22px; }
  .step:not(:last-child)::after {
    /* the path between steps */
    content: "";
    position: absolute;
    top: 32px;
    left: 84px;
    right: calc(-1 * clamp(28px, 4vw, 56px) + 16px);
    border-top: 1.5px dashed var(--deep-sand);
  }
  .step h3 { margin-top: 0; }
}
.steps-note { margin-top: 2.5rem; max-width: 44rem; color: var(--muted); font-size: var(--fs-body); }

/* ---------- Privacy promise ---------------------------------------------- */

.promise {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(32px, 5vw, 64px);
  border-radius: 36px;
  background: var(--sand-glass);
  border: 1px solid rgba(255, 253, 249, 0.6);
  box-shadow: inset 0 0 0 1px rgba(42, 31, 20, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.promise h2 { font-size: var(--fs-h2); }
.promise-intro p { margin-top: 1rem; font-size: var(--fs-lead); max-width: 30rem; }
.promise-intro .text-link { margin-top: 1rem; }
.promise-list { list-style: none; display: grid; gap: 14px; }
.promise-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 18px 20px;
  background: var(--card-glass);
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.promise-list svg { width: 28px; height: 28px; }
.promise-list strong { display: block; font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; font-weight: 600; }
.promise-list span { display: block; margin-top: 2px; line-height: 1.5; }
@media (min-width: 900px) {
  .promise { grid-template-columns: 0.9fr 1.1fr; align-items: center; }
  .promise-list { grid-template-columns: 1fr 1fr; }
}

/* ---------- From Mandan Parivar ------------------------------------------ */

.family { text-align: center; }
.family h2 { font-size: var(--fs-h2); }
.family p { margin: 1.2rem auto 0; max-width: 36rem; font-size: var(--fs-lead); line-height: 1.6; }
.family .pill-link { margin-top: 2rem; }
.family-rule {
  width: 72px;
  height: 1px;
  margin: 0 auto 2rem;
  background: var(--deep-sand);
}

/* ---------- FAQ ----------------------------------------------------------- */

.faq-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.faq-intro h2 { font-size: var(--fs-h2); }
.faq-intro p { margin-top: 1rem; font-size: var(--fs-lead); }
.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: var(--card-glass);
  border: 1px solid var(--card-edge);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color var(--dur) var(--ease);
}
.faq-item[open] { background: rgba(255, 253, 249, 0.92); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 20px 14px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.4375rem);
  line-height: 1.25;
  border-radius: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > span:first-child { flex: 1; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(var(--cocoa), var(--cocoa)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--cocoa), var(--cocoa)) center / 1.5px 12px no-repeat,
    var(--sand);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 24px 22px; max-width: 42rem; }
.faq-body p + p { margin-top: 0.8rem; }
.faq-item[open] .faq-body { animation: rise var(--dur) var(--ease); }
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: 0.75fr 1.25fr; align-items: start; }
  .faq-intro { position: sticky; top: 32px; }
}

/* ---------- Closing line --------------------------------------------------- */

.closing {
  padding-block: clamp(4rem, 8vw, 8rem) clamp(3.5rem, 6vw, 6rem);
  text-align: center;
  background:
    radial-gradient(48% 70% at 30% 70%, var(--wash-coral), transparent 70%),
    radial-gradient(50% 75% at 70% 60%, var(--wash-peach), transparent 70%),
    radial-gradient(40% 60% at 85% 85%, var(--wash-rose), transparent 70%);
}
.closing p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.2rem + 4.5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--cocoa);
}

/* ---------- Footer (cocoa ground, reversed logo) ------------------------- */

.site-footer {
  background: var(--cocoa);
  color: var(--cream);
  border-radius: 36px 36px 0 0;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.site-footer :focus-visible { outline-color: var(--cream); }
.site-footer a {
  text-decoration-color: rgba(225, 134, 1, 0.7);
}
.site-footer a:hover { text-decoration-color: var(--kesar); color: #fff; }
.footer-grid { display: grid; gap: 2.5rem; }
.footer-brand img { width: 220px; height: auto; }
.footer-brand p { margin-top: 1.1rem; max-width: 22rem; color: rgba(251, 246, 238, 0.82); }
.footer-col h2 {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(251, 246, 238, 0.72);
  margin-bottom: 0.6rem;
}
.footer-col ul { list-style: none; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-col address { font-style: normal; color: rgba(251, 246, 238, 0.82); line-height: 1.6; }
.footer-col address strong { color: var(--cream); font-weight: 500; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(251, 246, 238, 0.14);
  font-size: var(--fs-sm);
  color: rgba(251, 246, 238, 0.72);
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .footer-grid { grid-template-columns: 1.3fr 0.8fr 1.1fr; gap: 3rem; }
}

/* ---------- Legal and support pages -------------------------------------- */

.legal {
  width: min(100% - 2 * var(--gutter), 70ch);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(4rem, 8vw, 7rem);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.legal-head {
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.legal-head h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
  line-height: 1.05;
}
.legal-date {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1rem;
  color: var(--muted);
  font-weight: 500;
}
.legal-date::before {
  content: "";
  width: 28px; height: 2px;
  border-radius: 2px;
  background: var(--kesar);
}

/* Prose */
.legal > :where(p, ul, ol, dl, table, blockquote, address, figure, pre, section, div) { margin-block: 0 1.1em; }
.legal :where(p, li, dd) { max-width: 70ch; }
.legal h2 {
  font-size: clamp(1.625rem, 1.45rem + 0.7vw, 2rem);
  line-height: 1.15;
  margin: 1.7em 0 0.6em;
  padding-top: 0.95em;
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
  font-variant-numeric: lining-nums tabular-nums;
}
.legal-head + h2,
.legal-head + .toc + h2,
.legal .toc + h2 { margin-top: 0.4em; border-top: 0; padding-top: 0; }
.legal h3 {
  font-size: clamp(1.25rem, 1.18rem + 0.3vw, 1.4375rem);
  line-height: 1.2;
  margin: 1.5em 0 0.45em;
  scroll-margin-top: 24px;
  font-variant-numeric: lining-nums tabular-nums;
}
.legal h4 {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  margin: 1.6em 0 0.4em;
}
.legal :where(section, div) > :where(h2, h3):first-child { margin-top: 0; }
.legal p, .legal li { text-wrap: pretty; hyphens: manual; overflow-wrap: break-word; }
.legal ul, .legal ol { padding-left: 1.35em; }
.legal li { margin-block: 0.35em; padding-left: 0.2em; }
.legal li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.legal ul > li::marker { color: var(--kesar); }
.legal ol ol { list-style: lower-alpha; }
.legal ol ol ol { list-style: lower-roman; }
.legal :where(ul, ol) :where(ul, ol) { margin-top: 0.35em; margin-bottom: 0.35em; }
.legal strong, .legal b { font-weight: 700; }
.legal a { overflow-wrap: anywhere; }
.legal dt { font-weight: 700; margin-top: 0.8em; }
.legal dd { margin: 0.2em 0 0 0; }
.legal address { font-style: normal; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.legal blockquote,
.legal .note,
.legal .callout {
  margin-inline: 0;
  padding: 1.1em 1.3em;
  border-radius: 18px;
  background: var(--sand-glass);
  box-shadow: inset 3px 0 0 var(--kesar);
}
.legal blockquote > :last-child, .legal .note > :last-child, .legal .callout > :last-child { margin-bottom: 0; }

/* Numbering: write "1." in the heading text, wrap it in <span class="n">, or
   add class "numbered" to <main class="legal"> for automatic 1 / 1.1 numbers. */
.legal h2 .n, .legal h3 .n { display: inline-block; min-width: 1.9em; font-variant-numeric: lining-nums tabular-nums; color: var(--muted); }
.legal.numbered { counter-reset: h2; }
.legal.numbered h2 { counter-increment: h2; counter-reset: h3; }
.legal.numbered h3 { counter-increment: h3; }
.legal.numbered h2::before { content: counter(h2) ". "; display: inline-block; min-width: 1.9em; color: var(--muted); }
.legal.numbered h3::before { content: counter(h2) "." counter(h3) " "; display: inline-block; min-width: 2.6em; color: var(--muted); }

/* Tables */
.legal .table-scroll { overflow-x: auto; margin-block: 0 1.4em; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); background: var(--card-glass); }
.legal .table-scroll:focus-visible { outline-offset: 2px; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
}
.legal .table-scroll table { margin: 0; }
.legal caption { caption-side: top; text-align: left; padding: 12px 16px 4px; font-weight: 700; }
.legal th, .legal td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal thead th { background: var(--sand); font-weight: 700; border-bottom: 0; }
.legal tbody tr:last-child > * { border-bottom: 0; }
.legal td { overflow-wrap: anywhere; min-width: 8em; }

/* Table of contents (built by site.js from the h2s) */
.toc {
  margin: 0 0 2.5rem;
  padding: 6px 8px 10px;
  background: var(--card-glass);
  border: 1px solid var(--card-edge);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  border-radius: 14px;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--cocoa);
  border-bottom: 1.5px solid var(--cocoa);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.toc[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { margin: 0; padding: 0; max-width: none; }
.toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 12px;
  text-decoration: none;
  line-height: 1.35;
  font-size: var(--fs-sm);
  transition: background-color var(--dur) var(--ease);
}
.toc a:hover { background: rgba(237, 220, 194, 0.6); }
.toc a[aria-current="true"] { background: var(--sand); font-weight: 500; }

@media (min-width: 1120px) {
  .legal.has-toc {
    width: min(100% - 2 * var(--gutter), calc(70ch + 16rem + 4.5rem));
    display: grid;
    grid-template-columns: 16rem minmax(0, 70ch);
    column-gap: 4.5rem;
    align-items: start;
  }
  .legal.has-toc > * { grid-column: 2; }
  .legal.has-toc > .legal-head { grid-column: 1 / -1; }
  .legal.has-toc > .toc {
    grid-column: 1;
    grid-row: 2 / span 400;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow: auto;
    margin: 0;
  }
  .legal.has-toc > .toc summary { pointer-events: none; }
  .legal.has-toc > .toc summary::after { display: none; }
  .legal.has-toc .toc + h2 { margin-top: 0; }
}

/* Support page helpers (usable inside the injected body) */
.legal .contact-cards { display: grid; gap: 12px; padding: 0; list-style: none; }
.legal .contact-cards li { margin: 0; padding: 18px 20px; border-radius: 18px; background: var(--card-glass); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 640px) { .legal .contact-cards { grid-template-columns: 1fr 1fr; } }

/* ---------- 404 ------------------------------------------------------------ */

.notfound {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.notfound img { width: 96px; margin: 0 auto 2rem; }
.notfound h1 { font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem); }
.notfound p { margin: 1rem auto 0; max-width: 32rem; font-size: var(--fs-lead); }
.notfound .pill-link { margin-top: 2rem; }
.notfound ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 1.25rem; }
.notfound ul a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Glass and mirror (owner, 17 Oct 2026) -------------------------
   Frosted header once the page scrolls, a soft light sweep across cards as
   they arrive, and a polished-stone reflection under the hero phone. The
   sweep passes over the cards, never over the logo artwork. */

html { scroll-padding-top: 96px; }

.site-header {
  position: sticky;
  top: 0;
  border-bottom: 1px solid transparent;
  transition:
    background-color 450ms var(--ease),
    border-color 450ms var(--ease),
    box-shadow 450ms var(--ease),
    padding 450ms var(--ease);
}
.site-header.is-scrolled {
  padding-block: 10px;
  background: rgba(251, 246, 238, 0.95);
  border-bottom-color: rgba(217, 194, 160, 0.55);
  box-shadow: 0 12px 32px -24px rgba(110, 66, 20, 0.45);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-scrolled {
    background: rgba(251, 246, 238, 0.58);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
  }
}
.legal.has-toc > .toc { top: 96px; max-height: calc(100vh - 120px); }

/* Mirror shine: a band of light crosses each card once as it scrolls in */
.store, .mark-card { position: relative; }
.shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
}
.shine.in-view::after {
  animation: mirror-sweep 1300ms var(--ease) var(--shine-delay, 0ms) 1 both;
}
@keyframes mirror-sweep {
  0%   { background-position: 130% 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: -30% 0; opacity: 0; }
}
/* On the phone screen the sheen follows the scroll, like light on glass */
@supports (animation-timeline: view()) {
  .ps.shine::after,
  .ps.shine.in-view::after {
    opacity: 0.85;
    animation: mirror-scroll linear both;
    animation-timeline: view();
    animation-range: entry 10% exit 90%;
  }
}
@keyframes mirror-scroll {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* Reflection under the phone, fading out like polished stone */
.phone {
  -webkit-box-reflect: below 14px linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.2));
}
.hero-stage { padding-bottom: clamp(150px, 26vw, 210px); }
.hero-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(110px, 20vw, 160px);
  width: min(78vw, 360px);
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 66, 20, 0.18), rgba(110, 66, 20, 0));
  pointer-events: none;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .shine::after,
  .shine.in-view::after,
  .ps.shine::after,
  .ps.shine.in-view::after { animation: none; opacity: 0; }
}

/* ---------- Reduced motion: no drift, no sway; a single soft fade -------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, body::after { animation: none; }
  .flame { animation: none; }
  .flame-kindle { animation: kindle 600ms var(--ease) both; }
  *, *::before, *::after { transition-duration: 1ms !important; }
  .menu-open .menu-btn .bars::before, .menu-open .menu-btn .bars::after { transition: none; }
}

/* ---------- Print (legal pages) ------------------------------------------- */

@media print {
  body::before, body::after, .site-header, .site-footer, .toc, .skip-link { display: none !important; }
  body { background: #fff; }
  .legal { width: auto; padding: 0; }
  .legal a { text-decoration: underline; }
}