/* ZindSa site v3, editorial (founder, 15 Sep 2026: "UI UX se revamp",
   reference moral-skin.com). Light only.

   What was taken from the reference, and what was not:
   - taken: a slim announcement line, a three-part header, very large
     serif display type with a lot of air around it, small uppercase
     labels, full-bleed split sections, a numbered editorial list, a
     slow ticker, an image strip above a column footer, thin rules
     instead of boxes and shadows;
   - not taken: its sage green and khaki. On this site a green band
     reads Islamic and a saffron one Hindu, so the colour blocks are the
     brand's own neutral ones: paper, sand, the icon's night blue and
     its lamp gold. Each tradition's colour appears only on its own row.

   Brand mark ("Dwar", brand/zindsa-brand-master.html): a doorway left
   open with a lamp lit inside. It survives as the night-blue hero panel
   with the phone standing in a lit arch. */

:root {
  /* palette 1, Deep Temple Night (founder's pick, 15 Sep 2026) */
  --paper: #F6F1E6; --sand: #E9E0CC; --sand-2: #DDD1B8; --surface: #FFFDF8;
  --ink: #121626; --ink-2: #343A52; --muted: #626779;
  --line: rgba(22, 23, 28, .12); --line-2: rgba(22, 23, 28, .22);
  --lamp: #F3C26A; --gold: #D2A74E; --gold-deep: #8A6424; --gold-text: #7A5518;
  --amber: #E9A23B;
  --night: #0B1430; --night-2: #1A2A55; --cream: #F6EAD0;
  --link: #243A74;
  --hindu: #C77B27; --muslim: #2E6B62; --sikh: #C7581B;
  --christian: #4A5FA5; --jain: #B03A50; --buddhist: #8A6D2F;
  --r-sm: 8px; --r: 14px; --r-lg: 22px;
  --shadow-1: 0 1px 2px rgba(22, 23, 28, .05), 0 6px 18px rgba(22, 23, 28, .06);
  --shadow-2: 0 2px 6px rgba(22, 23, 28, .06), 0 24px 48px -18px rgba(22, 23, 28, .22);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --space: clamp(80px, 11vw, 150px);
  --label: 500 .76rem/1.4 var(--chrome);
  --base: var(--paper); --maroon: #7B2D3E; --teal: #2E6B62;
  --disp: 'Marcellus', serif; --body: 'Noto Serif', serif;
  --chrome: 'Inter', system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  font-family: var(--body); color: var(--ink); background: var(--paper);
  line-height: 1.7; font-size: 17px;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-deep); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
.label, .kicker, .tag {
  font: var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text);
}

/* ------------------------------------------------------- announce + header */
.announce {
  background: var(--night); color: var(--cream); text-align: center;
  font: var(--label); letter-spacing: .18em; text-transform: uppercase; padding: 9px 16px;
}
header.site {
  position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 68px; }
.topnav { display: flex; gap: 28px; font: var(--label); letter-spacing: .14em; text-transform: uppercase; }
.topnav a { color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.topnav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.brand {
  font-family: var(--disp); font-size: 1.75rem; line-height: 1; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; white-space: nowrap; letter-spacing: .01em;
}
.brand b { color: var(--gold-deep); font-weight: inherit; }
/* the wordmark is Latin in every locale: keep Zind before Sa on RTL pages */
.brand { direction: ltr; unicode-bidi: isolate; }
.brand::before {
  content: ''; width: 34px; height: 34px; flex: none; margin-inline-end: 10px; border-radius: 22%;
  background: url(/assets/icon-192.png) center / cover no-repeat;
}
header.site .brand { justify-self: center; }
.theme-tog { display: none !important; }

.lang-menu { justify-self: end; position: relative; font: var(--label); letter-spacing: .12em; text-transform: uppercase; }
.lang-menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink);
  transition: border-color .2s, background .2s;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); }
.lang-menu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.lang-menu summary:hover, .lang-menu[open] summary { border-color: var(--ink); background: var(--surface); }
.lang-menu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lang-menu nav.langs {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 280px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2);
  text-transform: none; letter-spacing: 0; font: 400 .95rem/1.3 var(--chrome);
}
.lang-menu nav.langs a { color: var(--ink-2); text-decoration: none; padding: 9px 12px; border-radius: var(--r-sm); }
.lang-menu nav.langs a:hover { background: var(--sand); color: var(--ink); }
.lang-menu nav.langs a[aria-current="page"] { background: var(--ink); color: var(--cream); }

/* ---------------------------------------------------------------- buttons */
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 .8rem/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: 17px 30px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn.gold { background: var(--ink); color: var(--cream); }
.btn.gold:hover { background: var(--gold-deep); color: #fff; }
.btn.line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.line:hover { background: var(--ink); color: var(--cream); }

/* ------------------------------------------------------------ page hero */
.hero { position: relative; padding: clamp(72px, 10vw, 136px) 0 clamp(48px, 7vw, 88px); text-align: center; }
.hero .kicker { display: inline-block; margin-bottom: 22px; }
.hero h1 {
  font-family: var(--disp); font-weight: 400; color: var(--ink);
  font-size: clamp(2.5rem, 5.6vw, 5rem); line-height: 1.04; letter-spacing: -.015em;
  max-width: 18ch; margin: 0 auto 26px; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--gold-deep); }
