/* ==========================================================================
   Peak Fit Check 2026 - Mapp Fashion mini-site
   Font, tokens, navbar/footer shell, section styles, wave dividers.
   Colors sampled from the Figma export (materials/Peak Fit Check - Overview
   light editorial.png) - swap for exact tokens once Figma hands off values.
   ========================================================================== */

@font-face {
  font-family: 'Mona Sans';
  src: url('../assets/font/MonaSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('../assets/font/MonaSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --purple-1: #2B2449;   /* darkest - nav, hero, footer, "devices" section */
  --purple-2: #8D77F7;
  --purple-3: #BCACF8;   /* "built for every business" band, AI Fit Check btn */
  --purple-4: #DED6FC;   /* bottom CTA section bg */
  --purple-card: #3C2B56; /* step card bg on dark section */
  --pink: #FC4482;       /* accent - active pill, primary buttons, "exposes" */
  --pink-2: #FF87AF;    /* secondary accent - hero title */
  --pink-soft: #FBD2DE;

  --ink: #2B2449;
  --ink-soft: rgba(43, 36, 73, 0.66);
  --ink-faint: rgba(43, 36, 73, 0.42);
  --paper: #FFFFFF;

  --on-dark: #FFFFFF;
  --on-dark-soft: #DED6FC;
  --on-dark-faint: rgba(255, 255, 255, 0.5);

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --radius-pill: 100px;

  --shadow-card: 7px 7px 25px -18px rgba(43, 36, 73, 0.35);
  --shadow-float: 0 24px 48px -20px rgba(0, 0, 0, 0.35);

  --container: 1180px;
  --font: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Figma's own container is 1280px (1920 canvas, 320px gutters) - matched
   only from 1440px up. Below that, down to tablet, the container stays at
   the original 1180px rather than crowding a narrower viewport. */
@media (min-width: 1440px) {
  :root { --container: 1280px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Safety net for the intentionally-oversized full-bleed wave wrappers
   below (they deliberately run a few px past 100% to paper over
   sub-pixel rounding gaps on real devices) - without this, that overhang
   would show up as horizontal scroll instead of being invisibly cropped.
   html only, NOT body: setting overflow-x on body too makes body compute
   an implicit overflow-y:auto alongside html's own, and having both html
   and body register as scroll containers breaks .navbar's position:
   sticky (it stops tracking the real viewport scroll entirely - verified
   in Chromium). html alone still clips the horizontal overhang. */
html { overflow-x: hidden; }
body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-variation-settings: 'wdth' 100;
  font-feature-settings: 'liga' 0;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}

/* ---------- shared type/layout helpers ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
}
.hl-pink { color: var(--pink-2); font-style: italic; font-weight: 600; }
.hl-pink2 { color: var(--pink); font-style: italic; font-weight: 600; }
.hl-purple { color: var(--purple-3); font-style: italic; font-weight: 600; }
.hl-pink-plain { color: var(--pink); font-style: normal; font-weight: 600; }
.hl-purple-plain { color: var(--purple-3); font-style: normal; font-weight: 600; }

/* A <br> used only to control where a line wraps on desktop - add
   class="br-desktop" to it and it disappears on mobile AND tablet,
   letting the text wrap naturally instead of breaking mid-sentence. */
@media (max-width: 899px) {
  .br-desktop { display: none; }
}

/* Every other forced <br> inside a page title (hero or section) is a
   plain, unclassed <br> rather than .br-desktop, but it's meant to
   collapse the same way below desktop - one shared rule for all of them
   instead of a separate one per title, covering mobile and tablet alike.
   The markup carries a space before each of these (see pages/*.js) so
   collapsing it lets the line wrap naturally instead of fusing words
   together ("shows<br>in" -> "showsin"). */
@media (max-width: 1029px) {
  .hero__title br:not(.br-desktop),
  .section__title br:not(.br-desktop) {
    display: none;
  }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: none;
  padding: 15px 26px; border-radius: var(--radius-pill); border: none;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { filter: brightness(1.06); }
.btn--pink { background: var(--pink); color: #000; }
.btn--ghost { background: var(--purple-3); color: var(--ink); text-transform: uppercase; font-size: 0.78rem; padding: 13px 20px; }
.btn__arrow { display: inline-block; transition: transform 0.15s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ============================= NAVBAR ============================= */
.navbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--purple-1);
  padding: 14px 0;
}
/* Only on desktop (matches the pill-nav / burger breakpoint below) - the
   mobile/tablet navbar keeps its plain edge. */
@media (min-width: 1030px) {
  .navbar { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
}
.navbar__inner {
  display: flex; align-items: center; gap: 20px; padding: 0 26px;
}
.navbar__logo { flex-shrink: 0; display: block; }
.navbar__logo img { height: 44px; width: auto; }

.navbar__pills {
  display: flex; align-items: center; justify-content: center; flex: 1; margin-left: 10px;
  /* 8px at 900px wide -> 16px (Figma) at 1440px+, fluid in between. */
  gap: clamp(8px, calc(-5.333px + 1.4815vw), 16px);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.navbar__pills::-webkit-scrollbar { display: none; }

/* Below, every clamp() is anchored the same way: the min is a hand-picked
   "small desktop" (900px) value, the max is the Figma (1440px+) value, and
   the middle term interpolates linearly between the two by viewport width -
   see the container/nav breakpoint notes above for why 900-1439px has no
   Figma spec to match and is designed by feel instead. */
.pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  font-size: clamp(13px, calc(8px + 0.5556vw), 16px);
  line-height: clamp(21px, calc(12.667px + 0.9259vw), 26px);
  font-weight: 500; letter-spacing: 0;
  padding: clamp(6px, calc(2.667px + 0.3704vw), 8px) clamp(16px, calc(2.667px + 1.4815vw), 24px);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--on-dark-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pill:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.pill.is-active {
  background: var(--pink); border-color: transparent; color: #000; font-weight: 600;
}

.navbar__right {
  display: flex; align-items: center; flex-shrink: 0; margin-left: auto;
  gap: clamp(16px, calc(-10.667px + 2.963vw), 32px);
}

/* The .pill clamp()s above are anchored to reach their Figma max at
   1440px, which is also where --container jumps from 1180px to 1280px
   (see the container media query up top). Right below that jump, the
   pills are already sized almost as if the wider 1280px container were
   there, but the container itself is still 1180px - so in this narrow
   band just under 1440px the pill row runs wider than the space it
   actually has and gets clipped on both sides by .navbar__pills'
   overflow-x. A small knockdown on font-size/padding/gap here is enough
   to bring it back under the still-1180px container. */
@media (min-width: 1345px) and (max-width: 1439px) {
  .navbar__pills { gap: 10px; }
  .pill { font-size: 15px; padding: 6px 18px; }
}
.navbar__lang {
  /* Hidden until there's more than one language - keep the markup in place
     so it's a one-line change to bring back. */
  display: none;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--on-dark-faint); cursor: default; user-select: none;
}

/* Figma-matched spacing/type for the desktop navbar's own CTA button only -
   scoped here rather than on .btn/.btn--ghost so the mobile overlay's CTA
   (.mobile-nav__cta, same base classes) isn't affected until reviewed.
   Fluid between a 900px minimum and the Figma (1440px+) value - see the
   .pill clamps above for the anchoring approach. */
.navbar__cta {
  gap: clamp(8px, calc(-5.333px + 1.4815vw), 16px);
  /* Top/bottom fixed (not fluid) so the button is exactly 48px tall at
     every width it's visible at (≥1030px - iPad Pro through desktop) -
     the .btn__arrow icon (24px, unaffected by the font-size clamp below)
     sets the content height, so 12px top + 24px icon + 12px bottom =
     48px regardless of viewport. Left/right stay fluid since they don't
     affect height. */
  padding:
    12px
    clamp(16px, calc(2.667px + 1.4815vw), 24px)
    12px
    clamp(20px, 2.2222vw, 32px);
  font-size: clamp(13px, calc(8px + 0.5556vw), 16px);
  line-height: 1;
  letter-spacing: clamp(0.2px, 0.0222vw, 0.32px);
}

.navbar__burger {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: none; border: none; color: #fff; cursor: pointer;
}
.navbar__burger svg { width: 24px; height: 24px; }

/* ---------- mobile nav overlay (burger menu) ---------- */
/* Padding here is deliberately matched to .navbar's own padding (14px
   top, 26px sides - see .navbar/.navbar__inner above) rather than picked
   independently, so the logo sits at the exact same spot with the overlay
   open as it does in the sticky navbar underneath it - otherwise it visibly
   shifts a couple px when the burger menu opens. The ≤640px and tablet
   overrides below mirror .navbar's own padding changes at those widths the
   same way (navbar__inner shares .container, which gets extra horizontal
   padding on tablet - see .container's own tablet rule - so this has to
   follow suit here too, not just at the top-padding level). */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  background: var(--purple-1);
  display: flex; flex-direction: column;
  padding: 14px 26px 32px;
  overflow-y: auto;
}
@media (min-width: 641px) and (max-width: 1029px) {
  /* +2px on top of .navbar's own 14px: across this same range the navbar
     row's tallest item is the 48px-tall .navbar__cta (see its own tablet
     rule), not the 44px logo, so align-items:center nudges the logo down
     an extra (48-44)/2 = 2px from the row's own padding-top. Baked in here
     as a flat value instead of replicating that centering math. */
  .mobile-nav { padding-top: 16px; padding-left: 48px; padding-right: 48px; }
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.mobile-nav__close {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: none; border: none; color: #fff; cursor: pointer;
}
.mobile-nav__close svg { width: 22px; height: 22px; }

.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__link {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff; font-size: 1.05rem; font-weight: 600;
  text-decoration: none;
}
.mobile-nav__link.is-active { color: var(--pink); }

.mobile-nav__cta { width: 100%; margin-top: 24px; }

/* Below this width, the pill nav + desktop CTA give way to a burger
   button that opens the full-screen .mobile-nav overlay above. The pill
   nav itself stays visible down to this same width, shrinking fluidly
   via clamp() as it goes rather than switching to the burger any earlier. */
@media (max-width: 1029px) {
  .navbar__pills,
  .navbar__cta { display: none; }
  .navbar__burger { display: flex; }
}

/* ============================= HERO ============================= */
.hero {
  position: relative;
  background: linear-gradient(135deg, rgba(88, 50, 96, 1) 0%, rgba(43, 36, 73, 1) 18%);
  padding: 50px 0 100px;
}
.hero__grid {
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
}
/* Two columns from desktop only now - title/image stay stacked (single
   column) through the whole tablet range, iPad Mini through iPad Pro. */
@media (min-width: 1030px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 32px; }
}

.hero__eyebrow { color: var(--pink-soft); margin: 0 0 14px; }
/* Figma: size 52 / line-height 56 / letter-spacing -1.5% (-1.5% of 52px =
   -0.78px - CSS letter-spacing takes a length, not a percentage). */
.hero__title {
  font-size: 52px;
  font-weight: 600; letter-spacing: -0.78px; line-height: 56px;
  color: #fff; margin: 0 0 18px; max-width: 18ch;
}
/* Execs-only desktop tweak - its hero title runs a touch tighter than the
   default 18ch allows at this width. */
@media (min-width: 1030px) {
  [data-page="execs"] .hero__title { max-width: 22ch; }
}
.hero__lead {
  color: var(--paper); font-size: 1.02rem; max-width: 54ch; margin: 0 0 26px;
}

.url-form__label {
  display: block; font-size: 0.9rem; font-weight: 500; margin: 0 0 20px;
  color: var(--paper);
}
.section--light .url-form__label { color: var(--ink-soft); }
.section--tint .url-form__label { color: var(--ink); }

.url-form {
  display: flex; flex-wrap: wrap; gap: 10px;
  background: #fff; border-radius: var(--radius-pill); padding: 6px;
  max-width: 560px;
}
.url-form__input {
  flex: 1 1 220px; min-width: 0; border: none; outline: none;
  background: transparent; font-family: inherit; font-size: 0.95rem;
  color: var(--ink); padding: 12px 18px;
}
.url-form__input::placeholder { color: var(--ink-faint); }
.url-form__submit { flex-shrink: 0; }

.url-form__note {
  font-size: 0.8rem; color: var(--on-dark-faint); margin: 12px 0 0;
}
.section--light .url-form__note { color: var(--ink-faint); }

/* ---------- hero visual ----------
   The whole composition (model photo, ribbon, floating badges, fit-card
   mockup) now ships as one pre-composed image per page (see
   assets/images/overview/peak-cmp-2026-overview-hero.png) rather than
   being built from separate CSS-positioned pieces. */
.hero__visual { position: relative; }
.hero__visual-img { width: 100%; height: auto; margin-left: auto; }

/* Some persona pages ship two separately-composed hero images (desktop vs
   mobile crop) rather than one image that just scales - same show/hide
   swap technique as the wave dividers below. */
.hero__visual-img--mobile { display: none; }
@media (max-width: 640px) {
  .hero__visual-img--desktop { display: none; }
  .hero__visual-img--mobile { display: block; }
}

/* ---------- hero tensions (persona pages: pressures row under the hero copy) ---------- */
.hero-tensions {
  display: flex; flex-direction: column; gap: 24px;
  margin-top: 40px;
}
.hero-tension { display: flex; gap: 16px; align-items: flex-start; }
/* Without flex-shrink:0 here, the badge (a flex item like its copy sibling)
   gets squeezed by the flex-shrink algorithm whenever the row is tight -
   the global `img, svg, picture { max-width: 100% }` rule then caps the
   icon down to that shrunk container, distorting its aspect ratio. */
.hero-tension__badge { flex-shrink: 0; }
.hero-tension__badge img { width: 56px; height: 56px; display: block; flex-shrink: 0; }
.hero-tension__title { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 8px; }
.hero-tension__body { font-size: 0.86rem; color: var(--on-dark-soft); margin: 0; line-height: 1.55; }
.hero-tensions__divider { height: 1px; width: 100%; background: rgba(255, 255, 255, 0.16); }

@media (min-width: 641px) {
  .hero-tensions { flex-direction: row; gap: 32px; }
  .hero-tension { flex: 1; }
  .hero-tensions__divider { width: 1px; height: auto; align-self: stretch; }
}

/* Tablet and desktop only - true mobile keeps the tighter spacing above. */
@media (min-width: 641px) {
  .hero__eyebrow { margin-bottom: 32px; }
  .hero__title { margin-bottom: 24px; }
  .hero__lead { margin-bottom: 32px; }
}

/* iPad Pro and other small-desktop widths keep the badge icon at 45px
   rather than Figma's desktop 56px, right up to where the desktop
   layout itself takes over at 1440px. */
@media (min-width: 900px) and (max-width: 1439px) {
  .hero-tension__badge img { width: 45px; height: 45px; }
}

/* ---------- checks grid (persona pages: "Four checks behind the X% score") ---------- */
.checks-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 760px) { .checks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .checks-grid { grid-template-columns: repeat(4, 1fr); } }

.check-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.check-item__icon img { width: 78px; height: 78px; display: block; }
.check-item__title {
  font-size: 1.02rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink); margin: 0;
}
.check-item__body { font-size: 0.88rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ---------- why-copy narrative (persona pages: image + text, no cards) ---------- */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .why-grid { grid-template-columns: 0.85fr 1fr; gap: 48px; } }
.why-media img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.why-copy { display: flex; flex-direction: column; gap: 20px; }
.why-copy .section__subtitle + .section__subtitle { margin-top: -4px; }

/* ---------- callout panel (persona pages: "Why this matters right now") ---------- */
.callout {
  display: flex; align-items: center; gap: 32px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg); padding: 32px 40px;
  margin-top: 48px;
}
.callout__icon {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.callout__icon img { width: 88px; height: 88px; }
.callout__eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin: 0 0 10px; }
.callout__text { font-size: 1rem; color: var(--on-dark-soft); margin: 0; line-height: 1.6; }
.callout__stat { color: var(--pink); font-weight: 600; }
.callout__source { font-size: 0.82rem; color: var(--purple-3); margin: 12px 0 0; }
.callout__rule { display: block; height: 1px; width: 100%; background: rgba(255, 255, 255, 0.16); margin-top: 20px; }

/* A small pink "eyebrow" row with a leading dot, used ahead of a section
   title on dark backgrounds (persona pages: "Why it's easy to miss"). */
.why-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin: 0 0 20px; }
.why-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex-shrink: 0; }

