/* ==================================================================== *
 * 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: rgb(255 255 255 / 72%);
}
.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 -------------------------------------------- *
 * ActReel hardcodes `bg-black` on its pinned stage with no `light:`
 * variant, so `.biz-light` alone leaves a black band cutting through the
 * page. Transparent (not white) so the page's wash carries through the
 * pin, the same way the sections around it do.
 * -------------------------------------------------------------------- */

.home-light .reel-stage {
  background: transparent;
}

/* --- 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;
  }
}

/* --- 9. the publishing card ----------------------------------------- *
 * Kedem: "remove this frame." The Post to All payoff sat in a black
 * rounded slab, which on paper reads as a box drawn around the
 * animation. The slab goes; the phone, the seven platform rings and the
 * status line float on the page's own light, the way /agencies does it.
 * The animation itself is untouched — only surfaces and ink. Beating the
 * component's inline colours needs !important.
 * -------------------------------------------------------------------- */

.home-light [data-pta="overlay"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.home-light [data-pta="status"] {
  color: #3f3f46 !important;
}
.home-light [data-pta="reassure"] {
  color: #71717a !important;
}
.home-light [data-pta="ov-card"] {
  border-color: rgba(16, 16, 20, 0.08) !important;
  box-shadow: 0 15px 40px rgba(16, 16, 20, 0.16) !important;
}
/* the success badges punch a ring out of the ground they sit on */
.home-light [data-pta="badge"] {
  box-shadow: 0 0 0 2.5px #fff !important;
}
.home-light [data-pta="ring-track"] {
  stroke: rgba(16, 16, 20, 0.1) !important;
}

/* --- 10. the publishing card runs bigger ---------------------------- *
 * Kedem: "scale it bigger." The card's own geometry is larger
 * (PostToAllShowcase size={1.22}), but the FitBox scales whatever it is
 * given back down to the column it has — so the column and the fit
 * window open up to match, the way /agencies runs the same card.
 * Pinned to the Post to All frame with :has(): the automations chapter
 * shares these classes and keeps its own geometry.
 * DESKTOP ONLY — below 1024px the reel's narrow rules own the layout.
 * -------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* the card's scale itself lives INLINE (PostToAllShowcase size={1.22}
     from HomeProductReel) — a transform rule here can never win against
     it; only the opened-up window below is this sheet's job */
  .home-light [class*="max-h-[68vh]"]:has([data-pta-root]) {
    max-height: min(84vh, 760px);
  }
  .home-light [class*="left-[calc(44vw+56px)]"]:has([data-pta-root]) {
    left: calc(41vw + 40px);
    right: calc(56vw - 56px - 60vh);
  }
}

/* --- 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;
}

/* --- 12. the intro orbit stops slicing ------------------------------ *
 * Kedem: "there is a cut off on the logos where the post to all logo
 * animation is." The ring's platform marks pass the stage's top edge and
 * the stage's own overflow-hidden cut them in half. Same fix /agencies
 * uses on the same ring: the stage stops clipping and a mask fades the
 * top 140px instead, so a mark dissolves as it rises rather than being
 * sliced — and the whole intro assembly sits 44px lower so fewer of them
 * ever reach the fade. DESKTOP ONLY: below 1024px the ring is smaller
 * and the reel's narrow rules own the layout.
 * -------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .home-light .reel-stage {
    /* vertical overflow must go (the mask cannot fade what the box
       already cut) — but horizontal stays CLIPPED: the scrub parks
       stage layers at xPercent +3, and with overflow-x open those
       hidden layers widen the page's scroll extent by ~3vw. `clip`
       does not create a scroll container. */
    overflow-x: clip;
    overflow-y: visible;
    mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 100%);
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0,
      #000 140px,
      #000 100%
    );
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
  }
  .home-light [class*="left-[21vw]"] {
    transform: translateY(44px);
  }
}
/* short viewports leave less air above the statement — the fade starts
   lower so the top marks stay clear of the navbar at every height */
@media (min-width: 1024px) and (max-height: 800px) {
  .home-light .reel-stage {
    mask-image: linear-gradient(
      180deg,
      transparent 40px,
      #000 190px,
      #000 100%
    );
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 40px,
      #000 190px,
      #000 100%
    );
  }
}

/* --- 13. the video card stops being cut ----------------------------- *
 * Kedem: "there is a cut off on the video frame." The card column is
 * centred in the fit window, and at the larger scale it stood ~10px
 * taller than that window — whose `overflow: hidden` is !important in
 * globals.scss, so it cannot be released — and the top of the phone got
 * sliced. The extra height was the in-product reassurance line under the
 * status ("You can leave this page…"): app chrome, not a sales point,
 * and /agencies drops it from this same card for the same reason.
 * Without it the column is ~55px shorter, so the card centres ~27px
 * lower and clears the window with room at every viewport height.
 * -------------------------------------------------------------------- */

.home-light [data-pta="reassure"] {
  display: none;
}