/* ============================================================================
   /use-case/* — light-mode port of the Webflow use-case pages.

   Inlined into each generated page by scripts/build.mjs. Only what's unique to
   this template lives here: the split hero, the logo marquee, the alternating
   feature rows, the product feature grid, and the FAQ accordion. Everything
   else — the Webflow spacing/type scale, .cu-section, quotes, the spotlight
   video block, the stats band, the scroll reveal — is shared with /customers
   and comes from /blog/marketing.css.

   Same palette remap and same 991/767 breakpoints as that file.
   ============================================================================ */

/* ── HERO ─────────────────────────────────────────────────────────────────── */
/* Text left, product video right. The video is the wider half on the original,
   so the columns aren't even. */
.uc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--cu-medium);
}
.uc-hero h1 {
  margin-top: var(--cu-small);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--cu-h1);
  line-height: var(--cu-h1-lh);
  letter-spacing: -1px;
  color: var(--ink);
  text-wrap: balance;
}
.uc-hero .cta { margin-top: var(--cu-mid); }

/* The category pill above the headline. No border: it's a label for where you
   are, not a second call to action competing with the CTA four lines below it,
   and the white against the page is enough to read as a pill. */
.uc-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--cu-card);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}
.uc-tag svg { display: block; width: 16px; height: 16px; }

/* ── MEDIA (hero + feature rows) ──────────────────────────────────────────── */
/* A poster image sets the box's real aspect ratio and the looping clip is laid
   over it, which is how the Webflow original works: the first frame is on screen
   at first paint and the video swaps in when it has enough data, so the layout
   never jumps and a blocked/failed video still leaves a finished-looking page.

   Rounded with the same radius as the spotlight video on /customers. */
.uc-media {
  position: relative;
  border-radius: var(--cu-medium);
  overflow: hidden;
  background: #e6e6e3;
  /* The frame the Video Skills page puts around its media, so every clip across
     the site is mounted the same way. Near-white at 60% reads as a soft inner
     lip on the page and a bright edge on a dark clip, which is the point — it
     separates the media from whatever it's sitting on without drawing a line. */
  border: 2px solid rgba(245, 245, 245, 0.6);
}
.uc-media > img {
  display: block;
  width: 100%;
  height: auto;
}
.uc-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No poster: the clip carries the box on its own, at the ratio it was cut to. */
.uc-media--bare > video { position: static; aspect-ratio: 16 / 10; }

/* ── LOGO MARQUEE ─────────────────────────────────────────────────────────── */
.uc-logos-band { padding-top: var(--cu-large); }
.uc-logos {
  /* Full-bleed: the strip runs edge to edge while the caption above it stays
     within the page margins. */
  margin: var(--cu-mid) calc(var(--cu-page-margin) * -1) 0;
  overflow: hidden;
  /* Fade both ends so logos enter and leave instead of being cut off. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
/* Two identical tracks side by side, translated by exactly one track width —
   the seam lands where the second copy's first logo sits on the first copy's,
   so the loop has no visible jump. */
.uc-logos-track {
  display: flex;
  width: max-content;
  animation: uc-logos 46s linear infinite;
}
.uc-logos-set {
  display: flex;
  align-items: center;
  gap: var(--cu-large);
  padding-right: var(--cu-large);
}
@keyframes uc-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* Nothing scrolls: the strip becomes a static, wrapping logo row. */
  .uc-logos { -webkit-mask-image: none; mask-image: none; margin-inline: 0; }
  .uc-logos-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .uc-logos-set:last-child { display: none; }
  .uc-logos-set { flex-wrap: wrap; justify-content: center; gap: var(--cu-mid) var(--cu-large); padding-right: 0; }
}

/* ── FEATURE ROWS ─────────────────────────────────────────────────────────── */
.uc-splits {
  display: flex;
  flex-direction: column;
  gap: var(--cu-huge);
  margin-top: var(--cu-huge);
}
/* When the rows open their section — no heading, no lightbox above them — the
   section's own top padding is already the gap. */
.uc-splits--lead { margin-top: 0; }
.uc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  /* Top-aligned, not centred: the copy starts level with the top of the clip,
     which is what gives the sticky below something to travel through. */
  align-items: start;
  gap: var(--cu-medium);
}
/* The copy rides down the row as you scroll past it, pinning 40vh from the top
   once it gets there and releasing at the bottom of its own row — the original's
   behaviour, and its 40vh. The clip is the taller half, so the effect is the
   heading holding still while the video moves behind it.

   Nothing needs to opt in or out: sticky simply has no travel until an element's
   row is taller than it is, so a short row just renders as an ordinary one. */
