/* ============================================================
   mobile.css — mobile implementation of the Figma 375 screens.
   Loads LAST (after components.css) so these overrides win the
   cascade. Desktop is untouched: every rule lives inside a
   max-width media query.

   IMPORTANT — Figma "Mobile mode" resolves the spacing/radius
   tokens to SMALLER values than the code's (desktop) tokens.css.
   These rules therefore use the explicit Mobile-mode px values,
   NOT the same-named code tokens. Mobile-mode scale:
     xxs 4 · xs 6 · s 8 · sm 12 · m 16 · ml 20 · l 24 · xl 32
     · xxl 36 · max 54   |   radius: xs 6 · sm 12 · md 16 · full 999
   ============================================================ */

/* Case-study captions carry a mobile-specific short label (.cap-mobile)
   next to the desktop-length copy (.cap-desktop). Hide the short label
   everywhere by default; the phone media query below swaps them. This is
   the ONE top-level rule in this file — it only affects new classes that
   exist on the case-study pages, so desktop is untouched. */
.cap-mobile { display: none; }

/* Penny's mobile hero art is a single Figma export shown only on the phone
   (the desktop hero keeps its HTML composition). Hidden by default. */
.penny-hero-mobile { display: none; }

/* Carousel scroll-pagination dots (built by js/carousel-dots.js) exist
   only on the phone; on desktop the arrow controls stay. */
.dots-pagination { display: none; }

/* ============================================================
   01 · Home — 375  (Figma frame 438:7741)
   ============================================================ */
@media (max-width: 640px) {

  /* ---- Nav: mobile component (Figma 438:7782) ----
     Full-width bar (white 10%, soft shadow), tabs spread edge-to-edge,
     only the active tab is a filled pill. Bar + tabs pad py-sm(12)
     px-m(16) → ~62px tall, matching the design. */
  .nav-wrap.nav-overlay { padding: 0; }
  .nav {
    width: 100%;
    justify-content: space-between;
    gap: 0;
    padding: 12px 16px;               /* py-sm 12 · px-m 16 */
    background: var(--alpha-10);
    border: 0;
    border-radius: 0;
    box-shadow: 0 2px 6px rgba(17, 17, 19, 0.08);
  }
  .nav a {
    padding: 12px 16px;               /* py-sm 12 · px-m 16 */
    font-size: 12px;
    white-space: nowrap;
  }
  .nav a.active {
    background: var(--alpha-45);
    border-radius: var(--radius-full);
  }

  /* ---- Hero: the copy stays near the top on the phone (the desktop's
     bottom anchor would put it under the chip pile), on the 20px margin ---- */
  .hero-intro { left: 20px; top: 14%; bottom: auto; width: calc(100% - 40px); }

  /* ---- Main Container (Figma 438:7758): py-xxl(36), gap-max(54) ---- */
  .selected-work {
    padding-top: 36px;
    padding-bottom: 36px;
    gap: 54px;                        /* gap between Bio and Selected Work */
  }

  /* ---- Bio (438:7759): 20px side margins (ml), own gap-24, no vertical
     padding (the container's py-36 owns the top/bottom). ---- */
  .home-bio { padding: 0 20px; gap: 24px; }
  .home-bio p { text-align: left; }

  /* ---- Selected Work (438:7762): 20px margins, gap-m(16) ---- */
  .work-content { padding-left: 20px; padding-right: 20px; gap: 16px; }
  .work-header { gap: 6px; }          /* eyebrow → "Selected work" (xs) */
  .work-cards { gap: 24px; }          /* between the two cards (l) */
  .work-content > .btn { margin-top: 0; }  /* the 16px section gap owns it */

  /* ---- Project card cover (I438:7767;333:1618): image aspect + radius/md(16) ----
     Desktop pins .cover to 300px; on a 335-wide phone card that over-crops
     the 1032×600 mockup. Follow the image's native 1.72:1 and round to 16. */
  .project-card .cover {
    height: auto;
    aspect-ratio: 1032 / 600;
    border-radius: 16px;              /* radius/md */
  }

  /* ---- Primary buttons: fill the container, label centered
     (Figma 438:7761 Read More / 438:7769 View All). ---- */
  .home-bio .btn,
  .work-content > .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- Contact: two round icon-only buttons (52×52), centered ----
     Figma 438:7776 — Gmail + LinkedIn as circular glass pills, no text.
     font-size:0 collapses the bare label text node; the .btn-icon-20
     keeps its fixed size so the icon survives. */
  .contact-actions { justify-content: center; gap: 16px; }
  .contact-actions .btn.btn-plain {
    width: 52px;
    height: 52px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    font-size: 0;
    justify-content: center;
  }
  .contact-actions .btn.btn-plain .btn-icon-20 { width: 22px; height: 22px; }

  /* ---- Contact card (438:7771): radius/md(16), py-xl(32) px-ml(20)
     internal padding, gap-l(24), 20px side margins. ---- */
  .contact-anchor { padding-left: 20px; padding-right: 20px; }
  .contact-content { padding: 0; gap: 24px; }
  .contact-content .contact-body { gap: 8px; }   /* heading → description (s) */
  .contact-section {
    padding: 32px 20px;               /* py-xl 32 · px-ml 20 (was 72/0) */
    border-radius: 16px;              /* radius/md (was 20) */
    background:
      radial-gradient(194px 247px at 82% 8%,  rgba(255, 217, 190, 1), rgba(255, 217, 190, 0) 62%),
      radial-gradient(184px 223px at 10% 20%, rgba(220, 217, 255, 1), rgba(220, 217, 255, 0) 60%),
      radial-gradient(234px 274px at 55% 92%, rgba(185, 185, 250, 1), rgba(185, 185, 250, 0) 58%),
      radial-gradient(134px 171px at 38% 40%, rgba(255, 243, 226, 1), rgba(255, 243, 226, 0) 70%),
      linear-gradient(180deg, #f3f1fe 0%, #eceafb 100%);
  }

  /* ---- Footer: centered + stacked (name over © 2026) — Figma 438:7779 ---- */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
  }
}

/* ============================================================
   02 · About — 375  (Figma frame 438:7807)
   Contact card, footer and nav are shared with Home (rules above).
   ============================================================ */
