/* ===========================================================================
   Results — 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.
   =========================================================================== */
/* =======================================================================
   Results — Figma 715:5446. Page-specific layout only; every shared thing
   (nav, buttons, .frame, .cat-eyebrow, .cm-h, .cm-sub, footer, the
   on-light treatment) comes from shell.css. New classes here are LAYOUT,
   never a re-skin of something that already exists.
   ======================================================================= */

/* ---- Hero -------------------------------------------------------------
   An art-directed composition, not a grid: four cards sit at exact Figma
   coordinates inside the 1408 frame. Those coordinates are kept verbatim
   (the scatter IS the design); spacing INSIDE each card is snapped to 4.
   Below 1200 the scatter can't hold, so it becomes a plain 2-up / 1-up. */
.pf-hero{position:relative;overflow:hidden;
  background:linear-gradient(162.65deg,var(--soft) 11.86%,var(--panel) 47.54%,var(--surface) 71.71%),var(--surface)}
.pf-stage{--cs:.85;position:relative;width:100%;max-width:1408px;margin:0 auto;height:1048px}   /* --cs .85 = 15% down: cards render 231 x 320 */   /* 1128 - 80: the scatter moved up by that much */

.pf-h1{position:absolute;left:50%;transform:translateX(-50%);top:168px;width:880px;max-width:calc(100% - 48px);margin:0;
  font-family:var(--display);font-weight:500;font-size:clamp(40px,7vw,68px);line-height:1.05;color:var(--ink);text-align:center}
.pf-h1 span{color:var(--action)}
.pf-lede{position:absolute;left:50%;transform:translateX(-50%);top:336px;width:511px;margin:0;
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:24px;color:var(--ink);text-align:center}

/* the glows are SIBLINGS of the cards, not children: a child with z-index:-1
   would fall behind the card's own white background and never be seen. */
.pf-glow{position:absolute;width:190px;height:81px;border-radius:137.5px;
  background:var(--canvas);opacity:.6;filter:blur(42px);pointer-events:none}
.pf-card{position:absolute;width:272px;height:376px;box-sizing:border-box;margin:0;
  background:var(--white);border-radius:var(--radius-sm);
  padding:24px 16px 0;display:flex;flex-direction:column;align-items:center}
.pf-shot{display:block;border-radius:var(--radius-xs)}
.pf-num{align-self:flex-start;margin:28px 0 0 8px;
  font-family:var(--display);font-weight:500;font-size:40px;line-height:44px;color:var(--ink)}
.pf-cap{align-self:flex-start;margin:4px 0 0 8px;width:220px;
  font-family:var(--sans);font-weight:400;font-size:14px;line-height:20px;color:var(--deep)}

.c-70 {left:48px;   top:72px}
.c-47 {left:341px;  top:484px}
.c-4w {left:747px;  top:411px}
.c-348{left:1095px; top:68px}

/* ---------------------------------------------------------------------------
   Hero entrance (2026-08-07). The headline, lede and the four cards rise from
   transparent at a smaller size. Cards scale from their own corner rather than
   their centre so they grow outward into the composition instead of sliding.
   The stagger runs 70 -> 47 -> 4w -> 348, left to right across the scatter.

   TO REVERT: delete the class "pf-lit" from <div class="pf-stage"> in
   results.html. Everything falls back to its resting state.
   --------------------------------------------------------------------------- */
.pf-stage.pf-lit .pf-h1,
.pf-stage.pf-lit .pf-lede,
.pf-stage.pf-lit .pf-card,
.pf-stage.pf-lit .pf-glow{opacity:0}
.pf-stage.pf-lit .pf-card{transform:scale(calc(var(--cs,1) * .82));transform-origin:50% 60%}
.pf-stage.pf-lit .pf-h1,
.pf-stage.pf-lit .pf-lede{transform:translateX(-50%) scale(.94)}
.pf-stage.pf-lit .pf-glow{transform:scale(.6)}

