/* 11 Nov 2026 changes: new hero photo, Features list without Family Mode, contact pop-up.
   Loaded on every page after popup.css. */

/* Home hero: one photo (Figma 675:1048 top layer), cropped as in the design */
.hero__bg-5 { position: absolute; left: -11.18%; top: -5.48%; width: 111.18%; height: 116.42%; max-width: none; }

/* Features: five rows in the contents list (Figma "01 Hero · Contents" is 1121px tall) */
.page--features .fhero { height: 1120px; }

/* Contact pop-up: reuses the waitlist pop-up's card, fields and buttons */
.popup--contact .popup__body { padding-top: 40px; }
.popup--contact .popup__close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.popup--contact .popup__card { position: relative; }
.field__textarea { min-height: 120px; resize: vertical; font: inherit; line-height: 1.5; }
.site-footer__col a[data-contact] { cursor: pointer; }

/* Home hero keeps the design's 1440×960 proportions (Figma 675:1048), so the photo is framed exactly
   as designed instead of being cropped to the window height (fit.css fits the hero to the window). */
html.fit .hero { height: 960px; }
html.fit .hero__bg { top: 0; }
/* On windows shorter than the design, lift the photo so the Tara device on the counter (y ≈ 640–760 in
   the 960px frame) clears the pinned buttons: lift = 846px − window height, never below 0. The hero
   shortens by the same amount so the photo still reaches its bottom edge. */
html.fit .page .hero { height: min(960px, calc(var(--hero-h, 960px) + 114px)); }
html.fit .page .hero__bg { top: min(0px, calc(var(--hero-h, 960px) - 846px)); }

/* Nav: 64px margins on both sides and equal gaps between logo, links and button on every page,
   whatever the button says ("Pre-order" on home is narrower than "Join the waitlist"). */
.home-nav__inner, .site-nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 0 64px; box-sizing: border-box; }
.home-nav__inner > .hero__logo, .home-nav__inner > .hero__nav, .home-nav__inner > .hero__cta,
.site-nav__inner > .site-nav__logo, .site-nav__inner > .site-nav__links, .site-nav__inner > .site-nav__cta { position: static; }

/* …but the headline and buttons stay on the first screen: pinned to the bottom of the window
   (fit.js puts the window height, in design pixels, in --hero-h; 104px = 960 - the design's 856 top).
   On a window as tall as the design they sit exactly where Figma has them. */
html.fit .page .hero__copy { top: calc(var(--hero-h, 960px) - 104px); bottom: auto; }
/* The shade fades in over 300px above the headline's line, then stays down to the hero's bottom edge,
   so no band shows below it when you scroll */
.hero__pinshade { position: absolute; left: 0; width: 1440px; top: calc(var(--hero-h, 960px) - 300px); bottom: 0;
  background: linear-gradient(to bottom, rgba(11,10,9,0) 0, rgba(11,10,9,.82) 300px, rgba(11,10,9,.82) 100%); pointer-events: none; opacity: var(--pinshade, 0); }