/* ═══════════════════════════════════════════════════════════════════════════ mobile-2027.css — the M2 mobile refinement layer ═══════════════════════════════════════════════════════════════════════════ The site grew as a stack of layers (styles.css → … → nav-2027.css), each one authored desktop-first and each one adding its own breakpoints. That worked for layout, but it left the phone with the residue: components whose last collapse step was never written, touch targets sized for a mouse, scrollers that chain into the page behind them, and 15px form fields that make iOS zoom the whole viewport and never zoom back. This file is the sweep. It loads LAST — after nav-2027.css — so an equal specificity selector here wins on source order alone, which is why almost every rule below can stay at the same weight as the one it corrects instead of escalating to !important. Rules of the house are unchanged: flat surfaces (no gradients), locked palette tokens only, DM Serif display type untouched, and the Round-6 corner-bracket eyebrow standard left alone. Nothing here changes a desktop layout — every rule is inside a max-width query, a pointer/hover query, or corrects something that was broken at every width. §1 Viewport & safe area §6 H27 theme components §2 Header & mobile drawer §7 M27 product surfaces §3 Footer §8 Forms & tables §4 Cookie banner §9 Touch targets §5 Chat widget ═════════════════════════════════════════════════════════════════════════ */ /* ══ §1 · VIEWPORT & SAFE AREA ═══════════════════════════════════════════ */ /* The page is viewport-fit=cover, so on a notched phone the header must own the status-bar strip. It was being handled with padding-top on .header — but .header is a fixed-height box under border-box, so padding SHRANK the content instead of growing the bar, crushing the logo into the burger. Folding the inset into the token instead keeps every consumer in sync: the spacer below the header, .mobile-menu's top offset, and scroll-padding-top for anchor links all read the same value. env() is 0 everywhere it does not apply, so desktop is untouched. */ :root { --header-height: calc(72px + env(safe-area-inset-top, 0px)); } .header { padding-top: env(safe-area-inset-top, 0px); } /* ══ §2 · HEADER & MOBILE DRAWER ═════════════════════════════════════════ */ /* The drawer was designed twice. The 2026 pass gave it a translateX slide with a pointer-events handoff; the original 2025 rule left `display:none` behind. display and transform change in the same frame, so the transition never got a chance to run in either direction and the panel hard-cut in and out. Swapping the display toggle for visibility restores the slide and makes the pointer-events choreography that was already written actually mean something. */ .mobile-menu { display: block; visibility: hidden; } .mobile-menu.active { display: block; visibility: visible; } /* overflow:hidden on does not hold on iOS, and a scroller with no overscroll-behavior chains into the page the moment it hits either end — so the drawer scrolls, reaches its last link, and keeps going into the article behind it. Every other overlay in the codebase contains its scroll; this one was the exception. */ .mobile-menu { overscroll-behavior: contain; } /* The drawer sits at bottom:0 on a cover-fit viewport. Its 40px bottom pad is static, so the final CTA ("Request a demo" / "Log in") landed inside the home indicator's gesture strip, where a tap competes with the OS swipe. The side insets matter too — a notched phone in landscape claims real width. */ .mobile-menu { padding-left: max(var(--space-5), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-5), env(safe-area-inset-right, 0px)); padding-bottom: calc(var(--space-10) + env(safe-area-inset-bottom, 0px)); } /* "Product / Solutions / Resources / Company" — the top level of the phone's only navigation — were wearing the 10px uppercase eyebrow token, which made them SMALLER than the child links nested under them. The hierarchy read upside down and the labels sat under the readable floor. The eyebrow treatment belongs on .mobile-menu__sublabel (the column headings inside an open section), and it keeps it. */ .mobile-menu__accordion .mobile-menu__label { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--color-text); } /* …and the row that carries them was a ~36px target on the four most-tapped controls in the menu. */ .mobile-menu__accordion { min-height: 48px; padding-top: var(--space-2); padding-bottom: var(--space-2); } /* The 44px tap-target safety net in responsive-refinement.css lists `.hamburger` — a class that appears in no template (the markup is class="header__toggle" id="hamburger"), so the rule has always been inert. This is the burger, at the size that rule intended. */ .header__toggle { width: 44px; height: 44px; } /* Between 769 and 1024px the header was logo + burger across a thousand pixels of empty rail, with the primary CTA reachable only by opening the drawer. There is room for it long before that. The !important matches the equally !important rule it corrects. */ @media (min-width: 641px) and (max-width: 1024px) { .header__actions { display: flex !important; } /* the ghost "Log in" link is the one that can go — the demo CTA is the point */ .header__actions .nav-link--ghost { display: none; } } /* The mega-menu scrim is a fixed element inside

, and .header carries backdrop-filter — which makes it the containing block for fixed descendants. inset:0 therefore resolved against the 72px header box, so `top:72px` plus `bottom:0` computed to zero height: the scrim never painted and its click-to-close handler could never fire. On a touch tablet above 1024px (where the flyout is still live and there is no pointerleave) that left the open menu with no way out but the trigger itself. Pinning the scrim to the real viewport costs nothing on desktop and gives the tap-outside back. */ .n27-scrim { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; height: auto; } @supports (height: 100dvh) { .n27-scrim { height: calc(100dvh - var(--header-height)); } } /* ══ §3 · FOOTER ═════════════════════════════════════════════════════════ */ /* The footer body goes single-column at 1100px but the link nav stayed at four tracks until the 720px accordion took over. In between — 768px iPad portrait included — each track is ~153px, and "BILLING & INSURANCE" at 11.5px/700 with .14em tracking needs more than that beside its icon, so the heading wrapped under itself and the caret's margin-left:auto collapsed. */ @media (max-width: 1100px) and (min-width: 721px) { .f27-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Stacked link lists at ~39.75px with gap:0 means adjacent links touch — eight of them in the Platform column, no separation, all just under target size. */ @media (max-width: 720px) { .f27-col__list { gap: 2px; } .f27-col__list a { padding-block: 12px; } } /* Six legal links ("Privacy Policy", "Sitemap", "Terms of Use", …) at ~22px tall separated by 2px of horizontal gap. The ≤480 block already tried to fix this but restated the base padding verbatim, so it was a no-op. The "/" separators are flex children: once the row wraps they strand a leading slash at the start of the new line, so they leave on mobile too. */ @media (max-width: 720px) { .f27-legal { gap: 4px 6px; } .f27-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; } .f27-legal span[aria-hidden="true"] { display: none; } } /* ══ §4 · COOKIE BANNER ══════════════════════════════════════════════════ Deliberately empty. The banner ships its own