/* ==========================================================================
   ATHLI — MOBILE APP LAYER
   ==========================================================================
   Everything in this file lives inside `@media (max-width: 768px)`, so the
   desktop and tablet experience shipped in style.css / pages.css is left
   byte-for-byte untouched. Load this file LAST.

   The goal on a phone is not "the website, narrower" — it is a native iOS
   app: a translucent nav bar, a bottom tab bar, sheets that slide up from
   the bottom, generous corner radii, list rows with chevrons, snap
   carousels instead of endless stacks, and long copy folded behind
   Read more / Read less so no screen is ever a wall of text.

   Companion JS: js/mobile.js (tab bar, sheet, clamping, accordions).
   ========================================================================== */

@media (max-width: 768px) {

  /* ======================================================================
     1. FOUNDATION
     ====================================================================== */
  :root {
    /* iOS-ish geometry. Phones want bigger radii than a 1440px canvas. */
    --m-radius-xl: 26px;
    --m-radius-lg: 20px;
    --m-radius-md: 16px;
    --m-radius-sm: 12px;

    --m-gutter: 20px;
    --m-tabbar-h: 60px;

    /* Safe areas — real values on iOS, 0 everywhere else. */
    --m-safe-top: env(safe-area-inset-top, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);

    --m-hairline: rgba(var(--ink-rgb), 0.09);
    --m-hairline-light: rgba(var(--paper-rgb), 0.14);
    --m-blur: saturate(180%) blur(20px);
    --m-spring: cubic-bezier(0.32, 0.72, 0, 1);
  }

  html {
    /* Stop iOS Safari inflating text in landscape. */
    -webkit-text-size-adjust: 100%;
  }

  body {
    /* Room for the fixed tab bar plus the home indicator. */
    padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom));
    overscroll-behavior-y: none;
  }

  /* Native apps never flash a grey box under a tap. */
  * { -webkit-tap-highlight-color: transparent; }

  /* Chrome does not get the long-press callout; body copy stays selectable. */
  .site-header, .m-tabbar, .nav-links, .btn, .m-tab, .m-more,
  .path-tab, .faq-item summary, .tile, .quest-card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* max() keeps the gutter clear of the notch in landscape. */
  .container {
    padding-inline: max(var(--m-gutter), env(safe-area-inset-left, 0px));
  }

  /* Anything that scrolls sideways gets momentum and no visible bar. */
  .m-scroller, .matrix-wrap, .legal__toc, .tag-row {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-scroller::-webkit-scrollbar,
  .matrix-wrap::-webkit-scrollbar,
  .tag-row::-webkit-scrollbar,
  .legal__toc::-webkit-scrollbar { display: none; }

  /* ======================================================================
     2. TYPE SCALE
     The desktop clamp()s bottom out too large for a 390px screen and every
     heading lands three lines deep. Tighten the whole ladder.
     ====================================================================== */
  .section { padding: 58px 0; }
  .section--tight { padding: 46px 0; }

  .section-head { margin-bottom: 30px; }
  .section-head h2 { font-size: 1.65rem; line-height: 1.16; margin-top: 10px; }
  .section-head p { margin-top: 12px; font-size: 0.98rem; line-height: 1.68; }

  .eyebrow { font-size: 0.64rem; letter-spacing: 0.14em; }
  .eyebrow::before { width: 16px; }

  h1 { letter-spacing: -0.02em; }
  h2, h3 { letter-spacing: -0.015em; }

  .sec-num { font-size: 0.68rem; }

  /* ======================================================================
     3. NAV BAR — translucent, safe-area aware, adaptive to what is behind it
     ====================================================================== */
  .site-header {
    padding: 8px 0;
    padding-top: calc(8px + var(--m-safe-top));
    transition: background 0.3s var(--m-spring), box-shadow 0.3s var(--m-spring),
                transform 0.35s var(--m-spring);
  }
  /* Scrolling down hides the bar and hands the whole screen to the content;
     the smallest flick back up brings it straight back. Set from mobile.js. */
  .site-header.m-nav-hidden { transform: translateY(-115%); }
  .site-header.is-scrolled {
    padding: 6px 0;
    padding-top: calc(6px + var(--m-safe-top));
    background: rgba(var(--paper-rgb), 0.74);
    -webkit-backdrop-filter: var(--m-blur);
    backdrop-filter: var(--m-blur);
    box-shadow: none;
    border-bottom: 0.5px solid var(--m-hairline);
  }

  /* Over a forest hero the bar tints dark rather than cream, the way an iOS
     bar takes on whatever is scrolling underneath it. */
  body.has-dark-hero .site-header.is-scrolled {
    background: rgba(var(--ink-rgb), 0.7);
    border-bottom-color: var(--m-hairline-light);
  }
  body.has-dark-hero .site-header.is-scrolled .brand__mark--dark { display: none; }
  body.has-dark-hero .site-header.is-scrolled .brand__mark--light { display: block; }
  body.has-dark-hero .site-header.is-scrolled .nav-icon-btn {
    background: rgba(var(--paper-rgb), 0.12);
    color: var(--off-white);
  }

  .nav-row { gap: 12px; }
  .brand img { height: 26px; }

  .nav-icon-btn { width: 38px; height: 38px; }
  .nav-icon-btn svg { width: 17px; height: 17px; }
  .nav-actions { gap: 8px; }

  /* The bottom tab bar carries navigation now, so the header hamburger
     steps back into a quiet secondary control. */
  .nav-toggle {
    width: 38px; height: 38px;
    background: rgba(var(--ink-rgb), 0.06);
    color: var(--forest);
  }
  .nav-toggle svg { width: 18px; height: 18px; }
  body.has-dark-hero .site-header:not(.is-scrolled) .nav-toggle,
  body.has-dark-hero .site-header.is-scrolled .nav-toggle {
    background: rgba(var(--paper-rgb), 0.12);
    color: var(--off-white);
  }

  /* ======================================================================
     4. MENU — an iOS bottom sheet, not a full-screen takeover
     ====================================================================== */
  .m-scrim {
    position: fixed;
    inset: 0;
    z-index: 997;
    background: rgba(6, 18, 13, 0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.34s var(--m-spring), visibility 0.34s;
  }
  .m-scrim.is-open { opacity: 1; visibility: visible; }

  .nav-links {
    /* Overrides the translateX drawer in style.css. */
    display: flex !important;
    position: fixed;
    inset: auto 0 0 0;
    height: auto;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--forest);
    border-radius: var(--m-radius-xl) var(--m-radius-xl) 0 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 10px 0 calc(18px + var(--m-safe-bottom));
    transform: translateY(101%);
    visibility: hidden;
    box-shadow: 0 -20px 60px rgba(6, 18, 13, 0.4);
    transition: transform 0.46s var(--m-spring), visibility 0.46s;
  }
  .nav-links.is-open { transform: translateY(0); visibility: visible; }

  /* Grabber handle */
  .nav-links::before {
    content: "";
    flex: none;
    width: 38px;
    height: 5px;
    border-radius: 99px;
    background: rgba(var(--paper-rgb), 0.28);
    margin: 0 auto 14px;
  }

  /* Menu rows read like a native list: full-width, hairline separated,
     left aligned, chevron pushed to the right edge. */
  .nav-links a:not(.btn) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-head);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--off-white);
    padding: 15px var(--m-gutter);
    margin: 0;
    border-bottom: 0.5px solid var(--m-hairline-light);
    transition: background 0.18s ease;
  }
  .nav-links a:not(.btn):last-of-type { border-bottom: none; }
  .nav-links a:not(.btn):active { background: rgba(var(--paper-rgb), 0.08); }
  .nav-links a:not(.btn)::after {
    /* Chevron drawn from two borders — no extra sprite symbol needed. */
    content: "";
    position: static;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(var(--paper-rgb), 0.36);
    border-bottom: 2px solid rgba(var(--paper-rgb), 0.36);
    transform: rotate(-45deg);
    background: none;
    transition: none;
    flex: none;
  }
  .nav-links a.is-current:not(.btn) { color: var(--accent-soft); }
  /* pages.css gives the current link a full-width 2px underline. Left alone
     that becomes a 350px bar rotated 45° straight across the sheet, so the
     chevron geometry has to be restated at this specificity. */
  .nav-links a.is-current:not(.btn)::after {
    width: 8px;
    height: 8px;
    background: none;
    border-color: var(--accent-soft);
  }

  .nav-links__cta {
    display: inline-flex !important;
    justify-content: center;
    margin: 16px var(--m-gutter) 0;
    padding: 15px 24px;
    font-size: 1rem;
    /* .btn--primary is forest on forest inside the sheet — invisible. The
       sheet's one action takes the accent instead. */
    background: var(--accent);
    color: var(--off-white);
    border-color: var(--accent);
  }
  .nav-links__cta::after { display: none; }

  body.m-locked { overflow: hidden; }

  /* ======================================================================
     5. BOTTOM TAB BAR
     ====================================================================== */
  .m-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 996;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    height: calc(var(--m-tabbar-h) + var(--m-safe-bottom));
    padding-bottom: var(--m-safe-bottom);
    background: rgba(var(--paper-rgb), 0.82);
    -webkit-backdrop-filter: var(--m-blur);
    backdrop-filter: var(--m-blur);
    border-top: 0.5px solid var(--m-hairline);
    transform: translateY(0);
    transition: transform 0.4s var(--m-spring);
  }
  /* Slides away while the menu sheet is up, so the sheet owns the screen. */
  .m-tabbar.is-hidden { transform: translateY(105%); }

  .m-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    padding: 6px 2px 4px;
    color: rgba(var(--ink-rgb), 0.5);
    font-family: var(--font-head);
    font-size: 0.62rem;
    font-weight: 600;
    transition: color 0.2s ease, transform 0.2s var(--m-spring);
  }
  .m-tab svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
    transition: transform 0.28s var(--m-spring);
  }
  .m-tab:active { transform: scale(0.9); }
  .m-tab.is-current { color: var(--accent); }
  .m-tab.is-current svg { transform: translateY(-1px) scale(1.06); }

  /* Booking is the one conversion action — it gets a filled pill. */
  .m-tab--cta { color: var(--accent); }
  .m-tab--cta svg {
    width: 30px; height: 30px;
    padding: 5px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--off-white);
    stroke-width: 2;
  }
  .m-tab--cta.is-current svg { transform: none; }

  /* ======================================================================
     6. FLOATING WHATSAPP — lifted clear of the tab bar
     ====================================================================== */
  .wa-float {
    right: 16px;
    bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom) + 14px);
    width: 54px;
    height: 54px;
    padding: 0;
    /* Tighter than the desktop shadow — it sits closer to the tab bar, and a
       wide one would smear across it. */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.14),
      0 6px 14px -4px rgba(15, 157, 82, 0.5),
      0 16px 30px -14px rgba(var(--ink-rgb), 0.5);
  }
  .wa-float svg { width: 26px; height: 26px; }
  .wa-float:active { transform: scale(0.92); }

  /* ======================================================================
     7. TOUCH FEEDBACK — the single biggest "this is an app" tell.
     Hover states do nothing on a phone; press states do everything.
     ====================================================================== */
  .btn {
    padding: 14px 24px;
    font-size: 0.92rem;
    min-height: 46px;
    transition: transform 0.16s var(--m-spring), background 0.2s ease, color 0.2s ease;
  }
  .btn:hover { transform: none; }
  .btn:active { transform: scale(0.96); }
  .btn--block { width: 100%; justify-content: center; }

  .page-hero__actions, .cta-band__actions, .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .page-hero__actions .btn,
  .cta-band__actions .btn,
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Cards depress slightly under a finger. */
  .price-card, .quest-card, .tile, .stack__card, .bento__cell,
  .coach-card, .pillar-card, .plan-card, .path-tab, .channel,
  .founder, .form-card, .index-row, .pick, .app-store-btn {
    transition: transform 0.18s var(--m-spring), box-shadow 0.18s var(--m-spring);
  }
  .price-card:active, .quest-card:active, .tile:active, .bento__cell:active,
  .coach-card:active, .pillar-card:active, .path-tab:active,
  .channel:active, .index-row:active, .pick:active, .app-store-btn:active {
    transform: scale(0.98);
  }
  /* Kill lift-on-hover artefacts that a touch device latches onto. */
  .bento__cell:hover, .tile:hover, .quest-card:hover,
  .coach-card:hover, .price-card:hover, .index-row:hover { transform: none; }

  /* ======================================================================
     8. CARD SHAPES — rounder, softer, iOS-grade
     ====================================================================== */
  .price-card, .quest-card, .stack__card, .bento__cell, .form-card,
  .coach-card, .plan-card, .plan-card--wide, .cta-band, .trainerize-panel,
  .founder, .split__media, .page-hero__media, .quiz-card, .shot-frame,
  .notice, .quote-box, .matrix-wrap, .summary, .booked__recap {
    border-radius: var(--m-radius-lg);
  }
  .tile, .pick, .channel, .app-store-btn, .path-tab {
    border-radius: var(--m-radius-md);
  }
  .price-card, .form-card, .quest-card, .coach-card, .founder {
    box-shadow: 0 4px 18px rgba(var(--ink-rgb), 0.06);
  }

  /* ======================================================================
     9. HORIZONTAL SNAP CAROUSELS
     Four price cards stacked vertically is three thousand pixels of
     scrolling. As a paged carousel it is one thumb swipe, which is how an
     app would present the same set. Applied by JS via .m-scroller.
     ====================================================================== */
  .m-scroller {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m-gutter);
    /* Break out of .container so cards can bleed to both screen edges. */
    margin-inline: calc(var(--m-gutter) * -1);
    /* overflow-x also clips vertically, so the padding has to clear anything
       that hangs outside a card — the "Most chosen" flag sits at top: -12px
       — plus the card's drop shadow. */
    padding: 18px var(--m-gutter) 12px;
    margin-top: -14px;
  }
  .m-scroller > * {
    scroll-snap-align: start;
    min-width: 0;
    margin-top: 0 !important;
    /* Desktop span classes (.bento__cell--3, plan-card--wide) would each
       claim several auto-columns and blow the row apart. */
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .m-scroller--wide { grid-auto-columns: 90%; }
  .m-scroller--narrow { grid-auto-columns: 46%; }

  /* Shelves scroll on their own, so the reveal animation must not leave a
     card off-screen-transformed inside one. */
  .m-scroller > .reveal { opacity: 1 !important; transform: none !important; }

  /* Page dots under a carousel */
  .m-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
  }
  .m-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(var(--ink-rgb), 0.18);
    transition: width 0.28s var(--m-spring), background 0.28s ease;
  }
  .m-dots span.is-active { width: 18px; background: var(--accent); }
  .section--forest .m-dots span { background: rgba(var(--paper-rgb), 0.2); }
  .section--forest .m-dots span.is-active { background: var(--accent-soft); }

  /* ======================================================================
     9b. MEDIA RAILS — the proof photos and the motion clips
     Both are horizontal galleries by design; on desktop GSAP pans them as
     you scroll. On a phone they had been folded into a two-up grid, which
     turned eight items into four screens of vertical scrolling and lost
     the gallery entirely. The GSAP pan is gated at 993px, so below that
     the row is free to be what it should be: a native swipe rail, which
     is also what any app would use for a media set.
     ====================================================================== */
  .proof-viewport,
  .motion-viewport {
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
  .proof-wrap { padding-block: 0; }

  .proof-row,
  .motion-row {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: none !important;
    width: auto !important;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* Snap points align to the scrollport border edge unless told otherwise,
       which would put card one under the gutter padding and leave the rail
       opening already scrolled. */
    scroll-padding-inline: var(--m-gutter);
    scrollbar-width: none;
    /* .proof-wrap and .motion-wrap are already full-bleed, so the rail needs
       no negative margin — just the gutter as padding. That lines the first
       card up with the heading and the swipe hint above it, while the rail
       still runs off the right edge so the next card is visibly cut. */
    padding-inline: var(--m-gutter);
    /* Room for the cards' own drop shadows, which overflow-x would clip. */
    padding-block: 8px 14px;
  }
  .proof-row::-webkit-scrollbar,
  .motion-row::-webkit-scrollbar { display: none; }

  /* One photo fills the width, the next is clipped at the right edge — that
     peek is what says "keep going". */
  .proof-row { grid-auto-columns: 80%; }
  .motion-row { grid-auto-columns: 56%; }

  .proof-cell,
  .motion-cell {
    scroll-snap-align: start;
    flex: none;
    width: auto;
    min-width: 0;
    height: auto;
    aspect-ratio: 3 / 4.3;
    margin-top: 0 !important;
  }
  .motion-cell { aspect-ratio: 9 / 15; }
  /* Square, same as the desktop rail. */
  .proof-cell { aspect-ratio: 100 / 82; }
  .proof-cell .ph { height: 100%; }
  .proof-cell::after { inset: 8px; }
  .proof-cell__mark { top: 17px; left: 17px; width: 24px; }

  /* ======================================================================
     9c. CHIP RAILS
     Centred wrapping chip rows drop to one chip per line at 390px, which
     reads as a bullet list rather than a set of tags. Scrolled sideways
     they stay a set and cost one line instead of six — the same rail the
     path tabs already use.
     ====================================================================== */
  .proof-tags,
  .club-chips ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Without these two a nowrap row reports its full width as min-content,
       and the grid track it sits in stretches to match — which is what blew
       the community section out to 1097px wide. */
    min-width: 0;
    max-width: 100vw;
    margin-inline: calc(var(--m-gutter) * -1);
    padding-inline: var(--m-gutter);
    padding-block: 2px;
  }
  .proof-tags::-webkit-scrollbar,
  .club-chips ul::-webkit-scrollbar { display: none; }
  .proof-tags > *,
  .club-chips li { flex: 0 0 auto; white-space: nowrap; }

  /* Same floor for the wrappers the rails sit inside. */
  .community > *,
  .community-copy > *,
  .club-chips,
  .proof-wrap > * { min-width: 0; }
  .proof-tags span { font-size: 0.82rem; padding: 8px 15px; }

  /* The motion section keeps a 100px desktop foot that leaves a dead band
     of forest under the rail on a phone. */
  .motion-section { padding-bottom: 46px; }

  /* ======================================================================
     10. READ MORE / READ LESS
     Long copy folds to a few lines behind a fade and opens in place.
     --m-fade is set from JS to whatever background the block actually sits
     on, so the gradient never shows a seam.
     ====================================================================== */
  .m-clamp {
    position: relative;
    overflow: hidden;
    /* --m-fold is a pixel value measured in JS from the block's own line
       height, so the fold lands on a line rather than through one. */
    max-height: var(--m-fold, 11em);
    transition: max-height 0.42s var(--m-spring);
  }
  .m-clamp::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4.2em;
    /* Both stops are the same colour, one at zero alpha. Fading from the
       keyword `transparent` would run the gradient through black in Safari
       and leave a grey smear over a cream section. */
    background: linear-gradient(to bottom,
      var(--m-fade-0, rgba(var(--paper-rgb), 0)),
      var(--m-fade, #fbf9f8) 88%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .m-clamp.is-open { max-height: var(--m-full, 4000px); }
  .m-clamp.is-open::after { opacity: 0; }

  .m-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 0;
    border: none;
    background: none;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--accent);
    transition: opacity 0.2s ease;
  }
  .m-more:active { opacity: 0.55; }
  .m-more::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.32s var(--m-spring);
  }
  .m-more.is-open::after { transform: rotate(-135deg) translate(-2px, -2px); }
  /* On dark ground the control picks up the lighter accent. */
  .section--forest .m-more,
  .bento__cell--dark .m-more,
  .stack__card--dark .m-more { color: var(--accent-soft); }

  /* ======================================================================
     11. HEROES — home and inner pages
     ====================================================================== */
  /* Just clear of the bar, so the image tucks under it the way an app's
     featured artwork does instead of floating below a band of background. */
  .hero { padding: 60px 0 34px; }
  .hero-copy p { font-size: 1rem; line-height: 1.65; }
  .hero-ghost { display: none; }

  /* ----------------------------------------------------------------------
     HOME HERO — an iOS app screen, not a web hero.

     Desktop shows a tilted card on a second tilted panel that then travels
     down the page on scroll. None of that survives a 390px screen, and the
     travel is already switched off under 993px in js/script.js. What takes
     its place is the shape an app actually uses at the top of a screen:

       - a full-bleed featured image running edge to edge, tucked under the
         bar and curving into the copy below it;
       - the caption sitting ON the image behind a blurred material, the way
         iOS floats a label over artwork, rather than under it;
       - a Large Title — heavy, tight, left-aligned;
       - one filled primary action with two tinted secondaries beneath it,
         instead of three identical outlined buttons with no hierarchy;
       - the proof line as a plain caption row, not a floating pill card.
     ---------------------------------------------------------------------- */
  .hero-grid { gap: 22px; }
  .hero-visual {
    order: -1;
    /* Break the container gutter so the image meets both screen edges. */
    margin: 0 calc(var(--m-gutter) * -1) 2px;
    padding: 0;
  }
  /* The decorative tilted panel has nowhere to sit at this width. */
  .hero-visual::before { display: none; }

  .hero-visual .ph {
    width: auto;
    max-width: none;
    max-height: none;
    margin-left: 0;
    aspect-ratio: 4 / 4.1;
    transform: none;
    /* Edge to edge and square on all four corners -- the video runs to the
       screen like a full-bleed app header, not a card sitting on the page. */
    border-radius: 0;
    box-shadow: none;
  }
  /* A scrim, so the caption stays legible over any frame of the video. */
  .hero-visual .ph::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 46%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(var(--ink-rgb), 0.58), rgba(var(--ink-rgb), 0));
  }
  .hero-visual .ph__tag {
    position: relative;
    z-index: 2;
    margin: 0 0 20px 20px;
    padding: 8px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--off-white);
    background: rgba(var(--paper-rgb), 0.18);
    border: 0.5px solid rgba(var(--paper-rgb), 0.32);
    -webkit-backdrop-filter: var(--m-blur);
    backdrop-filter: var(--m-blur);
  }
  .hero-visual .ph__tag svg { color: var(--off-white); }

  /* --- Large Title --- */
  .hero .eyebrow { font-size: 0.63rem; letter-spacing: 0.18em; }
  .hero h1 {
    margin-top: 12px;
    font-size: clamp(2.25rem, 10.4vw, 2.7rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
  }
  .hero-copy p { margin-top: 12px; font-size: 0.97rem; line-height: 1.6; }

  /* --- Actions: one primary, two tinted secondaries --- */
  .hero-actions { gap: 10px; width: 100%; margin-top: 26px; }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 0.95rem;
  }
  .hero-actions .btn--outline {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: transparent;
    color: var(--accent);
  }
  .hero-actions .btn--outline:active { background: rgba(var(--accent-rgb), 0.16); }

  /* --- Proof line: a caption, not a card --- */
  .hero-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-proof span { font-size: 0.85rem; line-height: 1.45; color: var(--ink-soft); }
  .hero-proof strong { color: var(--forest); }

  .page-hero { padding-top: 106px; }
  .page-hero__grid { gap: 30px; padding-bottom: 38px; }
  .page-hero__inner h1 { font-size: 2rem; }
  .page-hero__lead { font-size: 1rem; line-height: 1.65; }
  .page-hero__ghost { display: none; }
  /* Except on the 404, where the numeral is the design rather than a flourish
     behind it — kept, at a size that fits the screen. */
  .page-hero__ghost--lost {
    display: block;
    font-size: 11rem;
    transform: translate(-50%, -52%);
  }
  .page-hero__media { aspect-ratio: 4 / 3; }

  .page-hero--lost { padding-top: 118px; padding-bottom: 64px; }
  .page-hero--lost .page-hero__actions { justify-content: stretch; }

  .lost-grid { grid-template-columns: 1fr; gap: 12px; }
  .lost-card { padding: 22px 20px 20px; }
  .lost-card__icon { width: 42px; height: 42px; margin-bottom: 16px; }
  .lost-card__num { top: 18px; right: 20px; font-size: 1.3rem; }
  .lost-card:active { transform: scale(0.99); }
  .page-hero__caption { font-size: 0.78rem; }
  .page-hero--compact { padding-top: 100px; }

  /* The legal heroes hold a hand-set 413px so every hero on the site has the
     same depth. On a phone that is half a screen of empty gradient above the
     title — drop it and let the copy set the height. */
  .page-hero--simple .page-hero__grid { min-height: 0; padding-bottom: 30px; }

  .breadcrumb { font-size: 0.74rem; }

  /* A grid item's `min-width: auto` resolves to its min-content, so one wide
     child can force its whole track past the viewport — on club.html that
     blew the page out to 1065px and pushed the header's WhatsApp and menu
     buttons clean off the right edge. Every layout wrapper's children get an
     explicit floor. */
  .split > *,
  .page-hero__grid > *,
  .footer-top > *,
  .bento > *,
  .stack__card > *,
  .legal > *,
  .form-grid > *,
  .product > *,
  .nav-row > * { min-width: 0; }

  /* Tag rows scroll instead of wrapping into four ragged lines. */
  .tag-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    max-width: 100vw;
    margin-inline: calc(var(--m-gutter) * -1);
    padding-inline: var(--m-gutter);
  }
  .tag-row .tag { flex: none; }

  /* ======================================================================
     BELIEF QUOTE
     The desktop block is 220px of padding around a 640px minimum, because
     the hero video travels into its empty left half as you scroll. That
     travel is switched off below 993px (js/script.js), so on a phone the
     same rule left a near-empty 758px screen holding one sentence.

     No card, no rule, no shadow: at this size the sentence IS the design.
     It gets real breathing room and a display-scale setting, the way an
     editorial pull quote is set — a box around it would only make it look
     like a component instead of a statement.
     ====================================================================== */
  .belief {
    display: block;
    min-height: 0;
    padding: 58px 0 62px;
  }
  .belief-inner { justify-content: flex-start; }
  .belief-copy {
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  /* The mark sits quietly above the line rather than competing with it. */
  .belief-copy .quote-mark {
    width: 34px;
    height: 34px;
    color: var(--accent);
    opacity: 0.42;
  }

  .belief-copy blockquote {
    margin-top: 16px;
    font-size: clamp(1.65rem, 7.4vw, 2rem);
    line-height: 1.24;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  /* A short rule leads into the attribution, matching the eyebrow elsewhere
     on the page so the section still belongs to the same system. */
  .belief-copy cite {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
  }
  .belief-copy cite::before {
    content: "";
    width: 22px;
    height: 1.5px;
    flex: none;
    background: var(--accent);
  }

  /* ======================================================================
     12. FORMS — native-feeling fields, and never a zoom on focus
     ====================================================================== */
  .field input, .field textarea, .field select,
  .newsletter-form input, .quiz-email-form input {
    /* 16px is the threshold below which iOS auto-zooms the viewport. */
    font-size: 16px;
    border-radius: var(--m-radius-sm);
    padding: 14px 16px;
    -webkit-appearance: none;
    appearance: none;
  }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
  }
  .field label { font-size: 0.8rem; }
  .form-card { padding: 24px 18px; }
  .form-grid { gap: 14px; }
  .form-note { font-size: 0.78rem; }

  /* ======================================================================
     13. FAQ — list rows with a native disclosure feel
     ====================================================================== */
  .faq-item summary { padding: 17px 0; font-size: 0.98rem; gap: 14px; }
  .faq-item summary:active { opacity: 0.6; }
  .faq-item p { padding-right: 0; padding-bottom: 18px; font-size: 0.94rem; }
  .faq-icon { width: 28px; height: 28px; }
  .faq-head { margin-bottom: 24px; }
  .faq-group { margin-top: 34px; padding-bottom: 10px; font-size: 0.68rem; }

  /* ======================================================================
     14. MATRIX — comparison table gets a full-bleed swipe affordance
     ====================================================================== */
  .matrix-wrap {
    margin-inline: calc(var(--m-gutter) * -1);
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }
  .matrix { min-width: 660px; font-size: 0.84rem; }
  .matrix thead th { padding: 14px 12px; font-size: 0.66rem; }
  .matrix tbody th, .matrix tbody td { padding: 13px 12px; }
  .matrix-hint { display: block; text-align: center; font-size: 0.76rem; margin-top: 12px; }

  /* ======================================================================
     15. LEGAL PAGES — the contents rail becomes a chip strip and the body
     becomes an accordion (built in JS), so a seventeen-section document is
     navigable rather than a single endless column.
     ====================================================================== */
  .legal { gap: 22px; }
  .legal__toc {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-inline: calc(var(--m-gutter) * -1);
    padding: 0 var(--m-gutter) 4px;
  }
  .legal__toc h4 { display: none; }
  .legal__toc a {
    flex: none;
    border: 1px solid var(--m-hairline);
    border-left: 1px solid var(--m-hairline);
    border-radius: 99px;
    padding: 8px 15px;
    margin: 0;
    font-size: 0.8rem;
    white-space: nowrap;
    background: var(--white);
  }
  .legal__toc a.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--off-white);
  }

  .legal__meta { flex-direction: column; gap: 6px; padding: 14px 0 20px; font-size: 0.8rem; }

  /* JS wraps each `h2 + following content` run in a .m-acc <details>. */
  .m-acc { border-bottom: 0.5px solid var(--m-hairline); }
  .m-acc > summary {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--forest);
    scroll-margin-top: 92px;
  }
  .m-acc > summary::-webkit-details-marker { display: none; }
  .m-acc > summary:active { opacity: 0.6; }
  .m-acc > summary::after {
    content: "";
    flex: none;
    width: 8px; height: 8px;
    margin-top: 6px;
    border-right: 2px solid rgba(var(--ink-rgb), 0.35);
    border-bottom: 2px solid rgba(var(--ink-rgb), 0.35);
    transform: rotate(45deg);
    transition: transform 0.3s var(--m-spring);
  }
  .m-acc[open] > summary { color: var(--accent); }
  .m-acc[open] > summary::after { transform: rotate(-135deg); border-color: var(--accent); }
  .m-acc__body { padding-bottom: 20px; }
  .m-acc__body > *:first-child { margin-top: 0; }

  .legal__body h2 {
    /* The h2s now live inside summaries — neutralise the desktop rule. */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    font-size: 1rem;
  }
  .legal__body p, .legal__body ul li { font-size: 0.95rem; line-height: 1.72; }

  /* ======================================================================
     16. FOOTER — collapsible columns, app-style
     ====================================================================== */
  /* 140px of footer runway is a desktop flourish; on a phone it is dead
     screen between the last CTA and the links. */
  .site-footer { padding-top: 54px; padding-bottom: 20px; }
  .footer-top { grid-template-columns: 1fr; row-gap: 0; padding-bottom: 20px; }
  .footer-bottom { padding: 20px 0; }
  .footer-brand { margin-bottom: 26px; }
  .footer-brand p { font-size: 0.92rem; }

  .footer-col { border-top: 0.5px solid var(--m-hairline-light); }
  .footer-col h5 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 15px 0;
  }
  .footer-col h5::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid rgba(var(--paper-rgb), 0.4);
    border-bottom: 2px solid rgba(var(--paper-rgb), 0.4);
    transform: rotate(45deg);
    transition: transform 0.3s var(--m-spring);
  }
  .footer-col.is-open h5::after { transform: rotate(-135deg); }

  .footer-col ul,
  .footer-col.footer-newsletter > *:not(h5) {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    /* max-height alone leaves the children's own margins behind — the
       newsletter block kept 46px of empty space under a collapsed row. */
    margin-top: 0;
    margin-bottom: 0;
    transition: max-height 0.4s var(--m-spring), opacity 0.3s ease, margin 0.4s var(--m-spring);
  }
  .footer-col.is-open ul,
  .footer-col.is-open.footer-newsletter > *:not(h5) {
    max-height: 460px;
    opacity: 1;
    margin-bottom: 12px;
  }
  .footer-col ul li a { display: block; padding: 7px 0; }

  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; font-size: 0.78rem; }
  .footer-social a:active { transform: scale(0.9); }

  /* ======================================================================
     17. PER-COMPONENT MOBILE PASSES
     ====================================================================== */

  /* --- CTA band --- */
  .cta-band { padding: 38px 22px; }
  .cta-band h2 { font-size: 1.5rem; }

  /* --- Stack: sticky cards are a desktop idea; flatten to a list --- */
  .stack__card { padding: 24px 20px; gap: 16px; box-shadow: 0 4px 18px rgba(var(--ink-rgb), 0.06); }
  /* An outlined numeral this small reads as a smudge, and disappears on the
     dark theme, so on a phone the step number is solid terracotta. */
  .stack__num,
  .stack__card--dark .stack__num,
  :root[data-theme="dark"] .stack__num,
  :root[data-theme="dark"] .stack__card--dark .stack__num {
    font-size: 1.6rem;
    color: var(--accent);
    -webkit-text-stroke: 0;
  }
  .stack__list { grid-column: auto; }

  /* --- Bento --- */
  .bento { gap: 12px; }
  .bento__cell { padding: 22px 20px; }
  .bento__big { font-size: 2rem; }

  /* --- Split --- */
  .split { gap: 24px; }
  .split__copy h2 { font-size: 1.55rem; }

  /* --- Product rows (coaching / plans) --- */
  .product { gap: 22px; padding: 34px 0; }
  .product__head h2 { font-size: 1.55rem; }
  .product__kicker { font-size: 0.72rem; }
  .product__media { border-radius: var(--m-radius-lg); }
  .product__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .product__foot .btn { width: 100%; justify-content: center; }

  /* --- Price cards --- */
  .price-card { padding: 24px 20px; }
  .price-card__amount { font-size: 1.9rem; }
  .price-card .btn { width: 100%; justify-content: center; }

  /* --- Check lists --- */
  .check-list li { font-size: 0.93rem; }

  /* --- Index rows (clubs / inclusions) --- */
  .index-row { padding: 16px 2px; }
  .index-row__name { font-size: 1.02rem; }
  .index-row__desc { font-size: 0.88rem; }

  /* --- Tiles (sport clubs) --- */
  .tile-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 16px 14px; }
  .tile__name { font-size: 0.92rem; }
  .tile__num { font-size: 0.66rem; }

  /* --- Quest cards: short labels, so two up rather than a long column --- */
  .quest-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quest-card { padding: 18px 16px; }
  .quest-card h4 { font-size: 0.98rem; }
  .quest-card__num { font-size: 0.66rem; }
  .quest-card__foot { flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .quest-card__status { font-size: 0.7rem; }

  /* --- Founders / team --- */
  .founders { grid-template-columns: 1fr; gap: 16px; }
  .founder { grid-template-columns: 1fr; }
  .founder__photo { aspect-ratio: 4 / 3; width: 100%; height: auto; }
  .founder__body { padding: 22px 20px; }
  .bio-modal__dialog { border-radius: var(--m-radius-xl); }

  /* --- Story (about) --- */
  .story { gap: 26px; }
  .story__media { position: static; }
  .story__pull { font-size: 1.15rem; }

  /* --- Photo strip --- */
  .photo-strip { gap: 10px; }

  /* --- Booking --- */

  /* ======================================================================
     BOOKING — an iOS grouped list, not a grid of cards
     The plan chooser is repeat(3, 1fr) on desktop and nothing collapses it,
     so six options were sharing 390px in three columns. Here the whole set
     becomes one rounded group with hairline dividers and a selection ring
     on the right — the pattern every phone already uses for "pick one of
     these", so it needs no explaining.
     ====================================================================== */
  .booking { gap: 26px; }
  .booking__steps { gap: 28px; }

  /* The step marker shrinks and tucks in; 56px of indent is a lot of a
     390px screen to spend on a number. A hairline runs down behind the
     markers and bridges the grid gap, so the five steps read as one
     sequence you are working through rather than five separate blocks. */
  .booking__step { padding-left: 40px; }
  .booking__step::before {
    width: 28px;
    height: 28px;
    top: 1px;
    font-size: 0.76rem;
    z-index: 1;
  }
  .booking__step::after {
    content: "";
    position: absolute;
    left: 13px;               /* centred under the 28px marker */
    top: 14px;                /* from the marker's middle */
    bottom: -28px;            /* down through the 28px gap to the next step */
    width: 2px;
    border-radius: 1px;
    background: rgba(var(--ink-rgb), 0.13);
    z-index: 0;
  }
  /* Nothing to connect to after the last one. */
  .booking__step:last-child::after,
  .booking__step.is-last-visible::after { display: none; }
  .booking__submit { margin-top: 28px; padding-left: 40px; }

  .booking__step h3 { font-size: 1.06rem; }
  .booking__step > p { font-size: 0.88rem; }

  /* --- the group --- */
  .pick,
  .pick--pkg,
  .pick--pay {
    display: block;
    grid-template-columns: none;
    gap: 0;
    padding: 0;
    margin-top: 16px;
    border-radius: var(--m-radius-lg);
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(var(--ink-rgb), 0.1);
  }

  /* --- a row --- */
  .pick label {
    padding: 15px 52px 16px 18px;
    border: 0;
    border-radius: 0;
    background: none;
    position: relative;
  }
  .pick label + input + label,
  .pick label ~ label { border-top: 0; }
  .pick input + label { border-top: 1px solid rgba(var(--ink-rgb), 0.09); }
  .pick input:first-of-type + label { border-top: 0; }
  .pick label:hover { transform: none; border-color: transparent; }
  .pick input:checked + label { background: rgba(var(--accent-rgb), 0.08); }

  /* Selection ring, filled with a tick once chosen. */
  .pick label::after {
    content: "";
    position: absolute;
    right: 17px;
    top: 17px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--ink-rgb), 0.26);
    transition: background 0.2s var(--m-spring), border-color 0.2s var(--m-spring);
  }
  .pick input:checked + label::after {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  }

  .pick__name { font-size: 0.98rem; }
  .pick__meta { margin-top: 3px; font-size: 0.8rem; }
  .pick__rate { margin-top: 5px; }
  .pick__flag { margin-bottom: 7px; }

  /* Packages read as "what you get / what it costs", so the price sits out
     to the right on the same line as the name. */
  /* Grid rather than flex: the badge is optional, and auto-flow places the
     name and price on one row whether it is there or not. A flex line-break
     would need the badge to fill the row, which stretches the pill. */
  .pick--pkg label {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    row-gap: 4px;
    column-gap: 12px;
  }
  .pick--pkg .pick__flag { grid-column: 1 / -1; justify-self: start; margin-bottom: 3px; }
  .pick--pkg .pick__name { grid-column: 1; }
  .pick--pkg .pick__price { grid-column: 2; justify-self: end; margin-top: 0; font-size: 1rem; }
  .pick--pkg .pick__rate { grid-column: 1 / -1; margin-top: 0; }

  /* The pay step is two long options, so they keep their own room. */
  .pick--pay label { padding: 18px 52px 20px 18px; }
  .pick--pay .pick__name { font-size: 1rem; }
  .pick__amount { margin-top: 12px; font-size: 1.15rem; }
  .pay-marks { margin-top: 12px; gap: 7px; }
  .pay-marks span { font-size: 0.62rem; }

  .pay-secure { margin-top: 16px; font-size: 0.78rem; }

  /* --- summary --- */
  .summary { padding: 22px 20px 24px; position: static; }
  .summary h3 { font-size: 1.45rem; }
  .summary__total strong { font-size: 1.3rem; }
  .pay-marks { flex-wrap: wrap; gap: 8px; }

  /* --- Quiz --- */
  .quiz-hero { padding: 104px 0 60px; }
  .quiz-card { padding: 26px 20px; }
  .quiz-option { padding: 15px 16px; font-size: 0.95rem; }
  .quiz-option:active { transform: scale(0.98); }
  .quiz-result__actions { flex-direction: column; }
  .quiz-result__actions .btn { width: 100%; justify-content: center; }

  /* --- App page --- */
  .app-store-buttons { flex-direction: column; align-items: stretch; gap: 10px; }
  .app-store-btn { justify-content: center; }
  .shot-frame { padding: 18px; }
  .page-hero__media--app { padding: 20px; }

  /* --- Modals --- */
  .video-modal__dialog, .app-modal__dialog {
    border-radius: var(--m-radius-xl);
    width: calc(100% - 32px);
    max-width: none;
  }
  .video-modal__close, .app-modal__close, .bio-modal__close { width: 40px; height: 40px; }

  /* --- Home: path tabs become a scrollable chip rail.
     A four-up segmented control cannot hold "With a Community" at 390px
     without wrapping every label onto three lines, so the tabs become
     single-line chips that scroll — the App Store category pattern. --- */
  .path-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px 0;
    background: none;
    border-radius: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* No scroll snapping here: a snap point on the first chip pulls the
       container past its own padding and clips that chip against the
       screen edge. Free scrolling keeps the 20px inset. */
    margin-inline: calc(var(--m-gutter) * -1);
    padding-inline: var(--m-gutter);
  }
  .path-tabs::-webkit-scrollbar { display: none; }
  .path-tab {
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--ink-rgb), 0.14);
    background: var(--white);
  }
  .path-tab.is-active {
    background: var(--forest);
    border-color: var(--forest);
  }
  .path-tab.is-active .path-tab__text strong { color: var(--off-white); }
  .path-tab.is-active .path-tab__icon { background: rgba(var(--paper-rgb), 0.14); color: var(--off-white); }
  .path-tab__icon { width: 26px; height: 26px; flex: none; }
  .path-tab__icon svg { width: 15px; height: 15px; }
  .path-tab__text { white-space: nowrap; }
  .path-tab__text strong { font-size: 0.85rem; }
  /* The "Elite · Remote" sub-label is what the panel below already says. */
  .path-tab__text small { display: none; }

  /* --- Home: the footer bar under each path panel.
     Three items of three different widths wrapping left-aligned read as a
     spill, not a bar. On a phone it becomes a proper footer block: the
     message on its own line, then the actions as equal full-width rows. --- */
  .path-panel__foot {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 26px;
    padding: 18px 20px 20px;
    border-radius: var(--m-radius-lg);
    background: var(--white);
    border: 1px solid rgba(var(--ink-rgb), 0.09);
  }
  .path-panel__price {
    text-align: center;
    margin-bottom: 4px;
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .path-panel__price strong { font-size: 1rem; }
  .path-panel__foot .btn { width: 100%; justify-content: center; }

  /* --- Home: stats --- */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item { padding: 20px 12px; }

  /* --- Home: coach cards --- */
  .coach-card { padding: 24px 20px; }

  /* --- Home: pillars / steps ---
     padding:0 dates from when these stacked as a plain list. They are shelf
     cards now, and the pillar card still carries a background, border and
     radius from style.css — with no padding the number, icon and type sat
     flush against all four edges. The heading rules also targeted h3; the
     markup uses h4, so they had never applied. */
  .pillar-card { padding: 24px 20px 26px; }
  .pillar-card__num { top: 20px; right: 20px; }

  /* The step card is a divider column rather than a filled card, so it keeps
     its rule — but every card in a shelf needs the same inset, including the
     first, which drops its padding on desktop to sit flush with the grid. */
  .step-card,
  .step-card:first-child {
    padding: 2px 16px 4px 20px;
    border-left: 1px solid rgba(var(--ink-rgb), 0.12);
  }

  .pillar-card h4, .step-card h4 { font-size: 1.08rem; }

  /* --- Home: app teaser --- */
  .app-phone__frame { width: 220px; }
  .app-links { gap: 10px 18px; }

  /* --- Bands --- */
  .corporate-band__inner, .quiz-band__inner { padding: 26px 20px; gap: 14px; }
  .corporate-band .btn, .quiz-band .btn { width: 100%; justify-content: center; }

  /* --- Marquee strip --- */
  .strip { padding: 10px 0; }
  .strip__group { font-size: 0.78rem; }

  /* ======================================================================
     18. MOTION — respect the system setting
     ====================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .nav-links, .m-scrim, .m-tabbar, .m-clamp, .m-more::after,
    .footer-col ul, .m-acc > summary::after {
      transition-duration: 0.01ms !important;
    }
    .wa-float::before, .wa-float::after { animation: none; }
  }
}

/* ==========================================================================
   Above the mobile breakpoint the app chrome must not exist. The elements
   are only injected on mobile, but a phone rotated into a tablet-width
   landscape must not be left with a tab bar or a half-clamped paragraph.
   ========================================================================== */
@media (min-width: 769px) {
  .m-tabbar, .m-scrim, .m-more, .m-dots { display: none !important; }
  .m-clamp { max-height: none !important; overflow: visible !important; }
  .m-clamp::after { display: none !important; }
  .m-scroller { overflow: visible !important; }
}

@media (max-width: 768px) {
  /* ======================================================================
     SWIPE HINT
     The rails bleed off the right edge, which reads as "there is more"
     to anyone who has used an app — but not to everyone. A short label
     above the rail says it outright.
     ====================================================================== */
  .swipe-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sage);
  }
  .swipe-hint svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--accent);
    animation: swipe-nudge 1.9s var(--m-spring) infinite;
  }
  /* The media rails sit outside .container, so their label pays for its own
     gutter to line up with the heading above. */
  .swipe-hint--bleed { padding-inline: var(--m-gutter); }
  /* .m-scroller pulls itself up by 14px to close the gap under a section
     head; with a label in between that would drag the rail over the text. */
  .swipe-hint + .m-scroller { margin-top: 0 !important; }
  @keyframes swipe-nudge {
    0%, 62%, 100% { transform: translateX(0); }
    76%           { transform: translateX(5px); }
  }
  .section--forest .swipe-hint { color: rgba(var(--paper-rgb), 0.62); }
  .section--forest .swipe-hint svg { color: var(--accent-soft); }

  @media (prefers-reduced-motion: reduce) {
    .swipe-hint svg { animation: none; }
  }
}

