/* ---------- Base ---------- */
:root {
  /* Grep confirms the section headings ("my results", "what do I do",
     "Don't just take it from me.") carry no font-family of their own -
     they inherit this same stack from body. There's no separate "display"
     face in this codebase; --font-display and --font-body are the same
     token on purpose, per the brief's "use the exact token you found". */
  --font-display: 'Neue Haas Grotesk Display Pro', neue-haas-grotesk-display, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Neue Haas Grotesk Display Pro', neue-haas-grotesk-display, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html { scroll-padding-top: 90px; }
body {
  margin: 0;
  background: #FAFAFA;
  color: #111111;
  font-family: var(--font-body);
  font-weight: 500;
}
* { box-sizing: border-box; }
a { color: #111111; text-decoration-color: #F2793C; }
a:hover { color: #F2793C; }
::selection { background: #F0629B; color: #FFFFFF; }
h2, h3, p { margin: 0; }

.page { min-height: 100vh; overflow-x: clip; }

@keyframes tipIn {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 60; background: #FAFAFA; display: flex; align-items: center; justify-content: center; transition: opacity .5s ease; }
.loader-ring { padding: 8px; border-radius: 17%; background: conic-gradient(#F2793C 0deg, #EBEBE6 0deg); transition: opacity .35s ease, transform .35s ease; }
.loader-frame { position: relative; width: min(300px, 62vw); aspect-ratio: 1; border-radius: 14%; overflow: hidden; }
.loader-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loader-scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(0,0,0,.42), rgba(0,0,0,.05) 70%); }
.loader-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; color: #FFFFFF; letter-spacing: .02em; }

.tint { position: fixed; inset: 0; z-index: -1; background: #FAFAFA; pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 24px; padding: 8px 10px;
  background: rgba(250,250,250,.78); backdrop-filter: blur(12px);
  border: 1px solid rgba(17,17,17,.09); border-radius: 999px;
}
.nav-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: #111111; color: #FAFAFA;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
}
.nav-links {
  display: flex; gap: 28px;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .06em;
}
.nav-links a { text-decoration: none; color: #111111; text-transform: uppercase; }
.nav-links a:hover { color: #F2793C; }
.nav-cta {
  background: #F2793C; color: #111111; padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid #111111;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .06em;
  text-decoration: none; transition: transform .2s cubic-bezier(.3,1.6,.5,1);
}
.nav-cta:hover { transform: scale(1.06); color: #111111; }
/* Gap stays >=28px per spec; font-size is the only lever if the four
   labels + CTA stop fitting on one line at narrower desktop widths. */
@media (max-width: 900px) {
  .nav-links { font-size: 13px; }
}
.nav a:focus-visible, .nav-cta:focus-visible {
  outline: 2px solid #111111; outline-offset: 3px; border-radius: 4px;
}

/* ---------- Hero ---------- */
.hero-section { height: 320vh; position: relative; background: linear-gradient(to bottom, #FAE1E9 0%, #FAFAFA 60%); }
.hero-sticky { position: sticky; top: 0; height: 100vh; overflow: clip; display: flex; align-items: center; justify-content: center; }

.hero-name { position: absolute; top: 50%; left: 0; width: 100vw; transform: translateY(-50%) scale(.97); z-index: 1; overflow: clip; will-change: transform, opacity; opacity: 0; }
.hero-marquee {
  display: flex; white-space: nowrap; width: max-content; animation: marquee 26s linear infinite;
  font-family: Anton, sans-serif; font-size: clamp(72px, 14vw, 220px); letter-spacing: .01em;
  color: #FFFFFF; -webkit-text-stroke: 1.5px #111111; user-select: none;
}

.hero-center {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0;
  --hero-line-gap: 16px; /* shared above/below-photo gap so the two lines can't drift apart */
}
.hero-lineA {
  position: relative; z-index: 3; font-size: min(60px, 7vw); letter-spacing: -0.1em; line-height: 0.75;
  font-weight: 500; text-align: center; color: #111111; will-change: transform, opacity;
  opacity: 0;
}
#topA { margin-bottom: var(--hero-line-gap); transform: translateY(14px); }
#botA { margin-top: var(--hero-line-gap); transform: translateY(-14px); }
.hero-lineA--click {
  /* Button-appearance reset only - NOT `font: inherit`, which is a
     shorthand that would silently wipe the font-size/letter-spacing
     .hero-lineA sets on this same element (that's what made "content
     engineer" render at the browser default size instead of matching
     "your gen z"). */
  cursor: pointer; background: none; border: none; padding: 0;
  font-family: inherit; -webkit-appearance: none; appearance: none; display: block;
}
.hero-lineA--click:focus-visible {
  outline: 3px solid #F0629B; outline-offset: 8px; border-radius: 10px;
}

.hero-photo-wrap { perspective: 1100px; }
.hero-photo {
  width: min(400px, 40vh, 74vw); aspect-ratio: 1; border-radius: 13%; overflow: hidden;
  box-shadow: 0 30px 80px rgba(17,17,17,.22); transform-origin: center center; will-change: transform, opacity;
}
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero-bubble {
  position: absolute; top: -100px; bottom: -100px; left: -100px; right: -100px;
  display: flex; align-items: center; justify-content: center;
  color: #F0629B; background: #FAFAFA; clip-path: circle(0px at 50% 50%); white-space: nowrap;
  border: 2px solid rgba(240,98,155,.55); border-radius: 32px; box-sizing: border-box;
  will-change: clip-path; font-size: min(60px, 7vw); letter-spacing: -0.1em;
}

.hero-big {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center; width: 100vw;
  font-size: min(12.5vw, 26vh); letter-spacing: -0.1em; line-height: 1.15; font-weight: 500;
  white-space: nowrap; color: #111111; will-change: clip-path, opacity;
}
.hero-big--top { bottom: 50%; clip-path: inset(0 100% 0 0); }
.hero-big--bot { top: 50.5%; clip-path: inset(0 0 0 100%); }
.hero-big--wipe { top: 50.5%; z-index: 6; color: transparent; clip-path: circle(0px at 50% 50%); pointer-events: none; }
.wipe-or { color: #FFFFFF; }
.accent { color: #F2793C; }

.tooltip-trigger {
  position: relative; display: inline-block; border: none; background: none; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit; cursor: help;
  border-bottom: 5px dotted #D14A82; /* darkened from brand pink #F0629B - 2.91:1 on the page
    background failed the 3:1 non-text contrast minimum; this hue passes at 4.01:1 */
}
.tt-sup { font-size: .4em; color: #D14A82; }
.tooltip-trigger:focus-visible { outline: 2px solid #D14A82; outline-offset: 4px; border-radius: 4px; }

/* girlies sits on the toolkit-hero card's pink background, where the
   default pink-on-pink dotted underline all but disappears. A deep
   forest green reads clearly as its own color against the pink
   (4.64:1, clears the 3:1 non-text minimum) and stands out more than
   a plain dark underline would. */
#girliesTrigger {
  border-bottom: 2px solid #1F4A2E;
  font-weight: 700;
}
#girliesTrigger .tt-sup { font-size: .6em; color: #1F4A2E; }
#girliesTrigger:focus-visible { outline-color: #1F4A2E; }

/* position:fixed + JS-computed left/top (see positionTooltip in main.js).
   mogTip's trigger lives inside #topB, whose ancestor gets an animated
   clip-path during the hero scroll (the letter-reveal effect) - anything
   positioned relative to a clipped ancestor gets clipped along with it,
   which is what made the mog definition render chopped up / "scattered".
   Both tooltips are detached to document.body at setup and positioned in
   viewport (not ancestor-relative) coordinates so neither can inherit a
   clip from wherever their trigger happens to live. */
.tooltip {
  position: fixed; z-index: 50;
  width: min(280px, 78vw); max-width: 280px; background: #F0629B; color: #111111;
  font-family: var(--font-body);
  font-weight: 500; font-size: 14px; line-height: 1.45; text-align: left; white-space: normal;
  padding: 12px 15px; border-radius: 14px; box-shadow: 0 14px 40px rgba(240,98,155,.4);
  display: none;
}
.tooltip-term {
  display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.tooltip.is-open { display: block; animation: tipIn .22s cubic-bezier(.3,1.6,.5,1) both; }

.o-slot { color: transparent; padding: 0 0.38em; }

.hero-mog-img {
  position: absolute; z-index: 4; width: 24vw; aspect-ratio: 1; left: 38vw; top: 24vh;
  will-change: transform, opacity; pointer-events: none; opacity: 0;
}
#face { transform: translateX(-100vw); }
#hand { z-index: 5; transform: translateX(100vw); }

/* ---------- Results ---------- */
/* height beyond 100vh is scroll the sticky section "holds" the screen
   for before releasing to the next section - was 180vh (an 80vh hold),
   which read as a stuck/stalled scroll. Trimmed to a shorter hold. */
.results-wrap { height: 130vh; position: relative; }
.results-section {
  position: sticky; top: 0; height: 100vh; box-sizing: border-box;
  padding: 76px clamp(20px, 4vw, 60px) 20px; overflow: clip; will-change: transform;
}
.results-inner { max-width: 1240px; margin: 0 auto; width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.results-head { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s cubic-bezier(.24,1.3,.4,1); }
.results-head h2 { margin: 0 0 16px; font-weight: 500; font-size: clamp(38px, 8vh, 84px); letter-spacing: -0.1em; color: #111111; line-height: 1; }

.bento { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; gap: 12px; }

.card { position: relative; border-radius: 22px; padding: 20px; min-height: 0; overflow: hidden; transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s ease; }
.card--wide { grid-column: span 2; grid-row: span 2; padding: 24px; display: flex; flex-direction: column; background: #111111; color: #FAFAFA; }
.card--wide:hover { box-shadow: 0 26px 60px rgba(17,17,17,.3); }
/* Global `a` assumes a light card background (dark ink text) - override
   for this dark card so links stay legible against #111111. */
.card--wide a { color: inherit; text-decoration-color: #F2793C; }
.card--wide a:hover { color: #F2793C; }
.card--wide a:focus-visible { outline: 2px solid #F2793C; outline-offset: 2px; border-radius: 2px; }
.card--light { background: #FAFAFA; display: flex; flex-direction: column; }
.card--light:hover { box-shadow: 0 22px 50px rgba(17,17,17,.18); }
.card--tall { grid-column: span 2; }
.card--green { grid-column: span 2; background: #5F7350; color: #FFFFFF; display: flex; flex-direction: row; align-items: stretch; gap: 12px; }
.card--green:hover { box-shadow: 0 22px 50px rgba(17,17,17,.25); }

.card-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.statbig { font-size: min(6.5vw, 14vh); line-height: .95; margin-bottom: 20px; }
.stat { font-size: min(3.4vw, 8vh); line-height: 1; margin-bottom: 20px; }
.stat--1p22m { font-size: min(3.8vw, 8.5vh); }
.stat--accounts { font-size: min(3.8vw, 8.5vh); }
.stat--sm { font-size: min(3vw, 7vh); }
.stat--workflows { font-size: min(5.6vw, 12.5vh); }

/* Number gets the big gap below it; label and footnote sit close together
   underneath, so the number reads as the card's headline. */
.card-title { font-weight: 700; font-size: 15px; line-height: 1.35; margin: 0 0 6px; }
.card-sub { font-size: 13px; font-weight: 400; line-height: 1.45; margin: 0; }
.card-sub--dark { color: rgba(17,17,17,.68); }

/* .card-body: nested flex column used where a card also has a decorative
   image sibling (wide, green) so the text block and the image can be
   arranged independently of each other (stacked vs. side-by-side). */
.card-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.card--green .card-body { justify-content: flex-end; min-width: 0; }

/* Decorative reaction images. Bottom-anchored ones (.card-decor) grow to
   fill whatever vertical space the text didn't use, inside a flex column
   - not a fixed aspect-ratio, so the crop adapts to each card's actual
   height instead of leaving a dead gap or overflowing it. The green
   card's image runs the opposite way (.card-decor--side): full height,
   fixed width, beside the text rather than under it.

   Negative margins pull each image flush to the *outer* edges of the
   card (left/right/bottom for the bottom-anchored ones, top/right/bottom
   for the side one) so there's no padding gap between the photo and the
   card's own frame - only .card's overflow:hidden + border-radius does
   the corner rounding, so the image itself doesn't need matching radii. */
.card-decor { flex: 1; min-height: 64px; margin: 20px -20px -20px; overflow: hidden; }
.card-decor img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card--wide .card-decor { margin: 20px -24px -24px; }
.card-decor--side { flex: 0 0 40%; margin: -20px -20px -20px 0; align-self: stretch; }

/* Split layout: "15" and "48" sit left/right, independent of the photo's
   own size - the photo is a centered layer the text doesn't have to
   butt up against, so it can shrink or grow without nudging the numbers.
   The decor column keeps the same flex-basis/stretch/bleed the very
   first version of this card used (not absolutely positioned) so it
   still drives the row's auto-height on mobile the same way it always
   did - only how the *image* renders inside that box changed. */
.card--split { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 10px; position: relative; }
.split-col { flex: 0 1 34%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; position: relative; z-index: 2; }
.split-col--left { align-items: flex-start; text-align: left; }
.split-col--right { align-items: flex-end; text-align: right; }
.card-decor--center {
  /* Bleeds only the bottom (touches the card's outer edge, like every
     other decor image) - the top stays at the card's normal padding
     line, level with where the text columns start, so the photo's own
     height (forced via the img below) can reach from that same line
     all the way down without overshooting past it. */
  flex: 0 0 38%; min-width: 0; margin: 0 0 -20px; align-self: stretch; position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center; pointer-events: none; overflow: visible;
}
/* height:100% (not max-height) pins the top of the photo to the box's
   top - i.e. level with the text - while align-items:flex-end above
   keeps the bottom on the card's outer edge; width is intentionally
   unclamped (overflow:visible) so the photo can spill past its 38%
   column into the text's space without ever being cropped or nudging
   the numbers, since it renders behind them (z-index 1 vs 2). */
.card-decor--center img { display: block; width: auto; height: 100%; max-width: 30vw; object-fit: contain; }

#bento img[src$="peek-wall.webp"] { object-position: center 22%; }
/* Top-anchored: any resize-driven cropping should always eat into the
   bottom of the image, never the top, so the top of the hand/finger
   stays visible no matter how the card's aspect ratio changes. */
#bento img[src$="hands-circle.webp"] { object-position: center top; }
.decor-flip { transform: rotate(180deg) scale(1.4); object-position: 50% 40%; }
.decor-point { object-position: center top; }

/* ---------- Testimonials (Senja embed) ---------- */
.testi-section { background: #8AB4C2; }
.testi-panel { box-sizing: border-box; padding: 76px clamp(20px, 5vw, 72px) 64px; }
.testi-head h2 { margin: 0 0 22px; font-weight: 500; font-size: clamp(34px, 4.6vw, 68px); letter-spacing: -0.1em; color: #111111; line-height: 1; }
/* Wall-of-love widget benefits from the site's normal content width
   (matches .results-inner / .toolkit-inner) rather than a narrow form
   column - it's laying out a grid of cards, not a single input flow. */
.senja-embed-wrap { max-width: 1240px; margin: 0 auto; }

.progress-row { padding: 0 clamp(20px, 5vw, 72px); display: flex; align-items: center; gap: 16px; }
.progress-track { flex: 1; max-width: 420px; height: 3px; background: rgba(17,17,17,.18); border-radius: 2px; overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background: #111111; }
.progress-label { font-size: 12px; font-weight: 600; letter-spacing: .18em; color: rgba(17,17,17,.7); }

/* ---------- Toolkit ---------- */
.toolkit-section { background: #FAFAFA; padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 72px); }
.toolkit-inner { max-width: 1240px; margin: 0 auto; }
.toolkit-heading { margin: 0 0 52px; font-weight: 500; font-size: clamp(44px, 6.5vw, 96px); letter-spacing: -0.1em; color: #111111; line-height: 1; }
.toolkit-grid { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; }
.toolkit-hero, .toolkit-list { flex: 1 1 330px; }

/* The pink card and the white list sit flush against each other
   (zero gap) and read as one shape, so only its own *outer* corners
   are rounded - top-left/bottom-left here - and the seam side against
   .toolkit-list stays square. .toolkit-list mirrors this with its own
   outer corners (see below); both use the same 28px radius so the
   combined silhouette reads as a single rounded rectangle. */
.toolkit-hero {
  background: #F591B9; color: #111111;
  border-radius: 28px 0 0 28px;
  padding: clamp(32px, 4vw, 52px); display: flex; flex-direction: column; gap: 22px; min-height: 460px;
}
.toolkit-hero h3 { font-weight: 500; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.02; }
.toolkit-hero p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; max-width: 60ch; }

/* Row list, not individual boxed cards: a hairline divider between
   rows instead of each item's own border/radius. overflow:hidden so
   the first/last row's square corners get clipped to the list's own
   rounded top-right/bottom-right, instead of poking past the curve. */
.toolkit-list {
  display: flex; flex-direction: column;
  background: #FFFFFF; overflow: hidden;
  border-radius: 0 28px 28px 0;
  border-top: 1px solid rgba(17,17,17,.1);
}
/* flex:1 (not justify-content:center on the list) so the three rows
   split the list's full stretched height evenly between them, with no
   leftover space collecting as a gap above the first row or below the
   last one - the list's top/bottom then land exactly on the pink
   card's top/bottom, and all three rows end up the same height. */
.toolkit-item {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 30px clamp(20px, 5vw, 72px) 30px clamp(24px, 3vw, 40px);
  border-bottom: 1px solid rgba(17,17,17,.1);
  transition: background .25s ease, padding-left .25s cubic-bezier(.3,1.4,.5,1);
}
.toolkit-item:hover { background: #B8C9A8; padding-left: calc(clamp(24px, 3vw, 40px) + 16px); }
.toolkit-item-title { font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.02em; }
.toolkit-item-body { font-size: clamp(15px, 1.1vw, 17px); color: rgba(17,17,17,.6); margin-top: 8px; }

/* ---------- Story ---------- */
.story-section { height: 300vh; position: relative; background: #B9D6DE; }
/* Top padding matches .results-section (76px); heading-to-body gap and
   body copy size match .toolkit-hero's h3-to-p pattern (22px / 16-19px),
   the only other heading-directly-above-paragraph pairing on the page. */
.story-panel { position: sticky; top: 0; height: 100vh; overflow: clip; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding: 76px 0 14px; }
.story-head { padding: 0 clamp(20px, 5vw, 72px); }
.story-head h2 { margin: 0 0 22px; font-weight: 500; font-size: clamp(34px, 4.6vw, 68px); letter-spacing: -0.1em; color: #111111; line-height: 1; }
.story-head p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; max-width: 78ch; }

.story-track-wrap { position: relative; margin: 12px 0; }
.story-track-line { position: absolute; left: 0; right: 0; top: 59px; height: 3px; background: rgba(90,138,153,.45); }
.story-rail { display: flex; gap: clamp(32px, 4.5vw, 56px); width: max-content; padding: 0 clamp(20px, 5vw, 72px); will-change: transform; }

.era { width: min(320px, 72vw); flex: none; display: flex; flex-direction: column; align-items: flex-start; }
.era-photo { width: 120px; aspect-ratio: 1; border-radius: 22px; box-sizing: border-box; background: #FAFAFA; overflow: hidden; }
.era-photo--current { border: 4px solid #F2793C; }
.era-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Company logos, not photos: shown at their own natural aspect ratio
   (no square crop/frame) so each wordmark reads correctly - just held
   to a shared height so the row lines up. */
.era-logo { height: 46px; display: flex; align-items: flex-end; }
.era-logo img { height: 100%; width: auto; display: block; }
.era-badge { display: inline-block; font-size: 14px; letter-spacing: .08em; padding: 5px 13px; border-radius: 999px; margin: 12px 0 8px; }
.era p { font-size: 13.5px; line-height: 1.5; }

/* ---------- CTA ---------- */
.cta-section { background: #5F7350; padding: clamp(90px, 16vh, 180px) clamp(20px, 5vw, 72px); text-align: center; }
.cta-section h2 { margin: 0 0 34px; font-weight: 500; font-size: clamp(52px, 9vw, 140px); letter-spacing: -0.04em; color: #FFFFFF; line-height: 1.05; }
.cta-button {
  display: inline-block; background: #F2793C; color: #FFFFFF; font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700; padding: 20px 44px; border-radius: 999px; text-decoration: none;
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s ease;
}
.cta-button:hover { transform: scale(1.07); box-shadow: 0 20px 50px rgba(17,17,17,.3); color: #FFFFFF; }
.cta-footer { margin: 70px 0 0; font-size: 13px; color: rgba(255,255,255,.55); }

/* ---------- Scroll reveal (JS-driven, base state) ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); }
[data-slide] { opacity: 0; }
[data-toolkit-slide] { opacity: 0; }

/* ---------- Mobile (below 768px) ---------- */
@media (max-width: 767px) {
  .nav-links { display: none !important; }
  .results-wrap { height: auto !important; }
  .results-section { position: static !important; height: auto !important; padding: 84px 16px 48px !important; transform: none !important; }
  .bento { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; }
  /* The split card's photo is sized with height:100% of this box so its
     top lines up with the text and its bottom bleeds to the card edge -
     that only resolves correctly against a definite height, which the
     auto-height mobile grid row otherwise can't provide (it would fall
     back to the image's raw intrinsic size and blow the card up). */
  .card--split { height: 300px !important; }
  /* The 30vw cap above exists to keep the photo from overrunning the
     narrow ~33%-wide desktop/tablet grid column it sits in; on mobile
     this card is a full-width 2-col-span card instead, so that same
     vw fraction is far too small - the fixed height right above already
     keeps the photo a safe size here, so let it use its natural width. */
  .card-decor--center img { max-width: none !important; }
  .stat { font-size: clamp(38px, 13vw, 64px) !important; margin-bottom: 16px !important; }
  .stat--workflows { font-size: clamp(46px, 16vw, 80px) !important; }
  .statbig { font-size: clamp(56px, 22vw, 100px) !important; margin-bottom: 16px !important; }

  .testi-panel { padding: 56px clamp(20px, 5vw, 72px) 40px; }

  .story-section { height: auto !important; }
  .story-panel { position: static !important; height: auto !important; padding: 56px 0 36px !important; }
  .story-rail { overflow-x: auto; width: auto !important; transform: none !important; padding-bottom: 8px; }

  /* toolkit-hero and toolkit-list stack full-height on mobile instead
     of sitting side by side, so the "outer corners only" rounding
     rotates 90°: the pink card rounds its own top corners (it's on
     top of the stack) and the list rounds its own bottom corners
     (it's on the bottom), with the touching seam between them square
     on both sides - same idea as the desktop left/right split, just
     turned on its side. */
  .toolkit-hero { border-radius: 28px 28px 0 0 !important; }
  .toolkit-list { border-radius: 0 0 28px 28px !important; }
}