/* jyotisoft.com home (deploy/jyotisoft/page_home.py, design «home V2», 2026-10-24/25).
   Layered on site.css: the hero keeps .hero--ask (daylight photo, light inks in every theme). */

/* ── offers strip between the header and the page ───────────────────── */
.offers { background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: .92rem; }
.offers__in { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; }
.offers__view { flex: 1; min-width: 0; overflow: hidden; }
.offers__list { margin: 0; padding: 0; list-style: none; }
.offers a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.offers a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.offers a b { color: var(--accent-ink); font-weight: 650; white-space: nowrap; } /* a price and its sign never part, at any width */
.offers__pause { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; min-height: 2rem; padding: 0; font: inherit; font-size: .65rem; line-height: 1; color: var(--ink-2); background: transparent; border: 1px solid var(--line-strong); border-radius: 50%; cursor: pointer; }
/* owner 2026-10-28: no visible pause button — the strip pauses on hover, on focus inside it and on a
   tap (home-v2.js); the button stays for keyboard and screen readers (WCAG 2.2.2) and appears only
   while it has keyboard focus */
.offers__pause:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* what ⭐ means, standing still at the end of the strip */
.offers__legend { flex: none; padding-left: .75rem; border-left: 1px solid var(--line); color: var(--ink-2); font-size: .85rem; white-space: nowrap; }
@media (max-width: 480px) { .offers__legend { font-size: .78rem; } }
.offers__pause:hover { color: var(--ink); background: var(--surface); }
/* the orange ring only for keyboard focus, round like the button */
.offers__pause:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 50%; }
/* A: continuous marquee; home-v2.js doubles the list so -50% loops seamlessly */
/* wide soft edges (owner 2026-10-28): a word leaving or entering fades out instead of being cut */
.offers[data-mode="a"] .offers__view { mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3.5rem), transparent); }
.offers[data-mode="a"] .offers__list { display: flex; width: max-content; animation: offers-run var(--dur, 60s) linear infinite; }
.offers[data-mode="a"] li { position: relative; padding-inline: 1.1rem; }
.offers[data-mode="a"] li::after { content: "•"; position: absolute; right: -.2rem; top: 50%; transform: translateY(-50%); font-size: .9em; color: var(--accent-ink); opacity: .55; }
.offers__view:hover .offers__list, .offers__list:focus-within, .offers.is-paused .offers__list { animation-play-state: paused; }
@keyframes offers-run { to { transform: translateX(-50%); } }
/* B: one offer at a time, soft cross-fade */
.offers[data-mode="b"] .offers__list { display: grid; justify-items: center; }
.offers[data-mode="b"] li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; }
.offers[data-mode="b"] li.is-on { opacity: 1; visibility: visible; transition: opacity .9s ease; }
@media (max-width: 640px) {
  .offers[data-mode="b"] a { white-space: normal; text-align: center; justify-content: center; flex-wrap: wrap; column-gap: .35rem; row-gap: 0; line-height: 1.25; padding-block: .3rem; }
}
/* no motion: both modes become a still row you can swipe */
@media (prefers-reduced-motion: reduce) {
  .offers__pause { display: none; }
  .offers[data-mode] .offers__view { overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); }
  .offers[data-mode] .offers__list { display: flex; width: max-content; animation: none; }
  .offers[data-mode] li { opacity: 1; visibility: visible; grid-area: auto; padding-inline: 0 1.4rem; }
  .offers[data-mode="a"] li::after { display: none; }
}

/* the hero photo starts behind the ticker (owner 2026-10-27): the strip is a frosted band over the
   picture's top; the hero moves up by the strip's height and pads its content back down, and the
   phone/tablet photo grows by the same height so its bottom stays where it was */
.offers { --offers-fill: 74%; position: relative; z-index: 2; background: color-mix(in srgb, var(--surface-2) var(--offers-fill), transparent); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); }
/* dark band: denser, so light ticker text over a daylight photo keeps AA contrast */
:root[data-theme="dark"] .offers { --offers-fill: 88%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .offers { --offers-fill: 88%; } }
.offers + main > .hero--v2:first-child { --offers-h: 2.8125rem; margin-top: calc(-1 * var(--offers-h)); padding-top: var(--offers-h); }
@media (max-width: 800px) { .offers + main > .hero--v2:first-child { --hero-h: calc(540px + var(--offers-h)); --hero-size: auto calc(540px + var(--offers-h)); } }
/* phone: the photo band is the 16:9 photo at full width (219px at 390, was 345px) and the text starts on its
   faded bottom, so the first button is on the first screen (1691 review #2, 2026-10-28: at 390x844 it sat
   at 789-842px, at 360x740 below the fold) */
