/* =====================================================================
   Hubtoll — MOBILE APP LAYER
   ---------------------------------------------------------------------
   Loaded AFTER hubtoll.css and promo-popup.css. Every rule in this file
   lives inside a max-width media query, so the desktop site is provably
   untouched: at >960px this stylesheet contributes nothing.

   Goal: a phone visitor should feel they opened an APP, not a web page.
   That comes from five things, in order of impact:
     1. an app shell — a compact top bar that gets out of the way, and a
        bottom tab bar that keeps the real destinations under the thumb;
     2. content economy — horizontal snap rails instead of endless stacks;
     3. touch ergonomics — nothing under 44px, pressed states on everything;
     4. real form controls — 16px minimum (below that iOS zooms the page),
        48px+ targets, the right keyboard for every field;
     5. motion that matches the platform — sheets that spring, not fade.

   Breakpoints
     <= 960px  app shell: compact bar, menu sheet, mobile type scale,
               form system, docs cards. (Matches the width at which
               hubtoll.css already hides the desktop nav.)
     <= 780px  + bottom tab bar, content rails, full phone treatment.
     <= 420px  small-phone tightening.

   MAP — sections are in cascade order, so a later one wins at equal
   specificity. Where a component is governed in two places the heading says
   so; everything else lives in exactly one section.
      0 tokens + foundations      20 page-level <style> overrides
      1 top app bar               21 doc-table contents
      2 bottom tab bar            22 hero visual (the app mock)
      3 menu sheet                23 contents FAB
      4 type + spacing            24 touch, not hover (note only)
      5 buttons + press           25 plan badge
      6 content rails             26 anchor offsets
      7 hero layout               27 promo sheet, part 2
      8 FORM CONTROLS             28 motion for a thumb
      9 promo popup -> sheet      29 no desktop-window metaphor
     10 cookie banner box         30 the menu button
     11 documentation + legal     31 the pill bar
     12 developers                32 contact actions
     13 product pages             33 cookie banner colours
     14 contact/about/404/footer  34 inline links -> controls
     15 FAQ                       35 dvh
     16 reduced motion            36 overscroll
     17 print                     37 small phone / large text
     18 touch targets             38 section folding (.mx-acc)
     19 readability floor
   ===================================================================== */

/* =====================================================================
   0. TOKENS + FOUNDATIONS
   ===================================================================== */
@media (max-width: 960px) {
  :root {
    --app-bar-h: 56px;
    --tab-bar-h: 0px;                    /* becomes real at <=780px */
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --gutter: 20px;

    /* one spring for every sheet/drawer in the app — iOS-like, no overshoot */
    --sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --press-ease: cubic-bezier(0.2, 0, 0, 1);

    --card-radius: 18px;
    --control-h: 52px;
    --control-radius: 14px;

    /* One stacking scale, in one place. Before this the layers were 40/90/95/
       100/120/200/2147483000 across three files and the cookie banner (the
       biggest number) painted over the lead modal's own submit button. */
    --z-subnav: 40;
    --z-appbar: 50;
    --z-tabbar: 60;
    --z-fab: 65;
    --z-sheet: 70;
    --z-skip: 95;
    --z-consent: 90;
  }

  .subnav { z-index: var(--z-subnav); }
  .site-header { z-index: var(--z-appbar); }
  .toc-fab { z-index: var(--z-fab); }
  .mobile-nav,
  .toc-sheet,
  .promo-popup__overlay { z-index: var(--z-sheet); }
  .ht-consent { z-index: var(--z-consent) !important; }
  .skip-link { z-index: var(--z-skip); }

  /* A tap on any control must feel deliberate, not like a link flashing grey.
     We kill the UA highlight and give real pressed states below. */
  a, button, input, select, textarea, label, summary, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Belt-and-braces against sideways scroll. `clip` (not `hidden`) does not
     create a scroll container, so `position: sticky` inside still works —
     hubtoll.css already sets overflow-x:hidden on body; this hardens <html>
     without breaking the sticky sub-nav. */
  html {
    overflow-x: clip;
  }
  body {
    overflow-x: clip;
  }

  /* The single biggest structural cause of the sideways scroll on this site:
     a grid/flex ITEM defaults to min-width:auto (its min-content), so one wide
     child — a 480px doc table, a <pre> — pushes the whole document wider than
     the phone and every paragraph gets clipped at the right edge. */
  .legal,
  .legal__body,
  .legal__toc,
  .footer__grid,
  .footer__brand,
  .footer__col,
  .contact-grid,
  .contact-grid > *,
  .split,
  .split > *,
  .feature-row,
  .feature-row__copy,
  .feature-row__media,
  .hero__grid,
  .hero__copy,
  .hero__visual,
  .dev-layout,
  .dev-main,
  .dev-nav,
  .pg__stepbody,
  .docs-next__card,
  .docs-next__card > span,
  .docs-hub,
  .docs-hub__group,
  .section,
  .section > .container,
  .cta__inner,
  .plan,
  .suite-card,
  .module-card,
  .value-card,
  .step,
  .platform-item {
    min-width: 0;
  }

  /* Long unbroken strings (API ids, emails, urls) must wrap, not widen. */
  .legal__body,
  .dev-main,
  .docs-next__card,
  .footer__col a {
    overflow-wrap: anywhere;
  }

  /* Edge gutters follow the notch on a landscape phone. */
  .container {
    padding-inline: calc(var(--gutter) + var(--safe-l)) calc(var(--gutter) + var(--safe-r));
  }

  /* Anchors must land below the fixed bar, not under it. */
  html {
    scroll-padding-top: calc(var(--app-bar-h) + var(--safe-t) + 12px);
  }

  /* The skip link was parked at left:-999px, which makes the document wider
     than the viewport before anything else does. Hide it the modern way. */
  .skip-link {
    left: 0;
    clip-path: inset(50%);
  }
  .skip-link:focus {
    clip-path: none;
  }
}

/* =====================================================================
   1. TOP APP BAR
   A 56px bar that hides when you scroll down and comes back the moment you
   scroll up — the single most recognisable "this is an app" behaviour, and
   it hands ~7% of a phone screen back to the content.
   ===================================================================== */
@media (max-width: 960px) {
  .site-header {
    padding-top: var(--safe-t);
    transition: transform 0.28s var(--sheet-ease), background 0.25s var(--ease),
      box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
    will-change: transform;
  }
  .site-header__inner {
    height: var(--app-bar-h);
    gap: 8px;
    padding-inline: calc(var(--gutter) + var(--safe-l)) calc(12px + var(--safe-r));
  }

  /* hidden by mobile.js on scroll-down; never while the menu is open */
  body.bar-hidden .site-header {
    transform: translateY(-100%);
  }
  body.nav-open .site-header {
    transform: none;
  }

  .brand img {
    height: 24px;
  }

  /* The CTA pill used to sit jammed against the wordmark with 12px of air.
     Below 780px the primary action lives in the bottom tab bar instead, so
     the bar becomes just: brand ......... menu. */
  .nav-spacer {
    display: block;
    flex: 1;
  }
  .nav-cta {
    gap: 8px;
  }
  .nav-cta .btn {
    padding: 9px 16px;
    font-size: 0.88rem;
    box-shadow: none;
  }

  .hamburger {
    display: flex;
    margin-left: 0;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
  .hamburger span {
    width: 20px;
  }
  /* The bar is transparent over the dark hero, so the icon has to invert too —
     but ONLY on a page that actually opens on a dark hero. On /404.html (white)
     white bars on a white page left no visible way to open the menu. */
  body:not(.no-hero) .site-header:not(.is-scrolled) .hamburger span {
    background: #fff;
  }
  body.no-hero .site-header .hamburger span {
    background: var(--text-strong);
  }
  body.nav-open .hamburger span {
    background: var(--text-strong);
  }

  .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 0 rgba(16, 24, 64, 0.08);
  }

  /* Heroes sat under a 76px bar with 150px of padding. Reclaim it. */
  .hero {
    padding: calc(var(--app-bar-h) + var(--safe-t) + 34px) 0 52px;
  }
  .page-hero {
    padding: calc(var(--app-bar-h) + var(--safe-t) + 30px) 0 40px;
  }
  .dev-hero {
    padding: calc(var(--app-bar-h) + var(--safe-t) + 30px) 0 36px;
  }
  .subnav {
    top: calc(var(--app-bar-h) + var(--safe-t));
  }
  .notfound {
    padding-top: calc(var(--app-bar-h) + var(--safe-t) + 40px);
  }
}

