:root {
  --cream: #fff9f3;
  --white: #ffffff;
  --peach: #f6c9b4;
  --peach-soft: #fcebe2;
  --mint: #cfede3;
  --mint-soft: #e9f6f1;
  --sky: #dcebf7;
  --sand: #f3ece4;
  --ink: #2e2a33;
  --muted: #6e6773;
  --line: #ece4dc;
  --accent: #1c86f5;
  --amazon: #2e2a33;
  --flipkart: #2874f0;
  --radius: 22px;
  --shadow: 0 18px 40px rgba(46, 42, 51, .07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #1b1820; --white: #24202a; --peach-soft: #3a2c27; --mint-soft: #1f312b; --sand: #2a2530;
    --ink: #f4eef0; --muted: #b9b0bb; --line: #3a3440; --amazon: #4a4352;
    --shadow: 0 18px 40px rgba(0, 0, 0, .35);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); background: var(--cream); line-height: 1.65; font-size: 17px; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 500; line-height: 1.12; margin: 0 0 .45em; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; color: #c9785a; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 700; color: var(--muted); margin-bottom: 14px; display: block; }

/* Header */
header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.bar { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: Fraunces, serif; font-size: 1.5rem; font-weight: 600; }
.brand img { width: 42px; height: 42px; }
.brand sup { font-family: "DM Sans", sans-serif; font-size: .45em; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 30px; font-weight: 500; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--peach); text-decoration-thickness: 2px; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font: inherit; color: var(--ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: .98rem; border: 1px solid transparent; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(46, 42, 51, .14); }
.btn.amazon { background: var(--amazon); color: #fff; }
.btn.flipkart { background: var(--flipkart); color: #fff; }
.btn.ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn.small { padding: 9px 16px; font-size: .85rem; }

/* Hero */
.hero { padding: 64px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
.hero p.lead { font-size: 1.15rem; color: var(--muted); max-width: 500px; margin: 0 0 32px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.arch { position: relative; }
.arch img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 300px 300px 28px 28px; box-shadow: var(--shadow); }
.arch::before { content: ""; position: absolute; inset: -18px 18px 30px -18px; border-radius: 300px 300px 28px 28px; background: var(--mint); z-index: -1; }
.float { position: absolute; left: -28px; bottom: 36px; background: var(--white); border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; }
.float b { font-family: Fraunces, serif; font-size: 1.6rem; font-weight: 600; }
.float span { font-size: .85rem; color: var(--muted); line-height: 1.35; }
.stars { color: #e7a43c; letter-spacing: 2px; }

/* Trust strip */
.trust { border-block: 1px solid var(--line); background: var(--white); }
.trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust div { padding: 22px 16px; text-align: center; font-weight: 500; color: var(--muted); font-size: .95rem; }
.trust div + div { border-left: 1px solid var(--line); }
.trust strong { display: block; color: var(--ink); font-family: Fraunces, serif; font-weight: 600; font-size: 1.15rem; }

/* Sections */
section { padding: 88px 0; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.sec-head h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 0; }
.sec-head p { color: var(--muted); max-width: 440px; margin: 0; }
.center { text-align: center; }

/* Categories */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat { text-decoration: none; }
.cat .ph { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; background: var(--sand); }
.cat .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cat:hover .ph img { transform: scale(1.04); }
.cat h3 { font-size: 1.3rem; margin: 16px 0 2px; }
.cat span { color: var(--muted); font-size: .92rem; }

/* Product cards */
.tint { background: var(--peach-soft); }
.tint-mint { background: var(--mint-soft); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--white); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.card .ph { aspect-ratio: 1; background: #fff; position: relative; }
.card .ph img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.card .ph.cover img { object-fit: cover; padding: 0; }
.tag { position: absolute; top: 14px; left: 14px; background: var(--cream); border-radius: 999px; padding: 4px 12px; font-size: .75rem; font-weight: 700; color: var(--ink); }
.card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 1.2rem; }
.card p { color: var(--muted); font-size: .93rem; margin: 0 0 14px; }
.rating { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.price { font-family: Fraunces, serif; font-size: 1.45rem; font-weight: 600; margin: auto 0 14px; }
.price small { font-family: "DM Sans", sans-serif; font-size: .8rem; color: var(--muted); font-weight: 500; }
.buy { display: flex; gap: 8px; }
.buy .btn { flex: 1; padding: 11px 10px; font-size: .88rem; }
.opts { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.opt { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.opt-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-weight: 600; font-size: .95rem; }
.opt-top b { font-family: Fraunces, serif; font-size: 1.15rem; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.review { margin: 0; background: var(--white); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.review blockquote { margin: 10px 0 18px; font-family: Fraunces, serif; font-size: 1.12rem; line-height: 1.45; flex: 1; }
.review .who { font-size: .85rem; color: var(--muted); }
.review .who strong { color: var(--ink); display: block; }
.src { display: inline-block; margin-top: 8px; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--sand); }

/* Promise */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.promise div { border-top: 2px solid var(--peach); padding-top: 22px; }
.promise h3 { font-size: 1.45rem; }
.promise p { color: var(--muted); margin: 0; }

/* Story */
.story { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.story img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; width: 100%; }
.story p { color: var(--muted); font-size: 1.08rem; }

/* Shop band */
.band { background: var(--mint); border-radius: 32px; padding: 64px 32px; text-align: center; }
.band h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.band p { color: var(--muted); max-width: 520px; margin: 0 auto 26px; }
.band .actions { justify-content: center; }

/* Page head, chips, FAQ, contact */
.page-head { padding: 64px 0 28px; text-align: center; }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.page-head p { color: var(--muted); max-width: 620px; margin: 0 auto; }
.chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.chips a { text-decoration: none; border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 9px 18px; font-weight: 500; }
.chips a:hover { border-color: var(--ink); }
.group { padding: 56px 0; scroll-margin-top: 90px; }
.group + .group { border-top: 1px solid var(--line); }
.group h2 { font-size: 2.1rem; }
.group > .wrap > p { color: var(--muted); margin: 0 0 28px; }
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 22px 4px; }
.faq summary { cursor: pointer; font-family: Fraunces, serif; font-size: 1.25rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-family: "DM Sans", sans-serif; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 12px 0 0; }
.faq h2 { font-size: 1.6rem; margin-top: 44px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.contact-card { background: var(--white); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.contact-card h3 { font-size: 1.35rem; }
.contact-card p { color: var(--muted); margin: 0 0 16px; }
.draft { display: inline-block; background: #fff3c4; color: #6b5300; font-size: .75rem; font-weight: 700; border-radius: 6px; padding: 2px 8px; margin-bottom: 10px; }
.prose { max-width: 760px; margin: 0 auto; }
.prose p { color: var(--muted); font-size: 1.08rem; }

/* Footer */
footer { margin-top: 88px; background: var(--white); border-top: 1px solid var(--line); padding: 56px 0 28px; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.foot img { height: 88px; width: auto; }
.foot h4 { font-family: Fraunces, serif; font-weight: 600; font-size: 1.05rem; margin: 0 0 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot a { text-decoration: none; color: var(--muted); }
.foot a:hover { color: var(--ink); }
.copy { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1000px) {
  .grid, .cats, .reviews { grid-template-columns: repeat(2, 1fr); }
  .grid.three { grid-template-columns: repeat(2, 1fr); }
  .trust .wrap { grid-template-columns: repeat(2, 1fr); }
  .trust div:nth-child(3) { border-left: 0; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--cream); border-bottom: 1px solid var(--line); }
  .nav a { padding: 14px 20px; width: 100%; }
  .nav.open { display: flex; }
  .menu-btn { display: block; }
  .hero { padding: 32px 0 56px; }
  .hero-grid, .story { grid-template-columns: 1fr; gap: 36px; }
  .arch { max-width: 420px; margin: 0 auto; width: 100%; }
  .float { left: 8px; bottom: 16px; }
  .promise, .foot { grid-template-columns: 1fr; }
  section { padding: 60px 0; }
  .actions .btn { flex: 1 1 100%; }
}
@media (max-width: 520px) {
  .grid, .grid.three, .reviews { grid-template-columns: 1fr; }
  .cats { gap: 14px; }
  .cat h3 { font-size: 1.1rem; }
}
@media (max-width: 760px) {
  .arch::before { inset: -12px 12px 24px -8px; }
}

/* ---- Home v4 ---- */
.announce { background: var(--ink); color: #f6efe9; text-align: center; font-size: .85rem; padding: 9px 16px; letter-spacing: .02em; }
.announce b { color: #f6c9b4; }
.hero2 { position: relative; overflow: hidden; padding: 56px 0 96px; background: linear-gradient(180deg, var(--peach-soft), var(--cream) 70%); }
.blob { position: absolute; border-radius: 50%; filter: blur(2px); z-index: 0; }
.blob.b1 { width: 520px; height: 520px; background: var(--mint); right: -120px; top: -80px; opacity: .55; }
.blob.b2 { width: 260px; height: 260px; background: var(--peach); left: -90px; bottom: -60px; opacity: .45; }
.hero2-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.pill-tag { display: inline-block; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-size: .82rem; font-weight: 700; color: #c9785a; margin-bottom: 22px; }
.hero2 h1 { font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.02; }
.hero2 .lead { font-size: 1.18rem; color: var(--muted); max-width: 470px; margin: 0 0 30px; }
.proof { display: flex; gap: 10px; align-items: center; margin-top: 26px; color: var(--muted); font-size: .95rem; }
.proof .stars { font-size: 1.1rem; }
.hero2-art { position: relative; height: 600px; }
.main-arch { position: absolute; right: 0; top: 0; width: 76%; height: 100%; border-radius: 400px 400px 32px 32px; overflow: hidden; box-shadow: 0 30px 60px rgba(46, 42, 51, .16); border: 8px solid var(--white); }
.main-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.circle-ph { position: absolute; left: 0; bottom: 30px; width: 210px; height: 210px; border-radius: 50%; overflow: hidden; border: 8px solid var(--white); box-shadow: 0 20px 40px rgba(46, 42, 51, .18); }
.circle-ph img { width: 100%; height: 100%; object-fit: cover; }
.fcard { position: absolute; display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: 18px; padding: 10px 16px 10px 10px; box-shadow: 0 16px 36px rgba(46, 42, 51, .16); text-decoration: none; font-size: .82rem; color: var(--muted); transition: transform .2s; }
.fcard:hover { transform: translateY(-4px); }
.fcard img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fff; }
.fcard b { display: block; color: var(--ink); font-size: .92rem; }
.fc1 { left: 4%; top: 70px; }
.fc2 { right: -14px; bottom: 120px; }
.spark { position: absolute; color: #c9785a; font-size: 1.6rem; }
.spark.s1 { left: 22%; top: 8px; } .spark.s2 { right: 2%; top: 46%; color: #7cc3ab; font-size: 1.2rem; }
.marquee { overflow: hidden; background: var(--ink); color: #f6efe9; padding: 16px 0; }
.track { display: flex; gap: 28px; width: max-content; animation: scroll 40s linear infinite; font-family: Fraunces, serif; font-size: 1.15rem; }
.track i { color: #f6c9b4; font-style: normal; }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .track { animation: none; } }
.center-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.center-head h2 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
.center-head p { color: var(--muted); margin: 0; }
.stages { display: flex; flex-direction: column; gap: 72px; }
.stage { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.stage.flip .stage-ph { order: 2; }
.stage-ph { position: relative; border-radius: 32px; overflow: hidden; aspect-ratio: 5 / 4; }
.stage-ph img { width: 100%; height: 100%; object-fit: cover; }
.stage-ph.contain img { object-fit: contain; padding: 40px; }
.tone-peach { background: var(--peach-soft); } .tone-mint { background: var(--mint-soft); } .tone-sky { background: var(--sky); } .tone-sand { background: var(--sand); }
.stage-num { position: absolute; left: 22px; top: 18px; font-family: Fraunces, serif; font-size: 3.2rem; color: var(--white); text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.stage-ph.contain .stage-num { color: #c9785a; text-shadow: none; }
.stage-txt h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.stage-txt p { color: var(--muted); font-size: 1.05rem; }
.minis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 18px; }
.mini { display: flex; gap: 12px; background: var(--white); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); }
.mini img { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; flex: none; }
.mini strong { display: block; font-size: .88rem; line-height: 1.3; }
.mini span { display: block; font-family: Fraunces, serif; font-weight: 600; margin: 2px 0 8px; }
.mini .buy .btn { padding: 6px 8px; font-size: .74rem; }
.link-arrow { font-weight: 700; color: #c9785a; text-decoration: none; }
.feature-review { margin: 0 auto 32px; max-width: 860px; text-align: center; background: var(--peach-soft); border-radius: 32px; padding: 48px 40px; }
.feature-review blockquote { font-family: Fraunces, serif; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; margin: 14px 0 20px; }
.feature-review figcaption { color: var(--muted); font-size: .92rem; }
.reviews.three { grid-template-columns: repeat(3, 1fr); }
.promise2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.promise2 > div { background: var(--white); border-radius: var(--radius); padding: 32px; text-align: center; box-shadow: var(--shadow); }
.promise2 .ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--peach-soft); color: #c9785a; margin-bottom: 16px; }
.promise2 h3 { font-size: 1.4rem; }
.promise2 p { color: var(--muted); margin: 0; }
.band2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; background: var(--ink); color: #f6efe9; border-radius: 36px; padding: 48px 56px; overflow: hidden; }
.band2 h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.band2 h2 em { color: #f6c9b4; }
.band2 p { color: #cfc6cf; margin: 0 0 24px; }
.band2 .btn.amazon { background: #f6efe9; color: var(--ink); }
.band2-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.band2-ph img { border-radius: 22px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.band2-ph img:last-child { transform: translateY(24px); }
@media (max-width: 1000px) {
  .reviews.three, .promise2 { grid-template-columns: 1fr; }
  .stage, .band2 { grid-template-columns: 1fr; gap: 28px; }
  .stage.flip .stage-ph { order: 0; }
}
@media (max-width: 760px) {
  .hero2 { padding: 28px 0 56px; }
  .hero2-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero2-art { height: 440px; }
  .main-arch { width: 82%; }
  .circle-ph { width: 140px; height: 140px; bottom: 10px; border-width: 6px; }
  .fc1 { left: 0; top: 30px; }
  .fc2 { right: 0; bottom: 60px; }
  .fcard img { width: 44px; height: 44px; }
  .minis { grid-template-columns: 1fr; }
  .band2 { padding: 36px 24px; }
  .feature-review { padding: 32px 22px; }
  .stages { gap: 52px; }
}
.stage-ph.contain img { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage-ph.contain { background: #f3ece4; } }

/* ---- Home v5: bold bento ---- */
.v5 { --sun: #ffd84d; --sun-soft: #fff4c7; --navy: #1d2b4f; --blue-soft: #dcecff; --mint2: #d4f3e8; --pink2: #ffe1e6; background: #f7f5f0; }
.v5 h1, .v5 h2, .v5 h3 { font-family: "Bricolage Grotesque", "DM Sans", sans-serif; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.v5 .chip { display: inline-block; background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: .82rem; color: var(--navy); margin-bottom: 18px; box-shadow: 0 2px 0 rgba(29,43,79,.08); }
.v5 .btn.amazon { background: var(--navy); }
.v5-hero { padding: 28px 0 48px; }
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 150px; gap: 16px; }
.bento .t { border-radius: 28px; overflow: hidden; position: relative; }
.bento .t img { width: 100%; height: 100%; object-fit: cover; }
.t-head { grid-column: 1 / 7; grid-row: 1 / 4; background: var(--sun); padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.t-head h1 { font-size: clamp(2.6rem, 4.6vw, 4.3rem); line-height: .98; margin-bottom: 18px; }
.t-head .hl { background: #fff; padding: 0 12px; border-radius: 16px; display: inline-block; transform: rotate(-2deg); }
.t-head p { font-size: 1.1rem; color: #3b3f52; max-width: 460px; margin: 0 0 24px; }
.t-photo { grid-column: 7 / 10; grid-row: 1 / 4; }
.t-rate { grid-column: 10 / 13; grid-row: 1 / 2; background: var(--navy); color: #fff; padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; }
.t-rate b { font-family: "Bricolage Grotesque", sans-serif; font-size: 2.6rem; line-height: 1; }
.t-rate b small { font-size: 1rem; opacity: .7; }
.t-rate p { margin: 4px 0 0; font-size: .8rem; opacity: .8; line-height: 1.35; }
.t-sign { grid-column: 10 / 13; grid-row: 2 / 4; background: #fff; display: flex; flex-direction: column; text-decoration: none; padding: 16px; }
.t-sign img { height: 58% !important; object-fit: contain !important; }
.t-sign small { color: #c26b00; font-weight: 800; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; }
.t-sign b { display: block; color: var(--navy); font-family: "Bricolage Grotesque", sans-serif; font-size: 1.1rem; line-height: 1.15; margin: 4px 0; }
.t-sign span { font-weight: 700; color: #3b3f52; }
.t-crawl { grid-column: 1 / 5; grid-row: 4 / 6; }
.t-fact { grid-column: 5 / 8; grid-row: 4 / 6; background: var(--mint2); padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; }
.t-fact b { font-family: "Bricolage Grotesque", sans-serif; font-size: 2.4rem; color: var(--navy); line-height: 1; }
.t-fact span { color: #3b3f52; font-weight: 500; margin-top: 8px; }
.t-teeth { grid-column: 8 / 13; grid-row: 4 / 6; }
.v5-h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.02; margin-bottom: 18px; }
.v5 .center { text-align: center; }
.v5 .sub { color: #5a5f73; margin: -6px auto 36px; max-width: 560px; }
.v5-cats { padding: 40px 0 64px; }
.v5-catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.v5-cat { border-radius: 28px; padding: 24px 22px 0; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; overflow: hidden; transition: transform .2s; }
.v5-cat:hover { transform: translateY(-6px) rotate(-1deg); }
.v5-cat small { font-weight: 700; color: #5a5f73; }
.v5-cat h3 { font-size: 1.6rem; margin: 4px 0 6px; }
.v5-cat span { font-weight: 800; color: var(--navy); }
.v5-cat img { width: 80%; align-self: flex-end; margin-top: 12px; mix-blend-mode: multiply; }
.c-yellow { background: var(--sun-soft); } .c-mint { background: var(--mint2); } .c-blue { background: var(--blue-soft); } .c-pink { background: var(--pink2); }
.v5-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.v5-sign { background: var(--sun); padding: 80px 0; }
.v5-sign p, .v5-knee p { font-size: 1.1rem; color: #3b3f52; max-width: 500px; }
.v5-sign-img { border-radius: 32px; box-shadow: 0 30px 60px rgba(29,43,79,.18); }
.v5-packs { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; max-width: 520px; }
.v5-packs[hidden] { display: none; }
.v5-pack { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; background: #fff; border-radius: 18px; padding: 10px 10px 10px 18px; }
.v5-pack span { font-weight: 700; color: var(--navy); }
.v5-pack b { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.25rem; color: var(--navy); }
.v5-pack .buy .btn { padding: 9px 14px; font-size: .82rem; }
.v5-knee { padding: 88px 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.sw { display: inline-flex; align-items: center; gap: 8px; border: 2px solid transparent; background: #fff; border-radius: 999px; padding: 6px 14px 6px 6px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--navy); cursor: pointer; }
.sw span { width: 26px; height: 26px; border-radius: 50%; background: var(--c); }
.sw.on { border-color: var(--navy); }
.v5-knee .v5-pack { background: #fff; }
.v5-knee-ph img { border-radius: 40px; aspect-ratio: 1; object-fit: cover; width: 100%; box-shadow: 0 30px 60px rgba(29,43,79,.15); }
.v5-teeth { background: var(--mint2); padding: 88px 0; }
.v5-teethgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v5-tcard { background: #fff; border-radius: 28px; padding: 22px; }
.v5-tcard img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.v5-tcard h3 { font-size: 1.4rem; margin: 8px 0 2px; }
.v5-tcard p { color: #5a5f73; margin: 0; }
.v5-tcard .v5-pack { background: #f7f5f0; margin-top: 14px; }
.v5-reviews { padding: 88px 0; }
.v5-revgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v5-rev { margin: 0; background: #fff; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; }
.v5-rev:nth-child(1) { background: var(--sun-soft); } .v5-rev:nth-child(2) { background: var(--blue-soft); } .v5-rev:nth-child(3) { background: var(--mint2); } .v5-rev:nth-child(4) { background: var(--pink2); }
.v5-rev blockquote { margin: 10px 0 16px; font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 1.2rem; line-height: 1.3; color: var(--navy); flex: 1; }
.v5-rev figcaption { font-size: .88rem; color: #3b3f52; }
.v5-band { background: var(--navy); color: #fff; border-radius: 36px; padding: 56px 32px; text-align: center; }
.v5-band img { width: 64px; height: 64px; margin: 0 auto 10px; background: #fff; border-radius: 50%; padding: 8px; }
.v5-band h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.v5-band p { opacity: .8; margin: 0 auto 24px; max-width: 520px; }
.v5-band .actions { justify-content: center; }
.v5-band .btn.amazon { background: var(--sun); color: var(--navy); }
.v5 ~ * , body:has(.v5) footer { margin-top: 0; }
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; }
  .t-head { grid-column: 1 / 7; grid-row: auto / span 3; }
  .t-photo { grid-column: 1 / 4; grid-row: auto / span 3; }
  .t-rate { grid-column: 4 / 7; grid-row: auto / span 1; }
  .t-sign { grid-column: 4 / 7; grid-row: auto / span 2; }
  .t-crawl { grid-column: 1 / 4; grid-row: auto / span 2; }
  .t-fact { grid-column: 4 / 7; grid-row: auto / span 2; }
  .t-teeth { grid-column: 1 / 7; grid-row: auto / span 2; }
  .v5-catgrid, .v5-revgrid { grid-template-columns: repeat(2, 1fr); }
  .v5-split { grid-template-columns: 1fr; gap: 32px; }
  .v5-teethgrid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .bento { gap: 12px; grid-auto-rows: 120px; }
  .t-head { padding: 26px 22px; grid-row: auto / span 4; }
  .t-head h1 { font-size: 2.5rem; }
  .v5-catgrid { gap: 12px; }
  .v5-cat { min-height: 230px; padding: 16px 14px 0; border-radius: 22px; }
  .v5-cat h3 { font-size: 1.2rem; }
  .v5-revgrid { grid-template-columns: 1fr; }
  .v5-pack { grid-template-columns: 1fr auto; }
  .v5-pack .buy { grid-column: 1 / -1; }
}
.t-head .chip { align-self: flex-start; }
.t-label { position: absolute; left: 16px; bottom: 16px; right: 16px; background: rgba(255,255,255,.92); border-radius: 14px; padding: 8px 12px; font-weight: 700; font-size: .85rem; color: #1d2b4f; }
body:has(.v5) { background: #f7f5f0; }
body:has(.v5) .brand, body:has(.v5) .foot h4 { font-family: "Bricolage Grotesque", "DM Sans", sans-serif; font-weight: 800; color: #1d2b4f; }
body:has(.v5) header { background: color-mix(in srgb, #f7f5f0 90%, transparent); }
body:has(.v5) footer { margin-top: 0; }
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .bento .t { grid-column: auto !important; grid-row: auto !important; }
  .t-head { grid-column: 1 / -1 !important; }
  .t-photo, .t-crawl { aspect-ratio: 3 / 4; }
  .t-rate { padding: 18px 16px; }
  .t-rate b { font-size: 2.1rem; }
  .t-sign { padding: 12px; }
  .t-sign img { height: auto !important; aspect-ratio: 1; }
  .t-sign b { font-size: .98rem; }
  .t-fact { padding: 18px 16px; justify-content: center; }
  .t-fact b { font-size: 1.8rem; }
  .t-teeth { grid-column: 1 / -1 !important; aspect-ratio: 16 / 10; }
  .t-label { font-size: .75rem; padding: 6px 10px; left: 10px; right: 10px; bottom: 10px; }
}
@media (max-width: 560px) {
  .bento .t-head, .bento .t-teeth { grid-column: 1 / -1 !important; }
}
@media (max-width: 560px) {
  .t-photo, .t-crawl { aspect-ratio: auto; min-height: 220px; }
  .bento .t-fact { grid-column: 1 / -1 !important; }
}

/* Age filter */
.agebar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 26px; }
.agebar > span { font-weight: 700; color: var(--muted); margin-right: 4px; }
.agebtn { font: inherit; font-weight: 600; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.agebtn:hover { border-color: var(--ink); }
.agebtn.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.group[hidden], .card[hidden], .chips[hidden] { display: none; }
.v5-ages { padding: 40px 0 0; }
.v5-agegrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 20px; }
.v5-agegrid a { border-radius: 22px; padding: 22px 18px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; transition: transform .2s; }
.v5-agegrid a:hover { transform: translateY(-4px); }
.v5-agegrid b { font-size: 2rem; }
.v5-agegrid span { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.15rem; color: #1d2b4f; }
@media (max-width: 760px) { .v5-agegrid { grid-template-columns: repeat(2, 1fr); } }

/* Premium home with family hero */
.hero2 .hero2-grid { grid-template-columns: .85fr 1.25fr; }
.hero2 h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
.hero3-art { position: relative; }
.hero3-art > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 30% center; border-radius: 36px; border: 8px solid var(--white); box-shadow: 0 30px 60px rgba(46, 42, 51, .16); }
.fc3 { left: -28px; bottom: 28px; }
.hero3-art .spark.s1 { left: auto; right: -10px; top: -18px; }
.ages-p { padding: 72px 0 0; }
.agegrid-p { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.agegrid-p a { background: var(--white); border-radius: 24px; padding: 26px 18px; text-align: center; text-decoration: none; box-shadow: var(--shadow); transition: transform .2s; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.agegrid-p a:hover { transform: translateY(-4px); }
.agegrid-p span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--peach-soft); font-size: 1.8rem; }
.agegrid-p a:nth-child(2n) span { background: var(--mint-soft); }
.agegrid-p b { font-family: Fraunces, serif; font-weight: 600; font-size: 1.15rem; }
.agegrid-p small { color: var(--muted); }
@media (max-width: 1000px) { .agegrid-p { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .hero2 .hero2-grid { grid-template-columns: 1fr; }
  .hero3-art > img { border-width: 5px; border-radius: 24px; }
  .fc3 { left: 8px; bottom: -22px; }
  .agegrid-p { grid-template-columns: repeat(2, 1fr); }
}

/* Marketplace buttons with their own price */
.buy.priced .btn { flex-direction: column; gap: 0; line-height: 1.2; padding-top: 8px; padding-bottom: 8px; }
.buy.priced .btn span { font-size: .72rem; font-weight: 500; opacity: .85; }
.buy.priced .btn b { font-size: .95rem; }
.buy.priced .btn.small b { font-size: .88rem; }
.mini .buy.priced .btn { padding: 5px 8px; }
.mini .buy.priced .btn b { font-size: .8rem; }
.mini .buy { margin-top: 8px; }

/* Coming soon / out of stock */
.soon-badge { position: absolute; top: 14px; right: 14px; z-index: 1; background: var(--ink); color: var(--cream); border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 700; }
.card.unavailable .ph img { opacity: .55; filter: grayscale(.4); }
.btn.soon, .btn.soon:hover { flex: 1; background: var(--sand); color: var(--muted); border: 1px dashed var(--line); cursor: not-allowed; transform: none; box-shadow: none; font: inherit; font-weight: 700; }

/* Reviews: two cards */
.reviews.two { grid-template-columns: repeat(2, 1fr); }
.reviews.two .feature-review { margin: 0; max-width: none; }
@media (max-width: 760px) { .reviews.two { grid-template-columns: 1fr; } }

/* Footer with policies column */
.foot { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
@media (max-width: 1000px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot { grid-template-columns: 1fr; } }

/* Policy pages */
.policy { padding-bottom: 24px; }
.policy h2 { font-size: 1.5rem; margin-top: 36px; }
.policy a { color: #c9785a; }
.card .ph { overflow: hidden; }
.card .ph img { position: absolute; inset: 0; }
.card .ph .tag, .card .ph .soon-badge { z-index: 2; }
.mini .buy.priced .btn span, .mini .buy.priced .btn b { font-family: "DM Sans", system-ui, sans-serif; margin: 0; display: block; white-space: nowrap; }
.mini .buy.priced .btn span { font-size: .66rem; font-weight: 500; }
.mini .buy.priced .btn b { font-size: .78rem; font-weight: 700; }
.mini .buy.priced .btn { border-radius: 14px; padding: 6px 6px; }
.buy.priced .btn b { white-space: nowrap; }

/* Bigger tap targets on phones without moving anything: the padding grows the tappable area,
   and an equal negative margin keeps each link's line (and the footer spacing) exactly as before. */
@media (max-width: 760px) {
  .foot a, .link-arrow { display: inline-block; padding: 10px 0; margin: -10px 0; }
}

/* ===== Peppynose v2 additions (append to the END of styles.css) ===== */

/* B1. Footer: remove the 12px link overlap on phones (replaces the old negative-margin rule) */
@media (max-width: 760px) {
  .foot a, .link-arrow { display: inline-block; padding: 10px 0; margin: 0; }
  .foot li { margin-bottom: 0; }
}

/* C. Hero photo: 16:9 on desktop, 4:5 on phones (img now sits inside <picture>) */
.hero3-art picture { display: block; }
.hero3-art > img, .hero3-art > picture > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: 36px; border: 8px solid var(--white); box-shadow: 0 30px 60px rgba(46, 42, 51, .16); display: block; }
@media (max-width: 760px) {
  .hero3-art > img, .hero3-art > picture > img { aspect-ratio: 4 / 5; border-width: 5px; border-radius: 24px; }
}

/* E. Trust badges row */
.trust-badges { background: var(--white); border-bottom: 1px solid var(--line); }
.trust-badges ul { list-style: none; margin: 0 auto; padding: 14px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.trust-badges li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--ink); }
.trust-badges li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e2a33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 760px) { .trust-badges ul { flex-direction: column; align-items: flex-start; width: fit-content; gap: 8px; } }

/* F. Instagram section */
.ig-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ig-grid a { display: block; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); transition: transform .15s; }
.ig-grid a:hover { transform: translateY(-3px); }
.ig-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.ig-more { text-align: center; margin-top: 28px; }
@media (max-width: 1000px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* G. WhatsApp floating button */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 18px; border-radius: 999px; background: #25d366; color: #0b2e17; font-weight: 700; font-size: .95rem; text-decoration: none; box-shadow: 0 10px 26px rgba(0, 0, 0, .18); transition: opacity .2s, transform .2s; }
.wa-float svg { width: 22px; height: 22px; flex: none; }
.wa-float:hover { transform: translateY(-2px); }
.wa-float.wa-hide { opacity: 0; pointer-events: none; transform: translateY(12px); }
@media (max-width: 760px) {
  .wa-float { right: 12px; bottom: 12px; padding: 12px 16px; font-size: .9rem; }
  footer { padding-bottom: 84px; } /* the last footer line can always scroll clear of the button */
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* H. Language switch (EN / தமிழ் / हिंदी) */
.lang-switch { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; font-size: .82rem; font-weight: 600; order: 3; }
.lang-switch a { text-decoration: none; color: var(--muted); padding: 6px 10px; border-radius: 999px; min-height: 32px; display: inline-flex; align-items: center; }
.lang-switch a[aria-current="true"] { background: var(--ink); color: var(--cream); }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"]:hover { color: var(--cream); }
@media (max-width: 760px) {
  .bar { gap: 8px; }
  .lang-switch { margin-left: auto; padding: 2px; font-size: .75rem; gap: 0; }
  .lang-switch a { padding: 4px 7px; min-height: 40px; }
  .menu-btn { order: 4; padding: 8px 11px; }
}
@media (max-width: 430px) {
  .brand { font-size: 1.2rem; gap: 6px; }
  .brand img { width: 32px; height: 32px; }
  .brand sup { display: none; }
  .menu-btn { font-size: .85rem; padding: 8px 9px; }
}

/* H. Tamil / Hindi fonts (Latin text keeps DM Sans / Fraunces; Indic glyphs fall back to Noto) */
html[lang="ta"] body { font-family: "DM Sans", "Noto Sans Tamil", sans-serif; line-height: 1.75; }
html[lang="ta"] h1, html[lang="ta"] h2, html[lang="ta"] h3, html[lang="ta"] .brand { font-family: Fraunces, "Noto Serif Tamil", serif; line-height: 1.3; }
html[lang="hi"] body { font-family: "DM Sans", "Noto Sans Devanagari", sans-serif; line-height: 1.75; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] .brand { font-family: Fraunces, "Noto Serif Devanagari", serif; line-height: 1.3; }
html[lang="ta"] h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
html[lang="ta"] .btn, html[lang="hi"] .btn { text-align: center; }
html[lang="ta"] .buy.priced .btn b, html[lang="hi"] .buy.priced .btn b { white-space: normal; }
html[lang="ta"] h1, html[lang="ta"] h2, html[lang="hi"] h1, html[lang="hi"] h2, html[lang="ta"] .agegrid-p b { overflow-wrap: break-word; }
@media (max-width: 430px) { html[lang="ta"] h1 { font-size: 1.85rem; } html[lang="ta"] .agegrid-p b { font-size: .85rem; } }
@media (max-width: 430px) { html[lang="ta"] .agegrid-p a, html[lang="hi"] .agegrid-p a { min-width: 0; padding: 22px 10px; } html[lang="ta"] .agegrid-p small { overflow-wrap: anywhere; } }
.lang-switch a[lang="ta"] { font-family: "Noto Sans Tamil", sans-serif; } .lang-switch a[lang="hi"] { font-family: "Noto Sans Devanagari", sans-serif; }

/* H2. Language switch repeated inside the mobile menu, and the one-time language suggestion banner */
.nav .lang-switch.in-menu { display: none; }
@media (max-width: 760px) {
  .nav .lang-switch.in-menu { display: flex; margin: 10px 20px 14px; width: fit-content; order: 0; align-self: flex-start; }
  .nav .lang-switch.in-menu a { width: auto; padding: 6px 12px; }
}
.lang-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; background: var(--mint); color: #1d2b4f; font-size: .9rem; padding: 8px 44px 8px 16px; position: relative; text-align: center; }
.lang-hint a { color: #1d2b4f; font-weight: 700; }
.lang-hint button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; font-size: 1rem; color: #1d2b4f; cursor: pointer; }
.lang-hint[lang="ta"] { font-family: "Noto Sans Tamil", sans-serif; } .lang-hint[lang="hi"] { font-family: "Noto Sans Devanagari", sans-serif; }

/* ===================== Peppynose V3 additions (append to the END of /styles.css, after the V2 "H2" block) ===================== */

/* V3-1. FIX 1 (audit TC-17): mobile header, the language switch never covers the logo. Tested CSS from audit v4 header_fix.css, unchanged. */
@media (max-width: 760px) {
  .bar > .brand { flex-shrink: 0; white-space: nowrap; }
  .bar > .lang-switch { min-width: 0; }
  .nav { top: 100%; }   /* the mobile menu opens under the header even when the header is taller */
}
@media (max-width: 430px) {
  .bar { display: grid; grid-template-columns: auto 1fr auto;
         grid-template-areas: "brand . menu" "lang lang lang";
         height: auto; min-height: 76px; row-gap: 6px; padding-top: 10px; padding-bottom: 8px; align-items: center; }
  .bar > .brand { grid-area: brand; }
  .bar > .menu-btn { grid-area: menu; }
  .bar > .lang-switch { grid-area: lang; justify-self: center; margin: 0; }
}

/* V3-3. Header logo: the real Peppynose parrot mark + the real wordmark image (images/logo-wordmark.webp, 640x131, cut from the official logo). */
.brand { gap: 10px; line-height: 0; }
.bar > .brand { flex-shrink: 0; }
.brand img.brand-mark { width: 42px; height: 42px; flex: none; }
.brand img.brand-word { width: auto; max-width: none; height: 34px; flex: none; display: block; }
@media (max-width: 760px) {
  .brand { gap: 8px; }
  .brand img.brand-mark { width: 36px; height: 36px; }
  .brand img.brand-word { height: 28px; }
}
@media (max-width: 430px) {
  .brand { gap: 6px; }
  .brand img.brand-mark { width: 32px; height: 32px; }
  .brand img.brand-word { height: 26px; }
}
/* Between 431px and 560px the logo + EN/தமிழ்/हिंदी pill + Menu do not fit on one row in Tamil, so use the same two-row
   layout as FIX 1 there too (home pages only; other pages have no .lang-switch in .bar). */
@media (min-width: 431px) and (max-width: 560px) {
  .bar:has(> .lang-switch) { display: grid; grid-template-columns: auto 1fr auto;
         grid-template-areas: "brand . menu" "lang lang lang";
         height: auto; min-height: 76px; row-gap: 6px; padding-top: 10px; padding-bottom: 8px; align-items: center; }
  .bar:has(> .lang-switch) > .brand { grid-area: brand; }
  .bar:has(> .lang-switch) > .menu-btn { grid-area: menu; }
  .bar:has(> .lang-switch) > .lang-switch { grid-area: lang; justify-self: center; margin: 0; }
}

/* V3-3b. Tablet header. The real wordmark (166 px) is wider than the old text logo and the nav gains "Pregnancy tracker",
   so between 761 px and 1023 px (Tamil: up to 1239 px, its nav labels are much longer) the header uses the same Menu button
   as phones. This also removes the V2 Tamil overflow at 768 px. Wide screens keep the full desktop nav. */
@media (min-width: 761px) and (max-width: 1023px) {
  html:not([lang="ta"]) .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--cream); border-bottom: 1px solid var(--line); }
  html:not([lang="ta"]) .nav a { padding: 14px 20px; width: 100%; }
  html:not([lang="ta"]) .nav.open { display: flex; }
  html:not([lang="ta"]) .menu-btn { display: block; order: 4; padding: 8px 11px; }
  html:not([lang="ta"]) .bar { gap: 8px; }
  html:not([lang="ta"]) .bar > .lang-switch { margin-left: auto; min-width: 0; }
  html:not([lang="ta"]) .nav .lang-switch.in-menu { display: flex; margin: 10px 20px 14px; width: fit-content; order: 0; align-self: flex-start; }
  html:not([lang="ta"]) .nav .lang-switch.in-menu a { width: auto; padding: 6px 12px; }
}
@media (min-width: 761px) and (max-width: 1239px) {
  html[lang="ta"] .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--cream); border-bottom: 1px solid var(--line); }
  html[lang="ta"] .nav a { padding: 14px 20px; width: 100%; }
  html[lang="ta"] .nav.open { display: flex; }
  html[lang="ta"] .menu-btn { display: block; order: 4; padding: 8px 11px; }
  html[lang="ta"] .bar { gap: 8px; }
  html[lang="ta"] .bar > .lang-switch { margin-left: auto; min-width: 0; }
  html[lang="ta"] .nav .lang-switch.in-menu { display: flex; margin: 10px 20px 14px; width: fit-content; order: 0; align-self: flex-start; }
  html[lang="ta"] .nav .lang-switch.in-menu a { width: auto; padding: 6px 12px; }
}
@media (min-width: 1240px) { html[lang="ta"] .nav { gap: 22px; } }

/* V3-2. Store message line in the "Shop Peppynose online" band (home pages) */
.band2 .store-line { color: #f6efe9; font-weight: 700; margin: -10px 0 22px; display: flex; gap: 8px; align-items: baseline; }
.band2 .store-line::before { content: "🛍️"; }

/* V3-4. Product QR codes ("Scan to buy") on products cards and home best-seller cards */
.pn-qr { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; align-self: flex-start;
         text-decoration: none; color: var(--muted); font-size: .82rem; font-weight: 700; line-height: 1.25; }
.pn-qr img { width: 106px; height: 106px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.pn-qr:hover span { color: var(--ink); text-decoration: underline; }
@media (max-width: 760px) { .pn-qr img { width: 84px; height: 84px; } }

/* V3-4b. Buy chooser pages (/buy/<slug>.html, /ta/buy/, /hi/buy/) */
.buy-head .bar { justify-content: flex-start; }
.buy-page { padding: 36px 0 56px; }
.buy-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; max-width: 980px; }
.buy-ph { margin: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.buy-ph img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.buy-box h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 8px; }
.buy-box .buy-desc { color: var(--muted); margin: 0 0 18px; }
.buy-pack { margin: 0 0 18px; }
.buy-pack h2 { font-family: "DM Sans", "Noto Sans Tamil", "Noto Sans Devanagari", sans-serif; font-size: .95rem; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.buy-big { display: grid; gap: 10px; }
.buy-big .btn { flex-direction: column; gap: 2px; padding: 16px 20px; min-height: 64px; font-size: 1.1rem; line-height: 1.2; width: 100%; text-align: center; }
.buy-big .btn small { font-size: .8rem; font-weight: 500; opacity: .85; }
.buy-note { font-size: .85rem; color: var(--muted); margin: 6px 0 16px; }
.buy-foot { border-top: 1px solid var(--line); padding: 20px 0 96px; font-size: .85rem; color: var(--muted); }
.buy-foot .wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.buy-foot a { color: inherit; }
@media (max-width: 760px) {
  .buy-page { padding: 20px 0 40px; }
  .buy-wrap { grid-template-columns: 1fr; gap: 20px; }
  .buy-ph { max-width: 300px; width: 100%; margin: 0 auto; }
}

/* V3-5. Pregnancy tracker: home teaser + tracker page */
.tracker-teaser { padding: 56px 0 0; }
.tracker-teaser .tt { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 28px; align-items: center; background: var(--peach-soft);
                      border-radius: var(--radius); padding: 28px 32px; }
.tracker-teaser .tt-ic { font-size: 2.6rem; line-height: 1; }
.tracker-teaser h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: 0 0 6px; }
.tracker-teaser p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .tracker-teaser .tt { grid-template-columns: 1fr; padding: 24px 22px; } .tracker-teaser .tt-ic { display: none; } .tracker-teaser .btn { width: 100%; } }

.trk { padding: 8px 0 72px; }
.trk .wrap { max-width: 720px; }
.trk-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; margin-bottom: 18px; }
.trk fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.trk legend { font-weight: 700; margin-bottom: 8px; }
.trk .opt-row { display: flex; flex-wrap: wrap; gap: 10px; }
.trk .opt-row label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.trk .opt-row label:has(input:checked) { border-color: var(--ink); background: var(--sand); }
.trk .date-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.trk .date-row label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; flex: 1 1 220px; }
.trk input[type="date"] { font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; min-height: 48px; background: var(--white); color: var(--ink); width: 100%; }
.trk .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.trk .btn.go { background: var(--ink); color: var(--cream); min-height: 48px; }
.trk .err { color: #b3261e; font-weight: 700; margin: 10px 0 0; min-height: 1.2em; }
.trk-week { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.trk-week .big { font-family: Fraunces, "Noto Serif Tamil", "Noto Serif Devanagari", serif; font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1.1; }
.trk-week .tri { background: var(--mint); color: #1d2b4f; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .85rem; }
.trk-sub { color: var(--muted); margin: 6px 0 0; }
.trk-bar { height: 14px; border-radius: 999px; background: var(--sand); overflow: hidden; margin: 18px 0 6px; }
.trk-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #F0579B, #E51B00 35%, #45B033 70%, #0083CF); transition: width .6s ease; }
.trk-bar-l { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); gap: 10px; }
.trk-tip h2 { font-size: 1.15rem; margin: 0 0 6px; }
.trk-tip p { margin: 0; font-size: 1.05rem; }
.trk [hidden] { display: none !important; }
.trk-nudge { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; border: 1px dashed var(--peach); border-radius: 18px; padding: 14px 16px; margin-top: 12px; }
.trk-nudge p { margin: 0; flex: 1 1 260px; }
.trk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.trk .btn.wa { background: #1f8f4e; color: #fff; }
.trk .btn.plain { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.trk .disclaimer { background: #fff9e6; color: #5b4a00; border: 1px solid #f3dc8b; border-radius: 14px; padding: 12px 14px; font-weight: 700; margin: 0 0 12px; }
.trk .privacy { color: var(--muted); font-size: .88rem; margin: 0; }
@media (prefers-color-scheme: dark) { .trk .disclaimer { background: #3a3220; color: #f7e7b0; border-color: #6b5a26; } }
@media (max-width: 520px) { .trk-card { padding: 20px 18px; } .trk-actions .btn, .trk .btn.go { width: 100%; } }

/* V3-6. Page loader: hand-drawn baby face that smiles and blinks. Max ~800 ms (fade starts by 600 ms), first page view per tab only, never blocks taps. */
#pn-loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--cream);
             pointer-events: none; opacity: 1; transition: opacity .2s ease; }
#pn-loader.pn-out { opacity: 0; }
#pn-loader svg { width: 112px; height: 112px; overflow: visible; }
#pn-loader .pl-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pnDraw .26s ease-out forwards; }
#pn-loader .pl-hair { animation-delay: .1s; }
#pn-loader .pl-ear { animation-delay: .12s; }
#pn-loader .pl-smile { animation: pnDraw .22s .16s ease-out forwards; }
#pn-loader .pl-cheek { opacity: 0; animation: pnFade .2s .22s forwards; }
#pn-loader .pl-eye { transform-box: fill-box; transform-origin: center; animation: pnBlink .7s .1s infinite; }
@keyframes pnDraw { to { stroke-dashoffset: 0; } }
@keyframes pnFade { to { opacity: .45; } }
@keyframes pnBlink { 0%, 30%, 46%, 100% { transform: scaleY(1); } 38% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { #pn-loader { display: none !important; } }

/* ===================== Peppynose V4 additions (append to the END of /styles.css, after the V3 block) ===================== */

/* V4-1. FIX (audit v5 TC-23): in Tamil, when the 4-card grid makes cards narrow, put the "Scan to buy" caption under the QR instead of cutting it off. Tested CSS from FIXLIST.txt, unchanged. */
@media (min-width: 1001px) and (max-width: 1239px) {
  html[lang="ta"] .pn-qr { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* V4-2. Pregnancy tracker: simple first screen + tabs */
.trk-hero { display: grid; grid-template-columns: 200px 1fr; gap: 18px 26px; align-items: center; }
.trk-hero-img { width: 200px; aspect-ratio: 1; position: relative; }
.trk-hero-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.trk-ph { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
          background: radial-gradient(circle at 38% 34%, #ffe9df 0, #fbd6c6 55%, #f6c0aa 100%); }
.trk-ph span { font-family: Fraunces, "Noto Serif Tamil", "Noto Serif Devanagari", serif; font-size: 4.2rem; font-weight: 700; color: #9a4a33; line-height: 1; }
.trk-hero .big { font-family: Fraunces, "Noto Serif Tamil", "Noto Serif Devanagari", serif; font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1.1; display: block; }
.trk-size { font-size: 1.15rem; margin: 6px 0 4px; }
.trk-left { font-size: 1.25rem; font-weight: 700; color: #b3261e; margin: 0 0 14px; }
.trk .btn.card { background: #1f8f4e; color: #fff; display: inline-flex; gap: 8px; align-items: center; min-height: 48px; }
.trk-credit { grid-column: 1 / -1; font-size: .75rem; color: var(--muted); margin: 0; }
.trk-msg { font-size: .9rem; color: var(--muted); margin: 8px 0 0; min-height: 1em; }
.trk-tabs { display: flex; gap: 6px; margin: 0 0 10px; background: var(--sand); padding: 5px; border-radius: 999px; }
.trk-tabs [role="tab"] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; min-height: 44px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; padding: 8px 10px; line-height: 1.2; }
.trk-tabs [role="tab"][aria-selected="true"] { background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.trk-panel h2 { font-size: 1.15rem; margin: 0 0 8px; }
.trk-checks, .trk-todo { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.trk-checks li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); }
.trk-checks .ck-tag { font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; background: var(--sand); white-space: nowrap; }
.trk-checks .ck-now { border-color: #45B033; background: #f3fbf1; } .trk-checks .ck-now .ck-tag { background: #45B033; color: #fff; }
.trk-checks .ck-past { opacity: .65; }
.trk-todo label { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.trk-todo input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: #1f8f4e; }
.trk-todo input:checked + span { text-decoration: line-through; color: var(--muted); }
.trk-note { font-size: .85rem; color: var(--muted); margin: 10px 0 0; }
.trk .disclaimer.trk-d2 { margin: 6px 0 12px; }
@media (max-width: 520px) {
  .trk-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .trk-hero-img { width: 170px; }
  .trk .btn.card { width: 100%; justify-content: center; }
  .trk-tabs [role="tab"] { font-size: .88rem; padding: 8px 4px; }
  html[lang="ta"] .trk-tabs [role="tab"] { font-size: .8rem; }
}
@media (prefers-color-scheme: dark) { .trk-checks .ck-now { background: #1f3320; } }

/* V4-3. Consent banner (shown until Accept / Decline). Floating buttons move up while it is open (--pn-lift). */
.pn-consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 760px; margin: 0 auto; background: var(--white, #fff); color: var(--ink, #222);
              border: 1px solid var(--line, #ddd); border-radius: 18px; box-shadow: 0 12px 34px rgba(0,0,0,.18); padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.pn-consent p { margin: 0; flex: 1 1 300px; font-size: .9rem; line-height: 1.45; }
.pn-consent-b { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.pn-consent button { font: inherit; font-weight: 700; min-height: 44px; padding: 8px 18px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line, #ccc); background: transparent; color: inherit; }
.pn-consent .pn-c-yes { background: var(--ink, #1d2b4f); color: var(--cream, #fff); border-color: transparent; }
@media (max-width: 480px) { .pn-consent-b { width: 100%; } .pn-consent button { flex: 1 1 0; } }
.wa-float { bottom: calc(18px + var(--pn-lift, 0px)); }
@media (max-width: 760px) { .wa-float { bottom: calc(12px + var(--pn-lift, 0px)); } }

/* V4-4. FAQ chat helper: round button stacked ABOVE the WhatsApp button (same right edge, 12 px gap; phones 14 px). */
.pn-chat { position: fixed; right: 18px; bottom: calc(18px + 48px + 12px + var(--pn-lift, 0px)); z-index: 41; transition: opacity .2s, transform .2s; }
.pn-chat-btn { width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; margin-left: auto;
               background: #0083CF; color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.pn-chat-btn svg { width: 26px; height: 26px; }
.pn-chat.pn-chat-hide { opacity: 0; pointer-events: none; transform: translateY(6px); }
.pn-chat-panel { position: absolute; right: 0; bottom: 62px; width: min(360px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 170px - var(--pn-lift, 0px)));
                 display: flex; flex-direction: column; background: var(--white, #fff); color: var(--ink, #222); border: 1px solid var(--line, #ddd); border-radius: 20px; box-shadow: 0 18px 44px rgba(0,0,0,.22); overflow: hidden; }
.pn-chat-panel[hidden] { display: none; }
.pn-chat-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #0083CF; color: #fff; }
.pn-chat-x { border: 0; background: transparent; color: inherit; font-size: 1.1rem; width: 40px; height: 40px; cursor: pointer; border-radius: 50%; }
.pn-chat-log { padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; overscroll-behavior: contain; }
.pn-m { max-width: 92%; font-size: .9rem; line-height: 1.45; }
.pn-m p { margin: 0 0 6px; }
.pn-m.bot { background: var(--sand, #f4eee6); border-radius: 14px 14px 14px 4px; padding: 9px 11px; }
.pn-m.me { align-self: flex-end; background: #0083CF; color: #fff; border-radius: 14px 14px 4px 14px; padding: 8px 11px; }
.pn-m.chips, .pn-m.more { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.pn-m.chips button, .pn-more { text-align: left; font: inherit; font-size: .86rem; padding: 8px 11px; min-height: 40px; border-radius: 12px; border: 1px solid #0083CF; background: transparent; color: inherit; cursor: pointer; }
.pn-chat-link, .pn-chat-wa { display: inline-block; margin: 2px 8px 0 0; font-weight: 700; font-size: .86rem; }
.pn-chat-wa { color: #0b6e35; }
.pn-chat-f { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line, #ddd); }
.pn-chat-f input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--line, #ccc); border-radius: 999px; background: var(--white, #fff); color: inherit; }
.pn-chat-f button { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 0 14px; min-height: 42px; background: var(--ink, #1d2b4f); color: var(--cream, #fff); cursor: pointer; }
.pn-chat-note { font-size: .72rem; color: var(--muted, #666); margin: 0; padding: 0 12px 10px; }
@media (max-width: 760px) {
  .pn-chat { right: 12px; bottom: calc(12px + 48px + 14px + var(--pn-lift, 0px)); }
  .pn-chat-btn { width: 50px; height: 50px; }
  .pn-chat-panel { position: fixed; right: 12px; left: 12px; width: auto; bottom: calc(132px + var(--pn-lift, 0px)); max-height: calc(100vh - 150px - var(--pn-lift, 0px)); }
  footer { padding-bottom: 150px; }   /* the last footer line can scroll clear of both buttons */
  .buy-foot { padding-bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { .pn-chat { transition: none; } }

/* V4-5. Loader: the two parrots cut from the real logo. Mother hops, then baby hops, then the full logo lettering fades in. */
#pn-loader .pl-art { position: relative; width: 112px; height: 120px; }
#pn-loader .pl-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
#pn-loader .pl-word { display: block; width: 150px; height: auto; margin: 10px auto 0; opacity: 0; }
#pn-loader .pl-box { display: flex; flex-direction: column; align-items: center; }
#pn-loader .pl-perch { opacity: 0; animation: pl-fade .16s ease-out forwards; }
#pn-loader .pl-mom { opacity: 0; transform-origin: 75% 70%; animation: pl-hop .38s cubic-bezier(.3,.7,.4,1) .04s forwards; }
#pn-loader .pl-baby { opacity: 0; transform-origin: 25% 70%; animation: pl-hop2 .34s cubic-bezier(.3,.7,.4,1) .24s forwards; }
#pn-loader .pl-word { animation: pl-fade .2s ease-out .44s forwards; }
@keyframes pl-fade { to { opacity: 1; } }
@keyframes pl-hop { 0% { opacity: 0; transform: translateY(14px) rotate(4deg); } 35% { opacity: 1; } 60% { transform: translateY(-9px) rotate(-3deg); } 100% { opacity: 1; transform: none; } }
@keyframes pl-hop2 { 0% { opacity: 0; transform: translateY(12px) scale(.9); } 35% { opacity: 1; } 55% { transform: translateY(-11px) rotate(-6deg) scale(1.03); } 78% { transform: translateY(0) rotate(3deg); } 100% { opacity: 1; transform: none; } }

/* V4-6. Scroll motion (only when motion.js adds html.pn-motion, i.e. never with reduced motion). Transforms + opacity only. */
.pn-progress { position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 70; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
               background: linear-gradient(90deg, #E51B00, #F0579B 30%, #45B033 65%, #0083CF); }
.pn-motion .pn-rv { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--pn-d, 0ms); }
.pn-motion .pn-rv.pn-up:not(.pn-words) { opacity: 0; transform: translate3d(0, 22px, 0); }
.pn-motion .pn-rv.pn-sl { opacity: 0; transform: translate3d(-26px, 0, 0); }
.pn-motion .pn-rv.pn-sr { opacity: 0; transform: translate3d(26px, 0, 0); }
.pn-motion .pn-rv.pn-in, .pn-motion .pn-rv.pn-up.pn-in:not(.pn-words) { opacity: 1; transform: none; }   /* 2nd selector: must outrank the .pn-up:not(.pn-words) start state */
.pn-motion .pn-words .pn-wd { display: inline-block; max-width: 100%; overflow-wrap: anywhere;   /* long Tamil words may still wrap on 320 px phones */
   opacity: 0; transform: translate3d(0, .45em, 0); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--pn-i, 0) * 55ms); }
.pn-motion .pn-words.pn-in .pn-wd { opacity: 1; transform: none; }
.pn-fly { position: fixed; left: 14px; top: 0; z-index: 30; width: 46px; height: 50px; pointer-events: none; opacity: .9; will-change: transform; }
.pn-fly img { position: absolute; width: 46px; height: auto; }
.pn-fly .pn-fly-m { left: 0; top: 0; transform: rotate(var(--pn-flap, 0deg)); transition: transform .3s ease-out; }
.pn-fly .pn-fly-b { left: 0; top: 0; transform: rotate(calc(var(--pn-flap, 0deg) * -1)); transition: transform .3s ease-out; }
@media (max-width: 1199px) { .pn-fly { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }      /* smooth cross-fade when switching EN / தமிழ் / हिंदी (Chrome/Edge; others just switch) */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}
@media (prefers-reduced-motion: reduce) { .pn-progress, .pn-fly { display: none; } }

/* V4.1 fix TC-32: no sideways scroll on small phones with large text (130%) */
@media (max-width: 480px) {
  .stage, .promise2 { grid-template-columns: minmax(0, 1fr); }
  .agegrid-p { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage > *, .promise2 > *, .agegrid-p > a, .sec-head > *, .mini > div { min-width: 0; max-width: 100%; }
  .promise2 > div { padding: 24px 16px; }
  .agegrid-p a { padding: 22px 10px; }
  .mini .buy { flex-wrap: wrap; }
  .stage-txt h3, .stage-txt p, .sec-head h2, .sec-head p, .promise2 h3, .promise2 p, .agegrid-p b, .agegrid-p small, .eyebrow { overflow-wrap: anywhere; }
}

/* V4.2 Tracker week picture: light 3D tilt (mouse, drag, phone motion) and tap to zoom. Transform/opacity only. */
.trk-hero-img { perspective: 700px; }
.trk-hero-img.has-img { cursor: zoom-in; touch-action: pan-y; -webkit-tap-highlight-color: transparent; border-radius: 50%; }
.trk-hero-img.has-img img, .trk-hero-img.has-img::after { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.trk-hero-img.has-img img { box-shadow: var(--sx, 0px) var(--sy, 10px) 26px rgba(154, 74, 51, .22); transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s; }
.trk-hero-img.has-img::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 55%); opacity: .6; }
.trk-hero-img.tilting img, .trk-hero-img.tilting::after { transition-duration: .12s; }
.trk-hero-img img.trk-loading { position: absolute; inset: 0; opacity: 0; }
.trk-hero-img.has-img:focus-visible { outline: 3px solid #1f8f4e; outline-offset: 4px; }
.trk-zoom { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(28, 20, 24, .84); cursor: zoom-out; animation: trkZoomIn .25s ease-out; }
.trk-zoom img { width: min(92vw, 86vh, 800px); height: auto; border-radius: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.trk-zoom-x { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #2e2a33; font-size: 1.2rem; cursor: pointer; }
html.trk-zoom-open { overflow: hidden; }
@keyframes trkZoomIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .trk-hero-img.has-img img, .trk-hero-img.has-img::after { transform: none; transition: none; }
  .trk-zoom { animation: none; }
}

/* Tracker picture frame: rounded square instead of a circle, so the whole illustration shows (head, feet, cord).
   The placeholder uses the same frame. The result card stops below the sticky header when it scrolls into view. */
.trk-hero-img img, .trk-ph, .trk-hero-img.has-img, .trk-hero-img.has-img::after { border-radius: 22%; }
.trk-ph { background: radial-gradient(circle at 38% 34%, #ffe9df 0, #fbd6c6 60%, #f6c0aa 100%); }
.trk .trk-card, .trk #trk-form { scroll-margin-top: 92px; }

/* Tracker result without tabs: week + picture, then My weight, This week, Checkups and To-do as their own cards (weight.js). */
.trk-sec h2, .wt-card h2 { font-size: 1.2rem; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.trk-ico { font-size: 1.2em; line-height: 1; }
.wt-card { border: 2px solid var(--mint); }
.wt-card [hidden] { display: none !important; }
.wt-today .wt-big-l { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.wt-today #wt-forweek { font-weight: 500; color: var(--muted); }
.wt-today #wt-kg { font-size: 1.3rem; font-weight: 700; flex: 1 1 140px; }
.wt-today .wt-wk { display: grid; gap: 4px; max-width: 160px; margin-top: 8px; font-weight: 600; font-size: .92rem; }
.wt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; }
.wt-tile { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; gap: 2px; min-width: 0; }
.wt-tile b { font-size: 1.15rem; overflow-wrap: anywhere; }
.wt-t-h, .wt-t-s { font-size: .78rem; color: var(--muted); }
.wt-tile.wt-ok { background: var(--mint-soft); border-color: var(--mint); }
.wt-tile.wt-low, .wt-tile.wt-high { background: #fde7dc; border-color: #f3b79c; }
.wt-tile.wt-low b, .wt-tile.wt-high b { color: #8a2d0b; }
.wt-all { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.wt-all summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 380px) { .wt-tile b { font-size: 1rem; } .wt-tile { padding: 8px; } }
@media (prefers-color-scheme: dark) { .wt-tile.wt-low, .wt-tile.wt-high { background: #4a2414; border-color: #7a3a1c; } .wt-tile.wt-low b, .wt-tile.wt-high b { color: #ffd8c6; } }
.trk-panel h3 { font-size: 1rem; margin: 14px 0 8px; }
.wt-form .wt-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.wt-form label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; flex: 1 1 140px; }
.wt-form input { font: inherit; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); width: 100%; box-sizing: border-box; }
.wt-form .btn { background: var(--ink); color: var(--cream); min-height: 44px; cursor: pointer; font: inherit; font-weight: 700; margin-top: 10px; }
.wt-form .wt-row .btn { margin-top: 0; flex: 0 0 auto; }
.wt-err { color: #b3261e; font-weight: 600; font-size: .9rem; margin: 6px 0 0; min-height: 1em; }
.wt-bmi { background: var(--mint-soft); border-radius: 14px; padding: 10px 12px; margin: 10px 0 0; }
.wt-chart { margin: 14px 0 6px; max-width: 560px; }
.wt-chart svg { width: 100%; height: auto; display: block; }
.wt-grid { stroke: var(--line); stroke-width: 1; }
.wt-ax { font-size: 10px; fill: var(--muted); font-family: inherit; }
.wt-band { fill: var(--mint); opacity: .75; }
.wt-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.wt-dot { fill: var(--accent); stroke: var(--white); stroke-width: 1.5; }
.wt-dot.wt-low, .wt-dot.wt-high { fill: #c2410c; }
.wt-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .85rem; color: var(--muted); }
.wt-legend span::before { content: ""; display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.wt-l-you::before { background: var(--accent); height: 3px !important; }
.wt-l-range::before { background: var(--mint); }
.wt-views { display: inline-flex; gap: 4px; background: var(--sand); padding: 4px; border-radius: 999px; margin: 10px 0; }
.wt-views button { font: inherit; font-weight: 700; font-size: .9rem; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.wt-views button[aria-pressed="true"] { background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.wt-scroll { overflow-x: auto; }
.wt-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.wt-tbl th, .wt-tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.wt-tbl td small { display: block; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.wt-tbl td b { white-space: nowrap; }
.wt-tbl thead th { font-size: .8rem; color: var(--muted); }
.wt-tbl tbody th { font-weight: 700; white-space: normal; }
.wt-st { font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--mint-soft); }
.wt-st.wt-low, .wt-st.wt-high { background: #fde7dc; color: #8a2d0b; }
.wt-del { border: 0; background: none; color: var(--muted); font-size: 1rem; min-width: 36px; min-height: 36px; cursor: pointer; }
.wt-link { background: none; border: 0; padding: 8px 0; font: inherit; font-size: .9rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-color-scheme: dark) { .wt-st.wt-low, .wt-st.wt-high { background: #4a2414; color: #ffd8c6; } }

/* Tracker animations. Only when motion.js is on (html.pn-motion), so never for "reduced motion". Transform/opacity only. */
.pn-motion .trk-hero-img::before { content: ""; position: absolute; inset: -10px; border-radius: 30%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(246, 201, 180, .9) 0, rgba(246, 201, 180, 0) 70%); animation: trkGlow 3.2s ease-in-out infinite; }
.pn-motion .trk-left::before { content: "❤"; display: inline-block; margin-right: 6px; animation: trkBeat 1.3s ease-in-out infinite; }
.pn-motion .wt-band { animation: wtFade .8s ease-out both; }
.pn-motion .wt-line { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); animation: wtDraw 1.1s .15s ease-out forwards; }
.pn-motion .wt-dot { transform-box: fill-box; transform-origin: center; animation: wtDot .45s calc(.2s + var(--i, 0) * 90ms) cubic-bezier(.3, 1.6, .5, 1) both; }
.pn-motion .wt-stats.wt-pop .wt-tile { animation: wtTile .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.pn-motion .wt-stats.wt-pop .wt-tile:nth-child(2) { animation-delay: .08s; }
.pn-motion .wt-stats.wt-pop .wt-tile:nth-child(3) { animation-delay: .16s; }
.wt-heart { position: fixed; z-index: 70; pointer-events: none; font-size: 20px; animation: wtHeart 1.2s ease-out both; }
@keyframes trkGlow { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes trkBeat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1.1); } }
@keyframes wtFade { from { opacity: 0; } to { opacity: .75; } }
@keyframes wtDraw { to { stroke-dashoffset: 0; } }
@keyframes wtDot { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes wtTile { 0% { transform: scale(.92); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes wtHeart { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -90px) scale(1.15); } }

/* Pregnancy tracker dashboard (dash.js): week ring + picture, a big "Add today's weight" button, 6 tiles.
   A tile opens its card as a full-screen panel with a Back button. Once the week shows, the page title and the
   first disclaimer step aside so the dashboard starts at the top (the disclaimer is repeated under the tiles). */
body:has(.dash #trk-result:not([hidden])) .page-head, .dash:has(#trk-result:not([hidden])) .wrap > .disclaimer:first-child { display: none; }
.dash-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.dash-top { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5vw, 36px); flex-wrap: wrap; }
.dash-ring { position: relative; width: 150px; aspect-ratio: 1; flex: none; }
.dash-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dr-bg { fill: none; stroke: var(--sand); stroke-width: 10; }
.dr-fg { fill: none; stroke: #E51B00; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .7, .2, 1); }
.dr-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.dr-txt b { font-family: Fraunces, "Noto Serif Tamil", "Noto Serif Devanagari", serif; font-size: 3.2rem; font-weight: 600; }
.dr-txt small { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.dash-pct { font-weight: 700; color: var(--muted); margin: 12px 0 0; }
.dash-hero .trk-hero-txt { display: grid; justify-items: center; }
.btn.dash-add { width: 100%; min-height: 56px; justify-content: center; font-size: 1.1rem; background: #1f8f4e; color: #fff; border: 0; cursor: pointer; margin: 0 0 14px; }
.btn.dash-add span { font-size: 1.4rem; line-height: 1; }
.dash-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
@media (min-width: 760px) { .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dash-tile { display: grid; gap: 4px; align-content: start; text-align: left; min-height: 132px; padding: 14px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--white); color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--shadow); min-width: 0; transition: transform .15s, box-shadow .15s; }
.dash-tile:hover { transform: translateY(-2px); }
.dash-tile:focus-visible { outline: 3px solid #1f8f4e; outline-offset: 2px; }
.dt-ico { font-size: 1.6rem; line-height: 1; }
.dt-h { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
:lang(ta) .dt-h, :lang(hi) .dt-h { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.dt-v { font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dt-s { font-size: .82rem; color: var(--muted); }
.dash-tile.dt-ok { border-color: var(--mint); } .dash-tile.dt-ok .dt-s { color: #1f7a55; font-weight: 700; }
.dash-tile.dt-low, .dash-tile.dt-high { border-color: #f3b79c; } .dash-tile.dt-low .dt-s, .dash-tile.dt-high .dt-s { color: #b3261e; font-weight: 700; }
/* full-screen panels */
.dash-panel[hidden] { display: none !important; }
.dash .dash-panel { position: fixed; inset: 0; z-index: 85; margin: 0; border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 max(18px, calc((100vw - 760px) / 2)) 40px; background: var(--white); border: 0; opacity: 1; transform: none; animation: dashIn .28s cubic-bezier(.2, .7, .2, 1); }
.dash-bar { position: sticky; top: 0; z-index: 2; margin: 0 -18px 14px; padding: 10px 18px; background: var(--white); border-bottom: 1px solid var(--line); }
.dash-back { font: inherit; font-weight: 700; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); cursor: pointer; }
html.dash-open { overflow: hidden; }
html.dash-open .wa-float, html.dash-open .pn-chat { display: none; }
.wt-heart { z-index: 95; }
@keyframes dashIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dash .dash-panel { animation: none; } .dr-fg { transition: none; } }
@media (max-width: 380px) { .dash-ring { width: 128px; } .dr-txt b { font-size: 2.6rem; } .dash-tile { padding: 12px; min-height: 120px; } }
@media (max-width: 520px) { .dash-top { flex-wrap: nowrap; gap: 14px; } .dash-ring { width: 118px; } .dr-txt b { font-size: 2.5rem; } .dash-hero .trk-hero-img { width: 140px; } }
@media (max-width: 380px) { .dash-top { gap: 10px; } .dash-ring { width: 100px; } .dr-txt b { font-size: 2.2rem; } .dash-hero .trk-hero-img { width: 118px; } }

/* Dashboard animations (only with motion, html.pn-motion; transform/opacity only; clickable boxes never keep moving). */
.dr-fg { stroke: url(#dr-grad); }
.dr-dotg { transform-origin: 60px 60px; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.dr-dot { fill: #fff; stroke: #E51B00; stroke-width: 3; }
.pn-motion .dr-dot { animation: drDot 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dash-hero { position: relative; overflow: hidden; isolation: isolate; }
.dash-bub { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.dash-bub span { position: absolute; left: var(--x); bottom: -30px; font-size: 18px; opacity: 0; animation: dashBub var(--t, 8s) var(--d, 0s) ease-in infinite; }
.pn-motion .dash-tiles.dash-in .dash-tile { animation: dtIn .6s calc(.25s + var(--i, 0) * 80ms) cubic-bezier(.2, .8, .3, 1.25) both; }
.dash-tile:active { transform: scale(.97); }
.pn-motion .dt-ico { display: inline-block; animation: dtWiggle 5s calc(1.5s + var(--i, 0) * .6s) ease-in-out infinite; transform-origin: 50% 80%; }
.pn-motion .dash-tile[data-open="p-checks"] .dt-ico { animation-name: dtBeat; }
.pn-motion .dash-tile[data-open="p-week"] .dt-ico { animation-name: dtBob; }
.btn.dash-add { position: relative; overflow: hidden; isolation: isolate; }
.pn-motion .btn.dash-add::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); animation: dashShine 3.6s 1.2s ease-in-out infinite; }
.pn-motion .btn.dash-add > span { display: inline-block; animation: dtBeat 2.4s 2s ease-in-out infinite; }
@keyframes drDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes dashBub { 0% { opacity: 0; transform: translateY(0) scale(.7); } 15% { opacity: .55; } 80% { opacity: .35; } 100% { opacity: 0; transform: translateY(-340px) scale(1.15) rotate(25deg); } }
@keyframes dtIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes dtWiggle { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(-12deg); } 92% { transform: rotate(10deg); } 96% { transform: rotate(-5deg); } }
@keyframes dtBeat { 0%, 80%, 100% { transform: scale(1); } 86% { transform: scale(1.25); } 92% { transform: scale(1.05); } }
@keyframes dtBob { 0%, 80%, 100% { transform: translateY(0); } 87% { transform: translateY(-5px); } 94% { transform: translateY(1px); } }
@keyframes dashShine { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(520%); } }

/* Accounts: header link, login and sign-up. The link is not a direct child of nav,
   so the six main menu items stay as they are. */
.pn-auth { display: inline-flex; align-items: center; gap: 4px; flex: none; min-width: 0; margin-left: 8px; }
.pn-account { text-decoration: none; font-weight: 700; font-size: .88rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.pn-account[aria-current="page"] { border-color: var(--ink); }
button.pn-logout { font: inherit; font-weight: 700; font-size: .82rem; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; }
button.pn-logout:hover { color: var(--ink); }
.bar:has(> .pn-auth) { height: auto; min-height: 76px; }
.auth-card { max-width: 460px; margin: 0 auto 48px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 26px 32px; }
.auth-form, .auth-delete form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label, .auth-delete label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .92rem; }
.auth-form input, .auth-delete input { font: inherit; font-weight: 500; padding: 12px 14px; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); color: var(--ink); width: 100%; }
.auth-form input:focus, .auth-delete input:focus { outline: 2px solid var(--peach); border-color: transparent; }
.auth-card .btn, .auth-delete .btn { width: 100%; cursor: pointer; font: inherit; font-weight: 700; border: 0; }
.auth-err { color: #9d2c2c; min-height: 1.4em; margin: 0; font-weight: 700; }
.auth-note, .auth-switch { color: var(--muted); font-size: .95rem; }
.auth-switch a { font-weight: 700; }
.auth-delete { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.auth-delete summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.auth-field-err { color: #9d2c2c; font-weight: 700; font-size: .82rem; }
.auth-field-err:empty { display: none; }
.auth-form input[aria-invalid="true"] { border-color: #9d2c2c; }
.auth-facts { list-style: none; padding: 0; margin: 8px 0 16px; }
.auth-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.auth-facts span { color: var(--muted); font-weight: 700; }
.auth-section { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.auth-section h2 { font-size: 1.15rem; margin: 0 0 8px; }
.auth-list { list-style: none; padding: 0; margin: 0 0 12px; }
.auth-list li { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; min-width: 0; }
.auth-list li > a, .auth-list li > button { align-self: flex-start; }
.auth-list li > a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.auth-list-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.auth-list-top b { overflow-wrap: anywhere; }
.auth-list-meta { color: var(--muted); font-size: .88rem; }
.auth-badge { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--cream); color: var(--ink); border: 1px solid var(--line); }
.auth-card .auth-others.btn.ghost { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.auth-list button.auth-resend { padding-left: 0; }
.trk-sync { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 8px 0 0; }
.trk-sync .trk-sync-btn { border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-weight: 700; max-width: 100%; white-space: normal; }
.trk-sync .trk-note:empty { display: none; }
#google-slot { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; max-width: 100%; overflow: hidden; }
#google-slot[hidden] { display: none; }
#google-btn { display: flex; justify-content: center; width: 100%; max-width: 100%; overflow: hidden; }
#google-btn:empty { display: none; }
#google-btn iframe { max-width: 100%; }
#google-signin[hidden] { display: none !important; }
.auth-card #google-signin.btn.ghost { width: 100%; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; color: var(--muted); font-size: .85rem; font-weight: 700; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-stay { flex-direction: row !important; align-items: center; gap: 10px; font-weight: 600; }
.auth-stay input { width: 22px; min-width: 22px; height: 22px; min-height: 22px; padding: 0; accent-color: var(--peach, #e8a87c); }
.auth-optional { font-weight: 600; color: var(--muted); }
.auth-otp { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.auth-card .auth-otp .btn.ghost { width: 100%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: .92rem; padding: 12px 18px; }
.auth-card .auth-otp .btn.ghost:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.auth-otp-panel { display: flex; flex-direction: column; gap: 12px; }
.auth-otp-panel[hidden] { display: none; }
.auth-otp-panel label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .92rem; }
.auth-otp-panel input { font: inherit; font-weight: 500; padding: 12px 14px; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); color: var(--ink); width: 100%; letter-spacing: .18em; }
.auth-otp-panel input:focus { outline: 2px solid var(--peach); border-color: transparent; }
button.auth-resend, button.auth-skip-btn { min-height: 44px; min-width: 44px; padding: 8px 14px; background: transparent; border: 0; border-radius: 999px; color: var(--ink); font: inherit; font-size: .85rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.auth-resend { align-self: center; }
button.auth-resend:disabled { opacity: .55; cursor: not-allowed; }
.auth-skip { display: flex; justify-content: center; margin: 2px 0 0; }
button.auth-skip-btn:focus-visible, button.auth-resend:focus-visible, #otp-request:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
#otp-hint[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-err, :root:not([data-theme="light"]) .auth-field-err { color: #ffb4ab; }
}
@media (max-width: 760px) {
  .bar:has(> .pn-auth) { flex-wrap: wrap; row-gap: 6px; }
  .pn-auth { margin-left: auto; }
  .pn-account { max-width: 7rem; }
}
@media (max-width: 430px) {
  .bar:has(> .pn-auth) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand auth menu" "lang lang lang";
  }
  .bar > .pn-auth { grid-area: auth; justify-self: end; margin: 0 6px 0 0; }
  .pn-account { max-width: 5.6rem; padding: 6px 8px; font-size: .78rem; }
}
@media (min-width: 431px) and (max-width: 560px) {
  .bar:has(> .lang-switch):has(> .pn-auth) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand auth menu" "lang lang lang";
  }
  .bar:has(> .lang-switch) > .pn-auth { grid-area: auth; justify-self: end; margin: 0 6px 0 0; }
}