/* World-class 100% EN=HI parity — fixed lock, no content-driven shift | EN 5 lines vs HI 4 lines */
/* Fit the whole hero (headline + instrument + live-sky/trust foot strip) inside one
   desktop viewport. Was min-height:max(760px,100svh) with a 460px headline box: on a
   1920×1080 screen the browser chrome + OS taskbar left ~940px usable, but the content
   ran ~1000px, so the foot strip fell below the fold. Same shape as the ai-forecast
   hero — a content-sized hero, not a viewport-locked one. Only vertical rhythm changes;
   no copy, no type, no layout. */
.hero{min-height:820px !important;overflow:visible !important;padding-top:calc(var(--header-height) + 28px) !important;padding-bottom:16px !important}
.hero-grid{min-height:520px;align-items:center}
.hero-copy{display:flex;flex-direction:column;justify-content:center;min-height:520px}
.hero-copy h1{min-height:360px;height:360px;display:flex;flex-direction:column;justify-content:center;margin-bottom:18px;max-width:860px !important}
/* ~1610px the English headline reflows from 4 to 5 lines; switch the box height at
   1600px so the 5th line never clips. Width-keyed, so Hindi (stays 4 lines) tracks the
   exact same height — EN=HI parity holds. */
@media(min-width:1600px){.hero-copy h1{min-height:448px !important;height:448px !important}}
.hero-copy h1{line-height:.92}
.hero-copy h1 span,.hero-copy h1 em{line-height:.92}
.lang-hi .hero-copy h1{line-height:1.05;max-width:860px !important}
.lang-hi .hero-copy h1 span,.lang-hi .hero-copy h1 em{line-height:1.05}
.hero-lead{min-height:76px;display:flex;align-items:center}
.hero-actions{min-height:48px}
/* base margin-top is the narrow-tier value; below 1600px the headline box is the
   shorter 4-line height, which lifts the instrument's italic caption toward the
   strip, so keep a wider gap there. ≥1600px the box is taller — pull it back in. */
.hero-foot{flex-wrap:nowrap !important;min-height:54px !important;max-height:54px !important;height:54px !important;align-items:center !important;overflow:visible !important;margin-top:68px !important;padding-top:16px !important}
@media(min-width:1600px){.hero-foot{margin-top:50px !important}}
/* desktop-only: tighten the hero's vertical rhythm so the foot strip clears the fold */
@media(min-width:961px){
  .hero-copy .eyebrow{margin-bottom:24px !important}
  .hero-lead{margin-bottom:22px !important}
  .hero-actions{margin-bottom:14px !important}
}
/* ---------------------------------------------------------------------------
   DESKTOP-ONLY instrument + hero-foot tuning.
   2026-09-02: these were previously unscoped. Because they carry !important
   and this file loads after home.min.css, they were overriding home.css's own
   <=680px mobile design for the chronometer, e.g.
       home.css  @media (max-width:680px)  .coordinate { font-size: 6px }
       here (unscoped)                     .coordinate { font-size: 11px !important }
   and, worse, the lang-specific caption block pinned the caption to the
   desktop position (right:8%; bottom:-62px; max-width:310px) instead of
   home.css's centred mobile layout, so the 07:05:02 chip landed on top of the
   caption text on a phone.
   They were tuned for the desktop fold fix, so they now say so. Nothing
   inside changed - only the media query around them.
   Scoped at 561px, not 961px, deliberately: home.css puts the chronometer's
   own phone layout in @media (max-width:560px), so 561px is the exact line
   where these desktop values stop being wanted. Tablet and desktop keep the
   behaviour they already had; only phones change.
   NOTE: the candidate angles at the bottom of this file stay UNSCOPED on
   purpose. They are the protected animation geometry and must apply at every
   width.
   --------------------------------------------------------------------------- */
