/* ===========================================================================
   Use cases — page-specific styles.
   Loaded AFTER tokens.css and shell.css, so scoped overrides here win on
   source order. Shared shell (nav, footer, buttons, .frame, .cm-h, .sec-label)
   belongs in shell.css, not here.
   =========================================================================== */
/* Use-cases hero — same universe as the how-it-works hero (Figma 650:1052).
   Identical light gradient, particle field, type and button. ONE thing differs: the streams and the
   travelling beams run ACROSS the view (left to right) instead of away from you into the horizon.
   How it works = you look INTO the field (depth). Use cases = you travel ALONG it (breadth).
   NOTE: this block is duplicated from how-it-works.html's hero. Once the concept is signed off it should
   be lifted into shell.css and both pages should share it. */
.uc-hero{position:relative;height:76vh;min-height:620px;   /* 85vh -> 76vh with the hero CTA removed (Tony/Chad 08-11): the next section peeking above the fold is now the scroll cue */overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background:linear-gradient(120deg, var(--soft) 0%, var(--panel) 40%, var(--surface) 66%)}
.uc-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;transform:translateY(32%)}   /* 26% -> 32% with how-it-works (2026-08-13): the 76vh hero put the crests against the sub-text. If the field washes out in the bottom vignette again (the old 34% problem), split the difference at 30. */
.uc-hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right, var(--surface) 0%, rgba(241,243,255,0) 12%),
    linear-gradient(to left, var(--surface) 0%, rgba(241,243,255,0) 12%),
    linear-gradient(to bottom, rgba(241,243,255,0) 66%, rgba(241,243,255,.55) 86%, var(--surface) 100%)}
/* ---------------------------------------------------------------------------
   TRIAL (2026-08-06): fades the wave behind the CTA so the button is not sitting
   on the line field. The canvas covers the whole hero, so the button overlaps it
   at any copy length — this mutes the lines locally instead of moving anything.

   TO REVERT: delete the class "uc-hero-soft" from <section class="uc-hero"> in
   use-cases.html. This block then does nothing and can be deleted too.
   --------------------------------------------------------------------------- */
.uc-hero.uc-hero-soft .uc-hero-vignette::after{content:"";position:absolute;
  left:50%;top:56%;transform:translate(-50%,-50%);
  width:min(720px,86%);height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse closest-side at center,
    var(--surface) 0%, rgba(241,243,255,.92) 38%, rgba(241,243,255,.6) 62%,
    rgba(241,243,255,.24) 80%, rgba(241,243,255,0) 100%)}

.uc-hero-inner{position:relative;z-index:2;text-align:center;padding:168px 24px 0;max-width:880px}
.uc-hero-inner h1{font-family:var(--display);font-weight:500;font-size:clamp(40px,7vw,68px);line-height:1.05;color:var(--ink);margin:0}
.uc-hero-inner h1 .accent{color:var(--action)}
.uc-sub{margin:24px auto 0;max-width:640px;font-family:var(--sans);font-weight:300;font-size:16px;line-height:24px;color:var(--ink)}
/* light page: same overrides how-it-works uses so the nav reads over the light hero */
/* hero CTA: same light-page treatment the how-it-works hero button uses (how-it-works.html:41,43).
   Without this the secondary button washes out against the light gradient. */
/* light-page .btn-secondary — was scoped to the hero, now page-wide so the compounding card reuses it
   rather than declaring a second button style. Matches Figma 744:13508 exactly. */
@media (max-width:640px){ .uc-hero-inner{padding-top:112px} }
/* section rhythm matches how-it-works (.hiw-weeks uses 112px top) — layout only, no new type */
/* A fixed, full-viewport backdrop the whole page sits on. The sections no longer paint their own
   background: a dimming BLOCK under a static light block always leaves a hard edge between them, which is
   what read as abrupt. With one backdrop, the entire screen dims at once and there is no boundary at all. */
.uc-backdrop{position:fixed;inset:0;z-index:0;background:var(--surface);pointer-events:none}
.uc-sec{position:relative;z-index:1;padding:112px 0 80px}
/* ---- lower band ------------------------------------------------------------------------------------
   .footer and .footer-card are deliberately TRANSPARENT in shell.css — the footer floats on a dark
   background supplied by a wrapper. how-it-works has .hiw-lower, the homepage has .lower. use-cases had
   neither, so the white footer text was rendering on the light page. Matches Figma 667:1784, the dark
   band that runs from the See-it-work section to the bottom of the page.
   ---------------------------------------------------------------------------------------------------- */