.uc-split-text {
  position: sticky;
  top: 40vh;
}
/* Every other row flips, so the page doesn't read as one long left rail. Order
   rather than direction:rtl so the source stays text-then-video for a reader
   who gets the single-column layout. */
.uc-split:nth-child(even) .uc-split-text { order: 2; }
/* The columns flip with it. `order` reorders what goes *into* the columns
   without reordering the columns themselves, so on its own it drops the media
   into the 1fr half and every other clip renders a size smaller than the one
   above it. Two rows of the same asset ended up visibly different widths.
   Reset with everything else when the grid goes single-column below. */
.uc-split:nth-child(even) {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.uc-split h3 {
  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);
  text-wrap: balance;
}
.uc-split p {
  margin: var(--cu-small) 0 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--cu-label);
}

/* ── SECTION INTROS ───────────────────────────────────────────────────────── */
/* Centred heading, optionally with a standfirst under it. Shared by the "How
   to…", features, and FAQ sections so they open the same way. */
.uc-intro { text-align: center; }
.uc-intro .cu-dek { margin-inline: auto; }
/* A shorter measure than the default dek, so a standfirst breaks into a few
   even lines under a two-line heading rather than running the full width of the
   container. In ch rather than px so it tracks the type scale down the
   breakpoints, and still holds its measure if Roobert fails to load.

   36 rather than 35: one character narrower and the features standfirst wraps
   inside "studio-quality", leaving "quality." alone on a fourth line. */
.uc-dek--tight { max-width: 36ch; }

/* The stats band leads a section here rather than sitting inside one, so its
   heading carries h2 weight instead of the h3 the customer wall uses. */
.uc-stats .cu-stats-title {
  max-width: 760px;
  font-size: var(--cu-h2);
  line-height: var(--cu-h2-lh);
  text-wrap: balance;
}

/* ── PRODUCT FEATURE GRID ─────────────────────────────────────────────────── */
/* Twelve columns, and each card declares its own width in them (--span, set
   from the data). The rows tile as 12 / 4+8 / 12 / 8+4, which is what keeps six
   cards from reading as a spec sheet. */
.uc-feature-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--cu-tiny);
  margin-top: var(--cu-large);
}
/* These cards stay DARK on the light page, and that's deliberate rather than a
   remap that was missed.

   Everywhere else on this page the palette flips (see marketing.css) because the
   content is type and photography, which read either way. These six cards are
   different: the clips are screen recordings of Capsule's dark UI, so the card
   colour isn't decoration — it's the colour the animation is already painted in.
   Lighten the card and the video sits in it as a hard-edged dark rectangle, and
   the scrim under the text becomes a grey haze lying on top of the product
   instead of the card dissolving into it.

   So the whole treatment is ported from Webflow as-is: --bg-lvl-2 for the card,
   the video filling it, and a 16rem scrim of that same colour under centred
   text. Every value below was read off the live page's computed styles. */
.uc-feature {
  --uc-dark: #1d2021;              /* Webflow's --bg-lvl-2 */
  grid-column: span var(--span, 4);
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--uc-dark);
  border-radius: var(--cu-mid);
}
/* The clip's box is always the whole card; how it sits inside that box is
   per-clip data (--fit / --pos, see PRODUCT_FEATURES). The six were cut at six
   different aspect ratios against cards of three different widths, so there's
   no one rule that fills every card — the original tunes each one too, and
   these are its values.

   Where the clip is contained rather than cropped, the card's own dark colour
   fills what it doesn't reach, so the letterbox never reads as one. */
.uc-feature-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--fit, cover);
  object-position: var(--pos, 50% 50%);
  display: block;
}
/* The scrim: solid for the top 28%, gone by 16rem. Deep enough that the copy
   never has to compete with whatever the animation is doing behind it, and long
   enough that there's no visible edge where it ends. */
.uc-feature-fade {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 16rem;
  background: linear-gradient(180deg, var(--uc-dark) 28%, rgba(29, 32, 33, 0));
  pointer-events: none;
}
.uc-feature-text {
  position: relative;
  z-index: 2;
  max-width: 360px;
  margin: 0 auto;
  padding: var(--cu-mid) var(--cu-mid) 0;
  text-align: center;
  /* Last line of defence for a bright frame drifting up behind a descender. */
  text-shadow: 0 1px 12px var(--uc-dark);
}
/* Title Case, as on the original — and done in CSS there too, so the copy in
   scripts/content/use-cases.mjs stays in sentence case and reads normally
   everywhere else it might be used. */
.uc-feature h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(var(--cu-h3) * 0.8);
  line-height: 1.2;
  text-transform: capitalize;
  color: #f1f1f3;                  /* Webflow's dark-mode primary */
  text-wrap: balance;
}
.uc-feature p {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 26px;
  color: #a3a3a3;                  /* Webflow's dark-mode secondary */
}