/* the text sits under the photo there, so the desktop left wash and the flat veil only bleached the picture's
   left half into a blank block (owner 522px shot, 2026-10-31): keep just the fade into the page at its bottom */
@media (max-width: 560px) { .offers + main > .hero--v2:first-child { --hero-h: 56.25vw; --hero-size: 100% auto; --hero-pos: center top; --hero-bg: linear-gradient(180deg, rgba(243, 248, 252, 0) 72%, #f3f8fc 100%) top / 100% var(--hero-h) no-repeat, var(--hero-photo) var(--hero-pos) / var(--hero-size) no-repeat #f3f8fc; } }

/* ── hero: one free first step, then the right column (A day / B chart / now) ── */
/* the sale ribbon opens the hero as on the previous home (.hero--ask: padding-top 0) */
.hero--v2 .wrap { padding-top: clamp(1.5rem, 1rem + 2.2vw, 3rem); }
.hero--v2 .wrap { align-items: start; }
@media (max-width: 560px) { .hero--v2 .wrap { padding-top: calc(50vw - var(--offers-h, 0px)); } }
.hero--v2 .actions { margin-top: .25rem; }
.hero--v2 .actions .button-solid { min-height: 3.3rem; padding-inline: 1.9rem; font-size: 1.05rem; }
.hero-note { margin: .75rem 0 0; color: var(--ink-2); }
.hero-trust { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--ink-2); }
.hero-trust li { display: inline-flex; align-items: center; gap: .4rem; }
.hero-trust li::before { content: "✓"; color: var(--t-best, #00a95c); font-weight: 700; }
.hero--v2 .ask-label { margin: 1.4rem 0 .5rem; }
.hero--v2 .ask-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 860px) {
  .hero--v2 .ask-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1.25rem; padding-inline: 1.25rem; }
}
.hero-alt { display: grid; min-width: 0; }
.hero-alt > [data-alt] { display: none; }
.hero-alt[data-alt="a"] > [data-alt="a"], .hero-alt[data-alt="b"] > [data-alt="b"], .hero-alt[data-alt="now"] > [data-alt="now"] { display: flex; }
.hday__t, .hchart__t { margin: 0; font: 600 clamp(24px, 2.4vw, 30px)/1.15 var(--serif); }

/* A: «Your day today» on the navy answer shell */
.hday__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; }
.hday__date { margin: 0; font-size: 14px; color: var(--on-navy-2); }
.hday__date::first-letter { text-transform: uppercase; }
.hday__form { display: grid; grid-template-columns: minmax(0, 1fr) min-content; gap: 10px 12px; align-items: end; }
/* the date (text + 2.9rem calendar button) needs ~150px: the time field keeps its own width and the date
   takes the rest; on a narrower phone the two stack instead of clipping «15.09.199» (live 270, 390px) */
@media (max-width: 379px) { .hday__form { grid-template-columns: minmax(0, 1fr); } }
.hday__f { display: grid; gap: 5px; font-size: 13px; color: var(--on-navy-2); min-width: 0; }
.hday__f i { font-style: normal; opacity: .8; }
.hday__f--wide, .hday__go, .hday__err { grid-column: 1 / -1; }
.hday input { color-scheme: dark; box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--on-navy); background: rgba(255, 255, 255, .07); border: 1px solid color-mix(in srgb, var(--on-navy) 28%, transparent); border-radius: 12px; }
/* the kit's time field in the navy card looks like the date field beside it (owner 2026-10-28: «HH:MM had
   no box»); its hh/mm cells stay bare inside the box, the colon in the card's light ink */
.hday .ctl-time { box-sizing: border-box; min-height: 44px; padding: 0 12px; color: var(--on-navy); background: rgba(255, 255, 255, .07); border: 1px solid color-mix(in srgb, var(--on-navy) 28%, transparent); border-radius: 12px; }
.hday .ctl-time input.ctl-time__f { min-height: 0; padding: 4px 2px; color: inherit; background: transparent; border: 0; border-radius: 6px; }
.hday .ctl-time__sep { color: var(--on-navy-2); }
/* the rows appear with the result: before it they were three «—» (owner 2026-10-28) */
.hday:not(.is-done) .hday__dl { display: none; }
/* ⓘ: one plain line on hover, keyboard focus or tap (home-v2.js), anchored to the row name so it stays
   inside the card on a phone; 44px hit area around a small mark */
