/* astrology.co.in home page (for astrologers), in the astrologi.pro look: cream, maroon and saffron, the lotus
   mark, zodiac ornaments. Strict CSP; one first-party script (marketing.js) only enhances the carousels;
   self-hosted fonts (SIL OFL). */
@font-face{font-family:"Fraunces";src:url(/_m/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(/_m/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Noto Serif Devanagari";src:url(/_m/fonts/noto-devanagari.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CFF,U+A8E0-A8FF}

:root{
  --maroon:#5B1A1A;--maroon-2:#7A2E2E;--maroon-d:#3D0F0F;--rust:#8c250a;
  --saffron:#FF914D;--flame:#FF3131;--gold:#E3A33B;--gold-2:#C8811A;--gold-soft:#F6D79C;--marigold:#feb300;
  --cream:#FAF5EF;--cream-2:#F3EDE4;--cream-3:#EDE7DF;--white:#fff;
  --ink:#1D1B16;--body:#4a3b36;--muted:#7a6660;--line:rgba(91,26,26,.12);
  --green:#1B5E20;--red:#B71C1C;
  --brand:linear-gradient(135deg,#5B1A1A 0%,#FF3131 50%,#FF914D 100%);
  --btn:linear-gradient(135deg,#5B1A1A,#8c250a);
  --serif:"Fraunces",Georgia,"Noto Serif",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI","Noto Sans",Roboto,sans-serif;
  --r:20px;--shadow:0 30px 70px -24px rgba(91,26,26,.35);--shadow-s:0 12px 30px -14px rgba(91,26,26,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--body);font:16.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.1;margin:0 0 .5em;font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(2.4rem,5.6vw,4.3rem)}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
a{color:var(--rust)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media(min-width:760px){.wrap{padding:0 32px}}
.narrow{max-width:720px}
.center{text-align:center}
.fine{font-size:.85rem;color:var(--muted);margin-top:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:#fff;padding:8px 12px;border-radius:8px;z-index:20}
.astro-sprite{position:absolute;width:0;height:0;overflow:hidden}
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font:700 .76rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);margin-bottom:1.1em}
.eyebrow::before,.eyebrow::after{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.lead{font-size:1.12rem;color:var(--muted);max-width:640px}
.section-head{text-align:center;max-width:780px;margin:0 auto 52px}
.section-head .lead{margin:0 auto}

/* Brand: lotus + gradient wordmark */
.brand{display:inline-flex;align-items:center;gap:.55em}
.brand-mark{width:38px;height:auto;flex:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.logo:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.wordmark{font:700 1.2rem/1 var(--serif);letter-spacing:-.01em;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark span{color:inherit}
.brand-light .wordmark{background:none;color:#fff}
.brand-light .wordmark span{color:var(--gold)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;text-decoration:none;font-weight:650;border-radius:999px;
  padding:.78em 1.4em;border:2px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s,border-color .18s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,label:focus-within,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn-primary{background:var(--btn);color:#fff;box-shadow:0 12px 28px -10px rgba(91,26,26,.6)}
.btn-primary:hover{box-shadow:0 18px 36px -10px rgba(91,26,26,.7)}
.btn-gold{background:linear-gradient(135deg,#f6c15b,var(--gold) 45%,var(--gold-2));color:#2a1300;box-shadow:0 12px 30px -8px rgba(227,163,59,.6)}
.btn-gold:hover{box-shadow:0 18px 38px -8px rgba(227,163,59,.75)}
.btn-outline{border-color:rgba(91,26,26,.3);color:var(--maroon);background:rgba(255,255,255,.55)}
.btn-outline:hover{border-color:var(--maroon);background:#fff}
.btn-large{padding:.95em 1.7em;font-size:1.05rem}
.btn-small{padding:.5em 1.05em;font-size:.9rem}
.btn-block{display:flex;width:100%}

/* Header */
.top{position:sticky;top:0;z-index:30;background:rgba(250,245,239,.82);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;gap:20px;min-height:70px}
.logo{display:inline-flex;align-items:center;text-decoration:none;margin:0}
.nav-wide{flex:1}
.nav-wide ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:26px}
.nav-wide a,.top-login{position:relative;color:var(--body);text-decoration:none;font-size:.94rem;font-weight:500}
.nav-wide a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transition:transform .25s}
.nav-wide a:hover{color:var(--maroon)}
.nav-wide a:hover::after{transform:scaleX(1)}
.top-login:hover{color:var(--maroon)}
.top-actions{display:flex;align-items:center;gap:16px;margin-left:auto}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;border:1px solid var(--line);background:#fff}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{width:18px;height:2px;background:var(--maroon);border-radius:2px}
.menu nav{position:absolute;right:0;top:52px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;min-width:210px;box-shadow:var(--shadow)}
.menu nav a{display:block;color:var(--ink);text-decoration:none;padding:10px 14px;border-radius:10px}
.menu nav a:hover{background:var(--cream-2)}
@media(max-width:1000px){.nav-wide{display:none}.menu{display:block}}
@media(max-width:520px){.top-login{display:none}.wordmark{font-size:1.05rem}.brand-mark{width:32px}.top-actions{gap:10px}.top .btn-small{padding:.48em .9em;font-size:.84rem}}

/* Hero */
.hero{position:relative;overflow:hidden;padding:60px 0 40px;
  background:radial-gradient(900px 520px at 85% 0%,rgba(255,145,77,.16),transparent 62%),
             radial-gradient(700px 520px at 0% 30%,rgba(91,26,26,.08),transparent 60%),
             linear-gradient(180deg,#fbf4ea,var(--cream) 70%)}
.hero-glow{position:absolute;inset:auto -10% -40% -10%;height:60%;background:radial-gradient(closest-side,rgba(227,163,59,.16),transparent);pointer-events:none}
.hero-grid{position:relative;display:grid;gap:56px;align-items:center}
@media(min-width:1020px){.hero{padding:84px 0 48px}.hero-grid{grid-template-columns:1fr 1.05fr}}
.hero h1 em{font-style:italic;font-weight:500;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.hero .lead{font-size:1.18rem}
.pill{display:inline-flex;align-items:center;gap:.6em;font-size:.86rem;font-weight:600;color:var(--maroon);background:rgba(255,255,255,.7);
  border:1px solid rgba(200,129,26,.35);border-radius:999px;padding:.42em 1em;margin-bottom:1.5em;box-shadow:0 6px 18px -10px rgba(200,129,26,.5)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--saffron);box-shadow:0 0 0 4px rgba(255,145,77,.22);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(255,145,77,.08)}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 24px}
.hero-ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem;color:var(--muted)}
.hero-ticks li::before{content:"✓";color:var(--gold-2);font-weight:700;margin-right:.45em}

/* Floating zodiac signs */
.float-sign{position:absolute;width:26px;height:26px;fill:var(--gold-2);opacity:.22;pointer-events:none;animation:drift 14s ease-in-out infinite}
.fs-1{left:4%;top:14%}.fs-2{left:44%;top:8%;width:20px;animation-delay:-3s}.fs-3{left:8%;bottom:22%;width:30px;animation-delay:-6s}
.fs-4{right:4%;top:58%;width:22px;animation-delay:-2s}.fs-5{left:52%;bottom:16%;width:18px;animation-delay:-8s}.fs-6{right:16%;top:10%;width:24px;animation-delay:-5s}
@keyframes drift{50%{transform:translateY(-14px) rotate(8deg)}}
@media(max-width:700px){.fs-1,.fs-2,.fs-3,.fs-5,.fs-6{display:none}.fs-4{top:auto;bottom:4%}}

/* Hero art: zodiac wheel behind screenshots */
.hero-art{position:relative;padding:0 0 40px;max-width:640px;margin:0 auto;width:100%}
.hero-wheel{position:absolute;left:50%;top:44%;width:128%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.zodiac-wheel{width:100%;height:100%;color:var(--gold-2);fill:none;stroke:currentColor;stroke-width:.5;opacity:.38;animation:turn 240s linear infinite}
.zodiac-wheel use,.zodiac-wheel .w-dot{fill:currentColor;stroke:none}
.zodiac-wheel .w-rim{stroke-width:.9}
.zodiac-wheel .w-tick{stroke-width:.4}
.zodiac-wheel .w-inner{stroke-dasharray:1.5 2.5;opacity:.75}
@keyframes turn{to{transform:rotate(360deg)}}
.hero-art .browser{position:relative;z-index:1;transform:perspective(1600px) rotateY(-8deg) rotateX(3deg);transform-origin:left center;box-shadow:0 40px 90px -24px rgba(91,26,26,.45)}
.phone{position:absolute;z-index:2;left:-28px;bottom:-24px;width:34%;min-width:120px;margin:0;border-radius:26px;padding:7px;background:var(--maroon-d);
  box-shadow:0 30px 70px -15px rgba(61,15,15,.55),0 0 0 1px rgba(255,255,255,.1);animation:float 7s ease-in-out infinite}
.phone img{border-radius:20px;aspect-ratio:9/17;object-fit:cover;object-position:top}
.chip{position:absolute;z-index:3;display:flex;flex-direction:column;background:rgba(255,255,255,.97);color:var(--ink);border-radius:14px;padding:10px 14px;
  box-shadow:var(--shadow-s);border:1px solid var(--line);font-size:.8rem;line-height:1.35;animation:float 8s ease-in-out infinite}
.chip b{font-size:.95rem}
.chip span{color:var(--muted)}
.chip-pay{right:-8px;bottom:6px;animation-delay:-2s}
.chip-pay b{color:var(--green)}
.chip-ai{right:10%;top:-22px;animation-delay:-4s}
.chip-ai b{color:var(--maroon)}
@keyframes float{50%{transform:translateY(-8px)}}
@media(max-width:640px){.phone{left:-6px;width:38%}.chip-ai{display:none}.hero-art .browser{transform:none}.hero-wheel{width:110%}}

/* Stats strip */
.stats{position:relative;list-style:none;margin:56px auto 0;padding:0 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stats li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 12px;border-left:1px solid var(--line)}
.stats li:first-child{border-left:0}
.stats b{font:600 2.3rem/1 var(--serif);background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{margin-top:6px;font-size:.88rem;color:var(--muted);max-width:180px}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr;row-gap:6px}.stats li:nth-child(3){border-left:0}.stats b{font-size:1.9rem}}

/* Browser frame for screenshots */
.browser{margin:0;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(91,26,26,.1)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f6f0e7;border-bottom:1px solid var(--line)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#dcd5c8}
.browser-bar i:first-child{background:#f0a59a}.browser-bar i:nth-child(2){background:#f2d38b}.browser-bar i:nth-child(3){background:#a8d8a8}
.browser-bar span{margin-left:10px;font-size:.74rem;color:var(--muted);background:#fff;border-radius:999px;padding:3px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Traditions marquee */
.traditions{background:var(--maroon-d);color:rgba(246,215,156,.75);padding:22px 0 24px;overflow:hidden;
  background-image:radial-gradient(600px 120px at 50% 0%,rgba(227,163,59,.18),transparent 70%)}
.traditions-k{text-align:center;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin:0 16px 12px}
.marquee{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee ul{list-style:none;margin:0;padding:0;display:flex;gap:0;flex:none}
.marquee li{font:500 1.2rem/1.4 var(--serif);color:var(--gold-soft);white-space:nowrap;padding:0 26px;position:relative}
.marquee li::after{content:"✦";position:absolute;right:-6px;top:.15em;font-size:.7rem;color:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Sections */
.section{position:relative;padding:96px 0}
.section.alt{background:var(--cream-2)}
.section.deep{background:radial-gradient(800px 400px at 85% 0%,rgba(255,145,77,.18),transparent 60%),linear-gradient(160deg,var(--maroon-d),var(--maroon) 70%,#6b2412);color:rgba(255,240,225,.82)}
.section.deep h2,.section.deep h3{color:#fff}
.section.deep .lead{color:rgba(255,240,225,.72)}
.section.deep .eyebrow{color:var(--gold-soft)}
@media(max-width:700px){.section{padding:68px 0}}

/* Before / after */
.ba{display:grid;gap:20px;align-items:center;max-width:1000px;margin:0 auto}
@media(min-width:860px){.ba{grid-template-columns:1fr auto 1fr}}
.ba-card{border-radius:var(--r);padding:30px}
.ba-card ul{list-style:none;margin:0;padding:0}
.ba-card li{position:relative;padding-left:30px;margin:.75em 0}
.ba-before{background:#fff;border:1px dashed rgba(183,28,28,.3)}
.ba-before li{color:var(--muted)}
.ba-before li::before{content:"✕";position:absolute;left:0;color:var(--red);font-weight:700}
.ba-after{background:linear-gradient(150deg,var(--maroon),var(--rust));color:#fff;box-shadow:var(--shadow)}
.ba-after li::before{content:"✓";position:absolute;left:0;color:var(--gold-soft);font-weight:700}
.ba-tag{font:700 .76rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1em;color:var(--red)}
.ba-after .ba-tag{color:var(--gold-soft)}
.ba-arrow{font-size:2rem;color:var(--gold-2);text-align:center}
@media(max-width:859px){.ba-arrow{transform:rotate(90deg)}}

/* Carousels (shared) */
.car-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  list-style:none;margin:0;padding:6px 2px 22px;scrollbar-width:thin;scrollbar-color:rgba(91,26,26,.25) transparent}
.car-track::-webkit-scrollbar{height:6px}
.car-track::-webkit-scrollbar-thumb{background:rgba(91,26,26,.2);border-radius:6px}
.car-track>*{scroll-snap-align:start;flex:none}
.car-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
.car-arrow{width:44px;height:44px;padding:0;cursor:pointer;border-radius:50%;border:1px solid rgba(91,26,26,.2);background:#fff;color:var(--maroon);
  display:grid;place-items:center;box-shadow:var(--shadow-s);transition:background .2s,color .2s,transform .2s}
.car-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.car-arrow:hover{background:var(--maroon);color:#fff;transform:translateY(-2px)}
.car-arrow[hidden],.car-dots[hidden]{display:none}
.car-dots{display:flex;gap:8px}
.car-dot{width:9px;height:9px;padding:0;border-radius:999px;border:0;background:rgba(91,26,26,.2);cursor:pointer;transition:width .3s,background .3s}
.car-dot[aria-current=true]{width:26px;background:var(--brand)}
/* With the script, the scrollbar is replaced by arrows and dots */
[data-carousel]:has(.car-dots:not([hidden])) .car-track{scrollbar-width:none}
[data-carousel]:has(.car-dots:not([hidden])) .car-track::-webkit-scrollbar{display:none}

/* Product tour: a feature list on the left (the open one shows its details and a progress bar), the
   matching screen on the right. Without the script every feature is open and the first screen shows. */
.tour{display:grid;gap:28px;align-items:start}
@media(min-width:1000px){.tour{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px}}
.tour-list{display:flex;flex-direction:column;gap:10px}
.tour-item{position:relative;border-radius:18px;padding:16px 20px 16px 22px;background:transparent;border:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
.tour-head{margin:0;font:inherit}
.tour-head a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;outline-offset:6px}
.tour-k{font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.tour-h{font:600 1.22rem/1.3 var(--serif);color:var(--ink);transition:color .2s}
.tour-head a:hover .tour-h{color:var(--maroon)}
.tour-body{margin-top:10px}
.tour-body>p{margin:0;font-size:1rem;line-height:1.6}
.tour-body .checks{margin-top:12px}
.tour-body .checks li{margin:.45em 0;font-size:.95rem}
.tour-bar{display:none}
.tour.is-js .tour-item{cursor:pointer}
.tour.is-js .tour-item:not(.is-on) .tour-body{display:none}
.tour.is-js .tour-item:not(.is-on):hover{background:rgba(255,255,255,.55)}
.tour.is-js .tour-item.is-on{background:#fff;border-color:var(--line);box-shadow:var(--shadow-s)}
.tour.is-js .tour-item.is-on .tour-h{color:var(--maroon)}
.tour.is-js .tour-bar{display:block;position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;background:rgba(91,26,26,.08);overflow:hidden}
.tour.is-js .tour-item:not(.is-on) .tour-bar{visibility:hidden}
.tour-bar i{display:block;width:100%;height:100%;background:var(--brand);transform-origin:top;transform:scaleY(1)}
.tour.is-playing .tour-item.is-on .tour-bar i{animation:tour-fill var(--every,7s) linear forwards}
.tour.is-paused .tour-item.is-on .tour-bar i{animation-play-state:paused}
@keyframes tour-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.tour-stage{position:relative}
@media(min-width:1000px){.tour-stage{position:sticky;top:96px}}
.tour-shot .browser{margin:0}
.tour-shot img{width:100%;height:auto;display:block}
.tour.is-js .tour-stage{display:grid}
.tour.is-js .tour-shot{grid-area:1/1;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.tour.is-js .tour-shot.is-on{opacity:1;transform:none;pointer-events:auto}
.tour:not(.is-js) .tour-shot:not(:first-child){display:none}
@media(max-width:999px){.tour-stage{order:-1}.tour-item{padding:14px 16px 14px 20px}.tour-h{font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.tour.is-js .tour-shot{transition:none;transform:none}}
.row-k{font:700 .76rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:1em}
.tour-slide h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.row-copy>p{font-size:1.06rem}
.checks{list-style:none;margin:18px 0 0;padding:0}
.checks li{position:relative;padding-left:30px;margin:.6em 0}
.checks li::before{content:"";position:absolute;left:0;top:.32em;width:18px;height:18px;border-radius:50%;
  background:rgba(200,129,26,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2 6.8 11 12 5.4' fill='none' stroke='%235B1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* Order flow */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));position:relative}
.flow li{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(246,215,156,.18);border-radius:var(--r);padding:24px;backdrop-filter:blur(4px)}
.flow h3{font-size:1.15rem;margin-bottom:.35em}
.flow p{margin:0;font-size:.95rem}
.flow-n{display:inline-flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font:700 1rem/1 var(--serif);
  color:#2a1300;background:linear-gradient(135deg,#f6c15b,var(--gold));margin-bottom:16px;box-shadow:0 0 0 5px rgba(227,163,59,.15)}
@media(min-width:1100px){.flow li:not(:last-child)::after{content:"";position:absolute;top:44px;right:-17px;width:18px;height:2px;background:rgba(227,163,59,.6)}}
.steps-setup{margin:56px auto 0;max-width:900px;background:rgba(255,255,255,.06);border:1px solid rgba(246,215,156,.18);border-radius:var(--r);padding:28px 32px}
.steps-title{font:600 1.25rem/1.2 var(--serif);color:#fff;margin-bottom:.8em}
.steps-setup ol{margin:0;padding-left:1.3em}
.steps-setup li{margin:.55em 0}
.steps-setup li::marker{color:var(--gold)}
.steps-setup b{color:#fff}

/* Voices carousel */
.voices{background:var(--cream)}
.voices .car{margin-top:8px}
.voices-track{padding:8px 4px 26px;gap:22px}
.voice{width:calc((100% - 44px) / 3);display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 24px;
  box-shadow:var(--shadow-s);position:relative;overflow:hidden}
.voice::before{content:"“";position:absolute;right:18px;top:-18px;font:700 7rem/1 var(--serif);background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.18}
.voice-tag{align-self:flex-start;margin:0 0 14px;font:700 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);background:rgba(227,163,59,.12);padding:.5em .8em;border-radius:999px}
.voice blockquote{margin:0 0 20px;flex:1}
.voice blockquote p{margin:0;font:400 1.08rem/1.55 var(--serif);color:var(--ink)}
.voice-who{display:flex;align-items:center;gap:12px;margin:0;font-size:.88rem;color:var(--muted);line-height:1.35}
.voice-who b{color:var(--ink)}
.voice-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 1rem/1 var(--serif);color:#fff;background:var(--brand);flex:none}

/* Comparison */
.table-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--shadow-s);background:#fff;max-width:1000px;margin:0 auto}
.compare{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font:600 .95rem/1.3 var(--sans);color:var(--ink);background:#fbf6ef}
.compare tbody th{font-weight:600;color:var(--ink);width:30%}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare td{color:var(--muted)}
.compare .us{background:rgba(91,26,26,.04);color:var(--ink);font-weight:600}
.compare thead .us{background:var(--btn);color:#fff}
.compare .yes::before{content:"✓ ";color:var(--green);font-weight:700}
.compare .no::before{content:"✕ ";color:var(--red);font-weight:700}

/* Pricing */
.billing>input{position:absolute;opacity:0;pointer-events:none}
.switch{display:flex;width:max-content;max-width:100%;margin:0 auto 48px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:var(--shadow-s)}
.switch label{cursor:pointer;padding:.55em 1.3em;border-radius:999px;font-weight:600;font-size:.95rem;color:var(--muted);display:flex;align-items:center;gap:.5em}
.save{font-size:.72rem;font-weight:700;color:var(--green);background:rgba(27,94,32,.1);border-radius:999px;padding:2px 8px}
#bill-month:checked~.switch label[for=bill-month],#bill-year:checked~.switch label[for=bill-year]{background:var(--btn);color:#fff}
#bill-year:checked~.switch .save{background:rgba(255,255,255,.2);color:#fff}
#bill-month:focus-visible~.switch label[for=bill-month],#bill-year:focus-visible~.switch label[for=bill-year]{outline:3px solid var(--gold);outline-offset:2px}
.per-year{display:none}
#bill-year:checked~.plans .per-year{display:block}
#bill-year:checked~.plans .per-month{display:none}
.plans{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px 28px;display:flex;flex-direction:column;box-shadow:var(--shadow-s);transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan h3{font-size:1.4rem;margin-bottom:.6em}
.plan-rec{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--brand) border-box;box-shadow:var(--shadow)}
@media(min-width:960px){.plan-rec{transform:translateY(-12px)}.plan-rec:hover{transform:translateY(-16px)}}
.plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);margin:0;background:var(--brand);color:#fff;
  font:700 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:7px 14px;white-space:nowrap}
.price{margin:0;display:flex;align-items:baseline;gap:.25em}
.amount{font:600 2.7rem/1 var(--serif);color:var(--maroon);letter-spacing:-.02em}
.unit{color:var(--muted)}
.sub{font-size:.88rem;color:var(--muted);margin:.5em 0 22px}
.plan .checks{margin-top:24px}
.plan .checks li{font-size:.95rem}
.included{margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 32px}
.included h3{margin-bottom:.2em}
.checks.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 28px}

/* Trust */
.trust{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.trust li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.trust li:hover{transform:translateY(-3px);box-shadow:var(--shadow-s)}
.trust-i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;margin-bottom:14px;background:linear-gradient(135deg,rgba(255,145,77,.18),rgba(91,26,26,.1))}
.trust-i svg{width:20px;height:20px;fill:var(--maroon)}
.trust p{margin:0;color:var(--muted)}

/* FAQ */
.faq{display:grid;gap:12px;max-width:1000px;margin:0 auto}
@media(min-width:900px){.faq{grid-template-columns:1fr 1fr;align-items:start}}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 22px;transition:box-shadow .2s,border-color .2s}
.faq details[open]{box-shadow:var(--shadow-s);border-color:rgba(200,129,26,.4)}
.faq summary{cursor:pointer;list-style:none;font-weight:600;color:var(--ink);padding:18px 32px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:2px;top:24px;width:10px;height:10px;border-right:2px solid var(--gold-2);border-bottom:2px solid var(--gold-2);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg);top:28px}
.faq details p{margin:0 0 18px;color:var(--muted)}

/* Final call to action */
.final{position:relative;overflow:hidden;padding:110px 0 96px;color:rgba(255,240,225,.85);
  background:radial-gradient(700px 420px at 50% 115%,rgba(255,145,77,.35),transparent 60%),linear-gradient(170deg,var(--maroon),var(--maroon-d))}
.final-wheel{position:absolute;left:50%;top:50%;width:820px;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.final-wheel .zodiac-wheel{color:var(--gold-soft);opacity:.16;animation-duration:300s}
.final h2{color:#fff;font-size:clamp(2rem,4.6vw,3.3rem)}
.final .lead{color:rgba(255,240,225,.78);margin:0 auto 32px}
.final-inner{position:relative}
.final-lotus{width:76px;margin:0 auto 18px;filter:drop-shadow(0 8px 24px rgba(255,145,77,.45))}
.verse{margin:44px 0 4px;font:500 1.25rem/1.6 "Noto Serif Devanagari",var(--serif);color:var(--gold-soft)}
.verse-en{margin:0;font-size:.88rem;color:rgba(255,240,225,.6);font-style:italic}

/* Footer */
.foot{background:var(--maroon-d);color:rgba(255,240,225,.65);padding:56px 0 28px;font-size:.94rem}
.foot-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot-brand{grid-column:span 2}
@media(max-width:560px){.foot-brand{grid-column:auto}}
.foot-brand .logo{margin-bottom:12px}
.foot-verse{margin:18px 0 2px;font:500 1.05rem/1.5 "Noto Serif Devanagari",var(--serif);color:var(--gold-soft)}
.foot-verse-en{font-size:.82rem;font-style:italic;color:rgba(255,240,225,.5)}
.foot-h{color:#fff;font-weight:600;margin-bottom:.6em}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:.45em 0}
.foot a{color:rgba(255,240,225,.75);text-decoration:none}
.foot a:hover{color:#fff}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;font-size:.84rem}
.foot-base p{margin:0}

/* Reveal on scroll: CSS scroll-driven animations where supported; content is always visible otherwise. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .zodiac-wheel,.phone,.chip,.float-sign,.dot,.marquee{animation:none}
  .marquee{flex-wrap:wrap;width:auto;justify-content:center}
  .marquee ul[aria-hidden]{display:none}
  .marquee ul{flex-wrap:wrap;justify-content:center;row-gap:6px}
  .car-track{scroll-behavior:auto}
  .btn,.design .browser,.plan,.trust li{transition:none}
  .btn:hover,.design:hover .browser,.plan:hover,.trust li:hover{transform:none}
}

/* Referral invite (?ref=CODE) and plan descriptions set in Super Admin */
.invite{display:inline-block;margin:0 0 18px;padding:.6em 1em;border-radius:14px;background:#fff7ed;border:1px dashed var(--gold-2);
  color:var(--maroon);font-size:.95rem;line-height:1.45}
.invite strong{color:var(--maroon-d)}
.plan-desc{margin:-.3em 0 .9em;color:var(--muted);font-size:.92rem;line-height:1.45}

@media(max-width:1000px){.voice{width:calc((100% - 22px) / 2)}}
@media(max-width:640px){.voice{width:86%}}

/* ════ Fit to the screen ════════════════════════════════════════════════════════════════════════════
   Laptops and desktops: the hero (with the stats strip) fills exactly the first screen below the 71px
   header, and every section's spacing follows the screen height, so each part fits one screen without
   big empty bands (1366×768 up to 1920×1080 and beyond). Phones keep the natural, scrolling layout. */
:root{--hdr:71px;--gap-y:clamp(44px,8vh,96px)}
.section{padding:var(--gap-y) 0}
.section-head{margin-bottom:clamp(22px,4.2vh,48px)}
.section-head h2{margin-bottom:.35em}
.final{padding:calc(var(--gap-y) + 8px) 0 var(--gap-y)}
@media(min-width:1020px){
  .hero{min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;
    padding:clamp(18px,4vh,56px) 0 clamp(10px,2vh,24px)}
  .hero-grid{gap:clamp(28px,4vw,56px)}
  .hero h1{font-size:clamp(2.4rem,min(4.3vw,7.4vh),4.3rem);margin-bottom:.35em}
  .hero .lead{font-size:clamp(1rem,1.2vw + .5vh,1.18rem);margin-bottom:0}
  .pill{margin-bottom:clamp(.8em,2.2vh,1.5em)}
  .cta-row{margin:clamp(16px,3vh,28px) 0 clamp(12px,2.4vh,24px)}
  .hero-art{max-width:min(640px,calc((100svh - var(--hdr)) * .95))}
  .stats{margin-top:clamp(14px,3.2vh,48px)}
  .stats li{padding:clamp(6px,1.2vh,16px) 12px}
  .stats span{margin-top:4px}
  .stats b{font-size:clamp(1.5rem,3.8vh,2.2rem)}
  /* Product tour: the screen is never taller than the window allows; the list stays compact */
  .tour-item{padding:clamp(10px,1.6vh,16px) 20px clamp(10px,1.6vh,16px) 22px}
  .tour-h{font-size:clamp(1.05rem,1.1vw + .6vh,1.22rem)}
  .tour-body>p{font-size:.97rem}
  .tour-list{gap:clamp(4px,.8vh,10px)}
  .tour-stage{top:calc(var(--hdr) + 24px)}
  .tour-shot .browser{max-width:min(100%,calc((100svh - var(--hdr) - 140px) * 1.5));margin:0 auto}
  /* Pricing: tighter cards so the three plans fit a laptop screen */
  .plan{padding:clamp(22px,3.2vh,32px) 26px}
  .plans{gap:18px}
  /* Before/after, how it works, trust: a little less air */
  .ba-card{padding:clamp(20px,3.4vh,30px)}
  .ba-card li{margin:clamp(.45em,1vh,.75em) 0}
  .flow li{padding:clamp(16px,2.6vh,24px)}
  .steps-setup{margin-top:clamp(24px,4.5vh,56px);padding:clamp(18px,3vh,28px) 32px}
  .compare th,.compare td{padding:clamp(9px,1.6vh,16px) 18px}
}
/* Product tour on wide screens: each feature's ticks sit under its screen (two columns), so the list
   and the screen are about the same height; on phones and without the script they stay in the list. */
.tour-checks{display:none}
@media(min-width:1000px){
  .tour.is-js .tour-body .checks{display:none}
  .tour.is-js .tour-checks{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin:clamp(14px,2.4vh,22px) auto 0;
    max-width:min(100%,calc((100svh - var(--hdr) - 140px) * 1.5))}
  .tour.is-js .tour-checks li{margin:.3em 0;font-size:.94rem}
}
/* Pricing: compact plan lists and a slim "Every plan includes" band */
@media(min-width:1020px){
  .plan .checks{margin-top:clamp(14px,2.4vh,24px)}
  .plan .checks li{margin:clamp(.3em,.7vh,.6em) 0;font-size:.92rem}
  #pricing .section-head{max-width:960px}
  #pricing .section-head .lead{max-width:none}
  .switch{margin-bottom:clamp(26px,4.2vh,48px)}
  .plan .btn-block{padding-top:.75em;padding-bottom:.75em}
  .included{margin-top:clamp(20px,3.4vh,44px);padding:clamp(16px,2.6vh,26px) 30px;display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:center}
  .included h3{margin:0;font-size:1.1rem;white-space:nowrap}
  .included .checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 18px;margin:0}
  .included .checks li{margin:.25em 0;font-size:.9rem}
}
/* Short laptop screens (768px high and less): the hero gives up the decorative extras first */
@media(min-width:1020px) and (max-height:820px){
  .hero-ticks li:nth-child(3){display:none}
  .stats span{font-size:.8rem}
  .chip-ai{top:-8px}
}

/* Free checks on every astrologer site (lead magnets into paid reports) */
.checks-sec{background:linear-gradient(180deg,var(--cream),#f7eee2)}
.fc-grid{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.fc-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vh,28px) 26px;box-shadow:var(--shadow-s);transition:transform .3s,box-shadow .3s}
.fc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.fc-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--btn);margin-bottom:14px;
  box-shadow:0 10px 22px -12px rgba(91,26,26,.7)}
.fc-ico svg{width:24px;height:24px;fill:none;stroke:var(--gold-soft);stroke-width:1.6;stroke-linejoin:round}
.fc-card h3{font-size:1.3rem;margin-bottom:.35em}
.fc-card>p{margin:0;font-size:.97rem}
.fc-card>p:nth-of-type(1){min-height:4.6em}
.fc-free{margin-top:auto!important;padding-top:16px;font-size:.88rem!important;color:var(--muted)}
.fc-free b{display:inline-block;margin-right:.35em;padding:.2em .6em;border-radius:999px;background:#e8f5e9;color:var(--green);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.fc-then{margin-top:8px!important;padding-top:10px;border-top:1px dashed var(--line);font-weight:600;color:var(--maroon);font-size:.95rem!important}
.fc-then span{color:var(--gold-2);margin-right:.2em}
.fc-band{margin-top:clamp(18px,3vh,30px);display:grid;gap:14px 32px;align-items:center;border-radius:var(--r);padding:clamp(18px,3vh,26px) 30px;
  background:linear-gradient(140deg,var(--maroon),var(--rust));color:rgba(255,240,225,.92);box-shadow:var(--shadow)}
@media(min-width:960px){.fc-band{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.fc-k{margin:0 0 6px;font:700 .76rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.fc-list{margin:0;font:500 1.05rem/1.5 var(--serif);color:#fff}
.fc-notes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fc-notes li{position:relative;padding-left:24px;font-size:.92rem}
.fc-notes li::before{content:"✓";position:absolute;left:0;color:var(--gold-soft);font-weight:700}

/* Free checks: one sliding row (marketing.js adds arrows and dots; without it the row swipes and scrolls) */
.fc-car{margin-bottom:28px}
.fc-car{--n:3;--gap:22px}
.fc-track{gap:var(--gap)!important;padding:6px 0 22px}
.fc-track>.fc-card{flex:0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));min-width:0}
.fc-track .fc-card:hover{transform:none}
.fc-track .fc-then{min-height:3.4em}          /* one or two lines: the footers line up */
@media (max-width:980px){.fc-car{--n:2;--gap:18px}}
@media (max-width:600px){.fc-car{--n:1}}