.uc-center { display: flex; justify-content: center; margin-top: var(--cu-large); }

/* ── QUOTE ATTRIBUTION ────────────────────────────────────────────────────── */
/* Logo above the byline, both under the quote — the single-customer version of
   the /customers spotlight row. */
.uc-quote-attrib {
  display: flex;
  flex-direction: column;
  gap: var(--cu-small);
  margin-top: var(--cu-mid);
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
/* Each row is its own card, as on the original — same 16px radius, same 24px
   between them, same 40px padding, and the same inversion where the question is
   the muted grey and the answer is full-strength ink. Only the card colour
   flips, dark → white.

   Native <details>, so the accordion works with no JS at all and each row is
   already keyboard- and screen-reader-correct.

   interpolate-size is what makes the height animation possible: it's inherited,
   so setting it here lets `block-size: auto` below be a transition endpoint
   rather than a discrete jump. Scoped to the FAQ rather than :root so it can't
   quietly change how anything else on the page animates. */
.uc-faq {
  margin-top: var(--cu-mid);
  interpolate-size: allow-keywords;
}
.uc-faq details {
  background: var(--cu-card);
  border-radius: 16px;
}
.uc-faq details + details { margin-top: var(--cu-small); }
.uc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cu-small);
  padding: var(--cu-mid);
  cursor: pointer;
  list-style: none;
  font-size: 20px;
  line-height: 28px;
  color: var(--cu-label);
  transition: color 0.2s ease;
}
.uc-faq summary::-webkit-details-marker { display: none; }
.uc-faq summary:hover,
.uc-faq details[open] summary { color: var(--ink); }
/* Chevron, drawn rather than shipped as an asset — it's two lines. */
.uc-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.32s cubic-bezier(.4, 0, .2, 1);
}
.uc-faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.uc-faq-body {
  margin: 0;
  /* No top padding: the trigger's own 40px is the gap to the answer. The
     original holds the answer to half the card's width; full width reads
     better here, and it's the same measure the question above it is set to. */
  padding: 0 var(--cu-mid) var(--cu-mid);
  font-size: 20px;
  line-height: 30px;
  color: var(--ink);
  text-wrap: pretty;
}
/* The open/close animation. ::details-content is the only handle on the part of
   a <details> that appears and disappears, so it's the only way to animate one
   without taking the toggle over in JS.

   Two properties have to move together: the height, and content-visibility —
   which is discrete, so it needs allow-discrete to hold the content on screen
   for the length of the close rather than blanking it on frame one.

   Everywhere this isn't supported the row still opens and closes, just
   instantly. The accordion never depends on it. */
@supports selector(::details-content) {
  .uc-faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.32s cubic-bezier(.4, 0, .2, 1),
      content-visibility 0.32s allow-discrete;
  }
  .uc-faq details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-faq details::details-content { transition: none; }
  .uc-faq summary::after { transition: none; }
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  /* The hero and the feature rows stack; the video goes under its copy in both,
     which is why the source order is text-first. */
  .uc-hero-grid,
  .uc-split { grid-template-columns: minmax(0, 1fr); gap: var(--cu-mid); }
  /* Stacked, there are no columns left to flip. */
  .uc-split:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .uc-split:nth-child(even) .uc-split-text { order: 0; }
  /* Stacked, the copy sits above its clip in a row of its own, so there's
     nothing to stick against — and pinning it at 40vh would drag it down over
     the video it belongs to. */
  .uc-split-text { position: static; }
  .uc-splits { gap: var(--cu-large); margin-top: var(--cu-large); }
  .uc-splits--lead { margin-top: 0; }
  .uc-media { border-radius: var(--cu-mid); }
}

@media (max-width: 767px) {
  /* One card per row, spans ignored — same breakpoint the original collapses
     its 12-column grid at. */
  .uc-feature-grid { grid-template-columns: minmax(0, 1fr); }
  .uc-feature { grid-column: auto; }
  /* Single column, so the title stops shrinking with the scale and takes the
     full h3 size — the original does the same here. */
  .uc-feature h3 { font-size: var(--cu-h3); }
  .uc-split p { font-size: 17px; line-height: 26px; }
  .uc-faq summary { font-size: 18px; line-height: 26px; padding: var(--cu-smaller); }
  .uc-faq-body { padding: 0 var(--cu-smaller) var(--cu-smaller); font-size: 17px; line-height: 26px; }
  .uc-logos-set { gap: var(--cu-medium); padding-right: var(--cu-medium); }
}