/* ============================================================================
   Shared marketing-page foundation — the light-mode port of Webflow's layout
   system, plus the components more than one migrated page needs.

   Loaded by: /customers, the /use-case/* pages.

   This started life inside customers.css, which was the first page taken over
   from Webflow. The use-case pages are the same design language — same page
   width, same spacing scale, same quote treatment, same stats band, same scroll
   reveal — so it lives here as a linked stylesheet, and each page's own file
   carries only what's actually unique to it (customers.css: the card wall;
   use-case.css: the split rows, feature grid, and FAQ).

   Fonts, tokens, and resets come from global.css; the nav, marquee, footer, and
   the .cta buttons from nav.css + chrome.css; the video play button and lightbox
   from video.css.

   The measurements below are Webflow's own, read out of its published stylesheet
   rather than eyeballed — same 1600px max width, same 64/32/16 page margins,
   same 1fr 1fr 1fr grids. Only the palette is remapped:

     page background   #080808  →  var(--bg)  #f4f4f2
     card background   #1D2021  →  #fff              (same subtle lift, inverted)
     primary text      #F1F1F3  →  var(--ink)  #111
     quote / secondary #A3A3A3  →  #3f3f3f    (Webflow's own light-mode value)
     labels / captions #707070  →  #707070            (unchanged — already the
                                   muted grey the other marketing pages use)
     accent            #C3FF51  →  var(--accent)  #c3ff51

   Breakpoints are Webflow's (991px / 767px) so the spacing and type steps land
   where the original's do.

   The cu- prefix is historical (customers was first) and is kept deliberately:
   renaming it would churn every page for no gain, and it reads as "the shared
   marketing vocabulary" everywhere it appears.
   ============================================================================ */

:root {
  /* Webflow's --_adaptive---spacing--* scale. */
  --cu-page-margin: 64px;
  --cu-huge: 128px;
  --cu-large: 96px;
  --cu-medium: 64px;
  --cu-mid: 40px;
  --cu-smaller: 32px;
  --cu-small: 24px;
  --cu-tiny: 12px;
  --cu-max: 1600px;

  /* The oversized radius that makes the customer logo cards read as circles or
     pills. It's viewport-relative in the original, so it grows with the display;
     once it exceeds half the card, the browser clamps it into a true ellipse. */
  --cu-blob: calc(7.5vw + 7.5vh);

  /* Type — Webflow's --_adaptive---text--* scale. */
  --cu-h1: 64px;
  --cu-h1-lh: 68px;
  --cu-h2: 48px;
  --cu-h2-lh: 56px;
  --cu-h3: 40px;
  --cu-h3-lh: 48px;
  /* Two quote scales: the spotlight quote and the smaller card quotes. */
  --cu-quote-lg: 48px;
  --cu-quote-lg-lh: 56px;
  --cu-quote-sm: 32px;
  --cu-quote-sm-lh: 40px;

  --cu-ink-2: #3f3f3f;     /* quotes — Webflow's light-mode "secondary" */
  --cu-label: #707070;
  --cu-card: #fff;
}
@media (max-width: 991px) {
  :root {
    --cu-page-margin: 32px;
    --cu-huge: 96px;
    --cu-large: 80px;
    --cu-medium: 48px;
    --cu-mid: 36px;
    --cu-smaller: 28px;
    --cu-small: 20px;
    --cu-h1: 56px;
    --cu-h1-lh: 60px;
    --cu-h2: 40px;
    --cu-h2-lh: 48px;
    --cu-h3: 32px;
    --cu-h3-lh: 39px;
    --cu-quote-lg: 40px;
    --cu-quote-lg-lh: 48px;
    --cu-quote-sm: 28px;
    --cu-quote-sm-lh: 36px;
  }
}
@media (max-width: 767px) {
  :root {
    --cu-page-margin: 16px;
    --cu-huge: 80px;
    --cu-large: 64px;
    --cu-medium: 40px;
    --cu-mid: 32px;
    --cu-smaller: 24px;
    --cu-small: 16px;
    --cu-h1: 40px;
    --cu-h1-lh: 46px;
    --cu-h2: 32px;
    --cu-h2-lh: 38px;
    --cu-h3: 24px;
    --cu-h3-lh: 30px;
    --cu-quote-lg: 32px;
    --cu-quote-lg-lh: 40px;
    --cu-quote-sm: 24px;
    --cu-quote-sm-lh: 32px;
  }
}

/* Webflow's .main-container: full width up to 1600, page margins either side.
   Nothing inside is capped further, which is what makes the customer grid fill
   the page the way the original does. */
.cu-section {
  width: 100%;
  max-width: var(--cu-max);
  margin: 0 auto;
  padding: var(--cu-huge) var(--cu-page-margin) 0;
}
.cu-section--pad-y { padding-bottom: var(--cu-huge); }
/* A constant 120px of air between the last block of content and the marquee.
   Measured to the marquee TEXT, not to the strip's box — the strip paints the
   same var(--bg) as the page, so its box edge is invisible and the text is the
   only thing a reader can see the gap against. chrome.css reckons its own
   spacing the same way ("total visual padding above/below text stays 80/120").

   That 80px above the text is already there: 48px on .marquee-strip plus 32px
   on the inner .marquee-hover zone. So the page owes the remaining 40px.

   Applied to the last section rather than to <main> so it also overrides the
   128px bottom padding of --pad-y when a padded section lands last. */