.pf-stage.pf-lit.is-in .pf-h1,
.pf-stage.pf-lit.is-in .pf-lede{opacity:1;transform:translateX(-50%) scale(1);
  transition:opacity .7s ease, transform .9s cubic-bezier(.22,.61,.36,1)}
.pf-stage.pf-lit.is-in .pf-lede{transition-delay:.35s}   /* .12 read as simultaneous; .35 makes the title-then-text beat legible (2026-08-13) */
.pf-stage.pf-lit.is-in .pf-card{opacity:1;transform:scale(var(--cs,1));
  transition:opacity .6s ease, transform 1s cubic-bezier(.34,1.28,.64,1)}
.pf-stage.pf-lit.is-in .pf-glow{opacity:1;transform:scale(1);
  transition:opacity 1.1s ease, transform 1.1s ease}
.pf-stage.pf-lit.is-in .c-70 {transition-delay:.30s}
.pf-stage.pf-lit.is-in .c-47 {transition-delay:.42s}
.pf-stage.pf-lit.is-in .c-4w {transition-delay:.54s}
.pf-stage.pf-lit.is-in .c-348{transition-delay:.66s}
.pf-stage.pf-lit.is-in .g-70 {transition-delay:.50s}
.pf-stage.pf-lit.is-in .g-47 {transition-delay:.62s}
.pf-stage.pf-lit.is-in .g-4w {transition-delay:.74s}
.pf-stage.pf-lit.is-in .g-348{transition-delay:.86s}

/* ---- and once they land, they drift ---------------------------------------
   Zero-gravity, not a bounce: 10-13px of travel over 6-8s, position only. No
   rotation — a changing angle reads as tumbling, not floating.

   Every keyframe starts at translate:0 0. A `from` with an offset makes the card
   jump there on the frame the animation begins, which reads as a snap right after
   it lands. Amplitude lives entirely in `to`. The first pass at 3-5px over 9-12s measured correctly but was below
   the threshold of being noticed. Each card gets its own path, duration and delay
   so they never sync up.

   Animated with the INDEPENDENT translate/rotate properties, not transform. An
   animation on transform replaces the entrance's transform outright, and a
   keyframe of scale(var(--cs,1)) does not resolve — the animation then produces
   no value and the cards sit frozen at their pre-entrance scale. translate and
   rotate compose with transform instead of competing with it.

   Amplitude is capped at 4px downward on purpose: the tightest clearance on a
   393px phone is 6px, between the top-right card and the headline's second line.
   --------------------------------------------------------------------------- */
@keyframes pfDriftA{
  from{translate:0 0}
  to  {translate:6px -11px}
}
@keyframes pfDriftB{
  from{translate:0 0}
  to  {translate:-9px 10px}
}
/* the top-right card only ever drifts UP: it has just 6px of clearance to the headline's
   second line at 393, so downward travel there would reintroduce the overlap */
@keyframes pfDriftUp{
  from{translate:0 0}
  to  {translate:-6px -10px}
}
.pf-stage.pf-lit.is-in .c-70 {animation:pfDriftA   6s ease-in-out 1.9s infinite alternate}
.pf-stage.pf-lit.is-in .c-47 {animation:pfDriftB   7s ease-in-out 2.2s infinite alternate}
.pf-stage.pf-lit.is-in .c-4w {animation:pfDriftA 7.5s ease-in-out 2.5s infinite alternate}
.pf-stage.pf-lit.is-in .c-348{animation:pfDriftUp  8s ease-in-out 2.1s infinite alternate}

@media (prefers-reduced-motion:reduce){
  .pf-stage.pf-lit .pf-h1,.pf-stage.pf-lit .pf-lede,
  .pf-stage.pf-lit .pf-card,.pf-stage.pf-lit .pf-glow{opacity:1;transition:none}
  .pf-stage.pf-lit .pf-card,.pf-stage.pf-lit .pf-glow{transform:none}
  .pf-stage.pf-lit.is-in .pf-card{animation:none}
  .pf-stage.pf-lit .pf-h1,.pf-stage.pf-lit .pf-lede{transform:translateX(-50%)}
}

