/* Homepage chapters, header actions and hero details. Scoped to #landing; loaded after mobile-navigation.css. */

/* Header: one flex row on desktop so nav, language, Sign in and Start free never collide. */
@media(min-width:901px){
 #landing .observatory-header{justify-content:flex-end;gap:22px;padding-right:2.7vw}
 #landing .observatory-header nav{position:static;transform:none;margin-left:auto;left:auto;right:auto;top:auto;gap:26px}
 #landing .home-language-control{position:static}
 #landing .header-signin{margin-left:0;white-space:nowrap}
 #landing .observatory-header .header-start{min-height:44px;padding:9px 18px;gap:10px;font:600 16px var(--serif);border-radius:8px;white-space:nowrap;background:linear-gradient(135deg,#e2c267,#b8912f);border-color:#e0bd55;color:#16110a;box-shadow:none}
 #landing .observatory-header .header-start:hover{background:linear-gradient(135deg,#ecd07a,#c69d38);color:#0d0a05}
}
@media(min-width:901px) and (max-width:1100px){
 #landing .header-start{display:none}
 #landing .observatory-header nav{gap:16px}
}
@media(max-width:900px){
 #landing .header-start{display:none}
 #landing .observatory-header .header-signin{display:inline-flex;align-items:center;position:absolute;top:4px;right:72px;bottom:auto;min-height:44px;min-width:44px;padding:8px 6px;font:500 15px var(--serif);border-bottom:1px solid #c9a22766;white-space:nowrap}
}
@media(max-width:360px){
 #landing .observatory-header .header-signin{right:66px;font-size:14px;padding:8px 2px}
 #landing .observatory-header .header-signin span{display:none}
}
#landing [hidden]{display:none!important}

/* Second skip link sits below the first so both stay readable when focused. */
#landing .home-skip:focus{top:15px}
#landing .home-skip:focus+.sky-skip:focus{top:70px}
#landing main:focus{outline:none}

/* Hero details. */
#landing .hero-value{max-width:540px;margin:-8px 0 20px;font:400 19px/1.55 var(--serif);color:#d9d4c4}
#landing .hero-trust{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;padding:0;list-style:none;pointer-events:auto}
#landing .hero-trust li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;white-space:nowrap;border:1px solid #b4995c44;border-radius:999px;background:#0b0e12b3;color:#d8d2c0;font-size:12px;line-height:1.4}
#landing .hero-trust li:before{content:'';width:5px;height:5px;border-radius:50%;background:#c9a227}
#landing .hero-launch{margin:12px 0 0;color:#cdb67a;font:12px/1.5 var(--mono);letter-spacing:.6px}
#landing .hero-launch+.launch-availability{margin-top:4px}
#landing .hero-links{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin:4px 22px 0 0;vertical-align:middle;pointer-events:auto}
#landing .hero-sample-link,#landing .hero-motion{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:#e6d29a;font:500 13px var(--font);text-decoration:underline;text-decoration-color:#c9a22766;text-underline-offset:4px;cursor:pointer}
#landing .hero-motion{color:#bdbcb2;text-decoration:none}
#landing .hero-motion:before{content:'';width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
#landing .hero-motion[data-state=paused]:before{width:0;height:0;border:5px solid transparent;border-left:8px solid currentColor;border-right:0}
#landing .hero-sample-link:hover,#landing .hero-motion:hover{color:#f0d88e}
#landing .sky-intro .home-install{display:inline-flex;vertical-align:middle;margin-top:4px}
@media(min-width:901px){
 /* The added hero details make the opening chapter grow instead of sliding under the rashi ribbon. */
 #landing .sky-opening{height:auto;min-height:max(930px,100svh);align-items:flex-start;padding-top:150px}
 #landing .sky-intro h1{margin-bottom:18px}
 #landing .sky-intro .intro-actions{margin-top:2px}
}
@media(max-width:900px){
 #landing .hero-value{font-size:18px;margin-top:-4px}
}