/* A plain full-width rule used to separate two distinct halves of one
   section (e.g. persona pages where "why it shows up" and "how it works"
   share a single dark section instead of being split by a wave). */
.section-divider { display: block; height: 1px; width: 100%; background: var(--purple-3); border: none; margin: 60px 0; }

@media (max-width: 640px) {
  .callout { flex-direction: column; text-align: center; gap: 20px; padding: 24px; }
}

/* ============================= BAND =============================
   A contained, rounded card that straddles the boundary between the
   section above it (usually the hero) and whatever section follows -
   top half over the section above, bottom half over the section below.
   `.band-dock` pins it to the bottom edge of its (position: relative)
   parent section, and `translateY(50%)` on `.band` shifts it down by
   exactly half of ITS OWN rendered height - so it stays centred on the
   boundary regardless of how tall its content ends up being. */
.band-dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
}
.band {
  background: var(--purple-3); color: var(--ink);
  border-radius: var(--radius-md);
  padding: 22px 28px;
  box-shadow: var(--shadow-card);
  transform: translateY(50%);
}
.band__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px;
}
.band__label { font-size: 0.92rem; font-weight: 600; max-width: 16ch; margin: 0; flex-shrink: 0; }
.band__divider { width: 1px; align-self: stretch; background: rgba(43, 36, 73, 0.18); display: none; }
@media (min-width: 760px) { .band__divider { display: block; } }
.band__list { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 28px; margin: 0; padding: 0; flex: 1; }
.band__item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.band__item svg, .band__item img { width: 18px; height: 18px; flex-shrink: 0; }