.g-70 {left:94px;   top:366px}
.g-47 {left:387px;  top:778px}
.g-4w {left:793px;  top:705px}
.g-348{left:1141px; top:362px}   /* all four raised 24px (Victoria, 2026-08-14): the cast shadows sat detached below the cards, worst at the drift's high point */

/* ---- Case studies · Figma 779:13888 ----------------------------------
   Two 692 columns with a 24 gutter (692+24+692 = 1408). The left visual is
   a single flattened export: in Figma it is a blurred photo bleeding past
   its own clip plus two overlaid screenshots, which is a picture, not
   structure worth rebuilding in DOM. */
.pf-cases{background:var(--surface);padding:120px 0 120px}   /* 120 top: the section now follows the hero directly (the PLG-gap section was deleted 2026-08-11, its headline promoted into the BigCommerce card) */
/* per-case eyebrow + headline (2026-08-11): same 40px .cm-h at the deleted section's 1.2 ratio */
.pf-case-head .cm-h{line-height:1.2}
.pf-case{display:flex;gap:24px;align-items:flex-start;padding-top:64px}
/* only the gap BETWEEN cases grows — the first one keeps its 64 under the
   header. Figma has 80 here; on the built page the two cases read as one
   block at that value, so this is deliberately looser than the file. */
.pf-case + .pf-case{padding-top:160px}
.pf-case-art{flex:0 0 692px;max-width:692px;padding-left:24px;box-sizing:border-box}
.pf-case-art img{display:block;width:632px;max-width:100%;height:auto;border-radius:var(--radius-md)}
.pf-case-body{flex:1 1 0;min-width:0;box-sizing:border-box;padding:0 24px 0 36px;
  display:flex;flex-direction:column;gap:24px;justify-content:center}
/* align-self is load-bearing: .pf-case-body is a column flex, so the default
   stretch blew this img to the full column width and the SVG then centred
   itself inside that box. It read as a centred logo. */
.pf-case-logo{display:block;align-self:flex-start;height:40px;width:auto}
.pf-case-intro{margin:0;font-family:var(--sans);font-weight:300;font-size:16px;line-height:24px;color:var(--deep)}
/* metric rows: 40px figure over a 16px label on a --soft rule, laid out side by side */
.pf-metric{display:flex;gap:24px;align-items:center;padding:8px 0 20px;border-bottom:1px solid var(--soft)}
.pf-metrics{display:flex;flex-direction:column;gap:24px}
.pf-metrics .pf-metric:last-child{border-bottom:0}   /* :last-of-type can't work here: the last div sibling is the button row */
.pf-metric b{flex:0 0 112px;font-family:var(--sans);font-weight:400;font-size:40px;line-height:44px;color:var(--deep)}
.pf-metric span{font-family:var(--sans);font-weight:300;font-size:16px;line-height:24px;color:var(--deep)}
.pf-quote{display:flex;gap:32px;align-items:flex-start}
.pf-quote img,.pf-quote .pf-avatar{flex:0 0 72px;width:72px;height:72px;border-radius:50%;display:block;object-fit:cover}
.pf-quote .pf-avatar{background:var(--panel)}     /* stays as the fallback tint behind the portrait while it loads */
.pf-quote-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.pf-quote-txt p{margin:0;font-family:var(--sans);font-weight:300;font-size:16px;line-height:24px;color:var(--deep)}
.pf-quote-txt cite{font-family:var(--sans);font-weight:600;font-size:14px;line-height:20px;color:var(--deep);font-style:normal}
.pf-case-btns{display:flex;gap:16px;align-items:center;padding-top:24px;flex-wrap:wrap}
.pf-case-btns .btn img{width:20px;height:20px;display:block}

/* ---- Dark lower · Figma 715:5460 -------------------------------------
   .footer / .footer-card are transparent by design and float on whatever
   wrapper holds them, so the dark band has to be a real element. */
