/* ==================================================================== *
 * THE PAGE'S LIGHT — home / people page (2026-08-17)
 *
 * Kedem: "make the whole site this colour not black" — the colour is the
 * one /agencies already carries: white paper under one fixed, warm wash
 * (orange top-right, blue top-left, a second orange rising from the
 * bottom), all at ~10% so it reads as light in the room rather than as a
 * gradient. Copied from the agencies block of the same name so the two
 * pages sit on an identical ground.
 *
 * Loaded only on the "/" route, after /landing-globals.css and the home
 * SCSS, so nothing here leaks onto /business, /faq or /e/*.
 * ==================================================================== */

/* --- 1. the ground ------------------------------------------------- */

html,
body {
  background: #ffffff;
  color-scheme: light;
}

.home-light {
  background-color: #fff;
  /* own stacking context so the tint can sit at z-index -1: the root's
     background paints first, the tint next, content last. No z-index is
     imposed on the navbar this way. */
  isolation: isolate;
}
.home-light::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      58% 46% at 82% 12%,
      rgba(255, 122, 24, 0.11) 0%,
      rgba(255, 122, 24, 0) 72%
    ),
    radial-gradient(
      52% 44% at 16% 6%,
      rgba(64, 122, 255, 0.1) 0%,
      rgba(64, 122, 255, 0) 74%
    ),
    radial-gradient(
      64% 40% at 50% 104%,
      rgba(255, 122, 24, 0.07) 0%,
      rgba(255, 122, 24, 0) 76%
    );
}

/* --- 2. the flip ---------------------------------------------------- *
 * The landing CSS paints this page almost entirely through two tokens:
 * grounds are var(--black), ink and hairlines are var(--white) (mostly as
 * `rgb(from var(--white) r g b / 10%)`). Swapping the two values turns
 * every one of those rules over at once — one move instead of a hundred
 * overrides — and the hairlines come out as dark-on-white at the same
 * opacities. Sections that genuinely need white ink (the two blocks that
 * sit on dark video) are named in part 3.
 * -------------------------------------------------------------------- */

body {
  --white: #0a0a0a;
  --black: #ffffff;
  --grey: #6b6b74;
}

/* transparent so the tint reaches every section */
.home-light main,
.home-light main > section {
  background: transparent;
}

/* --- 3. what stays white: the two blocks over dark video ------------ */

/* the hero sits on full-bleed footage, so its type keeps the white it
   was designed against */
.home-light .section-hero,
.home-light .section-hero .h1-72,
.home-light .section-hero .hero-desc,
.home-light .cta-component,
.home-light .cta-component .h2-56,
.home-light .cta-component p {
  color: #ffffff;
}

/* the trust row derives its ink from var(--white), which the flip
   inverts to near-black — over the hero footage it must keep the white
   it was designed against (rating caption/benefits at 72%, score full) */
.home-light .hero-rating,
.home-light .hero-benefits {
  color: #ffffff;
}
.home-light .hero-rating-score {
  color: #ffffff;
}

/* the signup pill is a white field with a black action — it reads the
   same on either ground, so it opts out of the flip */
.home-light .signup-input {
  background: #ffffff;
  color: #0a0a0a;
  border: 1px solid rgba(10, 10, 10, 0.14);
}
.home-light .signup-input.t69.signup-input:focus {
  border: 1px solid rgba(10, 10, 10, 0.4);
}
.home-light .signup-cta {
  background: #0a0a0a;
  color: #ffffff;
}
.home-light .signup-cta:hover {
  background: rgba(10, 10, 10, 0.8);
}

/* --- 3b. the OPEN mobile menu keeps the site's dark drawer --------- *
 * The drawer sheet, its background art and the menu-open bar's
 * !important ink rules were all designed against the dark ground; the
 * flipped tokens turned the close X, the wordmark and the bar white on
 * white. Inside the open-menu context the tokens go back to normal. */
.home-light .hamburger,
.home-light .navbar.navbar-menu-open {
  --white: #ffffff;
  --black: #0a0a0a;
}
.home-light .hamburger {
  background: #0a0a0a;
}