@media (max-width: 640px) {

  /* Nav becomes a fixed overlay on the sticky-nav pages too, so the header
     wash runs up behind the translucent bar (no white strip above it). */
  .nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0; }

  /* ---- Header (438:7808): lavender top wash, 48px heading ----
     pt-96 clears the overlay nav; pb-xxl(36); px-ml(20); gap-sm(12). */
  .about-intro {
    padding: 96px 20px 36px;
    gap: 12px;
    background: linear-gradient(180deg, #f3f1fe 0%, rgba(255, 255, 255, 0) 520px);
  }
  .about-intro .display-2 { font-size: 48px; line-height: 1.05; letter-spacing: -0.01em; }
  /* The portrait overlaps a 120px heading; at 48px it would cover the words,
     so on the phone it sits under the heading instead. */
  .about-portrait {
    position: static;
    width: 140px;
    margin-top: 4px;
  }
  .about-intro .body-2-med { font-size: 16px; }

  /* ---- Reasons list: 16px, bold title on its own line (438:7815) ---- */
  .numbered-list { gap: 16px; }       /* between reason blocks (m) */
  .numbered-list .num,
  .numbered-list .text { font-size: 16px; }
  .numbered-list .text strong { display: block; }
  .about-intro .body-2.para { font-size: 16px; }

  /* ---- Experience (438:7828): gap-m(16), rows [company … year] / [role] ---- */
  .experience { padding-left: 20px; padding-right: 20px; gap: 16px; }
  .exp-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "company year"
      "role    role";
    column-gap: 8px;
    row-gap: 2px;
    padding: 14px 0;                  /* Figma py-14 (explicit) */
    align-items: baseline;
    font-size: 16px;
  }
  .exp-row .company { grid-area: company; width: auto; }
  .exp-row .years { grid-area: year; width: auto; font-size: 12px; }
  .exp-row .role { grid-area: role; }
  /* Rows aren't clickable — kill the hover background (it sticks after a
     tap on touch and reads as a selectable/interactive state). */
  .exp-row:hover { background: none; }
  .experience > .btn { width: 100%; justify-content: center; }

  /* ---- Recommendations (438:7861): bare cards, no wrapper box ----
     Figma: eyebrow gap-m(16) to a row of fixed 320×175 cards, gap-s(8),
     radius/sm(12), 1px line border, image object-cover; the next card
     peeks off the right edge. No grey container. */
  .recs { padding-left: 20px; padding-right: 0; gap: 16px; }
  .reviews {
    background: transparent;
    border-radius: 0;
    padding: 0 20px 0 0;              /* first card at the 20px gutter; last card gets 20px */
    gap: 8px;
    scroll-padding-left: 0;
    /* the desktop rule bleeds the strip past the container with a negative
       right margin; here .recs already has padding-right:0, so the strip
       reaches the edge on its own — keep the margin at 0 or the page gains a
       horizontal scrollbar. */
    margin-right: 0;
  }
  .reviews .review {
    flex: none;
    width: 320px;
    max-width: none;
    height: 175px;
    border: 1px solid var(--line);
    border-radius: 12px;             /* radius/sm */
  }
  .reviews .review img { width: 100%; height: 100%; object-fit: cover; }

  /* Section eyebrows: desktop widens these to 4px; the mobile serif label
     tracks tight (~0.56px on 14px), so pull them back in. */
  .experience .label-serif,
  .recs .label-serif { letter-spacing: 0.04em; }
}

/* ============================================================
   03 · Case Studies — 375  (Figma frame 438:7783)
   Header mirrors the About header; project cards, contact card,
   footer and nav are shared with Home/About (rules above).
   ============================================================ */