@media (min-width: 561px) {
  .livesky-strip{flex:0 0 auto !important;width:auto !important;max-width:fit-content !important;height:36px !important;min-height:36px !important;max-height:36px !important;display:inline-flex !important;align-items:center !important;flex-wrap:nowrap !important;white-space:nowrap !important;font-size:12.5px !important;padding:0 14px !important;gap:12px !important}
  .livesky-strip__live,.livesky-strip__item,.livesky-strip__time{font-size:12.5px !important}
  .hero-foot ul{gap:18px 28px !important}
  .hero-foot li{font-size:11.5px !important;letter-spacing:.065em !important}
  .hero-foot> a{font-size:11.5px !important;letter-spacing:.08em !important}
  .btrc-minute{font-size:11.5px !important;letter-spacing:.04em !important}
  .coordinate{font-size:11px !important;letter-spacing:.05em !important}
  .btrc-chip b{font-size:11.5px !important}
  .btrc-chip em{font-size:10.5px !important}
  .btrc-caption{font-size:14px !important;line-height:1.5 !important}
  .btrc-caption small{font-size:11.5px !important}
  .hero-instrument > p{font-size:14px !important}
  .btrc-hub small{font-size:10.5px !important}
  .btrc-hub strong{font-size:30px !important;letter-spacing:.02em !important}
  .btrc-seal{right:0% !important;bottom:-0.5% !important}
  .btrc-seal text{font-size:8.2px !important;letter-spacing:.13em !important}
  /* CAPTION position — lang-specific to avoid seal touch, thoda sa dur */
  html[lang="hi"] .btrc-caption,html[lang="hi"] .hero-instrument > p{right:11% !important;bottom:-58px !important;max-width:280px !important}
    /* Caption stays 310px / 2 lines. Narrowing it to clear the 07:05:02 chip
     made it wrap to 3 lines, which then ran into the method seal - worse.
     The real clash was vertical: at bottom:-62px the caption sat at y698-758
     while the seal occupies y599-711, so the caption's top-right corner was
     stuck to the seal ("chipak raha hai"). -82px drops it clear of the seal
     and still leaves a gap before .hero-foot. The caption is position:absolute,
     so this does not change the hero fold height. */
  html[lang="en"] .btrc-caption,html[lang="en"] .hero-instrument > p{right:8% !important;bottom:-82px !important;max-width:310px !important}
}
/* Hindi me sirf TEXT Devanagari — sab numbers/degrees ENGLISH hi rahenge (aapka rule) */
html[lang="hi"] .livesky-strip,html[lang="hi"] .livesky-strip__live,html[lang="hi"] .livesky-strip__item,html[lang="hi"] .livesky-strip__time,html[lang="hi"] .btrc-minute,html[lang="hi"] .coordinate,html[lang="hi"] .btrc-chip b,html[lang="hi"] .btrc-chip em,html[lang="hi"] .btrc-hub small,html[lang="hi"] .btrc-hub > span,html[lang="hi"] .btrc-hub > span b,html[lang="hi"] .btrc-seal text,html[lang="hi"] .folio-time span,html[lang="hi"] .folio-time strong,html[lang="hi"] .time-lab__reading small,html[lang="hi"] .time-lab__reading strong,html[lang="hi"] .time-lab__reading span,html[lang="hi"] .candidate-tabs button,html[lang="hi"] .candidate-tabs button span{font-family:var(--data) !important}
html[lang="hi"] .btrc-hub strong{font-family:var(--display) !important}
@media(max-width:960px){.hero{min-height:auto !important;padding-top:calc(var(--header-height) + 36px) !important;padding-bottom:20px !important}.hero-grid{min-height:0}.hero-copy{min-height:0}.hero-copy h1{min-height:0 !important;height:auto !important;display:block !important}.hero-lead{min-height:0 !important;display:block !important}.hero-foot{min-height:0 !important;height:auto !important;max-height:none !important;flex-wrap:wrap !important;gap:14px !important;justify-content:center !important;margin-top:28px !important}.livesky-strip{width:100% !important;max-width:100% !important;justify-content:center !important;height:auto !important;min-height:36px !important;max-height:none !important;flex-wrap:wrap !important;white-space:normal !important}}
@media(max-width:680px){.hero-copy h1{min-height:0;height:auto}}

@media (prefers-reduced-motion: reduce){ .btrc-seconds{animation:none !important} .btrc-seal{animation:none !important} }
/* Candidate angles are classes, not inline custom properties: the production
 * CSP allows nonce'd stylesheets but (correctly) blocks inline style attrs. */
.btrc-candidate--a { --btrc-a: 72deg; }
.btrc-candidate--b { --btrc-a: 188.5deg; }
.btrc-candidate--c { --btrc-a: 302.5deg; }

/* ---------------------------------------------------------------------------
   Phone-only corrections (<=560px). This file is the LAST stylesheet in the
   <head>, so these must live here to win over the @media(max-width:960px)
   block above, which sets .hero-foot{margin-top:28px !important} for tablet.
   On a phone the chronometer caption is absolutely positioned and hangs 112px
   below the dial; 28px of foot margin put the LIVE SKY strip straight through
   it. .hero-foot is a sibling of .hero-grid, so margin on the instrument does
   not move it - the foot has to be pushed itself.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .hero-foot { margin-top: 132px !important; }
}