/* Lights going off, driven by SCROLL — not a gradient.
   A CSS gradient is a static painting you scroll past; the colour at any point on the page never changes.
   Here the background is a SOLID colour that uc-play.js recomputes from scroll position, so the page
   actually dims as you move. --dim runs 0 (light) -> 1 (dark) and walks the brand ramp on the way down.
   The fallback value keeps it readable if JS never runs. */
.uc-lower{position:relative;z-index:1;padding-top:160px}   /* breathing room between the pinned form's last frame and the footer (Victoria, 2026-08-13) */
/* NO underlap, NO curtain, NO sticky closer (removed 2026-08-13). Three attempts at sliding the
   form beneath the pinned scene each broke a different way (form bleeding through the dissolve,
   form scrolling away with the curtain, footer riding over the pinned form). The section now
   follows in plain document flow: the scene dissolves, the dim rides the dissolve down, and the
   form scrolls in on the dark like every other section. */
/* ---- 03 · The compounding play (Figma 744:13502) ---------------------------------------------------
   Pinned scroll sequence: the ghost headline fades 0 -> 1 and scales up, then the white card rises in
   over it. Driven by uc-play.js. Type reuses .cm-h and .cm-sub; the button reuses .btn .btn-secondary.
   ---------------------------------------------------------------------------------------------------- */
.uc-play{position:relative;z-index:1}
.uc-play-track{position:relative;height:300vh}   /* 240 -> 300 (2026-08-13): the pin gains a long REST TAIL — the staged show cues at 64% and the section stays held for the remaining ~72vh, so the show always completes on screen and the form persists before release */
.uc-play-sticky{position:sticky;top:0;height:100vh;min-height:720px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}   /* transparent: the scene sits on the .uc-backdrop, whose colour the dim drives */
.uc-play-ghost{position:absolute;left:0;right:0;text-align:center;pointer-events:none;
  font-family:var(--display);font-weight:600;font-size:clamp(48px,8.4vw,120px);line-height:1;
  color:var(--soft)}   /* STATIC since 2026-08-13 (incredibles.dev reference): the title is a fixture of the page, only the card animates */
/* the blurred pill behind the card (Figma 744:13640: #7C98F8, blur 42, opacity .6). Drawn as a gradient
   rather than filter:blur() — same reason as Ava's underglow, a real blur re-rasterises on every scroll
   frame. Sized to include the blur bleed: 407x176 + 42 each side. */
.uc-play-glow{position:absolute;width:491px;height:260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(124,152,248,.6) 0%, rgba(124,152,248,.6) 58%,
    rgba(124,152,248,.24) 82%, rgba(124,152,248,0) 100%);opacity:0}
/* ACT 2 (2026-08-13): the closer sits INSIDE the pinned screen, absolutely stacked over the
   card's stage, invisible until uc-play.js fades it in on the dark (0.90 -> 1.0 of the pin).
   Below 900px the pin is off and the closer just stacks after the card, always visible. */
.uc-play-sticky .closer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;padding:0;will-change:opacity,transform}
.uc-play-sticky .closer .frame{width:100%}
@media (max-width:900px){
  .uc-play-sticky .closer{position:static;display:block;opacity:1;pointer-events:auto;padding:64px 0 96px}
}
.uc-play-card{position:relative;width:752px;max-width:calc(100% - 48px);box-sizing:border-box;   /* 936 -> 752 (-20%, multiple of 8, Victoria 2026-08-13); side padding 128 -> 64 so the chart keeps most of its plot width (624 vs the old 680) */
  background:var(--white);padding:64px 64px 48px;display:flex;flex-direction:column;align-items:center;gap:32px;   /* trimmed 112/56/42 -> 64/48/32: the card read too tall (Victoria, 2026-08-13) */
  opacity:0;transform:perspective(1200px) rotateX(26deg) translateY(24px);transform-origin:50% 100%;will-change:opacity,transform}   /* hinged at the bottom edge: uc-play.js stands it up from 26deg as you scroll */
.uc-play-card .cm-h{line-height:48px;text-align:center;margin:0}      /* Figma 40/48 centred */
.uc-play-card .cm-sub{font-weight:400;text-align:center;margin:0;max-width:680px}
/* ---------------------------------------------------------------------------
   Compounding play chart (2026-08-07, Chad's note). Replaces the three stat
   lines. A step function under a smooth envelope: each plateau is a play the
   same team takes on, each riser is what it adds, and the risers grow (52, 64,
   88) so the total reads as compounding rather than linear.
   The steps draw on scroll; the labels follow one at a time.
   --------------------------------------------------------------------------- */
