/* Shaadi Parrot — site styles. Tokens and rules come from DESIGN.md. */
:root {
  --sky: #F26B7F;
  --dawn: #FDBFA3;
  --plum: #41213E;
  --plum-2: #6E5268;
  --sindoor: #E0404F;
  --sindoor-deep: #C42F40;
  --rose-1: #FF7E88;
  --haldi: #F4B63F;
  --haldi-ink: #9A6412;
  --milk: #FFF6F1;
  --blush: #FFE3DA;
  --line: #F3D6CC;
  --card: #FFFBF9;
  --brand: "Baloo 2", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 14px 34px -16px rgba(122, 38, 60, .45);
  --shadow-soft: 0 8px 22px -14px rgba(122, 38, 60, .35);
  --sec: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--milk); color: var(--plum);
  font: 400 1rem/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--plum); color: #fff; font-weight: 700; }
.skip:focus { top: 12px; }

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); }
h3 { font-size: 1.45rem; line-height: 1.1; font-weight: 700; }
.t-plum { color: var(--plum); }
.t-rose {
  color: var(--sindoor);
  background: linear-gradient(180deg, var(--rose-1) 8%, var(--sindoor-deep) 92%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.kicker { font-size: .84rem; font-weight: 700; color: var(--haldi-ink); letter-spacing: .01em; }
.center { text-align: center; margin-inline: auto; justify-items: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.4em; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, #F0566A, var(--sindoor-deep)); color: #fff;
  font: 700 1rem/1 var(--text); text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(196, 47, 64, .7), inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(196, 47, 64, .75), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-small { min-height: 40px; padding: .55em 1.1em; font-size: .92rem; }
.btn-ghost { background: #fff; color: var(--sindoor-deep); box-shadow: var(--shadow-soft), inset 0 0 0 2px var(--line); }
.text-link { display: inline-block; font-weight: 700; color: var(--sindoor-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link-btn { background: none; border: 0; padding: .4em 0; color: var(--plum-2); font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.play-badge {
  display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px 0 18px;
  background: #1F1A1D; color: #fff; text-decoration: none; border-radius: 14px;
  box-shadow: 0 10px 20px -10px rgba(31, 26, 29, .8); transition: transform .15s ease;
}
.play-badge:hover { transform: translateY(-1px); }
.play-badge svg { width: 28px; height: 30px; flex: none; }
.play-badge span { display: flex; flex-direction: column; font: 600 1.3rem/1.05 var(--text); letter-spacing: -.01em; }
.play-badge small { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.play-badge-sm { height: 50px; padding: 0 16px 0 14px; }
.play-badge-sm span { font-size: 1.1rem; }

/* ---------- header on the sky ---------- */
.top {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #F47A85 0%, #F9A08E 45%, #FCC49F 80%, #FDD6B0 100%);
}
.sky { position: absolute; inset: 0; z-index: -1; }
.sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }

.nav { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { width: 46px; height: 46px; border-radius: 13px; box-shadow: 0 6px 14px -6px rgba(122, 38, 60, .6); }
.brand span { font: 800 1.2rem/.88 var(--display); color: var(--sindoor-deep); padding-top: 3px; }
.nav-end { display: flex; align-items: center; gap: 8px; }
.menu-btn {
  display: inline-grid; place-content: center; gap: 4px; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 14px; background: rgba(255, 248, 245, .75); cursor: pointer;
}
.menu-btn span { display: block; width: 20px; height: 2.4px; border-radius: 2px; background: var(--plum); transition: transform .2s ease, opacity .2s ease; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }
.nav-links {
  display: none; position: fixed; left: 10px; right: 10px; top: 72px; z-index: 60;
  flex-direction: column; gap: 2px; padding: 12px; border-radius: 22px;
  background: var(--card); box-shadow: 0 24px 50px -18px rgba(65, 33, 62, .55);
}
.menu-open .nav-links { display: flex; }
.nav-links a { padding: 12px 14px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.nav-links a[aria-current="page"] { background: var(--blush); color: var(--sindoor-deep); }
.nav-links .btn { margin-top: 8px; color: #fff; }

/* ---------- home hero ---------- */
.top-home { padding-bottom: 24px; }
.hero-grid { display: grid; grid-template-areas: "title" "stage" "slogan" "copy"; justify-items: center; text-align: center; padding-top: 4px; }
.hero-title { grid-area: title; }
.hero-kicker { font-weight: 700; font-size: .95rem; color: var(--plum); margin-bottom: 8px; }
.hero-title h1 { font-size: clamp(3.1rem, 1.6rem + 6vw, 5.8rem); line-height: .92; }
.hero-title h1 span { display: block; }
.hero-copy { grid-area: copy; display: grid; gap: 16px; justify-items: center; max-width: 31rem; }
.hero-copy .cta-row { order: -1; }
.lead { font-size: 1.06rem; font-weight: 500; color: var(--plum); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.meta { font-size: .88rem; font-weight: 700; color: var(--plum-2); }
.slogan { grid-area: slogan; margin: 6px 0 20px; font: 800 clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem)/1.05 var(--display); color: var(--plum); }
.slogan span { color: var(--sindoor-deep); }

.hero-stage { grid-area: stage; position: relative; width: min(100%, 440px); aspect-ratio: 1 / .84; margin-top: 4px; }
.hero-mithu { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 100%; width: auto; max-width: none; z-index: 2; filter: drop-shadow(0 16px 20px rgba(160, 50, 60, .25)); }
.couple { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.polaroid { position: absolute; width: 29%; padding: 6px 6px 22px; background: var(--card); border-radius: 14px; box-shadow: 0 14px 26px -14px rgba(122, 38, 60, .6); }
.polaroid img { border-radius: 9px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.polaroid svg { position: absolute; left: 50%; bottom: 4px; translate: -50% 0; width: 16px; height: 15px; }
.pol-a { left: 0; bottom: 18%; rotate: -7deg; }
.pol-b { right: 0; bottom: 20%; rotate: 6deg; }
.couple-heart { display: none; }
.meter {
  position: absolute; right: 0; bottom: 1%; display: grid; gap: 5px; padding: 8px 12px 10px;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow-soft);
  font: 800 .95rem/1 var(--display); color: var(--plum); text-align: left;
}
.meter-bar { display: block; width: 100px; height: 8px; border-radius: 99px; background: #FBE1E1; overflow: hidden; }
.meter-bar i { display: block; height: 100%; width: 98%; border-radius: inherit; background: linear-gradient(90deg, #FF7E8E, var(--sindoor)); }
.pill-match {
  position: absolute; left: 0; top: 4%; z-index: 4; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 12px; background: rgba(255, 248, 245, .94); box-shadow: var(--shadow-soft);
  font: 800 .95rem/1 var(--display); color: var(--sindoor-deep);
}
.pill-match svg { width: 20px; height: 18px; }
.fh { position: absolute; z-index: 1; filter: drop-shadow(0 6px 10px rgba(238, 86, 112, .35)); }
.fh-1 { width: 36px; height: 33px; right: 16%; top: 2%; }
.fh-2 { width: 24px; height: 22px; left: 20%; top: 28%; }
.sp { position: absolute; color: #FFF6E8; z-index: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8)); }
.sp-1 { width: 18px; height: 18px; right: 6%; top: 24%; }
.sp-2 { width: 12px; height: 12px; left: 32%; top: 4%; }

}
@keyframes swing-a { from { opacity: 0; transform: translate(-30px, 20px) rotate(-14deg); } }
@keyframes swing-b { from { opacity: 0; transform: translate(30px, 20px) rotate(14deg); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.18); } }
@keyframes fill { from { width: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- inner page hero ---------- */
.page-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 16px; padding: 12px 0 34px; }
.page-hero .ph-copy { display: grid; gap: 10px; align-content: center; padding-bottom: 8px; }
.page-hero h1 { font-size: clamp(2.5rem, 1.7rem + 3.8vw, 4.6rem); line-height: .95; }
.page-hero .lead { max-width: 36rem; }
.ph-art { width: clamp(110px, 30vw, 300px); align-self: end; filter: drop-shadow(0 14px 18px rgba(160, 50, 60, .25)); }
.page-hero.solo { grid-template-columns: 1fr; }

/* ---------- common sections ---------- */
section { position: relative; }
.sec { padding: var(--sec) 0; }
.sec-blush { background: var(--blush); }
.sec-head { display: grid; gap: 12px; max-width: 42rem; margin-bottom: 36px; }
.sec-head p { font-size: 1.05rem; color: var(--plum-2); }
.center-link { margin-top: 28px; text-align: center; }
.hint { font-weight: 700; color: var(--haldi-ink); }
.muted { color: var(--plum-2); }

/* signature: fortune cards */
.fates-sec { padding: var(--sec) 0 calc(var(--sec) - 8px); background: var(--milk); }
.fates-grid { display: grid; gap: 64px; align-items: center; }
.fates-copy { display: grid; gap: 14px; max-width: 34rem; }
.fates-copy > p:not(.hint) { color: var(--plum-2); font-size: 1.05rem; }
.fates {
  position: relative; width: 100%; max-width: 460px; justify-self: center;
  padding: 18px 16px 20px; border-radius: 28px;
  background: linear-gradient(180deg, #FDE2D6, #FBD0C4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), var(--shadow-soft);
}
.fates-mithu { width: 36%; margin: -86px auto -6px; position: relative; z-index: 2; filter: drop-shadow(0 10px 12px rgba(160, 50, 60, .25)); }
.fate-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; perspective: 900px; position: relative; z-index: 3; }
.fate { position: relative; display: grid; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 16px; }
.fate:nth-child(1) { rotate: -4deg; }
.fate:nth-child(3) { rotate: 4deg; }
.fate-inner { position: relative; display: block; aspect-ratio: 3 / 4.2; border-radius: 16px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .8, .3, 1); }
.fate-back, .fate-front { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fate-back {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 27%, rgba(244, 182, 63, .9) 27.5% 29%, transparent 29.5%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 214, 140, .22) 0 10deg, transparent 10deg 20deg),
    linear-gradient(160deg, #E8506A, #B72C4A 70%, #8E2344);
  box-shadow: inset 0 0 0 3px var(--haldi), inset 0 0 0 6px #B72C4A, inset 0 0 0 7.5px rgba(244, 182, 63, .7), 0 12px 20px -12px rgba(122, 38, 60, .7);
}
.jewel { width: 28%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF8A8A, #D81E35 45%, #8C0F22); box-shadow: 0 0 0 4px var(--haldi), 0 0 0 6px #C98A1A, 0 4px 8px rgba(0,0,0,.35); }
.fate:hover .fate-inner { transform: translateY(-5px); }
.fate-front { transform: rotateY(180deg); background: var(--card); box-shadow: inset 0 0 0 3px var(--haldi), 0 12px 20px -12px rgba(122, 38, 60, .7); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.fate-front img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 20%; }
.fate-front b { display: block; padding: 6px 4px 7px; font: 800 .95rem/1 var(--display); text-align: center; }
.fate.open .fate-inner, .fate.open:hover .fate-inner { transform: rotateY(180deg); }
.fate.locked { cursor: not-allowed; }
.fate.locked .fate-inner { filter: saturate(.5) brightness(.9); }
.fate.locked:hover .fate-inner { transform: none; }
.fate.nudge .fate-inner { animation: nope .4s ease; }
@keyframes nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.fate-note { min-height: 1.2em; font-size: .78rem; font-weight: 700; color: var(--plum-2); text-align: center; line-height: 1.2; }
.reading { margin-top: 16px; padding: 14px 16px; background: #fff; border-radius: 18px; display: grid; gap: 10px; box-shadow: var(--shadow-soft); }
.reading[hidden] { display: none; }
.reading-score { font-weight: 600; color: var(--plum-2); }
.reading-score b { font: 800 1.9rem/1 var(--display); color: var(--sindoor-deep); margin-right: 4px; }
.reading-bars { display: grid; gap: 7px; }
.reading-bars li { display: grid; grid-template-columns: 8.6rem 1fr 2rem; align-items: center; gap: 10px; font-size: .86rem; font-weight: 600; }
.reading-bars span { height: 8px; border-radius: 99px; background: #FBE1E1; overflow: hidden; }
.reading-bars i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FF9A8A, var(--sindoor)); transform-origin: left; }
.reading-bars em { font-style: normal; text-align: right; color: var(--plum-2); }
.reading-verdict { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--milk); border-radius: 14px; font-weight: 600; font-size: .95rem; }
.reading-verdict img { border-radius: 8px; flex: none; }
.reading-actions { display: flex; align-items: center; gap: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .reading:not([hidden]) { animation: rise .45s ease-out both; }
  .reading-bars i { animation: grow .9s cubic-bezier(.3, .7, .2, 1) .15s both; }
}
@keyframes grow { from { transform: scaleX(0); } }

/* steps (a real sequence) */
.steps-sec { padding: var(--sec) 0; background: var(--blush); }
.steps { display: grid; gap: 16px; counter-reset: s; }
.steps li { position: relative; display: grid; gap: 8px; padding: 22px 22px 24px; background: #fff; border-radius: 24px; box-shadow: var(--shadow-soft); }
.steps p { color: var(--plum-2); }
.step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 6px; font: 800 1.4rem/1 var(--display); color: #fff; background: linear-gradient(180deg, #F0566A, var(--sindoor-deep)); box-shadow: 0 6px 12px -6px rgba(196, 47, 64, .7); }

/* features */
.features { padding: var(--sec) 0; background: var(--milk); }
.feat-grid { display: grid; gap: 16px; }
.feat { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-soft); overflow: hidden; }
.feat p { color: var(--plum-2); }
.feat-art { width: 150px; justify-self: center; margin: -4px 0 4px; filter: drop-shadow(0 10px 12px rgba(160, 50, 60, .2)); }
.feat-why { background: linear-gradient(180deg, #FFE9E1, #fff 60%); }
.feat-astro { background: linear-gradient(180deg, #F6E2EE, #fff 60%); }
.feat .push, .feat .why { margin-bottom: 10px; }

.push { display: flex; gap: 12px; align-items: flex-start; max-width: 420px; padding: 14px 16px; background: #fff; border-radius: 20px; box-shadow: var(--shadow); }
.push img { border-radius: 11px; flex: none; }
.push-top { font-size: .8rem; color: var(--plum-2); }
.push-title { font-weight: 700; margin-top: 2px; }
.push-body { font-size: .93rem; color: var(--plum-2); margin-top: 2px; }

.why { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; max-width: 440px; padding: 12px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.why img { border-radius: 14px; aspect-ratio: 3 / 4; object-fit: cover; }
.why-name { font: 800 1.2rem/1 var(--display); }
.why-name span { display: block; font: 600 .8rem/1.4 var(--text); color: var(--plum-2); margin-top: 3px; }
.why-title { margin: 10px 0 4px; font-weight: 700; font-size: .84rem; color: var(--sindoor-deep); }
.why li { position: relative; padding-left: 19px; font-size: .88rem; line-height: 1.35; margin-top: 5px; }
.why li::before, .ticks li::before { content: ""; position: absolute; left: 0; top: .28em; width: 12px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 58'%3E%3Cpath fill='%23EE5670' d='M32 57C29 54 3 38 1.3 20.6 0 9 8 1 18 1c6.2 0 11 3.3 14 8.4C35 4.3 39.8 1 46 1c10 0 18 8 16.7 19.6C61 38 35 54 32 57Z'/%3E%3C/svg%3E") no-repeat center / contain; }
.tag { position: absolute; top: 10px; right: 10px; font-size: .68rem; font-weight: 700; color: var(--plum-2); background: var(--milk); padding: 3px 8px; border-radius: 99px; }

.chat { max-width: 440px; display: grid; gap: 12px; padding: 18px; background: #fff; border-radius: 24px; box-shadow: var(--shadow); }
.bubble { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: .95rem; line-height: 1.4; }
.bubble.in { background: #F4ECEA; border-bottom-left-radius: 6px; }
.coach { display: grid; gap: 8px; justify-items: end; padding: 12px; border-radius: 18px; background: linear-gradient(180deg, #FFF1EC, #FFE6DE); }
.coach-head { justify-self: start; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--sindoor-deep); }
.coach-head img { border-radius: 7px; }
.bubble.out { background: #fff; border: 2px dashed #F2B2B0; border-bottom-right-radius: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-size: .8rem; font-weight: 700; padding: 6px 11px; border-radius: 99px; background: var(--milk); box-shadow: inset 0 0 0 1.5px var(--line); }

/* serious-intent band */
.band { position: relative; display: grid; background: #F7B7A6; overflow: hidden; }
.band-img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; object-position: 70% 50%; }
.band-copy { display: grid; gap: 12px; padding: 28px 0 40px; }
.band-copy h2 { color: var(--plum); }
.band-copy p { font-size: 1.05rem; max-width: 30rem; }

/* tests teaser (home) */
.tests { padding: var(--sec) 0; background: var(--blush); }
.tests-grid { display: grid; gap: 16px; }
.feature-test { position: relative; display: grid; overflow: hidden; border-radius: 28px; text-decoration: none; background: linear-gradient(180deg, #FFD2C8 0%, #FFE9DA 100%); box-shadow: var(--shadow); }
.flock { position: relative; height: 240px; }
.flock img { position: absolute; width: auto; filter: drop-shadow(0 8px 10px rgba(122, 38, 60, .2)); transition: transform .3s ease; }
.flock .b1 { left: 50%; translate: -50% 0; top: 4%; height: 88%; z-index: 3; }
.flock .b2 { left: -3%; top: 16%; height: 60%; z-index: 2; }
.flock .b3 { right: 1%; top: 12%; height: 62%; z-index: 2; }
.flock .b4 { left: 14%; bottom: 2%; height: 40%; z-index: 4; }
.flock .b5 { right: 16%; bottom: 0; height: 56%; z-index: 4; }
.feature-test:hover .b1 { transform: translateY(-6px) rotate(-3deg); }
.feature-copy { display: grid; gap: 10px; justify-items: start; padding: 8px 22px 24px; }
.feature-copy h3 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1; font-weight: 800; }
.feature-copy p:not(.kicker) { color: var(--plum-2); }
.feature-copy .btn { margin-top: 6px; }
.side-test { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; padding: 18px; border-radius: 24px; background: #fff; text-decoration: none; box-shadow: var(--shadow-soft); }
.side-test h3 { margin: 4px 0 6px; }
.side-test p:not(.kicker) { color: var(--plum-2); font-size: .95rem; margin-bottom: 8px; }
.side-all img { width: 84px; }

/* moon */
.moon { padding: var(--sec) 0; color: #FFEFE8; overflow: hidden; background: linear-gradient(180deg, #7A3E6A 0%, #55294F 45%, #3A1D37 100%); }
.stars {
  position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #FFE9B8 50%, transparent 51%), radial-gradient(1.2px 1.2px at 28% 62%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 12%, #FFE9B8 50%, transparent 51%), radial-gradient(1.2px 1.2px at 63% 38%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 78% 14%, #FFE9B8 50%, transparent 51%), radial-gradient(1.2px 1.2px at 88% 56%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 6% 78%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 52% 86%, #FFE9B8 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 94% 90%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 36% 40%, #FFE9B8 50%, transparent 51%);
}
.moon-grid { position: relative; display: grid; gap: 28px; justify-items: center; text-align: center; }
.moon-disc { width: 210px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 34%, #FFF8EC 0%, #FDE7C8 55%, #F4C992 100%); box-shadow: 0 0 0 10px rgba(253, 231, 200, .12), 0 0 60px 10px rgba(253, 214, 160, .35); }
.moon-disc img { width: 64%; filter: drop-shadow(0 6px 8px rgba(90, 30, 40, .3)); }
.moon-copy { display: grid; gap: 12px; justify-items: center; max-width: 34rem; }
.moon .kicker { color: #F8C87A; }
.moon h2, .moon h3 { color: #FFF4EE; }
.moon h2 span { color: #FFC0A8; }
.moon-line { font: 700 1.3rem/1.3 var(--display); color: #FFE0D2; }
.moon-next { font-size: .92rem; color: #E9C9D9; }
.moon .muted { color: #EBD0DC; }
.moon .btn-ghost { box-shadow: none; }

/* duo: safety + plus */
.duo { padding: var(--sec) 0; background: var(--milk); }
.duo-grid { display: grid; gap: 16px; }
.duo-card { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; padding: 22px; border-radius: 28px; text-decoration: none; box-shadow: var(--shadow-soft); }
.duo-card h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin-bottom: 8px; }
.duo-card p { color: var(--plum-2); margin-bottom: 10px; }
.duo-card img { filter: drop-shadow(0 10px 12px rgba(160, 50, 60, .22)); }
.duo-safe { background: linear-gradient(180deg, #FFE3DA, #FFF1EB); }
.duo-plus { background: linear-gradient(180deg, #FFEBC8, #FFF6E6); }

/* Ek Tarfa */
.ektarfa-sec { padding: var(--sec) 0; background: linear-gradient(180deg, #FFD9CF, #FFEDE3); overflow: hidden; }
.ek-grid { display: grid; gap: 22px; align-items: center; }
.cast { position: relative; height: 240px; width: min(100%, 460px); justify-self: center; }
.cast img { position: absolute; bottom: 0; height: 100%; width: auto; filter: drop-shadow(0 10px 10px rgba(65, 33, 62, .2)); }
.cast .c-mithu { left: 2%; height: 90%; z-index: 2; }
.cast .c-neela { left: 36%; height: 84%; z-index: 3; }
.cast .c-mor { right: 0; z-index: 1; }
.ek-copy { display: grid; gap: 12px; justify-items: start; max-width: 34rem; }
.ek-copy p:not(.kicker) { color: var(--plum-2); font-size: 1.05rem; }
.ek-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }

/* faq */
.faq { padding: var(--sec) 0; background: var(--milk); }
.faq-wrap { max-width: 780px; }
.faq h2 { margin-bottom: 20px; }
.faq h3.faq-group { margin: 36px 0 4px; font-size: 1.1rem; color: var(--haldi-ink); font-family: var(--text); letter-spacing: 0; }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 18px 44px 18px 0; font: 700 1.22rem/1.25 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  background: var(--blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 6v10M6 11h10' stroke='%23C42F40' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: rotate .2s ease;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p, .faq details ul { padding: 0 0 12px; color: var(--plum-2); }
.faq details > :last-child { padding-bottom: 20px; }
.faq details a { color: var(--sindoor-deep); font-weight: 700; }
.faq-more { margin-top: 24px; }

/* finale */
.finale { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 56px; text-align: center; background: linear-gradient(180deg, #F47A85, #FCC49F); }
.finale-inner { display: grid; justify-items: center; gap: 14px; }
.finale-mithu { width: 190px; filter: drop-shadow(0 14px 18px rgba(160, 50, 60, .3)); }
.finale h2 { font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem); line-height: .95; }
.finale h2 span { display: block; }
.finale p { max-width: 28rem; font-weight: 500; }
.finale .play-badge { margin-top: 6px; }

/* ---------- how it works page ---------- */
.timeline { display: grid; gap: 56px; position: relative; }
.moment { display: grid; gap: 22px; position: relative; }
.moment-copy { display: grid; gap: 10px; align-content: start; max-width: 32rem; }
.moment-copy > p:not(.time):not(.hint) { color: var(--plum-2); }
.moment-copy ul { display: grid; gap: 6px; color: var(--plum-2); }
.time { justify-self: start; font: 800 1rem/1 var(--display); color: var(--sindoor-deep); padding: 7px 12px 6px; border-radius: 10px; background: var(--blush); }
.ticks li { position: relative; padding-left: 20px; }
.grid-cards { display: grid; gap: 14px; }
.mini { display: grid; gap: 8px; align-content: start; padding: 20px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-soft); }
.mini img { width: 72px; height: 72px; object-fit: contain; }
.mini h3 { font-size: 1.25rem; }
.mini p { color: var(--plum-2); font-size: .95rem; }
.wheel-card { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center; }

/* ---------- tests hub ---------- */
.catalog { display: grid; gap: 14px; }
.cat { padding: 20px; background: #fff; border-radius: 24px; box-shadow: var(--shadow-soft); }
.cat-head { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; margin-bottom: 12px; }
.cat-head img { width: 64px; height: 64px; }
.cat-head h3 { font-size: 1.4rem; }
.cat-head p { color: var(--plum-2); font-size: .9rem; }
.cat ul { display: grid; gap: 2px; }
.cat li { border-top: 1px solid var(--line); }
.cat li a, .cat li button {
  display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; width: 100%;
  padding: 9px 2px; border: 0; background: none; text-align: left; text-decoration: none; cursor: pointer; font: inherit; font-size: .92rem; color: var(--plum);
}
.cat li a:hover b, .cat li button:hover b { color: var(--sindoor-deep); }
.cat li b { font-weight: 700; }
.cat li span { grid-column: 1; color: var(--plum-2); font-size: .82rem; }
.cat li em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: .72rem; font-weight: 800; padding: 4px 9px; border-radius: 99px; white-space: nowrap; }
.pill-open { background: var(--sindoor); color: #fff; }
.pill-lock { background: #F3E6E2; color: var(--plum-2); }
.open-tests { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.open-test { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; padding: 10px; border-radius: 18px; background: #fff; text-decoration: none; box-shadow: var(--shadow-soft); transition: transform .15s ease; }
.open-test:hover { transform: translateY(-2px); }
.open-test img { width: 40px; height: 40px; }
.open-test span { display: grid; font-size: .84rem; color: var(--plum-2); line-height: 1.35; }
.open-test small { font-size: .72rem; font-weight: 700; color: var(--haldi-ink); }
.open-test b { font: 800 .98rem/1.1 var(--display); color: var(--plum); }
.open-test span { font-size: 0; }
.open-test span small, .open-test span b { font-size: revert; }
.open-test small { font-size: .66rem !important; }
.web-tests { display: grid; gap: 16px; }

/* ---------- astrology ---------- */
.nak-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nak-grid li { display: contents; }
.nak-grid button { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px; padding: 12px 6px; border: 0; border-radius: 18px; background: rgba(255, 240, 234, .07); box-shadow: inset 0 0 0 1px rgba(255, 220, 200, .14); font: 600 .8rem/1.2 var(--text); color: #FFEFE8; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.nak-grid button:hover { background: rgba(255, 240, 234, .16); transform: translateY(-2px); }
.nak-grid img { width: 56px; height: 56px; }
.nak-grid .is-now { background: rgba(253, 214, 160, .2); box-shadow: inset 0 0 0 2px #F8C87A; }
.nak-grid .is-now::after { content: "Now"; position: absolute; top: 6px; right: 6px; font-size: .64rem; font-weight: 800; color: #3A1D37; background: #F8C87A; padding: 1px 6px; border-radius: 99px; }
.lib-sections { display: grid; gap: 12px; }
.lib-sec { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 16px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--shadow-soft); text-align: left; font: inherit; color: var(--plum); cursor: pointer; transition: transform .15s ease; }
.lib-sec:hover { transform: translateY(-2px); }
.lib-sec img { width: 56px; height: 56px; }
.lib-sec > span { display: grid; gap: 4px; }
.lib-sec b { font: 700 1.15rem/1.1 var(--display); }
.lib-sec span span { font-size: .86rem; color: var(--plum-2); line-height: 1.45; }
.lib-sec em { font-style: normal; font-size: .76rem; font-weight: 800; color: var(--sindoor-deep); }

/* ---------- parrot+ ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 24px; box-shadow: var(--shadow-soft); overflow: hidden; font-size: .95rem; }
.compare th, .compare td { padding: 14px 12px; text-align: center; border-bottom: 1px solid var(--line); }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { font: 800 1.15rem/1 var(--display); background: var(--milk); }
.compare thead th.plus { background: linear-gradient(180deg, #FFE7B8, #FFD98E); color: var(--plum); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .y, .compare .n { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.compare .y { background: var(--sindoor) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.compare .n { background: #F1E6E2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8' stroke='%23A08C96' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.compare .lim { font-size: .82rem; color: var(--plum-2); font-weight: 600; }
.extras { display: grid; gap: 14px; }
.extra { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 18px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-soft); }
.extra h3 { font-size: 1.25rem; margin-bottom: 4px; }
.extra p { color: var(--plum-2); font-size: .95rem; }

/* ---------- safety, about, prose ---------- */
.facts { display: grid; gap: 12px; }
.facts li { position: relative; padding: 14px 16px 14px 48px; background: #fff; border-radius: 18px; color: var(--plum-2); box-shadow: var(--shadow-soft); }
.facts li::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--sindoor) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.facts b { color: var(--plum); }
.split { display: grid; gap: 28px; }
.panel { padding: 24px; background: #fff; border-radius: 26px; box-shadow: var(--shadow-soft); }
.panel h3 { margin-bottom: 12px; }
.panel ul.ticks { display: grid; gap: 10px; color: var(--plum-2); }
.panel p + p { margin-top: 10px; }
.callout { display: grid; gap: 10px; padding: 22px; border-radius: 24px; background: var(--plum); color: #FBE6EE; }
.callout h3 { color: #fff; }
.callout a { color: #fff; font-weight: 700; }

.prose { max-width: 740px; }
.prose h2 { font-size: 1.7rem; margin: 40px 0 10px; }
.prose h3 { font-size: 1.25rem; margin: 26px 0 8px; }
.prose p, .prose li { color: #4E3349; }
.prose p + p { margin-top: 12px; }
.prose ul { display: grid; gap: 8px; margin: 10px 0; padding-left: 0; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--sindoor); }
.prose ol { counter-reset: n; display: grid; gap: 10px; margin: 12px 0; }
.prose ol li { position: relative; padding-left: 40px; counter-increment: n; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blush); color: var(--sindoor-deep); font: 800 .95rem/1 var(--display); }
.prose a { color: var(--sindoor-deep); font-weight: 700; }
.prose .btn { color: #fff; }
.updated { font-size: .88rem; color: var(--plum-2); }
.note { margin: 18px 0; padding: 14px 16px; border-radius: 16px; background: #FFF1D6; color: #6B4A10; font-size: .92rem; }

.phone { width: min(280px, 78vw); padding: 10px; border-radius: 40px; background: linear-gradient(160deg, #3A2336, #1E1320); box-shadow: 0 30px 50px -26px rgba(65, 33, 62, .75); }
.phone-screen { position: relative; display: block; border-radius: 31px; overflow: hidden; aspect-ratio: 9 / 16; background: #F7A3A0; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone > iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 31px; background: #000; }
.phone-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 31px; background: #F7A3A0; }
.play-btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 24px -8px rgba(65, 33, 62, .6); transition: transform .2s ease; }
.play-btn::after { content: ""; position: absolute; left: 29px; top: 22px; border-left: 22px solid var(--sindoor); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.phone-screen:hover .play-btn { transform: scale(1.06); }
.dur { position: absolute; right: 12px; bottom: 12px; padding: 3px 8px; border-radius: 8px; background: rgba(30, 19, 32, .75); color: #fff; font-size: .78rem; font-weight: 700; }
.video-grid { display: grid; gap: 32px; justify-items: center; }

.form-card { display: grid; gap: 12px; padding: 22px; background: #fff; border-radius: 24px; box-shadow: var(--shadow-soft); }

/* ---------- footer ---------- */
.footer { background: var(--plum); color: #F6DDE6; padding: 52px 0 110px; font-size: .92rem; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.foot-brand { grid-column: 1 / -1; display: grid; gap: 14px; justify-items: start; }
.foot-brand p { max-width: 26rem; }
.footer a { color: #fff; }
.brand-foot span { color: #fff; font-size: 1.35rem; }
.footer nav { display: grid; gap: 9px; align-content: start; }
.footer nav b { color: #F8C87A; font-size: .85rem; letter-spacing: .02em; margin-bottom: 2px; }
.footer nav a { text-decoration: none; font-weight: 600; }
.footer nav a:hover { text-decoration: underline; }
.foot-contact { display: grid; gap: 8px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.fine { margin-top: 18px; font-size: .78rem; color: #D9B8C8; }

.dock {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; background: #fff; border-radius: 20px; text-decoration: none;
  box-shadow: 0 16px 34px -12px rgba(65, 33, 62, .55); transform: translateY(160%); transition: transform .35s ease;
}
.dock.show { transform: none; }
.menu-open .dock { transform: translateY(160%); }
.dock img { border-radius: 10px; }
.dock > span:not(.btn) { flex: 1; font-size: .8rem; line-height: 1.25; color: var(--plum-2); }
.dock b { display: block; color: var(--plum); font-size: .95rem; }

/* ---------- tablet ---------- */
@media (min-width: 700px) {
  :root { --sec: 88px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .tests-grid { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
  .feature-test { grid-row: span 2; }
  .flock { height: 300px; }
  .duo-grid { grid-template-columns: 1fr 1fr; }
  .duo-card { grid-template-columns: 1fr; justify-items: start; }
  .duo-card img { width: 150px; }
  .moon-grid { grid-template-columns: auto 1fr; text-align: left; justify-items: start; align-items: center; gap: 44px; }
  .moon-copy { justify-items: start; }
  .moon-disc { width: 250px; }
  .ek-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .cast { height: 300px; }
  .band { display: block; min-height: 520px; }
  .band-img { position: absolute; inset: 0; aspect-ratio: auto; }
  .band-copy { position: relative; padding: 72px 0; max-width: 1180px; }
  .band-copy h2, .band-copy p { max-width: 26rem; }
  .band-copy p { color: var(--plum); font-weight: 500; }
  .moment { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
  .grid-cards { grid-template-columns: 1fr 1fr; }
  .catalog { grid-template-columns: 1fr 1fr; }
  .nak-grid { grid-template-columns: repeat(6, 1fr); }
  .lib-sections { grid-template-columns: 1fr 1fr; }
  .extras { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .video-grid { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 56px; }
  .web-tests { grid-template-columns: 1fr; }
  .web-tests .feature-test { grid-row: auto; grid-template-columns: 1fr 1fr; align-items: center; }
  .web-tests .feature-copy { padding: 24px 28px; }
  .open-tests { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .open-test { grid-template-columns: 52px 1fr; gap: 12px; padding: 14px; }
  .open-test img { width: 52px; height: 52px; }
  .open-test span { font-size: .84rem; }
  .open-test b { font-size: 1.08rem; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .foot-brand { grid-column: auto; }
  .dock { display: none; }
  .footer { padding-bottom: 48px; }
}

/* ---------- desktop: the banner layout ---------- */
@media (min-width: 960px) {
  .nav { padding: 16px 0; }
  .nav-links {
    display: flex; position: static; flex-direction: row; gap: 4px; padding: 0; background: none; box-shadow: none;
  }
  .nav-links a { padding: 8px 12px; font-size: .95rem; border-radius: 10px; }
  .nav-links a:hover { background: rgba(255, 248, 245, .45); }
  .nav-links a[aria-current="page"] { background: rgba(255, 248, 245, .7); }
  .nav-links .only-menu { display: none; }
  .menu-btn { display: none; }
  .brand img { width: 56px; height: 56px; border-radius: 15px; }
  .brand span { font-size: 1.42rem; }

  .top-home { padding-bottom: 30px; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "title stage" "copy stage" "slogan slogan";
    justify-items: start; text-align: left; align-items: center; column-gap: 24px; padding-top: 6px;
  }
  .hero-title { align-self: end; }
  .hero-copy { justify-items: start; align-self: start; margin-top: 22px; gap: 22px; }
  .hero-copy .cta-row { order: 0; }
  .cta-row { justify-content: flex-start; }
  .slogan { justify-self: center; text-align: center; margin: 22px 0 6px; }
  .hero-stage { width: 100%; max-width: 720px; aspect-ratio: 1.55 / 1; justify-self: end; }
  .hero-mithu { left: 30%; height: 104%; }
  .couple { left: auto; right: 0; width: 46%; }
  .polaroid { width: 52%; padding: 8px 8px 30px; border-radius: 18px; }
  .polaroid img { border-radius: 12px; }
  .polaroid svg { width: 20px; height: 18px; bottom: 6px; }
  .pol-a { left: 0; top: 8%; bottom: auto; }
  .pol-b { right: 0; top: 11%; bottom: auto; }
  .couple-heart { display: block; position: absolute; z-index: 4; left: 40%; top: 40%; width: 64px; height: 58px; filter: drop-shadow(0 8px 12px rgba(238, 86, 112, .45)); }
  .meter { right: auto; left: 25%; bottom: auto; top: 70%; padding: 10px 16px 12px; font-size: 1.1rem; }
  .meter-bar { width: 150px; height: 10px; }
  .pill-match { left: 2%; top: auto; bottom: 16%; padding: 10px 16px; font-size: 1.1rem; }
  .fh-1 { right: 50%; top: 0; width: 46px; height: 42px; }
  .fh-2 { left: 6%; top: 34%; }
  .sp-1 { right: 45%; top: 22%; }

  .page-hero { padding: 24px 0 44px; gap: 24px; }
  .ph-art { width: 290px; margin-bottom: -10px; }

  .fates-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
  .fates { justify-self: end; max-width: 480px; }
  .feat-grid { grid-template-columns: repeat(4, 1fr); }
  .feat-why, .feat-astro { grid-column: span 2; }
  .feat-ai, .feat-tests { grid-column: span 2; }

  .timeline::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; border-left: 2px dashed #F2B9AE; }
  .moment { gap: 96px; }
  .moment-art { justify-self: start; }
  .moment-copy { justify-self: end; text-align: right; justify-items: end; }
  .moment-copy .time { justify-self: end; }
  .moment-copy .ticks li { padding-left: 0; padding-right: 20px; }
  .moment-copy .ticks li::before { left: auto; right: 0; }
  .moment::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--sindoor); box-shadow: 0 0 0 5px var(--milk), 0 0 0 7px #F2B9AE; }
  .grid-cards { grid-template-columns: repeat(3, 1fr); }
  .catalog { grid-template-columns: repeat(3, 1fr); }
  .nak-grid { grid-template-columns: repeat(9, 1fr); }
  .lib-sections { grid-template-columns: repeat(3, 1fr); }
  .finale { padding: 88px 0 80px; }
  .finale-mithu { width: 230px; }
}

@media (min-width: 1200px) {
  .hero-title h1 { font-size: 6.1rem; }
  .lead { font-size: 1.14rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- pop-up sheet ---------- */
.sheet { width: min(520px, 100%); max-height: min(calc(var(--vh1, 1svh) * 88), 760px); margin: auto auto 0; padding: 0; border: 0; border-radius: 28px 28px 0 0; background: var(--card); color: var(--plum); box-shadow: 0 -20px 60px -20px rgba(65, 33, 62, .5); overflow: auto; }
.sheet::backdrop { background: rgba(40, 18, 38, .45); }
.sheet-body { position: relative; display: grid; gap: 12px; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); }
.sheet-body h3 { font-size: 1.9rem; line-height: 1; }
.sheet-body > p { color: var(--plum-2); }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--milk); cursor: pointer; display: grid; place-items: center; }
.sheet-x svg { width: 18px; height: 18px; }
.sheet-art { width: 110px; justify-self: center; }
.sheet-nak { justify-self: center; width: 120px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 34%, #FFF8EC, #F4C992); }
.sheet-nak img { width: 70%; }
.sheet-line { font: 700 1.1rem/1.3 var(--display); color: var(--sindoor-deep) !important; }
.facts-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--milk); font-size: .88rem; }
.facts-dl dt { font-weight: 700; }
.facts-dl dd { margin: 0; color: var(--plum-2); }
.sheet-ideas { display: grid; gap: 8px; }
.sheet-ideas li, .sheet-topics li { position: relative; padding-left: 20px; font-size: .92rem; color: var(--plum-2); }
.sheet-ideas li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--sindoor); }
.sheet-preview { padding: 14px; border-radius: 16px; background: #E9F6E6; }
.sheet-preview b { display: block; margin-bottom: 4px; font-size: .92rem; }
.sheet-preview b::after { content: " · free preview"; font-weight: 600; color: #3C7A2E; }
.sheet-preview p { font-size: .9rem; color: #3F5A3A; }
.sheet-topics { display: grid; gap: 6px; max-height: 240px; overflow: auto; padding: 4px 2px; }
.sheet-topics li { padding-left: 24px; }
.sheet-topics .lock { position: absolute; left: 2px; top: .2em; width: 14px; height: 14px; color: #C9AEB6; }
.sheet-note { font-size: .88rem; }
.sheet-cta { width: 100%; }
.sheet .text-link { justify-self: center; }
@media (min-width: 700px) {
  .sheet { margin: auto; border-radius: 28px; }
  .sheet-body { padding: 30px 28px 28px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-up .28s cubic-bezier(.2, .8, .3, 1); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
body.sheet-open { overflow: hidden; }

/* =========================================================
   Layout pass 2 (owner feedback): no empty columns on desktop,
   and on phones every block fits one screen (swipe rails,
   collapsed lists, compact grids). Heights use svh only.
   ========================================================= */

/* catalog as collapsible categories */
.cat { padding: 0; overflow: hidden; }
.cat > summary.cat-head { list-style: none; cursor: pointer; margin: 0; padding: 16px 18px; grid-template-columns: 48px 1fr 22px; }
.cat > summary.cat-head::-webkit-details-marker { display: none; }
.cat > summary.cat-head img { width: 48px; height: 48px; }
.cat > summary.cat-head > span { display: grid; gap: 2px; }
.cat > summary.cat-head b { font: 800 1.2rem/1.1 var(--display); }
.cat > summary.cat-head span span { font-size: .8rem; color: var(--plum-2); }
.cat > summary.cat-head::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 9l4 4 4-4' fill='none' stroke='%23C42F40' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; transition: rotate .2s ease; }
.cat[open] > summary.cat-head::after { rotate: 180deg; }
.cat > ul { padding: 0 18px 12px; }
.catalog { gap: 10px; }

/* facts as a grid of cards */
.facts-grid { display: grid; gap: 10px; }
.facts-grid li { padding: 12px 14px 12px 44px; font-size: .92rem; }
.facts-grid li::before { left: 14px; top: 14px; }
.panel-wide .ticks { display: grid; gap: 10px; }

.faq-h { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); margin-bottom: 8px; }
.sec-blush.faq { background: var(--blush); }

/* inner page hero: less air on desktop, art sits beside the copy */
.page-hero { padding-bottom: 26px; }
.ph-art { max-height: 300px; width: auto; object-fit: contain; }

@media (max-width: 699px) {
  :root { --sec: 52px; }
  .sec-head { margin-bottom: 20px; gap: 8px; }
  .sec-head p { font-size: .98rem; }
  h2 { font-size: clamp(2rem, 1.5rem + 2.4vw, 2.6rem); }

  /* swipe rails: one row of cards you slide through */
  .rail {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none !important;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding: 4px 16px 16px; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: center; min-width: 0; }
  .timeline.rail::before, .timeline.rail .moment::after { display: none; }
  .rail-tall { grid-auto-columns: 90%; align-items: start; }
  .rail-tall .moment { display: grid; gap: 14px; align-content: start; padding: 18px 16px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-soft); }
  .rail-tall .moment .push, .rail-tall .moment .why, .rail-tall .moment .chat { box-shadow: none; padding: 0; }
  .rail-tall .fates { padding: 12px 10px 14px; }
  .rail-tall .fates-mithu { width: 30%; margin-top: -40px; }
  .steps.rail li, .feat-grid.rail .feat, .grid-cards.rail .mini { height: 100%; }
  .duo-grid.rail .duo-card { grid-template-columns: 90px 1fr; height: 100%; }
  .split.rail { gap: 12px; }
  .split.rail .panel { padding: 18px; }

  /* home */
  .feat-art { width: 110px; }
  .feat .why img { width: 90px; }
  .band { display: block; position: relative; min-height: 0; }
  .band-img { aspect-ratio: 4 / 3; object-position: 72% 50%; }
  .band-copy { padding: 22px 0 30px; }
  .flock { height: 190px; }
  .feature-copy { padding: 4px 18px 18px; gap: 8px; }
  .feature-copy h3 { font-size: 1.9rem; }
  .side-all { display: none; }
  .side-test { grid-template-columns: 60px 1fr; padding: 14px; }
  .side-test img { width: 60px; }
  .side-test p:not(.kicker) { font-size: .88rem; }
  .ek-grid { gap: 10px; }
  .cast { height: 190px; }
  .fates-grid { gap: 44px; }

  /* moon + nakshatras */
  .moon-disc { width: 150px; }
  .moon-grid { gap: 18px; }
  .moon-line { font-size: 1.15rem; }
  .nak-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .nak-grid button { padding: 8px 2px; font-size: .68rem; border-radius: 14px; }
  .nak-grid img { width: 40px; height: 40px; }
  .nak-grid .is-now::after { font-size: .56rem; top: 3px; right: 3px; padding: 0 4px; }

  /* library: compact two-column tiles */
  .lib-sections { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lib-sec { grid-template-columns: 1fr; justify-items: start; gap: 6px; padding: 12px; }
  .lib-sec img { width: 40px; height: 40px; }
  .lib-sec b { font-size: .98rem; }
  .lib-sec span span { display: none; }

  /* tables and lists */
  .compare { font-size: .84rem; }
  .compare th, .compare td { padding: 9px 8px; }
  .compare thead th { font-size: 1rem; }
  .facts-grid li { padding: 10px 12px 10px 40px; font-size: .88rem; line-height: 1.45; }
  .faq summary { padding: 14px 40px 14px 0; font-size: 1.08rem; }
  .cat > summary.cat-head { padding: 12px 14px; grid-template-columns: 40px 1fr 22px; }
  .cat > summary.cat-head img { width: 40px; height: 40px; }
  .cat > summary.cat-head b { font-size: 1.08rem; }

  /* about: story image smaller, video beside the text */
  .story-img { max-height: calc(var(--vh1, 1svh) * 26); }
  .video-grid { grid-template-columns: 42% 1fr; gap: 14px; align-items: center; justify-items: start; }
  .video-grid .phone { width: 100%; padding: 6px; border-radius: 26px; }
  .video-grid .phone-video { border-radius: 21px; }
  .video-grid .ek-copy h2 { font-size: 1.7rem; }
  .video-grid .ek-copy p { font-size: .9rem; }

  /* inner page hero on phones */
  .page-hero { grid-template-columns: 1fr 34%; padding: 4px 0 22px; align-items: center; }
  .page-hero h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 2.7rem); }
  .page-hero .lead { font-size: .95rem; }
  .ph-art { width: 100%; max-height: 200px; }
  .finale { padding: 44px 0 40px; }
  .finale-mithu { width: 140px; }

  /* footer: short */
  .footer { padding: 34px 0 96px; font-size: .86rem; }
  .footer-grid { gap: 18px 14px; grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; gap: 10px; }
  .foot-brand p { display: none; }
  .footer nav { gap: 7px; }
  .footer nav a { font-size: .82rem; }
  .foot-contact { margin-top: 20px; padding-top: 14px; font-size: .8rem; }
  .fine { font-size: .72rem; margin-top: 12px; }
}

@media (min-width: 700px) {
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-wide .ticks { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
@media (min-width: 960px) {
  .facts-grid { grid-template-columns: repeat(3, 1fr); }
  .page-hero { padding: 8px 0 30px; align-items: center; }
  .ph-art { max-height: 320px; margin-bottom: 0; }
  .catalog { align-items: start; }
}
@media (max-width: 699px) {
  .lib-sections { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .lib-sec { padding: 10px 8px; gap: 4px; justify-items: center; text-align: center; }
  .lib-sec img { width: 34px; height: 34px; }
  .lib-sec b { font-size: .8rem; line-height: 1.15; }
  .lib-sec em { font-size: .66rem; }
  .flock { height: 160px; }
  .feature-copy p:not(.kicker) { font-size: .9rem; }
  .tests .sec-head p { display: none; }
  .cat > summary.cat-head { padding: 10px 12px; }
  .cat > summary.cat-head span span { font-size: .74rem; }
  .catalog { gap: 8px; }
  .rail-tall .moment { padding: 14px 14px 16px; gap: 10px; }
  .page-astrology .split { gap: 16px; }
  .page-astrology .split .panel { padding: 16px; }
  .page-astrology .split .panel .ticks li { font-size: .88rem; }
  .page-astrology .split .note { margin: 10px 0 0; font-size: .84rem; }
}
@media (max-width: 699px) {
  .duo-grid.rail .duo-card { grid-template-columns: 1fr; align-content: start; gap: 8px; padding: 18px; }
  .duo-grid.rail .duo-card img { width: 84px; }
}
.story-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow); align-self: center; }
video.hero-mithu, video.finale-mithu { background: transparent; }
video.band-img { display: block; }
@media (max-width: 699px) {
  :root { --sec: 44px; }
  .page-how .sec-head p { font-size: .92rem; }
  .rail-tall .moment-copy > p:not(.time):not(.hint) { font-size: .92rem; }
}
@media (min-width: 960px) {
  .lib-sections { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .lib-sec { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 16px 10px; gap: 6px; }
  .lib-sec img { width: 52px; height: 52px; }
  .lib-sec span span { display: none; }
  .lib-sec b { font-size: 1rem; }
}
@media (max-width: 699px) {
  .rail-tall .fates-mithu { width: 24%; margin-top: -30px; }
  .rail-tall .fate-row { gap: 8px; }
  .rail-tall .moment { gap: 8px; }
}
@media (max-width: 699px) {
  .rail-tall .chat .chips { display: none; }
}

/* ---------- typography pass: clean grotesk headings, Baloo only where the banner uses it ---------- */
h1, h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
h3 { font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: clamp(1.85rem, 1.35rem + 2vw, 2.75rem); }
.page-hero h1 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.7rem); line-height: 1.02; }
.hero-title h1, .slogan, .finale h2, .brand span, .fate-front b, .meter, .pill-match, .step-n {
  font-family: var(--brand); letter-spacing: -.01em;
}
.hero-title h1 { line-height: .92; }
.finale h2 { line-height: .95; font-weight: 800; }
.hero-kicker { letter-spacing: 0; }
.moon-line { font-weight: 700; letter-spacing: -.01em; }
@media (max-width: 699px) {
  h2 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.2rem); }
  .page-hero h1 { font-size: clamp(1.9rem, 1.4rem + 3vw, 2.4rem); }
}
.page-hero .ph-copy { gap: 16px; }
h1, h2 { letter-spacing: -.022em; word-spacing: .04em; }
.hero-title h1, .finale h2, .slogan { word-spacing: 0; }
@media (max-width: 699px) {
  .lib-sec em { display: none; }
  .page-astrology .sec-blush .sec-head p { font-size: .88rem; }
  .lib-sec b { font-size: .76rem; letter-spacing: -.01em; }
}

/* =========================================================
   Round 3: every block is one full screen and filled.
   The hero and each section take the full viewport height, and content is centred,
   so the next block never peeks in. Art and type scale with the viewport height (svh).
   ========================================================= */
.top { min-height: calc(var(--vh1, 1svh) * 100); display: flex; flex-direction: column; }
.top > .nav { flex: none; }
.top > .hero-grid, .top > .page-hero { flex: 1; align-content: center; }
.top.top-legal { min-height: 0; }
@media (min-width: 700px) { #main > section:not(.sec-legal) { min-height: calc(var(--vh1, 1svh) * 100); display: flex; flex-direction: column; justify-content: center; } }
main > section > .wrap { width: min(1180px, 100% - 32px); }

/* home hero scales with the screen */
@media (min-width: 960px) {
  .hero-stage { max-width: none; height: min(calc(var(--vh1, 1svh) * 64), 640px); aspect-ratio: auto; width: 100%; }
  .hero-title h1 { font-size: clamp(4.6rem, 2rem + 4vw, 7rem); }
  .slogan { font-size: clamp(2rem, 1rem + 1.6vw, 3rem); }
}

/* inner page hero: full screen, big art beside the title */
.page-hero { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 24px; padding: 0 0 calc(var(--vh1, 1svh) * 4); }
.page-hero.solo { grid-template-columns: 1fr; }
.ph-art { width: auto; max-width: 100%; height: min(calc(var(--vh1, 1svh) * 62), 560px); max-height: none; justify-self: center; object-fit: contain; }
.page-hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5rem); }
.page-hero .lead { font-size: clamp(1.02rem, .9rem + .5vw, 1.25rem); max-width: 34rem; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ph-chips a, .ph-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; background: rgba(255, 250, 247, .85); color: var(--plum); font-weight: 700; font-size: .9rem; text-decoration: none; box-shadow: var(--shadow-soft); }
.ph-chips a:hover { background: #fff; }

/* Instagram button that looks like Instagram */
.btn-ig { background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%); box-shadow: 0 10px 22px -10px rgba(221, 42, 123, .75); }
.btn-ig svg { width: 22px; height: 22px; flex: none; }
.btn-ig:hover { box-shadow: 0 14px 26px -10px rgba(221, 42, 123, .8); }

/* Ek Tarfa cast: three characters side by side, no overlap */
.cast { position: static; display: flex; align-items: flex-end; justify-content: center; gap: 3%; width: 100%; height: min(calc(var(--vh1, 1svh) * 52), 480px); }
.cast img { position: static; height: 100%; width: auto; max-width: 34%; object-fit: contain; }
.cast .c-mithu { height: 86%; order: 1; }
.cast .c-neela { height: 80%; order: 2; left: auto; }
.cast .c-mor { height: 100%; order: 3; right: auto; max-width: 38%; }
.cast figure { margin: 0; display: grid; justify-items: center; gap: 6px; height: 100%; }

@media (max-width: 699px) {
  .top { min-height: calc(var(--vh1, 1svh) * 100); }
  .page-hero { grid-template-columns: 1fr; justify-items: start; gap: 10px; padding-bottom: calc(var(--vh1, 1svh) * 3); }
  .page-hero .ph-art { order: -1; height: calc(var(--vh1, 1svh) * 34); justify-self: center; }
  .page-hero h1 { font-size: clamp(2.2rem, 1.6rem + 4vw, 2.8rem); }
  .cast { height: calc(var(--vh1, 1svh) * 30); }
}
.btn-yt { background: #E0303D; }
.btn-yt svg { width: 22px; height: 22px; }
.watch-grid { display: grid; gap: 28px; align-items: center; justify-items: center; }
.watch-grid .phone { width: auto; height: min(calc(var(--vh1, 1svh) * 74), 700px); aspect-ratio: 9 / 16; padding: 10px; }
.watch-grid .phone-video { height: 100%; width: 100%; }
.cast-sm { height: min(calc(var(--vh1, 1svh) * 24), 220px); justify-content: flex-start; margin: 6px 0; }
@media (min-width: 900px) { .watch-grid { grid-template-columns: auto 1fr; gap: 64px; justify-items: start; } }
@media (max-width: 699px) {
  .watch-grid { grid-template-columns: 40% 1fr; gap: 14px; align-items: start; }
  .watch-grid .phone { height: auto; width: 100%; padding: 6px; border-radius: 24px; }
  .watch-grid .ek-copy p:not(.kicker) { font-size: .86rem; }
  .watch-grid .cast-sm { display: none; }
  .watch-grid .ek-actions { grid-column: 1 / -1; }
  .watch-grid h2 { font-size: 1.5rem; }
  .ek-actions .btn { width: 100%; font-size: .9rem; }
}

/* ---------- tests hub: hero flock + test browser ---------- */
.hero-flock { position: relative; width: 100%; height: min(calc(var(--vh1, 1svh) * 60), 560px); }
.hero-flock img { position: absolute; bottom: 0; width: auto; filter: drop-shadow(0 12px 16px rgba(122, 38, 60, .22)); }
.hf-swan { left: 36%; height: 78%; z-index: 3; }
.hf-peacock { left: 0; height: 46%; bottom: 8% !important; z-index: 2; }
.hf-owl { right: 4%; height: 48%; bottom: 10% !important; z-index: 2; }
.hf-sparrow { left: 16%; height: 30%; z-index: 4; }
.hf-flamingo { right: 22%; height: 60%; z-index: 4; }
.hf-mithu { right: -2%; top: 0; bottom: auto !important; height: 34%; z-index: 1; }

.tb { display: grid; gap: 16px; }
.tb-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.tb-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 700 .9rem/1 var(--text); color: var(--plum); cursor: pointer; }
.chip img { width: 22px; height: 22px; }
.chip b { font-weight: 800; color: var(--sindoor-deep); }
.chip.is-on { background: var(--plum); color: #fff; box-shadow: none; }
.chip.is-on b { color: #FFC0A8; }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tcard { position: relative; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 12px; row-gap: 2px; align-items: start; padding: 14px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--shadow-soft); text-align: left; text-decoration: none; font: inherit; color: var(--plum); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.tcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tcard[hidden] { display: none; }
.tcard img { grid-row: 1 / span 3; width: 52px; height: 52px; object-fit: contain; }
.tcard-cat { font-size: .72rem; font-weight: 700; color: var(--haldi-ink); }
.tcard b { font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; }
.tcard-sub { font-size: .82rem; color: var(--plum-2); line-height: 1.35; }
.tcard em { grid-column: 1 / -1; justify-self: start; margin-top: 10px; font-style: normal; font-size: .76rem; font-weight: 800; padding: 5px 10px; border-radius: 99px; }
.tcard .go { background: var(--sindoor); color: #fff; }
.tcard .lockd { background: #F3E6E2; color: var(--plum-2); }
.tcard.is-locked { background: #FFFBF9; box-shadow: inset 0 0 0 1.5px var(--line); }
.tcard.is-locked img { filter: saturate(.7); opacity: .85; }
.tcard-bird { background: linear-gradient(160deg, #FFE3DA, #fff 70%); }
.tcard-bird img { height: 60px; }

@media (min-width: 960px) {
  .tests-hero { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 699px) {
  .hero-flock { height: calc(var(--vh1, 1svh) * 30); order: -1; }
  .tests-hero .ph-chips span { padding: 7px 11px; font-size: .8rem; }
  .tests-hero .cta-row .btn { flex: 1; }
  /* three rows you swipe sideways, so 19 tests fit one screen */
  .tb-grid { grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 2px 16px 12px; scrollbar-width: none; gap: 8px; }
  .tb-grid::-webkit-scrollbar { display: none; }
  .tcard { scroll-snap-align: start; grid-template-columns: 40px 1fr; padding: 10px 12px; grid-template-rows: auto auto; }
  .tcard img { width: 40px; height: 40px; grid-row: 1 / span 2; }
  .tcard-sub { display: none; }
  .tcard em { grid-column: 2; grid-row: 3; margin-top: 4px; }
  .watch-grid { grid-template-columns: 1fr; justify-items: center; }
  .watch-grid .phone { height: calc(var(--vh1, 1svh) * 46); width: auto; }
}
/* home blocks filled at full screen */
.step-art { width: auto; height: min(calc(var(--vh1, 1svh) * 24), 220px); justify-self: center; margin-bottom: 6px; filter: drop-shadow(0 10px 12px rgba(160, 50, 60, .2)); }
.steps li { align-content: start; text-align: left; }
@media (min-width: 700px) { .band { min-height: calc(var(--vh1, 1svh) * 100); } }
@media (min-width: 700px) {
  .band-copy { padding: 0; }
  .band { display: flex; align-items: center; }
  .band-copy > * { max-width: 30rem; }
  .band-copy { background: none; }
  .band-copy h2, .band-copy p { text-shadow: 0 1px 12px rgba(255, 220, 205, .7); }
  .duo-card img { width: auto; height: min(calc(var(--vh1, 1svh) * 30), 280px); }
  .flock { height: min(calc(var(--vh1, 1svh) * 40), 380px); }
  .feat-art { width: auto; height: min(calc(var(--vh1, 1svh) * 20), 190px); }
  .moon-disc { width: min(calc(var(--vh1, 1svh) * 42), 380px); }
  .fates { max-width: min(560px, calc(var(--vh1, 1svh) * 62)); }
}
@media (max-width: 699px) {
  .step-art { height: calc(var(--vh1, 1svh) * 18); }
  .band-img { height: calc(var(--vh1, 1svh) * 56); aspect-ratio: auto; }
}
@media (min-width: 960px) {
  .fates-sec h2 { font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4rem); }
  .fates-copy { gap: 18px; max-width: 36rem; }
  .fates-copy > p:not(.hint) { font-size: 1.15rem; }
  .fates { max-width: min(640px, calc(var(--vh1, 1svh) * 70)); padding: 26px 24px 26px; }
  .fates-mithu { width: 34%; margin-top: -110px; }
  .sec-head h2 { font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); }
  .sec-head p { font-size: 1.12rem; }
}
@media (min-width: 700px) { .tb-chips { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 699px) {
  .tb-grid { grid-template-rows: repeat(5, auto); }
  .grid-cards:not(.rail) { gap: 10px; }
  .grid-cards:not(.rail) .mini { grid-template-columns: 64px 1fr; column-gap: 14px; padding: 16px; }
  .grid-cards:not(.rail) .mini img { grid-row: 1 / span 3; width: 64px; height: 64px; }
  .grid-cards:not(.rail) .mini .text-link { grid-column: 2; }
  .duo-grid:not(.rail) { gap: 12px; }
  .duo-grid:not(.rail) .duo-card { grid-template-columns: 84px 1fr; padding: 16px; }
  .duo-grid:not(.rail) .duo-card img { width: 84px; height: auto; }
  .duo-grid:not(.rail) .duo-card h2 { font-size: 1.35rem; }
  .duo-grid:not(.rail) .duo-card p { font-size: .88rem; }
  .split .panel { padding: 16px; }
  .split .panel .ticks li { font-size: .9rem; }
  .extras { gap: 10px; }
}
/* big screens: everything grows with the window, so blocks stay filled at 1920 px */
html { font-size: clamp(16px, calc(8px + .55vw), 19.5px); }
@media (min-width: 1500px) {
  .wrap, main > section > .wrap, .pt-main.pt-split, .pt-top { width: min(1440px, 100% - 80px); }
  .fates { max-width: min(720px, calc(var(--vh1, 1svh) * 72)); }
}

/* =========================================================
   Mobile pass (thorough check at 360x740, 375x667, 390x844, 412x915)
   Phones: the first screen fills the screen exactly; other blocks take their natural height
   (never taller than the screen, never stretched with empty space).
   ========================================================= */
@media (max-width: 699px) {
  #main > section { min-height: 0; }
  .sec, .steps-sec, .features, .tests, .moon, .duo, .ektarfa-sec, .fates-sec, .faq { padding: 40px 0; }
  .faq + .faq { padding-top: 8px; }
  .finale { padding: 40px 0 44px; }

  /* home hero fits the first screen on small phones */
  .top-home { min-height: calc(var(--vh1, 1svh) * 100); padding-bottom: 12px; }
  .top-home .hero-grid { padding-top: 0; }
  .hero-kicker { font-size: .82rem; margin-bottom: 4px; }
  .hero-title h1 { font-size: clamp(2.5rem, calc(var(--vh1, 1svh) * 7.6), 3.4rem); }
  .hero-stage { width: min(100%, 420px); height: min(calc(var(--vh1, 1svh) * 33), 300px); aspect-ratio: auto; margin-top: 2px; }
  .slogan { margin: 4px 0 12px; font-size: clamp(1.25rem, calc(var(--vh1, 1svh) * 3.2), 1.6rem); }
  .hero-copy { gap: 12px; }
  .lead { font-size: .95rem; line-height: 1.5; }
  .play-badge { height: 54px; }

  /* inner hero: art + title fit the first screen */
  .page-hero .ph-art { height: min(calc(var(--vh1, 1svh) * 30), 260px); }

  /* readability and tap targets */
  .play-badge small { font-size: .72rem; }
  .tag { font-size: .72rem; }
  .text-link { padding: 8px 0; }
  .feat .why { grid-template-columns: 76px 1fr; gap: 10px; }
  .feat .why img { width: 76px; }
  .feat .why li { font-size: .82rem; }

  /* the dock: compact, and it steps aside while you scroll down */
  .dock { padding: 6px 6px 6px 8px; border-radius: 18px; }
  .dock img { width: 30px; height: 30px; }
  .dock.away { transform: translateY(160%); }
  .footer { padding-bottom: 90px; }
}
/* narrow Android phones (360 px): slightly smaller type and tighter spacing so every block fits a 740 px screen */
@media (max-width: 380px) {
  html { font-size: 15px; }
  .sec, .steps-sec, .features, .tests, .moon, .duo, .ektarfa-sec, .fates-sec, .faq { padding: 32px 0; }
  .sec-head { margin-bottom: 16px; }
  .tb-grid { grid-template-rows: repeat(4, auto); }
  .split:not(.rail) .panel .ticks li, .facts-grid li { font-size: .86rem; }
  section[aria-labelledby="tips-title"] .split { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  section[aria-labelledby="tips-title"] .split > * { scroll-snap-align: center; }
  /* nothing below 12 px */
  .lib-sec b, .tcard-cat, .tcard em, .fine, .play-badge small, .tag, .kicker, .pt-kicker, .meta, .dock > span:not(.btn), .chips span, .nak-grid button { font-size: 12px; }
  .page-astrology .split { gap: 14px; }
  .page-astrology .push { padding: 10px 12px; }
  .story-img { max-height: calc(var(--vh1, 1svh) * 18); }
  .prose p { font-size: .94rem; }
  .watch-grid .phone { height: calc(var(--vh1, 1svh) * 40); }
  .rail-tall .moment-copy > p:not(.time):not(.hint) { font-size: .86rem; }
  .nak-grid button { padding: 6px 2px; }
  .nak-grid img { width: 34px; height: 34px; }
  .compare th, .compare td { padding: 7px 6px; }
  .flock { height: 140px; }
  .res-art img { height: 180px; }
}
.ph-cta { justify-content: flex-start; margin-top: 8px; gap: 10px; }
.ph-cta .btn { min-height: 48px; }
.ph-cta .play-badge-sm { height: 50px; }
@media (max-width: 699px) {
  .ph-cta { width: 100%; }
  .ph-cta > * { flex: 1 1 0; justify-content: center; min-width: 0; }
  .ph-cta .btn { padding-inline: .8em; font-size: .92rem; }
}
.play-badge span { white-space: nowrap; }
.ph-cta .play-badge { flex: none; }
@media (max-width: 699px) {
  .ph-cta { flex-wrap: wrap; }
  .ph-cta .btn { flex: 1 1 140px; }
}
/* Instagram / YouTube icons next to every mention */
.ic { width: 18px; height: 18px; flex: none; }
.ic-link { display: inline-flex; align-items: center; gap: 7px; }
.footer .ic-link .ic { width: 17px; height: 17px; }
.kicker-ig { display: inline-flex; align-items: center; gap: 6px; }
.kicker-ig .ic { width: 20px; height: 20px; color: #DD2A7B; }
.menu-ig .ic { color: #DD2A7B; width: 20px; height: 20px; }

/* =========================================================
   Stability pass (owner: the site jerks and "teleports" when scrolling up and down).
   - No looping videos, no entrance animations, no dock that slides with every scroll.
   - On touch screens a tap counts as hover, so hover effects never move anything.
   - On phones there are no sideways rails: cards stack and take their own height,
     so there is no empty space next to a short card and nothing hides off-screen.
   ========================================================= */
@media (hover: none) {
  .btn:hover, .play-badge:hover, .open-test:hover, .nak-grid button:hover, .lib-sec:hover, .tcard:hover { transform: none; }
  .fate:not(.open):hover .fate-inner, .feature-test:hover .b1, .phone-screen:hover .play-btn { transform: none; }
}
@media (max-width: 699px) {
  /* A day with Mithu: a vertical timeline of cards */
  .timeline { display: grid; gap: 12px; }
  .timeline::before, .timeline .moment::after { display: none; }
  .timeline .moment { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; padding: 16px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-soft); }
  .timeline .moment-copy { text-align: left; justify-items: start; max-width: none; }
  .timeline .moment-copy > p:not(.time):not(.hint) { font-size: .95rem; }
  .timeline .moment-art { justify-self: stretch; }
  .timeline .moment .push, .timeline .moment .why, .timeline .moment .chat { box-shadow: none; padding: 0; max-width: none; }
  .timeline .moment .chat .chips { display: flex; }
  .timeline .fates { max-width: none; padding: 12px 10px 14px; }
  .timeline .fates-mithu { width: 26%; margin-top: -12px; }

  /* How it works (home): compact rows, art on the left */
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .steps li { grid-template-columns: 76px 1fr; column-gap: 14px; row-gap: 4px; align-items: center; padding: 14px 16px; }
  .steps .step-art { grid-row: 1 / span 3; width: 76px; height: auto; margin: 0; }
  .steps .step-n { width: 28px; height: 28px; margin: 0; font-size: 1rem; }
  .steps h3 { font-size: 1.12rem; }
  .steps p { font-size: .9rem; line-height: 1.45; }

  /* Why it feels different: stacked cards */
  .feat-grid { grid-template-columns: 1fr; gap: 10px; }
  .feat { padding: 16px; gap: 8px; }
  .feat-art { width: auto; height: 96px; justify-self: start; margin: 0; }
  .feat .why, .feat .push { max-width: none; }

  /* cards that used to swipe sideways */
  .grid-cards, .split, .duo-grid, .extras { grid-template-columns: 1fr; gap: 10px; }
  section[aria-labelledby="tips-title"] .split { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }

  /* tests: one clear vertical list, "Start" on the right of every row */
  .tb-grid { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; gap: 8px; }
  .tcard { grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; }
  .tcard img { grid-row: 1 / span 2; width: 40px; height: 40px; }
  .tcard b { font-size: .98rem; }
  .tcard em { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
  .tb-chips { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
/* phones: crop to the couple and Mithu (the left of the picture is empty sky meant for the desktop text) */
@media (max-width: 699px) {
  .band-img { height: auto; aspect-ratio: 10 / 9; object-fit: cover; object-position: 100% 50%; }
}
/* quick section chips under the header on phones and tablets: tests and astrology visible without the menu */
.quick { display: none; }
@media (max-width: 959px) {
  .quick { position: relative; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .quick::-webkit-scrollbar { display: none; }
  .quick a { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 6px 14px 6px 7px; border-radius: 99px;
    background: rgba(255, 250, 247, .92); box-shadow: 0 6px 14px -8px rgba(122, 38, 60, .45); color: var(--plum); font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
  .quick img { width: 28px; height: 28px; object-fit: contain; }
  .quick a[aria-current="page"] { background: var(--plum); color: #fff; }
  .top-home .hero-stage { height: min(calc(var(--vh1, 1svh) * 30), 280px); }
}
/* About: the story picture keeps the couple and Mithu in frame on phones */
@media (max-width: 699px) {
  .story-img { max-height: none; aspect-ratio: 10 / 9; object-position: 100% 50%; }
}