/* Desktop only (.band__list is hidden below 1030px in favor of
   .band-carousel - see the breakpoint further down) - flex's default
   flex-start packs every item to the left and leaves the leftover width
   from .band__list's flex:1 sitting empty after the last item instead of
   spread between them. space-between fixes that, using the existing gap
   as a minimum rather than a fixed value. */
@media (min-width: 1030px) {
  .band__list { justify-content: space-between; }
}

/* ============================= SECTIONS (generic) ============================= */
.section { padding: 76px 0; }
.section--light { background: var(--paper); color: var(--ink); }
.section--dark {
  background: var(--purple-1); color: #fff;
  padding-top: 50px; padding-bottom: 40px;
}
.section--tint {
  background: var(--purple-4); color: var(--ink);
  padding-top: 50px; padding-bottom: 80px;
}

.section__head { max-width: 920px; margin: 0 auto 48px; text-align: center; }
.section__title { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 18px; }
.section__subtitle { font-size: 1rem; margin: 0; }
.section--light .section__subtitle { color: var(--ink-soft); }
.section--dark .section__subtitle { color: var(--on-dark-soft); }
.section--tint .section__subtitle { color: var(--ink); }

/* First section directly under the hero - a bit of breathing room above it,
   plus a soft lavender-to-white wash instead of a flat white background. */