main > .cu-section:last-child { padding-bottom: calc(120px - 80px); }
/* Webflow's .container-small / -medium / -large. */
.cu-narrow { max-width: 640px; margin: 0 auto; }
.cu-medium { max-width: 872px; margin: 0 auto; }
.cu-wide   { max-width: 1024px; margin: 0 auto; }

/* Standfirst under a heading. Left-aligned by default; a centred hero centres
   it by setting text-align on the section. */
.cu-dek {
  margin: var(--cu-small) 0 0;
  font-size: 20px;
  line-height: 28px;
  color: var(--cu-label);
}

/* ── SECTION HEADINGS ─────────────────────────────────────────────────────── */
.cu-h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--cu-h2);
  line-height: var(--cu-h2-lh);
  letter-spacing: -0.5px;
  color: var(--ink);
  text-wrap: balance;
}

/* Small uppercase-ish caption above a band (the logo wall's "Loved and trusted
   by tech giants"). Matches the muted label grey used everywhere else. */
.cu-caption {
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: var(--cu-label);
}

/* ── SPOTLIGHT (big video + the quote under it) ──────────────────────────── */
.cu-spotlight-media {
  position: relative;
  border-radius: var(--cu-medium);
  overflow: hidden;
  aspect-ratio: 1024 / 560;
  background: #e6e6e3;
  /* Same frame as .uc-media and the Video Skills page — every piece of media on
     the site is mounted identically. */
  border: 2px solid rgba(245, 245, 245, 0.6);
}
.cu-spotlight-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cu-spotlight-body { margin-top: var(--cu-medium); }
/* Quote left, attribution right, both sitting on the same baseline. */
.cu-spotlight-row {
  display: flex;
  align-items: flex-end;
  gap: var(--cu-mid);
}
.cu-spotlight-row .cu-quote { flex: 1 1 auto; }
/* align-items keeps the logo at its own width — as a stretched column item it
   would otherwise be pulled out to the width of the name below it.

   The max-width caps how much of the row a long job title can take. Sized to
   its content, "Sr. Manager, Video Marketing, HubSpot" sets on one line and
   claims a third of the row, leaving the quote — the thing anyone is actually
   here to read — noticeably narrower than the same quote beside a short title.
   A quarter is enough for two lines of title and never binds on a short one, so
   the quote keeps a consistent measure whoever it's attributed to. */
.cu-attrib {
  /* No shrink: max-width is what caps this column. Letting it shrink as well
     collapses it to min-content, breaking the title over four or five lines. */
  flex: 0 0 auto;
  max-width: 25%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.cu-attrib-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink);
}
.cu-attrib-title { font-size: 16px; line-height: 24px; color: var(--cu-label); }
.cu-spotlight-cta { display: flex; justify-content: center; margin-top: var(--cu-medium); }

/* ── QUOTES ───────────────────────────────────────────────────────────────── */
/* Same treatment as a pull quote in the Video First blog (.body-col .pullquote
   in blog.css): Serrif Light, an oversized opening mark centred on the text's
   left edge so it hangs into the margin, and a first-line indent that clears
   it — so line two onward sits flush left. The ratios are the blog's, expressed
   in em so both quote scales inherit them: 96px mark and 35px indent for a 40px
   quote → 2.4em and 0.875em.

   The closing mark is inline at the quote's own size, not enlarged. Both are
   pseudo-elements so they can't be selected or read aloud. */
.cu-quote {
  position: relative;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;                  /* Serrif Light, as in the blog */
  color: var(--cu-ink-2);
  font-size: var(--cu-quote-sm);
  line-height: var(--cu-quote-sm-lh);
  letter-spacing: -0.01em;
  text-indent: 0.875em;
  text-wrap: pretty;
}
.cu-quote::before {
  content: "\201C";                  /* left double quotation mark */
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);       /* centre on the text edge, so it hangs */
  text-indent: 0;                    /* don't inherit the first-line indent */
  font-size: 2.4em;
  line-height: 1;
}
.cu-quote::after { content: "\201D"; }

/* The spotlight quote is the larger of the two scales. */
.cu-spotlight-row .cu-quote,
.cu-quote--lg {
  font-size: var(--cu-quote-lg);
  line-height: var(--cu-quote-lg-lh);
}

/* ── IMPACT STATS BAND ────────────────────────────────────────────────────── */
.cu-stats-title {
  max-width: 640px;
  margin: 0 auto var(--cu-mid);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--cu-h3);
  line-height: var(--cu-h3-lh);
  letter-spacing: -0.5px;
  color: var(--ink);
}
/* Gutters, not gaps: each stat is a card now, so the spacing between them is
   the seam the walls use rather than the wide air a bare number needed. */