.uc-comp{margin:0;width:100%;max-width:560px;padding-bottom:64px}   /* the labels sit in this padding, below the plot */
.uc-comp-plot{position:relative;width:100%;aspect-ratio:720/240;margin:0 auto}
.uc-comp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
.uc-comp-steps{stroke:var(--action);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.uc-comp-dot{fill:var(--action)}

/* dotted drops from each riser down to its label — same device as the journey graphic */
.uc-comp-tick{position:absolute;width:0;border-left:1px dashed var(--soft);pointer-events:none}
.uc-comp-tick.t0{left:5.6%;top:78.8%;height:21.2%}    /* baseline start — the landing play */
.uc-comp-tick.t1{left:23.3%;top:68.3%;height:31.7%}
.uc-comp-tick.t2{left:41.9%;top:54.6%;height:45.4%}
.uc-comp-tick.t3{left:60.6%;top:37.1%;height:62.9%}
.uc-comp-tick.t4{left:79.2%;top:15.8%;height:84.2%}

.uc-comp-lab{position:absolute;top:calc(100% + 10px);transform:translateX(-50%);width:15%;text-align:center;
  font-family:var(--sans);font-weight:400;font-size:12px;line-height:16px;color:var(--deep)}
.uc-comp-lab.l0{left:7.5%}
.uc-comp-lab.l1{left:23.3%}
.uc-comp-lab.l2{left:41.9%}
.uc-comp-lab.l3{left:60.6%}
.uc-comp-lab.l4{left:79.2%}

/* entrance: the step line draws itself, then each label lands with its riser */
.uc-comp-steps{stroke-dasharray:900;stroke-dashoffset:900}
.uc-comp-dot,.uc-comp-tick,.uc-comp-lab{opacity:0}
.uc-comp.in .uc-comp-steps{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1) .2s}
.uc-comp.in .uc-comp-dot,
.uc-comp.in .uc-comp-tick,
.uc-comp.in .uc-comp-lab{opacity:1;transition:opacity .5s ease}
.uc-comp.in .t0,.uc-comp.in .l0{transition-delay:.6s}
.uc-comp.in .d1,.uc-comp.in .t1,.uc-comp.in .l1{transition-delay:.85s}
.uc-comp.in .d2,.uc-comp.in .t2,.uc-comp.in .l2{transition-delay:1.1s}
.uc-comp.in .d3,.uc-comp.in .t3,.uc-comp.in .l3{transition-delay:1.35s}
.uc-comp.in .d4,.uc-comp.in .t4,.uc-comp.in .l4{transition-delay:1.6s}
@media (prefers-reduced-motion:reduce){
  .uc-comp-steps{stroke-dashoffset:0}
  .uc-comp-dot,.uc-comp-tick,.uc-comp-lab{opacity:1}
  .uc-comp.in .uc-comp-steps,
  .uc-comp.in .uc-comp-dot,
  .uc-comp.in .uc-comp-tick,
  .uc-comp.in .uc-comp-lab{transition:none}
}
@media (max-width:640px){
  .uc-comp-lab{font-size:10px;line-height:14px;width:18%}
  }
@media (max-width:900px){
  .uc-play-track{height:auto}
  .uc-play-sticky{position:relative;height:auto;min-height:0;padding:80px 0;display:block}
  .uc-play-ghost{position:relative;opacity:.4;transform:none;margin-bottom:32px}
  .uc-play-card{opacity:1;transform:none;margin:0 auto;padding:56px 24px 40px;gap:32px}
  .uc-play-glow{display:none}
}
/* ---- 02 · The customer revenue journey (desktop 744:13646 / mobile 650:1458) ---------------------
   Two layers over the same area: .uc-journey-marks (wave + numbered pills + dotted drops) and
   .uc-stages (the label + description blocks). Desktop positions both absolutely on the 1360 grid.
   Mobile keeps the marks — compressed to 225px with the wave at 86px — and lets the stage text flow
   BELOW as a numbered list, which is why the number is a span inside the label rather than baked in.
   Type is identical on both: label Geist 400 18/48 --ink, description Geist 400 16/24 --deep.
   ---------------------------------------------------------------------------------------------------- */