.pf-lower{background:var(--ink)}
.pf-repeat{padding:96px 0 160px}   /* 96/160 are site section steps; the old 100 0 0 was off the grid and had no bottom padding at all */
.pf-repeat-head{display:flex;align-items:baseline;padding:0 0 12px;   /* layout only — type and the square come from .sec-label */
  border-bottom:1px solid rgba(179,198,249,.28)}
.pf-repeat-body{margin:48px 0 0 auto;width:915px;max-width:100%;text-align:right;
  font-family:var(--sans);font-weight:300;font-size:24px;line-height:36px;color:var(--soft)}   /* 24/36 already exists on this page; 32/48 was a one-off */

@media (max-width:1200px){
  /* the scatter needs 1408px to read. Under that it becomes an ordinary row. */
  .pf-stage{height:auto;padding:120px 24px 96px;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;
    max-width:688px}   /* two-card measure: 2x272 + 32 gap. Caps the row at 2x2 so the cards never wrap 3+1 with an orphan (Victoria's tablet screenshot, 2026-08-14) */
  .pf-h1,.pf-lede{position:static;width:auto;max-width:822px;order:-2;flex:0 0 100%;text-align:center}   /* flex-basis 100%: each takes its own row instead of packing beside the other */
  .pf-lede{order:-1;max-width:511px;margin-bottom:24px;flex-basis:auto}
  .pf-card{position:static}
  .pf-glow{display:none}

  /* The entrance selectors are .pf-stage.pf-lit.is-in .pf-h1 — specificity (0,4,0). A media
     query adds none, so a plain `.pf-h1{transform:none}` above loses to them and the headline
     keeps a translateX(-50%) it no longer needs once it is in normal flow. Restate them here. */
  .pf-stage{--cs:1}
  .pf-stage.pf-lit .pf-h1,.pf-stage.pf-lit .pf-lede{transform:scale(.94)}
  .pf-stage.pf-lit.is-in .pf-h1,.pf-stage.pf-lit.is-in .pf-lede{transform:scale(1)}
  /* stacked cards are STATIC (Victoria, 2026-08-14): no entrance fade, no scale, no drift —
     below the scatter breakpoint the four cards simply render. Placed after the base drift
     rules so the animation:none wins the specificity tie. */
  .pf-stage.pf-lit .pf-card,
  .pf-stage.pf-lit.is-in .pf-card{opacity:1;transform:none;transition:none;animation:none}
}
@media (max-width:1024px){
  .pf-case{flex-direction:column;gap:0}
  .pf-case-art{flex:none;max-width:100%;width:100%;padding-left:0}
  .pf-case-art img{width:100%}
  .pf-case-body{padding:64px 0 0}        /* the former right column needs its own gap once stacked */
  .pf-case + .pf-case{padding-top:120px} /* stacked, so less runway is needed to separate them */
}
@media (max-width:900px){
  .pf-repeat{padding:72px 0 120px}   /* 160 is a desktop measure */
  .pf-repeat-body{font-size:20px;line-height:32px;text-align:left;margin-left:0}
  .pf-stage{padding:96px 24px 72px;gap:24px}
}

/* phones: the mini-scatter is GONE (Victoria, 2026-08-14 — cards at 32% scale were
   unreadable). The flex treatment above stacks title, lede, then the cards; on phones the
   cards go TWO PER ROW at fluid width, with the inner content flowing at real font sizes
   (nothing is transform-shrunk — that was the mini-scatter's sin). */
@media (max-width:640px){
  .pf-stage{gap:16px}
  .pf-card{width:calc(50% - 8px);height:auto;padding:16px 12px 20px}
  .pf-shot{width:100%;height:auto}
  .pf-num{margin:16px 0 0 4px;font-size:32px;line-height:36px}
  .pf-cap{margin:4px 0 0 4px;width:auto}
}


/* the case studies enter with the site-standard reveal (shell.css .reveal); the copy column
   follows the artwork by a beat, same one-two as elsewhere (Victoria, 2026-08-13) */
.pf-case-body.reveal{transition-delay:.15s}