/* Home v3, today's sky and the sky of your birth (templates/home_v3.html; owner, 23 Oct 2026). On top of home.css and
   home-v2.css, with the shared tokens (tokens.css). One section lists every tool and service once. Text never moves. */
.v3-skies { padding: clamp(44px, 5.5vw, 64px) 0; background: linear-gradient(180deg, #FFFAF4 0%, #FFF4EA 100%); }
.v3-skies h2 { font-family: var(--v2-serif); font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.2;
  color: var(--oa-ink); max-width: 40ch; margin: 0; }
.v3-group { font-family: var(--v2-serif); font-weight: 600; font-size: 1.35rem; color: var(--oa-ink); margin: 28px 0 12px; }
.v3-group span { font-family: var(--oa-sans); font-weight: 400; font-size: .98rem; color: var(--v2-text); }
/* compact cards: icon, name, one line, link */
.v3-row { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v3-row.v3-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3c { position: relative; display: flex; flex-direction: column; padding: 14px 16px 14px 68px;
  border-radius: 16px; background: var(--pc); border: 1px solid var(--oa-card-line); box-shadow: 0 6px 18px rgba(70, 45, 100, .08);
  color: var(--v2-text); text-decoration: none; }
.v3c:hover, .v3c:focus-visible { box-shadow: 0 12px 28px rgba(70, 45, 100, .16); }
.v3c-ico { position: absolute; left: 16px; top: 15px; width: 40px; height: 40px; }
.v3c-ico svg { width: 100%; height: 100%; display: block; }
.v3c b { font-weight: 700; color: var(--oa-ink); font-size: 1.02rem; line-height: 1.3; }
.v3c small { font-size: .9rem; line-height: 1.45; margin-top: 2px; }
.v3c small.v3c-note { font-size: .76rem; opacity: .72; }      /* the consultation footnote */
.v3c-go { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: .88rem; color: #8C2F39; }   /* the link at the foot */
.v3-final-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.v3-btn-ghost { background: rgba(255, 255, 255, .7); color: var(--oa-ink); border: 1px solid rgba(31, 42, 90, .2); }
@media (max-width: 980px) { .v3-row, .v3-row.v3-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {          /* phones: each group is one swipe row */
  .v3-row, .v3-row.v3-four { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 2px 12px;
                             scrollbar-width: none; }
  .v3-row::-webkit-scrollbar { display: none; }
  .v3c { flex: 0 0 78%; scroll-snap-align: start; align-self: flex-start; }   /* each card its own height */
  /* the six reasons too: one swipe row, so the page stays short (owner, 23 Oct 2026: never longer than v2) */
  .v2-reasons { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 2px 14px;
                scrollbar-width: none; }
  .v2-reasons::-webkit-scrollbar { display: none; }
  .v2-reasons article { flex: 0 0 82%; scroll-snap-align: center; }
}

/* Hindi kickers: no letter-spacing (it pulls the Devanagari letters and their matras apart) */
html[lang="hi"] .h-kicker { letter-spacing: 0; text-transform: none; font-size: .86rem; }   /* this file: home v3 only */

/* The hero sky on home (OA_SKY_HEROES; static/css/hero-sky.css; owner, 24 Oct 2026). The kundli card sits on the
   disc, so the disc shows its grahas as dots (a name would hide behind the card). The sky's caption and ask card sit
   under the kundli, the ask as one row (pin, "See the sky over your city", "Not now") until a tap, so the hero is
   never taller than without the sky. */
.h-hero-sky .hs-pl text { display: none; }
.h-hero-sky .h-sky-chart { width: min(380px, 82vw); }        /* room for the caption and the ask row */
.h-hero-sky .h-sky figcaption { margin-top: 12px; }
.h-sky .hs-cap { margin: 10px auto 0; max-width: 46ch; }
.h-sky .hs-ask { align-items: center; gap: 8px; margin: 12px auto 0; padding: 6px 8px; border-left-width: 3px;
  width: fit-content; max-width: 100%; text-align: left; }
.h-sky .hs-ask-pin { width: 20px; height: 20px; margin: 0; }
.h-sky .hs-ask-h, .h-sky .hs-ask-p, .h-sky .hs-ask-wide, .h-sky .hs-ask:not(.hs-asked) .hs-ask-city,
.h-sky .hs-ask:not(.hs-asked) .hs-ask-small { display: none; }
.h-sky .hs-ask-short { display: inline; }
.h-sky .hs-ask-btns { gap: 4px 6px; }
.h-sky .hs-ask-btns button { padding: 8px 12px; font-size: .9rem; }
.h-sky .hs-ask-btns .hs-ask-no { padding: 8px 4px; }


/* A331 #1 "आज आपके लिए" (OA_TODAY_FOR_YOU): the signed-in member's own day, right under the hero (oa/today_page).
   Its lines are the rashifal block's own; the colours and the thin polarity bar are /rashifal/'s, scoped here. */
.tfy-sec { padding: 36px 0 20px; background: #fbf6ea; }
.tfy { --good: #2f6b4f; --mix: #8a6d2b; --care: #9a4426; border-left: 3px solid var(--gold); padding-left: 18px; }
.tfy .pol-good { --pc: var(--good); } .tfy .pol-neutral { --pc: var(--mix); } .tfy .pol-care { --pc: var(--care); }
.tfy .pol-fact { --pc: #696358; }
.tfy-hello { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 4px 0 6px;
             color: var(--ink); }
.tfy .rf-line { margin: 10px 0 4px; line-height: 1.65; color: #2c2b31; border-left: 3px solid var(--pc);
                padding-left: 10px; }
.tfy .rf-line .pol-care { color: #7a3a22; }
.tfy .rf-h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 18px 0 6px; color: var(--ink); }
.tfy .rf-chips { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tfy .rf-chips li { font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: #f3ede1; color: #4d4a44; }
.tfy .rf-tap { display: inline-block; padding: 10px 0; }