@media (max-width: 640px) {

  /* ---- Header (438:7784): lavender top wash, H1 48px, gap-sm(12) ----
     pt-96 clears the overlay nav; px-ml(20); pb-xxl(36). */
  .cs-header {
    padding: 96px 20px 36px;
    gap: 12px;
    background: linear-gradient(180deg, #f3f1fe 0%, rgba(255, 255, 255, 0) 520px);
  }
  .cs-header .heading-block { gap: 12px; }   /* eyebrow → heading (sm) */
  .cs-header .display-2 { font-size: 48px; line-height: 1.05; letter-spacing: -0.01em; }

  /* ---- Grid (438:7788): a single column of 335px cards, py-xxl(36)
     px-ml(20), gap-ml(20) between every card. ---- */
  .cs-grid { padding: 36px 20px; gap: 20px; }
  .cs-row { flex-direction: column; gap: 20px; }
  .cs-row .project-card { flex: none; width: 100%; }
}

/* ============================================================
   04 · Case study pages — 375  (Wixel: Figma frame 438:7882)
   Rebuilt from the Figma mobile export (ground-truth tokens), section
   by section. Mobile-mode px: 3xs2 xxs4 xs6 s8 sm12 m16 ml20 l24 xl32
   xxl36 max54 · radius xs6 sm12 full999. mobile.css loads LAST so it
   wins — but the base rules in case-study.css use 2-class selectors
   (.stat-card .k-number, .cs-inner > .case-card) and the sections
   carry inline padding/gap, so these overrides deliberately match that
   specificity / use !important to actually take effect.

   Cream card (bg --card, radius 12, p-20) is used ONLY by TL;DR, the
   KPI/stat cards, and the mini feature cards. Every image gallery sits
   BARE on the page — no cream wrapper (that's the Figma mobile design).
   ============================================================ */
@media (max-width: 640px) {

  /* ---- Main container: 20px gutters, 32px section rhythm, pt-32 pb-24.
     Kill each section's own vertical padding so the container gap owns
     the spacing (sections carry py-48 / inline padding on desktop). ---- */
  .cs-inner {
    padding: 32px 20px 24px;
    gap: 32px;
    align-items: stretch;
  }
  .cs-inner .sec { padding-top: 0 !important; padding-bottom: 0 !important; }
  .cs-inner > .wide:not(.case-card) {
    gap: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Highlight statements on Finaloop/Penny are a bare .narrow section with
     an inline py-48; trim to py-24 so it doesn't stack on the container's
     32px gap (Wixel's .cs-highlight already sits at 24). */
  .cs-inner > .narrow:has(> .h1) { padding-top: 24px !important; padding-bottom: 24px !important; }
  .tldr { padding: 0; }
  .kpi-block { padding: 0; gap: 12px; }
  .cs-highlight { padding: 24px 0; }
  .discover { padding: 0; gap: 16px; }
  .cs-footer-margin { padding-top: 0 !important; }

  /* ---- Back nav: a full-width top bar with a LEFT-aligned "← Back"
     (Figma Navigation 438:7911 — h-54, bg alpha-10, px-16 py-6, back
     circle + "Back" label). Replaces the desktop centered floating
     glass pill; the label (hidden by the @480 base rule) comes back. */
  .page-nav {
    position: fixed;                  /* sticky on scroll (was absolute — it
                                         scrolled away with the page). */
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    z-index: 100;
    justify-content: flex-start;
    gap: 4px;
    padding: 6px 16px;
    border: 0;
    border-radius: 0;
    background: var(--alpha-10);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);      /* frost the content scrolling under
                                         the now-fixed bar so it stays legible. */
    box-shadow: 0 2px 6px rgba(17, 17, 19, 0.08);
  }
  .page-nav .tab-label { display: inline; }
  .page-nav .tab { padding: 8px 16px 8px 8px; }

  /* ---- Hero art on mobile: she added the header image to every case-study
     hero (Figma 438:7883 / 8327 / 8527 / 9298 / 9629). The desktop art is a
     528×512 absolutely-composed box (was hidden on mobile) — un-hide it below
     the copy and scale the whole composition down to fit the phone. The 528px
     box is centred in the column and overflows it; .cs-hero's overflow:hidden
     clips the empty sides, and the negative margin reclaims the empty space
     the unscaled box would otherwise leave below the shrunk art. ---- */
  .cs-hero-grid { row-gap: 24px; }
  /* Hero tag chips sit 8px apart in Figma (both axes), not 12 (438:*Container). */
  .cs-hero-tags { gap: 8px; }
  /* Figma sits the "hero image" at x=20, width 335 — i.e. the SAME 20px side
     margins as the content block (438:9640/8538/7894). So fit every
     composition to a 335 target: the centring margin is then a constant 20px
     (they all start at their box's left edge), and only the per-page scale +
     bottom-reclaim differ (overrides live in each page block).
     transform-origin:top-left keeps the visual left edge at margin-left. */
  .cs-hero-art {
    display: block !important;
    justify-self: start;
    width: 528px;
    height: 512px;
    margin-left: calc((100% - 335px) / 2);
    transform: scale(0.634);          /* 335 / 528 (Wixel default) */
    transform-origin: top left;
    margin-bottom: -187px;            /* 512 − 512×0.634 */
  }
  /* Freeze the hero-art entrance/float on mobile — the continuous float
     overshoots the shrunk composition and gets clipped by .cs-hero. Rest
     the cards at their static positions (mirror the reduced-motion rule). */
  .cs-hero-art .rise-1, .cs-hero-art .rise-2, .cs-hero-art .rise-3 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cs-hero-art .float-a, .cs-hero-art .float-b {
    animation: none !important;
    transform: none !important;
  }

  /* ---- Carousels on mobile: replace the arrow chevrons with pagination
     dots (js/carousel-dots.js builds .dots-pagination after each scroller).
     One dot per card; the active dot tracks the card nearest centre. ---- */
  .scroll-arrow { display: none !important; }
  .dots-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-top: 12px;
    width: 100%;
  }
  .dots-pagination .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    transition: width 0.25s ease, background-color 0.25s ease;
  }
  .dots-pagination .dot.active { width: 18px; background: var(--ink); }

  /* ---- Intra-section gaps: eyebrow→content and heading→body are gap-8;
     the wider text sections are gap-20 (Figma frames). ---- */
  .sec-gap-12 { gap: 8px; }
  .sec-gap-16 { gap: 8px; }
  .sec-gap-24 { gap: 20px; }

  /* ---- Mobile type scale (Figma Mobile text styles) ---- */
  .cs-hero-copy .h1 { font-size: 48px; }        /* hero (438:7885) */
  .cs-hero-copy .subtitle { font-size: 24px; }  /* hero subtitle (438:7886) */
  .cs-inner .h1 { font-size: 48px; }            /* highlight quote (438:7997) */
  .cs-inner .h2-med { font-size: 32px; }        /* H2 Medium */
  .cs-inner .h3-med { font-size: 24px; }        /* H3 Medium */
  .cs-inner .body-2 { font-size: 16px; }        /* Body 2 (site gives 20) */
  .cs-inner .body-3 { font-size: 14px; }        /* Body 3 (base 16) */
  /* "A phone is not a small desktop" is an H2-Medium in Figma (438:7977),
     though the markup tags it h3-med — bump just that one. */
  .sec-gap-24 > .h3-med { font-size: 32px; letter-spacing: -0.01em; }
  /* The comparison-table heading is H3-Medium (24) in Figma (438:8258),
     not h2-med (32) — at 32 it wraps to 3 lines; 24 keeps the intended
     two-line break. */
  .sec-gap-24 > .h2-med { font-size: 24px; letter-spacing: -0.03em; }
  .cs-bullet { font-size: 16px; gap: 6px; }     /* bullets = Body 2 */
  .cs-list, .cs-list.gap-8 { gap: 6px; }

  /* ---- TL;DR: a cream card (438:7913), not plain text. bg card,
     radius 12, p-20; two bullets stacked gap-16, each label→text
     gap-8, text 16px. ---- */
  .tldr-bullets {
    background: var(--card);
    border-radius: 12px;
    padding: 20px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tldr-bullet { gap: 8px; }
  .tldr-bullet .txt { font-size: 16px; }

  /* ---- KPI / stat cards (438:7923): stacked, p-20, radius 12, gap-4;
     label 10 (body), number 42 SemiBold (ink), desc 14 (ink). ---- */
  .stats { flex-direction: column; gap: 12px; }
  /* The five-tap-flow stats are a 2×2 grid, not a stacked column
     (438:8245). Only this instance lives inside a .sec — the KPI .stats
     sits in .kpi-block and stays a single column. */
  .sec .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card { padding: 20px; border-radius: 12px; gap: 4px; }
  .stat-card .k-label { font-size: 10px; }
  .stat-card .k-number { font-size: 42px; font-weight: 600; letter-spacing: 0; }
  .stat-card .k-desc { font-size: 14px; color: var(--ink); }

  /* ---- Media cards go BARE: every image gallery sits directly on the
     page (438:7937 / 8018 / 8036 / 8090 / 8101 …) — no cream wrapper,
     no padding, no radius. Captions are 14px, left-aligned. ---- */
  .case-card {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 20px;
  }
  .cs-inner > .case-card { margin: 0; }
  .card-caption {
    align-items: flex-start;
    text-align: left;
    font-size: 14px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Captions: the Figma mobile design shortens the flow captions to a
     label ("Remove Background Flow", "Desktop screenshots", …) and drops
     the "click to enlarge" hints. Swap to the short label, hide the
     desktop copy and hints. Sprint-board caption is dropped entirely. */
  .card-caption .cap-desktop { display: none; }
  .card-caption .cap-mobile { display: block; }
  .card-caption .dim { display: none; }
  .card-caption.cap-hide-mobile { display: none; }

  /* horizontal flows: desktop shots 300×190, phone shots 190×412,
     radius 6, flow gap-12, figcaption gap-6 (438:7939 / 8038 / 8103). */
  .flow { gap: 12px; }
  /* the scroll-edge fade is the card colour (beige) by default; the
     mobile galleries sit on the white page, so fade to white. */
  .cs-inner .scroll-wrap { --fade-bg: var(--ground); }
  .figcaption { gap: 6px; }
  .shot-desktop { width: 300px; height: 190px; border-radius: 6px; }
  .shot-phone { width: 190px; height: 412px; border-radius: 6px; }

  /* field references (438:8023): 8 thumbnails, wrap 4-up, justify-
     between, ~77px wide, radius 6 — override the inline w/h. */
  .img-row-wrap { gap: 8px; justify-content: space-between; }
  .img-row-wrap .shot {
    width: 77px !important;
    height: auto !important;
    aspect-ratio: 77 / 170;
    border-radius: 6px;
  }

  /* consent pair (438:8091): two phones side by side, gap-12. Show each
     screenshot in FULL at its natural aspect — object-fit:cover was
     clipping the sides. */
  .consent-pair { gap: 12px; flex-wrap: nowrap; align-items: flex-start; }
  .consent-pair .shot {
    flex: 1 1 0;
    min-width: 0;        /* let the two phones actually shrink to half —
                            without this their intrinsic width kept them at
                            170px each (170+170+12 > 335), overflowing and
                            clipping past the card's side margins. */
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    border-radius: 8px;
  }
  .consent-pair .shot img { width: 100%; height: auto; object-fit: contain; }

  /* drill-grid (Act 2): single column, two phones per cell. */
  .drill-grid { grid-template-columns: 1fr; gap: 24px; }
  .drill-cell { gap: 8px; }
  .drill-cell .images { gap: 8px; }

  /* ---- "A phone is not a small desktop" cards (438:7978): stacked
     single column gap-12; each p-20 radius-12 gap-6, title 20,
     body 16 (ink). ---- */
  .grid-2x2 { grid-template-columns: 1fr; gap: 12px; }
  .mini-card { border-radius: 12px; padding: 20px; gap: 6px; }
  .mini-card .body-3 { font-size: 16px; color: var(--ink); }

  /* ---- Comparison table (438:8258): each pair becomes two stacked,
     labelled rows — a grey "Desktop" row (muted) over a white "Mobile"
     row (ink), an inline label column instead of a header row. ---- */
  .comparison-table:not(.cols-4) { border-radius: 12px; }
  .comparison-table:not(.cols-4) .row.head { display: none; }
  .comparison-table:not(.cols-4) .row {
    display: block;
    padding: 0;
    gap: 0;
    border-bottom: 1px solid var(--line);
  }
  .comparison-table:not(.cols-4) .row:last-child { border-bottom: 0; }
  .comparison-table:not(.cols-4) .row p {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 12px;
    align-items: start;
    margin: 0;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }
  .comparison-table:not(.cols-4) .row p::before {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--body);
  }
  .comparison-table:not(.cols-4) .row p:first-child {
    background: var(--card);
    color: var(--body);
  }
  .comparison-table:not(.cols-4) .row p:last-child {
    background: var(--ground);
    color: var(--ink);
  }
  .comparison-table:not(.cols-4) .row p:first-child::before { content: "Desktop"; }
  .comparison-table:not(.cols-4) .row p:last-child::before { content: "Mobile"; }

  /* Back To Top: fill the container (438:8318) — full-width outlined pill. */
  .cs-inner > .back-top {
    width: 100%;
    align-self: stretch;
    margin: 0;
    justify-content: center;
  }

  /* ---- Discover: project cards stacked (cover rules shared from the
     Home block above). ---- */
  .discover .cards { flex-direction: column; gap: 24px; }
}

/* ============================================================
   05 · Finaloop case-study specifics — 375  (Figma frame 438:8326)
   Builds on the shared "04" block; only the Finaloop-specific pieces
   live here, scoped to the page via its data-video-root attribute so
   they never touch Wixel or the others.
   ============================================================ */
@media (max-width: 640px) {

  /* Insight cards: p-20 (Figma), not the desktop 20/24. */
  /* Hero art is a wider composition (~639px natural) — scale it smaller so
     it fits the 355 target, and reclaim its shorter height. */
  [data-video-root="finaloop-page"] .cs-hero-art {
    transform: scale(0.524);          /* 335 / 639 */
    margin-bottom: -260px;
  }

  [data-video-root="finaloop-page"] .insight-card { padding: 20px; }
  /* KPI cards have no ordinal number and a larger 24px title (438:8408). */
  [data-video-root="finaloop-page"] .kpi-card h4 { font-size: 24px; }

  /* Finaloop runs a smaller type scale than Wixel: section headings are
     H3-Medium (24) and the highlight is 32 (Wixel used 32 / 48). */
  [data-video-root="finaloop-page"] .cs-inner .h2-med { font-size: 24px; }
  [data-video-root="finaloop-page"] .cs-inner .h1 { font-size: 32px; }

  /* Media-section labels ("Pattern inspirations", "Full flow", "Edge
     Cases", "More Features") are centered 14px regular in Figma. */
  [data-video-root="finaloop-page"] .card-caption {
    align-items: center;
    text-align: center;
  }
  [data-video-root="finaloop-page"] .card-caption p { font-weight: 400 !important; }

  /* Pattern inspirations stays a cream card (438:8452) — the shared rule
     makes every case-card bare, so restore the fill just for this one. */
  [data-video-root="finaloop-page"] .case-card.wide {
    background: var(--card) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    gap: 20px;
  }

  /* Screenshot / video slots: radius 10 for the big steps + full flow,
     radius 6 for the edge-case and more-features thumbs (Figma). */
  [data-video-root="finaloop-page"] .media-video { border-radius: 10px !important; }
  [data-video-root="finaloop-page"] .edge-pair .media-video,
  [data-video-root="finaloop-page"] .features-row .media-video { border-radius: 6px !important; }

  /* Edge cases stay a 2-column grid on mobile (438:8485), not stacked. */
  [data-video-root="finaloop-page"] .edge-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  [data-video-root="finaloop-page"] .edge-pair .col { gap: 8px; }
  [data-video-root="finaloop-page"] .edge-pair .img-caption { font-size: 12px; text-align: left; }

  /* More features: a horizontal-scroll row of ~161px cards (438:8494). */
  [data-video-root="finaloop-page"] .features-row { gap: 8px; }
  [data-video-root="finaloop-page"] .features-row .col { width: 161px; gap: 8px; }
  [data-video-root="finaloop-page"] .features-row .img-caption { font-size: 12px; text-align: left; }
}

/* ============================================================
   06 · Penny case-study specifics — 375  (Figma frame 438:8526)
   Scoped to the Penny page via data-video-root. Penny has the most
   custom components (quote bubbles, an animated full-bleed screens
   band, testimonials masonry, a Slack stage, a knowledge grid), so
   most of this block is compacting those for the phone.
   ============================================================ */
@media (max-width: 640px) {

  /* Type scale (like Finaloop): section headings 24, highlight 32. */
  /* Hero art: the desktop HTML collage drifted from Figma (old 3-chip layout).
     On mobile, drop it and show the exact Figma export (438:8538, updated
     4-chip art) full-bleed — the export already bakes the 20px content margins
     and the header gradient, so it lines up with the hero. */
  [data-video-root="penny-page"] .cs-hero-art {
    transform: none;
    width: 100%;
    height: auto;
    margin: 0;
  }
  [data-video-root="penny-page"] .penny-art .layer { display: none; }
  [data-video-root="penny-page"] .penny-hero-mobile {
    display: block;
    width: 100%;
    height: auto;
  }

  [data-video-root="penny-page"] .cs-inner .h2-med { font-size: 24px; }
  [data-video-root="penny-page"] .cs-inner .h1 { font-size: 32px; }
  /* Penny highlight is py-16 in Figma (Finaloop is 24). */
  [data-video-root="penny-page"] .cs-inner > .narrow:has(> .h1) { padding-top: 16px !important; padding-bottom: 16px !important; }

  /* Insight cards p-20. */
  [data-video-root="penny-page"] .insight-card { padding: 20px; }

  /* ---- Quote bubbles (438:8641): full-width ink pills, stacked gap-24,
     NO CSS tails, 16px centered, py-16 px-12. ---- */
  [data-video-root="penny-page"] .quotes { gap: 24px; padding: 16px 0 !important; }
  [data-video-root="penny-page"] .quote-row { gap: 24px; }
  [data-video-root="penny-page"] .bubble {
    align-self: stretch !important;
    font-size: 16px;
    padding: 16px 12px;
  }
  [data-video-root="penny-page"] .bubble::after { display: none; }

  /* Big single images (atomic components, etc.): radius 12 on the phone.
     Keyed on a class, not on the inline radius token — the token moves. */
  [data-video-root="penny-page"] .cs-inner img.img-wide { border-radius: 12px !important; }

  /* Color-contrast block is a WHITE card (438:8707) — the shared rule
     makes case-cards bare, so restore its fill (it carries an inline
     --ground background). */
  [data-video-root="penny-page"] .case-card[style*="--ground"] {
    background: var(--ground) !important;
    border-radius: 12px !important;
    padding: 16px !important;
  }

  /* Nested-components pair (438:8725): stack the two videos. */
  [data-video-root="penny-page"] .case-card > div:has(> .media-video) {
    flex-direction: column !important;
    gap: 12px;
  }

  /* Storybook (438:8740): the two overlapping absolute-positioned shots
     stack full-width on mobile. */
  [data-video-root="penny-page"] .case-card > div[style*="height:392px"] {
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }
  [data-video-root="penny-page"] .case-card > div[style*="height:392px"] > div {
    position: static !important;
    width: 100% !important;
  }

  /* ---- Screens band (438:8758): the desktop shots are full-viewport
     (375px) here → 12 of them make a 3000px band. Flatten the three rows
     into one 3-column grid so every row is a clean 3-up (no orphan single
     shot), and drop the spring slide. ---- */
  [data-video-root="penny-page"] .screens-band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 24px 20px;
    align-items: start;
  }
  [data-video-root="penny-page"] .screens-row { display: contents; }
  [data-video-root="penny-page"] .screens-row .sshot {
    width: auto;
    height: auto;
    aspect-ratio: 375 / 213;
    transition: none;
  }
  [data-video-root="penny-page"] .screens-band > .card-caption { grid-column: 1 / -1; }
  [data-video-root="penny-page"] .screens-band.slid .row-l .sshot,
  [data-video-root="penny-page"] .screens-band.slid .row-r .sshot { transform: none; }

  /* ---- Testimonials (438:9272): a horizontal-scroll row of 220px
     cards. Flatten the masonry columns so all cards sit in one row. ---- */
  [data-video-root="penny-page"] .testimonials {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    /* break out of the 20px cs-inner gutter so cards scroll edge-to-edge
       (cut at the viewport, not the page margin). width must grow too —
       .cs-inner > * pins it to 100%, which blocked the right side. */
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    padding: 16px 20px !important;
    scroll-padding-left: 20px;
    /* soft edge fade instead of a hard cut (matches the other carousels'
       fade). The mask sits on the visible box, so cards fade at the
       viewport edges as they scroll — first card stays crisp (fade ends
       at the 20px gutter). */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 24px), transparent);
  }
  [data-video-root="penny-page"] .t-col { display: contents; }
  [data-video-root="penny-page"] .t-item { flex: none; width: 220px; scroll-snap-align: start; }
  [data-video-root="penny-page"] .t-item img { width: 100%; }

  /* ---- Knowledge base (438:9219) + Slack (438:9249) sit in cream cards
     with a left label. ---- */
  [data-video-root="penny-page"] .case-card:has(.knowledge-grid),
  [data-video-root="penny-page"] .case-card:has(.slack-stage) {
    background: var(--card) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    gap: 12px;
  }
  [data-video-root="penny-page"] .case-card:has(.knowledge-grid) .card-caption,
  [data-video-root="penny-page"] .case-card:has(.slack-stage) .card-caption {
    align-items: flex-start;
    text-align: left;
  }
  [data-video-root="penny-page"] .knowledge-grid { grid-template-columns: 1fr 1fr; gap: 12px 12px; align-items: start; }
  /* uniform image height → the labels line up across the 2-up row. */
  [data-video-root="penny-page"] .knowledge-grid .k-cell img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 4px;
  }
  [data-video-root="penny-page"] .knowledge-grid .k-label { font-size: 10px; }
}