/* Shared chapter frame. */
#landing .home-today,#landing .home-chapter{position:relative;z-index:3;box-sizing:border-box;width:min(1180px,calc(100% - 2*7vw));margin:0 auto 110px;color:#e8e4d8}
#landing .home-chapter-head{max-width:680px;margin-bottom:34px}
#landing .home-chapter-head h2,#landing .home-today h2{margin:0 0 14px;font:400 clamp(34px,3.6vw,54px)/1.12 var(--serif);letter-spacing:-.6px;color:#f1ead9}
#landing .home-chapter-head h2 em{color:#c8c6b5}
#landing .home-chapter-head>p:not(.observatory-kicker){margin:0;font-size:16px;line-height:1.75;color:#d0d1d4}
#landing .home-chapter .observatory-kicker,#landing .home-today .observatory-kicker{font-size:12px;letter-spacing:1.8px;margin-bottom:14px}
#landing .home-status{margin:0;padding:16px 0;color:#bdbcb2;font-size:14px}
#landing :is(.home-today,.home-chapter) :focus-visible{outline:2px solid #e5c77c;outline-offset:3px}

/* Today's Panchang strip. */
#landing .home-today{display:grid;grid-template-columns:minmax(210px,.8fr) 2.2fr;gap:18px 40px;align-items:start;padding:30px 34px;margin-top:40px;border:1px solid #b4995c55;border-radius:16px;background:linear-gradient(135deg,#0b0e12f0,#12100bf0)}
#landing .home-today-head h2{font-size:clamp(30px,2.8vw,40px);margin-bottom:6px}
#landing .home-today-date{margin:0;color:#cdb67a;font-size:14px}
#landing .home-today-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:0}
#landing .home-today-list:empty{display:none}
#landing .home-today-list>div{padding:12px 14px;border:1px solid #e8e4d81c;border-radius:10px;background:#0b0e12}
#landing .home-today-list dt{margin:0 0 3px;color:#bbaa7a;font:12px/1.4 var(--mono);letter-spacing:1px;text-transform:uppercase}
#landing[lang=hi] .home-today-list dt,#landing[lang=gu] .home-today-list dt{font:14px/1.5 var(--font);letter-spacing:0;text-transform:none}
#landing .home-today-list dd{margin:0;color:#efe8d6;font:500 17px/1.35 var(--serif)}
#landing .home-today-list dd small{display:block;margin-top:2px;color:#a9aba3;font:12px/1.4 var(--font)}
#landing .home-today-status{grid-column:2}
#landing .home-today-status:empty{display:none}
#landing .home-today-more{grid-column:2;justify-self:start;min-height:44px;font-size:14px;color:#e6d29a}

/* What you can explore. */
#landing .explore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:0;padding:0;list-style:none}
#landing .explore-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;height:100%;min-height:170px;padding:22px 22px 44px;border:1px solid #b4995c44;border-radius:14px;background:#0b0e12e6;color:inherit;text-align:left;font:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
#landing .explore-card:hover{border-color:#c9a227aa;background:#12100be6;transform:translateY(-2px)}
#landing .explore-glyph{display:grid;place-items:center;width:40px;height:40px;border:1px solid #c9a22766;border-radius:50%;color:#e6d29a;font-size:19px}
#landing .explore-card strong{color:#f1ead9;font:500 21px/1.25 var(--serif)}
#landing .explore-text{color:#c6c7bf;font-size:14px;line-height:1.6}
#landing .explore-go{position:absolute;right:20px;bottom:14px;color:#c9a227;font-size:18px}

/* Sample reading. */
#landing .sample-reading{display:grid;grid-template-columns:minmax(240px,340px) 1fr;grid-template-rows:auto 1fr;gap:24px 30px;align-items:start;padding:26px;border:1px solid #b4995c55;border-radius:16px;background:#0b0e12f0}
#landing .sample-reading>.home-status{grid-column:1/-1}
#landing .sample-chart{grid-row:1/3;position:relative;margin:0;padding:12px;border:1px solid #c9a22755;border-radius:12px;background:#f1e8d2}
#landing .sample-chart img{display:block;width:100%;height:auto;aspect-ratio:1}
#landing .sample-chart figcaption{position:absolute;top:18px;left:18px;padding:3px 9px;border-radius:999px;background:#c9a227;color:#05060a;font:600 12px/1.4 var(--font)}
#landing .sample-summary{display:grid;gap:20px}
#landing .sample-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 18px;margin:0}
#landing .sample-facts dt{color:#bbaa7a;font:12px/1.4 var(--mono);letter-spacing:.8px;text-transform:uppercase}
#landing[lang=hi] .sample-facts dt,#landing[lang=gu] .sample-facts dt{font:14px/1.5 var(--font);text-transform:none;letter-spacing:0}
#landing .sample-facts dd{margin:2px 0 0;color:#efe8d6;font:500 18px/1.35 var(--serif)}
#landing .sample-facts dd small{display:block;color:#a9aba3;font:12px/1.4 var(--font)}
#landing .sample-daily{grid-column:2;padding:20px 22px;border:1px solid #b4995c44;border-radius:12px;background:#12100b}
#landing .sample-daily h3{margin:0 0 8px;color:#f1ead9;font:500 22px/1.3 var(--serif)}
#landing .sample-daily-kicker{margin:0 0 8px;color:#cdb67a;font-size:13px}
#landing .sample-daily-text{margin:12px 0;color:#d0d1d4;font-size:15px;line-height:1.7}
#landing .sample-lists{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#landing .sample-lists h4{margin:6px 0;color:#e6d29a;font:600 13px/1.4 var(--font)}
#landing .sample-lists ul{margin:0;padding-left:18px;color:#c6c7bf;font-size:14px;line-height:1.6}
#landing .sample-lucky{margin:12px 0 0;color:#bdbcb2;font-size:13px}
#landing .sample-daily-kicker{margin:0 0 8px}