.cu-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cu-tiny);
  width: 100%;
}
/* Two stats sit as a centred pair rather than in half-page columns. Three fill
   the width and read as a band; two given the same treatment end up a third of
   a page apart, with each card floating alone in its own column — so the pair
   is capped and centred instead.
   Equal columns rather than max-content: sized to their content, two cards come
   out different widths ("91%" against "5x"), which reads as a mistake once
   there's a box around each one. */
.cu-stat-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 680px;
  margin-inline: auto;
}
/* Every stat on the site sits on a white card, matching the stat cards in the
   customer walls — so a figure reads the same whether it's in a wall or in a
   band of its own. Centred vertically as well as horizontally, so a stat with
   no label still sits properly in its card. */
.cu-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: var(--cu-mid);
  background: var(--cu-card);
  border-radius: var(--cu-mid);
}
.cu-stat-num {
  display: block;
  margin-bottom: var(--cu-tiny);
  font-weight: 300;              /* Roobert Light */
  font-size: var(--cu-huge);
  line-height: var(--cu-huge);
  color: var(--ink);
}
.cu-stat-label { margin: 0; font-size: 20px; line-height: 28px; color: var(--cu-label); }

/* Deliberately NOT font-variant-numeric: tabular-nums on the stat numerals.
   It's the obvious way to stop a counter jittering, but Roobert's tabular
   figures are far wider than its proportional default — "111999" measures 484px
   against 366px at the 128px stat size, most of it the "1" — so it visibly
   loosens the numbers the page is built around. It also wouldn't buy much: the
   roll changes digit COUNT (0 → 10 → 93), and no figure set holds width across
   that. The slight re-centring per tick reads as a counter doing its job. */

/* ── LOGOS ────────────────────────────────────────────────────────────────── */
/* Every logo is sized to equal optical weight: the size comes from its aspect
   ratio (see logoHeight() in scripts/lib/customers.mjs) and rides in as
   --logo-w. A flat height would make wide wordmarks cover ~3× the area of
   squarish marks.

   Sized by WIDTH with height:auto, so that max-width degrades correctly. Setting
   an explicit height instead would leave the replaced-element sizing rules with
   nothing to recompute when max-width clamps, and the logo would squash by a few
   percent; with height:auto it shrinks proportionally.

   No breakpoint scaling, deliberately. The space a logo has is its container's
   content width, and that isn't monotonic in viewport width — the customer grid
   drops from 3 columns to 2 to 1, so cards get WIDER at those breakpoints, not
   narrower. It's tightest around 1100px (3 columns, narrow cards) and on small
   phones, which max-width tracks directly. */
.cu-logo {
  display: block;
  width: var(--logo-w, 128px);
  height: auto;
  max-width: 100%;
}
/* Only for logos still on the white artwork from the old dark site (Sanity's
   "Logo file is white" flag). Full-colour assets render untouched. */
.cu-logo--invert { filter: brightness(0); }

/* ── ATTRIBUTION BYLINE ───────────────────────────────────────────────────── */
.cu-byline { display: flex; align-items: center; gap: var(--cu-tiny); }
.cu-avatar {
  width: var(--cu-medium);
  height: var(--cu-medium);
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
/* All three name styles are Roobert SemiBold (600) — the weight global.css
   registers the SemiBold face at. */
.cu-byline-name { font-size: 16px; font-weight: 600; line-height: 24px; color: var(--ink); }
.cu-byline-title { font-size: 16px; line-height: 24px; color: var(--cu-label); }

/* ── SCROLL REVEAL ────────────────────────────────────────────────────────── */
/* Driven by /blog/reveal.js. Every rule here is scoped to .reveal-ready — a
   class an inline <head> script sets only when IntersectionObserver exists and
   the visitor hasn't asked for reduced motion — AND to the data-reveal*
   attributes, which the script strips once an element has arrived. So the
   hidden state can only exist while something is actively able to undo it: no
   JS, an old browser, or a failed script load all leave the page fully legible.

   Blur is the expensive part of the effect, so will-change is dropped along
   with the attribute rather than left on every card for the life of the page. */
.reveal-ready [data-reveal] {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(18px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--rv-delay, 0s);
  will-change: opacity, filter, transform;
}
.reveal-ready [data-reveal].is-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .cu-stat-num { font-size: 96px; line-height: 96px; }
  /* Quote and attribution stop sharing a baseline and stack — so the cap on the
     attribution's width has nothing left to protect and would just squeeze it
     into a narrow column of its own. */
  .cu-spotlight-row { flex-direction: column; align-items: flex-start; gap: var(--cu-smaller); }
  .cu-attrib { max-width: none; }
  /* Stacked, but still cards, so they keep the seam rather than the wide air
     they used when the numbers sat bare on the page. */
  .cu-stat-row, .cu-stat-row--2 { grid-template-columns: 1fr; gap: var(--cu-tiny); }
}

@media (max-width: 767px) {
  .cu-dek { font-size: 18px; line-height: 26px; }
  .cu-stat-num { font-size: 80px; line-height: 84px; }
  .cu-avatar { width: 48px; height: 48px; }
}