.section--after-hero {
  padding-top: 110px;
  padding-bottom: 30px;
  background: linear-gradient(180deg, rgba(222, 214, 252, 1) 0%, rgba(255, 255, 255, 1) 15%);
}
/* Tablet only (iPad Mini through iPad Pro) - extra horizontal breathing
   room on top of the .container padding it already gets, plus tablet-
   specific vertical rhythm for each section variant. */
@media (min-width: 641px) and (max-width: 1029px) {
  .section--light { padding: 34px 0 32px 0; }
  .section--dark { padding: 0; }
  /* Comes after .section--light above so its padding-top/padding-bottom
     win for .section--after-hero elements (they always carry both
     classes) - .section--light's shorthand would otherwise reset both
     back to 34px/32px. */
  .section--after-hero { padding-top: 84px; padding-left: 20px; padding-right: 20px; padding-bottom: 0; }
}

/* Steps-section title ("AI Fit Check for your ecommerce data") styling
   lives at the very end of this file (search "steps-title") - it has to
   win over the .section--dark .section__title tablet override further
   down at equal specificity, which only source order can guarantee. */
.section__head.steps-head { margin-bottom: 32px; }

/* ---------- persona cards (Overview: "one score, read differently") ---------- */
.persona-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  position: relative;
}
@media (min-width: 760px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .persona-grid { grid-template-columns: repeat(4, 1fr); } }

.persona-card {
  background: #fff; border: 1px solid rgba(43, 36, 73, 0.08);
  border-radius: var(--radius-md); padding: 32px;
  box-shadow: var(--shadow-card);
  position: relative;
  /* Grid rows already stretch every card in a row to equal height (grid's
     default align-items: stretch) - this flex column then pushes
     .persona-card__link to that shared bottom edge via the body's
     flex: 1, so the links line up across cards no matter how long each
     card's body copy runs. No JS height-measuring needed. */
  display: flex; flex-direction: column; gap: 16px;
}
.persona-card__icon {
  display: flex; align-items: center; justify-content: flex-start;
}
.persona-card__icon svg, .persona-card__icon img { width: 42px; height: 42px; }
/* Matched to .step-card__title/__body (step-card is the source of truth
   for these sizes) - see the ≤1029px override further down for the
   title's tablet/mobile size, mirroring step-card's own breakpoint. */
