/* ── The Nakula layer: exactly one poster moment ─────────────────────────────────────────────────
   This sheet owns the hero, the run strip, and the nav clock — nothing below the first fold.
   Everything else on the page is v1's style.css, untouched: Sarthak's brief is the reference
   site's HEADER on top of the site's own Apple register, and keeping this file separate is what
   keeps that boundary honest. Load order matters: this comes after style.css and only ever adds.

   Type is the system stack throughout: -apple-system resolves to real SF on the Macs this page is
   written for, and the hero no longer uses a display face at all. */

/* No @font-face here any more: the headline moved to the system face, so the display font it
   declared was dead weight - and index.html was still PRELOADING it, which fetches 12 KB at high
   priority against the hero image for a face nothing renders. */

/* ── Nav additions: the live clock ──────────────────────────────────────────────────────────── */
.nav__meta { display: flex; align-items: center; gap: 16px; }
.nav__time { font: 500 12.5px/1 ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  color: var(--faint); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .nav__time { display: none; } }

/* ── Hero ───────────────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: flex-end; overflow: hidden; background: #000; }
/* No filter and no object-position nudge: the plate was SHOT for this crop, with its negative
   space already on the left. The brightness lift and the 68% bias existed to rescue a film frame
   that was never composed for type, and applying them here would double-grade an image that is
   already right. */
.hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(75deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 46%, rgba(0,0,0,0) 66%),
  linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 32%); }
/* The hero is built exactly like every other section so the page has ONE left edge from the first
   screen: a --wide box centred in the viewport, with the shared gutter inside it. Its own 1240px
   max-width without the centring put its copy at 309 where the rest of the page sat at 594. */
.hero__inner { position: relative; z-index: 2; width: 100%;
  max-width: var(--wide); margin-inline: auto;
  padding: 0 var(--wide-gutter) clamp(72px, 12vh, 128px);
  display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 28px); }
/* Sentence case in the system face, not Anton caps. Sarthak's reference is Apple's own hero: the
   headline is large but it is still a sentence, and shouting it in a condensed display face made the
   page read as a poster rather than a product site. It was the only thing using a webfont, so the
   @font-face, its preload and the file itself went with it. */
/* Two lines, the second in blue. The <em> is a block so it breaks on its own without a <br>, which
   keeps the markup readable and lets SplitText leave it alone. */
.giant { font-weight: 600; font-size: clamp(44px, 6.4vw, 104px);
  line-height: 1.0; letter-spacing: -.03em; margin-top: 14px; }
.giant em { display: block; font-style: normal; }

/* THE SAME RAMP THE REST OF THE PAGE'S HEADLINES USE. The second line was a flat #7FB4F5, which
   put a solid slab of one blue against Apple's own treatment on the page Sarthak is referencing -
   there the gradient runs across the WHOLE headline, pale mint into blue-grey, and no single word
   is a different colour from its neighbour.

   THE RAMP HAS TO GO ON THE LINES, NOT THE HEADING. This heading has no data-split attribute, but
   SplitText goes through it anyway and leaves each line in a .split-line > span carrying its own
   transform - and a transformed descendant gets its own containing block, which stops the parent's
   clipped background painting across it. Declared only on .giant, the headline rendered as nothing
   at all: transparent text over a background that never reached it. Same trap as .stmt, same fix.

   The two lines then share ONE sweep rather than each running the full ramp and reading as two
   identical gradients: the background box is twice a line tall and each line shows its own half.

   Gated behind @supports because the mechanism needs color: transparent - without background-clip
   the words would be invisible rather than merely flat. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .giant, .giant .split-line > span {
    background-image: linear-gradient(102deg, #F2F6F4 0%, #D8EAE1 24%, #A9C8D0 56%, #7FA2BE 82%, #6E8FAE 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; }
  /* Once split, the lines own the ramp and the parent must stop painting its own copy underneath -
     otherwise both paint and the heading doubles for the length of the reveal tween. */
  .giant:has(.split-line) { background-image: none; }
  /* fit-content, or the ramp never arrives. The span is a block, so its box is the full width of
     the hero column while the words fill only its left third - the gradient stretched across all
     of that and the text saw nothing but the pale first quarter of it. Shrink-wrapping the box to
     the words maps the whole ramp onto the letters, which is where Apple's runs. */
  .giant .split-line > span { width: fit-content; background-size: 100% 200%; }
  .giant .split-line:first-child > span  { background-position: 0 0; }
  .giant .split-line:nth-child(2) > span { background-position: 0 100%; }
  /* Room for the descender in "down." - the clip box is the text box and a y or p tail sits under
     it, which is the fault the split-line masks had. */
  .giant .split-line > span { padding-bottom: .06em; margin-bottom: -.06em; }
}
/* Plain, not shouted. The rest of the page's eyebrows moved to sentence case in the system face for
   the same reason; the hero was the last one still set in tracked mono caps. */
/* No dot. The reference sets the product line as a plain grey label above the headline, and the blue
   in this hero belongs to the second line of the headline instead - one accent, doing one job. */
.tag { display: block; font: 500 clamp(15px, 1.2vw, 19px)/1 inherit; letter-spacing: -.006em;
  color: var(--muted); }
.hero__lead { max-width: 34em; }
.hero__lead strong { color: var(--text); font-weight: 600; white-space: nowrap; }
@media (max-width: 620px) { .hero__lead strong { white-space: normal; } }
.hero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Masked load-in for the hero copy: the from-state is applied by GSAP at tween creation, so a
   page that never gets GSAP never gets the hiding. hero.js owns the animation. */
.hero .split-line { display: block; overflow: hidden; }
.hero .split-line > span { display: block; will-change: transform; }

/* ── The nav voice Sarthak picked from the editorial build: mono caps, tracked. Only the LINKS
   change register — the brand stays SF, the pill stays the accent button. -*/
.nav__links { font: 500 14px/1 inherit; letter-spacing: -.004em; text-transform: none;
  gap: clamp(16px, 2.6vw, 34px); }

/* Large displays. Companion to the two blocks in style.css; it lives here because hero.css loads
   last, so a .giant ceiling written over there would lose to this file's own declaration. */
@media (min-width: 1900px) {
  .giant { font-size: clamp(44px, 6.4vw, 120px); }
}