/* --- 4. footer ------------------------------------------------------ *
 * Same treatment as the agencies footer: the black slab cut a white page
 * in half, so it goes transparent with a hairline and dark type.
 * -------------------------------------------------------------------- */

.home-light .padding-footer {
  background: transparent !important;
  border-top: 1px solid #e7e7ea;
}
.home-light .footer-links-title {
  color: #0a0a0a !important;
}
.home-light .footer-link,
.home-light .footer-bottom {
  color: #6b6b74 !important;
}
.home-light .footer-link:hover {
  /* the shared hover paints a pink→gold gradient into the text, which
     reads on either ground — left alone on purpose */
  color: transparent !important;
}
/* the component hardcodes the white wordmark; swap in the dark one the
   navbar already serves on light pages. `content: url()` is Chrome-only,
   so push the intrinsic image out of its box and paint the replacement
   as a background instead. */
.home-light .padding-footer .footer-logo {
  width: 140px;
  height: 35px;
  object-position: -9999px 0;
  background: url("/assets/c98549a0324e9861b0d30226b687035d_4649.svg") no-repeat
    left center / contain;
}
.home-light .footer-bottom img {
  border: 1px solid #e7e7ea;
  border-radius: 9px;
}

/* --- 5. what stays white: type sitting on the product media ---------- *
 * Every product tile paints its copy over full-bleed footage, so its
 * heading and subline keep the white they were designed against. The
 * tiles themselves stay dark on purpose — they are the page's pictures,
 * and they read as pictures against the paper.
 * -------------------------------------------------------------------- */

.home-light .product-item,
.home-light .product-item .h3-20 {
  color: #ffffff;
}
.home-light .product-item .text-color-grey {
  color: rgba(255, 255, 255, 0.72);
}

/* the "Show the world…" chip floats on the video, so it keeps its
   dark-glass build instead of taking the flip */
.home-light .creators-image-tag {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- 6. the earnings sliders ---------------------------------------- *
 * The filled half is orange on either ground; the empty half was a 10%
 * white wash and the thumb a white dot with a white ring — both invisible
 * on paper. The track colour comes through --range-track (the component
 * paints the gradient inline); the thumb gets an edge back.
 * -------------------------------------------------------------------- */

.home-light .range {
  --range-track: rgba(10, 10, 10, 0.12);
}
.home-light .range::-webkit-slider-thumb {
  border: 1px solid rgba(10, 10, 10, 0.14);
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.18);
}
.home-light .range::-moz-range-thumb {
  border: 1px solid rgba(10, 10, 10, 0.14);
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.18);
}

/* --- 7. the product reel -------------------------------------------- *
 * The Post to All chapter's light-page rules (transparent stage, no
 * card frame, the desktop fade mask and fit window, sections 7, 9, 10,
 * 12 and 13 here before) moved into the chapter's own stylesheet,
 * modules/home/product-reel/product-reel.scss, scoped to `.pta-reel`:
 * /agencies mounts the same chapter and must get the same look. Do not
 * target anything inside `.pta-reel` from this sheet.
 * -------------------------------------------------------------------- */

/* --- 8. one ground, no slabs ---------------------------------------- *
 * Kedem: "make sure the whole page is one single colour not breaks."
 * Three things were painting their own ground on top of the page's
 * light and reading as bands: two decorative PNGs drawn for the black
 * page, and the nav bar's opaque frost.
 * -------------------------------------------------------------------- */

/* the earnings panel and the app-grid glow keep their layout, lose their
   ground — the page's light runs straight through both */
.home-light .calculator-item {
  background-image: none;
}
.home-light .apps-bg {
  display: none;
}

/* Sticky nav — painted with the page's own ground instead of a frost.
   A translucent blurred bar smears whatever scrolls under it (the dark
   product tiles turned it grey), and an opaque white bar shows against
   the wash, which is strongest exactly where the bar sits. So the bar
   takes the identical three radials, with `background-attachment: fixed`
   so they resolve against the viewport — the same frame the page's fixed
   tint layer uses. The two line up pixel for pixel and the bar
   disappears into the page. */