.persona-card__title { font-size: 20px; font-weight: 700; line-height: 28px; margin: 0; }
.persona-card__body { flex: 1 1 auto; font-size: 16px; line-height: 26px; color: var(--ink-soft); margin: 0; }
.persona-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  color: var(--ink);
}
.persona-card__link svg,
.persona-card__link img { width: 20px; }

/* Sits exactly in the 32px grid gap to the right of its card (not just
   offset by eye) and centers the arrow icon inside that gap, both ways,
   so it stays centered between the two cards regardless of gap size. */
.persona-arrow {
  display: none;
  position: absolute; top: 50%; right: -32px; width: 32px; height: 28px;
  align-items: center; justify-content: center;
  transform: translateY(-50%);
  color: var(--pink); z-index: 2;
}
@media (min-width: 1040px) {
  .persona-arrow { display: flex; }
}

/* ============================= WAVE DIVIDERS (Figma exports) =============================
   Real designed wave SVGs, exported at a fixed 1920px native width. Rather
   than scaling the curve down (which would distort it), it stays pinned at
   1920px and is centered + cropped equally from both sides as the viewport
   narrows - `overflow: hidden` on the wrapper does the cropping, `left:50%`
   + translateX(-50%) on the image keeps it centered. At 1920px and up
   there's more viewport than the asset covers, so it switches to scaling
   proportionally with the viewport (via aspect-ratio) instead of leaving
   empty space. Hidden below the "mobile" breakpoint - phones get their own
   separate wave assets (not wired up here yet).
   ========================================================================== */
.wave-figma {
  display: none;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.wave-figma img {
  position: absolute; top: 0; left: 50%;
  width: 1920px; max-width: none; height: 100%;
  transform: translateX(-50%);
  display: block;
}
.wave-figma--arc, .wave-figma--h148 { height: 148px; }
.wave-figma--swell, .wave-figma--h150 { height: 150px; }
.wave-figma--h220 { height: 220px; }
/* Some dividers reuse a wave asset upside-down for a bottom transition
   instead of a dedicated flipped export - flipping the wrapper (not the
   img) keeps the crop/centering math above unaffected. */
.wave-figma--flip { transform: scaleY(-1); }

@media (min-width: 641px) { .wave-figma { display: block; } }

@media (min-width: 1920px) {
  .wave-figma--arc, .wave-figma--h148 { height: auto; aspect-ratio: 1920 / 148; }
  .wave-figma--swell, .wave-figma--h150 { height: auto; aspect-ratio: 1920 / 150; }
  .wave-figma--h220 { height: auto; aspect-ratio: 1920 / 220; }
  .wave-figma img { position: static; width: 100%; height: 100%; transform: none; }
}

/* Mobile counterpart - same crop-below/stretch-above technique, pinned at
   the mobile asset's native 375px width instead of 1920px. Sits in the
   markup alongside .wave-figma; only one of the two is ever visible.
   Width is deliberately 100% + 8px (centred via the matching negative
   margin) rather than a plain 100% - on some real high-DPR phones this
   wrapper itself can round a hair short of the true viewport edge (a gap
   devtools' device emulation doesn't reproduce), showing a sliver of
   whatever sits behind it. Overhanging on purpose puts that rounding
   error inside the crop instead of at the edge; html/body's overflow-x:
   hidden (see top of file) keeps the overhang from causing page scroll. */
.wave-figma-mobile {
  display: none;
  position: relative;
  overflow: hidden;
  width: calc(100% + 8px);
  margin-left: -4px;
}
.wave-figma-mobile img {
  position: absolute; top: 0; left: 50%;
  width: 375px; max-width: none; height: 100%;
  transform: translateX(-50%);
  display: block;
}
.wave-figma-mobile--arc, .wave-figma-mobile--h148 { height: 148px; }
.wave-figma-mobile--swell, .wave-figma-mobile--h150 { height: 150px; }
.wave-figma-mobile--flip { transform: scaleY(-1); }

@media (max-width: 640px) { .wave-figma-mobile { display: block; } }

@media (min-width: 375px) and (max-width: 640px) {
  .wave-figma-mobile--arc, .wave-figma-mobile--h148 { height: auto; aspect-ratio: 375 / 148; }
  .wave-figma-mobile--swell, .wave-figma-mobile--h150 { height: auto; aspect-ratio: 375 / 150; }
  /* width:100% here would, on some real high-DPR phones, round a fraction
     of a device pixel short of the wrapper's own width (a gap devtools'
     device emulation doesn't reproduce) and leave a hairline sliver of
     whatever sits behind it. Oversizing slightly and re-centering means
     that rounding error lands inside the overflow:hidden crop instead of
     at the edge. */
  .wave-figma-mobile img {
    position: absolute; top: 0; left: 50%;
    width: 102%; max-width: none; height: 100%;
    transform: translateX(-50%);
  }
}

/* ---------- "two creative devices" ---------- */
.step-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px; position: relative;
}
@media (min-width: 760px) { .step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .step-grid { grid-template-columns: repeat(4, 1fr); } }
/* 16px reads fine stacked/2-up on mobile and tablet, but looks cramped
   once the cards sit side by side on desktop - also gives .step-arrow
   (below) a bit more room to sit centered in the gap. */