@media (max-width: 780px) {
  /* Primary action moves to the tab bar; the bar carries brand + menu only. */
  .nav-cta {
    display: none;
  }}

/* =====================================================================
   2. BOTTOM TAB BAR
   Five thumb-reachable targets: the four destinations that matter plus the
   conversion action, permanently visible. This is what stops the site
   reading as a page you scroll and start reading as an app you navigate.
   ===================================================================== */
@media (max-width: 780px) {
  :root {
    --tab-bar-h: 60px;
  }

  body {
    /* content must never end underneath the bar */
    padding-bottom: calc(var(--tab-bar-h) + var(--safe-b));
  }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-tabbar);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    gap: 2px;
    height: calc(var(--tab-bar-h) + var(--safe-b));
    padding: 6px calc(6px + var(--safe-l)) calc(6px + var(--safe-b)) calc(6px + var(--safe-r));
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    backdrop-filter: saturate(1.6) blur(18px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(16, 24, 64, 0.07);
    transition: transform 0.28s var(--sheet-ease);
  }
  /* slides away with the keyboard / when a sheet owns the screen */
  body.nav-open .tabbar,
  body.sheet-open .tabbar,
  body.kb-open .tabbar {
    transform: translateY(110%);
  }

  .tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 12px;
    min-width: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    transition: color 0.16s var(--press-ease), background 0.16s var(--press-ease),
      transform 0.14s var(--press-ease);
  }
  .tabbar__item .material-icons-round {
    font-size: 1.42rem;
    line-height: 1;
  }
  .tabbar__item span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .tabbar__item:active {
    transform: scale(0.92);
    background: var(--bg-soft);
  }
  .tabbar__item.is-active {
    color: var(--accent-600);
  }
  /* The live tab is marked by a tinted pill BEHIND its icon — never a dot near
     the label, which overlaps the text at this size. */
  .tabbar__item {
    position: relative;
  }
  .tabbar__item .material-icons-round {
    position: relative;
    z-index: 1;
  }
  .tabbar__item.is-active::before {
    content: "";
    position: absolute;
    top: 5px;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: rgba(249, 126, 48, 0.14);
  }
  .tabbar__item--cta.is-active::before {
    display: none;
  }

  /* The conversion tab reads as an action, not a destination. */
  .tabbar__item--cta {
    background: var(--grad-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(238, 106, 22, 0.34);
  }
  .tabbar__item--cta:active {
    background: var(--accent-700);
    transform: scale(0.94);
  }
  .tabbar__item--cta .material-icons-round {
    font-size: 1.3rem;
  }

  /* dark-surface pages keep the bar light — it is chrome, not content */
}
@media (min-width: 781px) {
  .tabbar {
    display: none;
  }}

/* =====================================================================
   3. MENU SHEET
   A bottom sheet, not a side drawer: it comes from the thumb, it can be
   flicked away, and it is the one place every destination lives.
   ===================================================================== */
@media (max-width: 960px) {
  .mobile-nav {
    background: rgba(10, 15, 41, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .mobile-nav__panel {
    position: absolute;
    inset: auto 0 0 0;
    top: auto;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    padding: 0;
    transform: translateY(100%);
    transition: transform 0.36s var(--sheet-ease);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    box-shadow: 0 -18px 50px rgba(10, 15, 41, 0.3);
    overscroll-behavior: contain;
  }
  body.nav-open .mobile-nav__panel {
    transform: translateY(0);
  }

  .sheet__grab {
    flex: 0 0 auto;
    padding: 10px 0 4px;
    display: grid;
    place-items: center;
    touch-action: none;
  }
  .sheet__grab i {
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
  }

  .sheet__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 16px 10px 20px;
    border-bottom: 1px solid var(--line);
  }
  .sheet__title {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-strong);
  }
  .sheet__close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-soft);
    color: var(--text-strong);
  }
  .sheet__close:active {
    transform: scale(0.9);
    background: var(--bg-soft-2);
  }

  .sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 12px 14px;
  }

  .mobile-nav__label {
    padding: 16px 10px 6px;
    font-size: 0.7rem;
  }

  .mobile-nav__link {
    min-height: 52px;
    padding: 12px 12px;
    border-bottom: none;
    border-radius: 14px;
    gap: 14px;
    font-size: 0.98rem;
    transition: background 0.15s var(--press-ease), transform 0.12s var(--press-ease);
  }
  .mobile-nav__link:active {
    background: var(--bg-soft);
    transform: scale(0.985);
  }
  .mobile-nav__link .material-icons-round {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bg-soft-2);
    color: var(--navy-600);
    font-size: 1.22rem;
  }
  a.mobile-nav__link::after {
    content: "chevron_right";
    margin-left: auto;
    color: var(--line-strong);
    /* the icon font only resolves a ligature with all of this set */
    font-family: "Material Icons Round";
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
  }
  .mobile-nav__link .badge + ::after,
  .mobile-nav__link .badge {
    margin-left: auto;
  }
  a.mobile-nav__link:has(.badge)::after {
    margin-left: 6px;
  }

  /* collapsible group — keeps a 10-item module list from burying the sheet */
  .sheet__group {
    border-radius: 14px;
  }
  .sheet__group > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 12px;
    border-radius: 14px;
    font-weight: 600;
    color: var(--text-strong);
    cursor: pointer;
  }
  .sheet__group > summary::-webkit-details-marker {
    display: none;
  }
  .sheet__group > summary:active {
    background: var(--bg-soft);
  }
  .sheet__group > summary .material-icons-round:first-child {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bg-soft-2);
    color: var(--navy-600);
    font-size: 1.22rem;
  }
  .sheet__group > summary .sheet__chev {
    margin-left: auto;
    color: var(--line-strong);
    transition: transform 0.22s var(--sheet-ease);
  }
  .sheet__group[open] > summary .sheet__chev {
    transform: rotate(180deg);
  }
  .sheet__group[open] > summary {
    color: var(--accent-700);
  }
  .sheet__sub {
    padding: 2px 0 8px 12px;
    display: grid;
    gap: 2px;
  }
  .sheet__sub .mobile-nav__link {
    min-height: 46px;
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--muted);
  }
  .sheet__sub .mobile-nav__link .material-icons-round {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 1.05rem;
    background: transparent;
    color: var(--accent-600);
  }

  .mobile-nav__cta {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px calc(16px + var(--safe-l)) calc(14px + var(--safe-b)) calc(16px + var(--safe-r));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .mobile-nav__cta .btn {
    padding: 14px 18px;
  }

  /* A sheet owns the screen — the page behind it must not scroll. The real
     lock is the position:fixed technique in mobile.js (overflow alone does not
     hold on iOS Safari); this is the belt-and-braces half. */
  body.nav-open,
  body.toc-open,
  body.modal-open {
    overflow: hidden;
  }
  .mobile-nav,
  .toc-sheet {
    touch-action: none;
  }
  .sheet__body,
  .toc-sheet__body,
  .mobile-nav__cta {
    touch-action: pan-y;
  }
}