.home-light .navbar.navbar--light {
  transition: background-color 0.3s ease;
}
.home-light .navbar.navbar--light.navbar-active:not(.navbar-menu-open) {
  background-color: #ffffff;
  background-image:
    radial-gradient(
      58% 46% at 82% 12%,
      rgba(255, 122, 24, 0.11) 0%,
      rgba(255, 122, 24, 0) 72%
    ),
    radial-gradient(
      52% 44% at 16% 6%,
      rgba(64, 122, 255, 0.1) 0%,
      rgba(64, 122, 255, 0) 74%
    ),
    radial-gradient(
      64% 40% at 50% 104%,
      rgba(255, 122, 24, 0.07) 0%,
      rgba(255, 122, 24, 0) 76%
    );
  background-attachment: fixed;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .home-light .navbar.navbar--light {
    transition: none;
  }
}

/* --- 11. the DM automations journey --------------------------------- *
 * The chapter is /agencies' own component (see HomeProductReel), so the
 * few rules it relies on come from that page's stylesheet, which this
 * route does not load. These three are all of them.
 * -------------------------------------------------------------------- */

/* its wrapper carries Tailwind's bg-white — transparent here so the
   page's wash runs through the section like every other one */
.home-light .agx-dm-journey.bg-white {
  background-color: transparent;
}
/* The accent word takes the reel's own accent, so "coaching signups"
   here and "Everywhere." on the Post to All headline are the same
   colour (Kedem 2026-08-17) — the pink-to-orange sweep, painted into
   the glyphs. /agencies keeps its solid orange on purpose. */