/* Stage arrangement flipped 2026-08-02: 01 now leads ABOVE the curve, so it runs
   above / below / above / below / above. The wave SVG is unchanged.
   It is preserveAspectRatio="none" at a fixed 333px height, so the curve's vertical
   positions are constant at every viewport width. Measured off the live render, the
   curve's top edge sits 21 / 98 / 77 / 51 / 92 px below the wave box at stages 1-5
   (measured on the live render at each pill's own x, not estimated).
   Everything below is derived from those five numbers with a ~44px breathing gap, and
   every value is a multiple of 4. Wave dropped 108 -> 168 because stage 01 sits where
   the curve is highest: at the old offset it had 9px of clearance, which is not enough
   for the text plus its pill. Journey 441 -> 504 to hold the taller arrangement. */
.uc-journey{position:relative;height:504px;margin-top:64px}
.uc-journey-wave{position:absolute;left:0;top:168px;width:100%;height:333px;display:block;pointer-events:none}
.uc-journey .frame{position:relative;height:100%}
/* both layers OVERLAY the same 441px area. As block siblings they stacked vertically and pushed the
   stage text a full frame-height below the graphic. */
.uc-journey-marks,.uc-stages{position:absolute;inset:0}
.uc-stage{position:absolute;width:200px}
.uc-stage-label{font-family:var(--sans);font-weight:400;font-size:18px;line-height:48px;color:var(--ink);margin:0;white-space:nowrap}
.uc-stage-label .n{display:none}                                     /* desktop: the pill carries the number */
.uc-stage .cm-sub{font-weight:400;margin:0;max-width:200px}          /* Figma is 400; .cm-sub ships 300 */
.uc-stage-n{position:absolute;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border-radius:30px;background:var(--canvas);
  font-family:var(--display);font-weight:500;font-size:17px;line-height:34px;color:var(--white)}
.uc-stage-line{position:absolute;width:1px;
  background:repeating-linear-gradient(to bottom, var(--canvas) 0 2px, transparent 2px 7px);opacity:.6}
.uc-stage-line::before{content:"";position:absolute;top:-2px;left:-1.5px;width:4px;height:4px;
  border-radius:50%;background:var(--canvas)}
/* the end dot sits at the NUMBERED PILL's end of each drop line (2026-08-13, Victoria).
   Stages 2 and 4 have their pills at the line's top, so the default top dot is right;
   stages 1, 3 and 5 have their pills at the bottom, so their dots move there. */
.uc-stage-line.s1::before,
.uc-stage-line.s3::before,
.uc-stage-line.s5::before{top:auto;bottom:-2px}
/* desktop positions — x as % of the 1360 content, y in px from the 441 frame top */
/* curve top (journey px): s1 189 · s2 266 · s3 245 · s4 219 · s5 260
   pill centre sits ~40px PAST the curve, on the far side from its text */
.s1 .uc-stage-n,.uc-stage-n.s1{left:6.76%;top:212px}  .uc-stage-line.s1{left:5.00%;top:0;height:228px}
.uc-stage-n.s2{left:27.28%;top:208px}                 .uc-stage-line.s2{left:25.51%;top:200px;height:256px}
.uc-stage-n.s3{left:48.46%;top:268px}                 .uc-stage-line.s3{left:46.69%;top:32px;height:252px}
.uc-stage-n.s4{left:69.19%;top:160px}                 .uc-stage-line.s4{left:67.43%;top:152px;height:256px}
.uc-stage-n.s5{left:89.93%;top:284px}                 .uc-stage-line.s5{left:95.00%;top:48px;height:252px}
/* text sits at the LABEL x (Figma 168/447/735/1017), not the line x (144/423/711/993) — a 24px gap */
.uc-stage.s1{left:6.76%;top:24px}                     /* above · bottom 144, curve 189, gap 45 */
.uc-stage.s2{left:27.28%;top:312px}                   /* below · curve 266, gap 46 */
.uc-stage.s3{left:48.46%;top:56px}                    /* above · bottom 200, curve 245, gap 45 */
.uc-stage.s4{left:69.19%;top:264px}                   /* below · curve 219, gap 45 */
.uc-stage.s5{right:6.76%;top:72px;text-align:right}   /* above · bottom 216, curve 260, gap 44 */
@media (max-width:1024px){
  /* the wave and its markers stay; only the text moves below into a numbered list (Figma 650:1458) */
  .uc-journey{height:auto;margin-top:16px}   /* 48 left a large hole under the lede on phones */
  /* break out of the frame's 24px gutter so the mark percentages are of the FULL 393 width, which is the
     coordinate space Figma's mobile positions are in */
  .uc-journey-marks{position:relative;inset:auto;height:216px;margin:0 -24px;overflow:hidden}   /* clipped: the drop lines run to 285 and 315, which put ink behind the copy below and made the gap read smaller than the one above */
  .uc-journey-wave{top:91px;height:86px}
  .uc-stages{position:relative;inset:auto;height:auto;display:flex;flex-direction:column;gap:24px;margin-top:0}   /* the marks block already ends with ~60px of drop-line space */
  .uc-stage{position:static;width:auto;text-align:left !important;max-width:none}
  .uc-stage .cm-sub{max-width:none;margin-top:8px}
  .uc-stage-label{white-space:normal}
  .uc-stage-label .n{display:inline}
  .uc-stage-n.s1{left:10.2%;top:33px}   .uc-stage-line.s1{left:6.6%;top:33px;height:158px}
  .uc-stage-n.s2{left:27.5%;top:120px}  .uc-stage-line.s2{left:23.9%;top:148px;height:137px}
  .uc-stage-n.s3{left:46.6%;top:53px}   .uc-stage-line.s3{left:43.0%;top:53px;height:172px}
  .uc-stage-n.s4{left:69.7%;top:131px}  .uc-stage-line.s4{left:66.2%;top:163px;height:152px}
  .uc-stage-n.s5{left:80.2%;top:0}      .uc-stage-line.s5{left:95.2%;top:0;height:225px}
}