/* =====================================================================
   4. TYPE + SPACING, RETUNED FOR A 390px SCREEN
   The desktop scale lands h1 at 38px minimum on a phone: two words per
   line and a whole screen spent on a heading.
   ===================================================================== */
@media (max-width: 780px) {
  body {
    /* hubtoll.css dropped this to 16px below 560px, which made every rem-based
       card paragraph ~15px — smaller on a handheld than on a desktop monitor.
       17px matches the iOS system body size. */
    font-size: 17px;
    line-height: 1.6;
  }
  .suite-card p,
  .module-card p,
  .platform-item p,
  .step p,
  .value-card p,
  .plan__desc,
  .plan__list li,
  .docs-card span span,
  .feature-list li {
    font-size: max(15.5px, 0.94rem);
  }
  h1 {
    font-size: clamp(1.95rem, 7.6vw, 2.4rem);
    line-height: 1.14;
    letter-spacing: -0.025em;
  }
  h2 {
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    line-height: 1.16;
  }
  h3 {
    font-size: 1.24rem;
  }
  h4 {
    font-size: 1.06rem;
  }
  .lead,
  .hero__sub,
  .page-hero p,
  .section-head p {
    font-size: 1.02rem;
    line-height: 1.58;
  }
  .eyebrow {
    font-size: 0.72rem;
    margin-bottom: 12px;
  }

  .section {
    padding: 44px 0;
  }
  .section--tight {
    padding: 34px 0;
  }
  .section-head {
    margin-bottom: 26px;
  }
  .mt-l {
    margin-top: 28px;
  }
  .mt-m {
    margin-top: 20px;
  }
}

@media (max-width: 420px) {
  :root {
    --gutter: 16px;
  }
  h1 {
    font-size: 1.82rem;
  }
  h2 {
    font-size: 1.42rem;
  }}

/* =====================================================================
   5. BUTTONS + PRESSED STATES
   Hover does not exist on a phone; without a pressed state a tap feels
   like nothing happened. Every interactive surface gets one.
   ===================================================================== */