.home-light .agx-row-accent {
  background: linear-gradient(to right, #ec008c 0%, #fc8b67 55%, #ff7a18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the chapter's eyebrow reads black on this page, not grey */
.home-light .agx-dm-eyebrow {
  color: #101014;
}
/* mobile deck: the dashes are the indicator, so the track's scrollbar
   is hidden, and every card is a hard snap stop — without it a fast
   flick sails past a creator instead of advancing one */
.home-light .agx-dm-deck::-webkit-scrollbar {
  display: none;
}
.home-light .agx-dm-card {
  scroll-snap-stop: always;
}

/* --- 14. headline wrapping on phones ------------------------------ *
 * (Numbers are never reused: 9, 10, 12 and 13 were the reel rules that
 * moved to the chapter's own stylesheet, see 7, and 11 is above.)
 * Balanced lines so "Track your global analytics" and the other short
 * section titles do not strand a single word on their last line at 390.
 * Phones only: on wide screens these headings sit on one line anyway.
 * -------------------------------------------------------------------- */
@media (max-width: 500px) {
  .home-light .h2-56,
  .home-light .h2-62,
  .home-light .h3-48,
  .home-light .product-item .h3-20 {
    text-wrap: balance;
  }
}

/* --- 15. the scrolling phrases ------------------------------------ *
 * The four phrases under "The creator economy platform behind it all."
 * fade in as the section arrives, and their resting grey was the page's
 * --grey at 35% opacity: about 1.6:1 against the white paper, on type
 * that runs 28px on a phone and 56px on a desktop. The component now
 * rests at 65% opacity and this darker ink carries it past the 3:1 that
 * large text owes, at rest and all the way up to full strength.
 * -------------------------------------------------------------------- */
.home-light .phrase-motion-span.text-color-grey {
  color: #4f4f57;
}

/* --- 16. the hero on phones (Issue A, 2026-09-25) ------------------ *
 * Everything below is scoped to .home-light (only "/" loads this sheet)
 * and to phone-sized windows; tablets and desktop are untouched.
 *
 * Phone windows are told apart by SIZE, not orientation: an Android
 * WebView that resizes for the keyboard (Instagram's in-app browser)
 * makes a 360x640 portrait window 360x330, which is "landscape" to an
 * orientation query and would flip the layout while someone types.
 *   portrait phone  = (max-width: 479px), (max-width: 767px) and (min-height: 541px)
 *   phone sideways  = (min-width: 480px) and (max-width: 1167px) and (max-height: 540px)
 * -------------------------------------------------------------------- */

/* 16a. the rotating phrase is one line on every phone.
   Under ~370px "Capture Emails" and "Gain Followers" (and at 320 four
   more) broke onto a second line inside the 1.25em overflow:hidden
   wrapper: the second word was never shown ("Capture with the best link
   in bio.") and its top slice slid through the clip as a ghost every
   time the phrase left. The widest phrase is about 7.4em of bold Inter
   (with the last word's small bleed), and the wrapper keeps a 0.1em
   right pad, so at (100vw - 32px) / 7.45 the phrase fills the wrapper
   and nowrap keeps it on one line. From 390 up the full 48px fits. The
   class sits on the animated wrapper AND the reduced-motion still span. */
@media (max-width: 767px) {
  .home-light .section-hero .hero-rotating-text {
    white-space: nowrap;
    font-size: min(1em, calc((100vw - 32px) / 7.45));
    /* clip only the slide (vertical): a hair of overhang from a wider
       fallback face spills into the gutter instead of slicing a letter */
    overflow-x: visible;
    overflow-y: clip;
  }
}
/* the subline is nowrap on phones and 11.15em wide: it steps down under
   ~306px instead of pushing the page sideways (Galaxy Fold cover, 280).
   Only where it is 24px today (500 and under); 501-767 keeps its 32px. */
@media (max-width: 500px) {
  .home-light .section-hero .hero-subline {
    font-size: min(24px, calc((100vw - 32px) / 11.4));
  }
}

/* 16b. portrait phones: the cards live in the band ABOVE the copy.
   The cluster used to be placed by percentages of the whole hero (top
   31.75% + 30px) at a FIXED 320/360px height, while the copy is a
   ~300px block pinned to the bottom. Below ~780px of visible height the
   two met: at 360x650 (Samsung, Chrome bars showing) the card ran from
   76 to 396 and the headline sat at 327, and its top hid under the nav.

   Now the hero is a grid of four rows: the card band, the headline and
   description, the signup bar, the trust pill. The copy keeps its own
   boxes (subgrids), so its spacing is exactly what it was, and the card
   is sized by the band (never taller than 320/360, never under 180;
   below that floor, a keyboard-squeezed WebView say, the hero scrolls).

   How tall the band is (product rule, 2026-09-25): as tall as it can be
   without anything overlapping, without the cards going under the nav,
   and with the whole link.me/yourname bar on the first screen. The trust
   pill may fall below the fold on short phones. Phones tall enough for
   the full-size card WITH the trust pill (390x844 and up) keep the
   approved frame: the section is one screen and the band is what the
   copy leaves (1fr). The shorter ones get the spacer in 16c.

   The last three conditions are mid-size windows (768-1167 wide, 590-909
   tall: small laptop windows, tablets in split view, foldables held
   sideways). They had the same fault as the phones: the collage was
   placed by percentages of the hero while the copy is pinned to the
   bottom, so the card ran over "Make Money" (800x600, 999x900, 1024x850)
   or under the nav (1024x600). They get the same band; 16b2 tunes it. */
@media (max-width: 479px),
  (max-width: 767px) and (min-height: 541px),
  (min-width: 768px) and (max-width: 999px) and (min-height: 590px) and (max-height: 909px),
  (min-width: 1000px) and (max-width: 1167px) and (min-height: 590px) and (max-height: 672px),
  (min-width: 1000px) and (max-width: 1167px) and (min-height: 801px) and (max-height: 909px) {
  .home-light .section-hero {
    /* the fixed GlassNav header is 107px tall on phones (pt-3) */
    --hero-top: calc(107px + 12px);
    --hero-band-floor: 180px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(var(--hero-band-floor), 1fr) auto auto auto;
    row-gap: 20px;
    align-items: stretch;
    padding-top: var(--hero-top);
  }
  /* the copy takes rows 2-4 and hands them down to its own children, so
     the headline block, the bar and the pill each sit in their own row */
  .home-light .section-hero > .relative-5 {
    grid-row: 2 / 5;
    grid-column: 1;
    margin-top: 0;
    display: grid;
    grid-template-rows: subgrid;
  }
  .home-light .section-hero .hero-content {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
  }
  /* grid centres across with justify-self (the flex column used align-self) */
  .home-light .section-hero .hero-trust {
    justify-self: center;
  }
  /* The wrapper and the stack stop being positioned boxes, so the
     full-bleed clips and the tint (both position:absolute) resolve
     against the section itself, the same box they covered before. The
     subgrid keeps the stack (the IntersectionObserver target that pauses
     the clips off screen) as tall as the whole hero; the card layer
     takes row 1 only. z-index works on a static grid item and keeps all
     of it under the copy (z-index 5), as before. */
  .home-light .section-hero > .bg-wrapper {
    position: static;
    grid-row: 1 / -1;
    grid-column: 1;
    width: auto;
    height: auto;
    z-index: 1;
    display: grid;
    grid-template-rows: subgrid;
  }
  /* overflow moves from the stack to the section. The stack's base rule
     clips (overflow:hidden). By the spec that clip should not reach the
     clips and the tint, whose containing block is now the section, and
     desktop engines agree. iPhone Safari (iOS 27, Simulator) still
     clipped the video to the static stack's box, so the top 119px of the
     hero, behind the nav, showed the white page instead of the footage.
     The section clips instead: same box, and the sliding cards still
     never widen the page. */
  .home-light .section-hero {
    overflow: hidden;
    overflow: clip;
  }
  .home-light .section-hero .video-stack {
    position: static;
    grid-row: 1 / -1;
    width: auto;
    height: auto;
    display: grid;
    grid-template-rows: subgrid;
    overflow: visible;
  }
  .home-light .section-hero .profile-overlay-wrapper {
    position: relative;
    inset: auto;
    grid-row: 1;
    min-height: 0;
  }
  /* absolute, so the card never feeds back into row 1's height */
  .home-light .section-hero .profile-overlay-container {
    position: absolute;
    inset: 0;
    height: auto;
    padding: 0;
    margin: 0;
    transform: none;
    justify-content: center;
    align-items: center;
  }
  /* a column: the air above and below the card splits 1 : 2, the
     proportion of the approved 390x844 frame (about 33px under the nav,
     62px over the headline); a band no taller than the card gives the
     card all of it */
  .home-light .section-hero .profile-overlay {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .home-light .section-hero .profile-overlay::before,
  .home-light .section-hero .profile-overlay::after {
    content: "";
    flex: 1 1 0;
    min-height: 0;
  }
  .home-light .section-hero .profile-overlay::after {
    flex-grow: 2;
  }
  /* the card keeps its shape as it shrinks; the caps are today's sizes */
  .home-light .section-hero .bg-wrapper .profile-card {
    flex: none;
    height: min(360px, 100%);
    width: auto;
    aspect-ratio: 0.55;
    max-width: min(46vw, 220px);
  }
  /* the two photo cards scale with the centre card, in the approved
     frame's exact proportion: 88px on a 164px card is 53.66%. At 58% they
     reached 37-39% across a smaller card instead of 34.5% and covered the
     start of the creator's name ("hton Hall"), Kedem 2026-09-27. */
  .home-light .section-hero .profile-sticker {
    width: min(88px, 53.66%);
  }
  /* the left photo card ends above the creator's name. Every Linkme page
     puts the name about 40% down the card; at top 15% the photo (about 37%
     of the card tall) reached 52% and covered the start of any long name
     ("a Sean O'Malley" here, "ison Derulo" on the live site). From 2% it
     ends near 39%, still overlapping the card's top corner. */
  .home-light .section-hero .profile-sticker-top {
    top: 2%;
  }
}
@media (max-width: 420px) {
  .home-light .section-hero .bg-wrapper .profile-card {
    height: min(320px, 100%);
    aspect-ratio: 0.512;
    max-width: min(42vw, 200px);
  }
}
/* 480-767: today the card is 220x360 there (46vw passes 220 at 478), so
   the full-size card keeps exactly that shape */
@media (min-width: 480px) and (max-width: 767px) and (min-height: 541px) {
  .home-light .section-hero .bg-wrapper .profile-card {
    aspect-ratio: 11 / 18;
  }
}
@media (min-width: 640px) and (max-width: 767px) and (min-height: 541px) {
  .home-light .section-hero {
    /* the header is 111.5px from 640 (sm:pt-4) */
    --hero-top: calc(111.5px + 12px);
  }
}

/* 16b2. mid-size windows in the band (the last three conditions of 16b).
   The nav ends 111.5px down from 640 wide and 116.4px down from 1024,
   where the full desktop bar replaces the menu button. The
   card keeps the shape and the 236x360 ceiling it has at these widths
   today. The floor is 150px: the shortest window here (590) leaves just
   over that above the copy, and anything shorter hides the cards (16d). */
@media (min-width: 768px) and (max-width: 999px) and (min-height: 590px) and (max-height: 909px),
  (min-width: 1000px) and (max-width: 1167px) and (min-height: 590px) and (max-height: 672px),
  (min-width: 1000px) and (max-width: 1167px) and (min-height: 801px) and (max-height: 909px) {
  .home-light .section-hero {
    --hero-top: calc(111.5px + 12px);
    --hero-band-floor: 150px;
  }
  .home-light .section-hero .bg-wrapper .profile-card {
    aspect-ratio: 236 / 360;
    max-width: 236px;
  }
}
@media (min-width: 1024px) and (max-width: 1167px) and (min-height: 590px) and (max-height: 672px),
  (min-width: 1024px) and (max-width: 1167px) and (min-height: 801px) and (max-height: 909px) {
  .home-light .section-hero {
    --hero-top: calc(116.4px + 12px);
  }
}

/* 16c. short phones: the band takes the room the trust pill gave up.
   A phone is "short" when the full-size card (320px, 360px above 420
   wide) plus 24px of air, the copy and the nav do not fit on one screen.
   That line sits at 805px tall for 360-420 wide (the copy is ~306px
   there), 836 at 301-359, 877 on the Fold cover, 845 at 421-500 and 824
   at 501-767. Every mid-size window in 16b2 is short too (the full card,
   the copy and the pill need about 954px there). On those the spacer
   spans band + headline + signup bar and is one screen minus the nav
   and 12px, so the band grows until
   the bar ends 12px above the screen bottom and the pill starts just
   past the fold (never half on screen). It measures the real copy,
   whatever the description wraps to. A phone right at the line gets
   either frame, and both keep the full card clear of the text.
   Heights here are the small viewport (bars showing), which does not
   change while the bars slide away, so nothing jumps on scroll. */
@media (max-width: 300px) and (max-height: 876px),
  (min-width: 301px) and (max-width: 359px) and (max-height: 835px),
  (min-width: 360px) and (max-width: 420px) and (max-height: 804px),
  (min-width: 421px) and (max-width: 479px) and (max-height: 844px),
  (min-width: 480px) and (max-width: 500px) and (min-height: 541px) and (max-height: 844px),
  (min-width: 501px) and (max-width: 767px) and (min-height: 541px) and (max-height: 823px),
  (min-width: 768px) and (max-width: 999px) and (min-height: 590px) and (max-height: 909px),
  (min-width: 1000px) and (max-width: 1167px) and (min-height: 590px) and (max-height: 672px),
  (min-width: 1000px) and (max-width: 1167px) and (min-height: 801px) and (max-height: 909px) {
  .home-light .section-hero::before {
    content: "";
    grid-row: 1 / 4;
    grid-column: 1;
    height: calc(100svh - var(--hero-top) - 12px);
    pointer-events: none;
  }
}

/* Safari 15 / Chrome < 117 have no subgrid: two rows (band, copy), the
   stack takes row 1 with the cards (the clips then pause once that band
   has scrolled away), and the whole hero fits one screen */
@supports not (grid-template-rows: subgrid) {
  @media (max-width: 479px),
    (max-width: 767px) and (min-height: 541px),
    (min-width: 768px) and (max-width: 999px) and (min-height: 590px) and (max-height: 909px),
    (min-width: 1000px) and (max-width: 1167px) and (min-height: 590px) and (max-height: 672px),
    (min-width: 1000px) and (max-width: 1167px) and (min-height: 801px) and (max-height: 909px) {
    .home-light .section-hero {
      grid-template-rows: minmax(var(--hero-band-floor), 1fr) auto;
    }
    .home-light .section-hero::before {
      display: none;
    }
    .home-light .section-hero > .relative-5 {
      grid-row: 2;
      display: block;
    }
    .home-light .section-hero .hero-content {
      display: flex;
    }
    .home-light .section-hero > .bg-wrapper {
      grid-row: 1;
      display: block;
    }
    .home-light .section-hero .video-stack {
      display: block;
      height: 100%;
    }
    .home-light .section-hero .profile-overlay-wrapper {
      height: 100%;
    }
  }
}

/* 16d. phones held sideways.
   330px of copy under a 112px nav in a 320-430px tall window leaves no
   band for the cards: the headline sat under the nav (y 0 at 844x390)
   and the cards were scaled to a 59x90 stamp over the signup form. The
   copy clears the nav and the cluster steps aside. A mid-size window
   under 590px tall (768-1167 wide) has the same problem: the band above
   the copy would be under 150px, so the cluster steps aside there too. */
@media (min-width: 480px) and (max-width: 1167px) and (max-height: 540px),
  (min-width: 768px) and (max-width: 1167px) and (max-height: 589px) {
  .home-light .section-hero {
    padding-top: calc(111.5px + 12px);
  }
  .home-light .section-hero .profile-overlay-wrapper {
    display: none;
  }
  /* viewport-fit=cover: sideways iPhones put the sensor housing over the
     first ~47px; the copy steps in the way GlassNav already does */
  .home-light .section-hero > .relative-5 {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* 16d2. short desktop windows: the card stays clear of the nav.
   From 1168 up the card sits beside the copy, centred on the screen, at
   a floor of 520px (clamp(520px, 66vh, 620px)) times the collage scale.
   On a short window that floor pushed the top of the card up to the nav
   and then under it (1440 wide under 658px tall, 1920 under 701): at
   1440x650 it started 3px inside the bar, at 1920x700 26px inside.
   The height gets a second cap: the one that puts the top of the card
   12px under the nav (116.4px). Worked back through the centring, the
   scale (0.8 / 0.88 / 1) and the margin (24 / 17 / 0) of each range:
     top = margin + 50svh - scale * height / 2  >=  128.4px
   The width follows at the card's own 8 : 13, so it shrinks without
   changing shape, and the photo cards stay half its width (their size
   today at full size). On taller windows the cap is larger than the
   card, so nothing there moves; the height limits only keep the rule
   off screens it cannot touch. */
@media (min-width: 1168px) and (max-width: 1399px) and (min-height: 400px) and (max-height: 624px) {
  .home-light .section-hero .profile-card {
    --card-cap: calc(125svh - 261px);
  }
}
/* 1168-1200 wide and up to 800 tall also carry the Nest Hub rule
   (landing-globals.css): 10vh of padding above the card, which lowers
   it by 4vh, so its cap is looser */
@media (min-width: 1168px) and (max-width: 1200px) and (min-height: 400px) and (max-height: 624px) {
  .home-light .section-hero .profile-card {
    --card-cap: calc(135svh - 261px);
  }
}
@media (min-width: 1400px) and (max-width: 1659px) and (min-height: 400px) and (max-height: 680px) {
  .home-light .section-hero .profile-card {
    --card-cap: calc((100svh - 222.8px) / 0.88);
  }
}
@media (min-width: 1660px) and (min-height: 400px) and (max-height: 776px) {
  .home-light .section-hero .profile-card {
    --card-cap: calc(100svh - 256.8px);
  }
}
@media (min-width: 1168px) and (min-height: 400px) and (max-height: 776px) {
  .home-light .section-hero .profile-card {
    height: min(clamp(520px, 66vh, 620px), var(--card-cap, 620px));
    width: min(
      clamp(220px, 24vw, 320px),
      calc(var(--card-cap, 620px) * 8 / 13)
    );
  }
  .home-light .section-hero .profile-sticker {
    width: min(clamp(88px, 11.2vw, 160px), 50%);
  }
}

/* 16d3. short desktop windows 1168-1200 wide: the headline clears the nav.
   Here the Nest Hub rule (landing-globals.css) keeps the copy at 0.98
   scale where 1201 and up drop it to 0.8, so the block is 394px tall
   (418px with its 24px margin) and centred on the screen. Its top is
   50svh - 181.3px, which is less than 12px under the nav (116.4px) below
   619.4px tall: 2.3px at 1168x600, 7.3px at 1200x610, under the bar from
   595 down. On those windows the copy is placed from the top instead,
   with the same clearance the other hero rules use (nav + 12px): no
   margin, and the scale grows from its top edge, so "Make Money" starts
   exactly 128.4px down and nothing changes size. At 619 that is 0.2px
   lower than the centred copy, so resizing across the edge shows no jump.
   The card is in the absolute layer and does not move. Under 523px tall
   the copy cannot fit below the nav on one screen, so the hero grows by
   the difference (the card, centred in it, drops by half of that). */
@media (min-width: 1168px) and (max-width: 1200px) and (min-height: 400px) and (max-height: 619px) {
  .home-light .section-hero {
    align-items: flex-start;
    padding-top: calc(116.4px + 12px);
  }
  .home-light .section-hero .hero-content {
    margin-top: 0;
    transform-origin: 50% 0;
  }
}

/* 16e. the trust pill on narrow phones.
   Its benefit row is 308px of nowrap type, wider than the pill below
   ~350px (at 320 it hung ~10px outside both edges). Under 360 the three
   benefits wrap as centred words and the dots step out. */
@media (max-width: 359px) {
  .home-light .section-hero .hero-benefits {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 14px;
    row-gap: 2px;
    white-space: normal;
  }
  .home-light .section-hero .hero-benefit {
    white-space: nowrap;
  }
  .home-light .section-hero .hero-benefit + .hero-benefit::before {
    display: none;
  }
}

/* 16f. the claim field.
   "link.me/yourname" (8.47em at 20px) ran under the floating Start for
   free button below ~362px (touching at 360, cut to "link.me/yourn" at
   320). 360-374: one size down. 301-359: the little logo steps out and
   the text takes 17px (never under 16: iOS zooms a focused field below
   that). Under 301 (Fold cover) the button drops under the field as a
   full-width bar, the rule the closing CTA already uses under 400. */
@media (min-width: 360px) and (max-width: 374px) {
  .home-light .section-hero .signup-input {
    font-size: 18px;
  }
}
@media (min-width: 301px) and (max-width: 359px) {
  .home-light .section-hero .input-logo {
    display: none;
  }
  .home-light .section-hero .signup-input {
    padding-left: 16px;
    font-size: 17px;
  }
}
@media (max-width: 300px) {
  .home-light .section-hero .signup-input {
    padding-right: 16px;
  }
  .home-light .section-hero .signup-cta {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 10px;
    min-height: 44px;
  }
  .home-light .section-hero .input-logo {
    top: 22px;
  }
}

/* --- 17. the analytics card's text stays inside the card ------------ *
 * "Real-time global analytics" (BigProductItem2) puts its copy 32px in
 * from the card's left edge at the card's FULL width (.mw-680 is
 * width:100%), so from 501 to ~790 wide (iPad mini, foldables, phones on
 * their side) the first line ran past the card's clipped right edge and
 * read "providing seamless acce". With both sides pinned the box is the
 * card minus 32px a side, still capped at 720px, so desktop is unchanged
 * and phones (500 and under) keep their own full-width rule.
 * -------------------------------------------------------------------- */
@media (min-width: 501px) {
  .home-light .big-product-item .product-item-content.mw-680 {
    width: auto;
    right: 32px;
  }
}