/* ============================================================
   07 · Melio Redesign case-study specifics — 375  (Figma 438:9297)
   Scoped via data-cs-page. Lots of bespoke media (a compact 4-col
   table, tile collages, phone comparisons) that must shrink hard for
   the phone.
   ============================================================ */
@media (max-width: 640px) {

  /* Hero art = a faded Safari window + a phone (natural ~619 wide, and its
     box is 412 tall, not 512). Scale to the 355 target and reclaim off 412.
     The shared animation-freeze zeroes .melio-safari's centring translate and
     forces it opaque — restore both here. */
  [data-cs-page="melio-redesign"] .cs-hero-art {
    height: 412px;
    transform: scale(0.541);          /* 335 / 619 */
    margin-bottom: -189px;            /* 412 − 412×0.541 */
  }
  [data-cs-page="melio-redesign"] .melio-safari,
  [data-cs-page="melio-redesign"] .melio-phone {
    display: block !important;        /* the page hides these below 1100 — show them in the mobile hero */
  }
  [data-cs-page="melio-redesign"] .melio-safari {
    transform: translateX(-50%) !important;
    opacity: 0.7 !important;
  }

  /* Type scale + TL;DR rhythm (Melio: section headings 24, highlight 32,
     TL;DR bullets gap-8 / label→text gap-12). */
  [data-cs-page="melio-redesign"] .cs-inner .h2-med { font-size: 24px; }
  [data-cs-page="melio-redesign"] .cs-inner .h1 { font-size: 32px; }
  [data-cs-page="melio-redesign"] .tldr-bullets { gap: 8px; }
  [data-cs-page="melio-redesign"] .tldr-bullet { gap: 12px; }
  [data-cs-page="melio-redesign"] .insight-card { padding: 20px; }
  [data-cs-page="melio-redesign"] .card-caption { align-items: center; text-align: center; }
  [data-cs-page="melio-redesign"] .card-caption p { font-weight: 400 !important; }

  /* Existing-state comparison (438:9356) is a single column on mobile —
     the two dashboards stack full-width, not squeezed side by side. */
  [data-cs-page="melio-redesign"] .cs-inner > .wide[style*="repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* IA collage + explorations are cream cards (shared makes case-cards
     bare); restore the fill just here. */
  [data-cs-page="melio-redesign"] .case-card.wide {
    background: var(--card) !important;
    border-radius: 12px !important;
    padding: 16px !important;
  }
  /* IA collage: compact 2-up wrapped thumbnails instead of a 339px row. */
  [data-cs-page="melio-redesign"] .ia-collage { flex-wrap: wrap; gap: 8px !important; justify-content: center; }
  [data-cs-page="melio-redesign"] .ia-collage img {
    height: 150px !important;
    width: auto !important;
    max-width: calc(50% - 4px);
  }

  /* Tab strips (438:9444): just scale the desktop screenshot to the mobile
     width — full image, natural height, no cropping. Give it a clean full
     border + radius (the desktop's top-only radius / no bottom border read
     as broken once the image is no longer clipped). */
  [data-cs-page="melio-redesign"] .tab-strip .strip {
    height: auto;
    border: 1px solid var(--line);
    border-radius: 4px;
  }
  [data-cs-page="melio-redesign"] .tab-strip .strip img { width: 100% !important; height: auto !important; object-fit: unset !important; }

  /* 4-col comparison table (438:9403): per tab, a grey "Mobile tab: X"
     bar, then a 3-column row of [label / value]. The head row's column
     names become the per-cell labels (hardcoded, since CSS can't pull
     them from the hidden head row). */
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 { border-radius: 10px; }
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 .row.head { display: none; }
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 .row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* explicit row-gap 0 — the inline gap:var(--ml) was adding a 24px
       row-gap between the tab bar and the value row. */
    gap: 0 8px;
    padding: 0 8px 8px;
    border-bottom: 1px solid var(--line);
  }
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 .row:last-child { border-bottom: 0; }
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 .row p:first-child {
    grid-column: 1 / -1;
    background: var(--card);
    margin: 0 -8px 6px;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 500;
    color: var(--body);
    line-height: 1.3;
  }
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 .row p:first-child::before { content: "Mobile tab: "; }
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 .row p:nth-child(n+2) {
    flex: none;
    min-width: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--ink);
  }
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 .row p:nth-child(n+2)::before {
    display: block;
    font-size: 9px;
    color: var(--body);
    margin-bottom: 3px;
  }
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 .row p:nth-child(2)::before { content: "Target task"; }
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 .row p:nth-child(3)::before { content: "Primary focus"; }
  [data-cs-page="melio-redesign"] .comparison-table.cols-4 .row p:nth-child(4)::before { content: "Interaction model"; }

  /* Exploration + A/B/C grids stay one column but keep the images tidy. */
  [data-cs-page="melio-redesign"] .explore-grid { grid-template-columns: 1fr; gap: 12px; }
  [data-cs-page="melio-redesign"] .explore-grid img { height: auto !important; aspect-ratio: 143 / 69; object-fit: contain; }
  /* Finals (438:9474): three cards STACKED full-width, not a squeezed row. */
  [data-cs-page="melio-redesign"] .finals-row { flex-direction: column; flex-wrap: nowrap; gap: 12px; width: 100%; }
  [data-cs-page="melio-redesign"] .finals-cell { flex: none; width: 100%; }
  [data-cs-page="melio-redesign"] .finals-cell img { width: 100% !important; }

  /* A/B/C comparison → a full-bleed horizontal carousel with an edge fade
     (carousel-dots.js adds the pagination dots). */
  [data-cs-page="melio-redesign"] .abc-grid {
    display: flex;
    align-self: stretch;
    overflow-x: auto;
    gap: 12px;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 24px), transparent);
  }
  [data-cs-page="melio-redesign"] .abc-cell { flex: none; width: 280px; scroll-snap-align: start; }

  /* Phone comparison: two small phones side by side (Figma ~187px), not
     the 605px desktop size. */
  [data-cs-page="melio-redesign"] .phones-compare { flex-wrap: nowrap; gap: 12px; }
  [data-cs-page="melio-redesign"] .phone-col .p-img { height: 200px !important; }
  [data-cs-page="melio-redesign"] .phone-col .p-img img { height: 100% !important; width: auto !important; }

  /* Screens-by-area cream cards + tiny tiles (Figma tiles ~44px). Header
     and Navigation stay SIDE BY SIDE (438:9546), not stacked. */
  [data-cs-page="melio-redesign"] .area-card { padding: 14px !important; border-radius: 12px !important; gap: 10px; }
  [data-cs-page="melio-redesign"] .area-cards-row { flex-direction: row !important; gap: 12px !important; }
  /* the screens-by-area blocks are spaced 48px (var(--xxl)) apart — too
     much on the phone; tighten to 24. */
  [data-cs-page="melio-redesign"] .wide:has(.area-card) { gap: 24px !important; }
  [data-cs-page="melio-redesign"] .tile .t-img img { width: 44px !important; }
  /* small tile labels so long ones (e.g. "Company switcher") don't force
     the two tiles in a Header/Navigation card to stack. */
  [data-cs-page="melio-redesign"] .tile .t-label { font-size: 11px; line-height: 1.25; }
  [data-cs-page="melio-redesign"] .area-cards-row .tile { flex: 1; min-width: 0; }
  [data-cs-page="melio-redesign"] .area-cards-row .tile-row { gap: 8px; align-items: flex-start; }
  /* Area group headers restyled in Figma (438:9538) from italic-serif to
     the small "Label/Note" style: DM Sans Light 8px, body colour. */
  [data-cs-page="melio-redesign"] .area-headers .h3-med,
  [data-cs-page="melio-redesign"] .area-title {
    font-family: "DM Sans", sans-serif !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 8px !important;
    line-height: 10px !important;
    letter-spacing: 0.08px !important;
    font-variation-settings: normal !important;
  }
  /* Screenshot radii match Figma: tiles ~3px, comparison phones ~6px
     (were radius-xs 8 / radius-md 20 — too round for these small shots). */
  [data-cs-page="melio-redesign"] .tile .t-img { border: 0; border-radius: 3px; }
  [data-cs-page="melio-redesign"] .phone-col .p-img { border: 0; border-radius: 6px; height: 187px; }
  /* Dense tile rows (Dashboard Tabs+Actions, Cards drill-in): keep every
     tile in ONE justify-between row like Figma. Tighten the 24px gap,
     don't wrap, and cap single tiles to the image width so long labels
     ("Search focus") wrap under instead of widening the tile. */
  [data-cs-page="melio-redesign"] .area-card > div[style*="space-between"] {
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  [data-cs-page="melio-redesign"] .area-card > div[style*="space-between"] .t-img img { width: 42px !important; }
  [data-cs-page="melio-redesign"] .area-card > div[style*="space-between"] > .tile:not(:has(.tile-row)) { width: 44px; }
  [data-cs-page="melio-redesign"] .area-card > div[style*="space-between"] .tile-row { gap: 3px !important; }
  [data-cs-page="melio-redesign"] .area-card > div[style*="space-between"] .t-label { font-size: 9px; line-height: 1.2; }
}

