/* ============================================================================
   home.css — the homepage only (rebuilt 2026-10-01). Loaded after site.css + waitlist.css.

   Every size, colour, spacing and animation is copied from
   design_reference/site_home_v2_reference.html (approved 1 Oct 2026), where they were
   written as inline styles; here they have class names. Brand colours and Inter as before.

   Revision 4 (2 Oct 2026): the rotating spoken commands and their Dr/Cr chips are removed; the
   Sakhi line is the headline; the line under "Bol ke dekhiye." is removed.

   Revision 6 (2 Oct 2026, later): the textured background (shared rules in site.css; this page's
   sizes and the rings round the sound bars below); grey text #5D5672 everywhere the old grey
   #6B6480 was; "said", "heard" and "done" no longer push the comma and full stop away; the
   share row with the WhatsApp icon (shared rules in site.css, behaviour in share.js).

   Follow-up of 2 Oct 2026 (home reference revision 7 / rate finder revision 5): the rings round
   Sakhi fade out before the top bar (site.css, .vr-hero .vr-rings).

   HOW THE MOTION IS SWITCHED ON: the page's default is the still version. static/site/home.js
   adds "play" to the outer box (#top, class "hm") once on load, and "in"/"wait" to the two
   lower sections as they scroll in and out of view. Every animation below needs one of those
   classes, so without JavaScript nothing moves; and the reduced-motion rule at the end switches
   every animation off.

   Timings, from the reference's header comment — the hero plays ONCE per visit:
     0.2 s   rings pulse round Sakhi
     0.3 s   the headline rises as three lines: 0.3 / 0.6 / 0.9 s
     1.35 s  "said" lights up, then "heard" at 1.95 s, then "done" at 2.55 s; each then settles
             to purple text
     1.1 s   Sakhi starts to raise her hand; the thumbs-up lands at about 2.8 s, on "done"; she
             lowers it at 5.5 s
     3.0 s   the video wakes and starts playing (hero.js, data-start-after), and glows once at 3.9 s
     3.4 s   the line under the video rises
   Lower sections, when scrolled into view (and again on return):
     statement  rise, strike at 1.0 s, "Not anymore." pops at 1.6 s, underline at 2.2 s
     close      sound wave, words at 0.2 / 0.45 / 0.7 s, the form card at 0.3 s (the "Beta opens…"
                line that rose at 1.2 s was removed on 26 Oct 2026), the share row at 1.35 s, the
                button pulses twice at 1.8 s, the rings
                round the sound bars ripple three times from 0.4 s
     features   (revision 8) the heading rises; the tiles rise left to right from 0.3 s, one every
                0.12 s; a soft ring runs out from each icon in turn from 0.95 s, one every 0.14 s;
                the link back to the form rises at 1.25 s
   The background (revision 6): from 3.0 s a ripple runs out through the nine rings round Sakhi,
   one ring every 0.14 s (the delays are on each ring in site_home.html), repeating every 5 s.
   ============================================================================ */

