/* Fonts, photos and graphics are served from this site, so no request goes to another domain and nothing about visitors leaves it.
   Headings: Cormorant Garamond. Labels and the logo: Cinzel. Body text: Jost. All SIL Open Font License (fonts/OFL.txt). */
@font-face { font-family: "Cormorant"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 600; font-style: italic; font-display: swap; src: url(/fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/cinzel-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/jost-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/jost-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/jost-latin-600-normal.woff2) format("woff2"); }

:root {
  --night: #170a0d; --night-2: #2b1016; --maroon: #7a1f2b; --maroon-dark: #561420;
  --gold: #d4a74a; --gold-soft: #f1dca6; --saffron: #f6b73c; --cream: #fbf5ea; --sand: #f3e6cf;
  --ink: #2b2118; --muted: #6b5d4f; --line: #e8d9bd; --green: #1f7a4d;
  --serif: "Cormorant", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --caps: "Cinzel", var(--serif);
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --gilt: linear-gradient(100deg, #b8862f 0%, #f3d98f 38%, #d4a74a 62%, #f7e2a6 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17.5px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--maroon); }
strong { font-weight: 600; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; font-variant-numeric: lining-nums; line-height: 1.1; color: var(--maroon-dark); }
h1 { font-size: clamp(2.6rem, 5.8vw, 4rem); margin: .15em 0 .35em; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); margin: 0 0 .5em; }
h3 { font-size: 1.5rem; margin: 0 0 .35em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 780px; }
/* the turning wheels reach past the screen edge on phones; clip them without breaking sticky headings */
main { overflow-x: clip; }

.draft { background: #ffe08a; color: #4a3500; text-align: center; padding: 6px 12px; font-size: .9rem; font-weight: 600; }
mark.todo { background: #ffe08a; color: #4a3500; padding: 0 3px; border-radius: 3px; }

/* A gold label between two fading lines above section headings; centred ones get a lotus (img/lotus.svg) on top */
.orn { display: flex; align-items: center; gap: 12px; color: #8a6420; font: 600 .8rem var(--caps); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
.orn::before, .orn::after { content: ""; height: 1px; width: 40px; background: linear-gradient(90deg, transparent, currentColor); }
.orn::after { transform: scaleX(-1); }
.center { text-align: center; }
.center .orn { justify-content: center; padding-top: 44px; background: url(/img/lotus.svg) center top / 58px no-repeat; }
.center .intro { margin-left: auto; margin-right: auto; }
section.dark .orn, .hero .orn { color: var(--gold); }

header.site { background: rgba(23,10,13,.94); border-bottom: 1px solid rgba(212,167,74,.25); position: sticky; top: 0; z-index: 5; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { display: block; width: auto; height: 40px; }
header nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
header nav a { text-decoration: none; color: #eadcc6; font-size: .95rem; font-weight: 500; }
header nav a:hover { color: var(--gold-soft); }

/* WhatsApp buttons: WhatsApp green with dark text and the WhatsApp glyph, as on whatsapp.com */
.btn { display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #111b21 !important; text-decoration: none;
       font-weight: 600; letter-spacing: .01em; padding: 14px 26px; border-radius: 999px; box-shadow: 0 8px 24px -10px rgba(37,211,102,.75);
       transition: transform .2s, background-color .2s; }
.btn:hover { background: #1fbf5b; transform: translateY(-1px); }
.btn.small { padding: 8px 18px; font-size: .9rem; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--maroon) !important; border: 1.5px solid var(--maroon); box-shadow: none; }
.btn.gold { background: linear-gradient(180deg, #e7bf63, #c8963a); color: var(--night) !important; box-shadow: 0 6px 18px -8px rgba(212,167,74,.9); }
.wa { flex: none; width: 20px; height: 20px; fill: currentColor; }
.btn.small .wa { width: 17px; height: 17px; }
.btn.small { gap: 7px; }

/* The hero is a night sky: two star tiles (the second twinkles), a warm glow, and a slowly turning rashi wheel behind the photo */
.hero { position: relative; padding: 76px 0 96px; color: #eadcc6; overflow: hidden; isolation: isolate;
        background: url(/img/stars.svg), radial-gradient(ellipse at 72% 45%, #521a25 0%, var(--night-2) 38%, var(--night) 80%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/img/stars2.svg) 90px 40px; animation: twinkle 4.5s ease-in-out infinite alternate;
               -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 45%, #000 60%); mask-image: linear-gradient(90deg, rgba(0,0,0,.2) 45%, #000 60%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: -1; background: linear-gradient(transparent, rgba(212,167,74,.07)); }
.hero h1, .hero h2 { color: #fff7e6; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.hero h1 span { display: block; font-style: italic; font-weight: 600; font-size: .8em; margin-top: .12em; padding-bottom: .06em;
                background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker { color: var(--gold); font: 600 .78rem var(--caps); letter-spacing: .18em; text-transform: uppercase; }
.hero p.lead { font-size: 1.15rem; color: #dccbb3; max-width: 600px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 16px; }
.hero .btn.ghost { color: var(--gold-soft) !important; border-color: rgba(241,220,166,.55); }
.hero small { color: #b9a58b; }
.hero a:not(.btn) { color: var(--gold-soft); }
.perks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.free, .offer { display: inline-flex; align-items: center; gap: .35em; border-radius: 999px; padding: 6px 15px; font-size: .9rem; }
.free { gap: 8px; border: 1px solid rgba(37,211,102,.45); background: rgba(37,211,102,.1); color: #d9fdd3; }
.free::before { content: ""; width: 17px; height: 17px; background: url(/img/whatsapp.svg) center / contain no-repeat; }
.offer { background: var(--gilt); color: var(--night); font-weight: 600; box-shadow: 0 6px 18px -8px rgba(212,167,74,.9); }
.offer b { font-weight: 700; }

/* A photo in a temple-arch frame, with the wheel turning behind it and fading out at its edge */
.arch { position: relative; justify-self: center; width: min(340px, 100%); isolation: isolate; }
.arch .wheel, .stage .wheel { position: absolute; z-index: -2; max-width: none; opacity: .5; animation: spin 160s linear infinite;
                              -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 71%); mask-image: radial-gradient(circle, #000 42%, transparent 71%); }
.arch .wheel { width: 170%; left: -35%; top: 50%; margin-top: -85%; opacity: .45; }
.arch::before { content: ""; position: absolute; z-index: -1; inset: -12% -18%; border-radius: 50%;
                background: radial-gradient(circle at 50% 55%, rgba(246,183,60,.38), rgba(246,183,60,.08) 45%, transparent 68%); animation: glow 5s ease-in-out infinite alternate; }
.arch > .photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 18px 18px; border: 2px solid rgba(212,167,74,.8);
                 outline: 1px solid rgba(212,167,74,.35); outline-offset: 10px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); }

/* Chat bubbles, used by the hero phone */
.msg { margin: 0; max-width: 88%; padding: 7px 11px; border-radius: 12px; font-size: .86rem; line-height: 1.45; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.msg.in { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0; }
.msg.out { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
/* bubble tails, and the time with blue ticks on what the customer sent */
.msg { position: relative; }
.msg::before { content: ""; position: absolute; top: 0; width: 8px; height: 10px; background: inherit; }
.msg.in::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.msg.out::before { left: -7px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.thread .msg::after { float: right; margin: 5px -3px -3px 10px; color: #667781; font-size: .6rem; line-height: 1; }
.thread .msg.in::after { padding-right: 18px; background: url(/img/ticks.svg) right center / 15px no-repeat; }
.thread .quote::after, .thread .delivered::after { align-self: flex-end; margin: 0 -3px -2px; }
.thread .typing .msg::after { content: none; }
.m1 .msg::after { content: "9:41"; } .m2 .msg::after { content: "9:41"; } .m3 .msg::after { content: "9:42"; } .m4 .msg::after { content: "9:42"; }
.m6 .msg::after { content: "9:44"; } .m8 .msg::after { content: "10:15"; } .m9 .msg::after { content: "10:16"; }

/* The customer journey in the hero: a phone plays one booking from the first question to the muhurat, then starts again.
   Each message folds open at its moment (keyframes m1-m9, typing bubbles t1-t4), pushing the older ones up. The tracker below
   lights Ask, Book, Pay and Receive in step. Timings come from a small generator; keep them in step if you edit the chat. */
.stage { position: relative; justify-self: center; display: flex; flex-direction: column; align-items: center; isolation: isolate; width: min(440px, 100%); }
.stage .wheel { width: 640px; left: 50%; top: 290px; margin: -320px 0 0 -320px; }
.stage::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; left: 50%; top: 290px; margin: -260px 0 0 -260px; border-radius: 50%;
                 background: radial-gradient(circle, rgba(246,183,60,.28), rgba(246,183,60,.06) 45%, transparent 68%); animation: glow 5s ease-in-out infinite alternate; }
.phone { position: relative; margin: 0; width: 292px; height: 580px; padding: 9px; border-radius: 46px; background: linear-gradient(150deg, #4a3a33, #120a0b 55%, #2c2220);
         box-shadow: 0 0 0 1px rgba(212,167,74,.45), 0 0 0 7px rgba(212,167,74,.07), 0 50px 90px -30px rgba(0,0,0,.95); }
.phone::before { content: ""; position: absolute; z-index: 2; top: 17px; left: 50%; width: 86px; height: 24px; margin-left: -43px; border-radius: 14px; background: #0b0607; }
.screen { height: 100%; border-radius: 38px; overflow: hidden; display: flex; flex-direction: column; background: #efeae2 url(/img/pattern.svg); color: #111b21; }
.wa-head { display: flex; align-items: center; gap: 8px; padding: 46px 10px 10px 6px; background: #008069; color: #fff; }
.wa-head > div { flex: 1; min-width: 0; }
.wa-head .acts { display: flex; gap: 12px; }
.wa-head .acts svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-head .acts svg:last-child { width: 16px; fill: #fff; margin-left: -4px; }
.wa-head .back { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-head img { background: #fff; border-radius: 50%; padding: 2px; }
.wa-head strong { display: block; font-size: .95rem; line-height: 1.2; }
.status { display: grid; font-size: .72rem; opacity: .85; }
.status > span { grid-area: 1 / 1; }
.st-online { animation: st-online 26s linear infinite; }
.st-typing { opacity: 0; animation: st-typing 26s linear infinite; }
.thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 10px 10px; }
.thread .m { display: flex; flex-direction: column; flex: none; overflow: hidden; margin-top: 8px; transform-origin: bottom;
             animation-duration: 26s; animation-timing-function: ease-out; animation-iteration-count: infinite; }
.thread .msg { font-size: .8rem; max-width: 86%; }
.thread .typing .msg { display: flex; gap: 4px; padding: 10px 12px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa19d; animation: dot 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.sys { align-self: center; margin: 2px 0; padding: 4px 12px; border-radius: 8px; background: #fff; color: #54656f; font-size: .7rem; box-shadow: 0 1px 0 rgba(11,20,26,.1); }
.sys.ok { background: #ffeecd; color: #54656f; font-weight: 600; }
.quote, .delivered { display: flex; flex-direction: column; gap: 5px; }
.quote strong { color: #111b21; font-size: .86rem; }
.quote > span:not(.pay) { color: #667781; font-size: .75rem; line-height: 1.4; }
.quote .amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px; }
.quote .amount s { color: #9c8f80; font-size: .8rem; }
.quote .amount b { color: var(--ink); font-size: 1.05rem; }
.quote .amount em { font-style: normal; font-size: .68rem; font-weight: 600; color: #7a5a14; background: #f8e7b4; border-radius: 6px; padding: 1px 6px; }
.pay { position: relative; display: grid; place-items: center; margin: 4px -11px 0; padding: 9px; border-top: 1px solid #e9edef; background: #fff; color: #008069; font-weight: 600; font-size: .82rem;
       animation: press 26s linear infinite; }
.pay > span { grid-area: 1 / 1; }
.paid-a { animation: paid-a 26s linear infinite; }
.paid-b { opacity: 0; animation: paid-b 26s linear infinite; }
.tap { position: absolute; width: 46px; height: 46px; left: 50%; top: 50%; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(0,128,105,.25); opacity: 0;
       animation: tap 26s ease-out infinite; }
.quote small { font-size: .66rem; color: #667781; text-align: center; }
.delivered { font-size: .78rem; }
.delivered .file { display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 3px; border-radius: 8px; background: #f0f2f5; }
.delivered .file svg { flex: none; width: 30px; height: 30px; padding: 5px; border-radius: 6px; background: #e5533d; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.delivered .file span { display: flex; flex-direction: column; font-size: .7rem; color: #667781; line-height: 1.3; }
.delivered .file b { color: #111b21; font-size: .78rem; }
.wa-input { display: flex; align-items: center; gap: 6px; padding: 6px 8px 16px; }
.wa-input span { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 20px; padding: 7px 10px; color: #8696a0; font-size: .8rem; }
.wa-input span svg { width: 18px; height: 18px; fill: none; stroke: #8696a0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wa-input span svg:nth-of-type(2) { margin-left: auto; }
.wa-input i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #00a884; }
.wa-input i svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; }
.journey { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 380px; margin: 28px 0 0; padding: 0; }
.journey::before, .journey::after { content: ""; position: absolute; top: 6px; left: 12.5%; height: 2px; border-radius: 2px; }
.journey::before { right: 12.5%; background: rgba(212,167,74,.22); }
.journey::after { width: 0; max-width: 75%; background: var(--gilt); animation: fill 26s linear infinite; }
.journey li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9c8670;
              font: 600 .72rem var(--caps); letter-spacing: .14em; text-transform: uppercase; }
.journey li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(212,167,74,.45); background: #2b1016; }
.journey .j1 { color: var(--gold-soft); }
.journey .j1::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px rgba(212,167,74,.2); }
.journey .j2 { animation: j2 26s linear infinite; } .journey .j2::before { animation: j2-dot 26s linear infinite; }
.journey .j3 { animation: j3 26s linear infinite; } .journey .j3::before { animation: j3-dot 26s linear infinite; }
.journey .j4 { animation: j4 26s linear infinite; } .journey .j4::before { animation: j4-dot 26s linear infinite; }
.stage .example { margin: 12px 0 0; font-size: .75rem; color: #9c8670; }

.trust { background: var(--night); color: var(--gold-soft); border-top: 1px solid rgba(212,167,74,.25); border-bottom: 1px solid rgba(212,167,74,.25); }
.trust ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 28px; padding-top: 22px; padding-bottom: 22px; margin: 0 auto; }
.trust li { display: flex; align-items: center; gap: 12px; font-size: .93rem; }
.trust svg { flex: none; width: 40px; height: 40px; padding: 9px; border: 1px solid rgba(212,167,74,.5); border-radius: 50%; background: rgba(212,167,74,.07);
             fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

section { padding: 88px 0; }
section.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.dark { position: relative; overflow: hidden; overflow: clip; isolation: isolate; color: #d9c8b0;
               background: url(/img/stars.svg), radial-gradient(ellipse at 20% 0%, #3a121a 0%, var(--night) 70%); }
section.dark h2, section.dark h3 { color: #fff7e6; }
section.dark strong { color: var(--gold-soft); }
section.dark a { color: var(--gold-soft); }
section.dark .fine { color: #b9a58b; }
/* A slowly moving band of the occasions we help with; the list is written twice so the loop has no seam */
.occasions { overflow: hidden; margin: 30px 0 4px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
             -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.occasions ul { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: marquee 60s linear infinite; }
.occasions:hover ul { animation-play-state: paused; }
.occasions li { display: flex; align-items: center; white-space: nowrap; font: italic 600 1.35rem var(--serif); color: var(--maroon-dark); }
.occasions li::after { content: ""; width: 26px; height: 16px; margin: 0 26px; background: url(/img/lotus.svg) center / contain no-repeat; }
.intro { color: var(--muted); max-width: 660px; margin-top: -.2em; font-size: 1.07rem; }

.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 38px; }
.card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px 22px; display: flex; flex-direction: column;
        box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 18px 36px -28px rgba(86,20,32,.45); transition: transform .25s, box-shadow .25s, border-color .25s; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gilt); opacity: .8; }
.card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -70px; top: -70px; background: url(/img/wheel.svg) center / contain no-repeat; opacity: .13;
               transition: transform 1.2s ease; }
.card:hover { transform: translateY(-4px); border-color: #e2c98f; box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 28px 48px -26px rgba(86,20,32,.55); }
.card:hover::after { transform: rotate(60deg); }
section.alt .card { background: var(--cream); }
.card .icon { position: relative; width: 58px; height: 58px; padding: 13px; margin-bottom: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffaf0, #f3dca4);
              border: 1px solid #e6c985; box-shadow: 0 0 0 5px rgba(212,167,74,.1); fill: none; stroke: var(--maroon); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card p { margin: 0; color: var(--muted); font-size: .96rem; }
.price { margin: auto 0 0; padding-top: 16px; }
.price dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.price dd { margin: 0 0 8px; font: 700 1.12rem var(--serif); font-variant-numeric: lining-nums; color: var(--maroon-dark); }
.card p + .price { border-top: 1px solid var(--line); margin-top: 18px; }
.card .book { margin-top: 14px; font-weight: 600; text-decoration: none; color: var(--green); font-size: .95rem; }
.card .book:hover { text-decoration: underline; }
.fine { color: var(--muted); font-size: .9rem; margin-top: 22px; }
.fine strong { color: var(--maroon-dark); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; }
.panel h2 { font-size: 1.9rem; }

/* Two photos side by side, the second one lower, with a "video" tag */
.photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 160px 160px 14px 14px; box-shadow: 0 24px 40px -24px rgba(0,0,0,.55);
              border: 1px solid rgba(212,167,74,.6); outline: 1px solid rgba(212,167,74,.3); outline-offset: 6px; }
.photos img + img { margin-top: 56px; }
.photos .tag { position: absolute; left: 18px; bottom: 26px; display: flex; align-items: center; gap: 10px; background: rgba(23,10,13,.88); color: var(--gold-soft);
               border: 1px solid rgba(212,167,74,.5); border-radius: 999px; padding: 8px 16px 8px 8px; font-size: .9rem; box-shadow: 0 12px 24px -12px rgba(0,0,0,.7); }
.photos .tag svg { width: 30px; height: 30px; border-radius: 50%; background: var(--gilt); padding: 8px 7px 8px 9px; fill: var(--night); }

ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; position: relative; }
ol.steps::before { content: ""; position: absolute; left: 24px; top: 30px; bottom: 30px; border-left: 1.5px dashed rgba(212,167,74,.7); }
ol.steps li { counter-increment: s; padding: 4px 0 4px 72px; position: relative; color: var(--muted); }
ol.steps li h3 { color: var(--maroon-dark); }
ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 50px; height: 50px; border-radius: 50%;
                      border: 1.5px solid var(--gold); color: var(--maroon); font: 700 1.5rem/1 var(--serif); font-variant-numeric: lining-nums; display: grid; place-items: center;
                      background: radial-gradient(circle at 35% 30%, #fffaf0, #f6e3b4); box-shadow: 0 0 0 5px #fff; }
.how { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }

ul.checks { list-style: none; padding: 0; }
ul.checks li { padding-left: 34px; position: relative; margin: 12px 0; }
ul.checks li::before { content: "\2713"; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #e3f3ea;
                       color: var(--green); font-weight: 700; font-size: .75rem; display: grid; place-items: center; }
section.dark ul.checks li::before { background: rgba(212,167,74,.18); color: var(--gold); }

/* Our promises: a heading with a turning seal beside a numbered list of the rules, like a signed pledge */
.pledge-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.pledge-head { position: sticky; top: 110px; }
.pledge-head p { color: #cdb99c; font-size: 1.05rem; max-width: 380px; }
.seal { position: relative; display: grid; place-items: center; width: 260px; height: 260px; margin-top: 34px; isolation: isolate; }
.seal::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url(/img/wheel.svg) center / contain no-repeat; opacity: .55; animation: spin 120s linear infinite; }
.seal::after { content: ""; position: absolute; z-index: -1; inset: 72px; border-radius: 50%; border: 1px solid rgba(212,167,74,.6);
               background: radial-gradient(circle at 40% 35%, #4a1822, #1c0a0e 70%); box-shadow: 0 0 0 6px rgba(212,167,74,.08), 0 0 60px rgba(246,183,60,.25); }
.seal img { width: 70px; height: auto; }
.promises { list-style: none; counter-reset: promise; margin: 0; padding: 0; border-top: 1px solid rgba(212,167,74,.25); }
.promises li { position: relative; counter-increment: promise; display: grid; grid-template-columns: 78px 1fr; column-gap: 8px; padding: 26px 0 26px 4px;
               border-bottom: 1px solid rgba(212,167,74,.25); transition: background-color .3s; }
.promises li::before { content: counter(promise, decimal-leading-zero); grid-row: 1 / 3; font: 600 2.6rem/1 var(--caps); background: var(--gilt); -webkit-background-clip: text; background-clip: text;
                       color: transparent; opacity: .55; transition: opacity .3s; }
.promises li::after { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: var(--gilt); transition: width .5s ease; }
.promises li:hover { background-color: rgba(212,167,74,.04); }
.promises li:hover::before { opacity: 1; }
.promises li:hover::after { width: 100%; }
.promises h3 { display: flex; align-items: center; gap: 12px; font-size: 1.45rem; margin: 0 0 6px; }
.promises svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; border: 1px solid rgba(212,167,74,.5); background: rgba(212,167,74,.1);
                fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.promises p { margin: 0; font-size: .97rem; max-width: 560px; }

details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 10px 0; transition: border-color .2s, box-shadow .2s; }
details[open] { border-color: #e2c98f; box-shadow: 0 14px 30px -24px rgba(86,20,32,.5); }
details summary { cursor: pointer; font-weight: 500; font-size: 1.04rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center;
                         color: #8a6420; font-size: 1.2rem; line-height: 1; transition: transform .25s; }
details[open] summary::after { content: "\2212"; transform: rotate(180deg); }
details p { color: var(--muted); margin: .7em 0 .2em; }

/* The closing call to action, with the wheel turning behind it */
.cta { text-align: center; }
.cta p { color: var(--muted); }
section.dark.cta p { color: #d9c8b0; }
section.dark.cta::before { content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; left: 50%; top: 50%; margin: -380px 0 0 -380px;
                      background: url(/img/wheel.svg) center / contain no-repeat; opacity: .13; animation: spin 240s linear infinite reverse; }
.cta .offer { margin: 4px 0 8px; }

.doc { padding-top: 40px; padding-bottom: 56px; }
.doc h2 { font-size: 1.7rem; margin-top: 1.6em; }
.doc h3 { margin-top: 1.4em; }
.doc .updated { color: var(--muted); }
.doc table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 1em 0; }
.doc th, .doc td { text-align: left; vertical-align: top; border: 1px solid var(--line); padding: 8px 10px; }
.doc th { background: var(--sand); }
/* Guides: long tables and headings in the same style as the home page */
.doc h2 { position: relative; padding-top: 20px; }
.doc h2::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 2px; background: var(--gilt); }
.doc table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 18px 36px -30px rgba(86,20,32,.5); }
.doc th, .doc td { border: 0; border-bottom: 1px solid var(--line); }
.doc tr:last-child td { border-bottom: 0; }
.doc th { background: var(--maroon-dark); color: #fff7e6; font-weight: 600; font-size: .85rem; }
.doc tr:nth-child(even) td { background: #fdf9f1; }
.doc td strong { color: var(--maroon); background: #f8e7b4; border-radius: 4px; box-shadow: 0 0 0 3px #f8e7b4; }
.guide-hero { padding: 64px 0 72px; }
.guide-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); }
.guide-hero .kicker a { color: inherit; text-decoration: none; }
.guide-hero .kicker a:hover { text-decoration: underline; }
.guide-hero .arch { width: min(290px, 100%); }
.guides-top .hero-wheel { position: absolute; z-index: -1; width: 720px; max-width: none; left: 50%; top: 50%; margin: -360px 0 0 -360px; opacity: .35; animation: spin 160s linear infinite;
                          -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-image: radial-gradient(circle, #000 40%, transparent 70%); }
.guides-top .lead { margin: 0 auto; }
.gcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 26px; }
.gcards.small { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; margin-top: 10px; }
.gcard, .feature { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); text-decoration: none;
                   box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 26px 48px -34px rgba(86,20,32,.55); transition: transform .3s, box-shadow .3s, border-color .3s; }
.gcard:hover, .feature:hover { transform: translateY(-4px); border-color: #e2c98f; }
.gimg { position: relative; display: block; overflow: hidden; }
.gimg img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s ease; }
.gcard:hover .gimg img, .feature:hover .gimg img { transform: scale(1.06); }
.gbody { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.gbody .kicker { color: #8a6420; }
.gcard h3 { font-size: 1.55rem; margin: .3em 0 .3em; }
.gcard p { margin: 0 0 16px; color: var(--muted); font-size: .95rem; }
.gcard .more, .feature .more { margin-top: auto; color: var(--green); font-weight: 600; font-size: .95rem; }
.gcards.small .gimg img { aspect-ratio: 16 / 9; }
.gcards.small .gbody { padding: 16px 18px 18px; }
.gcards.small h3 { font-size: 1.25rem; margin-bottom: 12px; }
.feature { display: grid; grid-template-columns: 5fr 6fr; margin-bottom: 26px; border-color: rgba(212,167,74,.35); color: #d9c8b0;
           background: url(/img/stars.svg), radial-gradient(ellipse at 90% 0%, #3a121a, var(--night) 70%); }
.feature .gimg { min-height: 340px; }
.feature .gimg img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.feature .gbody { padding: 40px 40px 36px; }
.feature .kicker { color: var(--gold); }
.feature .h2 { margin: .25em 0 .35em; font: 700 clamp(1.9rem, 3.4vw, 2.5rem)/1.1 var(--serif); color: #fff7e6; }
.feature .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 24px; }
.feature .chips span { padding: 3px 12px; border: 1px solid rgba(212,167,74,.45); border-radius: 999px; color: var(--gold-soft); font-size: .85rem; }
.feature .more { color: var(--gold-soft); }
.callout { background: #fff; border-left: 4px solid var(--gold); padding: 12px 16px; border-radius: 0 10px 10px 0; color: var(--ink); }

footer.site { background: var(--night); color: #d9c8b0; padding: 44px 0 96px; font-size: .9rem; border-top: 1px solid rgba(212,167,74,.25); }
footer.site a { color: var(--gold-soft); }
footer .legal { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0; }
footer .note, footer .company { color: #b9a58b; }

/* WhatsApp is always one tap away: the round green button in the corner, with a soft ring */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 6; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
       background: #25d366; color: #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,.55); transition: transform .2s; }
.fab:hover { transform: scale(1.06); }
.fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ring 3s ease-out infinite; }
.fab .wa { width: 32px; height: 32px; }
footer.site a.wa-link { display: inline-flex; align-items: center; gap: 6px; }
footer.site .wa-link .wa { width: 16px; height: 16px; color: #25d366; }
footer .socials { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 6px; padding: 0; list-style: none; }
footer .socials:empty { display: none; }
footer.site .socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(212,167,74,.4); transition: background .2s, color .2s; }
footer.site .socials a:hover { background: var(--gold-soft); color: var(--night); }
footer .socials svg { width: 18px; height: 18px; fill: currentColor; }
/* A WhatsApp chat card for the calls to action: the chat header, one message from us on the chat wallpaper, and the button */
.wa-card { width: min(480px, 100%); margin: 2.2em auto 1em; overflow: hidden; border-radius: 20px; background: #efeae2 url(/img/pattern.svg); text-align: left;
           box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 60px -34px rgba(11,20,26,.6); }
.wa-card-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; background: #008069; color: #fff; }
.wa-card-head img { background: #fff; border-radius: 50%; padding: 2px; }
.wa-card-head strong { display: block; font-size: 1rem; line-height: 1.2; }
.wa-card-head span { font-size: .78rem; opacity: .85; }
.wa-card-body { padding: 20px 20px 18px 26px; }
.wa-card .bubble { position: relative; max-width: 92%; margin: 0; padding: 10px 14px; border-radius: 0 12px 12px 12px; background: #fff; color: #111b21;
                   font-size: .98rem; line-height: 1.5; box-shadow: 0 1px 0 rgba(11,20,26,.12); }
.wa-card .bubble::before { content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 10px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-card .bubble strong { color: #111b21; }
.wa-card-foot { padding: 12px 14px; background: #f0f2f5; }
.wa-card-foot .btn { display: flex; justify-content: center; text-align: center; box-shadow: none; }
.wa-card .wa-card-head strong { color: #fff; }
.cta .wa-card .bubble { color: #111b21; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { from { opacity: .15; } to { opacity: 1; } }
@keyframes glow { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(63,208,127,.08); } }
@keyframes ring { from { transform: scale(1); opacity: .6; } to { transform: scale(1.55); opacity: 0; } }
@keyframes dot { 50% { transform: translateY(-3px); opacity: .5; } }
/* The hero chat, generated (see "The customer journey" above) */
@keyframes m1 { 0%, 2.3% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 4.0%, 92% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 97%, 100% { max-height: 320px; opacity: 0; margin-top: 8px; } }
.thread .m1 { animation-name: m1; }
@keyframes t1 { 0%, 5.4% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 6.5%, 11.0% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 11.5%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } }
.thread .t1 { animation-name: t1; }
@keyframes m2 { 0%, 11.5% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 13.3%, 92% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 97%, 100% { max-height: 320px; opacity: 0; margin-top: 8px; } }
.thread .m2 { animation-name: m2; }
@keyframes m3 { 0%, 20.8% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 22.5%, 92% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 97%, 100% { max-height: 320px; opacity: 0; margin-top: 8px; } }
.thread .m3 { animation-name: m3; }
@keyframes t2 { 0%, 23.8% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 25.0%, 29.4% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 30.0%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } }
.thread .t2 { animation-name: t2; }
@keyframes m4 { 0%, 30.0% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 31.7%, 92% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 97%, 100% { max-height: 320px; opacity: 0; margin-top: 8px; } }
.thread .m4 { animation-name: m4; }
@keyframes m5 { 0%, 42.3% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 44.0%, 92% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 97%, 100% { max-height: 320px; opacity: 0; margin-top: 8px; } }
.thread .m5 { animation-name: m5; }
@keyframes t3 { 0%, 45.4% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 46.5%, 50.2% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 50.8%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } }
.thread .t3 { animation-name: t3; }
@keyframes m6 { 0%, 50.8% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 52.5%, 92% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 97%, 100% { max-height: 320px; opacity: 0; margin-top: 8px; } }
.thread .m6 { animation-name: m6; }
@keyframes m7 { 0%, 59.2% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 61.0%, 92% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 97%, 100% { max-height: 320px; opacity: 0; margin-top: 8px; } }
.thread .m7 { animation-name: m7; }
@keyframes t4 { 0%, 60.8% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 61.9%, 65.6% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 66.2%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } }
.thread .t4 { animation-name: t4; }
@keyframes m8 { 0%, 66.2% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 67.9%, 92% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 97%, 100% { max-height: 320px; opacity: 0; margin-top: 8px; } }
.thread .m8 { animation-name: m8; }
@keyframes m9 { 0%, 76.2% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(10px) scale(.97); } 77.9%, 92% { max-height: 320px; opacity: 1; margin-top: 8px; transform: none; } 97%, 100% { max-height: 320px; opacity: 0; margin-top: 8px; } }
.thread .m9 { animation-name: m9; }
@keyframes st-typing { 0% { opacity: 0; } 5.4% { opacity: 0; } 5.8%, 11.2% { opacity: 1; } 11.5% { opacity: 0; } 23.8% { opacity: 0; } 24.2%, 29.6% { opacity: 1; } 30.0% { opacity: 0; } 45.4% { opacity: 0; } 45.8%, 50.4% { opacity: 1; } 50.8% { opacity: 0; } 60.8% { opacity: 0; } 61.2%, 65.8% { opacity: 1; } 66.2% { opacity: 0; } 100% { opacity: 0; } }
@keyframes st-online { 0% { opacity: 1; } 5.4% { opacity: 1; } 5.8%, 11.2% { opacity: 0; } 11.5% { opacity: 1; } 23.8% { opacity: 1; } 24.2%, 29.6% { opacity: 0; } 30.0% { opacity: 1; } 45.4% { opacity: 1; } 45.8%, 50.4% { opacity: 0; } 50.8% { opacity: 1; } 60.8% { opacity: 1; } 61.2%, 65.8% { opacity: 0; } 66.2% { opacity: 1; } 100% { opacity: 1; } }
@keyframes tap { 0%, 38.1% { opacity: 0; transform: scale(.2); } 38.8% { opacity: .9; transform: scale(.5); } 41.5%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes press { 0%, 38.7% { transform: none; filter: none; } 39.4% { transform: scale(.94); filter: brightness(.9); } 40.4%, 100% { transform: none; filter: none; } }
@keyframes paid-a { 0%, 40.8% { opacity: 1; } 41.5%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes paid-b { 0%, 40.8% { opacity: 0; } 41.5%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes j2 { 0%, 30.0% { color: #9c8670; } 31.2%, 92% { color: #f1dca6; } 97%, 100% { color: #9c8670; } }
@keyframes j2-dot { 0%, 30.0% { background: #2b1016; border-color: rgba(212,167,74,.45); box-shadow: none; } 31.2%, 92% { background: #d4a74a; border-color: #d4a74a; box-shadow: 0 0 0 5px rgba(212,167,74,.2); } 97%, 100% { background: #2b1016; border-color: rgba(212,167,74,.45); box-shadow: none; } }
@keyframes j3 { 0%, 39.2% { color: #9c8670; } 40.4%, 92% { color: #f1dca6; } 97%, 100% { color: #9c8670; } }
@keyframes j3-dot { 0%, 39.2% { background: #2b1016; border-color: rgba(212,167,74,.45); box-shadow: none; } 40.4%, 92% { background: #d4a74a; border-color: #d4a74a; box-shadow: 0 0 0 5px rgba(212,167,74,.2); } 97%, 100% { background: #2b1016; border-color: rgba(212,167,74,.45); box-shadow: none; } }
@keyframes j4 { 0%, 50.8% { color: #9c8670; } 51.9%, 92% { color: #f1dca6; } 97%, 100% { color: #9c8670; } }
@keyframes j4-dot { 0%, 50.8% { background: #2b1016; border-color: rgba(212,167,74,.45); box-shadow: none; } 51.9%, 92% { background: #d4a74a; border-color: #d4a74a; box-shadow: 0 0 0 5px rgba(212,167,74,.2); } 97%, 100% { background: #2b1016; border-color: rgba(212,167,74,.45); box-shadow: none; } }
@keyframes fill { 0% { width: 0; } 30.0% { width: 33.3%; } 39.2% { width: 66.6%; } 50.8%, 92% { width: 100%; } 97%, 100% { width: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }

/* Where the browser supports it, cards and steps rise into place as they scroll into view. Elsewhere they are simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gcard, .feature, .card, .promises li, ol.steps li, .photos, .how .arch, details, .two > div:last-child {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: none !important; transition: none !important; }
  .thread .typing, .st-typing, .paid-b, .tap { display: none; }
  .occasions ul { flex-wrap: wrap; width: auto; justify-content: center; }
  .occasions li[aria-hidden] { display: none; }
  .journey::after { width: 75%; }
  .journey li { color: var(--gold-soft); }
  .journey li::before { background: var(--gold); border-color: var(--gold); }
  html { scroll-behavior: auto; }
}

@media (max-width: 860px) {
  .guide-hero .arch { width: min(220px, 70%); }
  .feature { grid-template-columns: none; }
  .feature .gimg { min-height: 0; }
  .feature .gimg img { position: static; aspect-ratio: 16 / 10; }
  .feature .gbody { padding: 26px 24px 28px; }
  .pledge-grid { grid-template-columns: none; gap: 30px; }
  .pledge-head { position: static; text-align: center; }
  .pledge-head .orn { justify-content: center; }
  .pledge-head p { margin-left: auto; margin-right: auto; }
  .seal { width: 180px; height: 180px; margin: 20px auto 0; }
  .seal::after { inset: 50px; }
  .seal img { width: 52px; }
  .promises li { grid-template-columns: 56px 1fr; }
  .promises li::before { font-size: 1.9rem; }
  .hero-grid, .two, .how { grid-template-columns: 1fr; gap: 44px; }
  .how .arch { order: 2; width: min(300px, 100%); }
}
@media (max-width: 640px) {
  /* the festival tables keep each date on one line; the festival name wraps instead */
  .doc table.dates { font-size: .76rem; }
  .doc .dates th, .doc .dates td { padding: 7px 4px; }
  .doc .dates th:first-child, .doc .dates td:first-child { padding-left: 8px; }
  .doc .dates td + td { white-space: nowrap; }
  header nav a:not(.btn) { display: none; }
  /* header on one row, so the hero's WhatsApp button stays on the first screen */
  .bar { flex-wrap: nowrap; min-height: 58px; gap: 10px; }
  .logo img { height: 30px; }
  header nav .btn { white-space: nowrap; }
  .hero { padding: 44px 0 64px; }
  section { padding: 60px 0; }
  .stage { transform: scale(.9); margin: -30px 0 -40px; }
  .photos .tag { left: 8px; bottom: 12px; font-size: .82rem; }
}

/* Why VidhiRoots: six cards as 3 + 3 on desktop */
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* Services explorer: radio tabs (no script). Each service has a 16 second looping scene of four frames, and its four
   steps light up in time with the frames. Picking a tab restarts the loop from the first step. */
.explorer { margin-top: 30px; text-align: left; }
.explorer > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.tabs label { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer;
              transition: background .25s, border-color .25s, transform .25s; }
.tabs label:hover { border-color: #e2c98f; transform: translateY(-2px); }
.tabs svg { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffaf0, #f3dca4);
            fill: none; stroke: var(--maroon); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tabs b { display: block; font: 700 1.2rem/1.1 var(--serif); color: var(--maroon-dark); }
.tabs small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.3; margin-top: 2px; }
.tabs label::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; background: var(--maroon-dark); transform: rotate(45deg); opacity: 0; }
#s-consult:checked ~ .tabs [for=s-consult], #s-match:checked ~ .tabs [for=s-match], #s-muhurat:checked ~ .tabs [for=s-muhurat], #s-puja:checked ~ .tabs [for=s-puja] {
  background: var(--maroon-dark); border-color: var(--maroon-dark); transform: none; }
#s-consult:checked ~ .tabs [for=s-consult]::after, #s-match:checked ~ .tabs [for=s-match]::after, #s-muhurat:checked ~ .tabs [for=s-muhurat]::after, #s-puja:checked ~ .tabs [for=s-puja]::after { opacity: 1; }
#s-consult:checked ~ .tabs [for=s-consult] b, #s-match:checked ~ .tabs [for=s-match] b, #s-muhurat:checked ~ .tabs [for=s-muhurat] b, #s-puja:checked ~ .tabs [for=s-puja] b { color: #fff7e6; }
#s-consult:checked ~ .tabs [for=s-consult] small, #s-match:checked ~ .tabs [for=s-match] small, #s-muhurat:checked ~ .tabs [for=s-muhurat] small, #s-puja:checked ~ .tabs [for=s-puja] small { color: var(--gold-soft); }
#s-consult:focus-visible ~ .tabs [for=s-consult], #s-match:focus-visible ~ .tabs [for=s-match], #s-muhurat:focus-visible ~ .tabs [for=s-muhurat], #s-puja:focus-visible ~ .tabs [for=s-puja] {
  outline: 3px solid var(--gold); outline-offset: 3px; }
.xp { display: none; grid-template-columns: 5fr 6fr; gap: 40px; padding: 18px 40px 18px 18px; background: #fff; border: 1px solid var(--line); border-radius: 28px;
      box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 34px 60px -40px rgba(86,20,32,.6); }
#s-consult:checked ~ .p-consult, #s-match:checked ~ .p-match, #s-muhurat:checked ~ .p-muhurat, #s-puja:checked ~ .p-puja { display: grid; }

/* The scene: a slowly drifting photo, a stories-style progress bar, and the frames on top */
.scene { position: relative; overflow: hidden; min-height: 470px; border-radius: 20px; background: var(--night); isolation: isolate; font-size: .86rem; line-height: 1.4; }
.scene .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .6; animation: drift 16s ease-in-out infinite alternate; }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,10,13,.55), rgba(23,10,13,.2) 40%, rgba(23,10,13,.75)); }
.scene::after { content: "An example"; position: absolute; right: 14px; bottom: 12px; color: rgba(255,247,230,.7); font-size: .7rem; letter-spacing: .04em; }
.prog { position: absolute; left: 14px; right: 14px; top: 14px; height: 3px; background: rgba(255,255,255,.3);
       -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 5px), transparent 0 25%); mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 5px), transparent 0 25%); }
.prog::before { content: ""; display: block; width: 0; height: 100%; background: #fff; animation: prog 16s linear infinite; }
.fr { position: absolute; inset: 40px 20px 36px; display: grid; place-items: center; opacity: 0; animation: frame 16s var(--d) infinite backwards; }
.fr * { animation-duration: 16s; animation-iteration-count: infinite; animation-fill-mode: backwards; }
.f1 { --d: 0s; } .f2 { --d: 4s; } .f3 { --d: 8s; } .f4 { --d: 12s; }
@keyframes frame { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 3%, 22.5% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes prog { to { width: 100%; } }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-2%, -2%); } }
@keyframes pop { 0% { opacity: 0; transform: translateY(8px) scale(.95); } 2.5%, 100% { opacity: 1; transform: none; } }
@keyframes grow { 0% { transform: scaleX(0); } 5%, 100% { transform: scaleX(1); } }
@keyframes draw { 0% { stroke-dashoffset: 100; } 9%, 100% { stroke-dashoffset: 0; } }
@keyframes mark { 0% { background: #fff; color: inherit; border-color: #e3e6e8; } 2%, 100% { background: #d9fdd3; color: #0b6b3a; border-color: #25d366; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); } 50% { box-shadow: 0 0 0 6px rgba(37,211,102,0); } }

/* WhatsApp chat bubbles */
.chat { display: flex; flex-direction: column; gap: 8px; width: min(320px, 100%); }
.b { position: relative; margin: 0; max-width: 85%; padding: 7px 10px; border-radius: 8px; color: #111b21; box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: .9rem; }
.b.me { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0; animation-name: pop; animation-delay: calc(var(--d) + .3s); }
.b.us { align-self: flex-start; background: #fff; border-top-left-radius: 0; animation-name: pop; animation-delay: calc(var(--d) + 1.5s); }
.b .tick { width: 16px; height: 11px; margin-left: 6px; vertical-align: -1px; fill: none; stroke: #53bdeb; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.b.video { padding: 4px; }
.b .pbtn { display: block; margin: 7px -10px -7px; padding: 8px; border-top: 1px solid #e9edef; color: #008069; font-weight: 600; text-align: center; }
.b .thumb { position: relative; display: grid; place-items: center; width: 230px; max-width: 100%; aspect-ratio: 16 / 10; border-radius: 6px;
            background: radial-gradient(circle at 50% 60%, #7a3b16, #2b1016 70%); }
.b .thumb svg { width: 64px; fill: #f6b73c; stroke: #f1dca6; stroke-width: .6; }
.b .thumb i { position: absolute; left: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.5); }
.b .thumb i::after { content: ""; position: absolute; left: 12px; top: 9px; border: 7px solid transparent; border-left: 11px solid #fff; border-right: 0; }
.b .cap { display: block; padding: 5px 6px 2px; }

/* Cards that stand for forms, pickers and documents. They carry no real customer data. */
.ui { width: min(310px, 100%); padding: 16px 18px; border-radius: 16px; background: #fff; color: #111b21; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.ui .t { display: block; margin-bottom: 10px; font: 700 1.15rem/1.2 var(--serif); color: var(--maroon-dark); }
.ui small { display: block; margin-top: 10px; color: #667781; font-size: .76rem; }
.row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; margin: 7px 0; }
.row em { font-style: normal; color: #667781; font-size: .8rem; }
.row i, .row b { position: relative; height: 30px; border: 1px solid #e3e6e8; border-radius: 8px; }
.row i::after { content: ""; position: absolute; left: 10px; top: 11px; width: 60%; height: 7px; border-radius: 4px; background: #d1d7db; transform-origin: left;
                animation: grow 16s infinite backwards; }
.row:nth-of-type(1) i::after { animation-delay: calc(var(--d) + .7s); }
.row:nth-of-type(2) i::after { width: 42%; animation-delay: calc(var(--d) + 1.4s); }
.row:nth-of-type(3) i::after { width: 70%; animation-delay: calc(var(--d) + 2.1s); }
.row:nth-of-type(4) i::after { width: 50%; animation-delay: calc(var(--d) + 2.8s); }
.row b { padding: 0 10px; font-weight: 600; font-size: .85rem; line-height: 28px; animation-name: pop; }
.row.v:nth-of-type(1) b { animation-delay: calc(var(--d) + .6s); }
.row.v:nth-of-type(2) b { animation-delay: calc(var(--d) + 1.2s); }
.row.v:nth-of-type(3) b { animation-delay: calc(var(--d) + 1.8s); }
.done { display: block; margin-top: 12px; padding: 7px 10px; border-radius: 8px; background: #d9fdd3; color: #0b6b3a; font-weight: 600; font-size: .82rem;
        animation-name: pop; animation-delay: calc(var(--d) + 2.4s); }

.ui .seg { display: flex; gap: 6px; margin: 10px 0; }
.ui .seg i, .slots .grid i { font-style: normal; text-align: center; border: 1px solid #e3e6e8; border-radius: 8px; padding: 6px 4px; font-size: .8rem; }
.ui .seg i { flex: 1; }
.ui .seg .on { animation-name: mark; animation-delay: calc(var(--d) + 1.2s); background: #d9fdd3; color: #0b6b3a; border-color: #25d366; }
.slots .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.slots .grid .pick { animation-name: mark; animation-delay: calc(var(--d) + 1.4s); background: #d9fdd3; color: #0b6b3a; border-color: #25d366; }

.call { width: min(330px, 100%); padding: 10px; border-radius: 18px; background: #202c33; }
.call .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.call .tiles i { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; padding: 6px 8px; border-radius: 12px; background: #2a3942; color: #e9edef; font-style: normal; font-size: .75rem;
                 animation-name: pop; }
.call .tiles i::before { content: ""; position: absolute; left: 50%; top: 42%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #54656f;
                         box-shadow: 0 30px 0 -2px #54656f; clip-path: inset(0 0 -40% 0 round 50%); }
.call .tiles .a { background: #3b2a2f; }
.call .tiles .a::before { background: #8a5a44; box-shadow: 0 30px 0 -2px #8a5a44; animation: pulse 1.6s infinite; }
.call .tiles .late { animation-delay: calc(var(--d) + 1.2s); }
.call .tiles .late2 { animation-delay: calc(var(--d) + 2s); }
.call .ctl { display: flex; justify-content: center; gap: 14px; padding: 10px 0 2px; }
.call .ctl i { width: 34px; height: 34px; border-radius: 50%; background: #3b4a54; }
.call .ctl .end { background: #ea0038; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(400px, 100%); }
.pair .t { font-size: 1rem; }
.pair .row { grid-template-columns: none; gap: 3px; margin: 6px 0; }
.pair > span + span .row i::after { animation-delay: calc(var(--d) + 2s); }

.compare { width: min(340px, 100%); }
.compare .charts { display: flex; justify-content: center; gap: 18px; }
.chart { width: 104px; fill: none; stroke: var(--maroon); stroke-width: 1.4; }
.chart * { stroke-dasharray: 100; animation-name: draw; animation-delay: calc(var(--d) + .3s); }
.chart + .chart * { animation-delay: calc(var(--d) + 1s); }
.kootas { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin-top: 14px; }
.kootas span { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 6px; }
.kootas em { font-style: normal; font-size: .72rem; color: #667781; white-space: nowrap; }
.kootas i { height: 5px; border-radius: 3px; background: linear-gradient(90deg, #c8963a, #e7bf63); transform-origin: left; animation-name: grow; animation-delay: calc(var(--d) + 1.8s); }
.kootas span:nth-child(3n+2) i { width: 70%; animation-delay: calc(var(--d) + 2.1s); }
.kootas span:nth-child(3n) i { width: 45%; animation-delay: calc(var(--d) + 2.4s); }

.result, .letter { display: grid; gap: 10px; }
.result .doc, .result .ring, .letter .doc { display: flex; align-items: center; gap: 12px; animation-name: pop; animation-delay: calc(var(--d) + .4s); }
.result .ring { padding-top: 10px; border-top: 1px solid #e9edef; animation-delay: calc(var(--d) + 1.6s); }
.result svg, .letter svg, .agreed svg { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #f3e6cf; fill: none; stroke: var(--maroon); stroke-width: 1.6;
                                        stroke-linecap: round; stroke-linejoin: round; }
.result .ring svg { background: #d9fdd3; stroke: #0b6b3a; }
.result b, .letter .doc b { display: block; font: 700 1.1rem/1.2 var(--serif); color: var(--maroon-dark); }
.result span span, .letter .doc span { color: #667781; font-size: .8rem; }
.letter .tz { justify-self: start; padding: 4px 10px; border-radius: 999px; background: #d9fdd3; color: #0b6b3a; font-weight: 600; font-size: .78rem; animation-name: pop; animation-delay: calc(var(--d) + 2.6s); }

.cal .dow, .cal .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.cal .dow i { font-style: normal; color: #667781; font-size: .7rem; }
.cal .days i { font-style: normal; padding: 3px 0; border-radius: 50%; font-size: .78rem; }
.cal .days .cand { animation-name: mark; animation-delay: calc(var(--d) + .8s); background: #d9fdd3; color: #0b6b3a; }
.cal .days .pick { background: var(--maroon-dark); color: #fff7e6; font-weight: 700; animation-name: pop; animation-delay: calc(var(--d) + 2s); }

.agreed { display: grid; justify-items: center; text-align: center; gap: 8px; }
.agreed .temple svg { width: 64px; height: 64px; padding: 14px; animation-name: pop; animation-delay: calc(var(--d) + .3s); }
.agreed b { font: 700 1.2rem/1.2 var(--serif); color: var(--maroon-dark); }

/* The text side: the steps light up in time with the scene */
.xp .info { display: flex; flex-direction: column; padding: 22px 0 8px; }
.xp .info .kicker { color: #8a6420; }
.xp h3 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); margin: .25em 0 .3em; }
.xp .info > p { margin: 0 0 14px; color: var(--muted); font-size: .98rem; }
ol.flow { list-style: none; counter-reset: f; margin: 0 0 16px; padding: 0; }
ol.flow li { counter-increment: f; position: relative; margin: 2px 0; padding: 8px 12px 8px 50px; border-radius: 12px; color: var(--muted); font-size: .93rem; line-height: 1.5;
             animation: step 16s infinite; }
ol.flow li::before { content: counter(f); position: absolute; left: 10px; top: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center;
                     color: var(--maroon); font: 700 1rem/1 var(--serif); font-variant-numeric: lining-nums; background: #fff; animation: stepnum 16s infinite; }
ol.flow li:not(:last-child)::after { content: ""; position: absolute; left: 23.5px; top: 38px; bottom: -8px; border-left: 1.5px dashed #e2cfa6; }
ol.flow b { display: block; color: var(--maroon-dark); font-size: .98rem; }
ol.flow li:nth-child(2), ol.flow li:nth-child(2)::before { animation-delay: 4s; }
ol.flow li:nth-child(3), ol.flow li:nth-child(3)::before { animation-delay: 8s; }
ol.flow li:nth-child(4), ol.flow li:nth-child(4)::before { animation-delay: 12s; }
@keyframes step { 0%, 24% { background: #f2fbef; color: var(--ink); } 25%, 100% { background: transparent; } }
@keyframes stepnum { 0%, 24% { background: #25d366; border-color: #25d366; color: #111b21; } 25%, 100% { background: #fff; } }
.xp .price { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; margin: auto 0 0; padding-top: 14px; border-top: 1px dashed #e2cfa6; }
.xp .price dt, .xp .price dd { margin: 0; }
.xp .note { margin: 10px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.xp .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; }
.xp .guide { color: var(--green); font-weight: 600; font-size: .95rem; text-decoration: none; }
.xp .guide:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .tabs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tabs label { padding: 10px; gap: 8px; }
  .tabs svg { width: 34px; height: 34px; padding: 7px; }
  .tabs b { font-size: 1.05rem; }
  .xp { grid-template-columns: none; gap: 6px; padding: 10px 10px 18px; border-radius: 22px; }
  .xp .info { padding: 10px 8px 0; }
  .scene { min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .fr.f4 { opacity: 1; }
  .prog { display: none; }
}

/* Free tools (family dates, birth star): the form and the results */
.tool h2 { font-size: 1.6rem; margin-top: 1.4em; }
.tool .f { display: block; font-weight: 600; margin: 16px 0 6px; color: var(--maroon-dark); }
.tool input[type=text], .tool input[type=date], .tool input[type=time], .tool select { width: 100%; font: inherit; color: var(--ink); background: #fff;
  padding: 10px 12px; border: 1px solid #d9c49b; border-radius: 10px; }
.tool input:focus, .tool select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.tool fieldset { border: 0; padding: 0; margin: 16px 0 0; }
.tool legend { font-weight: 600; color: var(--maroon-dark); margin-bottom: 6px; padding: 0; }
.tool .opts { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tool .opts label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.tool .opts input { accent-color: var(--maroon); width: 18px; height: 18px; }
.tool .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.tool .hint { color: var(--muted); font-size: .9rem; font-weight: 400; margin: 6px 0 0; }
.tool .err { color: #a3261b; min-height: 1em; margin: 14px 0 10px; }
button.btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.fam { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px 12px; margin: 18px 0; }
.fam-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fam h3 { margin: 0; }
.fam h4 { margin: 16px 0 4px; font-family: var(--sans); font-size: 1rem; color: var(--maroon-dark); }
.fam .meta { color: var(--muted); font-size: .95rem; margin: 4px 0 0; }
.fam ul.dates { list-style: none; padding: 0; margin: 6px 0 8px; }
.fam ul.dates li { padding: 10px 0 4px; border-top: 1px solid var(--line); }
.fam ul.dates strong { font-size: 1.1rem; }
.fam .alt { color: var(--muted); font-size: .92rem; margin: 4px 0; }
.fam details { margin: 8px 0; padding: 10px 14px; }
.fam details summary { font-size: .95rem; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: .9rem; color: var(--maroon); text-decoration: underline; cursor: pointer; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
@media (max-width: 640px) {
  .tool .row2 { grid-template-columns: 1fr; }
  .panel.tool { padding: 20px 16px; }
}
#card { display: block; width: 100%; max-width: 420px; height: auto; margin: 22px auto 0; border-radius: 14px; box-shadow: 0 18px 40px -24px rgba(23,10,13,.8); }
#cardbox .tool-actions { justify-content: center; }
#out h2 { margin-top: 1.2em; }
#out .big { font-size: 1.3rem; color: var(--maroon); }
table.star th { text-align: left; width: 42%; }
.tools-title { text-align: center; margin: 64px 0 26px; scroll-margin-top: 90px; }
.gimg img.card-top { object-position: 50% 22%; }

/* Guides and tools: figures, diagrams, FAQ */
.fig { margin: 1.8em 0; padding: 22px 22px 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 36px -30px rgba(86,20,32,.5); }
.fig svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.fig figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e2cfa6; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.fig figcaption b { color: var(--maroon-dark); }
.fig .src { display: block; margin-top: 4px; font-size: .8rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; padding: 0; list-style: none; }
.chips a, .chips span { display: inline-block; padding: 5px 14px; border: 1px solid #e2c98f; border-radius: 999px; background: #fff; color: var(--maroon-dark);
                        font-size: .88rem; text-decoration: none; transition: background .2s, border-color .2s; }
.chips a:hover { background: #fdf3dc; border-color: var(--gold); }
.hero .chips span, .hero .chips a { background: rgba(212,167,74,.08); border-color: rgba(212,167,74,.45); color: var(--gold-soft); }
/* Numbers worth knowing: a band of fact cards, each with its source */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 18px; margin: 34px 0 10px; padding: 0; list-style: none; }
.facts li { position: relative; padding: 22px 20px 18px; border: 1px solid rgba(212,167,74,.35); border-radius: 18px; background: rgba(255,247,230,.04); }
.facts b { display: block; font: 700 2.3rem/1 var(--serif); font-variant-numeric: lining-nums; background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.facts span { display: block; margin-top: 8px; font-size: .95rem; line-height: 1.5; }
.facts small { display: block; margin-top: 10px; color: #b9a58b; font-size: .76rem; line-height: 1.4; }
.doc .facts li, section.alt .facts li { background: #fff; border-color: var(--line); }
.doc .facts b, section.alt .facts b { background: none; color: var(--maroon); }
.doc .facts span, section.alt .facts span { color: var(--ink); }
.doc .facts small, section.alt .facts small { color: var(--muted); }
/* Steps and small cards inside the narrow guides */
.doc ol.steps { margin: 1.4em 0; }
.doc ol.steps li { padding-top: 10px; padding-bottom: 6px; }
.doc ol.steps li b { display: block; color: var(--maroon-dark); font-size: 1.05rem; }
.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; margin: 1.2em 0; }
.mini { position: relative; padding: 16px 16px 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; font-size: .93rem; color: var(--muted); line-height: 1.5; }
.mini svg { width: 42px; height: 42px; padding: 9px; margin-bottom: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffaf0, #f3dca4); border: 1px solid #e6c985;
            fill: none; stroke: var(--maroon); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mini b { display: block; color: var(--maroon-dark); font: 700 1.22rem/1.2 var(--serif); margin-bottom: 3px; }
.mini em { font-style: normal; color: #8a6420; font-size: .8rem; }
.minis.prices .mini { text-align: center; }
.minis.prices .mini strong { display: block; margin: 6px 0 4px; font: 700 1.6rem/1.1 var(--serif); color: var(--maroon); }
.doc .two { gap: 18px; align-items: stretch; margin: 1.2em 0; }
.doc .two > div { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.doc .two h3 { margin: 0 0 .3em; font-size: 1.3rem; }
.doc .two ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: .95rem; }
.doc .two .no { background: #fdf6f4; border-color: #efd5cc; }
.doc .photos { margin: 1.6em 0 2.6em; }
/* A message the customer sends, on our side of the chat card */
.wa-card .bubble.me { margin-left: auto; border-radius: 12px 0 12px 12px; background: #d9fdd3; }
.wa-card .bubble.me::before { left: auto; right: -8px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-card-body:has(.me) { padding: 20px 26px 18px 20px; }
.faq { margin-top: 2.4em; }
/* The 36 guna points, drawn to scale */
.bars { margin: 1.2em 0; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.bars div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; margin: 0 0 10px; font-size: .9rem; color: var(--muted); }
.bars strong { color: var(--maroon-dark); }
.bars i { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #c8963a, #e7bf63); transform-origin: left; }
.bars b { font: 700 1.15rem/1 var(--serif); color: var(--maroon); }
.bars .w1 { width: 12.5%; } .bars .w2 { width: 25%; } .bars .w3 { width: 37.5%; } .bars .w4 { width: 50%; }
.bars .w5 { width: 62.5%; } .bars .w6 { width: 75%; } .bars .w7 { width: 87.5%; } .bars .w8 { width: 100%; }
.bars p { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed #e2cfa6; color: var(--muted); font-size: .88rem; }

/* Diagram colours */
.nakwheel { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; font-family: var(--sans); }
.nakwheel .n path { fill: #fff; stroke: #e2c98f; stroke-width: 1; transition: fill .4s; }
.nakwheel .n:nth-child(even) path { fill: #fdf6e6; }
.nakwheel .n text { fill: var(--maroon-dark); font-size: 12.5px; font-weight: 500; }
.nakwheel .n.mine path { fill: var(--maroon); }
.nakwheel .n.mine text { fill: #fff7e6; font-weight: 600; }
.nakwheel .r path { fill: var(--maroon-dark); stroke: #7a3a44; }
.nakwheel .r:nth-child(odd) path { fill: #4a111b; }
.nakwheel .r text { fill: var(--gold-soft); font-size: 13px; letter-spacing: .04em; }
.nakwheel .padas { stroke: #d9bf86; stroke-width: 1; }
.nakwheel .hub { fill: var(--night); stroke: var(--gold); stroke-width: 1.5; }
.nakwheel .hub-t { fill: #fff7e6; font: 700 24px var(--serif); }
.nakwheel .hub-s { fill: var(--gold); font: 600 19px var(--serif); }
.nakwheel .pointer { fill: var(--gold); stroke: var(--maroon-dark); stroke-width: 1.5; }
.nakwheel .mark circle { fill: #fff7e6; stroke: var(--gold); stroke-width: 3; }
.nakwheel .mark.now circle { fill: #25d366; stroke: #fff; stroke-width: 2; }
/* The script sets rot-K (K = 0-26) on the dial so nakshatra K+1 sits centred under the pointer */
#wheeldial { transform-box: view-box; transform-origin: 300px 300px; transition: transform 1.6s cubic-bezier(.3,.7,.2,1); }
.rot-0 { transform: rotate(-6.667deg); } .rot-1 { transform: rotate(-20deg); } .rot-2 { transform: rotate(-33.333deg); }
.rot-3 { transform: rotate(-46.667deg); } .rot-4 { transform: rotate(-60deg); } .rot-5 { transform: rotate(-73.333deg); }
.rot-6 { transform: rotate(-86.667deg); } .rot-7 { transform: rotate(-100deg); } .rot-8 { transform: rotate(-113.333deg); }
.rot-9 { transform: rotate(-126.667deg); } .rot-10 { transform: rotate(-140deg); } .rot-11 { transform: rotate(-153.333deg); }
.rot-12 { transform: rotate(-166.667deg); } .rot-13 { transform: rotate(-180deg); } .rot-14 { transform: rotate(-193.333deg); }
.rot-15 { transform: rotate(-206.667deg); } .rot-16 { transform: rotate(-220deg); } .rot-17 { transform: rotate(-233.333deg); }
.rot-18 { transform: rotate(-246.667deg); } .rot-19 { transform: rotate(-260deg); } .rot-20 { transform: rotate(-273.333deg); }
.rot-21 { transform: rotate(-286.667deg); } .rot-22 { transform: rotate(-300deg); } .rot-23 { transform: rotate(-313.333deg); }
.rot-24 { transform: rotate(-326.667deg); } .rot-25 { transform: rotate(-340deg); } .rot-26 { transform: rotate(-353.333deg); }
.tithis .tt circle { fill: #2b1016; stroke: #d4a74a; stroke-width: 1; }
.tithis .tt path { fill: #f6e3b4; }
.tithis .tt.key circle { stroke-width: 2.5; }
.tithis .num { fill: var(--muted); font-size: 11px; }
.tithis .nm { fill: var(--maroon-dark); font-size: 11px; font-weight: 600; }
.tithis .tt-row { fill: #8a6420; font: 600 12px var(--caps); letter-spacing: .12em; text-transform: uppercase; }
.sunrise .band { fill: #fbeecb; stroke: var(--gold); stroke-dasharray: 4 4; }
.sunrise .band-t { fill: #8a6420; font: 600 13px var(--sans); }
.sunrise .city { fill: var(--maroon-dark); font: 700 21px var(--serif); }
.sunrise .axis { stroke: #cdb68a; stroke-width: 2; }
.sunrise .mid { stroke: #b59c6b; stroke-width: 1.5; }
.sunrise .day { fill: var(--muted); font-size: 12.5px; }
.sunrise .sun circle { fill: #fff; stroke: #b3a38c; stroke-width: 2; }
.sunrise .sun path { stroke: #b3a38c; stroke-width: 2; stroke-linecap: round; }
.sunrise .sun text { fill: var(--muted); font-size: 12px; }
.sunrise .sun.hit circle { fill: var(--saffron); stroke: #c07a12; }
.sunrise .sun.hit path { stroke: #c07a12; }
.sunrise .sun.hit text { fill: var(--maroon); font-weight: 600; }
.clocks .face { fill: #fffaf0; stroke: var(--gold); stroke-width: 2; }
.clocks .night .face { fill: var(--night-2); }
.clocks .tk { stroke: #b59c6b; stroke-width: 1.5; }
.clocks .hh, .clocks .mh { stroke: var(--maroon-dark); stroke-width: 4; stroke-linecap: round; }
.clocks .mh { stroke-width: 2.5; }
.clocks .night .hh, .clocks .night .mh { stroke: var(--gold-soft); }
.clocks .pin { fill: var(--gold); }
.clocks .c-city { fill: var(--maroon-dark); font: 700 20px var(--serif); }
.clocks .c-time { fill: var(--muted); font-size: 13px; }
.ayan .ay-l { fill: #8a6420; font: 600 12.5px var(--sans); }
.ayan .tro { fill: #fdf6e6; stroke: #e2c98f; }
.ayan .tro.s1 { fill: #fff; }
.ayan .sid { fill: var(--maroon-dark); stroke: #7a3a44; }
.ayan .sid.s1 { fill: #4a111b; }
.ayan .ay-n { font: 700 17px var(--serif); fill: var(--maroon-dark); }
.ayan .sid + .ay-n { fill: var(--gold-soft); }
.ayan .gap line, .ayan .gap path { stroke: var(--maroon); stroke-width: 1.5; }
.ayan .gap text { fill: var(--maroon); font: 700 14px var(--sans); }
.ayan .sunpin line { stroke: #c07a12; stroke-width: 2; stroke-dasharray: 5 4; }
.ayan .sunpin circle { fill: var(--saffron); stroke: #c07a12; stroke-width: 2; }
.ayan .sunpin text { fill: var(--maroon-dark); font: 600 13px var(--sans); }

/* Pill radios for the tools: the real radio stays for keyboard and screen readers, the pill shows the choice */
.tool .opts.seg { gap: 8px; }
.tool .seg label { position: relative; gap: 0; }
.tool .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool .seg label > span { display: inline-block; padding: 8px 16px; border: 1px solid #d9c49b; border-radius: 999px; background: #fff; font-size: .95rem; transition: background .2s, border-color .2s, color .2s; }
.tool .seg label:hover > span { border-color: var(--gold); }
.tool .seg input:checked + span { background: var(--maroon-dark); border-color: var(--maroon-dark); color: #fff7e6; }
.tool .seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
/* A short "how it works" strip above a tool */
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; counter-reset: h; }
.howto li { counter-increment: h; position: relative; padding: 14px 14px 12px 54px; background: #fff; border: 1px solid var(--line); border-radius: 14px; font-size: .9rem; color: var(--muted); line-height: 1.45; }
.howto li::before { content: counter(h); position: absolute; left: 12px; top: 13px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
                    border: 1.5px solid var(--gold); background: radial-gradient(circle at 35% 30%, #fffaf0, #f6e3b4); color: var(--maroon); font: 700 1.05rem/1 var(--serif); }
.howto b { display: block; color: var(--maroon-dark); font-size: .98rem; }
/* The birth-star tool: the wheel beside the form */
.star-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.wheel-box { position: sticky; top: 96px; text-align: center; }
.wheel-box p { color: var(--muted); font-size: .9rem; margin: 10px 0 0; }
#moonnext { color: var(--maroon); font-weight: 600; }
/* Today where you live (filled in by the tool's script) */
.today { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin: 0 0 26px; padding: 16px 20px; border-radius: 18px; color: #eadcc6;
         background: url(/img/stars.svg), radial-gradient(ellipse at 10% 0%, #3a121a, var(--night) 75%); border: 1px solid rgba(212,167,74,.35); }
.today[hidden] { display: none; }
.today svg { width: 64px; height: 64px; }
.today svg circle { fill: #2b1016; stroke: var(--gold); }
.today svg path { fill: #f6e3b4; }
.today .kicker { display: block; }
.today dl { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 4px 0 0; }
.today dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #b9a58b; }
.today dd { margin: 0; font: 700 1.2rem/1.2 var(--serif); color: #fff7e6; }
.today small { display: block; margin-top: 4px; color: #b9a58b; }
.toc a { font-size: .82rem; }
.lost { text-align: center; padding: 40px 0 70px; }
.lost img { width: 150px; margin: 0 auto 10px; opacity: .7; animation: spin 90s linear infinite; }
@media (max-width: 860px) {
  .star-grid { grid-template-columns: 1fr; }
  .wheel-box { position: static; }
  .nakwheel { max-width: 400px; }
  .howto { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fig { padding: 14px 10px 12px; }
  .fig figcaption { padding-left: 6px; padding-right: 6px; }
  .bars { padding: 14px 12px; }
  .bars div { font-size: .85rem; }
  .doc .two { grid-template-columns: 1fr; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fig, .mini, .facts li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .bars i { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
  }
}
@keyframes grow-x { from { transform: scaleX(0); } }
.center .chips, .lost .chips { justify-content: center; }
svg [hidden] { display: none; }
.wrap > .fig { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Home puja planner: times, samagri checklist, mantras, sources and the ask box */
.tool .when { margin: 14px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fffdf8; }
.tool .when h3 { margin: 0 0 8px; font-size: 1.3rem; }
.tool .when dl { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 6px 18px; margin: 0; }
.tool .when dt { font-weight: 600; color: var(--maroon-dark); }
.tool .when dd { margin: 0; color: var(--ink); }
.tool .when .alt { color: var(--muted); font-size: .92rem; margin: 10px 0 0; }
.checklist { list-style: none; padding: 0; margin: 1em 0; display: grid; gap: 10px; }
.checklist li { padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: .93rem; line-height: 1.5; }
.checklist label { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--ink); font-weight: 600; font-size: 1rem; }
.checklist input { accent-color: var(--maroon); width: 18px; height: 18px; margin-top: 4px; flex: none; }
.checklist label:has(input:checked) span { text-decoration: line-through; color: var(--muted); }
.checklist .more, .checklist .abroad { padding-left: 28px; margin-top: 2px; }
.checklist .abroad { color: #8a6420; }
a.ref { font-size: .8rem; vertical-align: super; line-height: 0; text-decoration: none; margin-left: 2px; }
.mantra { margin: 12px 0 6px; padding: 12px 16px; border-left: 3px solid var(--gold); background: #fffaf0; border-radius: 0 12px 12px 0; }
.mantra p { margin: 4px 0; font-size: .95rem; }
.mantra .deva { color: var(--maroon-dark); font-size: 1.1rem; line-height: 1.7; }
.mantra .iast { font-style: italic; }
details.said { margin: 10px 0 0; padding: 8px 14px; }
details.said summary { font-size: .9rem; color: var(--muted); }
details.said p { font-size: .88rem; }
.tool.ask { margin: 2em 0; }
.tool.ask textarea { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid #d9c49b; border-radius: 10px; padding: 10px 12px; resize: vertical; }
.tool.ask textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.tool.ask button { margin-top: 12px; }
#answer { margin-top: 14px; }
#answer .ask-cta { padding: 12px 14px; background: #f0faf3; border: 1px solid #bfe3c9; border-radius: 12px; }
ol.sources { font-size: .9rem; color: var(--muted); }
ol.sources li { margin: 4px 0; }
@media (max-width: 640px) { .tool .when dl { grid-template-columns: 1fr; gap: 2px; } .tool .when dd { margin-bottom: 8px; } }

/* Last design pass: contrast, alignment and small-screen fixes */
h1, h2, h3 { text-wrap: balance; }
.hero .kicker { line-height: 1.6; margin-bottom: 4px; }
section.dark .intro { color: #cdb99c; }
.feature .chips span { background: rgba(212,167,74,.1); }
.quote .amount s { color: #7a6d60; }
.stage .example { color: #b9a58b; }
.delivered .file span { color: #54656f; }
.wa-input span { color: #667781; }
.wa-card-foot .btn { text-align: left; text-wrap: balance; }
.gimg img.card-top { object-fit: contain; background: radial-gradient(circle at 50% 35%, #4a1520, #1c0a0e 75%); }
.star-grid > * { margin-top: 0; }
.howto li::before { font-variant-numeric: lining-nums; }
.mini svg { display: block; }
.two.top { align-items: start; }
.callout + h2 { margin-top: 1.4em; }
h3.center { margin-top: 1.6em; }
.checklist label .ref { line-height: 1.3; margin-top: 3px; }
.sunrise text { paint-order: stroke; stroke: #fffaf0; stroke-width: 4px; stroke-linejoin: round; }
/* The empty ring inside the wheel: a soft disc, and the Moon's orbit that the "Moon now" dot sits on */
.nakwheel .inner { fill: #fffaf0; stroke: #e2c98f; }
.nakwheel .orbit { fill: none; stroke: #d9bf86; stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.nakwheel .halo { fill: none; stroke: var(--gold); stroke-opacity: .45; stroke-width: 2; }
@media (min-width: 1000px) {
  .gcards:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .facts:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  /* the nakshatra table drops its number and symbol columns; the wide diagrams scroll sideways at a readable size */
  .doc table.naks { font-size: .84rem; }
  .naks th:nth-child(1), .naks td:nth-child(1), .naks th:nth-child(5), .naks td:nth-child(5) { display: none; }
  .fig:has(.tithis, .sunrise, .ayan, .clocks) { overflow-x: auto; }
  .fig .tithis, .fig .sunrise, .fig .ayan { min-width: 560px; }
  .fig .clocks { min-width: 460px; }
  .wa-card-foot .btn { font-size: .95rem; padding: 12px 18px; }
}

/* Motion: hover lifts, scroll reveals, results that fade in, and small touches on the diagrams.
   Everything here is off when the visitor asks for reduced motion (the global rule above then stops the rest). */
@keyframes appear { from { opacity: 0; translate: 0 14px; } }
@keyframes moon-in { from { opacity: 0; scale: .3; } }
@keyframes sweep { from { rotate: -200deg; } }
@keyframes slide-in { from { opacity: .25; translate: -40px 0; } }
@keyframes draw-x { from { scale: 0 1; } }
@keyframes drop { from { opacity: 0; translate: 0 -24px; } }
@keyframes sunglow { 50% { stroke-width: 7; stroke: #f2b742; } }
@keyframes halo { 50% { stroke-width: 12; stroke-opacity: .12; } }
@keyframes orbit { to { stroke-dashoffset: -900; } }
@keyframes shine { 0%, 82% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes gilt { to { background-position: 100% 0; } }
@keyframes tick { 50% { scale: 1.3; } }
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  /* questions and "more" boxes open smoothly */
  details::details-content { height: 0; overflow: clip; transition: height .35s ease, content-visibility .35s allow-discrete; }
  details[open]::details-content { height: auto; }
  /* cards lift under the pointer */
  .mini, .facts li, .howto li, .today, .wa-card { transition: translate .3s ease, box-shadow .3s ease, border-color .3s ease; }
  .mini:hover, .howto li:hover { translate: 0 -4px; border-color: #e2c98f; box-shadow: 0 16px 30px -22px rgba(86,20,32,.55); }
  .facts li:hover { translate: 0 -4px; border-color: var(--gold); box-shadow: 0 18px 34px -24px rgba(212,167,74,.6); }
  .wa-card:hover { translate: 0 -3px; }
  .chips a { transition: background .2s, border-color .2s, translate .2s; }
  .chips a:hover { translate: 0 -2px; }
  /* a light sweeps across the buttons on hover, and now and then across the main WhatsApp buttons */
  .btn { position: relative; overflow: hidden; isolation: isolate; }
  .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; translate: -130% 0; transition: translate .8s ease;
                background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); }
  .btn:hover::after { translate: 130% 0; }
  .hero .btn:not(.ghost)::after, .wa-card-foot .btn::after { animation: shine 7s ease-in-out 2s infinite; }
  /* the page title and its first lines settle in */
  .hero .kicker, .hero h1, .hero h1 + p, .hero .chips { animation: appear .8s ease both; }
  .hero h1 { animation-delay: .1s; } .hero h1 + p { animation-delay: .22s; } .hero .chips { animation-delay: .34s; }
  /* gold numbers on the dark bands shimmer slowly */
  .facts b { background-size: 220% 100%; animation: gilt 6s ease-in-out infinite alternate; }
  /* tool results fade in, one block after another */
  #out > *, #list > *, #cardbox, .today, #answer > * { animation: appear .55s ease both; }
  #out > :nth-child(2), #list > :nth-child(2) { animation-delay: .08s; }
  #out > :nth-child(3), #list > :nth-child(3) { animation-delay: .16s; }
  #out > :nth-child(4), #list > :nth-child(4) { animation-delay: .24s; }
  #out > :nth-child(n+5), #list > :nth-child(n+5) { animation-delay: .32s; }
  .checklist input:checked { animation: tick .3s ease; }
  /* the wheel: a breathing halo round the hub, the Moon's orbit turning slowly, and the Moon marks glowing */
  .nakwheel .halo { animation: halo 4s ease-in-out infinite; }
  .nakwheel .orbit { animation: orbit 80s linear infinite; }
  .nakwheel .mark circle { animation: sunglow 2.6s ease-in-out infinite; }
  /* the sunrise that counts glows */
  .sunrise .sun.hit circle { animation: sunglow 2.8s ease-in-out infinite; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .howto li, .wa-card, .callout, .panel.tool, .mantra, .checklist li, .doc > h2 { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .howto li:nth-child(2) { animation-range: entry 8% entry 53%; }
    .howto li:nth-child(3) { animation-range: entry 16% entry 61%; }
    /* inside each diagram, parts move into place as the diagram scrolls into view */
    .fig { view-timeline-name: --fig; }
    .tithis .tt { transform-box: fill-box; transform-origin: center; animation: moon-in linear both; animation-timeline: --fig; }
    .tithis .tt:nth-of-type(15n+1) { animation-range: cover 4.0% cover 16.0%; }
    .tithis .tt:nth-of-type(15n+2) { animation-range: cover 5.3% cover 17.3%; }
    .tithis .tt:nth-of-type(15n+3) { animation-range: cover 6.6% cover 18.6%; }
    .tithis .tt:nth-of-type(15n+4) { animation-range: cover 7.9% cover 19.9%; }
    .tithis .tt:nth-of-type(15n+5) { animation-range: cover 9.2% cover 21.2%; }
    .tithis .tt:nth-of-type(15n+6) { animation-range: cover 10.5% cover 22.5%; }
    .tithis .tt:nth-of-type(15n+7) { animation-range: cover 11.8% cover 23.8%; }
    .tithis .tt:nth-of-type(15n+8) { animation-range: cover 13.1% cover 25.1%; }
    .tithis .tt:nth-of-type(15n+9) { animation-range: cover 14.4% cover 26.4%; }
    .tithis .tt:nth-of-type(15n+10) { animation-range: cover 15.7% cover 27.7%; }
    .tithis .tt:nth-of-type(15n+11) { animation-range: cover 17.0% cover 29.0%; }
    .tithis .tt:nth-of-type(15n+12) { animation-range: cover 18.3% cover 30.3%; }
    .tithis .tt:nth-of-type(15n+13) { animation-range: cover 19.6% cover 31.6%; }
    .tithis .tt:nth-of-type(15n+14) { animation-range: cover 20.9% cover 32.9%; }
    .tithis .tt:nth-of-type(15n+15) { animation-range: cover 22.2% cover 34.2%; }
    .clocks .hh, .clocks .mh { transform-box: view-box; animation: sweep linear both; animation-timeline: --fig; animation-range: cover 5% cover 40%; }
    .clocks .clock:nth-of-type(1) :is(.hh, .mh) { transform-origin: 100px 90px; }
    .clocks .clock:nth-of-type(2) :is(.hh, .mh) { transform-origin: 300px 90px; }
    .clocks .clock:nth-of-type(3) :is(.hh, .mh) { transform-origin: 500px 90px; }
    .ayan .sid, .ayan .sid + .ay-n { animation: slide-in linear both; animation-timeline: --fig; animation-range: cover 8% cover 38%; }
    .ayan .gap { transform-box: fill-box; transform-origin: left; animation: draw-x linear both; animation-timeline: --fig; animation-range: cover 25% cover 42%; }
    .ayan .sunpin, .sunrise .sun.hit { animation: drop linear both; animation-timeline: --fig; animation-range: cover 10% cover 30%; }
    .sunrise .band { animation: appear linear both; animation-timeline: --fig; animation-range: cover 5% cover 25%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  #wheeldial { transition: none; } /* the wheel snaps to the star instead of turning */
  .occasions { -webkit-mask-image: none; mask-image: none; }
}

/* Scenes from the video ad, in CSS. Without motion (or with reduced motion) each shows its settled frame:
   the home page's closing section shows the first service, and each guide's arch shows its finished scene */
.cta-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; max-width: 1040px; }
.loop { justify-self: center; width: min(330px, 100%); text-align: center; }
.loop-arch { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 18px 18px; background: var(--night-2);
             border: 2px solid rgba(212,167,74,.8); outline: 1px solid rgba(212,167,74,.35); outline-offset: 10px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); }
.loop-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loop-cap { display: grid; margin-top: 30px; }
.loop-cap p { grid-area: 1 / 1; margin: 0; font-size: .95rem; line-height: 1.5; }
.loop-cap b { display: block; margin-bottom: 4px; font: 700 1.55rem/1.15 var(--serif); color: #fff7e6; }
.loop-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.loop-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(241,220,166,.3); }
.loop-dots i:first-child { width: 20px; background: var(--gold); }
.loop-arch img:not(:first-child), .loop-cap p:not(:first-child) { opacity: 0; }

/* A guide's arch: a small night scene, two lines above it and a card of facts from the page below it */
.arch > .art { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size; border-radius: 999px 999px 18px 18px;
               background: radial-gradient(ellipse at 50% 108%, #561420, transparent 70%), linear-gradient(#170a0d, #2b1016 75%);
               border: 2px solid rgba(212,167,74,.8); outline: 1px solid rgba(212,167,74,.35); outline-offset: 10px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); }
.art::before { content: ""; position: absolute; inset: 0 0 30%;
               background: radial-gradient(circle at 18% 22%, #f1dca6 0 1px, transparent 2px), radial-gradient(circle at 74% 16%, #f1dca6 0 1px, transparent 2px),
                           radial-gradient(circle at 86% 42%, #f1dca6 0 1px, transparent 2px), radial-gradient(circle at 30% 50%, #f1dca6 0 1px, transparent 2px),
                           radial-gradient(circle at 58% 34%, #f1dca6 0 .8px, transparent 1.6px), radial-gradient(circle at 10% 64%, #f1dca6 0 .8px, transparent 1.6px),
                           radial-gradient(circle at 66% 60%, #f1dca6 0 .8px, transparent 1.6px), radial-gradient(circle at 44% 10%, #f1dca6 0 .8px, transparent 1.6px); }
.art .say { position: absolute; inset: 19% 0 auto; text-align: center; font-family: var(--serif); line-height: 1.08; }
.art .say b, .art .say i { display: block; font-size: 10cqw; }
.art .say b { color: #fff7e6; }
.art .say i { font-weight: 600; color: var(--gold-soft); }
.art .note { position: absolute; inset: auto 7% 4.5%; padding: 2.6cqw 5cqw 3cqw; border-radius: 3.5cqw; background: rgba(251,245,234,.97);
             box-shadow: 0 2cqw 5cqw rgba(0,0,0,.35); font: 500 5cqw/1.5 var(--sans); color: var(--ink); }
.art .note em { display: block; margin-bottom: 1cqw; text-align: center; font: 600 3.8cqw var(--caps); font-style: normal; letter-spacing: .12em; color: #8a6420; }
.art .note > span { display: flex; justify-content: space-between; gap: 3cqw; }
.art .note b { color: var(--maroon-dark); }
.art .note b.to { color: #a6470f; }

/* muhurat: night turns to sunrise */
.dawn::before { opacity: 0; }
.dawn .sky { position: absolute; inset: 0; background: linear-gradient(#7a1f2b, #a83a2c 34%, #e58c3f 58%, #f8d58c 72%); }
.dawn .sun { position: absolute; left: 37%; bottom: 29%; width: 26%; aspect-ratio: 1; border-radius: 50%;
             background: radial-gradient(circle at 42% 40%, #fff6d2, #f6b73c 58%, #e38b1f); box-shadow: 0 0 9cqw 3cqw rgba(246,183,60,.5); }
.dawn .ground { position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(#561420, #2b1016); border-top: 1px solid rgba(241,220,166,.55); }
/* festivals: the Moon waxes to full */
.moon .orb { position: absolute; left: 36%; top: 40%; width: 28%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
             background: radial-gradient(circle at 38% 36%, #fffbe8, #f1dca6 55%, #d9b865); box-shadow: 0 0 10cqw 2cqw rgba(241,220,166,.3); }
.moon .shade { position: absolute; inset: -4%; border-radius: 50%; background: #1f0c11; transform: translateX(-112%); }
/* kundli matching: two charts drawn side by side */
.charts .duo { position: absolute; left: 12%; right: 12%; top: 41%; display: flex; align-items: center; justify-content: space-between; }
.charts svg { flex: none; width: 29cqw; fill: rgba(212,167,74,.08); stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 100; }
.charts path { fill: none; }
.charts .duo i { font-style: normal; font-size: 8cqw; color: var(--saffron); }
/* puja from abroad: a lamp is lit */
.diya .glow { position: absolute; left: 10%; top: 21%; width: 80%; aspect-ratio: 1; border-radius: 50%;
              background: radial-gradient(circle, rgba(246,183,60,.45), rgba(246,183,60,.12) 40%, transparent 68%); }
.diya .flame { position: absolute; left: 45.5%; top: 46%; width: 9%; height: 13%; transform-origin: 50% 100%; }
.diya .flame::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 100%;
                       background: radial-gradient(ellipse at 50% 72%, #fff8d6, #f6b73c 45%, #e0701a 85%); box-shadow: 0 0 4cqw 1cqw rgba(246,183,60,.55); }
.diya .bowl { position: absolute; left: 33%; top: 59%; width: 34%; height: 8%; border-radius: 0 0 999px 999px; background: linear-gradient(#d18b43, #7a3d17);
              box-shadow: inset 0 1.2cqw 0 rgba(255,236,190,.35); }
/* consultation: 30 minutes, then 60 */
@property --deg { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.clock .dial, .clock .mins { position: absolute; left: 35%; top: 40%; width: 30%; aspect-ratio: 1; }
.clock .dial { border-radius: 50%; background: conic-gradient(var(--saffron) var(--deg), rgba(241,220,166,.14) 0);
               -webkit-mask-image: radial-gradient(circle, transparent 60%, #000 61%); mask-image: radial-gradient(circle, transparent 60%, #000 61%); }
.clock .mins { display: grid; justify-items: center; align-content: center; }
.clock .mins b { grid-area: 1 / 1; font: 700 10cqw/1 var(--serif); color: #fff7e6; }
.clock .mins small { font: 500 2.9cqw var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); }
.clock .mins b:first-child { opacity: 0; }
/* family dates: the same tithi lands on a different day each year */
.cal .days { position: absolute; left: 25%; top: 41%; width: 50%; aspect-ratio: 7 / 4; border-top: 1px solid rgba(241,220,166,.3);
             background: radial-gradient(circle, rgba(241,220,166,.4) 0 1cqw, transparent 1.1cqw) 0 0 / calc(100% / 7) 25%; }
.cal .ring { position: absolute; left: 0; top: 0; width: calc(100% / 7); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--saffron);
             box-shadow: 0 0 3cqw rgba(246,183,60,.6); transform: translate(400%, 200%); }
/* puja planner: five lamps lit one after another */
.lamps .row5 { position: absolute; left: 9%; right: 9%; top: 60%; display: flex; justify-content: space-between; }
.lamps .row5 i { position: relative; width: 15%; aspect-ratio: 2 / 1; border-radius: 0 0 999px 999px; background: linear-gradient(#d18b43, #7a3d17); }
.lamps .row5 i::before { content: ""; position: absolute; left: 36%; bottom: 100%; width: 28%; aspect-ratio: 2 / 3; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
                   background: radial-gradient(ellipse at 50% 72%, #fff8d6, #f6b73c 45%, #e0701a 85%); box-shadow: 0 0 5cqw 1.5cqw rgba(246,183,60,.4); transform-origin: 50% 100%; }
/* birth star: the Moon moves along the ring of nakshatras */
.nak .path { position: absolute; left: -25%; top: 44%; width: 150%; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(241,220,166,.45); }
.nak .arm { position: absolute; left: 50%; top: calc(44% + 75cqw); transform: rotate(8deg); }
.nak .moonlet { position: absolute; left: -6cqw; top: -81cqw; width: 12cqw; aspect-ratio: 1; border-radius: 50%;
                background: radial-gradient(circle at 38% 36%, #fffbe8, #f1dca6 55%, #d9b865); box-shadow: 0 0 6cqw 1.5cqw rgba(241,220,166,.45); }

@media (max-width: 860px) {
  .cta-grid { grid-template-columns: none; gap: 40px; }
  .loop { width: min(260px, 74%); }
  .guide-hero .arch:has(.art) { width: min(290px, 80%); }
}
@media (prefers-reduced-motion: no-preference) {
  /* four services, four seconds each: the photo slowly settles, and each caption leaves before the next arrives */
  .loop-arch img { animation: loop-img 16s linear infinite both; }
  .loop-cap p { animation: loop-cap 16s ease infinite both; }
  .loop-dots i { animation: loop-dot 16s ease infinite both; }
  .loop-arch img:nth-child(2), .loop-cap p:nth-child(2), .loop-dots i:nth-child(2) { animation-delay: -12s; }
  .loop-arch img:nth-child(3), .loop-cap p:nth-child(3), .loop-dots i:nth-child(3) { animation-delay: -8s; }
  .loop-arch img:nth-child(4), .loop-cap p:nth-child(4), .loop-dots i:nth-child(4) { animation-delay: -4s; }
  /* every guide scene runs on the same 10 seconds: the two lines, the picture moves, then the card row by row; held, then back to the start */
  .art::before { animation: twinkle 3s ease-in-out infinite alternate; }
  .art .say b { animation: art-l1 10s ease infinite; }
  .art .say i { animation: art-l2 10s ease infinite; }
  .art .note { animation: art-card 10s ease infinite; }
  .art .note > span:nth-of-type(1) { animation: art-r1 10s ease infinite; }
  .art .note > span:nth-of-type(2) { animation: art-r2 10s ease infinite; }
  .art .note > span:nth-of-type(3) { animation: art-r3 10s ease infinite; }
  .dawn::before { animation: dawn-stars 10s ease-in-out infinite; }
  .dawn .sky { animation: dawn-sky 10s ease-in-out infinite; }
  .dawn .sun { animation: dawn-sun 10s ease-in-out infinite; }
  .dawn .note b.to { animation: dawn-pick 10s ease infinite; }
  .moon .shade { animation: moon-wax 10s ease-in-out infinite; }
  .charts :is(rect, path) { animation: chart-draw 10s ease-in-out infinite; }
  .charts .duo i { animation: art-pop 10s ease infinite; }
  .diya .glow { animation: diya-glow 10s ease infinite; }
  .diya .flame { animation: diya-lit 10s ease infinite; }
  .diya .flame::before { animation: flick 1.1s ease-in-out infinite alternate; }
  .clock .dial { animation: clock-fill 10s ease-in-out infinite; }
  .clock .mins b:first-child { animation: clock-30 10s ease infinite; }
  .clock .mins b:last-of-type { animation: clock-60 10s ease infinite; }
  .cal .ring { animation: cal-hop 10s ease-in-out infinite; }
  .lamps .row5 i:nth-child(1)::before { animation: lamp1 10s ease infinite; }
  .lamps .row5 i:nth-child(2)::before { animation: lamp2 10s ease infinite; }
  .lamps .row5 i:nth-child(3)::before { animation: lamp3 10s ease infinite; }
  .lamps .row5 i:nth-child(4)::before { animation: lamp4 10s ease infinite; }
  .lamps .row5 i:nth-child(5)::before { animation: lamp5 10s ease infinite; }
  .nak .arm { animation: nak-move 10s ease-in-out infinite; }
}
@keyframes loop-img { 0% { opacity: 0; transform: scale(1.1); } 4%, 29% { opacity: 1; } 33% { opacity: 0; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes loop-cap { 0%, 3% { opacity: 0; transform: translateY(10px); } 7%, 23% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
@keyframes loop-dot { 0%, 24% { width: 20px; background: #d4a74a; } 26%, 100% { width: 7px; background: rgba(241,220,166,.3); } }
@keyframes art-l1 { 0% { opacity: 0; transform: translateY(8px); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes art-l2 { 0%, 10% { opacity: 0; transform: translateY(8px); } 16%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes art-card { 0%, 42% { opacity: 0; transform: translateY(12px) scale(.97); } 50%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes art-r1 { 0%, 48% { opacity: 0; transform: translateX(-6px); } 53%, 100% { opacity: 1; transform: none; } }
@keyframes art-r2 { 0%, 56% { opacity: 0; transform: translateX(-6px); } 61%, 100% { opacity: 1; transform: none; } }
@keyframes art-r3 { 0%, 64% { opacity: 0; transform: translateX(-6px); } 69%, 100% { opacity: 1; transform: none; } }
@keyframes art-pop { 0%, 38% { opacity: 0; transform: scale(.4); } 46%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes dawn-stars { 0%, 14% { opacity: 1; } 40%, 88% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes dawn-sky { 0%, 14% { opacity: 0; } 44%, 88% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes dawn-sun { 0%, 12% { transform: translateY(160%); } 46%, 88% { transform: none; } 97%, 100% { transform: translateY(160%); } }
@keyframes dawn-pick { 0%, 54% { color: #a6470f; } 60%, 86% { color: #d06a12; } 92%, 100% { color: #a6470f; } }
@keyframes moon-wax { 0%, 12% { transform: none; } 48%, 90% { transform: translateX(-112%); } 97%, 100% { transform: none; } }
@keyframes chart-draw { 0%, 10% { stroke-dashoffset: 100; } 40%, 90% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 100; } }
@keyframes diya-glow { 0%, 14% { opacity: 0; } 32%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes diya-lit { 0%, 12% { opacity: 0; transform: scale(.2); } 24%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes flick { from { transform: scale(1) rotate(-1.5deg); } to { transform: scale(.92, 1.07) rotate(1.5deg); } }
@keyframes clock-fill { 0%, 12% { --deg: 0deg; } 28%, 42% { --deg: 180deg; } 56%, 90% { --deg: 360deg; } 97%, 100% { --deg: 0deg; } }
@keyframes clock-30 { 0%, 14% { opacity: 0; } 20%, 43% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes clock-60 { 0%, 46% { opacity: 0; } 51%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cal-hop { 0%, 14% { opacity: 0; transform: translate(100%, 100%); } 18%, 30% { opacity: 1; transform: translate(100%, 100%); } 34%, 46% { transform: translate(500%, 0%); }
                     50%, 62% { transform: translate(200%, 300%); } 66%, 90% { opacity: 1; transform: translate(400%, 200%); } 97%, 100% { opacity: 0; transform: translate(400%, 200%); } }
@keyframes lamp1 { 0%, 14% { opacity: 0; transform: scale(.3); } 18%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes lamp2 { 0%, 20% { opacity: 0; transform: scale(.3); } 24%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes lamp3 { 0%, 26% { opacity: 0; transform: scale(.3); } 30%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes lamp4 { 0%, 32% { opacity: 0; transform: scale(.3); } 36%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes lamp5 { 0%, 38% { opacity: 0; transform: scale(.3); } 42%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes nak-move { 0%, 10% { opacity: 0; transform: rotate(-32deg); } 16% { opacity: 1; } 46%, 90% { opacity: 1; transform: rotate(8deg); } 97%, 100% { opacity: 0; transform: rotate(8deg); } }

/* Store preview: greyed-out items, "Coming soon" */
.soon { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font: 600 .66rem/1.4 var(--sans, inherit); letter-spacing: .06em; text-transform: uppercase;
        background: var(--gilt); color: var(--night); vertical-align: middle; white-space: nowrap; }
.store-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 34px 0 18px; }
.store-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; padding-bottom: 18px; cursor: default; }
.store-card .pic { position: relative; background: #f1ebe0; }
.store-card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1) contrast(.95); opacity: .55; }
.store-card .soon { position: absolute; left: 12px; top: 12px; margin: 0; }
.store-card h3 { font-size: 1.05rem; margin: 14px 18px 6px; color: #5d5148; }
.store-card p { margin: 0 18px; color: #8a7d70; font-size: .9rem; }
.store-note { color: var(--muted); font-size: .88rem; }