/* Rating dots (decorative; the label carries the value). */
#landing .home-rating{margin:0;color:var(--gold,#c9a227);font:500 14px/1.4 var(--mono,'IBM Plex Mono',monospace)}
#landing .sample-daily .day-rating{margin:4px 0 0}
#landing .sample-daily .day-rating-why{color:#d0d1d4}
#landing .rashi-card .day-rating-caption{color:#a9aba3}

/* Twelve rashis. */
#landing .rashi-today{margin-top:46px}
#landing .rashi-today h3{margin:0 0 6px;color:#f1ead9;font:400 clamp(26px,2.4vw,34px)/1.2 var(--serif)}
#landing .rashi-today-note{margin:0 0 20px;color:#bdbcb2;font-size:14px;line-height:1.6}
#landing .rashi-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:0 0 26px;padding:0;list-style:none}
#landing .rashi-card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid #e8e4d81c;border-radius:12px;background:#0b0e12e6}
#landing .rashi-card-head{display:flex;align-items:center;gap:12px}
#landing .rashi-card-glyph{font-variant-emoji:text;font-family:'Segoe UI Symbol','Noto Sans Symbols 2','Apple Symbols',var(--font);display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#c9a2271a;color:#e6d29a;font-size:20px}
#landing .rashi-card h4{margin:0;color:#f1ead9;font:500 19px/1.3 var(--serif)}
#landing .rashi-card-text{margin:0;color:#c6c7bf;font-size:14px;line-height:1.6}
#landing .rashi-card-meta{margin:0;color:#a9aba3;font-size:12px;line-height:1.5}
#landing[lang=hi] .rashi-card-meta,#landing[lang=gu] .rashi-card-meta{font-size:14px}
#landing .rashi-cards>.home-status{grid-column:1/-1}

/* Trust. */
#landing .trust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;margin:0;padding:0;list-style:none;border:1px solid #e8e4d81c;border-radius:14px;overflow:hidden;background:#e8e4d81c}
#landing .trust-grid li{display:grid;align-content:start;gap:8px;padding:22px;background:#0b0e12f0}
#landing .trust-grid strong{color:#f1ead9;font:500 20px/1.3 var(--serif)}
#landing .trust-grid span{color:#c6c7bf;font-size:14px;line-height:1.65}
#landing .trust-links{display:flex;flex-wrap:wrap;gap:4px 26px;margin:18px 0 0}
#landing .trust-links a{display:inline-flex;align-items:center;min-height:44px;color:#e6d29a;font-size:14px;text-underline-offset:4px}

/* Questions. */
#landing .faq-chapter{max-width:860px}
#landing .home-faq{margin-top:0}
#landing .home-faq summary{min-height:44px;box-sizing:border-box;display:flex;align-items:center}
#landing .home-faq summary:focus-visible{outline:2px solid #e5c77c;outline-offset:2px}

/* Language floors. */
#landing[lang=hi] :is(.hero-trust li,.home-status,.explore-text,.trust-grid span,.hero-launch,.sample-chart figcaption),#landing[lang=gu] :is(.hero-trust li,.home-status,.explore-text,.trust-grid span,.hero-launch,.sample-chart figcaption){font-size:14px;letter-spacing:0}
#landing[lang=hi] .home-chapter .observatory-kicker,#landing[lang=gu] .home-chapter .observatory-kicker,#landing[lang=hi] .home-today .observatory-kicker,#landing[lang=gu] .home-today .observatory-kicker,#landing[lang=hi] .hero-launch,#landing[lang=gu] .hero-launch,#landing[lang=hi] .circle-heading,#landing[lang=gu] .circle-heading{font:500 14px/1.6 var(--font);letter-spacing:.2px}