/* ---- journey entrance (2026-08-13, Victoria) --------------------------------------------
   The wave DRAWS itself left to right, and each stage (drop line + pill + text) lands in
   order as the wave passes its x position. Zero new JS: the container carries .reveal so
   reveal.js flips .in on scroll-in; the container is exempted from the generic reveal
   box-fade and only choreographs its children. Each stage's parts all carry .sN, so one
   delay rule per stage covers its line, pill and text together. */
.uc-journey.reveal,.uc-journey.reveal.in{opacity:1;transform:none;transition:none}
.uc-journey.reveal .uc-journey-wave{clip-path:inset(0 100% 0 0);transition:clip-path 2s cubic-bezier(.45,0,.25,1)}
.uc-journey.reveal.in .uc-journey-wave{clip-path:inset(0 0 0 0)}
.uc-journey.reveal .uc-stage,
.uc-journey.reveal .uc-stage-n{opacity:0;transform:translateY(12px);
  transition:opacity .8s ease, transform .95s cubic-bezier(.22,.61,.36,1)}
.uc-journey.reveal .uc-stage-line{opacity:0;transition:opacity .6s ease}
.uc-journey.reveal.in .uc-stage,
.uc-journey.reveal.in .uc-stage-n{opacity:1;transform:none}
.uc-journey.reveal.in .uc-stage-line{opacity:.6}   /* .6 is the line's resting opacity */
/* stage delays track the wave's 2s left-to-right draw: each lands as the front passes */
.uc-journey.reveal.in .s1{transition-delay:.25s}
.uc-journey.reveal.in .s2{transition-delay:.65s}
.uc-journey.reveal.in .s3{transition-delay:1.05s}
.uc-journey.reveal.in .s4{transition-delay:1.45s}
.uc-journey.reveal.in .s5{transition-delay:1.85s}
@media (prefers-reduced-motion:reduce){
  .uc-journey.reveal .uc-journey-wave{clip-path:none;transition:none}
  .uc-journey.reveal .uc-stage,.uc-journey.reveal .uc-stage-n,.uc-journey.reveal .uc-stage-line{
    opacity:1;transform:none;transition:none}
  .uc-journey.reveal .uc-stage-line{opacity:.6}
}

/* ---- text inside the card stages in once the card has stood up (2026-08-13) ----
   uc-play.js adds .in when the entrance passes 55%. Children rise in reading order:
   heading, paragraph, chart, button. Time-based (not scroll-scrubbed) so the text
   lands the same regardless of scroll speed. */
.uc-play-card > *{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease, transform .8s cubic-bezier(.22,.61,.36,1)}
.uc-play-card.in > *{opacity:1;transform:none}
.uc-play-card.in > *:nth-child(2){transition-delay:.12s}
.uc-play-card.in > *:nth-child(3){transition-delay:.24s}
.uc-play-card.in > *:nth-child(4){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .uc-play-card > *,.uc-play-card.in > *{opacity:1;transform:none;transition:none}
}