@media (max-width: 960px) {
  .btn {
    min-height: 48px;
    padding: 13px 22px;
    transition: transform 0.12s var(--press-ease), background 0.16s var(--press-ease),
      box-shadow 0.16s var(--press-ease), color 0.16s var(--press-ease);
  }
  .btn:active {
    transform: scale(0.965);
  }
  .btn--lg {
    min-height: 54px;
    padding: 15px 26px;
    font-size: 1rem;
  }
  /* declared in markup on /developers/ but never defined — the playground's
     two buttons rendered full size and crowded the step */
  .btn--sm {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.88rem;
  }

  /* Stacked full-width CTAs are the phone norm; the desktop row wraps badly. */
  .btn-row {
    gap: 10px;
  }
  .hero__cta.btn-row,
  .page-hero .btn-row,
  .cta__inner .btn-row,
  .dev-hero__cta {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .hero__cta .btn,
  .page-hero .btn-row .btn,
  .cta__inner .btn-row .btn,
  .dev-hero__cta .btn {
    width: 100%;
  }

  /* cards react to touch */
  .suite-card,
  .module-card,
  .value-card,
  .plan,
  .step,
  .docs-hub__card,
  .docs-next__card,
  .dev-index__col,
  .faq__item {
    transition: transform 0.14s var(--press-ease), box-shadow 0.18s var(--press-ease);
  }
  a.suite-card:active,
  a.docs-hub__card:active,
  a.docs-next__card:active,
  .module-card:active,
  .value-card:active {
    transform: scale(0.98);
  }
}

/* =====================================================================
   6. CONTENT RAILS
   A phone homepage of 18 screens is a scroll, not a product. Every
   multi-card grid becomes a horizontal snap rail with a peek of the next
   card, edge to edge. No template changes — the grids already exist.
   ===================================================================== */
@media (max-width: 780px) {
  .suite-grid,
  .value-grid,
  .steps,
  .pricing,
  .pricing--3,
  .platform-grid,
  .docs-hub__grid,
  .dev-index {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* bleed to the screen edges, keep the first/last card aligned to the gutter */
    margin-inline: calc(-1 * (var(--gutter) + var(--safe-l))) calc(-1 * (var(--gutter) + var(--safe-r)));
    padding: 4px calc(var(--gutter) + var(--safe-r)) 16px calc(var(--gutter) + var(--safe-l));
    max-width: none;
  }
  .suite-grid::-webkit-scrollbar,
  .value-grid::-webkit-scrollbar,
  .steps::-webkit-scrollbar,
  .pricing::-webkit-scrollbar,
  .platform-grid::-webkit-scrollbar,
  .docs-hub__grid::-webkit-scrollbar,
  .dev-index::-webkit-scrollbar {
    display: none;
  }
  .suite-grid > *,
  .value-grid > *,
  .steps > *,
  .pricing > *,
  .docs-hub__grid > *,
  .dev-index > * {
    flex: 0 0 min(82vw, 360px);
    width: min(82vw, 360px);
    max-width: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* The platform grid is a hairline mosaic on desktop; as a rail each cell
     has to become a card in its own right. */
  .platform-grid {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: visible;
  }
  .platform-grid > * {
    flex: 0 0 min(80vw, 350px);
    width: min(80vw, 350px);
    max-width: none;
    scroll-snap-align: start;
    border-radius: var(--card-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 22px;
  }

  .suite-card,
  .value-card,
  .step {
    padding: 20px;
    border-radius: var(--card-radius);
  }

  /* The 10 HR modules are a SET YOU SCAN, not a set you choose between: a rail
     would cost ten swipes to see them all. Two compact columns show 4 at a time
     and the whole set in ~5 short rows. */
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .module-card {
    padding: 14px 13px;
    border-radius: 16px;
  }
  .module-card__ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .module-card__ic .material-icons-round {
    font-size: 1.2rem;
  }
  .module-card h4 {
    font-size: 0.98rem;
    line-height: 1.25;
    margin-bottom: 5px;
  }
  .module-card p {
    font-size: 0.86rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .plan {
    flex: 0 0 min(86vw, 380px);
    width: min(86vw, 380px);
    max-width: none;
    padding: 24px 22px;
    border-radius: 22px;
  }
  .suite-card__ic {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    margin-bottom: 14px;
  }
  .module-card__ic,
  .value-card__ic {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
  }
  .step__num {
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
  }

  /* trust strip + hero facts read better as a single scrollable line */
  .trust-strip,
  .hero-facts,
  .hero__trust {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 10px;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
  }
  .trust-strip::-webkit-scrollbar,
  .hero-facts::-webkit-scrollbar,
  .hero__trust::-webkit-scrollbar {
    display: none;
  }
  .trust-strip__item,
  .hero-facts li {
    flex: 0 0 auto;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.86rem;
    white-space: nowrap;
  }
  .hero__trust span {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 7px 13px;
    white-space: nowrap;
  }

  /* a hint that the rail moves, drawn once per rail by mobile.js */
  .rail-hint {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin: -6px 0 2px;
  }
  .rail-hint i {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: width 0.2s var(--press-ease), background 0.2s var(--press-ease);
  }
  .rail-hint i.is-on {
    width: 16px;
    background: var(--accent-500);
  }
  .section--ink .rail-hint i {
    background: rgba(255, 255, 255, 0.22);
  }
  .section--ink .rail-hint i.is-on {
    background: var(--accent-400);
  }
}

/* =====================================================================
   7. HERO LAYOUT  (the hero's product visual is §22)
   ===================================================================== */
@media (max-width: 780px) {
  .hero__grid {
    gap: 26px;
  }
  .hero__sub {
    margin-top: 14px;
  }
  .hero__cta {
    margin-top: 22px;
  }
  .hero__trust {
    margin-top: 20px;
  }
  .hero::before {
    width: 340px;
    height: 340px;
    top: -140px;
    right: -110px;
  }
  .hero::after {
    display: none;
  }
  .page-hero::before {
    width: 320px;
    height: 320px;
    top: -150px;
  }
  .cta__inner {
    padding: 30px 22px;
    border-radius: 22px;
  }
}

/* =====================================================================
   8. FORM CONTROLS  — the user's explicit requirement
   ---------------------------------------------------------------------
   The one rule that matters most on iOS: a focused input whose font-size
   is below 16px makes Safari ZOOM the whole page, and it does not zoom
   back out. Every control on this site was 14–15.2px, so every form on a
   phone hijacked the viewport the moment you tapped a field.
   Everything else here is ergonomics: 52px targets, a real focus ring,
   selects that keep the native wheel picker, and checkboxes you can hit.
   ===================================================================== */
@media (max-width: 960px) {
  /* --- the universal guarantee --- */
  input,
  select,
  textarea,
  button {
    font-family: inherit;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;   /* never below 16px: iOS zoom */
    min-height: var(--control-h);
    border-radius: var(--control-radius);
    -webkit-appearance: none;
    appearance: none;
  }
  textarea {
    min-height: 104px;
    line-height: 1.5;
    resize: none;                  /* a drag handle is meaningless on touch */
  }

  /* --- the offer / lead form --- */
  .offer-card {
    padding: 20px 16px 22px;
    border-radius: 20px;
    margin-top: 0;
    box-shadow: 0 10px 30px rgba(10, 15, 41, 0.07);
  }
  .offer-two {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .offer-field {
    margin-bottom: 14px;
  }
  .offer-field label {
    font-size: 0.86rem;
    margin-bottom: 7px;
  }
  .offer-field input,
  .offer-field select,
  .offer-field textarea {
    padding: 14px 15px;
    border-width: 1.5px;
    background: #fff;
    transition: border-color 0.15s var(--press-ease), box-shadow 0.15s var(--press-ease);
  }
  .offer-field input:focus,
  .offer-field select:focus,
  .offer-field textarea:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 4px rgba(249, 126, 48, 0.16);
  }
  /* `html` prefix for the same reason as §20/§33: offer.njk styles these in a
     <style> block in the BODY, which wins at equal specificity. */
  html .offer-perks {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  html .offer-perks::-webkit-scrollbar {
    display: none;
  }
  html .offer-perks li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  html .offer-status {
    font-size: 0.92rem;
    padding: 12px 14px;
    line-height: 1.5;
  }

  /* --- a native select that still looks designed ---
     appearance:none keeps the OS wheel/dropdown (the best control on a
     phone) while letting us own the box; the chevron is drawn in CSS so
     there is no icon font dependency inside the control. */
  select {
    background-image:
      linear-gradient(45deg, transparent 50%, var(--muted) 50%),
      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
      calc(100% - 20px) calc(50% + 2px),
      calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px !important;
  }

  /* --- checkbox: a 20px box with a 44px hit area --- */
  .promo-popup__consent,
  .offer-consent {
    min-height: 44px;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 2px;
  }
  .promo-popup__consent input[type="checkbox"],
  .offer-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 2px 0 0;
    border: 2px solid var(--line-strong);
    border-radius: 7px;
    background: #fff;
    display: grid;
    place-items: center;
    transition: background 0.15s var(--press-ease), border-color 0.15s var(--press-ease);
  }
  .promo-popup__consent input[type="checkbox"]:checked,
  .offer-consent input[type="checkbox"]:checked {
    background: var(--accent-500);
    border-color: var(--accent-500);
  }
  .promo-popup__consent input[type="checkbox"]:checked::after,
  .offer-consent input[type="checkbox"]:checked::after {
    content: "";
    width: 6px;
    height: 11px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
  }
  .promo-popup__consent span,
  .offer-consent span {
    font-size: 0.86rem;
    line-height: 1.5;
  }

  /* --- the API playground: a real form, not a desktop table of inputs --- */
  .pg__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pg__grid label > span {
    font-size: 0.84rem;
    color: var(--text-strong);
  }
  .pg__grid input,
  .pg__grid select {
    padding: 14px 15px;
    border-radius: var(--control-radius);
    border-width: 1.5px;
  }
  .pg__grid input:focus,
  .pg__grid select:focus {
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18);
  }
  .pg__step {
    padding: 16px;
    gap: 12px;
  }
  .pg__stepnum {
    flex: 0 0 26px;
    height: 26px;
  }
  .pg__hint {
    display: block;
    margin: 8px 0 0;
    font-size: 0.84rem;
  }
  .pg__outhead {
    padding: 10px 12px;
  }
  .pg__copy {
    min-height: 36px;
    padding: 6px 12px;
  }
  .pg pre {
    font-size: 12.5px;
    max-height: 60dvh;
  }
}
@media (max-width: 780px) {
  /* the playground submit sits under the thumb, full width */
  #pgAuth,
  #pgSend {
    width: 100%;
  }}

/* =====================================================================
   9. PROMO POPUP → BOTTOM SHEET
   A centred 440px modal on a 390px screen is a dialog. A sheet that rises
   from the bottom, can be scrolled and survives the keyboard is an app.
   ===================================================================== */
@media (max-width: 780px) {
  .promo-popup__overlay {
    align-items: flex-end;
    padding: 0;
  }
  .promo-popup {
    max-width: 100%;
    width: 100%;
    border-radius: 24px 24px 0 0;
    padding: 20px 18px calc(18px + var(--safe-b));
    /* dvh, not vh: with vh the sheet is measured against the tallest possible
       viewport, so the keyboard pushes the submit button off-screen */
    max-height: 92dvh;
    overscroll-behavior: contain;
    transform: translateY(100%) scale(1);
    transition: transform 0.36s var(--sheet-ease);
  }
  .promo-popup__overlay.is-open .promo-popup {
    transform: translateY(0) scale(1);
  }
  .promo-popup::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
    margin: -6px auto 14px;
  }
  .promo-popup__close {
    top: 16px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .promo-popup__title {
    font-size: 1.24rem;
    padding-right: 44px;
  }
  .promo-popup__row {
    grid-template-columns: 1fr;
  }
  .promo-popup__form {
    gap: 14px;
  }
  .promo-popup__field label {
    font-size: 0.84rem;
    margin-bottom: 6px;
  }
  .promo-popup__field input,
  .promo-popup__field select {
    padding: 14px 15px;
  }
  .promo-popup__field input:focus,
  .promo-popup__field select:focus {
    box-shadow: 0 0 0 4px rgba(249, 126, 48, 0.16);
  }
  .promo-popup__submit {
    min-height: 52px;
  }
  .promo-popup__code {
    font-size: 1.32rem;
  }
  .promo-popup__copy {
    min-height: 44px;
  }
}

/* =====================================================================
   10. COOKIE CONSENT — must clear the tab bar
   ===================================================================== */
@media (max-width: 780px) {
  /* ⚠️ `html` prefix, deliberately. partials/consent.njk ships its own <style>
     block in the BODY, which is later in document order than this stylesheet —
     so at equal specificity the page's own rules win and these are ignored.
     (Caught on production: the banner still sat at bottom:16px, on top of the
     tab bar, with its blue Accept button.) One extra element selector is the
     least invasive way to win without editing the consent partial's CSS. */
  html .ht-consent {
    left: 10px;
    right: 10px;
    bottom: calc(var(--tab-bar-h) + var(--safe-b) + 10px);
    border-radius: 18px;
    padding: 14px 16px;
    gap: 10px 12px;
    font-size: 14px;
  }
  html .ht-consent__actions {
    width: 100%;
    gap: 10px;
  }
  html .ht-consent__btn {
    flex: 1;
    min-height: 44px;
    border-radius: 12px;
    font-size: 14px;
  }
}

/* =====================================================================
   11. DOCUMENTATION + LEGAL
   The worst pages on a phone today: the body copy is physically cut off
   at the right edge because a 480px table widens the document. Two fixes:
   the grid item stops blowing out (section 0), and the tables stop being
   tables — each row becomes a card, so nothing scrolls sideways at all.
   ===================================================================== */
@media (max-width: 960px) {
  .legal {
    display: block;
    gap: 0;
  }
  .legal__toc {
    display: none;            /* replaced by the Contents sheet, below */
  }
  .legal__body {
    max-width: 100%;
  }
  .legal__body h3 {
    font-size: 1.2rem;
    margin: 30px 0 10px;
    scroll-margin-top: calc(var(--app-bar-h) + var(--safe-t) + 14px);
  }
  .legal__body h4 {
    font-size: 1.02rem;
  }
  .legal__body p,
  .legal__body li {
    line-height: 1.66;
  }
  .legal__body ul {
    padding-left: 20px;
  }
  .legal__meta {
    display: flex;
    width: 100%;
    font-size: 0.86rem;
    padding: 12px 14px;
    margin-bottom: 22px;
  }
  .breadcrumb {
    font-size: 0.82rem;
    margin-bottom: 14px;
  }

  /* ---- table → cards ----
     Every doc table on this site is 2 (occasionally 3) columns of
     "thing → what it means", so a stacked card per row loses nothing and
     removes the sideways scroll entirely. The header row stays in the DOM
     for screen readers, visually hidden. */
  .doc-table,
  .dev-table-wrap {
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin: 14px 0 18px;
  }
  .doc-table table,
  .dev-table {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 0.95rem;
  }
  .doc-table thead,
  .dev-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .doc-table tbody,
  .dev-table tbody {
    display: grid;
    gap: 10px;
  }
  .doc-table tr,
  .dev-table tr {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
  }
  .doc-table td,
  .dev-table td {
    display: block;
    border: 0;
    padding: 0;
    line-height: 1.55;
  }
  .doc-table td:first-child,
  .dev-table td:first-child {
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 5px;
  }
  .doc-table td + td,
  .dev-table td + td {
    color: var(--muted);
    font-size: 0.92rem;
  }
  .doc-table td + td + td,
  .dev-table td + td + td {
    margin-top: 4px;
  }
  .doc-table tr:last-child td,
  .dev-table tr:last-child td {
    border-bottom: 0;
  }

  /* permission chips must wrap inside the card, never widen it */
  .perm {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .callout {
    padding: 14px 16px;
    border-radius: 14px;
  }
  .steplist li {
    padding-left: 44px;
  }
  .docs-next__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .docs-next__card {
    min-height: 60px;
    padding: 14px 16px;
    border-radius: 14px;
  }
  .docs-help {
    padding: 16px;
    border-radius: 16px;
  }
}

@media (max-width: 780px) {
  .docs-hub__grid > * {
    flex: 0 0 min(84vw, 380px);
    width: min(84vw, 380px);
    max-width: none;
  }}

/* ---- "On this page" — the TOC comes back as a sheet ----
   The table of contents was simply display:none below 1024px, so long
   guides and the Terms had no navigation at all on a phone. It returns as
   a floating button that opens the same list as a bottom sheet. */
@media (max-width: 960px) {
  .toc-fab {
    position: fixed;
    right: calc(14px + var(--safe-r));
    bottom: calc(var(--tab-bar-h) + var(--safe-b) + 14px);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 46px;
    padding: 0 18px 0 14px;
    border-radius: 999px;
    background: var(--navy-700);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(10, 15, 41, 0.3);
    transition: transform 0.24s var(--sheet-ease), opacity 0.24s var(--sheet-ease);
  }
  .toc-fab .material-icons-round {
    font-size: 1.2rem;
  }
  .toc-fab:active {
    transform: scale(0.93);
  }
  body.nav-open .toc-fab,
  body.sheet-open .toc-fab {
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
  }

  .toc-sheet {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 41, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s var(--sheet-ease), visibility 0.24s;
  }
  body.toc-open .toc-sheet {
    opacity: 1;
    visibility: visible;
  }
  .toc-sheet__panel {
    position: absolute;
    inset: auto 0 0 0;
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.36s var(--sheet-ease);
    overscroll-behavior: contain;
    box-shadow: 0 -18px 50px rgba(10, 15, 41, 0.3);
  }
  body.toc-open .toc-sheet__panel {
    transform: translateY(0);
  }
  .toc-sheet__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px 12px calc(16px + var(--safe-b));
  }
  .toc-sheet__body a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 14px;
    border-radius: 13px;
    color: var(--text-strong);
    font-weight: 600;
    font-size: 0.95rem;
  }
  .toc-sheet__body a:active {
    background: var(--bg-soft);
  }
  .toc-sheet__body a.is-active {
    background: var(--bg-soft);
    color: var(--accent-700);
  }
  .toc-sheet__body a::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
  }
  .toc-sheet__body a.is-active::before {
    background: var(--accent-500);
  }
}
@media (min-width: 961px) {
  .toc-fab,
  .toc-sheet {
    display: none;
  }}