html[lang="en"] .hero h1 em { font-style: italic; }
.hero .sub { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--ink-2); max-width: 62ch; margin: 0 auto 34px; text-wrap: pretty; }
.hero .date { margin-top: 24px; font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero .date b { color: var(--ink); font-weight: 600; }

/* home hero: KEPT EXACTLY AS SITE V2 (founder, 15 Sep 2026: "hero pura V2
   ka rakho, dwar aur mobile waisa ka waisa"). Copy beside the real app
   standing in a lit arch; the v3 chrome sits above it unchanged. */
.hero.v2-split {
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); text-align: start; overflow: hidden;
  background: radial-gradient(1200px 600px at 50% -200px, color-mix(in srgb, var(--lamp) 25%, transparent), transparent 70%), #EFE7D6;
}
.hero.v2-split > .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero.v2-split .kicker {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--chrome);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(201, 168, 85, .45);
  box-shadow: 0 1px 2px rgba(20, 31, 53, .06), 0 4px 14px rgba(20, 31, 53, .06); margin-bottom: 26px; line-height: 1.65;
}
.hero.v2-split .kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(233, 162, 59, .22); }
.hero.v2-split h1 {
  font-family: var(--disp); font-weight: 400; color: var(--ink);
  font-size: clamp(2.3rem, 5.4vw, 4.5rem); line-height: 1.1; letter-spacing: -.01em;
  max-width: 17ch; margin: 0 0 22px; text-wrap: balance;
}
.hero.v2-split h1 em, html[lang="en"] .hero.v2-split h1 em {
  font-style: normal; background: linear-gradient(100deg, #9A7428, #C9A855 45%, #E4B45A 70%, #9A7428);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero.v2-split .sub { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 64ch; margin: 0 0 32px; text-wrap: pretty; }
.hero.v2-split .date { margin-top: 22px; font: 400 .9rem/1.65 var(--chrome); letter-spacing: 0; text-transform: none; color: var(--muted); }
.hero.v2-split .date b { color: var(--ink); font-weight: 700; }
.hero.v2-split .cta-row { justify-content: flex-start; }
.hero.v2-split .btn { font: 600 1rem/1.2 var(--chrome); letter-spacing: 0; text-transform: none; padding: 14px 26px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.hero.v2-split .btn.gold {
  color: #241703; background: linear-gradient(180deg, #F8D58A, #EBB85A 60%, #D2A74E);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 24px -10px rgba(170, 120, 30, .7);
}
.hero.v2-split .btn.gold:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 16px 34px -12px rgba(170, 120, 30, .8); color: #2B1D04; }
.hero.v2-split .btn.line { color: var(--ink); background: rgba(255, 255, 255, .7); border-color: rgba(20, 31, 53, .16); }
.hero.v2-split .btn.line:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 1px 2px rgba(20, 31, 53, .06), 0 4px 14px rgba(20, 31, 53, .06); color: #141F35; }
.hero-door {
  position: relative; justify-self: center; width: min(400px, 100%); aspect-ratio: 1 / 1.5;
  border-radius: 999px 999px 28px 28px;
  background:
    radial-gradient(55% 45% at 50% 62%, rgba(255, 240, 200, .95), rgba(240, 201, 127, .45) 55%, rgba(240, 201, 127, 0) 80%),
    linear-gradient(180deg, #FFF6DF, #F3E3BC);
  border: 1px solid rgba(201, 168, 85, .5);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .45), 0 18px 44px -14px rgba(201, 150, 60, .45);
  display: grid; place-items: center; padding: 16% 0 6%;
}
.hero-door::after {
  /* light spilling over the threshold */
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 52px;
  background: radial-gradient(50% 50% at 50% 0, rgba(240, 190, 100, .45), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
.hero-door .device { width: 54%; animation: v2-float 7s var(--ease) infinite; }
@keyframes v2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* -------------------------------------------------------------- sections */
section { padding: var(--space) 0; position: relative; }
section.alt { background: var(--paper); }
.sec {
  font-family: var(--disp); font-weight: 400; text-align: center; color: var(--ink);
  font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.08; letter-spacing: -.01em;
  margin-bottom: 20px; text-wrap: balance;
}
.sec-sub { text-align: center; color: var(--ink-2); max-width: 64ch; margin: 0 auto 64px; font-size: 1.08rem; text-wrap: pretty; }
.fineprint { text-align: center; font-size: .9rem; color: var(--muted); margin-top: 32px; }
.grid { display: grid; gap: 28px; }
.grid.d3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid.d2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; }
.card h2, .card h3 { font-family: var(--disp); font-weight: 400; font-size: 1.5rem; line-height: 1.2; margin-bottom: 12px; color: var(--ink); }
.card p { color: var(--ink-2); font-size: 1rem; }
.card p + p { margin-top: 12px; }
.card p a { color: var(--ink); font: 600 .78rem/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; }
.card ul { padding-inline-start: 20px; color: var(--ink-2); display: grid; gap: 10px; font-size: .98rem; }
.card li::marker { color: var(--gold); }
.tag { display: block; margin-bottom: 14px; }
.illo { width: 100%; border-radius: var(--r-sm); margin-bottom: 18px; background: var(--sand); aspect-ratio: 16 / 9; object-fit: cover; }

/* ------------------------------------------------- home: why (statement) */
#why { background: var(--sand); }
#why .sec { font: var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 28px; }
#why .sec-sub {
  font-family: var(--disp); color: var(--ink); max-width: 24em; margin-bottom: clamp(64px, 8vw, 110px);
  font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1.22; letter-spacing: -.01em; text-wrap: balance;
}
.pills { display: inline-flex; vertical-align: middle; margin-inline-start: .2em; }
.pill {
  width: 1.3em; height: 1.3em; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: .56em; line-height: 1; color: #fff; margin-inline-start: -.14em;
  box-shadow: 0 0 0 3px var(--sand); font-family: var(--body);
}
.pill:first-child { margin-inline-start: 0; }
.pill.hindu { background: var(--hindu); } .pill.muslim { background: var(--muslim); } .pill.sikh { background: var(--sikh); }
.pill.christian { background: var(--christian); } .pill.jain { background: var(--jain); } .pill.buddhist { background: var(--buddhist); }
#why .grid.d3 { grid-template-columns: repeat(3, 1fr); column-gap: clamp(28px, 4vw, 64px); row-gap: 56px; }
#why .card { background: transparent; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 32px 0 0; }
#why .illo {
  width: 96px; height: 96px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; padding: 0;
  background: var(--paper); margin-bottom: 24px; box-shadow: 0 0 0 1px var(--line);
}
#why .card h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }

/* ---------------------------------------------------------- home: compare */
.cmp { overflow-x: auto; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.cmp table { width: 100%; border-collapse: collapse; min-width: 620px; }
.cmp th, .cmp td { padding: 20px 22px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp thead th { font: var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cmp thead th:nth-child(2) { color: var(--ink); background: var(--sand); }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td:first-child { font-family: var(--disp); font-size: 1.2rem; color: var(--ink); }
.cmp td.yes { background: var(--sand); color: var(--ink); }
.cmp td.no { color: var(--muted); }
.cmp td.yes::before, .cmp td.no::before {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  margin-inline-end: 12px; font: 700 .72rem/1 var(--chrome); vertical-align: -3px;
}
.cmp td.yes::before { content: '\2713'; color: var(--cream); background: var(--ink); }
.cmp td.no::before { content: '\2715'; color: var(--muted); border: 1px solid var(--line-2); }

/* ------------------------------------------ home: the six, as a numbered list */
#dharma .grid.d3 { display: block; counter-reset: faith; border-bottom: 1px solid var(--line-2); }
.card.dharma {
  --acc: var(--gold); counter-increment: faith;
  display: grid; grid-template-columns: 64px 76px minmax(0, 1fr) minmax(0, 1.25fr) auto;
  align-items: center; column-gap: clamp(16px, 2.5vw, 36px);
  background: transparent; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 30px 12px;
  transition: background .35s var(--ease);
}
.card.dharma.hindu { --acc: var(--hindu); } .card.dharma.muslim { --acc: var(--muslim); }
.card.dharma.sikh { --acc: var(--sikh); } .card.dharma.christian { --acc: var(--christian); }
.card.dharma.jain { --acc: var(--jain); } .card.dharma.buddhist { --acc: var(--buddhist); }
.card.dharma::before { content: counter(faith, decimal-leading-zero); grid-column: 1; grid-row: 1; font: var(--label); letter-spacing: .1em; color: var(--muted); }
.card.dharma .illo { display: none; }
.dharma-sym {
  grid-column: 2; grid-row: 1; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.7rem; line-height: 1; color: #fff; background: var(--acc);
  transition: transform .4s var(--ease);
}
.card.dharma h3 { grid-column: 3; grid-row: 1; margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; }
.card.dharma h3 a { color: var(--ink); text-decoration: none; transition: color .3s; }
.card.dharma p:not(:last-child) { grid-column: 4; grid-row: 1; font-size: .98rem; color: var(--ink-2); }
.card.dharma p:last-child { grid-column: 5; grid-row: 1; margin: 0; white-space: nowrap; }
.card.dharma:hover { background: color-mix(in srgb, var(--acc) 7%, var(--paper)); }
.card.dharma:hover h3 a { color: var(--acc); }
.card.dharma:hover .dharma-sym { transform: rotate(-8deg) scale(1.06); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(64px, 8vw, 110px); }
.stat { text-align: center; padding: 8px 18px; border-inline-start: 1px solid var(--line-2); }
.stat:first-child { border-inline-start: 0; }
.stat b { display: block; font-family: var(--disp); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.2rem); white-space: nowrap; color: var(--ink); line-height: 1.05; margin-bottom: 10px; }
.stat span { font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------- home: ticker */
.marquee { background: var(--night); color: var(--cream); overflow: hidden; padding: 26px 0; direction: ltr; }
.marquee .track { display: flex; width: max-content; gap: 64px; animation: v3-marquee 48s linear infinite; }
.marquee span { display: inline-flex; align-items: center; gap: 16px; font-family: var(--disp); font-size: clamp(1.6rem, 2.6vw, 2.3rem); white-space: nowrap; }
.marquee i { font-style: normal; width: 1.3em; height: 1.3em; border-radius: 50%; display: grid; place-items: center; font-size: .7em; color: #fff; font-family: var(--body); }
.marquee .hindu i { background: var(--hindu); } .marquee .muslim i { background: var(--muslim); } .marquee .sikh i { background: var(--sikh); }
.marquee .christian i { background: var(--christian); } .marquee .jain i { background: var(--jain); } .marquee .buddhist i { background: var(--buddhist); }
@keyframes v3-marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------- home: advisor (split) */
#advisor { background: var(--night); color: var(--cream); overflow: hidden; }
#advisor .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(32px, 6vw, 96px); align-items: center; }
#advisor .sec { grid-column: 1; color: var(--cream); text-align: start; margin-bottom: 24px; }
#advisor .sec-sub { grid-column: 1; text-align: start; color: rgba(244, 234, 213, .78); margin: 0; }
#advisor .v2-receipt { grid-column: 2; grid-row: 1 / span 2; }

.v2-receipt { display: flex; gap: clamp(16px, 2.5vw, 30px); justify-content: center; align-items: flex-end; }
.v2-receipt .device { width: min(210px, 30%); transition: transform .5s var(--ease); }
.v2-receipt .device:nth-child(2) { width: min(240px, 34%); transform: translateY(-28px); }
.v2-receipt .device:hover { transform: translateY(-10px); }
.v2-receipt .device:nth-child(2):hover { transform: translateY(-38px); }

/* ---------------------------------------------------------- home: pricing */
#pricing .grid.d2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.card.plan { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); border: 0; border-radius: 0; border-inline-start: 1px solid var(--line-2); background: var(--surface); }
.card.plan:first-child { border-inline-start: 0; }
.card.plan h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.card.plan ul { margin-top: 18px; }
.card.plan.pro { background: var(--sand); }
.card.plan .price { font-family: var(--disp); font-size: 1.3rem; color: var(--ink); margin: 4px 0; line-height: 1.45; }
.card.plan.founding-plan { background: var(--night); color: var(--cream); }
.card.plan.founding-plan h3 { color: var(--lamp); }
.card.plan.founding-plan p { color: rgba(244, 234, 213, .8); }
.card.plan.founding-plan .btn { margin-top: auto; align-self: flex-start; background: var(--lamp); color: var(--ink); }
.card.plan.founding-plan .btn:hover { background: var(--cream); }

.founding {
  margin-top: 48px; text-align: center; border-radius: var(--r); padding: clamp(40px, 6vw, 64px) 30px;
  background: var(--night); color: var(--cream);
}
.founding h3 { font-family: var(--disp); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--lamp); margin-bottom: 10px; }
.founding p { max-width: 58ch; margin: 0 auto 26px; color: rgba(244, 234, 213, .8); }

/* ------------------------------------------------------ home: walkthrough */
#walkthrough { background: var(--sand); }
#guru { text-align: center; }
#guru .sec { font-size: clamp(2.4rem, 5vw, 4.4rem); }
#guru .sec-sub { margin-bottom: 0; font-size: 1.15rem; }

/* ----------------------------------------------------------- walkthrough */
.wt-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.wt-tabs button { font: 600 .9rem var(--chrome); cursor: pointer; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); transition: all .25s var(--ease); }
.wt-tabs button:hover { border-color: var(--c); color: var(--ink); transform: translateY(-1px); }
.wt-tabs button[aria-selected="true"] { border-color: var(--c); color: #fff; background: var(--c); box-shadow: 0 10px 22px -12px var(--c); }
.wt-stage { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 44px); }
.wt-phone { width: 290px; flex: none; border-radius: 34px; padding: 12px; position: relative; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.wt-phone::before { content: ''; display: block; width: 78px; height: 5px; border-radius: 999px; background: var(--line-2); margin: 2px auto 10px; }
.wt-screen { min-height: 384px; border-radius: 24px; padding: 20px 16px; background: color-mix(in srgb, var(--wt-accent) 8%, var(--paper)); border: 1px solid color-mix(in srgb, var(--wt-accent) 22%, transparent); display: flex; flex-direction: column; gap: 10px; text-align: start; }
.wt-h { font-family: var(--disp); font-size: 1.05rem; line-height: 1.4; color: var(--ink); }
.wt-sub { font-size: .78rem; color: var(--muted); }
.wt-list, .wt-grid { list-style: none; display: grid; gap: 6px; margin-top: 4px; }
.wt-grid { grid-template-columns: 1fr 1fr; }
.wt-list li, .wt-grid li { font-size: .76rem; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.wt-list li.on, .wt-grid li.on { border-color: var(--c, var(--wt-accent)); color: var(--ink); font-weight: 700; }
.wt-card { font-size: .82rem; font-weight: 600; color: #fff; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, var(--wt-accent), color-mix(in srgb, var(--wt-accent) 60%, #000)); }
.wt-skip { margin-top: auto; font-size: .74rem; color: var(--muted); text-align: end; }
.wt-field { font-size: .72rem; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.wt-field span { height: 30px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); }
.wt-btn { margin-top: auto; text-align: center; font-size: .8rem; font-weight: 700; color: #fff; background: var(--wt-accent); border-radius: 12px; padding: 10px; }
.wt-banner { border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 3px; background: rgba(240, 201, 127, .25); border: 1px solid rgba(201, 168, 85, .45); }
.wt-banner b { font-size: .78rem; } .wt-banner span { font-size: .7rem; color: var(--muted); }
.wt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.wt-tiles span { aspect-ratio: 1; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.wt-nav { font: 600 1.35rem var(--chrome); cursor: pointer; width: 52px; height: 52px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s, background .25s; }
.wt-nav:hover { transform: scale(1.06); border-color: var(--wt-accent); box-shadow: 0 10px 24px -12px var(--wt-accent); background: color-mix(in srgb, var(--wt-accent) 8%, var(--surface)); }
.wt-dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.wt-dots span { width: 26px; height: 5px; border-radius: 999px; background: var(--line-2); transition: background .3s, width .3s; }
.wt-dots span[aria-current="true"] { background: var(--wt-accent); width: 44px; }
.wt-caption { text-align: center; font-family: var(--chrome); font-size: .92rem; font-weight: 600; color: var(--ink-2); margin-top: 12px; min-height: 1.5em; }
@media (prefers-reduced-motion: no-preference) { .wt-screen > * { animation: wt-in .35s var(--ease) both; } }
@keyframes wt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

/* Hardware-style phone: a Google Pixel 10 Pro outline, bezel cut to a
   fifth (founder), glass = the captures' exact 1280x2856 panel. */
.device, .wt-phone.wt-device {
  position: relative; display: block; box-sizing: border-box;
  aspect-ratio: 1 / 2.2132; padding: 0.72%; border: 0; border-radius: 13.5% / 6.1%;
  background: #08080a;
  box-shadow: inset 0 0 0 1px #2a2b30, 0 0 0 2.5px #d9dbe5, 0 0 0 3.5px #a4a8b8, 0 22px 44px -20px rgba(20, 31, 53, .45);
}
.wt-phone.wt-device { width: 260px; min-height: 0; }
.device .screen, .wt-phone.wt-device .wt-screen.wt-real { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 12.9% / 5.8%; background: #000; }
.device .screen img, .wt-phone.wt-device .wt-screen.wt-real img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border: 0; border-radius: 0; box-shadow: none; }
.device .screen::before, .wt-phone.wt-device .wt-screen.wt-real::before { content: ''; position: absolute; z-index: 2; top: 1.05%; left: 50%; width: 5.6%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 38%, #4a5a78 0 10%, #11151d 34%, #030304 62%); box-shadow: 0 0 0 1.5px #1c1d21; }
.device::before, .wt-phone.wt-device::before { content: ''; position: absolute; display: block; margin: 0; right: -6px; left: auto; top: 19%; width: 3px; height: 6.5%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #a4a8b8, #e3e5ee); }
.device::after, .wt-phone.wt-device::after { content: ''; position: absolute; right: -6px; top: 29%; width: 3px; height: 12%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #a4a8b8, #e3e5ee); }

/* dharma pages: screenshot row */
.shots { padding: 8px 0 clamp(48px, 7vw, 80px); }
.shot-row { display: flex; gap: 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 10px 6px 26px; justify-content: safe center; scrollbar-width: thin; }
.shot { flex: 0 0 min(210px, 58vw); margin: 0; scroll-snap-align: center; transition: transform .35s var(--ease); }
.shot:hover { transform: translateY(-6px); }
.shot .device { width: 100%; }
.shot img { border: 0; box-shadow: none; border-radius: 0; background: none; }
.shot figcaption { margin-top: 14px; text-align: center; font-family: var(--chrome); font-size: .9rem; font-weight: 600; color: var(--ink-2); }

/* walkthrough, editorial: tabs as underlined labels */
.wt-tabs { gap: 6px 26px; margin-bottom: 40px; }
.wt-tabs button { border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; padding: 8px 2px; font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); box-shadow: none; }
.wt-tabs button:hover { transform: none; color: var(--ink); border-color: var(--line-2); }
.wt-tabs button[aria-selected="true"] { background: none; color: var(--ink); border-bottom: 2px solid var(--c); box-shadow: none; }
.wt-nav { box-shadow: none; background: transparent; border-color: var(--ink); }

/* ---------------------------------------------------------------- footer */
footer.site { background: var(--night); color: rgba(244, 234, 213, .78); padding: clamp(64px, 8vw, 110px) 0 36px; }
.f-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.f-brand p { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.f-tag { font-family: var(--disp); font-size: 1.15rem; color: rgba(244, 234, 213, .7); padding-inline-start: 66px; }
footer.site .brand { color: var(--cream); font-size: clamp(2.2rem, 3.4vw, 3rem); }
footer.site .brand b { color: var(--lamp); }
footer.site .brand::before { width: 52px; height: 52px; margin-inline-end: 14px; }
.f-links, footer.site .explore { list-style: none; display: grid; gap: 12px; }
.f-links a, footer.site .explore a { color: var(--cream); text-decoration: none; font-size: 1rem; }
.f-links a:hover, footer.site .explore a:hover { color: var(--lamp); text-decoration: underline; }
footer.site nav.langs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-family: var(--chrome); font-size: .92rem; }
footer.site nav.langs a { color: rgba(244, 234, 213, .7); text-decoration: none; }
footer.site nav.langs a:hover { color: var(--cream); }
footer.site nav.langs a[aria-current="page"] { color: var(--lamp); }
.f-legal { margin-top: clamp(56px, 7vw, 90px); padding-top: 24px; border-top: 1px solid rgba(244, 234, 213, .16); font: var(--label); letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 234, 213, .55); }
.f-legal a { color: inherit; }

/* ------------------------------------------ long-form pages: an article */
body:not([data-v2]) .hero { padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
body:not([data-v2]) .hero h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); }
body:not([data-v2]) section:not(.hero):not(.shots) { padding-top: clamp(40px, 6vw, 80px); }
body:not([data-v2]) .grid.d2 { grid-template-columns: 1fr; max-width: 780px; margin-inline: auto; gap: 0; }
body:not([data-v2]) .grid.d2 > .card { background: transparent; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: clamp(32px, 4vw, 48px) 0; }
body:not([data-v2]) .grid.d2 > .card:first-child { border-top: 0; padding-top: 0; }
body:not([data-v2]) .card h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; margin-bottom: 18px; }
body:not([data-v2]) .card p { font-size: 1.08rem; line-height: 1.85; }
body:not([data-v2]) .card p a { font: inherit; letter-spacing: 0; text-transform: none; color: var(--link); }
body:not([data-v2]) .grid.d3 { gap: 0; border-top: 1px solid var(--line-2); }
body:not([data-v2]) .grid.d3 > .card { background: transparent; border: 0; border-radius: 0; border-inline-start: 1px solid var(--line-2); padding: 36px 30px; }
body:not([data-v2]) .grid.d3 > .card:first-child { border-inline-start: 0; }
.shots { padding: 56px 0 clamp(48px, 7vw, 80px); background: var(--sand); }

/* About "The mark": the Play icon beside the words that explain it */
.card#mark { display: flow-root; }
img.mark-img { float: left; width: 168px; height: auto; margin: 6px 32px 12px 0; border-radius: 22%; box-shadow: 0 18px 40px -16px rgba(14, 24, 48, .45); }
[dir="rtl"] img.mark-img { float: right; margin: 6px 0 12px 32px; }

/* ------------------------------------------------------- motion + anchors */
.v2-reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.v2-reveal.in { opacity: 1; transform: none; }
.v2-land { animation: v2-land 2.2s var(--ease); }
@keyframes v2-land { 0% { background-color: transparent; } 20% { background-color: rgba(240, 201, 127, .28); } 100% { background-color: transparent; } }
:target { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .v2-reveal { opacity: 1; transform: none; }
  .marquee .track { flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee span:nth-child(n+7) { display: none; }
}

/* no horizontal page scroll: grid/flex children may shrink */
.hero.v2-split > .wrap > *, .grid > *, .v2-receipt > *, .f-grid > * { min-width: 0; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .card.dharma { grid-template-columns: 48px 64px minmax(0, 1fr) auto; row-gap: 12px; }
  .card.dharma p:not(:last-child) { grid-column: 3 / -1; grid-row: 2; }
  .card.dharma p:last-child { grid-column: 4; }
  .dharma-sym { width: 52px; height: 52px; font-size: 1.45rem; }
}
@media (max-width: 980px) {
  .hero.v2-split > .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero.v2-split h1, .hero.v2-split .sub { margin-inline: auto; }
  .hero.v2-split .cta-row { justify-content: center; }
  #why .grid.d3 { grid-template-columns: 1fr 1fr; }
  #advisor .wrap { grid-template-columns: 1fr; }
  #advisor .sec, #advisor .sec-sub { text-align: center; }
  #advisor .v2-receipt { grid-column: 1; grid-row: auto; margin-top: 56px; }
  #pricing .grid.d2 { grid-template-columns: 1fr; }
  .card.plan { border-inline-start: 0; border-top: 1px solid var(--line-2); }
  .card.plan:first-child { border-top: 0; }
  .stat-row { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .stat:nth-child(3) { border-inline-start: 0; }
  .f-grid { grid-template-columns: 1fr 1fr; }
  body:not([data-v2]) .grid.d3 > .card { border-inline-start: 0; border-top: 1px solid var(--line-2); }
}
@media (max-width: 760px) {
  header.site .wrap { grid-template-columns: auto 1fr; min-height: 60px; }
  .topnav { display: none; }
  header.site .brand { justify-self: start; font-size: 1.5rem; }
  .brand::before { width: 30px; height: 30px; }
  .lang-menu nav.langs { width: min(280px, calc(100vw - 32px)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero-door { width: min(300px, 82%); }
  .wrap { width: min(1240px, 100% - 36px); }
  .announce { font-size: .66rem; letter-spacing: .12em; }
  .btn { padding: 15px 24px; }
  #why .grid.d3 { grid-template-columns: 1fr; row-gap: 40px; }
  .card.dharma { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 24px 4px; }
  .card.dharma::before { display: none; }
  .dharma-sym { grid-column: 1; width: 46px; height: 46px; font-size: 1.25rem; }
  .card.dharma h3 { grid-column: 2; font-size: 2rem; }
  .card.dharma p:last-child { grid-column: 3; }
  .card.dharma p:not(:last-child) { grid-column: 1 / -1; }
  .card.dharma p:last-child a { font-size: 0; }
  .card.dharma p:last-child a::after { content: '\2192'; font-size: 1.3rem; }
  [dir="rtl"] .card.dharma p:last-child a::after { content: '\2190'; }
  .stat-row { grid-template-columns: 1fr; }
  .stat { border-inline-start: 0; }
  .v2-receipt .device, .v2-receipt .device:nth-child(2) { width: 31%; }
  .f-grid { grid-template-columns: 1fr; }
  .wt-stage { gap: 8px; }
  .wt-phone, .wt-phone.wt-device { width: min(260px, calc(100vw - 130px)); }
  .wt-nav { width: 42px; height: 42px; }
  img.mark-img, [dir="rtl"] img.mark-img { float: none; display: block; width: 140px; margin: 0 auto 24px; }
}

/* marks centred in their circles (v2.js measures each glyph's ink) */
.marquee i, .pill, .dharma-sym { position: relative; overflow: hidden; }
.gsym { position: absolute; inset: 21%; background: center / contain no-repeat; font-size: 0; color: transparent; }

/* One bezel ratio for every phone on the site (founder, 15 Sep 2026: "bazel
   sab jagah ek ratio mein rakho jisse mobile view sleek lage").
   The old rule set the bezel as padding in %, and CSS resolves padding %
   against the PARENT's width. So the same frame drew 2.9px in the hero,
   ~4.7px in the advisor row and 8.9px in the walkthrough. Now the screen
   is inset inside its OWN frame: left/right % resolve against the phone's
   width and top/bottom % against its height, so 0.7% of the width on the
   sides and 1.4/2.2132 = 0.6326% of the height top and bottom give the
   same black line on all four sides, at 1.4% of that phone's own width
   (0.7% first; doubled at the founder's request the same day),
   whatever its size. The side buttons and the metal rim are thinner too,
   and the buttons scale with the phone. */
.device, .wt-phone.wt-device { padding: 0; box-shadow: inset 0 0 0 1px #2a2b30, 0 0 0 1px #d9dbe5, 0 0 0 1.75px #a4a8b8, 0 22px 44px -20px rgba(20, 31, 53, .45); }
.device .screen, .wt-phone.wt-device .wt-screen.wt-real { position: absolute; inset: 0.6326% 1.4%; width: auto; height: auto; }
.device::before, .wt-phone.wt-device::before { right: -1.7%; width: 1%; }
.device::after, .wt-phone.wt-device::after { right: -1.7%; width: 1%; }

/* faith icons in 3D (founder, 15 Sep 2026): each circle is lit from the
   upper left like a glazed bead: a soft highlight, a darker lower rim, an
   inner bevel, a coloured drop shadow, and the mark itself embossed. */
.pill.hindu, .marquee .hindu i { --acc: var(--hindu); }
.pill.muslim, .marquee .muslim i { --acc: var(--muslim); }
.pill.sikh, .marquee .sikh i { --acc: var(--sikh); }
.pill.christian, .marquee .christian i { --acc: var(--christian); }
.pill.jain, .marquee .jain i { --acc: var(--jain); }
.pill.buddhist, .marquee .buddhist i { --acc: var(--buddhist); }
.dharma-sym, .pill, .marquee i {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--acc) 82%, #fff) 0, var(--acc) 55%, color-mix(in srgb, var(--acc) 62%, #000) 100%);
}
.dharma-sym {
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .45), inset 0 -5px 8px rgba(0, 0, 0, .28),
    0 10px 18px -6px color-mix(in srgb, var(--acc) 70%, transparent), 0 3px 5px rgba(0, 0, 0, .18);
}
.card.dharma:hover .dharma-sym { transform: translateY(-3px) rotate(-8deg) scale(1.06); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .5), inset 0 -5px 8px rgba(0, 0, 0, .28), 0 16px 26px -8px color-mix(in srgb, var(--acc) 75%, transparent), 0 4px 8px rgba(0, 0, 0, .2); }
.pill { box-shadow: 0 0 0 3px var(--sand), inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -2px 3px rgba(0, 0, 0, .28), 0 4px 8px -2px rgba(0, 0, 0, .3); }
.marquee i { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -3px 5px rgba(0, 0, 0, .3), 0 4px 10px -2px rgba(0, 0, 0, .5); }
.gsym { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)) drop-shadow(0 -0.5px 0 rgba(255, 255, 255, .25)); }

/* ===================== v3 "2050" layer (founder, 15 Sep 2026) ===========
   Unit 1, the hero X effect. At rest (no scroll, no pointer) the hero is
   the v2 hero; every effect below is driven by variables v2.js sets, and
   none of them runs under prefers-reduced-motion. */
.hero.v2-split { --p: 0; }
.hero.v2-split .hero-copy { transform: translateY(calc(var(--p) * -56px)); opacity: calc(1 - var(--p) * .9); }
.hero-door {
  --tx: 0; --ty: 0;
  transform: translateY(calc(var(--p, 0) * -30px)) scale(calc(1 + var(--p, 0) * .2));
  background:
    radial-gradient(55% 45% at calc(50% + var(--tx) * 10%) calc(62% + var(--ty) * 7%), rgba(255, 240, 200, .95), rgba(240, 201, 127, calc(.45 + var(--p, 0) * .3)) 55%, rgba(240, 201, 127, 0) 80%),
    linear-gradient(180deg, #FFF6DF, #F3E3BC);
}
.hero-door .device {
  z-index: 3; animation: x-float 7s var(--ease) infinite;
  transform: perspective(900px) rotateY(calc(var(--tx) * 14deg)) rotateX(calc(var(--ty) * -10deg));
}
@keyframes x-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.hero-door .device .screen::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 48%, rgba(255, 255, 255, .06) 54%, transparent 62%);
  background-size: 260% 100%; background-position: calc(60% - var(--tx) * 45%) 0;
}
.hero-door .x-over { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; z-index: 1; }
.hero-door .x-over.on { opacity: 1; }
.x-motes { position: absolute; left: -35%; top: -15%; width: 170%; height: 135%; pointer-events: none; z-index: 2; }
.x-lang { display: inline-block; margin-inline-start: 2px; padding-inline-start: 10px; border-inline-start: 1px solid rgba(201, 168, 85, .45); }
.x-lang b { display: inline-block; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gold-deep); }
.x-lang b.in { animation: x-lang-in .55s var(--ease); }
@keyframes x-lang-in { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero.v2-split .hero-copy, .hero-door, .hero-door .device { transform: none !important; opacity: 1 !important; }
}

/* Unit 2, scroll story and page transitions.
   Words: hidden only once theme.js has split them (.x-words), so a page
   without script is never blank. */
.x-words .xw { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.x-words.x-in .xw { opacity: 1; transform: none; filter: none; }
.x-rise { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.x-rise.x-in { opacity: 1; transform: none; }
/* the numbered faiths: a line of lamp light draws across each row as it arrives */
.card.dharma { position: relative; }
.card.dharma::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--acc), var(--gold), transparent);
  transition: transform 1.3s var(--ease) .15s;
}
[dir="rtl"] .card.dharma::after { transform-origin: right; }
.card.dharma.in::after, .card.dharma:hover::after { transform: scaleX(1); }
/* one page into the next: the wordmark stays put and the title carries over */
@view-transition { navigation: auto; }
header.site .brand { view-transition-name: zs-brand; }
.hero h1 { view-transition-name: zs-title; }
::view-transition-old(root) { animation: .35s var(--ease) both x-vt-out; }
::view-transition-new(root) { animation: .5s var(--ease) both x-vt-in; }
@keyframes x-vt-out { to { opacity: 0; transform: translateY(-12px); filter: blur(4px); } }
@keyframes x-vt-in { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .x-words .xw, .x-rise { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* Unit 3, material and micro-interactions. */
/* paper grain over the whole page, like a printed page rather than a screen */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .045;
  background-image: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* slow aurora of lamp light and night blue in the dark bands */
#advisor, .marquee, footer.site { position: relative; isolation: isolate; overflow: hidden; }
#advisor::before, footer.site::before {
  content: ''; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 34% at 22% 30%, rgba(240, 201, 127, .16), transparent 70%),
    radial-gradient(30% 36% at 78% 70%, rgba(92, 120, 190, .22), transparent 70%),
    radial-gradient(24% 30% at 60% 20%, rgba(201, 168, 85, .10), transparent 70%);
  animation: x-aurora 26s ease-in-out infinite alternate;
}
footer.site::before { animation-duration: 34s; opacity: .8; }
@keyframes x-aurora { from { transform: translate3d(-4%, -3%, 0) rotate(0deg); } to { transform: translate3d(5%, 4%, 0) rotate(8deg); } }
/* a glare that follows the pointer across a card */
.card.plan.x-glare, body .grid.d3 > .card.x-glare, .card#mark.x-glare { background-image: radial-gradient(360px circle at var(--mx, -400px) var(--my, -400px), rgba(240, 201, 127, .16), transparent 62%); }
.card.plan.founding-plan.card.plan.x-glare, body .grid.d3 > .card.x-glare, .card#mark.x-glare { background-image: radial-gradient(360px circle at var(--mx, -400px) var(--my, -400px), rgba(240, 201, 127, .20), transparent 62%); }
/* magnetic buttons settle back smoothly */
.btn { transition: translate .35s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease); }
/* the faith icon turns once in 3D when its row is hovered */
.card.dharma:hover .dharma-sym { animation: x-spin .9s var(--ease); }
@keyframes x-spin { from { rotate: y 0deg; } to { rotate: y 360deg; } }
/* header tightens once the page has moved */
header.site { transition: box-shadow .35s var(--ease), background .35s; }
header.site .wrap { transition: min-height .35s var(--ease); }
header.site.x-scrolled { box-shadow: 0 10px 30px -18px rgba(14, 24, 48, .35); background: color-mix(in srgb, var(--paper) 82%, transparent); }
header.site.x-scrolled .wrap { min-height: 58px; }
/* the language menu opens like a sheet */
.lang-menu[open] nav.langs { animation: x-sheet .28s var(--ease); transform-origin: top right; }
[dir="rtl"] .lang-menu[open] nav.langs { transform-origin: top left; }
@keyframes x-sheet { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  #advisor::before, footer.site::before { animation: none; }
}

/* Unit 5, every script set as its own (founder, 15 Sep 2026: "koi bhasha
   translation jaisi na lage"). A sweep of all ten locales found two things
   the Latin design had imposed on every script:
   1. letter-spacing on labels, buttons and the header. On Arabic and Urdu
      it pulls the joined letters of a word apart; on Indic scripts it
      separates vowel signs from their consonants. It is removed for every
      non-Latin page, and those labels are not uppercased anyway.
   2. Latin line-heights (headings at 1.04 to 1.1). Nastaliq has tall
      ascenders and deep descenders, and Devanagari, Gurmukhi, Bengali and
      Gujarati carry matras above the headline, so tight lines clip or
      collide. Each script now gets its own leading and, where its words
      run long (Tamil, Telugu), a slightly smaller display size. */
html:not([lang="en"]) :is(.announce, .topnav, .topnav a, .lang-menu, .kicker, .tag, .label, .btn, .hero .date, .stat span, .cmp thead th, .wt-tabs button, .f-legal, .card p a, #why .sec, .card.dharma::before, .x-lang b) { letter-spacing: 0 !important; }

/* Devanagari (hi, mr), Gurmukhi (pa), Bengali (bn), Gujarati (gu) */
html:is([lang="hi"], [lang="mr"], [lang="pa"], [lang="bn"], [lang="gu"]) body { line-height: 1.85; }
html:is([lang="hi"], [lang="mr"], [lang="pa"], [lang="bn"], [lang="gu"]) :is(h1, h2, h3, .sec, .stat b, #why .sec-sub) { line-height: 1.38; }
html:is([lang="hi"], [lang="mr"], [lang="pa"], [lang="bn"], [lang="gu"]) .card.dharma h3 { line-height: 1.25; }

/* Tamil and Telugu: long agglutinated words */
html:is([lang="ta"], [lang="te"]) body { line-height: 1.85; }
html:is([lang="ta"], [lang="te"]) :is(h1, h2, h3, .sec, #why .sec-sub) { line-height: 1.42; overflow-wrap: anywhere; }
html:is([lang="ta"], [lang="te"]) .hero h1 { font-size: clamp(2rem, 4.4vw, 3.7rem); }
html:is([lang="ta"], [lang="te"]) .sec { font-size: clamp(1.8rem, 3.5vw, 3rem); }
html:is([lang="ta"], [lang="te"]) #why .sec-sub { font-size: clamp(1.5rem, 3vw, 2.6rem); }
html:is([lang="ta"], [lang="te"]) .card.dharma h3 { font-size: clamp(1.7rem, 3.3vw, 2.8rem); line-height: 1.3; }

/* Urdu, Nastaliq: the tallest script on the site */
html[lang="ur"] body { line-height: 2.15; }
html[lang="ur"] :is(h1, h2, h3, .sec, #why .sec-sub) { line-height: 1.85; }
html[lang="ur"] .card.dharma h3, html[lang="ur"] .stat b { line-height: 1.7; }
html[lang="ur"] .card p, html[lang="ur"] .hero .sub { line-height: 2.2; }

/* Arabic, Naskh */
html[lang="ar"] body { line-height: 1.95; }
html[lang="ar"] :is(h1, h2, h3, .sec, #why .sec-sub) { line-height: 1.45; }

/* numbers and Latin names inside RTL text keep their own direction */
[dir="rtl"] :is(.stat b, .price) { unicode-bidi: plaintext; }

/* Unit 4, real app recordings over the advisor screenshots */
.device .screen video.x-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .6s ease; z-index: 1; background: transparent; }
.device .screen video.x-vid.on { opacity: 1; }

/* The doorway in a deeper colour (founder, 15 Sep 2026: "dwar ka colour
   deeper colour mein dalo tabhi light ka maza hai"). The arch is now the
   icon's own night blue, so light reads as light: a lamp hangs at the top
   of the arch as in the logo, its glow pools around the phone and spills
   over the threshold, and the motes and glint show against the dark.
   Same shape, size and phone as before. */
.hero-door {
  background:
    radial-gradient(36% 16% at 50% 9%, rgba(255, 206, 120, .42), rgba(255, 206, 120, 0) 100%),
    radial-gradient(78% 58% at calc(50% + var(--tx, 0) * 10%) calc(56% + var(--ty, 0) * 7%), rgba(255, 196, 110, calc(.42 + var(--p, 0) * .25)), rgba(240, 160, 70, .16) 48%, rgba(240, 160, 70, 0) 74%),
    radial-gradient(90% 40% at 50% 104%, rgba(255, 200, 110, .42), transparent 72%),
    linear-gradient(180deg, #22325A 0%, #14203F 50%, #0B1430 100%);
  border: 1px solid rgba(240, 201, 127, .7);
  box-shadow:
    inset 0 0 0 6px rgba(14, 24, 48, .9), inset 0 0 0 7px rgba(240, 201, 127, .38),
    0 36px 70px -26px rgba(14, 24, 48, .55), 0 0 90px -14px rgba(240, 190, 100, .45);
}
.hero-door::before {
  /* the hanging lamp, drawn to match the Play icon: a fine chain from the
     top of the arch, a teardrop flame with a white core, a small gold bowl */
  content: ''; position: absolute; left: 50%; top: 0; height: 12%; aspect-ratio: 40 / 70; translate: -50% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 70'%3E %3Cdefs%3E %3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE7B0'/%3E%3Cstop offset='.55' stop-color='%23F4B25A'/%3E%3Cstop offset='1' stop-color='%23E4892C'/%3E%3C/linearGradient%3E %3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23E7C987'/%3E%3Cstop offset='1' stop-color='%239C7A3C'/%3E%3C/linearGradient%3E %3CradialGradient id='g' cx='.5' cy='.62' r='.5'%3E%3Cstop offset='0' stop-color='%23FFE2A6' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23FFE2A6' stop-opacity='0'/%3E%3C/radialGradient%3E %3C/defs%3E %3Cellipse cx='20' cy='46' rx='19' ry='22' fill='url(%23g)'/%3E %3Crect x='19.4' y='0' width='1.2' height='31' rx='.6' fill='%23D9B46A'/%3E %3Cpath d='M20 29 C25.5 37.5 28 42.5 28 47.5 A8 8 0 0 1 12 47.5 C12 42.5 14.5 37.5 20 29 Z' fill='url(%23f)'/%3E %3Cpath d='M20 38 C22.6 42 23.8 44.6 23.8 47.4 A3.8 3.8 0 0 1 16.2 47.4 C16.2 44.6 17.4 42 20 38 Z' fill='%23FFF8EC'/%3E %3Cpath d='M8.5 53.4 Q20 69 31.5 53.4 Z' fill='url(%23b)'/%3E %3Cellipse cx='20' cy='53.4' rx='11.5' ry='2.6' fill='%236E5A33'/%3E %3C/svg%3E") center top / contain no-repeat; pointer-events: none; z-index: 1;
  transform-origin: 50% 0; animation: x-lamp 5.5s ease-in-out infinite;
}
@keyframes x-lamp { 0%, 100% { rotate: -1.2deg; filter: drop-shadow(0 0 6px rgba(255, 200, 110, .55)); } 50% { rotate: 1.2deg; filter: drop-shadow(0 0 12px rgba(255, 200, 110, .85)); } }
@media (prefers-reduced-motion: reduce) { .hero-door::before { animation: none; filter: drop-shadow(0 0 8px rgba(255, 200, 110, .7)); } }
.hero-door::after { background: radial-gradient(50% 50% at 50% 0, rgba(255, 196, 100, .75), transparent 70%); }

/* ================= every section its own atmosphere ======================
   Founder, 15 Sep 2026: "har section ko special feel karwao; kuch
   background mein bhi effect daalo". Each section gets a background that
   says what the section is about. All are CSS only, animate only transform
   and opacity (cheap for the GPU), sit behind the content (z-index -1
   inside an isolated section), and hold still under prefers-reduced-motion.
   Colour stays in the brand's neutral range; the six tradition colours
   appear together and in equal measure, never one alone.
     why        - concentric arches breathing outward from the doorway
     compare    - a receipt ledger with a verifying light scanning down it
     dharma     - six soft lights, one per tradition, drifting together
     advisor    - a night sky of slowly twinkling stars (plus the aurora)
     pricing    - a single slow sheen passing over the plans
     walkthrough- rays of lamp light turning slowly behind the phone
     guru       - rings widening from the centre, one connection to another
     footer     - stars, and the doorway's arch as a faint watermark     */
#why, #walkthrough { isolation: isolate; overflow: hidden; }
#why::after, #advisor::after, #walkthrough::after, footer.site::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
}

/* why: arches breathing out of the doorway */
#why::after {
  left: 50%; top: 58%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; opacity: .55;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(201, 168, 85, .20) 58px 59px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 30%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 30%, transparent 62%);
  animation: x-breathe 14s ease-in-out infinite;
}
@keyframes x-breathe { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.08); opacity: .7; } }

/* advisor: a night sky */
#advisor::after, footer.site::after {
  inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 18%, rgba(255, 240, 210, .9), transparent 60%),
    radial-gradient(1px 1px at 22% 72%, rgba(255, 240, 210, .7), transparent 60%),
    radial-gradient(1.4px 1.4px at 37% 32%, rgba(255, 240, 210, .8), transparent 60%),
    radial-gradient(1px 1px at 51% 84%, rgba(255, 240, 210, .6), transparent 60%),
    radial-gradient(1.3px 1.3px at 64% 14%, rgba(255, 240, 210, .85), transparent 60%),
    radial-gradient(1px 1px at 76% 58%, rgba(255, 240, 210, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 89% 26%, rgba(255, 240, 210, .9), transparent 60%),
    radial-gradient(1px 1px at 94% 80%, rgba(255, 240, 210, .6), transparent 60%),
    radial-gradient(1.2px 1.2px at 3% 62%, rgba(255, 240, 210, .7), transparent 60%),
    radial-gradient(1px 1px at 45% 6%, rgba(255, 240, 210, .6), transparent 60%);
  background-size: 620px 460px;
  animation: x-twinkle 5s ease-in-out infinite alternate;
}
footer.site::after { opacity: .6; animation-duration: 7s; }
@keyframes x-twinkle { from { opacity: .35; } to { opacity: 1; } }

/* walkthrough: rays of lamp light turning slowly behind the phone */
#walkthrough::after {
  left: 50%; top: 62%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
  background: repeating-conic-gradient(from 0deg, rgba(240, 190, 100, .10) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 16%, transparent 55%);
  mask-image: radial-gradient(circle, #000 0 16%, transparent 55%);
  animation: x-rays 80s linear infinite;
}
@keyframes x-rays { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  #why::after, #advisor::after, #walkthrough::after, footer.site::after { animation: none; }
}

/* "Why ZindSa" icons in 3D (founder, 15 Sep 2026: "3D effect mein le kar
   aao"). Each disc is a lit, domed tile: highlight top-left, a warm
   shadowed rim below, an inner bevel and a soft cast shadow on the sand.
   On hover it lifts and tilts toward the reader. */
#why .card { perspective: 700px; }
#why .illo {
  background: radial-gradient(circle at 32% 24%, #FFFFFF 0, #FBF7EE 34%, #EFE3CB 78%, #E2D1AE 100%);
  box-shadow:
    inset 0 3px 4px rgba(255, 255, 255, .95), inset 0 -8px 14px rgba(138, 108, 46, .22), inset 0 0 0 1px rgba(201, 168, 85, .35),
    0 18px 26px -14px rgba(60, 45, 20, .45), 0 4px 8px -2px rgba(60, 45, 20, .16);
  transform: translateZ(0);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
#why .card:hover .illo {
  transform: translateY(-6px) rotateX(10deg) rotateY(-12deg) scale(1.04);
  box-shadow:
    inset 0 3px 4px rgba(255, 255, 255, .95), inset 0 -8px 14px rgba(138, 108, 46, .24), inset 0 0 0 1px rgba(201, 168, 85, .45),
    14px 26px 34px -16px rgba(60, 45, 20, .5), 0 6px 10px -2px rgba(60, 45, 20, .18);
}
@media (prefers-reduced-motion: reduce) { #why .card:hover .illo { transform: none; } }

/* ======================= site v3 PREMIUM layer ==========================
   Founder, 15 Sep 2026: "website ko ab premium look dene ke liye" ->
   "ok sab ready kar dena". Premium here means restraint and one system:
   1. one motion language: a single easing and three durations;
   2. quieter atmosphere: grain, aurora and stars turned down;
   3. gold only for light: CTAs, the lamp, the active state;
   4. one type scale, lining tabular figures for prices and numbers;
   5. hairlines and two corner radii everywhere;
   6. phones as objects: a glass reflection and a soft ground shadow. */
:root {
  --ease: cubic-bezier(.22, .61, .21, 1);
  --t-fast: .28s; --t-mid: .65s; --t-slow: 1.1s;
  --r-sm: 10px; --r: 18px; --r-lg: 18px;
  --hair: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  --hair-2: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  --line: color-mix(in srgb, var(--ink) 11%, transparent);
  --line-2: color-mix(in srgb, var(--ink) 20%, transparent);
  /* type scale, ratio ~1.25 */
  --fs-label: .74rem; --fs-body: 1.06rem; --fs-h3: clamp(1.45rem, 2vw, 1.75rem);
  --fs-h2: clamp(2.1rem, 3.9vw, 3.35rem); --fs-display: clamp(2.5rem, 5vw, 4.4rem);
}

/* 1. motion: everything moves on one curve at one of three speeds */
.btn, .topnav a, .lang-menu summary, .card, .card.dharma, .dharma-sym, .wt-tabs button, .gallery img, a { transition-timing-function: var(--ease); }
.btn { transition-duration: var(--t-fast); }
.v2-reveal, .x-rise { transition-duration: var(--t-slow) !important; transition-timing-function: var(--ease) !important; }
.x-words .xw { transition-duration: var(--t-mid); transition-timing-function: var(--ease); filter: blur(4px); transform: translateY(.3em); transition-delay: calc(var(--i) * 38ms); }
.card.dharma::after { transition-duration: var(--t-slow); transition-timing-function: var(--ease); }

/* 2. a quieter room */
body::after { opacity: .028; }
#advisor::before, footer.site::before { opacity: .7; }
#advisor::after { animation-duration: 8s; }
footer.site::after { opacity: .35; }
#why::after { opacity: .35; }
#walkthrough::after { opacity: .7; }

/* 3. gold only for light */
.tag, .kicker, #why .sec, .label { color: color-mix(in srgb, var(--gold-text) 88%, var(--ink)); }
.card li::marker { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.card.plan.pro { background: color-mix(in srgb, var(--sand) 70%, var(--surface)); }
.cmp td.yes, .cmp thead th:nth-child(2) { background: color-mix(in srgb, var(--sand) 75%, var(--surface)); }
.cmp td.yes::before { background: var(--night); color: var(--lamp); }

/* 4. one type scale, and figures that line up */
.sec { font-size: var(--fs-h2); letter-spacing: -.012em; }
.card h3, #why .card h3 { font-size: var(--fs-h3); letter-spacing: -.005em; }
.card p, .sec-sub { font-size: var(--fs-body); }
.tag, .kicker, .topnav, .announce, .stat span, .cmp thead th { font-size: var(--fs-label); }
.stat b, .price, .cmp td, .hero .date b, .x-lang b { font-variant-numeric: lining-nums tabular-nums; }
body:not([data-v2]) .hero h1 { font-size: var(--fs-display); }

/* 5. hairlines and two radii */
header.site { border-bottom: var(--hair); }
#why .card, .card.dharma, body:not([data-v2]) .grid.d2 > .card { border-top: var(--hair-2); }
#dharma .grid.d3 { border-bottom: var(--hair-2); }
.cmp { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.cmp th, .cmp td { border-bottom: var(--hair); }
#pricing .grid.d2 { border: var(--hair-2); border-radius: var(--r); }
.card.plan { border-inline-start: var(--hair-2); }
.card.plan:first-child { border-inline-start: 0; }
.lang-menu nav.langs { border-radius: var(--r); }
.lang-menu nav.langs a { border-radius: var(--r-sm); }

/* 6. phones as objects: glass reflection and a ground shadow */
.device .screen::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 22%, transparent 34%),
    linear-gradient(118deg, transparent 58%, rgba(255, 255, 255, .06) 70%, transparent 78%);
}
.hero-door .device .screen::after {
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .20) 48%, rgba(255, 255, 255, .05) 54%, transparent 62%),
    linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, transparent 30%);
  background-size: 260% 100%, 100% 100%; background-position: calc(60% - var(--tx, 0) * 45%) 0, 0 0;
}
.v2-receipt .device, .shot .device, .wt-phone.wt-device {
  filter: drop-shadow(0 30px 28px rgba(11, 20, 48, .28)) drop-shadow(0 8px 10px rgba(11, 20, 48, .14));
}
.device, .wt-phone.wt-device {
  box-shadow: inset 0 0 0 1px #2a2b30, 0 0 0 1px #e4e6ee, 0 0 0 1.75px #9ea3b5, 0 1px 0 2px rgba(255, 255, 255, .25);
}

/* the language menu: each script large and clear, the current one lit */
.lang-menu nav.langs { width: 300px; padding: 12px; gap: 4px; }
.lang-menu nav.langs a { font-size: 1.02rem; padding: 10px 14px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.lang-menu nav.langs a:hover { background: color-mix(in srgb, var(--sand) 80%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.lang-menu nav.langs a[aria-current="page"] { background: var(--night); color: var(--lamp); box-shadow: 0 6px 18px -8px rgba(240, 190, 100, .7); }

/* A real italic for the English display accent (founder, 15 Sep 2026:
   premium, "sab ready kar dena"). Cormorant Garamond Italic, SIL Open Font
   License 1.1, self-hosted (latin subset, variable 300-700), so no visitor
   ever contacts Google. Only English uses it: the other nine scripts have
   no italic tradition, and their accent stays upright gold. */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/cormorantgaramond-v21-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html[lang="en"] .hero.v2-split h1 em {
  font-family: 'Cormorant Garamond', var(--disp); font-style: italic; font-weight: 600;
  font-size: 1.14em; letter-spacing: -.01em; line-height: 1; padding-inline-end: .06em;
}

/* Premium: the lamp is lit, and the page opens in its light. Home page,
   first visit only (html.x-intro-on is set by an inline boot before first
   paint; v2.js records the visit). 1.5s in all: night, the flame catches,
   its light widens until it has opened the whole page. The animation ends
   fully transparent and click-through on its own, so a failed script can
   never leave the overlay in place. Never under reduced motion. */
:root { --x-lamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 70'%3E %3Cdefs%3E %3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE7B0'/%3E%3Cstop offset='.55' stop-color='%23F4B25A'/%3E%3Cstop offset='1' stop-color='%23E4892C'/%3E%3C/linearGradient%3E %3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23E7C987'/%3E%3Cstop offset='1' stop-color='%239C7A3C'/%3E%3C/linearGradient%3E %3CradialGradient id='g' cx='.5' cy='.62' r='.5'%3E%3Cstop offset='0' stop-color='%23FFE2A6' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23FFE2A6' stop-opacity='0'/%3E%3C/radialGradient%3E %3C/defs%3E %3Cellipse cx='20' cy='46' rx='19' ry='22' fill='url(%23g)'/%3E %3Crect x='19.4' y='0' width='1.2' height='31' rx='.6' fill='%23D9B46A'/%3E %3Cpath d='M20 29 C25.5 37.5 28 42.5 28 47.5 A8 8 0 0 1 12 47.5 C12 42.5 14.5 37.5 20 29 Z' fill='url(%23f)'/%3E %3Cpath d='M20 38 C22.6 42 23.8 44.6 23.8 47.4 A3.8 3.8 0 0 1 16.2 47.4 C16.2 44.6 17.4 42 20 38 Z' fill='%23FFF8EC'/%3E %3Cpath d='M8.5 53.4 Q20 69 31.5 53.4 Z' fill='url(%23b)'/%3E %3Cellipse cx='20' cy='53.4' rx='11.5' ry='2.6' fill='%236E5A33'/%3E %3C/svg%3E"); }
@property --x-hole { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
html.x-intro-on::before {
  content: ''; position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 222, 160, .55) 0, rgba(240, 176, 80, .20) 9%, transparent 26%),
    #0B1430;
  -webkit-mask-image: radial-gradient(circle at 50% 44%, transparent var(--x-hole), #000 calc(var(--x-hole) + 14%));
  mask-image: radial-gradient(circle at 50% 44%, transparent var(--x-hole), #000 calc(var(--x-hole) + 14%));
  animation: x-intro-open 1.5s cubic-bezier(.65, 0, .35, 1) forwards;
}
html.x-intro-on::after {
  content: ''; position: fixed; left: 50%; top: 44%; z-index: 10001; pointer-events: none;
  width: 46px; aspect-ratio: 40 / 70; translate: -50% -62%;
  background: var(--x-lamp) center / contain no-repeat;
  animation: x-intro-lamp 1.5s cubic-bezier(.22, .61, .21, 1) forwards;
}
@keyframes x-intro-open {
  0%, 38% { --x-hole: 0%; opacity: 1; }
  100% { --x-hole: 120%; opacity: 1; visibility: hidden; }
}
@keyframes x-intro-lamp {
  0% { opacity: 0; scale: .6; filter: drop-shadow(0 0 0 rgba(255, 200, 110, 0)); }
  22% { opacity: 1; scale: 1; filter: drop-shadow(0 0 18px rgba(255, 200, 110, .9)); }
  48% { opacity: 1; scale: 1.08; filter: drop-shadow(0 0 34px rgba(255, 200, 110, 1)); }
  100% { opacity: 0; scale: 1.5; filter: drop-shadow(0 0 60px rgba(255, 200, 110, 0)); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { html.x-intro-on::before, html.x-intro-on::after { display: none; } }

/* The organised footer (founder, 15 Sep 2026: "footer ko aur organised
   karo"): top band, three icon-headed columns, bottom bar. */
.f-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid rgba(244, 234, 213, .14); }
.f-top .f-brand p:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.f-contact { margin-top: 18px; padding-inline-start: 66px; font: 400 .95rem/1.5 var(--chrome); }
.f-contact a { color: rgba(244, 234, 213, .75); text-decoration: none; border-bottom: 1px solid rgba(244, 234, 213, .25); }
.f-contact a:hover { color: var(--lamp); border-color: var(--lamp); }
.f-cta { flex: none; }
.f-cols { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: clamp(28px, 5vw, 88px); padding: clamp(36px, 5vw, 56px) 0; }
.f-col { min-width: 0; }
.f-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 20px; border-radius: 50%; color: var(--lamp); border: 1px solid rgba(240, 201, 127, .35); background: radial-gradient(circle at 35% 30%, rgba(240, 201, 127, .16), transparent 70%); }
.f-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.f-ico svg circle[r="1.6"] { fill: currentColor; stroke: none; }
.f-col .f-links, .f-col .explore { display: grid; gap: 12px; }
.f-col-langs nav.langs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.f-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 22px; border-top: 1px solid rgba(244, 234, 213, .14); }
.f-bottom .f-legal { margin: 0; padding: 0; border: 0; }
.f-legal-links { list-style: none; display: flex; gap: 26px; font: var(--label); letter-spacing: .1em; text-transform: uppercase; }
.f-legal-links a { color: rgba(244, 234, 213, .6); text-decoration: none; }
.f-legal-links a:hover { color: var(--lamp); }
html:not([lang="en"]) .f-legal-links { letter-spacing: 0; text-transform: none; font-size: .9rem; }
@media (max-width: 760px) {
  .f-top { flex-direction: column; align-items: flex-start; }
  .f-cols { grid-template-columns: 1fr 1fr; }
  .f-col-langs { grid-column: 1 / -1; }
  .f-bottom { flex-direction: column; align-items: flex-start; }
}
footer.site .btn.gold.f-cta { background: linear-gradient(180deg, #F8D58A, #E7B455); color: #1A1204; box-shadow: 0 10px 28px -12px rgba(240, 190, 100, .7); }
footer.site .btn.gold.f-cta:hover { background: var(--cream); color: var(--ink); }

/* 3D art in the Pro and Founding Lifetime cards (founder, 15 Sep 2026):
   Pro - the structural report with its gold seal; Founding - a golden key
   whose bow is the doorway. It floats gently and turns toward a hovering
   pointer. Decorative: alt="" and no text inside the art. */
.plan-art { margin-top: auto; padding-top: 26px; display: grid; place-items: center; perspective: 800px; }
.plan-art img { width: min(250px, 100%); height: auto; animation: x-art-float 6.5s ease-in-out infinite; transition: transform var(--t-mid, .6s) var(--ease); filter: drop-shadow(0 18px 22px rgba(60, 45, 20, .16)); }
.founding-art img { filter: drop-shadow(0 18px 28px rgba(240, 190, 100, .22)); }
.card.plan:hover .plan-art img { transform: rotateY(-14deg) rotateX(6deg) scale(1.04); }
@keyframes x-art-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.card.plan.founding-plan .btn { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .plan-art img { animation: none; } .card.plan:hover .plan-art img { transform: none; } }

/* The hero doorway in 3D (founder, 15 Sep 2026: "hero mein dwar ko 3D mein
   convert karo"). A real doorway rather than a flat arch:
   - a thick gold frame, lit from the upper left, with its side (depth)
     visible behind it;
   - an inner recess: the jambs and the head of the arch cast shadow inward,
     so the night inside reads as space, not paint;
   - a stone-and-gold step the door stands on, its top face catching the
     lamp light and its front face in shade;
   - the whole doorway turns a few degrees toward the pointer in perspective,
     on top of the scroll walk-in. None of it moves under reduced motion. */
.hero.v2-split > .wrap { perspective: 1600px; }
.hero-door {
  border: 0; border-radius: 999px 999px 0 0; transform-style: flat; /* flat: the tilting phone must never cut through the door's plane */
  transform:
    translateY(calc(var(--p, 0) * -30px)) scale(calc(1 + var(--p, 0) * .2))
    rotateY(calc(var(--tx, 0) * 8deg)) rotateX(calc(var(--ty, 0) * -5deg));
  box-shadow:
    inset 26px 0 30px -18px rgba(3, 7, 20, .75), inset -26px 0 30px -18px rgba(3, 7, 20, .65),
    inset 0 30px 34px -20px rgba(3, 7, 20, .8), inset 0 0 0 1px rgba(240, 201, 127, .45),
    0 40px 80px -30px rgba(11, 20, 48, .6), 0 0 110px -18px rgba(240, 190, 100, .45);
  margin-bottom: 30px;
}
.door-frame, .door-depth {
  position: absolute; inset: -18px -18px 0 -18px; border-radius: 999px 999px 0 0; padding: 18px 18px 0 18px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.door-depth {
  z-index: 0; transform: translate(calc(7px - var(--tx, 0) * 5px), calc(9px - var(--ty, 0) * 4px));
  background: linear-gradient(160deg, #7A5620, #4A320E 60%, #2E1F08);
}
.door-frame {
  z-index: 5;
  background:
    radial-gradient(60% 40% at 22% 8%, rgba(255, 248, 220, .85), transparent 60%),
    linear-gradient(135deg, #FFEBB8 0%, #E9C170 18%, #C7973F 42%, #8A6424 64%, #B98C3E 80%, #E3BA68 100%);
  box-shadow: none;
}
.door-frame::after {
  /* the bevel: a bright line on the frame's outer edge, a dark one inside */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(255, 244, 210, .9), inset 0 0 0 16.5px transparent, inset 0 0 0 18px rgba(40, 26, 6, .55);
}
.door-step {
  position: absolute; left: -16%; right: -16%; bottom: -30px; height: 30px; z-index: 6; pointer-events: none;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(40% 90% at 50% 0, rgba(255, 214, 140, .85), transparent 70%),
    linear-gradient(180deg, #F4DCA6 0 38%, #C9A058 39%, #9C7738 70%, #6E5020 100%);
}
.hero-door::after { bottom: -56px; }
@media (prefers-reduced-motion: reduce) { .hero-door { transform: none !important; } }

/* Doorway refinements (founder, 15 Sep 2026: "dwar ko stable rakho, curve
   edge rakho; bright dwar hole"):
   - stable: the doorway no longer turns with the pointer or grows on
     scroll. The phone inside keeps its gentle float and glint;
   - curved edges: the frame's outer and inner edges, its feet and the
     step are rounded;
   - a bright opening: the lamp's warm light now fills the doorway, with
     night only at its edges. */
.hero-door, .hero-door { transform: none !important; }
.door-depth { transform: translate(6px, 8px) !important; }
.hero-door {
  border-radius: 999px 999px 18px 18px;
  background:
    radial-gradient(40% 18% at 50% 10%, rgba(255, 236, 190, .95), rgba(255, 214, 140, 0) 100%),
    radial-gradient(70% 62% at 50% 52%, rgba(255, 236, 196, .96) 0%, rgba(255, 210, 132, .78) 34%, rgba(236, 170, 80, .42) 62%, rgba(236, 170, 80, 0) 86%),
    radial-gradient(95% 42% at 50% 102%, rgba(255, 220, 150, .75), transparent 72%),
    linear-gradient(180deg, #2A3A66 0%, #1A2750 55%, #121C3E 100%);
  box-shadow:
    inset 18px 0 26px -18px rgba(3, 7, 20, .55), inset -18px 0 26px -18px rgba(3, 7, 20, .45),
    inset 0 22px 30px -22px rgba(3, 7, 20, .55), inset 0 0 0 1px rgba(255, 230, 170, .6),
    0 40px 80px -30px rgba(11, 20, 48, .5), 0 0 120px -10px rgba(255, 200, 110, .6);
}
.door-frame, .door-depth { border-radius: 999px 999px 26px 26px; inset: -18px -18px -6px -18px; padding: 18px 18px 6px 18px; }
.door-frame::after { border-radius: inherit; }
.door-step {
  clip-path: none; left: -12%; right: -12%; bottom: -28px; height: 22px; border-radius: 14px;
  background:
    radial-gradient(45% 110% at 50% 0, rgba(255, 226, 160, .95), transparent 72%),
    linear-gradient(180deg, #F7E3B2 0 42%, #D2A95E 43%, #A57F3C 74%, #7A5A24 100%);
  box-shadow: 0 10px 22px -10px rgba(60, 40, 10, .55), inset 0 1px 0 rgba(255, 250, 230, .9);
}
.hero-door .x-motes { mix-blend-mode: screen; }

/* The doorway's edges, made clear and kept simple (founder, 15 Sep 2026:
   "pehle wale ko hi thik karo; yeh zyada show off lag raha hai"). Same
   frame, same size, no extra ornament. Only the boundary gets definition:
   a lighter, even gold face; a fine bright line along its outer edge; a
   fine warm-brown line where it meets the opening; and a slim, darker
   side so the outline reads against the paper. */
.door-frame {
  background:
    radial-gradient(60% 40% at 22% 8%, rgba(255, 250, 228, .7), transparent 60%),
    linear-gradient(135deg, #FBE6B4 0%, #EEC67A 26%, #D6A752 52%, #BC8E3E 74%, #E4BE72 100%);
}
.door-frame::after {
  box-shadow: inset 0 0 0 1px rgba(255, 250, 230, .95), inset 0 0 0 16.8px transparent, inset 0 0 0 18px rgba(96, 64, 18, .65);
}
.door-depth { transform: translate(3px, 4px) !important; background: linear-gradient(160deg, #8A6424, #5A3E12); }
.hero-door { box-shadow:
  inset 18px 0 26px -18px rgba(3, 7, 20, .45), inset -18px 0 26px -18px rgba(3, 7, 20, .35),
  inset 0 22px 30px -22px rgba(3, 7, 20, .45), inset 0 0 0 1px rgba(96, 64, 18, .55),
  0 30px 60px -30px rgba(11, 20, 48, .45), 0 0 100px -16px rgba(255, 200, 110, .5); }
/* fix: an 18px inset shadow on the ring covered the whole 18px frame and
   dulled it. The frame keeps only its fine bright outer line; the warm
   line at the opening comes from the door's own 1px inset edge. */
.door-frame::after { box-shadow: inset 0 0 0 1px rgba(255, 250, 230, .95); }

/* dharma pages: links to that tradition's own explainer posts (SEO pass) */
.post-links { list-style: none; display: grid; gap: 10px; max-width: 780px; margin: 28px auto 0; padding: 0; }
.post-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: var(--hair-2, 1px solid rgba(0,0,0,.2)); border-radius: var(--r, 18px); color: var(--ink); text-decoration: none; font-family: var(--disp); font-size: 1.15rem; background: color-mix(in srgb, var(--sand) 45%, var(--surface)); transition: background .28s var(--ease), border-color .28s var(--ease); }
.post-links a::after { content: '\2192'; color: var(--gold-deep); font-family: var(--chrome); }
[dir="rtl"] .post-links a::after { content: '\2190'; }
.post-links a:hover { background: var(--sand); border-color: var(--gold); }