@media(max-width:900px){
 #landing .home-today,#landing .home-chapter{width:calc(100% - 36px);margin-bottom:80px}
 #landing .home-today{grid-template-columns:1fr;padding:22px 18px}
 #landing .home-today-status,#landing .home-today-more{grid-column:1}
 #landing .home-today-list{grid-template-columns:1fr 1fr}
 #landing .sample-reading{grid-template-columns:1fr;grid-template-rows:none;padding:16px}
 #landing .sample-chart{grid-row:auto}
 #landing .sample-daily{grid-column:auto}
 #landing .sample-chart{max-width:360px}
 #landing .trust-grid{grid-template-columns:1fr}
 #landing .rashi-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,300px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-color:#c9a22766 transparent}
 #landing .rashi-card{scroll-snap-align:start}
}
@media(max-width:340px){
 #landing .home-today-list{grid-template-columns:1fr}
}
/* The install row only takes space when the browser offers installation. */
#landing .sky-intro .home-install:not(:has(.install-entry:not([hidden]))){display:none}
@media(max-width:420px){
 #landing .sample-lists{grid-template-columns:1fr}
 #landing .explore-grid{grid-template-columns:1fr}
 /* Keep the orrery within the first screen on small phones. */
 #landing .hero-trust{gap:5px;margin-top:14px}
 #landing .hero-trust li{gap:5px;padding:3px 8px}
 #landing .hero-links{gap:0 14px;margin-right:0}
}
@media(prefers-reduced-motion:reduce){
 #landing .explore-card{transition:none}
 #landing .explore-card:hover{transform:none}
}

/* Header Tools disclosure: Kundli, Panchang and Rashifal. */
#landing .observatory-header .home-tools{position:relative;display:inline-flex}
#landing .observatory-header .home-tools>summary{display:inline-flex;align-items:center;min-height:44px;padding:11px 4px;border:0;border-radius:0;background:none;color:#c4c6bc;font:inherit;font-size:inherit;letter-spacing:.3px;cursor:pointer}
#landing .observatory-header .home-tools>summary:hover{color:#eadcb0;background:none}
#landing .observatory-header .home-tools>summary:focus-visible{outline:2px solid #e5c77c;outline-offset:2px}
#landing .observatory-header .home-tools-panel{display:flex;flex-direction:column;gap:2px}
@media(min-width:901px){
 #landing .observatory-header nav{gap:20px}
 #landing .observatory-header nav>a,#landing .observatory-header nav>button,#landing .observatory-header .home-tools>summary{font:16px var(--serif)}
 #landing .observatory-header .home-tools-panel{position:absolute;z-index:80;top:calc(100% + 6px);left:-12px;min-width:190px;padding:6px;border:1px solid #b4995c66;border-radius:10px;background:#0b0e12;box-shadow:0 16px 36px #0009}
 #landing .observatory-header .home-tools-panel a,#landing .observatory-header .home-tools-panel button{width:100%;min-height:44px;padding:10px 12px;border-radius:6px;font:15px var(--serif);text-align:left;white-space:nowrap}
 #landing .observatory-header .home-tools-panel :is(a,button):hover{background:#bc96511f}
}
@media(min-width:901px) and (max-width:1100px){
 #landing .observatory-header nav{gap:12px}
 #landing .observatory-header nav>a,#landing .observatory-header nav>button,#landing .observatory-header .home-tools>summary{font-size:14px}
}
/* In the mobile menu the tools list opens inline beneath its label. */
@media(max-width:900px){
 #landing .header-menu-ready #home-menu .home-tools{display:block}
 #landing .header-menu-ready #home-menu .home-tools>summary{width:100%;min-height:52px;padding:12px 16px;border-radius:6px;font:500 16px/1.5 var(--sans,Arial,sans-serif);color:#efe5cc;box-sizing:border-box}
 #landing .header-menu-ready #home-menu .home-tools-panel{padding-left:14px}
}