/* =====================================================================
   12. DEVELOPERS
   The page scrolled to 833px wide on a 390px screen. Cause: .dev-layout
   turns column at <=900px while keeping align-items:flex-start, so each
   child is sized to its MAX-content — the widest <pre> in the page.
   ===================================================================== */
@media (max-width: 960px) {
  /* NB: this element carries BOTH .container and .dev-layout, so a `padding`
     shorthand here would zero the container's own side gutter and leave the
     whole developer portal flush against the screen edge. Block axis only. */
  .dev-layout {
    display: block;
    padding-block: 24px 36px;
  }
  .dev-nav,
  .dev-main {
    width: 100%;
    max-width: 100%;
  }
  .dev-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)) 20px;
    padding: 2px var(--gutter) 10px;
  }
  .dev-nav::-webkit-scrollbar {
    display: none;
  }
  .dev-nav b {
    display: none;
  }
  .dev-nav a {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .dev-nav a:active {
    background: var(--bg-soft);
  }

  .dev-main h2 {
    font-size: 1.3rem;
    margin: 30px 0 10px;
    scroll-margin-top: calc(var(--app-bar-h) + var(--safe-t) + 14px);
  }
  .dev-main h3 {
    font-size: 1.05rem;
  }
  .dev-main p,
  .dev-rules li,
  .dev-steps li {
    font-size: 0.97rem;
    line-height: 1.65;
  }

  /* code blocks: scroll INSIDE their own card, never widen the page */
  .dev-code,
  .pg,
  .dev-endpoint {
    max-width: 100%;
    border-radius: 14px;
  }
  .dev-code pre,
  .pg pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .dev-code code {
    font-size: 12.5px;
    line-height: 1.6;
  }
  .dev-code__head {
    font-size: 0.68rem;
    padding: 9px 12px;
  }
  .dev-split {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .dev-endpoint__head {
    padding: 12px 14px;
    gap: 8px;
  }
  .dev-endpoint__head code {
    font-size: 0.85rem;
    overflow-wrap: anywhere;
    flex: 1 1 100%;
    order: 2;
  }
  .dev-scope {
    margin-left: 0;
    order: 3;
  }
  .dev-verb {
    order: 1;
  }
  .dev-endpoint__body {
    padding: 14px;
  }
  .dev-callout {
    padding: 14px;
    border-radius: 14px;
  }
  .dev-hero__facts {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .dev-hero__facts::-webkit-scrollbar {
    display: none;
  }
  .dev-hero__facts span {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .dev-index__col {
    border-radius: 14px;
  }
}

/* =====================================================================
   13. PRODUCT PAGES
   Ten HR modules × (copy + two screenshots) is ~16 screens of scrolling.
   The two screenshots become a swipeable pair, the rhythm tightens, and
   the sub-nav becomes a proper segmented scroller.
   ===================================================================== */
@media (max-width: 860px) {
  .feature-row,
  .feature-row--reverse {
    display: block;
  }
  .feature-row + .feature-row {
    margin-top: 42px;
    padding-top: 42px;
    border-top: 1px solid var(--line);
  }
  .section--ink .feature-row + .feature-row {
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  .feature-row__media {
    margin-top: 20px;
  }
  .feature-row h3 {
    font-size: 1.28rem;
    margin-bottom: 10px;
  }
  .feature-row__copy > p {
    font-size: 1rem;
  }
  .feature-list {
    margin-top: 16px;
    gap: 9px;
  }
  .feature-list li {
    font-size: 0.95rem;
  }
  .module-eyebrow__ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .module-eyebrow__ic .material-icons-round {
    font-size: 1.2rem;
  }

  /* the dashboard + everyday-view pair, side by side and swipeable */
  .duo {
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * (var(--gutter) + var(--safe-l))) calc(-1 * (var(--gutter) + var(--safe-r)));
    padding: 16px calc(var(--gutter) + var(--safe-r)) 10px calc(var(--gutter) + var(--safe-l));
  }
  .duo::-webkit-scrollbar {
    display: none;
  }
  .duo__back,
  .duo__front,
  .feature-row--reverse .duo__back,
  .feature-row--reverse .duo__front {
    flex: 0 0 min(84vw, 420px);
    max-width: none;
    width: min(84vw, 420px);
    align-self: stretch;
    scroll-snap-align: start;
  }
  .duo__tag {
    top: -10px;
    font-size: 0.68rem;
    padding: 3px 9px;
  }
  .frame {
    border-radius: 14px;
  }
  .frame__bar {
    padding: 8px 11px;
  }
  .frame__bar i {
    width: 8px;
    height: 8px;
  }

  /* sticky module jumper */
  .subnav__inner {
    padding: 10px var(--gutter);
    gap: 8px;
    scroll-snap-type: x proximity;
  }
  .subnav a {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 0.87rem;
    scroll-snap-align: center;
  }
  .subnav a.is-active {
    border-color: var(--navy-700);
  }

  .split {
    display: block;
  }
  .split > * + * {
    margin-top: 26px;
  }
}

/* =====================================================================
   14. CONTACT / ABOUT / PRICING / 404 / FOOTER
   ===================================================================== */
@media (max-width: 860px) {
  .contact-grid {
    display: block;
  }
  .contact-card {
    margin-top: 26px;
    padding: 24px 20px;
    border-radius: 22px;
  }
  .contact-method {
    padding: 16px 0;
    gap: 14px;
  }
  .contact-method__ic {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .contact-method a {
    min-height: 24px;
    display: inline-block;
  }
  .map-embed iframe {
    height: 220px;
  }
  .notfound__code {
    font-size: 5.5rem;
  }
}

@media (max-width: 780px) {
  .site-footer {
    padding: 36px 0 24px;
  }
  .footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .footer__brand {
    margin-bottom: 14px;
  }
  .footer__brand p {
    max-width: 100%;
    font-size: 0.92rem;
  }
  .social {
    margin-top: 16px;
    gap: 8px;
  }
  .social a {
    width: 44px;
    height: 44px;
  }
  /* each footer column collapses — a 30-link wall is not a phone footer */
  .footer__col {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .footer__col > h5 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    margin: 0;
    cursor: pointer;
  }
  .footer__col > h5::after {
    content: "expand_more";
    color: var(--on-dark-faint);
    transition: transform 0.24s var(--sheet-ease);
    font-family: "Material Icons Round";
    font-weight: 400;
    font-style: normal;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
  }
  .footer__col.is-open > h5::after {
    transform: rotate(180deg);
  }
  .footer__col > ul {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    gap: 0;
    overflow: hidden;
    transition: grid-template-rows 0.28s var(--sheet-ease), padding 0.28s var(--sheet-ease);
  }
  .footer__col > ul > * {
    min-height: 0;
  }
  .footer__col.is-open > ul {
    grid-template-rows: minmax(0, 1fr);
    padding-bottom: 14px;
  }
  .footer__col ul li {
    padding: 7px 0;
  }
  .footer__col a {
    min-height: 34px;
    align-items: center;
  }
  .footer__bottom {
    margin-top: 22px;
    padding-top: 18px;
    flex-direction: column;
    gap: 10px;
    font-size: 0.82rem;
    text-align: left;
  }
  .footer__bottom a,
  .footer__link-btn {
    display: inline-block;
    min-height: 30px;
  }}

/* =====================================================================
   15. FAQ + ACCORDIONS
   ===================================================================== */
@media (max-width: 780px) {
  .faq {
    gap: 10px;
  }
  .faq__q {
    min-height: 58px;
    padding: 15px 16px;
    font-size: 0.99rem;
    gap: 12px;
  }
  .faq__q:active {
    background: var(--bg-soft);
  }
  .faq__a-inner {
    padding: 0 16px 18px;
    font-size: 0.95rem;
  }
  .faq__item {
    border-radius: 16px;
  }
}

/* =====================================================================
   16. REDUCED MOTION
   hubtoll.css already zeroes every duration for prefers-reduced-motion; this
   keeps the LAYOUT correct when it does — a sheet whose transform is frozen
   must not also try to snap-scroll. (The phone reveal timing itself lives in
   §28, which is the single place that governs it.)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav__panel,
  .toc-sheet__panel,
  .promo-popup,
  .site-header,
  .tabbar {
    transition: none !important;
  }
  .suite-grid,
  .module-grid,
  .value-grid,
  .steps,
  .pricing,
  .platform-grid,
  .docs-hub__grid,
  .duo {
    scroll-snap-type: none;
  }}

/* =====================================================================
   17. PRINT / FALLBACKS
   ===================================================================== */
@media print {
  .tabbar,
  .toc-fab,
  .toc-sheet,
  .mobile-nav,
  .site-header {
    display: none !important;
  }
  body {
    padding-bottom: 0;
  }
}

/* =====================================================================
   18. TOUCH TARGETS — the 44px floor, applied where it was still missed
   Measured on the rendered page: the footer link lists, the brand, the
   "Explore →" card links and the legal row all sat at 24-34px.
   ===================================================================== */
@media (max-width: 960px) {
  .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-right: 4px;
  }
  .suite-card__link,
  .legal__body .docs-help a,
  .dev-help a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer__col a {
    min-height: 44px;
    /* a one-word link ("CRM", "Forge") is otherwise a 34px-wide target */
    min-width: 44px;
  }
  .footer__col ul li {
    padding: 0;
  }
  .footer__bottom a,
  .footer__link-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
  .contact-method a,
  .contact-method p a {
    min-height: 44px;
  }
  .social a {
    width: 44px;
    height: 44px;
  }
  .subnav a,
  .dev-nav a {
    min-height: 44px;
  }
  .docs-card,
  .docs-next__card {
    min-height: 60px;
  }
  .faq__q {
    min-height: 56px;
  }
  .pmega__foot-link,
  .plan .btn {
    min-height: 48px;
  }
}

/* =====================================================================
   19. READABILITY FLOOR — nothing under 12px on a phone
   (monospace code is exempt: 12.5px mono is deliberate and legible.)
   ===================================================================== */
@media (max-width: 960px) {
  .dev-code__head,
  .dev-hero__eyebrow,
  .dev-index__scope,
  .dev-index__links a,
  .dev-index__blurb,
  .dev-table th,
  .dev-table--sm,
  .dev-scope,
  .pg__outhead code,
  .pg__status,
  .pg__copy,
  .duo__tag,
  .legal__meta,
  .badge,
  .eyebrow,
  .module-eyebrow b,
  .docs-hub__group h5,
  .plan__name,
  .footer__col h5 {
    font-size: 0.82rem;
  }
  /* the endpoint index is a list of links, not prose — give each a real row */
  .dev-index__links a {
    min-height: 44px;
    align-items: center;
    padding: 8px;
  }
  .breadcrumb a,
  .legal__body .breadcrumb a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
  .dev-verb {
    font-size: 0.72rem;
  }
  .footer__col .badge--soon {
    font-size: 0.66rem;
  }
}

/* =====================================================================
   20. PAGE-LEVEL <style> OVERRIDES
   /offer/ ships its own <style> block in the BODY. At equal specificity a
   later stylesheet wins, and a <style> in the body is later than a <link>
   in the head — so the page's own rules beat this file. The `html` prefix
   buys one ID-free specificity point, which is the least invasive way to
   win without touching that page's desktop design.
   ===================================================================== */
@media (max-width: 960px) {
  html .offer-field input,
  html .offer-field select,
  html .offer-field textarea {
    font-size: 16px;
    min-height: var(--control-h);
    padding: 14px 15px;
    border-radius: var(--control-radius);
    border: 1.5px solid var(--line-strong);
    background-color: #fff;
  }
  html .offer-field select {
    background-image:
      linear-gradient(45deg, transparent 50%, var(--muted) 50%),
      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
      calc(100% - 20px) calc(50% + 2px),
      calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
  }
  html .offer-field input:focus,
  html .offer-field select:focus,
  html .offer-field textarea:focus {
    border-color: var(--accent-500);
    box-shadow: 0 0 0 4px rgba(249, 126, 48, 0.16);
    background-color: #fff;
  }
  html .offer-field textarea {
    min-height: 104px;
  }
  html .offer-card {
    padding: 20px 16px 22px;
    border-radius: 20px;
    margin-top: 0;
  }
  html .offer-two {
    grid-template-columns: 1fr;
    gap: 0;
  }
  html .offer-fine {
    font-size: 0.82rem;
    line-height: 1.5;
  }
  html .offer-wrap {
    max-width: 100%;
  }
}

/* =====================================================================
   21. DOC TABLE CONTENT — chips and nested lists must wrap inside the card
   ===================================================================== */
@media (max-width: 960px) {
  .doc-table .perm,
  .dev-table .perm,
  .legal__body .perm {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  .doc-table td ul,
  .doc-table .perm-grants,
  .dev-table td ul {
    padding-left: 16px;
    margin: 6px 0 0;
    max-width: 100%;
  }
  .doc-table td ul li,
  .dev-table td ul li {
    overflow-wrap: anywhere;
  }
  .doc-table code,
  .legal__body code {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* =====================================================================
   22. HERO VISUAL — a phone should not be shown a picture of a desktop
   The hero mock is a fake BROWSER WINDOW: traffic-light dots, a URL bar, a
   92px sidebar. On a phone that is a picture of a computer, which is the
   opposite of app feel — while the two notification chips, the only truly
   app-like part of the composition, were display:none below 560px.
   So on a phone: drop the window chrome, keep the dashboard, and bring the
   notifications back as a real stacked notification list underneath.
   ===================================================================== */
@media (max-width: 780px) {
  .hero__visual {
    max-width: 440px;
    margin-inline: auto;
  }
  .appmock {
    border-radius: 22px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }
  .appmock__bar,
  .appmock__side {
    display: none;
  }
  .appmock__body {
    min-height: 0;
    display: block;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .appmock__main {
    padding: 16px;
    gap: 12px;
  }
  .appmock__chart {
    height: 104px;
  }
  .appmock__stat {
    padding: 10px;
  }
  .appmock__stat b {
    font-size: 1.1rem;
  }

  /* the notification stack — static, below the card, in reading order.
     hubtoll.css hides these below 560px; they are the only part of the hero
     composition that reads as an app, so on a phone they come back. */
  .appmock__float {
    display: flex;
    position: static;
    margin-top: 10px;
    width: 100%;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
  }
  .appmock__float span {
    font-size: 0.82rem;
  }
  .appmock__float--tr,
  .appmock__float--bl {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
}

/* =====================================================================
   23. THE CONTENTS FAB gets out of the way while you read
   ===================================================================== */
@media (max-width: 960px) {
  body.bar-hidden .toc-fab {
    transform: translateY(150%);
    opacity: 0;
  }
}

/* =====================================================================
   24. TOUCH, NOT HOVER
   iOS synthesises a hover on tap and KEEPS it: a tapped card stays lifted
   6px with a shadow while its siblings do not, which reads as a rendering
   bug. The fix is NOT an enumeration of the affected selectors here — that
   covers a snapshot and rots the next time a :hover is added. Every :hover
   rule in hubtoll.css and promo-popup.css is instead wrapped at SOURCE in
   `@media (hover: hover)`, which keys on pointer capability rather than
   width: a desktop mouse always matches (so desktop is untouched) and a
   finger never does. What remains here is the positive half — real press
   feedback, which hover can never provide on touch.
   ===================================================================== */
@media (max-width: 960px) {
  /* no 300ms double-tap delay on older Android WebViews */
  .btn,
  .faq__q,
  .tabbar__item,
  .mobile-nav__link,
  .subnav a,
  .dev-nav a,
  .toc-fab,
  .sheet__close,
  a.suite-card,
  a.docs-card,
  a.docs-next__card,
  .hamburger,
  .sheet__group > summary {
    touch-action: manipulation;
  }
}

/* =====================================================================
   25. PLAN BADGE — flows on a phone instead of floating over the card
   ===================================================================== */
@media (max-width: 780px) {
  .plan__tag {
    position: static;
    display: block;
    margin-bottom: 8px;
  }
}

/* =====================================================================
   26. ANCHOR OFFSETS under the sticky module jumper
   A product page carries app bar (56) + sub-nav (~58) of fixed chrome, so
   a tapped module pill used to land its own eyebrow underneath the pill bar.
   ===================================================================== */
@media (max-width: 860px) {
  .feature-row,
  .feature-row[id] {
    scroll-margin-top: calc(var(--app-bar-h) + var(--safe-t) + 70px);
  }
}

/* =====================================================================
   27. PROMO SHEET, part 2 — the close button must never scroll away  (§9 is the sheet)
   The × is absolutely positioned inside the element that scrolls, so on any
   screen where the form overflows (every phone once the keyboard is up) it
   scrolled off the top and the sheet could not be dismissed. Move the scroll
   to the body wrapper and the × stays pinned to the sheet.
   ===================================================================== */
@media (max-width: 780px) {
  .promo-popup {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .promo-popup__body,
  .promo-popup__success {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
  }
  .promo-popup__close {
    position: absolute;
    z-index: 3;
  }
}
/* =====================================================================
   28. MOTION, TUNED FOR A THUMB
   A 0.7s fade with up to 0.24s of stagger loses a race against momentum
   scrolling: you flick, you stop, and the section under your thumb is
   still invisible. On a phone the payoff of a scroll reveal is negative,
   so it becomes a short opacity-only settle with no travel and no stagger.
   ===================================================================== */
@media (max-width: 780px) {
  html {
    /* A smooth-scrolled anchor across a 9,000px document is a long animated
       ride past dozens of transitions — the jankiest thing on a mid-range
       Android. In-page jumps land instantly instead. */
    scroll-behavior: auto;
  }
  .reveal {
    transform: none;
    transition: opacity 0.25s var(--press-ease);
  }
  .reveal[data-delay="1"],
  .reveal[data-delay="2"],
  .reveal[data-delay="3"],
  .reveal[data-delay="4"] {
    transition-delay: 0s;
  }
}

/* =====================================================================
   29. NO DESKTOP-WINDOW METAPHOR ON A PHONE
   ===================================================================== */
@media (max-width: 780px) {
  .frame__bar {
    display: none;
  }
  .frame {
    border-radius: 16px;
  }
}

/* =====================================================================
   30. THE MENU BUTTON READS AS A CONTROL
   A bare three-line glyph with no box is the only navigation on the page;
   give it a surface so it is unmistakably tappable.
   ===================================================================== */
@media (max-width: 960px) {
  .hamburger {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.16s var(--press-ease), transform 0.12s var(--press-ease);
  }
  .site-header.is-scrolled .hamburger,
  body.no-hero .hamburger {
    background: var(--bg-soft);
  }
  .hamburger:active {
    transform: scale(0.92);
  }
}

/* =====================================================================
   31. THE PILL BAR SAYS IT SCROLLS
   A pill sliced through the middle of a word at the edge reads as a
   rendering bug; a fade reads as "keep swiping".
   ===================================================================== */
@media (max-width: 860px) {
  .subnav__inner,
  .dev-nav {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
  }
}

/* =====================================================================
   32. CONTACT — call / email / WhatsApp are the page's whole purpose
   They were 19px inline text slivers inside a paragraph.
   ===================================================================== */
@media (max-width: 860px) {
  .contact-method {
    align-items: flex-start;
    gap: 14px;
  }
  .contact-method p a[href^="tel:"],
  .contact-method p a[href^="mailto:"],
  .contact-method p a[href*="whatsapp"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    font-weight: 700;
    color: var(--navy-700);
  }
  .contact-method p a:active {
    background: var(--bg-soft-2);
  }
  /* A map iframe mid-page is a scroll trap: a vertical drag that starts on it
     pans the map instead of the page. Tap once to hand it the gesture. */
  .map-embed {
    position: relative;
  }
  .map-embed iframe {
    height: 200px;
    pointer-events: none;
  }
  .map-embed.is-live iframe {
    pointer-events: auto;
  }
  .map-embed__tap {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: rgba(10, 15, 41, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .map-embed.is-live .map-embed__tap {
    display: none;
  }
}
@media (min-width: 861px) {
  .map-embed__tap {
    display: none;
  }}

/* =====================================================================
   33. COOKIE BANNER, part 2 — brand colours  (its box is §10)
   It shipped in generic #3b82f6 blue on a navy/orange site and read as a
   third-party widget bolted on.
   ===================================================================== */
@media (max-width: 780px) {
  html .ht-consent__btn--accept {
    background: var(--grad-accent);
    border-color: transparent;
  }
  @media (hover: hover) {
    html .ht-consent__btn--accept:hover {
      background: var(--accent-600);
    }
  }
  html .ht-consent__text a {
    color: var(--accent-300);
  }
}

/* =====================================================================
   34. INLINE "→" LINKS BECOME REAL CONTROLS
   "Read the Leave Management guide →" was a 24px text sliver sitting
   directly above a 500px image block: a miss hits nothing.
   ===================================================================== */
@media (max-width: 780px) {
  .feature-row .suite-card__link,
  .split .suite-card__link,
  .suite-card .suite-card__link {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    font-size: 0.92rem;
  }
  .section--ink .feature-row .suite-card__link {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
  }
  .feature-row .suite-card__link:active,
  .split .suite-card__link:active {
    transform: scale(0.97);
    background: var(--bg-soft-2);
  }
}

/* =====================================================================
   35. dvh EVERYWHERE A VIEWPORT HEIGHT MATTERS
   vh is the LARGEST possible viewport on a phone: it does not shrink for
   the URL bar or the keyboard, so a vh-sized box is taller than the
   screen exactly when it matters.
   ===================================================================== */
@media (max-width: 960px) {
  .notfound {
    min-height: 60dvh;
  }
  .legal__toc ul {
    max-height: 60dvh;
  }
}

/* =====================================================================
   36. OVERSCROLL
   Every sheet, rail and panel contains its own scroll (done in place).
   The ROOT keeps pull-to-refresh in a browser tab — taking it away from
   every visitor is hostile — but an INSTALLED app must not rubber-band
   its own document, so it is disabled only in standalone.
   ===================================================================== */
@media (display-mode: standalone) {
  html,
  body {
    overscroll-behavior-y: none;
  }
}

/* =====================================================================
   37. SMALL-PHONE / LARGE-TEXT SAFETY
   Measured at 320px and at 200% text: two long button labels still ran
   past the edge. A button must be allowed to take a second line before
   it takes the page with it.
   ===================================================================== */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
  .btn-row {
    width: 100%;
  }
  .btn-row > .btn {
    flex: 1 1 100%;
  }
  .site-header__inner,
  .brand {
    min-width: 0;
  }
  .brand img {
    max-width: 130px;
  }
}

/* =====================================================================
   38. SECTION FOLDING (.mx-acc) — the long LOOKUP pages
   Built by mobile.js only on pages that opted in with `data-mx-acc`.
   At >=781px every panel is open and the chevrons vanish, so a rotated
   phone or a resized window shows the page whole with no teardown.
   ===================================================================== */
@media (max-width: 780px) {
  .mx-acc__all {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 4px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--navy-700);
  }
  .mx-acc__all:active {
    background: var(--bg-soft-2);
    scale: 0.97;
  }

  .legal__body .mx-acc__h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 60px;
    margin: 0 !important;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    font-size: 1.06rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  .legal__body .mx-acc__h:active {
    color: var(--accent-700);
  }
  .mx-acc__h::after {
    content: "expand_more";
    flex: 0 0 auto;
    color: var(--line-strong);
    transition: transform 0.24s var(--sheet-ease), color 0.24s var(--sheet-ease);
    font-family: "Material Icons Round";
    font-weight: 400;
    font-style: normal;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
  }
  .mx-acc__h[aria-expanded="true"]::after {
    transform: rotate(180deg);
    color: var(--accent-500);
  }
  .mx-acc__p {
    display: grid;
    /* minmax(0, …) for the same reason as .faq__a: a bare `0fr` track keeps the
       item's min-content as its automatic minimum and never fully collapses. */
    grid-template-rows: minmax(0, 0fr);
    transition: grid-template-rows 0.28s var(--sheet-ease);
  }
  .mx-acc__h[aria-expanded="true"] + .mx-acc__p {
    grid-template-rows: minmax(0, 1fr);
  }
  .mx-acc__inner {
    min-height: 0;
    overflow: hidden;
  }
  .mx-acc__inner > :first-child {
    margin-top: 0;
  }
  .mx-acc__inner > :last-child {
    margin-bottom: 18px;
  }
}
/* Above the breakpoint the folded markup (if it was ever built) is inert. */
@media (min-width: 781px) {
  .mx-acc__p {
    display: block;
  }
  .mx-acc__h::after,
  .mx-acc__all {
    display: none;
  }
}