@media (max-width: 768px) {
  /* App screenshots become a rail like every other card row. The shots have
     a fixed 184px width on desktop; inside a 46% column they take the column
     instead, capped so they never scale past their native size. */
  .m-scroller .shot,
  .m-scroller .shot img { width: 100%; max-width: 184px; }
  .m-scroller .shot figcaption { margin-top: 12px; font-size: 0.78rem; }
}

@media (max-width: 768px) {
  /* ======================================================================
     SHEET ANCHORING
     A position:fixed child is laid out against the nearest ancestor that
     has a transform, a filter or a backdrop-filter — not against the
     viewport. The bar has all of those at different moments: a blur once
     you scroll, and a translate once it auto-hides. So opening the menu
     after scrolling positioned the sheet inside the bar's own box and it
     slid off the top of the screen instead of up from the bottom.

     While the sheet is open the bar drops both, which hands the sheet back
     to the viewport. The blur is not missed — the scrim is over the page
     anyway — and mobile.js also clears .m-nav-hidden so the bar is there
     to close the sheet with.
     ====================================================================== */
  body.m-locked .site-header {
    /* transition:none matters as much as the other two -- without it the bar
       animates back over 0.35s, and for those 350ms it still has a transform
       and is still the containing block, so the sheet is laid out against a
       moving box. js/mobile.js also forces this inline before the sheet opens. */
    transition: none !important;
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (max-width: 768px) {
  /* ======================================================================
     "THE APP IS LIVE" BANNER — phone
     On a phone this is a notification, not a corner card: full width, sitting
     directly on the tab bar, one line of message and one thing to tap. The
     store name is dropped from the button because the link already goes to
     the right store, and at this width the extra words push the layout.
     ====================================================================== */
  .app-live {
    right: 0;
    left: 0;
    bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom));
    width: auto;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "icon text cta close";
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 14px;
    border-radius: var(--m-radius-lg) var(--m-radius-lg) 0 0;
    border-bottom: 0;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.3);
  }

  .app-live__icon { width: 40px; height: 40px; border-radius: 10px; padding: 4px; }
  .app-live__title { font-size: 0.88rem; }
  .app-live__sub {
    margin-top: 2px;
    font-size: 0.76rem;
    line-height: 1.35;
    /* One line only — the headline is the message. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .app-live__cta {
    min-height: 38px;
    padding: 0 15px;
    font-size: 0.83rem;
    gap: 6px;
  }
  .app-live__store { display: none; }
  .app-live__cta svg { width: 13px; height: 13px; }

  .app-live__close {
    width: 26px;
    height: 26px;
    margin: 0;
    align-self: center;
  }

  /* The WhatsApp button already sits above the tab bar; while the banner is
     up it goes above that instead. Driven by a class on <body>, because the
     button comes before the appended banner in the DOM. */
  body.has-app-live .wa-float {
    bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom) + 88px);
  }
}