.hday__dl dt { position: relative; }
.tip { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin: -.75rem -.5rem -.75rem .1rem; padding: .75rem; box-sizing: content-box; font: inherit; font-size: .8rem; line-height: 1; color: var(--on-navy-2); background: none; border: 0; cursor: help; }
.tip:focus-visible { outline: 2px solid var(--orange); outline-offset: -.5rem; border-radius: 50%; }
.tip::after { content: attr(data-tip); position: absolute; z-index: 5; left: 0; bottom: calc(100% + .5rem); width: max-content; max-width: min(19rem, calc(100vw - 4rem)); padding: .55rem .75rem; border-radius: 10px; background: #fff; color: #080b26; box-shadow: 0 8px 24px rgba(8, 11, 38, .25); font: 400 13.5px/1.4 var(--sans, system-ui); text-align: left; white-space: normal; opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
.tip:hover::after, .tip:focus-visible::after, .tip[aria-expanded="true"]::after { opacity: 1; visibility: visible; }
.hday__err { margin: 0; font-size: 13.5px; color: #ffb4a8; }
.hday__err:empty { display: none; }
.hday.is-done .hday__go { display: none; }
.hday:not(.is-done) .hday__cta { display: none; }
.hday__dl { margin: 0; display: grid; border-top: 1px solid var(--awin-line); }
.hday__dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--awin-line); }
.hday__dl dt { font: 650 13.5px/1.3 var(--sans); color: var(--orange-2); }
.hday__dl dd { margin: 0; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.hday__dl b { font-weight: 650; }
.hday__dl > div[data-q] dd::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: color-mix(in srgb, var(--on-navy) 30%, transparent); vertical-align: 1px; }
.hday__dl > div[data-q="good"] dd::before { background: var(--t-good); box-shadow: 0 0 8px var(--t-good); }
.hday__dl > div[data-q="bad"] dd::before { background: var(--t-bad); box-shadow: 0 0 8px var(--t-bad); }
.hday__dl > div[data-q="caution"] dd::before { background: #f4cd55; box-shadow: 0 0 8px #f4cd55; }
.hday__advice { margin: 0; font: 500 18px/1.4 var(--serif); }
.hday__moon { margin: 0; color: var(--on-navy-2); }
.hday__cta, .hchart > .button { align-self: flex-start; }
/* city search: the same /api/v1/geocode as the free calculators */
.hday__place { position: relative; }
.hday__place > label { font-size: 13px; color: var(--on-navy-2); }
.hday__place input[type="search"]::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.hday__opts { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% - 2px); margin: 0; padding: 4px; list-style: none; background: var(--navy-2); border: 1px solid color-mix(in srgb, var(--on-navy) 28%, transparent); border-radius: 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.hday__opts[hidden] { display: none; }
.hday__opts button { display: grid; gap: 1px; width: 100%; min-height: 44px; padding: 6px 10px; text-align: left; font: inherit; color: var(--on-navy); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.hday__opts button:hover, .hday__opts button:focus-visible { background: rgba(255, 255, 255, .09); outline: none; }
.hday__opts b { font-size: 15px; font-weight: 600; }
.hday__opts span { font-size: 12.5px; color: var(--on-navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hday__opts span:empty { display: none; }
.hday__place:has(.hday__opts:not([hidden])) .hday__geo { visibility: hidden; }
.hday__geo { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; font: 600 13.5px var(--sans); color: var(--orange-2); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hday__geo::before { content: ""; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 138, 92, .18); }
.hday__status { grid-column: 1 / -1; margin: -4px 0 0; font-size: 13px; color: var(--on-navy-2); }
.hday__status:empty { display: none; }

/* B: «What is inside your chart» — the North Indian chart of the PDF */
.hchart__svg { display: block; width: min(100%, 320px); height: auto; margin: 2px auto 0; overflow: visible; }
.hc-frame { fill: rgba(255, 255, 255, .04); stroke: color-mix(in srgb, var(--on-navy) 45%, transparent); stroke-width: 1.5; }
.hc-line { fill: none; stroke: color-mix(in srgb, var(--on-navy) 45%, transparent); stroke-width: 1.5; }
.hc-num { font: 600 15px var(--sans); fill: var(--orange-2); text-anchor: middle; opacity: .85; }
.hc-pl { font: 600 21px var(--sans); fill: var(--on-navy); text-anchor: middle; }
.hc-pl.hc-asc { font-size: 15px; fill: var(--on-navy-2); letter-spacing: .04em; }
.hc-hi { fill: #f4cd55; }
.hc-mark circle { fill: var(--orange); filter: drop-shadow(0 0 6px rgba(253, 90, 1, .6)); }
.hc-mark text { font: 700 14px var(--sans); fill: var(--navy); text-anchor: middle; }
.hchart__notes { counter-reset: hc; margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.hchart__notes li { counter-increment: hc; position: relative; padding-left: 36px; font-size: 14.5px; line-height: 1.45; color: var(--on-navy-2); }
.hchart__notes li::before { content: counter(hc); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: var(--navy); font: 700 13px/1 var(--sans); }
.hchart__k { display: block; font: 650 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--orange-2); }
.hchart__notes b { display: block; margin: 1px 0 2px; font-size: 15.5px; color: var(--on-navy); }

/* ── «free, always» and «what people come with» ─────────────────────── */
.free-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.free-grid .card { gap: .5rem; padding: 1.3rem 1.4rem; border: 1px solid var(--line); background: var(--bg); }
.free-grid a.card { color: inherit; text-decoration: none; }
.free-grid a.card:hover h3 { color: var(--accent-ink); }
.free-grid .card h3 { font-size: 1.12rem; }
.free-grid .card .ico { font-size: 1.5rem; line-height: 1; }
.free-grid .card p { margin: 0; font-size: .95rem; }
@media (max-width: 960px) { .free-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .free-grid { grid-template-columns: 1fr; } }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.area { gap: .55rem; color: inherit; text-decoration: none; }
.area:hover h3 { color: var(--accent-ink); }
.area .area__q { margin: 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
.area .area__p { margin: 0; font-size: .95rem; }
.area .area__meta { margin-top: auto; padding-top: .5rem; font-size: .88rem; color: var(--accent-ink); font-weight: 600; }
@media (max-width: 960px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .areas { grid-template-columns: 1fr; } }

/* ── daylight photo bands (owner: daylight in every theme) ─────────────
   The photo never darkens; text sits on a light panel with the hero's light inks. */
.photo-band { position: relative; isolation: isolate; overflow: hidden; view-timeline: --band; padding-block: clamp(9rem, 22vw, 14rem) clamp(3rem, 7vw, 6rem); }
.photo-band__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.photo-band__bg img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.photo-band__bg::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, var(--bg) 0%, transparent 10%, transparent 88%, var(--bg) 100%); }
.photo-band__panel {
  --ink: #13233b; --ink-2: #4b5d70; --surface: #ffffff; --surface-2: #eef2f7;
  --line: rgba(19, 35, 59, .12); --line-strong: rgba(19, 35, 59, .32); --accent-ink: #c2410c;
  --shadow: 0 1px 2px rgba(19, 35, 59, .06), 0 8px 24px rgba(19, 35, 59, .06);
  color: var(--ink); color-scheme: light; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; padding: clamp(1.4rem, 4vw, 2.75rem);
  box-shadow: 0 18px 50px rgba(19, 35, 59, .16);
}
.photo-band__panel > :first-child, .photo-band__panel > .wrap > :first-child { margin-top: 0; }
.photo-band__panel > section, .photo-band__panel .wrap { padding: 0; width: auto; }
.photo-band #how ol.steps li, .photo-band ol.steps li { background: rgba(255, 255, 255, .82); }
.photo-band--final { padding-block: clamp(10rem, 24vw, 16rem) clamp(2.5rem, 6vw, 5rem); }
.photo-band--final .photo-band__bg img { object-position: center center; }
/* gentle parallax, CSS only; off under reduced motion and where scroll timelines are missing */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .photo-band__bg img { animation: band-drift linear both; animation-timeline: --band; animation-range: cover; }
  }
}
@keyframes band-drift { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
/* phones: the photo is a strip above the panel, not stretched behind a tall panel */
@media (max-width: 760px) {
  .photo-band { padding-block: 0 clamp(2.5rem, 7vw, 4rem); }
  .photo-band__bg { bottom: auto; height: 78vw; }
  .photo-band__bg::after { background: linear-gradient(180deg, var(--bg) 0%, transparent 14%, transparent 62%, var(--bg) 100%); }
  .photo-band > .wrap { padding-top: 46vw; }
  .photo-band--final > .wrap { padding-top: 52vw; }
  .photo-band--final .photo-band__bg img { object-position: 75% center; }
}