/* ============================================================
   08 · Melio Optimization case-study specifics — 375
   (Figma frame 438:9628 — the file mislabels it "Melio Redesign
   — 375", but the content is the Mobile Web Optimization case
   study). Scoped via data-cs-page="melio-optimization" on <body>.
   The shared "04" block already handles .cs-inner, TL;DR, the type
   scale, nav, discover and footer; this block covers the page's
   bespoke pieces: insight/stat cards, the annotated + before/after
   cream cards, the flows/examples/layout strips, and the wide
   "More key actions" band (which sits OUTSIDE .cs-inner).
   ============================================================ */
@media (max-width: 640px) {

  /* Hero: the mobile design titles this "Closing the Mobile Gap"
     (438:9628), not the desktop "Melio Mobile Web" — swap via the
     cap-desktop/cap-mobile spans. The phone art is already hidden by
     the page's own @1100 rule (.mo-art { display:none }). */
  [data-cs-page="melio-optimization"] .cs-hero-copy .h1 .cap-desktop { display: none; }
  [data-cs-page="melio-optimization"] .cs-hero-copy .h1 .cap-mobile { display: inline; }
  /* Hero art = the 3 phones (natural 528×~482); scale 0.672 (default) but a
     slightly larger reclaim since the phones end higher than the 512 box. */
  [data-cs-page="melio-optimization"] .cs-hero-art { margin-bottom: -206px; }

  /* Insight / stat cards. Rows stay 2-up by default (Problem 6%/34%,
     Impact 6%/14%). Two research instances differ (Figma): the
     SMB/vendor pair stacks full-width (.mo-stack) and the payment-mix
     quartet becomes a 2-col grid (.mo-grid2); the mapping 01/02/03
     cards stack too. */
  /* the page's own @1100 rule forces every .insight-row to column;
     restore row so the 2-up pairs (Problem 6%/34%, Impact 6%/14%) stay
     side by side — .mo-stack / .mo-grid2 override this below. */
  [data-cs-page="melio-optimization"] .insight-row { flex-direction: row; gap: 12px; }
  [data-cs-page="melio-optimization"] .insight-row.mo-stack { flex-direction: column; }
  [data-cs-page="melio-optimization"] .insight-row.mo-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  [data-cs-page="melio-optimization"] .insight-card { padding: 16px; border-radius: 12px; }
  [data-cs-page="melio-optimization"] .insight-card .big { font-size: 40px; }
  [data-cs-page="melio-optimization"] .insight-card h4 { font-size: 18px; }
  [data-cs-page="melio-optimization"] .insight-card p.b { font-size: 14px; }
  [data-cs-page="melio-optimization"] .insight-card .k12 { font-size: 11px; }

  /* Captions (.cap-block): keep them centred, drop the "Click to
     enlarge" hint (no hover on the phone; the lightbox still opens on
     tap). */
  [data-cs-page="melio-optimization"] .cap-block { font-size: 12px; }
  [data-cs-page="melio-optimization"] .cap-block .dim { display: none; }

  /* Funnel charts: stack the Mobile / Desktop charts one below the other
     on the phone, each full width (were side by side at 48% each). */
  [data-cs-page="melio-optimization"] .wide > div:has(> img[src*="imgChart"]) {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  [data-cs-page="melio-optimization"] img[src*="imgChart"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Numbered issues + fixes lists: Body-2 16 (were 20). */
  [data-cs-page="melio-optimization"] .num-bullet { font-size: 16px; gap: 8px; align-items: flex-start; }
  [data-cs-page="melio-optimization"] .fix-bullet { gap: 8px; align-items: flex-start; }
  [data-cs-page="melio-optimization"] .fix-bullet p { font-size: 16px; }
  /* Both list sections carry an inline padding-bottom:48 — not .sec, so the
     shared "kill section padding" rule misses them; it doubles up with the
     32px container gap (and the next block's own top padding). Drop it. */
  [data-cs-page="melio-optimization"] .cs-inner > .fix-list,
  [data-cs-page="melio-optimization"] .cs-inner > .num-bullets { padding-bottom: 0 !important; }

  /* Annotated screens + Before/After sit on CREAM cards in the mobile
     design; the shared rule bares every .case-card, so restore these
     two via :has(). Two phones stay side by side inside each. */
  [data-cs-page="melio-optimization"] .case-card:has(.annot-pair),
  [data-cs-page="melio-optimization"] .case-card:has(.before-after) {
    background: var(--card) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    gap: 12px;
  }
  [data-cs-page="melio-optimization"] .annot-pair {
    flex-direction: row !important;
    gap: 12px;
    padding: 0 !important;
    justify-content: center;
    width: 100%;
  }
  [data-cs-page="melio-optimization"] .annot { flex: 1 1 0; min-width: 0; }
  [data-cs-page="melio-optimization"] .annot img { width: 100% !important; height: auto; }
  [data-cs-page="melio-optimization"] .annot .a-cap { font-size: 11px; margin-top: 8px; }
  [data-cs-page="melio-optimization"] .before-after { gap: 16px !important; }
  [data-cs-page="melio-optimization"] .ba-col .imgs { gap: 8px; }
  [data-cs-page="melio-optimization"] .ba-col .ba-label { font-size: 11px; }

  /* The "More key actions" band sits OUTSIDE .cs-inner, so its heading
     can't be reached by the shared .cs-inner .h2-med rule — size it. */
  [data-cs-page="melio-optimization"] .cs-container > .reveal .h2-med { font-size: 32px; }
  /* The band uses a uniform gap:48 between every child, so its captions
     float equidistant from the content they label. Tighten the gap and
     pull each caption down toward its media block below it. */
  [data-cs-page="melio-optimization"] .cs-container > .reveal { gap: 28px !important; }
  [data-cs-page="melio-optimization"] .cs-container > .reveal > .cap-block { margin-bottom: -16px; }

  /* Research: its "Research" eyebrow is the one label-serif that sits as
     a DIRECT child of a .sec-gap-24 (the other sections wrap the eyebrow
     with its heading in a .sec-gap-16, so they already get 8px). The
     20px section gap reads too big before "Discovery questions" — pull it
     to ~8 with a negative margin (only this eyebrow matches the selector). */
  [data-cs-page="melio-optimization"] .sec-gap-24 > .label-serif { margin-bottom: -12px; }

  /* (Reflection heading stays the standard H2-Medium — 32px ink — per her
     correction; no restyle to a serif label.) */

  /* Flows mapping: the three diagrams stay side by side, scaled to
     thirds (Figma shows them tiny — they convey system scale, not
     legible detail). */
  [data-cs-page="melio-optimization"] .flows-cols {
    flex-direction: row !important;
    gap: 8px !important;
    padding: 0 20px !important;
    align-items: flex-start;
  }
  [data-cs-page="melio-optimization"] .flows-cols .fc {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    gap: 8px !important;
    max-height: none !important;
  }
  [data-cs-page="melio-optimization"] .flows-cols .fc img { width: 100% !important; height: auto; }

  /* Responsive layouts: the config panels stack; the screen previews
     become a snapping CAROUSEL within the 20px margins (no bleed / no
     edge-cut), with pagination dots (carousel-dots.js → .layouts-screens).
     Slide-in JS stays inline on the page. */
  [data-cs-page="melio-optimization"] .layouts-grid { padding: 0 20px !important; gap: 16px; }
  [data-cs-page="melio-optimization"] .layouts-screens {
    padding: 0 20px;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
  }
  [data-cs-page="melio-optimization"] .layouts-screens img { scroll-snap-align: center; }

  /* More examples: the 3×3 before/after grid becomes a CAROUSEL — one
     full-width before/after pair per view, snapping (no edge-cut / no
     bleed), with pagination dots (carousel-dots.js → .examples-grid). */
  [data-cs-page="melio-optimization"] .examples-grid {
    display: flex !important;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    scroll-snap-type: x mandatory;
  }
  [data-cs-page="melio-optimization"] .examples-grid::-webkit-scrollbar { display: none; }
  [data-cs-page="melio-optimization"] .ex-pair { flex: none; width: 100%; scroll-snap-align: center; gap: 16px; }
}

/* Very small phones — keep the nav comfortable */
@media (max-width: 380px) {
  .nav { padding: 12px 12px; }
  .nav a { padding: 12px 10px; }
}