/* Language: a globe control. On phones it is a 44px icon over a transparent select. */
#landing .home-language-control .language-globe{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5}
@media(max-width:720px){
 /* Sign in stays in the brand row beside the language globe: it is the only sign-in entry on phones. */
 #landing .observatory-header .header-signin{right:124px}
 #landing .header-menu-ready .home-language-control{position:absolute;top:4px;left:auto;right:72px;width:44px;height:44px;padding:0;display:grid;place-items:center;flex-direction:row;border:1px solid #b4995c55;border-radius:8px;background:#0b0e12;color:#efe5cc}
 #landing .header-menu-ready .home-language-control>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #landing .header-menu-ready .home-language-control .language-globe{width:22px;height:22px}
 #landing .header-menu-ready .home-language-control select{position:absolute;inset:0;width:100%;height:100%;min-height:44px;opacity:0;cursor:pointer;font-size:16px}
 #landing .header-menu-ready .home-language-control:focus-within{outline:2px solid #e5c77c;outline-offset:2px}
 #landing .header-menu-ready #home-menu{top:60px}
 #landing .observatory-header.is-sticky{transition:transform .22s ease}
 #landing .observatory-header.is-sticky.is-hidden{transform:translateY(calc(-100% - env(safe-area-inset-top,0px)))}
}
/* Up to 480px Sign in is a 44px icon button styled like the language globe, so no translated label can
   reach the brand. The label stays in the button as its accessible name. */
@media(max-width:480px){
 #landing .observatory-header .header-signin{width:44px;height:44px;padding:0;justify-content:center;font-size:0;border:1px solid #b4995c55;border-radius:8px;background:#0b0e12;color:#efe5cc}
 #landing .observatory-header .header-signin span{display:none}
 #landing .observatory-header .header-signin::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M9 8l4 4-4 4'/%3E%3Cpath d='M13 12H3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M9 8l4 4-4 4'/%3E%3Cpath d='M13 12H3'/%3E%3C/svg%3E") center/contain no-repeat}
 #landing .observatory-header .header-signin:focus-visible{outline:2px solid #e5c77c;outline-offset:2px}
}
@media(max-width:360px){#landing .observatory-header .header-signin{right:120px}}
/* Below 380px the brand wordmark tightens so the Sign in button keeps clear space beside it; the emblem
   keeps its 52px size and 16px top so the header rhythm matches wider phones. */
@media(max-width:380px){
 #landing .observatory-header .reference-brand{gap:6px}
 #landing .observatory-header .observatory-brand>span{font-size:15px}
}
@media(max-width:720px) and (prefers-reduced-motion:reduce){#landing .observatory-header.is-sticky{transition:none}}

/* Hero kicker: in normal flow above the h1 (desktop only; hidden at 900px and below), so it can never overlap the headline
   whatever the language or font size. Letter-spacing is Latin-only: tracking splits Indic clusters. */
#landing .sky-intro>.hero-marginal{position:static;width:auto;max-width:100%;margin:0 0 22px;line-height:1.6;letter-spacing:.22em;white-space:normal;pointer-events:none}
html:is(:lang(hi),:lang(gu),:lang(bn),:lang(mr),:lang(kfy),:lang(ta),:lang(te),:lang(kn),:lang(mwr),:lang(bho),:lang(ne)) #landing .hero-marginal{letter-spacing:0}

/* Language control: globe and select on one row, 44px tall, inside the brand row. */
@media(min-width:901px){
 #landing .home-language-control{display:inline-flex;flex-direction:row;align-items:center;gap:6px;height:44px;margin:0;padding:0}
 #landing .home-language-control #home-language{height:44px;margin:0}
}
/* 721-900px: the same compact 44px globe button used on phones, beside the menu toggle rather than on its own row. */
@media(min-width:721px) and (max-width:900px){
 #landing .header-menu-ready .home-language-control{position:absolute;top:4px;left:auto;right:72px;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid #b4995c55;border-radius:8px;background:#0b0e12;color:#efe5cc}
 #landing .header-menu-ready .home-language-control>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #landing .header-menu-ready .home-language-control .language-globe{width:22px;height:22px}
 #landing .header-menu-ready .home-language-control select{position:absolute;inset:0;width:100%;height:100%;min-height:44px;opacity:0;cursor:pointer;font-size:16px}
 #landing .header-menu-ready .home-language-control:focus-within{outline:2px solid #e5c77c;outline-offset:2px}
 #landing .header-menu-ready #home-menu{top:60px}
 #landing .observatory-header .header-signin{right:124px}
 /* With the language control in the brand row the header needs no second row. */
 #landing .observatory-header.header-menu-ready{height:64px}
 #landing .sky-opening{padding-top:calc(var(--home-header-offset) + 104px + env(safe-area-inset-top,0px))}
}