body.home-v2 { margin: 0; background: #F0EEF7; }
.home-v2 a { color: #3D2B7A; }
.home-v2 a:hover { color: #6A55E8; }

/* The page column */
.hm {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #2A2440;
  background: #F0EEF7; display: flex; flex-direction: column; align-items: center;
  /* The textured background's layers sit inside this box, behind everything (site.css explains).
     z-index 0 makes this box the layer stack they sit at the back of. */
  position: relative; z-index: 0;
  /* The rings round Sakhi are wider than a phone screen: cut off whatever sticks out, so there
     is never a sideways scroll. "clip" where the browser knows it; "hidden" otherwise. */
  overflow: hidden; overflow: clip;
}

/* ---------- top bar ---------- */
.hm-head {
  width: 100%; max-width: 1120px; box-sizing: border-box;
  padding: 20px clamp(16px, 4vw, 24px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.home-v2 .hm-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: #3D2B7A; }
.hm-brand img { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; }
.hm-brand-words { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.hm-wordmark { font-size: 20px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.hm-wordmark .dot { color: #C9BFFF; }
.hm-tagline { font-size: 12px; line-height: 1.3; font-weight: 400; color: #5D5672; }
.hm-nav { display: flex; align-items: center; gap: 24px; }
.hm-nav-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.home-v2 .btn { background: #6A55E8; transition: background-color .2s; }
.home-v2 .btn:hover { background: #5745D1; }
.home-v2 .nav-cta {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 18px;
  border-radius: 12px; color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none;
}
.home-v2 .nav-cta:hover { color: #FFFFFF; }
@media (max-width: 520px) { .home-v2 .nav-cta { display: none; } }
/* Since 1 Nov 2026 the top bar has two links (GST Rate Finder, Pricing) and the button. Where the logo
   and all of them do not fit on one line (below about 640 px), they move to a line of their own under
   the logo; wider screens keep one line. */
.hm-head { flex-wrap: wrap; row-gap: 0; }

/* ---------- main column ---------- */
.hm-main {
  width: 100%; max-width: 1120px; box-sizing: border-box;
  padding: clamp(16px, 2.6vw, 36px) clamp(16px, 4vw, 24px) 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative;             /* the rings round Sakhi are placed from this box's top */
}

/* The background round Sakhi (site.css draws it): Sakhi's width (--sk, the same clamp as
   .hm-sakhi below) and the gap above her (--pt, this column's top padding). Nine rings. */
.vr-hero { --sk: clamp(150px, 16vw, 230px); --pt: clamp(16px, 2.6vw, 36px); }

/* Sakhi */
.hm-sakhi { position: relative; width: clamp(150px, 16vw, 230px); }
.hm-disc, .ring { position: absolute; left: 12%; top: 5%; width: 76%; aspect-ratio: 1; border-radius: 50%; }
.hm-disc { background: #E3DCFA; }
.ring { box-sizing: border-box; border: 2px solid #C9BFFF; opacity: 0; }
.sakhi {
  position: relative; width: 100%; aspect-ratio: 320 / 312;
  background: url(/static/site/sakhi-smile-strip.webp) 0% 0 / 3900% 100% no-repeat;
}

/* The headline (the page's one h1): three lines, each its own block */
.hm-h1 {
  margin: 16px 0 0; width: 100%; max-width: 1100px;
  font-size: clamp(26px, 3.3vw, 46px); line-height: 1.24; font-weight: 600;
  letter-spacing: -0.025em; color: #3D2B7A;
}
.hm-h1-line { display: block; }
/* "said", "heard", "done": purple text (also in the still version); they light up in turn once.
   The negative margin equals the padding, so the highlight's padding takes no room of its own:
   the comma and full stop sit at normal spacing ("said, heard and done.", revision 6). */
.hw { padding: 0 0.16em; margin: 0 -0.16em; border-radius: 0.2em; color: #6A55E8; }

/* ---------- the video box ---------- */
.hm-video {
  margin-top: clamp(32px, 3.4vw, 48px); width: 100%; max-width: 1040px; position: relative;
  border-radius: clamp(12px, 1.6vw, 20px); overflow: hidden; background: #FFFFFF; border: 1px solid #E7E4F3;
  box-shadow: 0 30px 60px -30px rgba(61, 43, 122, 0.35), 0 8px 20px -12px rgba(61, 43, 122, 0.18);
}
/* The demo video block (templates/_demo_video.html, on_video=True) fills the box: no border
   or size cap of its own, and the captions and sound button sit ON the picture (site.css). */
.hm-video .hero-frame { border: 0; border-radius: 0; max-width: none; background: #F0EEF7; }
/* (The rules that put the captions and the sound button ON the picture — class hero-on-video —
   moved to site.css on 2026-10-01, unchanged, because the rate finder page uses them too.) */

.hm-note { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: #5D5672; }

/* ---------- the statement ---------- */
.hm-stmt {
  width: 100%; max-width: 1040px; margin-top: clamp(64px, 8vw, 120px);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.hm-stmt-q, .hm-stmt-a { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.hm-stmt-q { color: #5D5672; }
.hm-stmt-a { color: #3D2B7A; }
.st { background: linear-gradient(#5D5672, #5D5672) no-repeat 0 56% / 100% 2px; }
.um { background: linear-gradient(#C9BFFF, #C9BFFF) no-repeat 0 96% / 100% .16em; }

/* ---------- the close + form ---------- */
.hm-close {
  width: 100%; max-width: 760px; margin-top: clamp(64px, 8vw, 120px); display: flex; flex-direction: column; align-items: center;
  position: relative;             /* the rings round the sound bars are placed from this box's top */
}
/* The background round the sound bars (revision 6): eight smaller rings and a glow, centred on
   the bars (14 px down = half the bars' 28 px height; --sk 0 because there is no Sakhi here).
   They ripple three times each time this section comes into view. */
.vr-close { --sk: 0px; --pt: 14px; }
.vr-close .vr-glow {
  width: clamp(744px, 84vw, 1200px); height: clamp(608px, 68vw, 980px);
  background: radial-gradient(closest-side, rgba(201,191,255,.55), rgba(201,191,255,0));
}
.vr-close .vr-rings { width: clamp(620px, 70vw, 1000px); height: clamp(620px, 70vw, 1000px); }
.hm-wave { display: flex; align-items: center; gap: 5px; height: 28px; }
.bar { width: 4px; border-radius: 2px; background: #6A55E8; transform: scaleY(.3); }
.bar:nth-child(1) { height: 12px; }
.bar:nth-child(2) { height: 22px; }
.bar:nth-child(3) { height: 28px; }
.bar:nth-child(4) { height: 18px; }
.bar:nth-child(5) { height: 10px; }
.hm-close-h { margin: 16px 0 0; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: #3D2B7A; }
.bw { display: inline-block; }
/* (.hm-beta-note, the line "Beta opens November 2026. The waitlist goes first.", was removed on 26 Oct 2026:
   there is no beta phase; the button says "Sign up for a demo".) */
/* the share row (its look is in site.css, shared with the rate finder page) */
.hm-share-row { margin-top: 14px; }

/* ---------- the features (revision 8, 10 Oct 2026) ----------
   Sizes and colours from the reference's inline styles. Tiles show a title only: no link, and no
   hover effect (they are not something to click). */
.hm-more {
  width: 100%; max-width: 1040px; margin-top: clamp(72px, 9vw, 128px);
  display: flex; flex-direction: column; align-items: center;
}
.hm-more-h {
  margin: 0; max-width: 820px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.15; font-weight: 600;
  letter-spacing: -0.025em; color: #3D2B7A; text-wrap: balance;
}
.ft-grid {
  width: 100%; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px);
}
.ft {
  display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; margin: 0;
  padding: clamp(20px, 2.2vw, 28px) clamp(12px, 1.4vw, 18px); box-sizing: border-box;
  background: #FFFFFF; border: 1px solid #E7E4F3; border-radius: 18px;
  box-shadow: 0 18px 36px -30px rgba(61, 43, 122, 0.45); text-align: center;
}
.ft-ic {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: #F1EEFD; color: #6A55E8;
}
.ft-t {
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.35; font-weight: 600; color: #3D2B7A;
  overflow-wrap: break-word; text-wrap: balance;
}
/* two by two up to 720 px wide, slightly tighter tiles and smaller icon discs */
@media (max-width: 720px) {
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft { padding: 18px 10px; gap: 12px; }
  .ft-ic { width: 46px; height: 46px; }
}
/* the link back up to the form; gone once the visitor has joined (home.js sets hidden) */
.home-v2 .ft-back {
  margin-top: clamp(22px, 2.6vw, 32px); display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-size: 15px; font-weight: 600; color: #6A55E8; text-decoration: none;
}
.home-v2 .ft-back[hidden] { display: none; }

/* ---------- footer ---------- */
.hm-foot { width: 100%; max-width: 1120px; box-sizing: border-box; margin-top: clamp(56px, 6.5vw, 96px); padding: 0 clamp(16px, 4vw, 24px) 28px; }
.hm-foot-inner {
  border-top: 1px solid #E7E4F3; padding-top: 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  font-size: 13px; line-height: 1.6; color: #5D5672;
}
.hm-foot-inner p { margin: 0; }
.hm-foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.hm-foot-links a { display: inline-block; padding: 12px 0; }

/* ============================================================================
   THE MOTION (only with the classes home.js adds) — keyframes and timings from the reference
   ============================================================================ */
@keyframes word { from { opacity: 0; transform: translateY(.3em); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mark2 { from { background-size: 0 .16em; } to { background-size: 100% .16em; } }
@keyframes strike { from { background-size: 0 2px; } to { background-size: 100% 2px; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes wake { from { opacity: .45; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes glow { from { box-shadow: 0 0 0 0 rgba(106,85,232,.4), 0 30px 60px -30px rgba(61,43,122,.35); } to { box-shadow: 0 0 0 18px rgba(106,85,232,0), 0 30px 60px -30px rgba(61,43,122,.35); } }
@keyframes speak { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(106,85,232,.45); } to { box-shadow: 0 0 0 16px rgba(106,85,232,0); } }
@keyframes ringA { from { opacity: .8; transform: scale(.74); } to { opacity: 0; transform: scale(1.32); } }
/* Sakhi, once over 6 s: rests 1.1 s, raises her thumb (38 frames, to 4.27 s), holds, lowers it from 5.5 s */
@keyframes sakH { 0% { background-position: 0% 0; } 18.3% { background-position: 0% 0; animation-timing-function: steps(38, end); } 71.2% { background-position: 100% 0; } 91.7% { background-position: 100% 0; animation-timing-function: steps(19, end); } 100% { background-position: 0% 0; } }
/* "said" / "heard" / "done" light up in turn (over the same 6 s), each settling back to purple text */
@keyframes saidH { 0%, 20% { background-color: rgba(106,85,232,0); color: #6A55E8; } 22.5%, 30% { background-color: #6A55E8; color: #FFFFFF; } 33%, 100% { background-color: rgba(106,85,232,0); color: #6A55E8; } }
@keyframes heardH { 0%, 30% { background-color: rgba(106,85,232,0); color: #6A55E8; } 32.5%, 40% { background-color: #6A55E8; color: #FFFFFF; } 43%, 100% { background-color: rgba(106,85,232,0); color: #6A55E8; } }
@keyframes doneH { 0%, 40% { background-color: rgba(106,85,232,0); color: #6A55E8; } 42.5%, 55% { background-color: #6A55E8; color: #FFFFFF; } 58%, 100% { background-color: rgba(106,85,232,0); color: #6A55E8; } }

/* The hero, once */
.play .sakhi { animation: sakH 6s linear both; }
.play .ring { animation: ringA 1.3s ease-out .2s 2 both; }
.play .ring2 { animation-delay: .65s; }
.play .hw1 { animation: saidH 6s linear both; }
.play .hw2 { animation: heardH 6s linear both; }
.play .hw3 { animation: doneH 6s linear both; }

/* Once per page load */
.play .rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.play .r3 { animation-delay: .3s; }
.play .r4 { animation-delay: .6s; }
.play .r4b { animation-delay: .9s; }
.play .r5 { animation-delay: 3.4s; }
.play .hm-video { animation: wake 1s cubic-bezier(.2,.7,.2,1) 3s both, glow 1.6s ease-out 3.9s 1; }

/* The lower sections (statement, close, features), each time they scroll into view ("in"); hidden while away ("wait") */
.in .a { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.in .d1 { animation-delay: .1s; }
.in .d3 { animation-delay: 1.2s; }
.in .d4 { animation-delay: 1.35s; }
.in .st { animation: strike .5s cubic-bezier(.4,0,.2,1) 1s both; }
.in .a2 { animation: pop .6s cubic-bezier(.2,1.5,.4,1) 1.6s both; }
.in .um { animation: mark2 .6s cubic-bezier(.4,0,.2,1) 2.2s both; }
.in .bar { animation: speak .5s ease-in-out infinite alternate; }
.in .bar:nth-child(1) { animation-delay: 0.00s; }
.in .bar:nth-child(2) { animation-delay: 0.08s; }
.in .bar:nth-child(3) { animation-delay: 0.16s; }
.in .bar:nth-child(4) { animation-delay: 0.24s; }
.in .bar:nth-child(5) { animation-delay: 0.32s; }
.in .bw { animation: word .6s cubic-bezier(.2,.7,.2,1) both; }
.in .bw:nth-child(1) { animation-delay: .2s; }
.in .bw:nth-child(2) { animation-delay: .45s; }
.in .bw:nth-child(3) { animation-delay: .7s; }
.in .d5 { animation-delay: .3s; }
.in .cta { animation: pulse 1.5s ease-out 1.8s 2; }
/* the rings round the sound bars: three ripples (the 0.4 s ... 1.24 s delays are on each ring) */
.in .vr-close .rg { animation: ripple 2.6s ease-out 3; }
/* the features (revision 8): the tiles rise left to right, then a ring runs out from each icon */
.in .ft { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.in .ft1 { animation-delay: .30s; }
.in .ft2 { animation-delay: .42s; }
.in .ft3 { animation-delay: .54s; }
.in .ft4 { animation-delay: .66s; }
.in .ft1 .ft-ic { animation: pulse 1.4s ease-out .95s 1; }
.in .ft2 .ft-ic { animation: pulse 1.4s ease-out 1.09s 1; }
.in .ft3 .ft-ic { animation: pulse 1.4s ease-out 1.23s 1; }
.in .ft4 .ft-ic { animation: pulse 1.4s ease-out 1.37s 1; }
.in .ft-back { animation-delay: 1.25s; }
.wait .a, .wait .a2, .wait .bw { opacity: 0; }
.wait .st { background-size: 0 2px; }
.wait .um { background-size: 0 .16em; }
.wait .ft { opacity: 0; }

/* Reduced motion requested: nothing moves (home.js also leaves the page still). */
@media (prefers-reduced-motion: reduce) {
  .hm *, .hm { animation: none !important; }
}