/* ============================================================================================================
   css/responsive.css — the ONE mobile / tablet layer of the Intelica site (MOBILE-PLAN.md §B + §Amendments 2026-10-18).

   The scaffold was built on 2026-10-18 by builder B1 of tools/mobile-pass/r00/ (Round 0 of the mobile pass). No page
   links this file yet — a page's round adds the <link> through the layout slot `block styles_last` (src/layouts/*.pug),
   AFTER css/lang-<lang>.css, so equal-specificity rules win by source order.

   THE CONTRACT
   (a) Every rule lives inside a `max-width` media block — nothing at the stylesheet root — so ≥ 1280 is untouched.
   (b) The desktop stylesheets are never edited: the mobile layer lives in this file only.
   (c) TIER-MAJOR order: all ≤ 1279.98 rules precede all ≤ 1023.98 rules, which precede all ≤ 767.98 rules — three
       top-level blocks, the section banners repeated inside each (unlike css/styles.css, which co-locates a section's
       media queries). Within a tier a selector appears once, under its banner; so a later banner's wider rule can never
       beat an earlier banner's narrower one by source order. A rule that must hold in EVERY narrower tier (a component's
       own geometry, a touch rule) is scoped under its component root (`.mnav .btn`, never a bare `.btn`), so no generic
       phone-tier rule of equal specificity beats it by source order (the Round-0 review).
   (d) Touch rules — (hover: none), (pointer: coarse) — live in a FOURTH top-level block placed LAST, after the ≤ 767.98
       block: `@media (max-width: 1279.98px) and (hover: none), (max-width: 1279.98px) and (pointer: coarse)`, so they win
       over every tier's equal-specificity rule by source order (nested inside the ≤ 1279.98 block they would lose to the
       phone tier — measured in the Round-0 review).
   (e) Where a desktop rule is more specific, the responsive rule repeats its selector.
   (f) The file loads LAST, after css/lang-<lang>.css, through the layout slot `block styles_last`.
   (g) Breakpoints use .98 (1279.98 / 1023.98 / 767.98): fractional CSS widths on scaled displays.
   (h) A width-based scale never divides a length by a length in calc() — use the site's tan(atan2(a, b)) idiom or a
       JS-set custom property.
   (i) The `important` keyword is never used.
   (j) Mobile-only markup inside main.case, main.blog or .blog-search is shown by a class (`.x--mobile`), never by
       un-hiding [hidden]: those containers force `[hidden] { display: none }` with the important keyword
       (case-studies.css:90, blog.css:69). A vh → svh fallback pair never carries var() in the svh line (see Popups).
   ============================================================================================================ */

