/* page/home.css — page-scoped CSS for the home page ONLY.
   Loaded last, so it wins over every component stylesheet.
   Extracted verbatim from the in-body <style> blocks of home-spotlight-v2.html. */

/* Mid-page CTA banners removed 2026-09-02 (directed) — both are .ctx-cta now. */

/* ============================================================
   HOME CAROUSELS · preserve the moving track, clip at its viewport

   A carousel track must remain un-clipped: it is translated beneath its own
   viewport/rail, which is the element responsible for the visible crop.
   Clipping the track itself leaves only a narrow, partial slice of the slide
   set to move — the cause of the broken Enterprise results, trending, and
   testimonial sections on this page.

   components/styles.css used to carry a defensive global `div[class*="track"]`
   overflow rule that caused exactly that breakage; it was rescoped to
   `div[class*="rail"]` (see its own comment) so tracks are no longer caught by
   default. This override is kept as insurance against that regressing, not
   because anything currently clips these tracks.
   ============================================================ */
#cases .cc-car__track,
#testimonials .quotes__track,
#creator-infrastructure .tcm-track {
  overflow: visible;
}
#creator-infrastructure .tcm-track {
  max-width: none;
}
@media (prefers-reduced-motion: reduce) {
  /* Keep the case carousel's documented manual scroll-snap fallback operable. */
  #cases .cc-car--static .cc-car__track { overflow-x: auto; }
}

      /* Perf (scroll-lag fix): freeze the hero marquees while the hero is
         scrolled off-screen — paired with the IntersectionObserver in
         home-flow.js. GPU-composited transform while it plays. */
      #heartHero .marquee__track { will-change: transform; }
      #heartHero.is-idle .marquee__track { animation-play-state: paused !important; }
      /* Feedback: remove the pink→gold gradient border on the hero prompt card
         (the "thin pink line beside Find creators"). Keep the card's soft shadow;
         swap the gradient border-box for a plain subtle border. Page-scoped. */
      #heartHero .hv__prompt {
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        background: var(--white) !important;
      }
            /* Match % removed — re-flow the row grid to fill the freed column (no match). */
#creator-infrastructure .cc-row { grid-template-columns: 30px 46px minmax(0,1fr) auto auto; cursor: pointer; }
/* .cc-row__initials removed 2026-09-02 (directed) — every directory row now
   carries a real portrait, so the initials chip has no code path left. */
            @media (max-width: 860px) { #creator-infrastructure .cc-row { grid-template-columns: 26px 42px minmax(0,1fr) auto; } }
            @media (max-width: 560px) { #creator-infrastructure .cc-row { grid-template-columns: 24px 40px minmax(0,1fr); } }


/* ============================================================
   HOW IT WORKS · icon -> heading spacing — page-scoped
   components/process.css gives .proc-title `margin: 0`, so the gap between the
   44px icon chip and the heading is literally 0px — the only white between them
   is the heading's own font leading, which reads as a broken card. Give it a
   real spacing value. Page-scoped to #how-it-works; the shared component and
   its showcase are untouched (the zero-gap is a defect at source too — worth
   fixing in components/process.css once the designer signs off).
   ============================================================ */
#how-it-works .proc-title { margin-top: 12px; }

/* ============================================================
   ROI CALCULATOR · sliders left, stats right — page-scoped
   Request: re-flow the single stacked card into two columns —
   .roi-calc__inputs (sliders) on the left, .roi-calc__outputs
   (hours saved / estimated annual savings) on the right. Falls
   back to the original stacked/centered layout at <=760px.
   home-flagship.css's base .roi-calc* rules are untouched.
   ============================================================ */
.roi-calc {
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  text-align: left;
}
.roi-calc__inputs { grid-column: 1; grid-row: 1; }
.roi-calc__outputs {
  grid-column: 2;
  grid-row: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  margin: 0;
  padding: 0 0 0 40px;
  border-top: none;
  border-left: 1px solid rgba(11, 11, 11, 0.08);
}
.roi-calc__note,
.roi-calc__cta { grid-column: 1 / -1; justify-self: center; }
.roi-calc__note {
  margin: 28px 0 18px;
  padding-top: 22px;
  border-top: 1px solid rgba(11, 11, 11, 0.08);
  text-align: center;
}
@media (max-width: 760px) {
  .roi-calc { display: block; max-width: 640px; text-align: center; }
  .roi-calc__outputs {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 36px;
    margin: 32px 0 18px;
    padding: 28px 0 0;
    border-left: none;
    border-top: 1px solid rgba(11, 11, 11, 0.08);
  }
  .roi-calc__note { margin: 0 0 22px; padding-top: 0; border-top: none; }
}

/* ============================================================
   EXPLORE · block-to-block rhythm — page-scoped
   components/flow-blocks.css gives .fb-block `padding: clamp(40px, 6vw, 72px) 0`,
   so two adjacent demo blocks sit up to 144px apart — the largest gap left on
   the page after the section rhythm was halved. Halve it here too, scoped to
   #explore, so the shared component (also used by features.html) is untouched.
   ============================================================ */
#explore .fb-block { padding: clamp(20px, 3vw, 36px) 0; }

/* ============================================================
   ENTERPRISE WORKFLOW · icon orbs — page-scoped
   home-spotlight.js renders an icon (not a number) into the shared
   .proc-num orb for this treatment; size it here rather than in
   components/process.css, since every other .proc-num usage still
   holds plain digit text.
   ============================================================ */
#enterprise .proc-flow .proc-num svg { width: 22px; height: 22px; }

/* ============================================================
   FROM THE BLOG · articles teaser card — page-scoped
   3-card static grid, styled to match page/articles.css's .ar-card
   (this page never loads that stylesheet, so the look is re-created
   here rather than pulled in wholesale). Shares --r-card/--surface-2
   tokens from home-flagship.css; no shared component touched.
   ============================================================ */
#articles .ha-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
  margin-top: clamp(28px, 4vw, 40px);
}
.ha-card { display: flex; flex-direction: column; }
.ha-card__media {
  display: block; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(11, 11, 11, 0.07);
}
.ha-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1); }
.ha-card__cat {
  display: inline-block; margin: 14px 0 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text);
}
.ha-card__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  font-size: 17px; line-height: 1.3; color: var(--primary); margin: 7px 0 0; text-wrap: pretty;
}
.ha-card__link { display: block; color: inherit; }
.ha-card__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-card); }
@media (hover: hover) and (pointer: fine) {
  .ha-card:hover .ha-card__media img { transform: scale(1.04); }
  .ha-card:hover .ha-card__title { text-decoration: underline; text-underline-offset: 3px; }
}
.ha-more { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 36px); }

@media (max-width: 980px) { #articles .ha-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; } }
@media (max-width: 560px) { #articles .ha-grid { grid-template-columns: 1fr; gap: 26px; } }

@media (prefers-reduced-motion: reduce) {
  .ha-card__media img { transition: none; }
  .ha-card:hover .ha-card__media img { transform: none; }
}