@media (min-width: 1030px) {
  .step-grid { gap: 27px; }
}

/* Dark card (default) - used on Overview, Ecommerce and Execs, where the
   step-grid sits inside a dark section. */
.step-card {
  background: linear-gradient(90deg, rgba(66, 39, 79, 1) 0%, rgba(54, 45, 92, 1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px; padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.step-card__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; line-height: 20px; letter-spacing: 1.04px; text-transform: uppercase;
  color: var(--pink-soft); margin: 0;
}
.step-card__eyebrow svg, .step-card__eyebrow img { width: 20px; height: 20px; }
.step-card__title { font-size: 20px; font-weight: 700; line-height: 28px; color: #fff; margin: 0; }
.step-card__body { font-size: 16px; font-weight: 400; line-height: 26px; color: var(--on-dark-soft); margin: 0; }

/* Light card modifier - added alongside .step-card (e.g. class="step-card
   step-card--light") on Digital Marketers and Trading, where the
   step-grid sits in its own white section instead, matching
   .persona-card's white/bordered/shadowed look on those pages. */
.step-card--light {
  background: #fff;
  border: 1px solid rgba(43, 36, 73, 0.08);
  box-shadow: var(--shadow-card);
}
.step-card--light .step-card__eyebrow { color: var(--ink-soft); }
.step-card--light .step-card__title { color: var(--ink); }
.step-card--light .step-card__body { color: var(--ink-soft); }

/* right/width match .step-grid's 27px desktop gap - offset kept at 30px so the arrow sits visually centered (the only width
   this is ever visible at - see the display rule below), centering the
   arrow in the gap the same way .persona-arrow does for its own grid. */
.step-arrow {
  display: none;
  position: absolute; top: 50%; right: -30px; width: 30px;
  align-items: center; justify-content: center;
  transform: translateY(-50%);
  color: var(--purple-3); z-index: 2;
}
.step-arrow img { width: 10px; height: auto; }
@media (min-width: 1040px) { .step-arrow { display: flex; } }

/* Light cards use the persona-card connector arrow asset instead of the
   step-card's usual one (see stepCard() in the Digital Marketers/Trading
   page scripts), sized to match how that asset renders on persona-grid. */
.step-card--light .step-arrow { color: var(--pink); }
.step-card--light .step-arrow img { width: 24px; height: 28px; }

/* ---------- carousel (step cards become a swipeable slider on mobile) ----------
   Ported from the fashion week template's carousel controller (js/main.js).
   Desktop/tablet: .carousel__track just IS .step-grid, laid out as its own
   CSS grid - this component stays dormant. Below 640px (matching
   CAROUSEL_PHONE_QUERY in JS) it becomes a flex row that the controller
   translates one slide at a time via swipe or autoplay. */
.carousel { min-width: 0; }
.carousel__viewport { overflow: hidden; }
/* Desktop/tablet: the step-carousel is dormant here (see above - its
   track is just the plain .step-grid CSS grid, nothing slides), so this
   overflow:hidden has no sliding track left to clip - it was only
   clipping .step-card--light's box-shadow. Scoped to .step-carousel
   specifically since .band-carousel still slides up to 1029px and needs
   its own viewport clipped (see its rule further down). */
@media (min-width: 641px) {
  .step-carousel .carousel__viewport { overflow: visible; }
}
.carousel__footer { display: none; }
.carousel__dots { display: flex; align-items: center; gap: 8px; }
.carousel__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.carousel__dot.is-active { width: 22px; background: var(--pink); }
.carousel__hint { font-size: 0.78rem; font-weight: 600; color: var(--on-dark-soft); }

/* Light carousel modifier - the default dot/hint colors above are tuned
   for a dark background (Overview/Ecommerce/Execs' step-carousel); on
   Digital Marketers/Trading the step-carousel sits on a white section
   instead, so it needs darker inactive dots and hint text to stay
   visible/legible. */
.step-carousel--light .carousel__dot { background: var(--purple-4); }
.step-carousel--light .carousel__dot.is-active { background: var(--pink); }
.step-carousel--light .carousel__hint { color: var(--purple-1); }

/* ---------- band carousel (mobile only: 2 icons per slide, auto-advancing) ----------
   Hidden on desktop/tablet - the band's .band__list (ul/li) handles those.
   No dots (Carousel only builds them when a [data-carousel-dots] element
   is present, which this markup deliberately omits) and autoplay is
   opt-in per instance via data-carousel-autoplay/-interval on the root
   (see js/main.js) - swiping still stops it permanently, same as any
   other carousel on the site. */
.band-carousel { display: none; width: 100%; }
.band-carousel .carousel__viewport { overflow: hidden; }
.band-carousel .carousel__track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.band-carousel .carousel__slide {
  flex: 0 0 100%; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.band-carousel.is-dragging .carousel__track { transition: none; }

@media (max-width: 640px) {
  .step-carousel {
    --slide-w: 84%;
    --slide-gap: 16px;
  }
  .step-carousel .carousel__viewport {
    margin-right: -24px;
    touch-action: pan-y; /* let the page scroll vertically, we own the X axis */
    cursor: grab;
  }
  .step-carousel.is-dragging .carousel__viewport { cursor: grabbing; }
  .step-carousel .carousel__track {
    display: flex;
    gap: var(--slide-gap);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  .step-carousel.is-dragging .carousel__track { transition: none; }
  .step-carousel .carousel__slide {
    flex: 0 0 var(--slide-w);
    min-width: 0;
  }
  /* Scroll-reveal fade-in doesn't make sense on a swipeable carousel - a
     card the visitor has just swiped to shouldn't fade in on top of them.
     Show every slide immediately, overriding the [data-reveal] rules. */
  html.js .step-carousel [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .step-carousel .carousel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    margin-left: 5px;
  }
}

/* ---------- bottom CTA / process ---------- */
.process {
  display: flex; align-items: flex-start; justify-content: center; gap: 0;
  margin-top: 40px;
}
.process__step { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 110px; }
.process__icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.process__icon svg, .process__icon img { width: 52px; height: 52px; }
.process__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-1); }
.process__sep {
  flex: 1; max-width: 90px; margin-top: 26px;
  border-top: 2px dashed rgba(43, 36, 73, 0.3);
}

/* Desktop only - bigger process icons/label and a wider dashed connector. */
@media (min-width: 1030px) {
  .process__icon, .process__icon svg, .process__icon img { width: 72px; height: 72px; }
  .process__label { font-size: 13px; }
  .process__sep { margin-top: 36px; max-width: 190px; }
}

/* ============================= FOOTER ============================= */
.footer { background: var(--purple-1); color: #fff; padding: 48px 0 24px; }
.footer__top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px;
  max-width: var(--container); margin: 0 auto; padding: 0 24px 28px;
}
.footer__logo { height: 50px; width: auto; margin-bottom: 12px; }
.footer__meta { font-size: 0.82rem; color: var(--on-dark); margin: 0; max-width: 60ch; }
.footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 6px 0 0; padding: 0; }
.footer__links a { font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; color: var(--on-dark); }
.footer__links a:hover { color: #fff; }
.footer__bottom {
  max-width: var(--container); margin: 0 auto; padding: 20px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer__copyright { font-size: 0.78rem; color: var(--on-dark-faint); margin: 0; }

/* ============================= COMING SOON (stub pages) ============================= */
.coming-soon { padding: 120px 0; text-align: center; }
.coming-soon__title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 600; margin: 0 0 16px; }
.coming-soon__body { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 28px; }

/* ============================= SCROLL REVEAL ============================= */
html.js [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================= RESPONSIVE ============================= */
@media (max-width: 1029px) {
  /* The band's icon list wraps onto more rows as the viewport narrows,
     so it needs more hero clearance below the stacked hero visual/fit
     card here than it does on the two-column desktop layout. */
  .hero { padding-bottom: 150px; }
  .hero__visual { margin-top: 24px; }
}

/* Tablet (iPad Mini through iPad Pro, right up to the 1030px desktop
   breakpoint) renders noticeably worse than desktop at the default
   layout, so it gets its own explicit rules on top of the ones above
   rather than sharing the wider desktop treatment. */
@media (min-width: 641px) and (max-width: 1029px) {
  .hero__title, .hero__lead, .url-form { max-width: none; width: 100%; }
  /* Scoped to the desktop crop specifically - the base
     .hero__visual-img--mobile { display: none } rule and this rule are
     equal specificity, so targeting the bare .hero__visual-img here was
     unintentionally re-showing the mobile crop underneath it too. */
  .hero__visual-img--desktop { width: 550px; display: block; margin: 0 auto; }
  .hero__grid { gap: 20px; }
  .hero { padding-bottom: 100px; }

  /* A 2x2 grid instead of either the row-of-4 (too cramped here) or the
     single mobile column (too much wasted width at this size) - see
     image reference. Badge stays to the left of its title/body (the
     .hero-tension row layout inherited from the base rule, not stacked),
     and no divider between the cells. */
  .hero-tensions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .hero-tensions__divider { display: none; }

  /* Smaller than desktop's 100% media, larger than mobile's 90% carousel. */
  .why-media img { width: 90%; margin: 0 auto; }

  /* Figma's dark-section H2 is bigger here than the shared mobile/tablet
     .section__title size below (its forced <br> collapse is handled by
     the general .section__title rule near .br-desktop's definition). */
  .section--dark .section__title { font-size: 40px; line-height: 46px; }

  /* The desktop CTA button reappears next to the burger throughout this
     whole tablet range (not on true mobile) - see the navbar burger
     breakpoint above for where it's normally hidden. Its height stays
     48px automatically: the vertical padding is a fixed 12px (not part
     of the fluid clamp()s), so 12px + the 24px arrow icon + 12px = 48px
     at any width it's shown at. */
  .navbar__cta { display: inline-flex; }

  /* Same dashed-connector treatment as desktop (see the ≥1030px rule). */
  .process__sep { margin-top: 36px; max-width: 190px; }
}

@media (max-width: 640px) {
  .navbar { padding: 12px 0; }
  .navbar__inner { gap: 12px; }
  .navbar__logo img { height: 42px; }
  .navbar__right { gap: 10px; }
  /* Matches .navbar's own top-padding drop at this width (see above),
     keeping the logo's position identical whether the overlay is open. */
  .mobile-nav { padding-top: 12px; }
  .section { padding: 0; }
  .hero {
    padding-top: 40px;
    padding-bottom: 100px;
    background: linear-gradient(135deg, rgba(88, 50, 96, 1) 0%, rgba(43, 36, 73, 1) 30%);
  }
  .hero__visual { margin-top: 34px; }
  .url-form { border-radius: var(--radius-md); }
  .url-form__submit { width: 100%; }
  .process { gap: 4px; }
  .process__step { width: 84px; }
  .process__sep { max-width: 32px; }

  .hero__grid { gap: 0; }

  /* Full-bleed edge-to-edge on mobile - cancel out .band-dock's inherited
     .container side padding so .band spans the true viewport width (the
     carousel needs every spare pixel it can get so slide text like
     "Marketplaces" doesn't get clipped), with square corners to match a
     band that now runs flush to both edges. */
  .band-dock { padding-left: 0; padding-right: 0; }
  .band { border-radius: 0; padding-left: 18px; padding-right: 18px; }

  /* Label spans the full width and is centered above the icon list. */
  .band__inner { flex-direction: column; align-items: center; gap: 16px; }
  .band__label { max-width: none; width: 100%; text-align: center; }

  /* Previous mobile treatment: a plain two-column grid showing all 6 items
     at once, no carousel. Kept here in case we want to revert away from
     the auto-advancing carousel below (.band-carousel).
  .band__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; width: 100%; }
  */

  .section--light { padding-top: 120px; padding-bottom: 20px; }
  /* The second, plain .section--light some pages have further down (the
     step-cards section on Digital Marketers/Trading) doesn't need the
     first one's clearance for the overlapping .band card above it. */
  .section--light:not(.section--after-hero) { padding-top: 0; padding-bottom: 0; }
  .section--tint { padding-bottom: 48px; }

  .checks-grid { gap: 38px; }
  .check-item { padding-left: 30px; padding-right: 30px; }
  .check-item__icon img { width: 56px; height: 56px; }
}

/* The band's auto-advancing carousel replaces its plain icon list at the
   same width the navbar switches to the burger menu (see the .navbar__pills
   breakpoint above), not just on true mobile. */
@media (max-width: 1029px) {
  .band__list { display: none; }
  .band-carousel { display: block; }
}

/* Carousel width tiers within that same shared range - narrower viewports
   need less side-inset than true mobile since there's more room overall. */
@media (max-width: 640px) { .band-carousel { width: 90%; } }
@media (min-width: 641px) and (max-width: 899px) { .band-carousel { width: 66%; } }
@media (min-width: 900px) and (max-width: 1029px) { .band-carousel { width: 74%; } }

/* iPad Pro specifically renders .band__list's icons a touch tight at its
   default gap - a small bump on the row gap only. */
@media (min-width: 1030px) and (max-width: 1050px) {
  .band__list { gap: 20px 18px; }
}

/* ============================= MOBILE TYPE (Figma 375 audit) =============================
   Figma-matched font-size/weight/line-height/letter-spacing, extended to
   run through every tablet width up to (but not including) the 1030px
   desktop breakpoint - colors and non-type properties (paddings, gaps,
   icon sizes) are left as they are pending separate review, except the
   CTA process icon which was explicitly approved below. */
@media (max-width: 1029px) {
  .hero__eyebrow { font-size: 16px; line-height: 20px; }
  .hero__title { font-size: 32px; line-height: 36px; letter-spacing: -0.16px; }
  .hero__lead { font-size: 17px; font-weight: 500; line-height: 26px; }
  .url-form__label { font-size: 17px; font-weight: 600; line-height: 26px; }
  .section--tint .url-form__label { font-size: 16px; }

  .band__label { font-size: 14px; font-weight: 700; line-height: 21px; }
  .band__item { font-size: 16px; font-weight: 400; line-height: 24px; }

  .section__title { font-size: 28px; line-height: 32px; letter-spacing: -0.42px; }
  .section--dark .section__title { letter-spacing: -0.28px; }
  .section__subtitle { font-size: 17px; line-height: 26px; }
  .check-item__title { font-size: 20px; line-height: 28px; letter-spacing: 0.4px; }
  .check-item__body { font-size: 16px; line-height: 26px; }

  .step-card__title { font-size: 18px; line-height: 26px; }
  .persona-card__title { font-size: 18px; line-height: 26px; }
  .persona-card__link { font-size: 14px; }

  .process__label { font-size: 13px; font-weight: 700; letter-spacing: 1.04px; }
  .process__icon, .process__icon svg, .process__icon img { width: 72px; height: 72px; }

  .footer__meta { font-size: 16px; font-weight: 500; line-height: 26px; }
  .footer__links a { font-size: 16px; font-weight: 500; line-height: 26px; }
  .footer__copyright { font-size: 14px; line-height: 22px; }
}

/* Tablet only (iPad Mini through iPad Pro) - bigger than the 32px/36px
   shared mobile/tablet size just above, smaller than desktop's 52px/56px. */
@media (min-width: 641px) and (max-width: 1029px) {
  .hero__title { font-size: 56px; line-height: 60px; }
}

/* Every section's .container gets extra horizontal room on tablet -
   .section--after-hero's own 20px (see its rule further up) stacks on
   top of this rather than replacing it. */
@media (min-width: 641px) and (max-width: 1029px) {
  .container { padding-left: 48px; padding-right: 48px; }
}

/* Steps-section title ("AI Fit Check for your ecommerce data") - a fixed
   size independent of viewport, unlike the shared .section__title's
   clamp(). Placed last in the file so it wins the specificity tie against
   the .section--dark .section__title tablet override above on source
   order alone. */
.section__title.steps-title { font-size: 32px; margin: 0 0 32px; }