/* ========== ≤ 1279.98 — the compact-desktop / tablet-landscape tier ========== */
@media (max-width: 1279.98px) {

  /* ---------- §1 · Fonts (self-hosted Geist) ---------- */
  /* no rule expected */

  /* ---------- §2 · Design tokens (light + dark) ---------- */
  /* Round 0: see the ≤ 767.98 block */

  /* ---------- §3 · Reset / base + utilities (.container, .sr-only, focus) ---------- */
  /* filled in Round 0 */
  /* overrides css/styles.css:150 (`min-width: 1280px`, the desktop floor) */
  body { min-width: 320px; }

  /* ---------- §4 · Navbar (+ nav dropdowns) ---------- */
  /* Round 1: the hamburger tier (A-10) — the links + actions hide, the burger shows inside the 74 px bar (A-17); the
     safe-area gutter (A-18) on every bar, the contact pages' floating .navbar--float included (the same .navbar__inner);
     the full-screen menu dialog#mobile-menu.mnav (js/main.js opens it with showModal()), its top row the bar's twin */
  .navbar__inner {
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }
  .navbar__links,
  .navbar__actions { display: none; }
  .navbar__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-strong);
    cursor: pointer;
    transition: background-color .2s ease;
  }
  .navbar__burger:hover,
  .navbar__burger[aria-expanded="true"] { background: var(--nav-pill-bg); }
  .navbar__burger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

  /* the dialog: closed = the UA's display: none (no display rule here); open = a full-viewport column */
  .mnav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--surface);   /* white, not --bg: the orange focus ring measures 3.04:1 on it (2.94 on #fbfbfb — WCAG 1.4.11; the a11y lens) */
    color: var(--text-strong);
    overscroll-behavior: contain;
  }
  .mnav[open] {
    display: flex;
    flex-direction: column;
    animation: mnav-in .2s ease-out;
  }
  .mnav::backdrop { background: transparent; }
  /* on open the browser focuses the first focusable (the logo link) — measured in Chrome 155: the ring shows only on a
     keyboard open (:focus-visible), never on a tap; `autofocus` on the dialog is ignored there, so none is set */
  @keyframes mnav-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  /* the bar's twin: a 74 px content box + the 1 px border (= header.navbar's 75), the logo at the bar logo's x / y */
  .mnav__top {
    flex: none;
    box-sizing: content-box;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: env(safe-area-inset-top);
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
    border-bottom: 1px solid var(--nav-border);
    background: var(--nav-bg);
  }
  .mnav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-strong);
    cursor: pointer;
  }
  .mnav__close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .mnav__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: 8px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }
  /* a 560 px reading column on tablets, left-aligned with the logo (a phone's column is narrower anyway) */
  .mnav__nav,
  .mnav__actions,
  .mnav-lang { max-width: 560px; }
  .mnav__group { border-bottom: 1px solid var(--border); }
  .mnav__sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    list-style: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-strong);
    cursor: pointer;
  }
  .mnav__sum::-webkit-details-marker { display: none; }
  .mnav__sum:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }   /* outside the text like the links' (the a11y lens: at -2 the ring touched the first glyph) */
  .mnav__chev { transition: transform .2s ease; }
  .mnav__group[open] .mnav__chev { transform: rotate(180deg); }
  .mnav__list { list-style: none; margin: 0; padding: 0; }
  .mnav__list:last-child { padding-bottom: 12px; }
  .mnav__heading {
    margin: 12px 0 4px;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
  }
  .mnav__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    padding: 10px 0;
  }
  .mnav__title { font-size: 16px; line-height: 1.4; color: var(--text-strong); }
  .mnav__desc { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text); }
  /* the current page: the brand colour + weight 500 + a 2 px underline (not colour alone — WCAG 1.4.1) */
  .mnav__link[aria-current="page"] .mnav__title {
    color: var(--brand);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  .mnav__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }
  /* scoped (contract c): beats .btn--ghost's fixed 110 px in every narrower tier */
  .mnav .btn {
    width: 100%;
    height: 48px;
    font-size: 15px;
  }
  .mnav__incontrol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 44px;
    padding-inline: 12px;
    border-radius: 999px;
  }
  /* the wordmark file is navy (#0A1733): the logo-filter token whitens it on the dark theme, none on light */
  .mnav__incontrol img { filter: var(--logo-filter); }
  .mnav-lang {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }
  .mnav-lang__opt {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 14px;
    color: var(--text);
  }
  .mnav-lang__opt[aria-current="true"] {
    color: var(--text-strong);
    font-weight: 600;
    background: var(--nav-pill-bg);
  }
  @media (prefers-reduced-motion: reduce) {
    .mnav[open] { animation: none; }
    .mnav__chev,
    .navbar__burger { transition: none; }
  }

  /* ---------- §5 · Buttons ---------- */
  /* no rule expected */

  /* ---------- §6 · Hero (visual layers → "CARD FACE", dash panel) ---------- */
  /* Phase 2: one column — the copy, then the whole scene scaled to the column: --hero-s = min(1, column / 592), width-based
     (replaces the vh-based scale of styles.css:108); no pull under the bar (:481), no 100vh floor (:500), no vh title size
     (:521), no ≤ 1700 nudges (:1023–1024). On a desktop window below 1280 with classic scrollbars 100vw is ~15 px wider
     than the layout — .hero clips it (overflow hidden) */
  :root { --hero-s: .6; --hero-art-h: 611px; }   /* no CSS trig (Chrome < 111, Safari < 15.4); 611 = the canvas 551 + the
                                                    Fee-library pill's 60 px overhang (styles.css:98–100), so the pill and
                                                    its drop-shadow sit inside the visual's box at 768–1279 (B1 measured
                                                    the pill ending 4–6 px above the hero's clipped bottom at 561) */
  @supports (width: calc(1px * tan(atan2(1px, 1px)))) {
    :root { --hero-s: clamp(.4, tan(atan2(calc(100vw - 2 * var(--gutter)), 592px)), 1); }
  }
  .hero { margin-top: 0; }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 40px;
    min-height: 0;
    padding-block: 40px 48px;
  }
  .hero__copy { max-width: none; left: 0; }
  .hero__title { max-width: none; font-size: 40px; }
  .hero__lead { max-width: 600px; }   /* the review (F14): at none the 16 px lead ran 783–862 px on one line at 1024 */
  .hero__form { width: 100%; max-width: 449px; }
  .hero__visual {
    justify-self: center;
    left: 0;
    top: 0;
    width: calc(592px * var(--hero-s));
    max-width: 100%;
  }

  /* ---------- §7 · Content — stat band + logo marquee ("STAT BAND" glass) ---------- */
  /* Phase 2: none at 768–1279 — the stat line and the marquee are fluid (see the ≤ 767.98 block) */

  /* ---------- §8 · Platform (monitor mockup → "MONITOR SCREEN DASHBOARD") ---------- */
  /* Phase 2: the copy above the monitor in one column; the 991 × 577 monitor is scaled to the column by --mon-z, which
     js/main.js (fitStages) sets on .platform__inner = min(1, its content width / 991); .6 = the no-JS fallback. The stand
     (placed for the desktop bleed) and the five blur clones go (main.js creates none below 1280; this hides them on a
     page loaded wide and narrowed).
     2026-10-19 (the owner's iPhone 16 Pro / iOS 26): `zoom` is OUT — on iOS the zoom is not applied to the font sizes
     (every label kept its 11–30 px while the boxes shrank: the dashboard rendered garbled; Android / desktop were fine),
     so the stage is a `transform: scale()` from the top-left corner and its layout box is brought down to the scaled
     size with negative right / bottom margins (991 × (z − 1), 577 × (z − 1)) — the next section follows it exactly as
     before. The same for .tools__dash and the products window below. */
  .platform { min-height: 0; }
  .platform__inner {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding-block: 80px 128px;   /* 128: the monitor's 0 40px 80px shadow (styles.css:1004) reaches ~114 px at zoom .95 and the
                                    section clips (the review F3: a flat grey band at the platform → tools seam at 768 / 1024);
                                    the phone tier keeps 40 (the zoomed shadow is ~42 px there) */
  }
  .monitor {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: scale(var(--mon-z, .6));
    transform-origin: top left;
    margin-right: calc(991px * (var(--mon-z, .6) - 1));
    margin-bottom: calc(577px * (var(--mon-z, .6) - 1));
  }
  .monitor-base { display: none; }
  .monitor .monitor__blurclone { display: none; }   /* the LANDING's monitor only — the products page's browser window keeps its
                                                       blur at every width (the review REG-2: the bare selector had dropped it) */

  /* ---------- §9 · Services (4 product cards) ---------- */
  /* Phase 2: two full-size columns (the ≤ 1700 tier's zoom .85 + 4 × 326 px columns, styles.css:1416, off); the cards
     take their content's height */
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    zoom: 1;
    max-width: none;
  }
  .pcard { min-height: 0; }
  .pcard__desc { margin-bottom: 24px; }   /* styles.css:1434 centres the art by `margin: auto` in a 480 px card; without the
                                             min-height the art touched the copy (the review F4: 0 px on every phone card) */

  /* ---------- §10 · Tools (switcher → "DASHBOARD GLIDE", "INTERCHANGE DASHBOARD") ---------- */
  /* Phase 2: the switcher above the dashboard in one column; the 690 px stage is zoomed by --tools-zoom, which js/main.js
     sets on .tools__inner = min(1, its content width / 690); .5 = the no-JS fallback. The Interchange card (768 wide and
     anchored right on desktop) takes the stage's 690 and its left edge; its top: 50% + translateY(-50%) stay (the glide
     keyframes compose transform through --ty, so the zoom on the stage never fights them) */
  .tools__inner {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    padding-block: 80px 112px;   /* 112: the card's 0 30px 70px shadow reaches ~100 px at zoom 1 (the review F3) */
  }
  .tools__copy { top: 0; max-width: none; }
  .tools__title,
  .tools__lead { max-width: none; }
  .tools__dash {   /* a transform scale, not zoom, since 2026-10-19 — see the §8 note above (iOS kept the fonts unzoomed) */
    position: relative;
    top: auto;
    right: auto;
    width: 810px;
    max-width: none;
    align-self: center;
    transform: scale(var(--tools-zoom, .5));
    transform-origin: top left;
    margin-right: calc(810px * (var(--tools-zoom, .5) - 1));
    margin-bottom: calc(511px * (var(--tools-zoom, .5) - 1));   /* 511 = the .feegraph height (styles.css:1658) */
  }
  /* the COMPLETED card below 1280 (the ≥ 1700 rules of styles.css:1714–1718): the whole card is on screen here, so the
     690 px Figma cut — KPI pill 3 clipped after «USD», the chart cut past Oct — would read as a broken edge (B1: the
     acceptance tool flagged the clipped «385,389» on 30 / 30 runs); js/main.js sizes --tools-zoom from 810 */
  .feegraph,
  .ixgraph { width: 810px; }
  .fg__chart { width: 722px; }
  .ixgraph { right: auto; left: 0; }
  /* the seam wash: its mask is in PX FROM THE SEAM for the fixed desktop section (styles.css:1561–1569), but below 1280 the
     image shrinks with vw while the section no longer has a fixed height, so the free edge showed a hard band (B1 measured
     .60 / .09 / 0 opacity at the cut at 768 / 1024 / 1194) → the same ramp in % of the 1063 px image */
  .tools__wash {
    -webkit-mask-image: linear-gradient(to bottom, #000 39.5%, transparent 74.3%);
            mask-image: linear-gradient(to bottom, #000 39.5%, transparent 74.3%);
  }

  /* ---------- §11 · Presence — globe + stats band ---------- */
  /* Phase 2: none at 1024–1279 — the frozen 1440 × 800 stage keeps its own scale (.71–.89; see the ≤ 1023.98 block) */

  /* ---------- §12 · Case studies — proof band (3 tabs: photo + 3 stats, pill switcher) ---------- */
  /* Phase 2: below 1280 the body is fluid, so the stage scales with the real width (the max(100vw, 1280px) floor of
     styles.css:1983–1984 holds the canvas at the 1280 body floor under browser zoom); contract (h): the scale is
     tan(atan2(100vw, 1440px)) = 100vw / 1440px as a number (1024 → .711). Normal flow below 1024 */
  .cs { height: calc(100vw * 1224 / 1440); }
  .cs__canvas { transform: scale(tan(atan2(100vw, 1440px))); }

  /* ---------- §13 · Testimonials (slider) ---------- */
  /* Phase 2: the slider's swipe (js/main.js) reads horizontal pointer moves; vertical pans stay the page's. Each dot a
     24 × 24 target drawing the same 8 / 10 px dot (WCAG 2.5.8: the 8 px dots 16 px apart fail the spacing exception; the
     acceptance tool warned at 1024–1279 too, so the rule lives in this tier) — the button's own fill and its hover fill go
     transparent (styles.css:2200–2204, 2217–2219) and the dot moves to ::before. The seam wash's mask in % of the 680 px
     image (the px-from-the-seam ramp of styles.css:2140–2149 met the shrinking image: .88 / .43 / .13 at the cut at 768 /
     1024 / 1194 — B1) */
  .tm__track { touch-action: pan-y pinch-zoom; }   /* pinch-zoom kept: a two-finger pinch on the card zoomed nothing (the review R2) */
  .tm__dots { gap: 0; height: auto; padding: 0 2px; }
  .tm__dot { position: relative; width: 24px; height: 24px; background: transparent; }
  .tm__dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: rgba(28, 33, 38, .5);
    transition: background .25s ease, width .25s ease, height .25s ease, margin .25s ease;
  }
  .tm__dot:hover:not(.is-active) { background: transparent; }
  .tm__dot:hover:not(.is-active)::before { background: rgba(28, 33, 38, .75); }
  .tm__dot.is-active { width: 24px; height: 24px; background: transparent; }
  .tm__dot.is-active::before { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #1C2126; }
  :root[data-theme="dark"] .tm__dot,
  :root[data-theme="dark"] .tm__dot.is-active,
  :root[data-theme="dark"] .tm__dot:hover:not(.is-active) { background: transparent; }
  :root[data-theme="dark"] .tm__dot::before { background: #66779e; }
  :root[data-theme="dark"] .tm__dot.is-active::before { background: var(--text-strong); }
  :root[data-theme="dark"] .tm__dot:hover:not(.is-active)::before { background: #8a99bd; }
  @media (prefers-reduced-motion: reduce) {
    .tm__dot::before { transition: none; }   /* styles.css:2221 covers the button, not its new ::before */
  }
  .tm__wash {
    -webkit-mask-image: linear-gradient(to top, #000 48.5%, transparent 88.2%);
            mask-image: linear-gradient(to top, #000 48.5%, transparent 88.2%);
  }

  /* ---------- §14 · Closing CTA (email capture) ---------- */
  /* Phase 2: none at 768–1279 — the 100vw × 440 / 1440 band (235–391 px) holds its ~154 px of content (see the ≤ 767.98 block) */

  /* ---------- §15 · Insights (blog cards) ---------- */
  /* Phase 2: two columns (the 414 px caps stay); the seam wash's mask in % of the 1143 px image (the px ramp of
     styles.css:2301–2309 met the shrinking image: .97 / .39 / .01 at the cut at 768 / 1024 / 1194 — B1) */
  .insights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }   /* 3 cards in 2 columns left a hole (the
                                                                                         review F5); 293 px cards at 1024 */
  .insights__wash {
    -webkit-mask-image: linear-gradient(to bottom, #000 52.5%, transparent 83.1%);
            mask-image: linear-gradient(to bottom, #000 52.5%, transparent 83.1%);
  }

  /* ---------- §16 · Footer ---------- */
  /* Round 1: the brand block above the link columns (one grid column), the columns packed left, the safe-area gutter */
  .foot {
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
    padding-bottom: max(30px, env(safe-area-inset-bottom));
  }
  .foot__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .foot__nav { justify-content: start; }

  /* ---------- §17 · Global motion — scroll reveal + reduced-motion ---------- */
  /* Phase 2 (the landing): none — the reveal is JS */

  /* ---------- About · css/about.css ---------- */
  /* Phase 2 (about): the desktop type stays; the pass's floors (15 px small text, 44 px targets) on «Learn more» and the bio
     popover from here down; the team, quote and story grids re-balanced for 1024–1279 (both pages: the .au-* utilities) */
  .au-more { font-size: 15px; }   /* about.css:174 and :208 (.au-more--sm) 14 — the small-text floor */
  .au-tcard .au-more--pop,
  .al-tcard .au-more--pop,
  .au-quote__media .au-more--pop { min-height: 44px; }   /* the Learn-more buttons as 44 px targets (:173's inline-flex + align-items: center keeps the text centred) */
  .au-pop__bio p { font-size: 15px; line-height: 22px; }   /* :253–257's 12 / 16 — the floating pop's bio = small text; the CEO's :262 (0,2,1) 16 / 24 stays */
  /* :234–240's 25 px navy disc: the button becomes a transparent 44 px target (its centre 30 px from the pop's corner, the
     desktop's 30.5), the 25 px disc drawn by ::before, the 10 px ✕ (:241) lifted above it */
  .au-pop__x { top: 8px; right: 8px; width: 44px; height: 44px; background: transparent; }
  .au-pop__x::before { content: ""; position: absolute; inset: 0; width: 25px; height: 25px; margin: auto; border-radius: 50%; background: #0A1733; }
  .au-pop__x svg { position: relative; }
  .au-team__grid { gap: 56px 68px; }   /* the planner's fix round: the column gap stays the desktop's 68 (the 40 px gap let the floating bio cover 19 px of the third card at 1024); only the row gap tightens */   /* :189's 76 68 — 3 columns kept: 1024 → (942.1 − 80) / 3 = 287.4 px cards */
  .au-quote__grid { gap: 48px; }   /* :148's clamp = 81.9 at 1024 */
  .au-story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* :281's 552 + 1fr left the timeline 328.7 at 1024 */

  /* ---------- Products · css/products.css ---------- */
  /* Phase 2 (products): the monitor's dashboard zoomed to the window; the modules card stacks (tabs in a row above the
     panel); the how-it-works cubes take their content's height */
  /* §2 monitor (products.css:57 / :68): the dashboard inside is a FIXED 1064 × 574 design (.dash--screen, styles.css:1103)
     — it keeps its 1064 × 574 px and the screen is scaled to the window's content box (100cqw of the .pr-window container,
     products.css:64's 18 px padding out); the five .monitor__blurclone copies (js/main.js) are children of the screen and
     scale with it. Measured (the planner's 10-line test): 390 → .2951 (314 wide), 768 → .6278 (668), 1024 → .8516 (906),
     1279 → 1 (1064). 2026-10-19: `zoom` → `transform: scale()` + the negative-margin layout box, the §8 note above (iOS) */
  .pr-window { container-type: inline-size; }
  .pr-window__screen {
    --pw-z: .6;   /* no CSS trig (Chrome < 111, Safari < 15.4) */
    width: 1064px;
    height: 574px;
    transform: scale(var(--pw-z));
    transform-origin: top left;
    margin-right: calc(1064px * (var(--pw-z) - 1));
    margin-bottom: calc(574px * (var(--pw-z) - 1));
  }
  @supports (width: calc(1px * tan(atan2(1px, 1px)))) {
    .pr-window__screen { --pw-z: clamp(.2, tan(atan2(100cqw, 1064px)), 1); }
  }
  /* §3 modules (products.css:173–217): the card stacks — the tabs in a row above the panels; the panel keeps its copy +
     widget row (1024: inner 860 = 440 copy + 40 + 367 widget + 13 spare) */
  .pr-mod { padding: 80px 0 96px; }
  .pr-mod__card { flex-direction: column; gap: 32px; }
  .pr-mod__tabs {   /* products.css:186's `flex: 1 1 260px` would be a 260 px HEIGHT in a column flex */
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .pr-mod__panels { flex: 0 0 auto; width: auto; min-height: 0; }   /* :201's `flex: 0 0 796px` = 796 px tall in a column */
  .pr-mpanel { justify-content: space-between; }
  /* §5 how it works (products.css:352–381): the fixed 216 / 242 px cube heights become floors — the 235 px columns at 1024
     hold ~8 lines of desc; the three desktop selectors repeated (contract e) */
  .pr-hiw__head { gap: 40px; }
  .pr-hiw__strip { min-height: 0; align-items: stretch; }   /* the review (FID-7): at 1024–1279 card 1's content made it 45–67 px taller than its neighbours — all four take the tallest content height; the feature is the tint + border */
  .pr-hiw-card { height: auto; min-height: 216px; }
  .pr-hiw-card:first-child,
  .pr-hiw__strip .pr-hiw-card:hover { height: auto; min-height: 242px; }
  .pr-hiw__strip:hover .pr-hiw-card:first-child:not(:hover) { height: auto; min-height: 216px; }

  /* ---------- Popups · the .pr-modal rules of css/products.css ---------- */
  /* Phase 2 (products): the scroller's svh padding and no scroll chaining to the page; the card stays the desktop's above
     1024 (see the ≤ 1023.98 and ≤ 767.98 blocks) */
  /* products.css:453; the svh line must not carry var(): a declaration with var() is accepted at parse time on every engine
     and would REPLACE the vh fallback, then resolve to 0 where svh is unknown (the Round-0 review) — so the fallback pair is
     the shorthand with vh + the longhand with svh (Safari ≥ 15.4, Chrome ≥ 108) */
  .pr-modal__scroll {
    padding: 5vh var(--gutter);
    padding-block: 5svh;
    overscroll-behavior: contain;   /* the sheet's scroll never chains to the page */
  }

  /* ---------- Solutions · css/solutions.css ---------- */
  /* Phase 2 (solutions): the sub-nav links as 44 px targets, the module grids in two equal columns (the flip placement
     stays), the methodology's five fluid columns, the stat cells inside their quarters */
  /* solutions.css:61: the 18 px text rows become 44 px touch targets inside the 68 px bar (the row looks the same) */
  .sol-subnav__link { display: inline-flex; align-items: center; min-height: 44px; }
  /* :77–81 / :159 / :166 / :173 (all (0,1,0)): the fixed 560 / 607 px copy column left the cards 302 / 255 px at 1024 — two
     equal columns (447 at 1024, 564.8 at 1279); the h2 caps (485 / 430 / 607 / 400 / 560) stay */
  .sol-mod { padding: 80px 0; }
  .sol-mod__inner,
  .sol-mod__inner--flip,
  .sol-mod__inner--wide-copy,
  .sol-mod__inner--wide-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .sol-fc__head { flex-wrap: wrap; }   /* :178: the nowrap sub (230.6) + the title (215) + 16 > the 383 px content box at 1024 — the sub wraps under the title; the 1280 head keeps one row */
  /* :299 / :311–320: the fixed 5 × 240 strip overflowed the 942 px wrap by 129 px a side at 1024 — five fluid columns, the
     connector (::before, 5 % … 95 % of the strip) stays */
  .sol-meth { padding: 80px 0; }
  .sol-meth__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: stretch; }
  .sol-meth__step { padding: 0 10px; }   /* the review (FID-3): at 0 4px neighbouring descs' ink sat 8–13 px apart at 1024–1100 and read as one line */
  .sol-meth__desc { max-width: none; }   /* :344's 228 cap = the 1280+ Figma wraps; here the desc wraps in its column */
  .sol-meth__desc br { display: none; }   /* the review (FID-4): step 3's Figma break left «Forecast» alone on a line at 1024 (5 lines vs the siblings' 3–4); the ≥ 1280 copy keeps it */
  .sol-stats__label { text-wrap: balance; }   /* the review (FID-6): label 1's «2025» alone on its second line at 1024–1072 (the es labels balance through lang-es.css:98) */
  /* :360–361: the max-content cells (235 + 239 + 176 + 188) touched at 1024 — with width auto a cell is fit-content inside its
     column (justify-items: center), its label wrapping inside */
  .sol-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
  .sol-stats__cell { width: auto; }
  /* :362–366: in the 223.5 px quarters at 1024 the 56 px figures broke to two lines («Up to 15%» 239, «Hasta 15%» 250.8 — one line
     only from 1100 / 1143); 4.375vw = 56 at 1280, so the size is continuous at the desktop edge and 48 at 1024 (212 ≤ 223.5) —
     the builder's measured what-if, applied by the planner's fix round */
  .sol-stats__big { font-size: clamp(48px, 4.375vw, 56px); line-height: 1; }

  /* ---------- Case Studies · css/case-studies.css ---------- */
  /* filled in Round 6 */
  /* case-studies.css:87; no wrapper needed: the desktop rule sits at depth 0 */
  .case-big__media {
    max-height: calc(100vh - 74px - 48px);
    max-height: calc(100svh - 74px - 48px);
  }

  /* ---------- Case-study story pages · css/case-study.css ---------- */
  /* Round 1: none at 1024–1279 — the 340 + 760 columns fit (see the ≤ 1023.98 and ≤ 767.98 blocks) */

  /* ---------- Contact + the 404 card · css/contact.css ---------- */
  /* Round 1: the svh page height below; the floating bar's safe-area gutter = §4's .navbar__inner; the cards → ≤ 767.98
     — main.ct serves the two contact pages AND 404.html */
  /* contact.css:25 */
  .ct {
    min-height: 100vh;
    min-height: 100svh;
  }

  /* ---------- Blog · css/blog.css ---------- */
  /* filled in Round 7 — .blog-search 85vh at :213 / :222 handled there */

  /* ---------- Blog articles · css/blog-post.css ---------- */
  /* Round 1: none at 1024–1279 — the 760 column + the wide figures fit (see the ≤ 1023.98 and ≤ 767.98 blocks) */

  /* ---------- Legal · css/legal.css ---------- */
  /* Round 1: none at 1024–1279 — the 340 + body columns fit (see the ≤ 1023.98 and ≤ 767.98 blocks) */


  /* ---------- TEMPORARY (2026-10-19, the reviewer's call before the DEV push): the Case Studies + Blog links hidden below 1280 until
     Phase 2 unit 5 converts those two pages — the hamburger panel's two Resources entries (their <li>), the footer's two links, the
     articles' and story pages' back links, the landing's Insights «See more», the leadership band's button. REMOVE THIS BLOCK WITH
     UNIT 5 (branch mobile-p2-unit5). Specificity (0,2,1)+ so no tier rule below beats it; [href$="blog.html"] covers the es twins'
     ../blog.html; the desktop dropdown is already hidden below 1280 by the hamburger tier. */
  .mnav li:has(> .mnav__link[href="case-studies.html"]),
  .mnav li:has(> .mnav__link[href$="blog.html"]),
  a.foot__link[href="case-studies.html"],
  a.foot__link[href$="blog.html"],
  div.insights__foot,
  a.al-band__btn[href="case-studies.html"],
  a.story-back[href],
  a.post-back[href] { display: none; }
}

/* ========== ≤ 1023.98 — the tablet-portrait tier ========== */
@media (max-width: 1023.98px) {

  /* ---------- §1 · Fonts (self-hosted Geist) ---------- */
  /* no rule expected */

  /* ---------- §2 · Design tokens (light + dark) ---------- */
  /* Round 0: see the ≤ 767.98 block */

  /* ---------- §3 · Reset / base + utilities (.container, .sr-only, focus) ---------- */
  /* Round 0: see the ≤ 1279.98 block */

  /* ---------- §4 · Navbar (+ nav dropdowns) ---------- */
  /* Round 1: see the ≤ 1279.98 block (the bar + the menu hold one geometry below 1280) */

  /* ---------- §5 · Buttons ---------- */
  /* no rule expected */

  /* ---------- §6 · Hero (visual layers → "CARD FACE", dash panel) ---------- */
  /* Phase 2: see the ≤ 1279.98 block (the scene scales to the column) and the ≤ 767.98 block (the card face alone) */

  /* ---------- §7 · Content — stat band + logo marquee ("STAT BAND" glass) ---------- */
  /* Phase 2: the stat line balanced — «leaders» sat alone on its second line at 390 (the review F6; not crop-matched text) */
  .stats__big { text-wrap: balance; }

  /* ---------- §8 · Platform (monitor mockup → "MONITOR SCREEN DASHBOARD") ---------- */
  /* Phase 2: see the ≤ 1279.98 block (the zoomed monitor) */

  /* ---------- §9 · Services (4 product cards) ---------- */
  /* Phase 2: two columns = the ≤ 1279.98 block; the wrap-tuning <br>s off from the tablet tier down and the title balanced —
     at 768–781 the hard break left «merchant» alone on the middle line (the review F6; A-6 scoped, not crop-matched text) */
  .services__title br,
  .services__lead br { display: none; }
  .services__title { text-wrap: balance; }

  /* ---------- §10 · Tools (switcher → "DASHBOARD GLIDE", "INTERCHANGE DASHBOARD") ---------- */
  /* Phase 2: see the ≤ 1279.98 block (the zoomed stage) */

  /* ---------- §11 · Presence — globe + stats band ---------- */
  /* Phase 2: the head and the four numbers leave the frozen 1440 × 800 stage into normal flow (the numbers in two
     columns); only the 880 × 550 map box scales — it keeps its locked CSS size (js/flatmap.js sizes the canvas from it
     and draws the labels at their locked geometry), scaled by --map-s = min(1, column / 880); its negative margins make
     the layout box the scaled size. The desktop rules above 1024 stay untouched (the band is FROZEN there) */
  :root { --map-s: .4; }   /* no CSS trig */
  @supports (width: calc(1px * tan(atan2(1px, 1px)))) {
    :root { --map-s: clamp(.2, tan(atan2(calc(100vw - 2 * var(--gutter)), 880px)), 1); }
  }
  .presence { display: block; height: auto; padding: 64px 0 56px; }
  .presence__canvas {
    width: auto;
    height: auto;
    transform: none;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .presence__head {
    position: static;
    width: auto;
    max-width: 480px;
    gap: 20px;
    margin-bottom: 36px;
  }
  .presence__title { width: auto; }   /* the desktop 40 px like every other section title on a tablet (the review F16) */
  .presence__lead { width: auto; }
  .presence__map {
    position: relative;
    left: auto;
    top: auto;
    width: 880px;
    height: 550px;
    transform: scale(var(--map-s));
    transform-origin: top left;
    margin: 0 calc(880px * var(--map-s) - 880px) calc(550px * var(--map-s) - 550px) 0;
  }
  /* position relative, not static: the hairline (::before, absolute) must keep the numbers' box as its containing block */
  .presence__stats {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    padding-top: 28px;
    margin-top: 40px;
  }
  .presence__stats::before { left: 0; right: 0; }
  /* subgrid rows: a row's two descriptions start on one line even when only one number wraps (the review F7: 28.6 px apart) */
  .stat { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .stat__num { white-space: normal; font-size: 28px; }
  .stat__desc { max-width: none; }

  /* ---------- §12 · Case studies — proof band (3 tabs: photo + 3 stats, pill switcher) ---------- */
  /* Phase 2: normal flow — the tab pill (first in the DOM, the ARIA order), then the open panel's head, photo and three
     stats; the export's art cover-fits the canvas; the pill scrolls sideways when its three tabs are wider than the
     column (js/main.js places the thumb with the pill's scrollLeft); the glass pill, its border and the thumb as on desktop */
  .cs { display: block; height: auto; padding: 64px 0 56px; }
  .cs__tab:focus-visible { outline-offset: -2px; }   /* inside the tab: the scrolling pill's padding box clips the outer 1 px of
                                                        the desktop's +2 px ring (styles.css:2114; B1) */
  .cs__canvas {
    position: relative;
    width: auto;
    height: auto;
    transform: none;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .cs__bg { left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  /* position relative, not static: the panel keeps its z-index 1 over the absolute art (z-index 0) */
  .cs__panel { position: relative; inset: auto; padding-left: 0; }
  .cs__head { width: auto; min-height: 0; padding-top: 0; }
  .cs__title { max-width: none; line-height: 1.2; }   /* the desktop 40 px on a tablet (the review F16) */
  .cs__lead { margin-top: 20px; max-width: none; }
  #cs-panel-interchange .cs__title,
  #cs-panel-interchange .cs__lead { max-width: none; }
  #cs-panel-agreement .cs__stat:first-child .cs__desc { max-width: none; }
  .cs__photo { width: 100%; height: auto; aspect-ratio: 685 / 518; margin-top: 32px; }
  .cs__photo::after { display: none; }
  .cs__stats { position: static; width: auto; margin-top: 40px; gap: 28px; }
  .cs__stat { height: auto; padding: 2px 0 2px 16px; }
  .cs__amount { font-size: 56px; line-height: 1.1; white-space: normal; }
  .cs__tabs {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: flex;
    width: auto;
    max-width: max-content;
    height: auto;
    margin: 0 auto 40px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-padding-inline: 4px;   /* scrollIntoView lands the tab 4 px inside the pill's edge, not on it (the review F12) */
  }
  .cs__tabs::-webkit-scrollbar { display: none; }
  /* the 52 px tabs from the tablet tier down: the Spanish three (762 px at 18 px) did not fit the 702 px pill at 768 (the review F9) */
  .cs__tab { height: 52px; padding: 0 18px; font-size: 16px; }
  .cs__thumb { height: 52px; }

  /* ---------- §13 · Testimonials (slider) ---------- */
  /* Phase 2: the card's own tablet geometry; the control row centred under the logo bar (the 84 px bottom padding = 28
     under + the 28 px buttons + 28 above the bar); the 24 × 24 dot targets live in the ≤ 1279.98 block */
  .tm { padding: 64px 0; }
  .tm__slide { min-height: 0; padding: 32px 24px 84px; gap: 24px; }
  .tm__avatar { width: 72px; height: 72px; }
  .tm__text { font-size: 22px; }
  .tm__nav { left: 24px; right: 24px; bottom: 28px; justify-content: center; }
  .tm__bar { justify-content: center; }   /* the client logo centred like the rest of the card (the review F11) */

  /* ---------- §14 · Closing CTA (email capture) ---------- */
  /* Phase 2: the title's 492 px cap lifted on a tablet — the Spanish one wrapped to two lines and left 16 px of band around
     the content at 768 (the review F8); the rest of the band = the ≤ 767.98 block */
  .closer__title { max-width: none; }

  /* ---------- §15 · Insights (blog cards) ---------- */
  /* Phase 2: one centred column at the desktop card width (three 213 px columns were too narrow at 768; the review F5) */
  .insights__grid { grid-template-columns: minmax(0, 414px); gap: 40px; justify-content: center; }
  /* the wrap-tuning <br> off from the tablet tier down and the title balanced: at 768 the hard break left «today.» alone
     on a third line (the review F6; A-6 scoped) */
  .insights__title br { display: none; }
  .insights__title { text-wrap: balance; }

  /* ---------- §16 · Footer ---------- */
  /* Round 1: the links may wrap, so the 4 auto columns shrink to fit — the Spanish ones measure 279 + 190.4 + 62.5 +
     98.1 + 3 × 36 = 738 px against the 704 px row at 768 (the English 588 fit); two columns → the ≤ 767.98 block.
     The copyright above the legal row, which wraps (the Spanish row was cramped side by side at 768–1023) */
  .foot__link { white-space: normal; }
  .foot__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot__legal { flex-wrap: wrap; gap: 12px 24px; }

  /* ---------- §17 · Global motion — scroll reveal + reduced-motion ---------- */
  /* Phase 2 (the landing): none — the reveal is JS */

  /* ---------- About · css/about.css ---------- */
  /* Phase 2 (about): the tablet type scale; the quote, meet band, story and both bands stack; the team grids go 2 columns
     (the leadership stagger lifted) with the bio popover INLINE as a full-row grid item under its card (js: .au-pop--inline,
     the same 1023.98 breakpoint); the offices 2 per row */
  /* hero (about.css:44–72) — the leadership hero (.au-hero.al-hero) takes its own padding below, later in order */
  .au-hero { padding: 40px 0 72px; }
  .au-h1 { font-size: 44px; line-height: 50px; letter-spacing: -1.1px; }   /* no margin here: :524's .al-hero__h1 10 px stays */
  .au-hero__inner .au-h1 { margin-top: 32px; }   /* :69's 42 — the company hero only */
  /* quote (about.css:139–171 + the 1380 query at :790–792), stacked: the text, then the photo + «Learn more» at the left */
  .au-quote { padding: 64px 0 24px; }
  .au-quote__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .au-quote__name { font-size: 32px; line-height: 40px; }
  .au-quote__role { margin-bottom: 24px; font-size: 24px; line-height: 32px; }
  .au-quote__text { max-width: none; font-size: 20px; line-height: 32px; }
  .au-quote__media { align-items: flex-start; }
  .au-quote__media .au-pop--inline { align-self: stretch; max-width: 569px; }   /* the CEO's inline bio: the photo's width, under it */
  /* team (about.css:185–209): 2 columns; dense keeps the host's neighbour in the row above its inline bio */
  .au-team { padding: 8px 0 56px; }
  .au-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; grid-auto-flow: dense; }
  .au-tcard__name,
  .au-tcard__role { font-size: 20px; line-height: 27px; }
  .au-tcard__role { margin-bottom: 4px; }
  /* the inline popover (about.css:223–262): relative — never static, it stays the containing block of :234's absolute ✕ —
     a full-row grid item; never a display value here (it would beat the UA [hidden]) */
  .au-pop--inline {
    position: relative; grid-column: 1 / -1;
    width: auto; min-height: 0; margin: 0; padding: 24px 64px 24px 24px;
    border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 8px 24px rgba(10, 23, 51, .08);
    opacity: 1; transform: none; transition: none;
  }
  :root[data-theme="dark"] .au-pop--inline { box-shadow: none; border-color: var(--border); }   /* (0,3,0) after :769's (0,3,0) */
  .au-pop--inline .au-pop__x { top: 12px; right: 12px; }
  .au-pop--inline .au-pop__name { font-size: 20px; line-height: 27px; }
  .au-pop--inline .au-pop__role { margin: 2px 0 12px; font-size: 17px; line-height: 24px; }
  .au-pop--inline .au-pop__bio { max-width: none; }
  .au-pop--inline .au-pop__bio p { font-size: 16px; line-height: 24px; }   /* multi-paragraph prose = body text, the 16 px floor */
  .au-pop-frost { display: none; }   /* the belt: the inline mode never shows it */
  /* meet band (about.css:404–442), stacked */
  .au-meet { padding: 40px 0 8px; }
  .au-meet__band { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 32px; }
  .au-meet__h2 { max-width: none; font-size: 40px; line-height: 46px; }
  .au-meet__right { flex: 0 0 auto; max-width: 604px; }
  .au-meet__sub { font-size: 18px; line-height: 26px; }
  /* story (about.css:268–341), the lead above the timeline (the 80 px rail geometry kept at this tier) */
  .au-story { padding: 72px 0 80px; }
  .au-h2 { font-size: 34px; line-height: 40px; letter-spacing: -.85px; }   /* the story + offices heads */
  .au-story__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 56px; }
  .au-story__lead { max-width: 640px; font-size: 20px; line-height: 28px; }
  .au-tl__item { padding-bottom: 36px; }   /* :316's :last-child 0 ((0,2,0)) stays */
  /* offices (about.css:447–471): 2 equal pills per row (7 = 3 rows + 1, the last alone at the left) */
  .au-offices { padding: 72px 0 32px; }
  .au-offices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  .au-offices__grid .au-office { grid-column: auto; width: 100%; min-width: 0; padding: 20px 16px; font-size: 18px; line-height: 24px; }   /* (0,2,0) after :460 */
  /* cta (about.css:476–504) — the 493 px pill fits at 768 */
  .au-cta { padding: 96px 0 104px; }
  .au-cta__h2 { font-size: 34px; line-height: 40px; letter-spacing: -.85px; }
  .au-cta__lead { font-size: 17px; line-height: 26px; }
  /* leadership (about.css:514–618) */
  .al-hero { padding: 32px 0 56px; }
  .al-hero__lead { margin: 32px 0 0; max-width: none; font-size: 18px; line-height: 27px; }   /* :529's 57 px right margin + the Figma offset off */
  .al-team { padding: 48px 0 56px; }
  .al-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; grid-auto-flow: dense; }
  .al-tcard--c2,
  .al-tcard--c3,
  .al-tcard--c4 { grid-column: auto; }   /* :547–549's stagger pins lifted (13 cards = 6 rows + 1) */
  .al-tcard__name,
  .al-tcard__role,
  .al-tcard__region { margin-right: 0; }   /* :561's −27 bleed off — nothing to bleed into */
  .al-tcard__name,
  .al-tcard__role { font-size: 20px; line-height: 27px; }
  .al-band { padding: 0 0 72px; }
  .al-band__box { flex-direction: column; gap: 24px; padding: 40px 32px; }
  .al-band__h2 { font-size: 40px; line-height: 46px; }
  .al-band__right { max-width: none; }
  .al-band__sub { font-size: 18px; line-height: 26px; }

  /* ---------- Products · css/products.css ---------- */
  /* Phase 2 (products): the tablet type scale; the modules panel stacks (the copy, then the widget); the capabilities in
     two columns; the how-it-works head stacks and the cubes go 2 × 2 */
  /* §1 hero (products.css:15–36) */
  .pr-hero { padding: 64px 0 56px; }
  .pr-hero__h1 { font-size: 44px; line-height: 50px; letter-spacing: -1.1px; }
  .pr-hero__lead { font-size: 18px; line-height: 28px; }
  /* §2 monitor (products.css:56) */
  .pr-monitor { padding-bottom: 88px; }
  /* the review (FID-1): products.css:63's 0 40px 80px shadow reaches 120 px under the window and the next section's #fbfbfb cut
     it flat at the seam (a 6-level step at 768) — a shorter shadow ends inside the 88 / 64 px padding */
  .pr-window { box-shadow: 0 28px 56px rgba(10, 23, 51, 0.18); }
  /* §3 modules (products.css:144–258; :203's id rule repeated — contract e) */
  .pr-mod { padding: 72px 0 88px; }
  .pr-mod__h2 { font-size: 34px; line-height: 40px; letter-spacing: -.85px; }
  .pr-mod__card { margin-top: 48px; padding: 28px; gap: 28px; }
  .pr-mpanel,
  #pr-panel-fee.pr-mpanel { flex-direction: column; gap: 28px; }
  .pr-mpanel__copy { max-width: none; }
  .pr-mpanel__lead { max-width: 560px; }
  .pr-mwidget { margin-top: 0; max-width: 100%; }   /* 367 / 333 wide, left-aligned under the copy's CTA */
  /* §4 capabilities (products.css:292–319; scoped — .pr-cap-card is in the popups too) */
  .pr-caps { padding: 72px 0; }
  .pr-caps__head { margin-bottom: 48px; }
  .pr-caps__h2 { font-size: 34px; line-height: 40px; letter-spacing: -.85px; }
  .pr-caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .pr-caps__grid .pr-cap-card { padding: 28px 28px 40px; }
  /* §5 how it works (products.css:338–381): the heights are `auto` from the ≤ 1279.98 block; the grid rows equalise each
     pair; the featured background / border stay on card 1 (the touch block stops the hover transfer) */
  .pr-hiw { padding: 72px 0; }
  .pr-hiw__head { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 48px; }
  .pr-hiw__intro { max-width: none; }
  .pr-hiw__h2 { font-size: 34px; line-height: 40px; letter-spacing: -.85px; }
  .pr-hiw__lead { margin-top: 0; max-width: 640px; }
  .pr-hiw__strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  .pr-hiw-card { min-height: 0; padding: 28px 24px; }
  .pr-hiw-card:first-child,
  .pr-hiw__strip .pr-hiw-card:hover { min-height: 0; }
  .pr-hiw__strip:hover .pr-hiw-card:first-child:not(:hover) { min-height: 0; }
  /* §8 FAQ (products.css:390–396) */
  .pr-faq { padding: 72px 0; }
  .pr-faq__inner { gap: 48px; }
  .pr-faq__h2 { font-size: 34px; line-height: 40px; letter-spacing: -.85px; }

  /* ---------- Popups · the .pr-modal rules of css/products.css ---------- */
  /* Phase 2 (products): the full-width card with a CSS-pinned close button and one column inside — the recipe the five
     solutions popups reuse (their rules below are written now, gated by the solutions unit) */
  /* the card is no longer a scroll container (hidden → clip; the radius still clips the corners), so a sticky child pins
     to .pr-modal__scroll, the real scroller (the planner's 10-line test: the button held its viewport y while the
     transformed card scrolled 976 px) */
  .pr-modal__card { overflow: clip; }
  /* products.css:471: the button is the card's FIRST child — in flow it takes the top row (12 + 48 = 60 px) and pins 12 px
     under the scroller's top edge while the content scrolls under it; display grid + 48 × 48 stay */
  .pr-modal__close { position: sticky; top: 12px; right: auto; margin: 12px 12px 0 auto; }
  .pr-modal__inner { padding: 16px 32px 48px; }   /* the eyebrow 16 px under the button row */
  /* the head in one column: the 112 / 141 / 108 px check margins aligned the checks with the lead in the two-column head */
  .pr-fmp__head,
  #pr-modal-fee .pr-fmp__head,
  #pr-modal-ix .pr-fmp__head,
  .pr-modal--narrow .pr-fmp__head { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pr-fmp__intro { max-width: none; }
  .pr-fmp__checks,
  #pr-modal-fee .pr-fmp__checks,
  .pr-modal--narrow .pr-fmp__checks { margin-top: 24px; }
  .pr-fmp__h2 { font-size: 32px; line-height: 38px; letter-spacing: -.8px; }
  .pr-fmp__lead { font-size: 17px; line-height: 26px; }
  .pr-fmp__mocks { margin-top: 40px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pr-fmp__mocks > * { max-width: 420px; justify-self: center; }   /* the user's call (10-19, the review's FID-5): at 768 the stacked mockups were 640 wide (1.9× desktop); 420 centred ≈ 1.2× — a phone's column is narrower, so nothing changes there */
  .pr-fmp__mocks--duo,
  #sol-modal-opex .pr-fmp__mocks--duo,
  #sol-modal-portfolio .pr-fmp__mocks--duo,
  #sol-modal-interchange .pr-fmp__mocks--duo,
  #sol-modal-interchange-acq .pr-fmp__mocks--duo { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-right: 0; }
  .pr-fmp__caps,
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__caps { margin-top: 40px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__caps .pr-cap-card { min-height: 0; }
  .pr-fmp__cta,
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__cta { margin-top: 56px; }
  /* products.css:728's id rule (its letter-spacing) repeated — contract e */
  .pr-fmp__cta-h2,
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__cta-h2 { font-size: 32px; line-height: 38px; letter-spacing: -.8px; }
  /* the solutions popups' fixed widths and multi-column rows (solutions.css:473 / :508 / :517 / :527 / :755 / :757 / :777 /
     :801) — ungated here, the solutions unit measures them */
  #sol-modal-opex .pr-fmp__lead,
  #sol-modal-scheme .pr-fmp__lead,
  #sol-modal-interchange .pr-fmp__lead { width: auto; }
  .pr-modal--narrow .sol-cta__form { width: 100%; max-width: 493px; }   /* 100 % (the review, REG-2): `auto` left the pill at its 400 px intrinsic width, past the card at 390 */
  .pr-fmp__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-fmp__glance-grid { grid-template-columns: minmax(0, 1fr); }
  .pr-fmp__glance-cell + .pr-fmp__glance-cell { border-left: 0; border-top: 1px solid #EDEDED; }
  .pr-fmp__rewards-body { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 20px 24px 24px; }
  .pr-fmp__rewards-callout { width: auto; max-width: 425px; justify-self: start; }   /* the review (REG-1): solutions.css:790's fixed 425 px ran 80 px out of the card at 390; start = left under the stats in the one-column body */
  /* the review (FID-4): the dark close button (products.css:763, 18 % orange) is translucent — pinned over the scrolling text it
     let the words through; the same rendered colour over the dark card, opaque */
  :root[data-theme="dark"] .pr-modal__close { background: #3C262A; }
  /* Phase 2 (solutions): the five .pr-modal--narrow popups — the two-column head's fixed-y rhythm (solutions.css:496–537,
     :737–801) leaks into the one-column card: the tier's paddings + rhythm here */
  .pr-modal--narrow .pr-modal__inner { padding-top: 16px; }   /* :496's 65 ((0,2,0)); the tier's 16 at 749 is (0,1,0) */
  #sol-modal-opex .pr-modal__inner,
  #sol-modal-scheme .pr-modal__inner,
  #sol-modal-interchange .pr-modal__inner,
  #sol-modal-interchange-acq .pr-modal__inner { padding-bottom: 48px; }   /* :513 77 / :516 46 / :537 77 / :737 77 — (1,1,0) */
  /* :744 84 / :797 72 / :514 23 / :518 64 / :530 61 / :747 60 / :528 38 / :531 91 → the tier's 40 (761 / 768) */
  .pr-fmp__glance,
  .pr-fmp__how,
  #sol-modal-opex .pr-fmp__mocks,
  #sol-modal-scheme .pr-fmp__mocks,
  #sol-modal-interchange .pr-fmp__mocks,
  #sol-modal-interchange-acq .pr-fmp__mocks,
  #sol-modal-interchange .pr-fmp__rewards,
  #sol-modal-interchange .pr-fmp__caps { margin-top: 40px; }
  #sol-modal-opex .pr-fmp__cta,
  #sol-modal-scheme .pr-fmp__cta,
  #sol-modal-interchange .pr-fmp__cta { margin-top: 56px; }   /* :515 90 / :519 56 / :534 100 → the tier's 56 (771) */
  .pr-fmp__how-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }   /* :798's two columns */
  /* the Figma wrap caps of the three-column cap grid (:532 211 / :533 240 / :506 240) — the cards are one column here */
  #sol-modal-interchange .pr-cap-card__title,
  #sol-modal-interchange-acq .pr-cap-card__title,
  #sol-modal-interchange .pr-cap-card__desc,
  #sol-modal-interchange-acq .pr-cap-card__desc,
  :is(#sol-modal-opex, #sol-modal-scheme) .pr-cap-card__desc { max-width: none; }
  /* the narrow popups' Figma type scale (10 / 14 / 12 / 11 px — :462–505, :748–811) raised to the site's floors from this
     tier down (the one-column card is a reading surface); the phone tier re-sizes the two titles and the lead only */
  .pr-modal--narrow .pr-eyebrow { font-size: 13px; line-height: 17px; letter-spacing: .78px; }   /* :462 → the site's eyebrow (products.css:146, solutions.css:82) */
  .pr-modal--narrow .pr-fmp__h2 { font-size: 32px; line-height: 38px; letter-spacing: -.8px; text-wrap: balance; }   /* :463 (0,2,0) beat the tier's .pr-fmp__h2 at 759; balance = the review (FID-8): «level» alone on the issuer Interchange title's third line — not crop-matched below 1024 */
  .pr-modal--narrow .pr-fmp__lead { font-size: 17px; line-height: 26px; letter-spacing: -.32px; }   /* :464 */
  .pr-modal--narrow .pr-fmp__checks li { font-size: 15px; line-height: 20px; letter-spacing: -.32px; }   /* :477 (0,2,1) */
  .pr-modal--narrow .pr-fmp__check { width: 22px; height: 22px; border-radius: 11px; margin: 0; }   /* :498 → the products' 22 (products.css:503), on the 20 px line */
  .pr-modal--narrow .pr-fmp__check .icon { width: 11px; height: 11px; }   /* :499 */
  .pr-modal--narrow .pr-cap-card__desc { font-size: 15px; line-height: 22px; letter-spacing: -.32px; }   /* :505 */
  .pr-modal--narrow .pr-cap-card__title { font-size: 20px; line-height: 27px; }   /* the review (FID-5): :504's 16 / 21 sat 1 px above the 15 px desc at 768 while the phone had 20 / 27 — the scale inverted */
  .pr-fmp__glance-num { flex: 0 0 72px; }   /* the review (FID-7): the natural-width numbers («8%» 46.6 … «20%» 68.3) gave the three stacked rows a ragged text edge; 72 = the rewards block's basis precedent */
  .pr-modal--narrow .pr-fmp__cta-h2 { font-size: 32px; line-height: 38px; letter-spacing: -.8px; }   /* :480 (0,2,0) beat the tier's 32 / 38 at 774–775 */
  .pr-fmp__step-num { font-size: 12px; line-height: 15px; }   /* :809's 11 — an uppercase-style label */
  .pr-fmp__step-desc { font-size: 15px; line-height: 22px; letter-spacing: -.32px; }   /* :811's 11 / 17 */
  .pr-fmp__how-lead { margin-top: 0; font-size: 16px; line-height: 25px; letter-spacing: -.32px; }   /* :800's 42 + 14 / 21 */
  .pr-fmp__glance-title,
  .pr-fmp__rewards-title { font-size: 13px; line-height: 17px; letter-spacing: .6px; }   /* :752's 9.5 / 14 and :774's 12 / 16 — the two uppercase heading bands at the site's eyebrow size (the review, A11Y-6: the rewards one is a sentence-length h3) */
  .pr-fmp__glance-text { font-size: 15px; line-height: 21px; }   /* :759's 11.2 / 17 */
  .pr-fmp__rewards-meta { font-size: 12px; line-height: 16px; }   /* :778's 11 / 14 — uppercase */
  .pr-fmp__rewards-label { font-size: 15px; line-height: 21px; }   /* :784's 12 / 16 */
  .pr-fmp__rewards-text { font-size: 15px; line-height: 23px; }   /* :792's 14 / 23 */

  /* ---------- Solutions · css/solutions.css ---------- */
  /* Phase 2 (solutions): the tablet type scale, every module in ONE column (the card below the copy — DOM order = visual
     order), the methodology in centred rows that wrap (the connector off), the stats 2 × 2 with the Spanish cap lifted */
  .sol-hero { padding: 36px 0 56px; }
  .sol-hero__top { margin-bottom: 28px; }
  .sol-hero__inner { margin-inline: var(--gutter) 0; }   /* :35–38's centred 620 px column started at x 74 at 768 while the pill, the sub-nav and the modules start at the 32 px gutter (B5's open item) — left-aligned with them (x 20 / 32 / 40.9 at 390 / 768 / 1023, the review FID-1 + A11Y-2: the planner's first version, margin-inline 0, put it at x 0 on every phone — the column had its gutter only from the auto margins) */
  .sol-hero__h1 { font-size: 44px; line-height: 50px; letter-spacing: -1.1px; }
  .sol-hero__lead { margin-top: 20px; font-size: 18px; line-height: 28px; }
  .sol-mod { padding: 64px 0; }
  .sol-mod__inner,
  .sol-mod__inner--flip,
  .sol-mod__inner--wide-copy,
  .sol-mod__inner--wide-left { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* :160–161 are (0,2,0): equal specificity, this file wins by order — without them the copy's grid-column 2 would create an
     implicit second column */
  .sol-mod__inner--flip .sol-mod__copy { grid-column: auto; }
  .sol-mod__inner--flip .sol-card { grid-column: auto; grid-row: auto; }
  .sol-mod__h2 { font-size: 34px; line-height: 40px; letter-spacing: -.85px; }
  .sol-meth { padding: 64px 0; }
  .sol-meth__h2 { font-size: 34px; line-height: 40px; letter-spacing: -.85px; }
  /* 3 + 2 at 704: the second row centred (MOBILE-PLAN.md §E's auto-fit grid would left-align it — the planner's default) */
  .sol-meth__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 24px; margin-top: 48px; max-width: 672px; margin-inline: auto; }   /* the review (FID-2): from 948 the wrap held 4 × 200 + 3 × 24 = 872 and step 5 sat alone — 672 (3 × 200 + 2 × 24 = 648 ≤ 672 < 872) keeps 3 + 2 to 1023; the phone tier resets it */
  .sol-meth__steps::before { display: none; }   /* the connector would cross the rows */
  .sol-meth__step { flex: 0 1 200px; padding: 0; }
  .sol-stats { padding: 56px 0; }
  .sol-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
  .sol-stats__cell { padding: 24px 0; text-align: center; }   /* the review (FID-6): the fit-content cells centred in their columns with left-aligned text started the two rows 25–45 px apart */
  .sol-stats__big { font-size: 48px; line-height: 48px; letter-spacing: -1.9px; }
  .sol-stats__grid .sol-stats__label { max-width: none; }   /* (0,2,0) = lang-es.css:98's :lang(es) .sol-stats__label 240 px cap — this file loads after it */
  .sol-cta { padding: 72px 0 48px; }
  .sol-cta__h2 { font-size: 34px; line-height: 40px; letter-spacing: -.85px; }

  /* ---------- Case Studies · css/case-studies.css ---------- */
  /* filled in Round 6 */

  /* ---------- Case-study story pages · css/case-study.css ---------- */
  /* Round 1: the facts card above the article (one column), no longer sticky */
  .story-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .story-facts { position: static; }   /* beats case-study.css:13's (min-height: 600px) sticky by source order */

  /* ---------- Contact + the 404 card · css/contact.css ---------- */
  /* Round 1: see the ≤ 1279.98 and ≤ 767.98 blocks — main.ct serves the two contact pages AND 404.html */

  /* ---------- Blog · css/blog.css ---------- */
  /* filled in Round 7 — .blog-search 85vh at :213 / :222 handled there */

  /* ---------- Blog articles · css/blog-post.css ---------- */
  /* Round 1: the reading column gets the safe-area gutter (.post-col has none); the wide figures stay inside it */
  .post-body {
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }
  .post-figure--wide { width: auto; margin-inline: 0; }   /* blog-post.css:42 assumes a 760 px column */
  /* the text-bearing diagrams (4 images on 3 articles) shrank to the column — the STIP infographic's labels 3.2 CSS px at 390
     (the fidelity lens) → each keeps its desktop size inside a horizontal scroller (the cookie-table idiom): 2880 × 858 at the
     1100 figure, 1919 × 1053 at the 560 px height cap = 1020, the two 1800 × 1800 at 560 */
  .post-figure--wide { overflow-x: auto; overscroll-behavior-x: contain; }
  .post-figure--wide img { max-width: none; max-height: none; height: auto; margin-inline: 0; }
  .post-figure--wide img[width="2880"] { width: 1100px; }
  .post-figure--wide img[width="1919"] { width: 1020px; }
  .post-figure--wide img[width="1800"] { width: 560px; }

  /* ---------- Legal · css/legal.css ---------- */
  /* Round 1: the head above the body (one column), no longer sticky */
  .legal__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .legal__head { position: static; }   /* beats legal.css:23's (min-height: 600px) sticky by source order */

}

/* ========== ≤ 767.98 — the phone tier ========== */
@media (max-width: 767.98px) {

  /* ---------- §1 · Fonts (self-hosted Geist) ---------- */
  /* no rule expected */

  /* ---------- §2 · Design tokens (light + dark) ---------- */
  /* filled in Round 0 */
  /* overrides styles.css:95 `clamp(32px, 4vw, 80px)`: every `.container` and the `*__inner` copies read it — NOT the blog
     articles' reading column (.post-body > .post-col, blog-post.css:19–20, no gutter; .post-figure--wide mixes
     100vw − 2·gutter with a fixed 760px) nor .story-quote__card's fixed 64px padding — both handled in Round 1 (the
     Blog articles + Case-study story pages banners) */
  :root { --gutter: 20px; }

  /* ---------- §3 · Reset / base + utilities (.container, .sr-only, focus) ---------- */
  /* Round 0: see the ≤ 1279.98 block */

  /* ---------- §4 · Navbar (+ nav dropdowns) ---------- */
  /* Round 1: see the ≤ 1279.98 block (the bar + the menu hold one geometry below 1280) */

  /* ---------- §5 · Buttons ---------- */
  /* no rule expected */

  /* ---------- §6 · Hero (visual layers → "CARD FACE", dash panel) ---------- */
  /* Phase 2: the card face alone, scaled to the column — --hero-s = min(1, column / 433), the card's own width; the other
     five layers hide and the card's Figma seat 159 / 134.1 moves to 0 / 0 of a 433 × 281.4 stage (it keeps its
     drop-shadow and its float) — the stage takes the card's size instead of a translate() of the 592 × 551 one, whose
     .hero__fit / __scene / __deck boxes then sat 128 px off the screen's left edge (measured at 390: x −108.5); the
     phone type scale; ≤ 430 the e-mail pill stacks (the Phase 1 recipe of the Case Studies banner below) */
  :root { --hero-s: .8; }   /* no CSS trig */
  @supports (width: calc(1px * tan(atan2(1px, 1px)))) {
    :root { --hero-s: clamp(.4, tan(atan2(calc(100vw - 2 * var(--gutter)), 433px)), 1); }
  }
  .hero__inner { padding-block: 32px 40px; gap: 32px; }
  .hero__title { font-size: 34px; letter-spacing: -.8px; }
  @media (max-width: 374px) {
    .hero__title { font-size: 30px; }   /* the Spanish title ran 6 lines at 320 and pushed the pill's button under the fold (the review F15) */
  }
  .hero__visual {
    justify-self: start;
    width: calc(433px * var(--hero-s));
    height: calc(281.4px * var(--hero-s));
  }
  .hero__fit {
    left: 0;
    right: auto;
    width: 433px;
    height: 281.4px;
    transform: scale(var(--hero-s));
    transform-origin: top left;
    perspective: none;
  }
  .hlayer--card { left: 0; top: 0; }
  .hlayer--panel,
  .hlayer--lines-b,
  .hlayer--lines-t,
  .hlayer--pill-fee,
  .hlayer--pill-hub { display: none; }
  @media (max-width: 430px) {
    .hero .hero__form { height: auto; flex-direction: column; gap: 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
    .hero .hero__input { flex: none; width: 100%; height: 56px; padding: 0 24px; background: #FFFFFF; border: 1px solid #F7F7F7; border-radius: 999px; box-shadow: 0 12px 32px rgba(10, 23, 51, .06); }
    .hero .hero__form:has(.hero__input:focus-visible) { outline: none; }
    .hero .hero__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
    .hero .hero__form.is-error .hero__input { border-color: #d02e2e; }
    .hero .hero__btn { position: static; width: 100%; justify-content: center; }
    .hero .hero__form-error { position: static; margin-top: 8px; }
  }

  /* ---------- §7 · Content — stat band + logo marquee ("STAT BAND" glass) ---------- */
  /* Phase 2: the phone type scale for the stat line; the logo row 48 px tall with 86 px logos (the track's
     max-content width and the edge mask stay) */
  .stats__big { font-size: 24px; line-height: 1.4; }
  .marquee { margin-top: 24px; height: 48px; }
  .marquee__item { flex-basis: 86px; height: 48px; margin-right: 44px; }
  .marquee__item img { max-width: 86px; max-height: 40px; }

  /* ---------- §8 · Platform (monitor mockup → "MONITOR SCREEN DASHBOARD") ---------- */
  /* Phase 2: the phone spacing + type scale; the seam wash off (its tools half is off too) */
  .platform__inner { padding-block: 64px 40px; gap: 32px; }
  .platform__title { font-size: 30px; letter-spacing: -.75px; }
  .platform__lead { font-size: 16px; max-width: none; }
  .platform__wash { display: none; }

  /* ---------- §9 · Services (4 product cards) ---------- */
  /* Phase 2: one column (the section keeps its inline gutter, styles.css:1402); the wrap-tuning <br>s hidden (A-6,
     scoped); the phone type scale */
  .services { padding: 64px var(--gutter); }
  .services__head { margin-bottom: 40px; }
  .services__title { width: auto; font-size: 30px; }
  .services__lead { width: auto; font-size: 16px; }
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .pcard { padding: 24px; }
  .pcard__title { font-size: 22px; }   /* the desktop's 20.3 / 13.5 px card type never rescaled (the review F13 / A9) */
  .pcard__desc { font-size: 15px; }
  .services__title br,
  .services__lead br,
  .pcard__desc br { display: none; }
  /* ≤ 374 the card's content box (320: 230 px) is narrower than the two 258 px artworks (cards 3 + 4); their auto margins
     collapse to 0 on overflow and pinned them left, 28 px past the content edge (right 303 at 320) — centred instead, they
     overflow 14 px into each 24 px padding and stay inside the card (31–289 at 320). Anchoring the second stat right
     (`right: 0`) changes nothing: 258 − 210 = its 48 px left offset */
  @media (max-width: 374px) {
    .pcard__art--ia,
    .pcard__art--po { margin-inline: 0; align-self: center; }
  }

  /* ---------- §10 · Tools (switcher → "DASHBOARD GLIDE", "INTERCHANGE DASHBOARD") ---------- */
  /* Phase 2: the phone spacing + type scale; the seam wash off */
  .tools__inner { padding-block: 64px 48px; gap: 40px; }
  .tools__title { font-size: 30px; }
  .tools__lead { font-size: 16px; }
  .tools__switch { gap: 24px; }
  .topt__desc { font-size: 16px; }
  .topt.is-active .topt__desc { min-height: 72px; }   /* 3 × 24 px lines: styles.css:1608 reserves 54 = 2 × 27 for 18 px text; at
                                                         16 px the Fee desc wraps to 3 lines, so the switch to Interchange moved
                                                         the dashboard 18 px (B1 measured at 320 en / 375 es) */
  .topt.is-active .topt__title { font-size: 26px; }
  /* the collapsed option's title keeps the desktop 24 px: at 20 px its #7f7f7f is normal-size text at 3.8:1 (the review A2 — AA
     needs 4.5:1; large text passes at 3:1), and 20 × 1.1 = 22 px was under the 24 px target height (A8) */
  .tools__wash { display: none; }

  /* ---------- §11 · Presence — globe + stats band ---------- */
  /* Phase 2: the phone spacing + type scale; the wrap-tuning <br> of the numbers hidden (A-6, scoped) */
  .presence { padding: 56px 0 48px; }
  .presence__title { font-size: 30px; }
  .presence__stats { gap: 28px 20px; }
  .stat__num { font-size: 26px; overflow-wrap: break-word; }   /* a word longer than its column breaks instead of running into
                                                                  the gutter («transacciones», the review F1 / A3) */
  .stat__num br { display: none; }
  @media (max-width: 374px) {
    .presence__stats { grid-template-columns: minmax(0, 1fr); }   /* one column: the 2 × 2 gave 130 px columns at 320 */
  }

  /* ---------- §12 · Case studies — proof band (3 tabs: photo + 3 stats, pill switcher) ---------- */
  /* Phase 2: the phone spacing + type scale; the tabs 52 px tall */
  .cs { padding: 56px 0 48px; }
  .cs__title { font-size: 30px; }
  .cs__lead { font-size: 16px; line-height: 1.5; }
  .cs__photo { margin-top: 24px; }
  .cs__stats { margin-top: 32px; gap: 20px; }
  .cs__amount { font-size: 48px; }
  .cs__tabs { margin-bottom: 32px; }

  /* ---------- §13 · Testimonials (slider) ---------- */
  /* Phase 2: the phone spacing + type scale; the seam wash off */
  .tm { padding: 56px 0; }
  .tm__card { border-radius: 24px; }
  .tm__slide { padding: 28px 20px 84px; gap: 20px; }
  .tm__text { font-size: 20px; }
  .tm__wash { display: none; }

  /* ---------- §14 · Closing CTA (email capture) ---------- */
  /* Phase 2: the band takes its content's height — the neighbours' washes are off at this tier, so the seam invariant of
     styles.css:2230–2241 no longer ties its height to the artwork; ≤ 430 the pill stacks (the Phase 1 recipe of the Case
     Studies banner) — the form rules are scoped under .closer: .closer__form also serves the closing bands of the Case
     Studies, story, blog-article, About and Leadership pages */
  .closer { height: auto; padding: 56px 0 64px; }
  .closer__inner { gap: 32px; }
  .closer__title { max-width: none; font-size: 30px; }
  .closer .closer__form { width: 100%; }
  /* the band's wash fades at both edges: with the neighbours' slices off there is nothing to meet them, so the middle slice
     ended as a hard band (the review F2: a 15-step edge on 38 / 38 samples); the desktop's «never fade a seam edge» assumes
     a neighbour */
  .closer__wash {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 75%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 75%, transparent 100%);
  }
  @media (max-width: 430px) {
    .closer .closer__form { height: auto; flex-direction: column; gap: 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
    .closer .closer__input { flex: none; width: 100%; height: 56px; padding: 0 24px; background: #FFFFFF; border: 1px solid #F7F7F7; border-radius: 999px; box-shadow: 0 12px 32px rgba(10, 23, 51, .06); }
    .closer .closer__form:has(.closer__input:focus-visible) { outline: none; }
    .closer .closer__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
    .closer .closer__form.is-error .closer__input { border-color: #d02e2e; }
    .closer .closer__btn { position: static; width: 100%; justify-content: center; }
    .closer .closer__error { position: static; margin-top: 8px; }
  }

  /* ---------- §15 · Insights (blog cards) ---------- */
  /* Phase 2: one column; the seam wash off; the wrap-tuning <br> of the heading hidden (A-6, scoped); the phone type scale */
  .insights { padding: 64px 0 72px; }
  .insights__wash { display: none; }
  .insights__head { margin-bottom: 40px; }
  .insights__title { font-size: 30px; }
  .insights__title br { display: none; }
  .insights__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .insights__ctitle { margin-top: 20px; font-size: 22px; }
  .insights__desc { margin-top: 12px; font-size: 16px; }
  .insights__foot { margin-top: 48px; }

  /* ---------- §16 · Footer ---------- */
  /* Round 1: two link columns (their links wrap + the bottom row stacks — the ≤ 1023.98 block) */
  .foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }

  /* ---------- §17 · Global motion — scroll reveal + reduced-motion ---------- */
  /* Phase 2 (the landing): none — the reveal is JS */

  /* ---------- About · css/about.css ---------- */
  /* Phase 2 (about): the phone type scale; the waves off; one-column team, offices and timeline (its rail tightened to 44);
     the leadership team in two columns; the closing pill full width, stacked ≤ 479.98 */
  .au-wave { display: none; }   /* the four img.au-wave (about.css:51–56 / :274 / :482 / :517) */
  /* hero — the leadership hero's own padding below, later in order */
  .au-hero { padding: 32px 0 56px; }
  .au-h1 { font-size: 32px; line-height: 38px; letter-spacing: -.8px; }
  .au-hero__inner .au-h1 { margin-top: 24px; }
  /* quote */
  .au-quote { padding: 48px 0 16px; }
  .au-quote__grid { gap: 24px; }
  .au-quote__name { font-size: 28px; line-height: 34px; }
  .au-quote__role { margin-bottom: 16px; font-size: 20px; line-height: 28px; }
  .au-quote__text { font-size: 18px; line-height: 28px; }
  .au-quote__photo { max-width: none; border-radius: 28px; }
  /* team: one column (390 → 350 px cards) */
  .au-team { padding: 8px 0 48px; }
  .au-team__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .au-tcard__photo { border-radius: 28px; }
  .au-pop--inline { padding: 20px 56px 20px 20px; border-radius: 20px; }
  /* meet band */
  .au-meet { padding: 32px 0 8px; }
  .au-meet__band { gap: 20px; padding: 32px 24px; border-radius: 24px; }
  .au-meet__h2 { font-size: 30px; line-height: 36px; }
  .au-meet__sub { font-size: 17px; line-height: 26px; }
  .au-meet__btn { padding: 12px 20px; font-size: 17px; }
  /* story: the rail tightened — the dot's centre 22 px right of the rail and 22 px left of the text (about.css:292 / :318) */
  .au-story { padding: 56px 0 64px; }
  .au-h2 { font-size: 30px; line-height: 36px; letter-spacing: -.75px; }
  .au-story__grid { gap: 32px; margin-top: 40px; }
  .au-story__lead { font-size: 18px; line-height: 26px; }
  .au-tl { padding-left: 44px; }
  .au-tl__item::before { left: -29px; }
  .au-tl__item { padding-bottom: 32px; }
  .au-tl__title { font-size: 18px; line-height: 24px; }   /* the desc keeps :339's 15 / 23 */
  /* offices: one column */
  .au-offices { padding: 56px 0 24px; }
  .au-offices__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
  .au-offices__grid .au-office { min-height: 60px; padding: 16px; font-size: 17px; line-height: 24px; }
  /* cta: the site's closer pill (styles.css:2253–2286), scoped under .au-cta — the §14 .closer recipe above does not reach
     section.au-cta */
  .au-cta { padding: 64px 0 72px; }
  .au-cta__h2 { font-size: 30px; line-height: 36px; letter-spacing: -.75px; }
  .au-cta__lead { font-size: 16px; line-height: 26px; }
  .au-cta .closer__form { width: 100%; }
  /* ≤ 479.98 (unit 3's 449.98 measured again here: the seated row's text box is the form − 202 px of padding + border, so
     the Spanish placeholder «¿Cuál es su correo corporativo?» (218.6 px) was cut at 450–460 (box 208–218); 461 leaves 0.4 px,
     480 leaves 19.4): the input a white pill of its own, the button a full-width row below it, the focus ring on the input;
     the dark pairs because styles.css:2281's (0,3,0) dark pill would beat the light (0,2,0) reset, and the dark input line
     (0,4,0) would beat the light error border (#ff8f8f = styles.css:2285) */
  @media (max-width: 479.98px) {
    .au-cta .closer__form { height: auto; flex-direction: column; gap: 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
    .au-cta .closer__input { flex: none; width: 100%; height: 56px; padding: 0 24px; background: #FFFFFF; border: 1px solid #F7F7F7; border-radius: 999px; box-shadow: 0 12px 32px rgba(10, 23, 51, .06); }
    .au-cta .closer__form:has(.closer__input:focus-visible) { outline: none; }
    .au-cta .closer__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
    .au-cta .closer__form.is-error .closer__input { border-color: #d02e2e; }
    .au-cta .closer__btn { position: static; width: 100%; justify-content: center; }
    .au-cta .closer__error { position: static; margin-top: 8px; font-size: 15px; line-height: 20px; }   /* styles.css:2275's 14 — the 15 px floor */
    :root[data-theme="dark"] .au-cta .closer__form { background: transparent; border: 0; box-shadow: none; }
    :root[data-theme="dark"] .au-cta .closer__input { background: var(--surface); border-color: var(--border); }
    :root[data-theme="dark"] .au-cta .closer__form.is-error .closer__input { border-color: #ff8f8f; }
  }
  /* leadership: two columns on phones (390 → 167 px cards) */
  .al-hero { padding: 24px 0 40px; }
  .al-hero__lead { margin-top: 20px; font-size: 17px; line-height: 26px; }
  .al-team { padding: 32px 0 40px; }
  .al-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .al-tcard__photo { border-radius: 20px; }
  .al-tcard__name,
  .al-tcard__role { font-size: 17px; line-height: 24px; }
  .al-tcard__name { margin-top: 12px; }
  .al-tcard__region { font-size: 15px; }   /* about.css:576's 15 / 20 kept */
  .al-tcard .au-more { margin-top: 6px; gap: 8px; }   /* (0,2,0) = about.css:579 */
  .al-band { padding: 0 0 56px; }
  .al-band__box { gap: 20px; padding: 32px 24px; border-radius: 24px; }
  .al-band__h2 { font-size: 30px; line-height: 36px; }
  .al-band__sub { font-size: 17px; line-height: 26px; }
  .al-band__btn { padding: 12px 20px; font-size: 17px; }

  /* ---------- Products · css/products.css ---------- */
  /* Phase 2 (products): the phone type scale and spacing; a lighter window frame; the modules widgets full width with
     their rows re-fitted; the capabilities and the how-it-works cubes in one column */
  /* §1 hero (products.css:15–37): the two 45 px buttons wrap at ≤ 374 (158 + 10 + 160 > 280) by :37's flex-wrap */
  .pr-hero { padding: 48px 0 44px; }
  .pr-hero__inner { gap: 12px; }
  .pr-hero__h1 { font-size: 32px; line-height: 38px; letter-spacing: -.8px; }
  .pr-hero__lead { margin-top: 4px; font-size: 17px; line-height: 26px; }
  .pr-hero__actions { margin-top: 12px; gap: 10px; }
  /* §2 monitor (products.css:56–67): the scale of the ≤ 1279.98 block reads the container's content box (100cqw), so it
     follows the 12 px padding by itself — 390: 326 / 1064 = .3064 · 320: 256 / 1064 = .2406 */
  .pr-monitor { padding: 0 0 64px; }
  .pr-window { padding: 12px; border-radius: 14px; box-shadow: 0 20px 40px rgba(10, 23, 51, 0.18); }   /* the review (FID-1): the shadow ends inside the 64 px padding */
  .pr-window__bar { height: 8px; margin-bottom: 10px; }
  .pr-dot { width: 8px; height: 8px; }
  /* §3 modules (products.css:144–286; :203's id rule repeated — contract e) */
  .pr-mod { padding: 56px 0 64px; }
  .pr-mod__head { gap: 12px; }
  .pr-mod__h2 { font-size: 30px; line-height: 36px; letter-spacing: -.75px; }
  .pr-mod__lead { font-size: 16px; line-height: 25px; }
  .pr-mod__card { margin-top: 32px; padding: 20px; gap: 20px; border-radius: 20px; }
  .pr-mod__tabs { gap: 6px; }
  .pr-mtab { padding: 12px 10px; }   /* the review (A11Y-3): the desktop 15 px kept (the small-text floor); the two tabs share one row from 360 up, two rows below */
  .pr-mpanel,
  #pr-panel-fee.pr-mpanel { gap: 24px; }
  .pr-mpanel__h3 { margin-top: 12px; font-size: 26px; line-height: 32px; letter-spacing: -.5px; }
  .pr-mpanel__lead { font-size: 16px; line-height: 25px; }
  .pr-mod__cta { margin-top: 24px; }
  .pr-mwidget { width: 100%; }
  .pr-mwidget--fee { padding: 20px; }
  .pr-mwidget--ix { padding: 18px; }
  /* the fee widget's rows in a 270 px (390) / 200 px (320) content box: the chip wraps to its own line at 320 (figure ~95
     + delta ~50 + chip 103 = 258 > 200), kept right by its margin-left auto; «Acquirer Merchant» takes two lines in 104 px */
  .pr-mw__figure { flex-wrap: wrap; row-gap: 6px; }
  .pr-mw__bar { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 10px; }
  .pr-mw__blabel { white-space: normal; line-height: 15px; }
  .pr-mw__row { padding: 12px 14px; }
  .pr-mw__rval { white-space: nowrap; }   /* the planner's fix round: at 320 the row's «157 K» split over two lines (B3) — the label wraps instead */
  /* §4 capabilities (products.css:292–325; scoped — .pr-cap-card is in the popups too) */
  .pr-caps { padding: 56px 0; }
  .pr-caps__head { margin-bottom: 36px; gap: 12px; }
  .pr-caps__h2 { font-size: 30px; line-height: 36px; letter-spacing: -.75px; }
  .pr-caps__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pr-caps__grid .pr-cap-card { padding: 24px 24px 32px; }
  .pr-caps__grid .pr-cap-card__title { margin-top: 16px; font-size: 20px; line-height: 27px; }
  /* §5 how it works (products.css:338–385) */
  .pr-hiw { padding: 56px 0; }
  .pr-hiw__head { margin-bottom: 36px; gap: 16px; }
  .pr-hiw__h2 { margin-top: 12px; font-size: 30px; line-height: 36px; letter-spacing: -.75px; }
  .pr-hiw__lead { font-size: 16px; line-height: 25px; }
  .pr-hiw__strip { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pr-hiw-card { padding: 24px 22px; }
  .pr-hiw-card__title { font-size: 20px; line-height: 27px; }
  /* §8 FAQ (products.css:390–423) */
  .pr-faq { padding: 56px 0; }
  .pr-faq__inner { gap: 32px; }
  .pr-faq__h2 { font-size: 30px; line-height: 36px; letter-spacing: -.75px; }
  .pr-faq__q { gap: 16px; padding: 18px 0; }
  .pr-faq__qt { font-size: 17px; line-height: 23px; }
  .pr-faq__a-inner p { padding-bottom: 20px; }   /* the review (A11Y-4): the answers keep the desktop 16 / 26 (body copy) */

  /* ---------- Popups · the .pr-modal rules of css/products.css ---------- */
  /* Phase 2 (products): the SHEET (A-13) — full width from 24 px under the top edge to the bottom edge, the close button
     pinned by CSS (the ≤ 1023.98 block), the phone type scale inside */
  /* both: the ≤ 1279.98 pair sets the padding-block longhand */
  .pr-modal__scroll { padding: 24px 0 0; padding-block: 24px 0; }
  /* min-height: 100 % of the scroller's content box (the viewport − 24) — the sheet reaches the bottom edge even when its
     content is shorter; the 24 px strip above it shows the blurred page */
  .pr-modal__card,
  .pr-modal--narrow .pr-modal__card { max-width: none; min-height: 100%; border-radius: 16px 16px 0 0; }
  .pr-modal__close { width: 44px; height: 44px; margin: 10px 10px 0 auto; }   /* the 20 px icon stays centred by the grid */
  .pr-modal__inner { padding: 8px 20px 40px; }   /* beats products.css:482's (max-width: 640px) rule by order */
  .pr-fmp__h2 { font-size: 28px; line-height: 34px; letter-spacing: -.7px; }
  .pr-fmp__lead { font-size: 16px; line-height: 25px; }
  .pr-fmp__checks,
  #pr-modal-fee .pr-fmp__checks,
  .pr-modal--narrow .pr-fmp__checks { margin-top: 20px; gap: 10px; }
  .pr-fmp__mocks { margin-top: 32px; gap: 16px; }
  .pr-fmp__caps,
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__caps { margin-top: 32px; gap: 12px; }
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__caps .pr-cap-card { padding: 24px; }
  .pr-fmp__cta,
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__cta { margin-top: 44px; }
  /* products.css:728's id rule (its letter-spacing) repeated — contract e */
  .pr-fmp__cta-h2,
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__cta-h2 { font-size: 28px; line-height: 34px; letter-spacing: -.7px; text-wrap: balance; }   /* balance (the review, FID-3): «Fee Manager Suite» / «Interchange Hub» no longer split across the lines; not crop-matched at this tier */
  .pr-fmp__caps .pr-cap-card__title { font-size: 20px; line-height: 27px; }   /* the review (FID-6): the page's phone scale for the cards inside the sheet */
  .pr-fmp__cta-lead,
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__cta-lead { margin-top: 14px; font-size: 16px; line-height: 25px; }
  .pr-fmp__cta .pr-btn,
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__cta .pr-btn { margin-top: 20px; }
  .pr-fmp__steps { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }   /* solutions (gated by its unit): one column; solutions.css:801's 40 px → the sheet's 32 px rhythm */
  /* Phase 2 (solutions): the five .pr-modal--narrow popups at the sheet's paddings + rhythm, the sheet scale for the two titles
     and the lead (the other type sizes = the ≤ 1023.98 block) */
  .pr-modal--narrow .pr-modal__inner { padding-top: 8px; }
  #sol-modal-opex .pr-modal__inner,
  #sol-modal-scheme .pr-modal__inner,
  #sol-modal-interchange .pr-modal__inner,
  #sol-modal-interchange-acq .pr-modal__inner { padding-bottom: 40px; }
  .pr-modal--narrow .pr-fmp__h2 { font-size: 28px; line-height: 34px; letter-spacing: -.7px; }   /* solutions.css:463 (0,2,0) beat the sheet's .pr-fmp__h2 above */
  .pr-modal--narrow .pr-fmp__lead { font-size: 16px; line-height: 25px; letter-spacing: -.32px; }   /* :464 */
  .pr-modal--narrow .pr-fmp__cta-h2 { font-size: 28px; line-height: 34px; letter-spacing: -.7px; }   /* :480 beat the sheet's 28 / 34 above; the 441 / 506 caps (:520 / :521 / :535) are wider than the column */
  /* the cap title takes the sheet's 20 / 27 above (.pr-fmp__caps .pr-cap-card__title, (0,2,0) over :504 by order) */
  .pr-modal--narrow .pr-fmp__caps .pr-cap-card { padding: 20px 20px 24px; }   /* :501 (0,3,0) */
  .pr-fmp__step { padding: 18px 20px 22px; }   /* :803 */
  .pr-fmp__glance-cell { padding: 16px 20px; }   /* :756 */
  .pr-fmp__rewards-num { flex-basis: 84px; font-size: 36px; line-height: 36px; }   /* :782 */
  .pr-fmp__rewards-callout { padding: 14px 14px 14px 42px; }   /* :790; the icon at :791 stays at 17 / 17 */
  .pr-fmp__glance,
  .pr-fmp__how,
  #sol-modal-opex .pr-fmp__mocks,
  #sol-modal-scheme .pr-fmp__mocks,
  #sol-modal-interchange .pr-fmp__mocks,
  #sol-modal-interchange-acq .pr-fmp__mocks,
  #sol-modal-interchange .pr-fmp__rewards,
  #sol-modal-interchange .pr-fmp__caps { margin-top: 32px; }
  #sol-modal-opex .pr-fmp__cta,
  #sol-modal-scheme .pr-fmp__cta,
  #sol-modal-interchange .pr-fmp__cta { margin-top: 44px; }
  .pr-modal--narrow .sol-cta__form,
  .pr-modal--narrow .sol-cta__done { margin-top: 28px; }   /* :507's 44; #sol-modal-interchange-acq's 20 (:536, (1,1,0)) stays */

  /* ---------- Solutions · css/solutions.css ---------- */
  /* Phase 2 (solutions): the phone type scale, the cards' chrome at 20 px, the MCC labels on two rows, the methodology as a
     numbered list, the stat figures inside their columns, the closing pill stacked at ≤ 430 (the page's AND the popups') */
  .sol-hero { padding: 28px 0 44px; }
  .sol-hero__top { margin-bottom: 24px; }
  .sol-hero__h1 { font-size: 32px; line-height: 38px; letter-spacing: -.8px; }
  .sol-hero__lead { margin-top: 16px; font-size: 17px; line-height: 26px; }
  .sol-subnav__inner { height: 56px; gap: 24px; }
  .sol-subnav__link { font-size: 15px; }   /* the review (A11Y-5): the pass's 15 px small-text floor (:62's 14; the two links + the gap = 185 of 280 at 320) */
  .sol-mod { padding: 48px 0; }
  .sol-mod__inner,
  .sol-mod__inner--flip,
  .sol-mod__inner--wide-copy,
  .sol-mod__inner--wide-left { gap: 28px; }
  .sol-mod__h2 { font-size: 30px; line-height: 36px; letter-spacing: -.75px; }
  .sol-mod__lead { font-size: 16px; line-height: 25px; }
  .sol-mod__actions { margin-top: 24px; }
  /* the cards' chrome (solutions.css:123 / :177 / :148 / :154 / :200 / :244) */
  .sol-card { padding: 20px; }
  .sol-fc { padding: 20px; }
  .sol-ix { padding: 20px; }
  .sol-ix__rows { padding-right: 0; }
  .sol-mcc { padding: 20px 20px 24px; }   /* the 24 px bottom makes room for the second label row */
  .sol-cmp { padding: 16px; }
  .sol-fc__head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 16px; }
  .sol-fc__sub { white-space: normal; }   /* :183: the 230.6 px nowrap sub beside the 215 px title in a 310 px content box */
  .sol-cmp__vs { flex-wrap: wrap; }   /* :286: «vs current» + the 88.8 px delta = 152 in a 157 px scheme at 430–767 */
  /* the MCC labels on two rows: «Hotels» + «Electronics» (children 18 + 24 of .sol-mcc__chart) drop one line — at 390 the
     pitch is 55 px vs «Dept. Stores» 62.3; the chart keeps its 233 px %-geometry */
  .sol-mcc__cat:nth-child(6n) { top: calc(92.62% + 15px); }
  @media (max-width: 449.98px) {   /* 449.98, not the file's usual 430 (the review, A11Y-7): at 431–439 the seated-button row left the Spanish placeholder («¿Cuál es su correo corporativo?» 218.6 px) a 210–219 px text box; the pill below shares the edge */
    .sol-cmp__grid { grid-template-columns: minmax(0, 1fr); }   /* :254: two 153 px schemes would hold the 152 px vs-row in a 121 px box */
    .sol-cmp__scheme { min-height: 0; }   /* :256's 270 */
  }
  @media (max-width: 374.98px) {
    /* at 320 the card's content box is 240: the fixed label / value columns left the bars 23–43 px */
    .sol-leak__row { grid-template-columns: 110px minmax(0, 1fr) 46px; gap: 8px; }   /* :135 */
    .sol-fc__row { grid-template-columns: 84px minmax(0, 1fr) 56px; gap: 10px; }   /* :186 */
    .sol-ix__row { grid-template-columns: 100px minmax(0, 1fr) 46px; column-gap: 8px; }   /* :155 */
    .sol-leak__head,
    .sol-cmp__head,
    .sol-ix__head { flex-wrap: wrap; }   /* :125 / :246 / :149: the chips drop under the title when the row is short (the review FID-9: the ix head's left block showed «+3%» alone on a 4th row at 320–360) */
  }
  /* the methodology as a numbered list: the circle at the left, the name + desc at the right (a centred stack of five would
     be ≈ 880 px tall) — :327's flex column replaced */
  .sol-meth { padding: 48px 0; }
  .sol-meth__h2 { font-size: 30px; line-height: 36px; letter-spacing: -.75px; }
  .sol-meth__lead { font-size: 16px; line-height: 25px; }
  .sol-meth__steps { flex-direction: column; align-items: stretch; gap: 24px; margin-top: 36px; max-width: none; }   /* max-width none = the ≤ 1023.98 672 px cap reset (the review, FID-2) */
  .sol-meth__step { flex: none; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; text-align: left; }
  .sol-meth__num { grid-row: 1 / 3; }
  .sol-meth__name { margin-top: 12px; }   /* :339's 20 — the 23 px name's centre meets the 48 px circle's */
  .sol-meth__desc { margin-top: 6px; font-size: 15px; line-height: 22px; }   /* :344's 8 and 14 / 21 — the 15 px floor (the review, A11Y-5) */
  .sol-stats { padding: 40px 0; }
  .sol-stats__cell { padding: 16px 0; }
  .sol-stats__label { font-size: 15px; line-height: 22px; }   /* :369's 14 — the 15 px floor (the review, A11Y-5) */
  .sol-stats__big { font-size: 36px; line-height: 40px; letter-spacing: -1.44px; }   /* the 163 px columns at 390: «Hasta 15%» 161.2 */
  /* AFTER the 36 px rule on purpose (a nested query adds no specificity): the 128 px columns at 320 */
  @media (max-width: 374.98px) {
    .sol-stats__big { font-size: 28px; line-height: 32px; letter-spacing: -1.1px; }
  }
  .sol-cta { padding: 48px 0 40px; }
  .sol-cta__wave { display: none; }
  .sol-cta__inner { gap: 16px; }
  .sol-cta__h2 { font-size: 30px; line-height: 36px; letter-spacing: -.75px; }
  .sol-cta__lead { font-size: 16px; line-height: 25px; }
  /* :408 / :428's 40 — the done line replaces the pill and lands where it was; scoped to the page (the popups' pills keep
     their own margins) */
  section.sol-cta .sol-cta__form,
  section.sol-cta .sol-cta__done { margin-top: 28px; }
  /* ≤ 430: the seated 143 px button left the input 209 px for the Spanish placeholder («¿Cuál es su correo corporativo?»
     218.6) → the pill stacks, on the page AND inside the popups (the shared class; MOBILE-HANDOFF.md §6 item 32): the input
     becomes a white pill of its own, the button a full-width row below it, the focus ring moves to the input */
  @media (max-width: 449.98px) {
    .sol-cta__form { height: auto; flex-direction: column; gap: 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
    .sol-cta__input { flex: none; width: 100%; height: 56px; padding: 0 24px; background: #FFFFFF; border: 1px solid #F7F7F7; border-radius: 999px; box-shadow: 0 12px 32px rgba(10, 23, 51, .06); }
    .sol-cta__form:has(.sol-cta__input:focus-visible) { outline: none; }
    .sol-cta__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
    .sol-cta__form.is-error .sol-cta__input { border-color: #d02e2e; }
    .sol-cta__submit { position: static; width: 100%; height: 48px; justify-content: center; }
    .sol-cta__form-error { position: static; margin-top: 8px; font-size: 15px; line-height: 20px; }   /* :427's 14 — the 15 px floor in the stacked state (the review, A11Y-5) */
    /* the dark pairs: solutions.css:431–434 are (0,3,0), :511 is (0,4,0) — inside the dark popups the card IS var(--surface)
       (:452), so the field takes var(--bg) there (:511's precedent) */
    :root[data-theme="dark"] .sol-cta__form { background: transparent; border: 0; box-shadow: none; }
    :root[data-theme="dark"] .sol-cta__input { background: var(--surface); border-color: var(--border); }
    :root[data-theme="dark"] .sol-cta__form.is-error .sol-cta__input { border-color: #ff8f8f; }
    :root[data-theme="dark"] .pr-modal--narrow .sol-cta__form { background: transparent; }
    :root[data-theme="dark"] .pr-modal--narrow .sol-cta__input { background: var(--bg); }
  }

  /* ---------- Case Studies · css/case-studies.css ---------- */
  /* Phase 1: the closing band .case-cta — on the 7 blog articles + the 2 story pages too: case-studies.css:156 sizes it to
     the artwork's aspect (100vw × 440 / 1440 = 119 px at 390) with overflow hidden, which clipped its ~194 px of content
     (the heading + the e-mail pill); on a phone it takes its content's height (the wash keeps covering it, object-fit) */
  .case-cta { height: auto; padding: 64px 0 72px; }
  .case-cta .case-h2 { font-size: 30px; }
  /* ≤ 430: the pill's seated button takes 176 px of the input's padding, leaving 78–188 px for the text — the Spanish
     placeholder («¿Cuál es su correo corporativo?») needs 228.5 (the fidelity lens) → the pill stacks: the input becomes a
     white pill of its own, the button a full-width row below it; the focus ring moves to the input */
  @media (max-width: 430px) {
    .case-cta .closer__form { height: auto; flex-direction: column; gap: 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
    .case-cta .closer__input { flex: none; width: 100%; height: 56px; padding: 0 24px; background: #FFFFFF; border: 1px solid #F7F7F7; border-radius: 999px; box-shadow: 0 12px 32px rgba(10, 23, 51, .06); }
    .case-cta .closer__form:has(.closer__input:focus-visible) { outline: none; }
    .case-cta .closer__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
    .case-cta .closer__form.is-error .closer__input { border-color: #d02e2e; }
    .case-cta .closer__btn { position: static; width: 100%; justify-content: center; }
    .case-cta .closer__error { position: static; margin-top: 8px; }
  }

  /* ---------- Case-study story pages · css/case-study.css ---------- */
  /* Round 1: the phone type scale, the outcomes stacked (hairlines on top), the quote card's padding */
  .story-title { font-size: 32px; }
  .story-outcomes__list { grid-template-columns: minmax(0, 1fr); }
  .story-outcome { padding: 16px 0; }
  .story-outcome + .story-outcome { border-left: 0; border-top: 1px solid var(--border); }
  .story-quote__card { padding: 32px 24px 36px; }
  .story-quote__text { font-size: 24px; }

  /* ---------- Contact + the 404 card · css/contact.css ---------- */
  /* Round 1: the page's one column fits the cards to the screen (their desktop widths stay the cap); the name pair
     stacks at ≤ 430; and the 16 px controls (Round 0) — main.ct serves the two contact pages AND 404.html */
  .ct { grid-template-columns: minmax(0, 1fr); padding-block: 91px 40px; }   /* 91 = the fixed 75 px bar + 16: the phone cards (674 px tall with the stacked name pair) slid under the bar when centred in 100svh (the fidelity lens: card top 63 at 360 × 800) */
  @media (max-width: 430px) {
    .ct-row { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }   /* 26 = the form's field-group rhythm */
  }
  /* the flagged deviation from the 13 px design (contact.css:173 / :195 / :234 — the last inside
     `@supports (appearance: base-select)`; equal specificity, this file loads later, so no wrapper is needed):
     iOS Safari zooms the page on focus of a control under 16 px; Round 1b */
  .ct-input,
  .ct-select,
  .ct-select option { font-size: 16px; }

  /* ---------- Blog · css/blog.css ---------- */
  /* filled in Round 7 — .blog-search 85vh at :213 / :222 handled there */

  /* ---------- Blog articles · css/blog-post.css ---------- */
  /* Round 1: the phone title size */
  .post-title { font-size: 32px; }

  /* ---------- Legal · css/legal.css ---------- */
  /* Round 1: the phone spacing + type scale; the cookie tables scroll inside their rounded frame */
  .legal { padding-block: 48px 80px; }
  .legal__title { max-width: none; font-size: 36px; }
  .legal__body { font-size: 16px; }
  .legal__tablewrap { overflow-x: auto; }
  .legal__table { min-width: 640px; }

}

/* ========== TOUCH — the fourth block, LAST on purpose (contract d): a coarse pointer at any width below 1280 ========== */
@media (max-width: 1279.98px) and (hover: none), (max-width: 1279.98px) and (pointer: coarse) {

  /* filled from Round 1 on: hover-only reveals get their tap equivalent, hover lifts / gloss / sheens off, hit areas */

  /* ---------- §4 · Navbar (+ nav dropdowns) ---------- */
  /* Phase 1: the burger's hover tint stays stuck after a tap on touch — only the open state keeps it */
  .navbar__burger:hover:not([aria-expanded="true"]) { background: transparent; }

  /* ---------- §5 · Buttons ---------- */
  /* Round 1: no hover lift on touch — a tap leaves :hover stuck */
  .btn--primary:hover,
  .btn--ghost:hover { transform: none; box-shadow: none; }

  /* ---------- §6 · Hero (visual layers → "CARD FACE", dash panel) ---------- */
  /* Phase 2: no hover shadow / gloss on the card (= the base, styles.css:642–644), no lift on the pill's button (its base
     has no shadow, :565–568) */
  .hero__visual:hover .hlayer--card { filter: drop-shadow(0 22px 30px rgba(10, 23, 51, .26)); }
  .hero__visual:hover .card-gloss { opacity: 0; animation: none; }
  .hero__btn:hover { transform: none; box-shadow: none; }
  .hero__btn:hover .icon { transform: none; }

  /* ---------- §7 · Content — stat band + logo marquee ("STAT BAND" glass) ---------- */
  /* Phase 2: a tap would stick the marquee's hover pause (styles.css:879) */
  .marquee:hover .marquee__track { animation-play-state: running; }

  /* ---------- §8 · Platform (monitor mockup → "MONITOR SCREEN DASHBOARD") ---------- */
  /* Phase 2: no lift on «Book a demo» (its base has no shadow, styles.css:973–987) */
  .cta-demo:hover { transform: none; box-shadow: none; }
  .cta-demo:hover .icon { transform: none; }

  /* ---------- §9 · Services (4 product cards) ---------- */
  /* Phase 2: no card lift; the hover shadow back to the base (styles.css:1422, dark :1452) */
  .pcard:hover { transform: none; box-shadow: 0 12px 30px rgba(16, 24, 40, .04); }
  :root[data-theme="dark"] .pcard:hover { box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }

  /* ---------- §10 · Tools (switcher → "DASHBOARD GLIDE", "INTERCHANGE DASHBOARD") ---------- */
  /* Phase 2: the collapsed option's title keeps its grey (styles.css:1619, dark :1627); no arrow nudge on the CTA */
  .topt:not(.is-active) .topt__title:hover { color: #7f7f7f; }
  :root[data-theme="dark"] .topt:not(.is-active) .topt__title:hover { color: var(--muted, #79839a); }
  .topt__cta:hover .icon { transform: none; }

  /* ---------- §13 · Testimonials (slider) ---------- */
  /* Phase 2: no arrow lift; the dot's hover tint back to the inactive one (the ≤ 1023.98 ::before dots) */
  .tm__navbtn:hover:not(:disabled) { transform: none; }
  .tm__dot:hover:not(.is-active)::before { background: rgba(28, 33, 38, .5); }
  :root[data-theme="dark"] .tm__dot:hover:not(.is-active)::before { background: #66779e; }

  /* ---------- §14 · Closing CTA (email capture) ---------- */
  /* Phase 2: no lift on the pill's button (also the .closer__btn of the other pages' closing bands) */
  .closer__btn:hover { transform: none; box-shadow: none; }
  .closer__btn:hover .icon { transform: none; }

  /* ---------- §15 · Insights (blog cards) ---------- */
  /* Phase 2: no thumbnail zoom, no lift on «See more» */
  .insights__card:hover .insights__img { transform: none; }
  .insights__cta:hover { transform: none; box-shadow: none; }

  /* ---------- About · css/about.css ---------- */
  /* Phase 2 (about): no hover colour / lift on a tap (it leaves :hover stuck) */
  .au-more:hover { color: var(--text-strong); }   /* about.css:177 */
  .au-more:hover svg { transform: none; }   /* :179 */
  .au-meet__btn:hover,
  .al-band__btn:hover { transform: none; box-shadow: none; }   /* :440 / :615 */
  .au-meet__btn:hover svg,
  .al-band__btn:hover svg { transform: none; }   /* :442 / :618 */
  /* the closing pill's .closer__btn needs nothing here: the §14 rules above (unscoped, (0,2,0) = styles.css:2266) reach it */

  /* ---------- Products · css/products.css ---------- */
  /* Phase 2 (products): no lift / tint on a tap (it leaves :hover stuck); the featured how-it-works cube stays card 1 */
  /* products.css:46–50 (+ dark :738); .pr-btn is in the popups too — the same reset serves them */
  .pr-btn--primary:hover { transform: none; box-shadow: none; }
  .pr-btn--primary:hover svg { transform: none; }
  .pr-btn--ghost:hover { border-color: rgba(10, 23, 51, 0.15); }
  :root[data-theme="dark"] .pr-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.2); }
  /* products.css:196 (+ dark :742) */
  .pr-mtab:not(.is-active):hover { background: transparent; }
  :root[data-theme="dark"] .pr-mtab:not(.is-active):hover { background: transparent; }
  /* products.css:244–246 */
  .pr-mod__cta:hover { transform: none; box-shadow: none; }
  .pr-mod__cta:hover .icon { transform: none; }
  /* products.css:319 (the base 311–316 has no shadow); dark :750 is (0,4,0) — repeated (contract e) */
  .pr-caps__grid .pr-cap-card:hover { transform: none; box-shadow: none; border-color: var(--border); }
  :root[data-theme="dark"] .pr-caps__grid .pr-cap-card:hover { box-shadow: none; border-color: var(--border); }
  /* products.css:368–381: a tap transfers nothing — the first selector (0,4,0) beats the generic hover (0,3,0), so a
     tapped card 1 keeps its highlight */
  .pr-hiw__strip .pr-hiw-card:hover { background: transparent; border-color: rgba(255, 255, 255, 0.12); z-index: 0; }
  .pr-hiw__strip .pr-hiw-card:first-child:hover,
  .pr-hiw__strip:hover .pr-hiw-card:first-child:not(:hover) {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.22);
    z-index: 1;
  }
  /* the planner's fix round: at 1024–1279 the cubes are a flex row with the ≤ 1279.98 hover floor (242) — a tap on cube 2–4
     still grew it (B3 measured 217 → 242); on touch the height stays with card 1 too. Nested so the ≤ 1023.98 grid (min-height 0)
     is untouched */
  @media (min-width: 1024px) {
    .pr-hiw__strip .pr-hiw-card:hover { min-height: 216px; }
    .pr-hiw__strip .pr-hiw-card:first-child:hover,
    .pr-hiw__strip:hover .pr-hiw-card:first-child:not(:hover) { min-height: 242px; }
  }

  /* ---------- Popups · the .pr-modal rules of css/products.css ---------- */
  /* Phase 2 (products): no spin on the close button, no lift on the cards (solutions.css:502 / :510 ungated here) */
  .pr-modal__close:hover { transform: none; }   /* products.css:478 */
  .pr-fmp__caps .pr-cap-card:hover { transform: none; box-shadow: none; border-color: var(--border); }
  /* products.css:750's dark hover is (0,4,0) — repeated (contract e) */
  :root[data-theme="dark"] .pr-fmp__caps .pr-cap-card:hover { box-shadow: none; border-color: var(--border); }
  :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__caps .pr-cap-card:hover { border-color: #EDEDED; }
  :root[data-theme="dark"] :is(#pr-modal-fee, #pr-modal-ix) .pr-fmp__caps .pr-cap-card:hover { border-color: var(--border); }
  .pr-modal--narrow .pr-fmp__caps .pr-cap-card:hover { border-color: #EDEDED; }
  :root[data-theme="dark"] .pr-modal--narrow .pr-fmp__caps .pr-cap-card:hover { border-color: var(--border); }
  /* the review (ROB-3): a touch tablet at 1024–1279 (an iPad in landscape) gets the desktop card, whose absolute close button
     scrolls away with it (y −442 after a 500 px scroll, no keyboard for Escape) — the ≤ 1023.98 sticky recipe again, the
     negative bottom margin keeping the two-column head where products.css:481 puts it */
  @media (min-width: 1024px) {
    .pr-modal__card { overflow: clip; }
    .pr-modal__close { position: sticky; top: 20px; right: auto; margin: 20px 20px -68px auto; }
  }

  /* ---------- Solutions · css/solutions.css ---------- */
  /* Phase 2 (solutions): no lift on a tap (it leaves :hover stuck); the tapped inactive sub-nav link keeps its .75 */
  .sol-btn--dark:hover { transform: none; box-shadow: none; }   /* solutions.css:115 */
  .sol-btn--dark:hover svg { transform: none; }   /* :116 */
  .sol-cta__submit:hover { transform: none; box-shadow: none; }   /* :421 */
  .sol-cta__submit:hover .icon { transform: none; }   /* :423 */
  .sol-subnav__link:hover { opacity: .75; }   /* :66 */
  .sol-subnav__link.is-active:hover { opacity: 1; }   /* (0,3,0) — the active link keeps :67's 1 */

  /* ---------- Contact + the 404 card · css/contact.css ---------- */
  /* the 16 px anti-zoom rule again for PHONES IN LANDSCAPE (844–956 px wide — outside the ≤ 767.98 tier; the tool's
     phone-land-844 / -932 ids): a coarse pointer AND a short viewport — the same flagged deviation as the phone tier's */
  @media (max-height: 500px) {
    .ct-input,
    .ct-select,
    .ct-select option { font-size: 16px; }
  }

}