/* ============================================================================
   mobile.css — everything this site does differently on a phone.
   ============================================================================

   WHY THIS FILE EXISTS SEPARATELY
   index.html carries all of its CSS inline and is actively edited by other
   work. Keeping the phone rules here means the shared-file diff is two lines
   per page (a <link> and a <script>) instead of a merge conflict on every
   push.

   ⚠️  HOW THESE RULES WIN — READ BEFORE ADDING ANYTHING
   This stylesheet is linked in <head>, but index.html has FOUR more <style>
   blocks *after* </head> (lines ~2611, ~3140, ~4001, ~4294) plus a fifth that
   vera-concierge.js injects into the head at runtime. A <link> in <head>
   therefore LOSES on document order to all of them — and those blocks own
   several of the exact declarations being corrected here.

   So these rules do not rely on order. Every selector is prefixed `html`,
   which costs one element in specificity — (0,1,0) becomes (0,1,1) — and beats
   every one of those blocks no matter where it sits. That is why `html` looks
   redundant on each line: it is load-bearing. Removing it silently reverts the
   rule.

   `!important` is reserved for the two cases where specificity genuinely
   cannot win, each marked at its use site. Do not reach for it elsewhere.

   Everything is inside one `max-width: 640px` query. Desktop is untouched.
   ========================================================================= */

@media (max-width: 640px) {

  /* ── Payload ──────────────────────────────────────────────────────────────
     The roster's weight is handled almost entirely OUTSIDE this file, and the
     reason is worth recording because the CSS-only version looked right and
     was worthless.

     Hiding the sixteen <video autoplay loop> elements from here does stop them
     rendering — measured, 16 visible to 0 — and moves the bytes on the wire by
     nothing: 41.4 MB before, 41.4 MB after. Chromium starts the media load
     when the element is parsed and never asks whether it will be displayed.
     A stylesheet cannot arrive early enough to matter, at any specificity.

     What actually worked: mobile-shell.js strips `src` before the loader runs
     (the webms), and the `poster` attributes in index.html now point at the
     *-poster.webp files that were already in the repo and never referenced
     (mei.png 1,480,199 bytes → mei-poster.webp 11,006 — same picture, 134×).
     A video with no src displays its poster indefinitely, so the roster still
     shows every face; it just shows a still instead of a loop.

     That leaves this file nothing to do here, which is the correct outcome.
     If you are tempted to re-add `display:none` for the videos: it would hide
     the posters too, and buy nothing.
     ---------------------------------------------------------------------- */

  /* ── iOS zoom-on-focus ────────────────────────────────────────────────────
     Safari zooms the entire page when a focused field's text is under 16px,
     and there is no way to undo that from CSS — the page is left scrolled and
     magnified with the rest of the layout off-screen. The only fix is the font
     size. 16px is a floor, not a preference.

     The bare `input/select/textarea` line catches unstyled fields such as the
     file picker (13.33px, the UA default). The class line is needed on top of
     it because `.wizard-input` at (0,1,0) outranks a plain type selector.
     ---------------------------------------------------------------------- */
  html input, html select, html textarea,
  html .wizard-input, html .wizard-textarea { font-size: 16px; }


  /* ══ THE BOTTOM-SPACING CONTRACT ═══════════════════════════════════════════
     Five things are pinned to the bottom of this page by five independent
     magic numbers written in four different files — .pb-jack-float (14px),
     #pb-char-swap (24px), #vera-agent (0), #vera-recall (18px, an inline
     cssText in vera-concierge.js) and #live-agent (owned by a remote script).
     None of them consult env(safe-area-inset-bottom), so on any iPhone with a
     home indicator they all sit ~34px too low, inside the swipe strip.

     One property replaces all five numbers:

         --pb-dock = how much of the bottom of the screen is already spoken for.

     RULE: nothing anchored to the bottom may sit below --pb-dock. Every float
     becomes `bottom: calc(var(--pb-dock) + <its own gap>)`. Add the tab bar in
     stage 4 and every float steps up on its own, because --pb-tabbar-h is the
     only thing that changes. That is the whole point of writing it down.

     --pb-tabbar-h is 0 until the bar exists; mobile-shell.js sets it to the
     bar's real measured height when it mounts one, rather than this file and
     that file each hardcoding 56 and hoping they agree.
     ---------------------------------------------------------------------- */
  html {
    --pb-safe-b: env(safe-area-inset-bottom, 0px);
    --pb-tabbar-h: 0px;
    --pb-dock: calc(var(--pb-tabbar-h) + var(--pb-safe-b));
  }

  html .pb-jack-float { bottom: calc(var(--pb-dock) + 14px); }
  html #pb-char-swap  { bottom: calc(var(--pb-dock) + 16px); }
  html #vera-agent    { bottom: var(--pb-dock); }

  /* These two earn their `!important`, and only these two.
     #vera-recall is built with `t.style.cssText = '…bottom:18px…'`
     (vera-concierge.js:241) — an inline style, which no selector can outrank.
     #live-agent belongs to the remote /live-agent.js; live-agent-demo.html:219
     already had to use !important on it, which is independent evidence rather
     than a guess. If either ever stops needing this, delete it. */
  html #vera-recall { bottom: calc(var(--pb-dock) + 18px) !important; }
  html #live-agent  { bottom: calc(var(--pb-dock) + 8px)  !important; }

  /* HER SIZE ON A PHONE.
     This block used to shrink her to 150×210 because her box was swallowing the
     hero's primary CTA: the CONTAINER was the tap target while the media inside
     was all `pointer-events:none`, so on a 390×664 phone a 240×340 rectangle of
     mostly-empty transparent space sat over "Hear Pet Buddy on my website" —
     measured on production, elementFromPoint at the button's centre returned
     div#live-agent, and the tap opened the voice agent instead of going to
     /onboard.

     Shrinking her was the wrong lever and Mario said so: at 150×210 the actual
     figure is only ~79px wide, a sliver in the corner of a dark page, which is
     not a concierge standing on your website. The overlap is fixed properly in
     live-agent.js instead — on phones the container no longer takes pointer
     events and a strip covering her real silhouette (37% of the frame, measured
     off the alpha matte) takes them, so the CTA is tappable everywhere except
     where she is actually painted.

     So she goes back to being a person: ~44vh, the widget's own phone aspect
     (240/340) preserved. Note this whole rule only ever mattered because she
     was invisible on iOS anyway — that was a WebGL compositing bug, fixed the
     same day. "Meet the roster" still shares the bottom-right corner with her;
     a bottom-right widget and a bottom-right ghost button always will. */
  html #live-agent {
    width: min(31vh, 240px) !important;
    height: min(44vh, 340px) !important;
  }


  /* ══ THE NAV BAR ═══════════════════════════════════════════════════════════
     The bar is rgba(11,18,32,0.7) with a blur. On desktop it floats over a
     dark hero and reads fine; on a phone it is 55.9 screens of arbitrary
     content passing underneath, and headings genuinely show through it. 0.7 to
     0.96 keeps the glassy look and stops the double-exposure.
     ---------------------------------------------------------------------- */
  html nav.top { padding: 0 14px; }
  /* While the drawer is open the bar has to clear the scrim (2147483644) and
     the panel (…645), or the hamburger — which is now drawn as an ✕ — sits
     UNDER the scrim: inert and blurred, while the tap that looks like it hits
     the ✕ is actually being caught by the scrim behind it. The drawer opens at
     top:76px, below the bar, so nothing overlaps. */
  html.pbm-open nav.top { z-index: 2147483646; }
  html nav.top .bar {
    background: rgba(11, 18, 32, 0.96);
    padding: 8px 8px 8px 16px;
    gap: 8px;
  }

  /* The brand is a 110×26 tap target — below the 44px minimum in its short
     axis. Padding, not a bigger font: the wordmark should not change size. */
  html .brand { min-height: 44px; }

  /* ── The drawer ───────────────────────────────────────────────────────────
     Ten of the twelve nav destinations were simply unreachable on a phone:
     `.nav-links{display:none}` below 640px, and no menu control anywhere in
     the repo to bring them back.

     The drawer is a FIXED panel appended to the end of <body> — deliberately
     not a restyle of .nav-links in place, for two structural reasons:

       1. .bar carries `backdrop-filter`, and backdrop-filter makes an element
          a containing block for `position: fixed` descendants. A fixed drawer
          inside .bar would be positioned against the bar, not the viewport.
       2. pc-softnav.js swaps everything BEFORE the embed.js <script> when the
          concierge walks a visitor to another page. Chrome that lives after
          that anchor survives the swap; chrome inside .bar does not.

     So the panel is built from a clone of the real .nav-links anchors (see
     mobile-shell.js) and lives past the boundary. Desktop never sees any of
     this — the script returns early above 640px.
     ---------------------------------------------------------------------- */
  /* flex + an explicit gap, NOT inline-grid. With grid, the three auto rows
     stretch to fill the 44px button (align-content resolves to stretch), so
     the real bar pitch was ~14.6px while the ✕ transform below assumed the
     6.2px the margins implied — the bars never met and the "close" icon
     rendered as a chevron. Here the pitch is exactly 1.8 + 4.4. If you change
     either number, change --pbm-pitch with it. */
  html #pbm-menu {
    --pbm-pitch: 6.2px;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4.4px;
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    color: var(--text, #e9edf7);
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  html #pbm-menu span {
    display: block; width: 17px; height: 1.8px; border-radius: 2px;
    background: currentColor;
    transition: transform 220ms ease, opacity 160ms ease;
  }
  /* Into an ✕ — the same three bars, so the control never looks like it was
     swapped out from under the finger that is still on it. */
  html.pbm-open #pbm-menu span:nth-child(1) { transform: translateY(var(--pbm-pitch)) rotate(45deg); }
  html.pbm-open #pbm-menu span:nth-child(2) { opacity: 0; }
  html.pbm-open #pbm-menu span:nth-child(3) { transform: translateY(calc(-1 * var(--pbm-pitch))) rotate(-45deg); }

  html #pbm-scrim {
    position: fixed; inset: 0; z-index: 2147483644;
    background: rgba(4, 7, 15, 0.66);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity 220ms ease;
  }
  html.pbm-open #pbm-scrim { opacity: 1; pointer-events: auto; }

  html #pbm-drawer {
    position: fixed; z-index: 2147483645;
    top: 84px; left: 14px; right: 14px;
    max-height: calc(100vh - 104px); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    background: rgba(11, 18, 32, 0.985);
    border: 1px solid var(--border-strong, rgba(255,255,255,0.14));
    border-radius: 22px;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
    /* Hidden by more than opacity: a transparent panel still swallows taps on
       the page behind it, which is the classic "the site stopped responding"
       bug. visibility flips with the transition so it cannot linger. */
    opacity: 0; visibility: hidden;
    transform: translateY(-10px) scale(0.985);
    transform-origin: top center;
    transition: opacity 200ms ease, transform 240ms cubic-bezier(.22,.9,.3,1), visibility 0s linear 240ms;
  }
  html.pbm-open #pbm-drawer {
    opacity: 1; visibility: visible;
    transform: none;
    transition-delay: 0s, 0s, 0s;
  }
  html #pbm-drawer a {
    display: flex; align-items: center;
    min-height: 48px; padding: 0 14px;
    font-size: 16px; font-weight: 500;
    color: var(--text, #e9edf7);
    border-radius: 14px;
    -webkit-tap-highlight-color: transparent;
  }
  html #pbm-drawer a + a { box-shadow: inset 0 1px 0 rgba(255,255,255,0.055); }
  html #pbm-drawer a:active { background: rgba(99, 102, 241, 0.16); }
  /* The current page, so the drawer answers "where am I" and not only
     "where can I go". */
  html #pbm-drawer a[aria-current="page"] { color: var(--accent-soft, #a5b4fc); font-weight: 650; }
  html #pbm-drawer .pbm-cta {
    justify-content: center; margin-top: 8px; min-height: 52px;
    font-weight: 650; color: #fff;
    background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 60%, var(--accent-deep) 100%);
    box-shadow: 0 12px 32px -10px var(--accent-glow);
  }
  html #pbm-drawer .pbm-cta + a { box-shadow: none; }
  /* One "Deploy now" at a time. With the drawer open the bar's copy sat two
     centimetres above the drawer's, which reads as a rendering fault rather
     than as emphasis. */
  html.pbm-open .bar .btn-primary { opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
  /* The page must not scroll under an open drawer. */
  html.pbm-open, html.pbm-open body { overflow: hidden; }

  /* The four floating widgets all sit at or near z-index 2147483647 — above
     the scrim by construction, and one of them is the max 32-bit value, so
     there is no "put the scrim higher" available. They are taken out of the
     picture instead: while the menu is open, Jack was standing on top of the
     drawer's last two rows. Transition matches the scrim so they fade with it
     rather than blinking out. */
  html.pbm-open .pb-jack-float,
  html.pbm-open #pb-char-swap,
  html.pbm-open #vera-agent,
  html.pbm-open #vera-recall,
  html.pbm-open #live-agent {
    opacity: 0; pointer-events: none;
    transition: opacity 200ms ease;
  }


  /* ══ TOUCH TARGETS ═════════════════════════════════════════════════════════
     29 controls measured under 44px. Apple's minimum is not a style guide
     suggestion — under it, a thumb reliably hits the neighbour instead.
     Everything below adds padding or a min-height; nothing changes a font
     size, so none of it alters how the page reads.
     ---------------------------------------------------------------------- */

  /* Pill buttons sat at 42px — two short. */
  html .btn-compact { padding-top: 14px; padding-bottom: 14px; }

  /* The platform/install tab strip: ten buttons at 35px, side by side, which
     is the single densest mis-hit risk on the page. */
  html .install-tab { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  html .install-copy { min-height: 44px; padding-top: 0; padding-bottom: 0; }

  /* A CTA styled as prose. It reads as a sentence but behaves as a button, so
     it gets a button's target without gaining a button's box. */
  html .proof-tag a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Thirteen footer links at 17px tall on a 31px pitch. Rows, not text.
     This lengthens the footer, and that is the correct trade: an unhittable
     link is worth less than the scroll it saves. */
  html footer li { margin-bottom: 0; }
  html footer li a { display: flex; align-items: center; min-height: 44px; }


  /* ══ ROSTER DENSITY ════════════════════════════════════════════════════════
     #live-agents is 12,539px — 18.9 phone screens, a third of the entire
     document, for sixteen cards each showing one 420px portrait. Scrolled on a
     phone it reads as sixteen consecutive full-screen interruptions rather
     than as a roster you can take in.

     Two-up, with the stage at 200px, makes it a contact sheet: eight rows
     instead of sixteen, every face still legible at 170px wide (they are
     framed head-and-shoulders, so they survive the crop), and the whole
     section drops to roughly a fifth of its height. The copy is kept — clamped
     to three lines so a long bio cannot re-inflate the row it sits in.
     ---------------------------------------------------------------------- */
  html .live-showcase {
    grid-template-columns: 1fr 1fr;
    max-width: none;
    gap: 12px;
  }
  html .live-stage { height: 200px; }
  html .live-body { padding: 12px 12px 14px; }
  html .live-body h3 { font-size: 21px; margin: 3px 0 5px; }
  html .live-body .live-lang { font-size: 9.5px; letter-spacing: 0.12em; }
  html .live-body p {
    font-size: 12px; line-height: 1.45; margin: 0 0 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html .live-cta { font-size: 12.5px; padding: 0 12px; min-height: 44px; }
  html .live-badge { top: 8px; left: 8px; font-size: 9px; padding: 4px 8px 4px 7px; letter-spacing: 0.1em; }
  html .live-badge .dot { width: 6px; height: 6px; }


  /* ══ THE HERO ══════════════════════════════════════════════════════════════
     Mario's reference (a SAENZ construction site) is three things stacked: a
     compact top bar, an inset rounded media card, and a copy card overlapping
     up into it. The bar is done above; this is the other two.

     On a phone the hero was 92vh of animated spiral with no picture in it, and
     its primary CTA — the one thing the page is asking for — sat 23px BELOW the
     fold (measured: CTA bottom 687, fold 664). So this is a conversion change
     as much as a cosmetic one.

     ⚠️  NO markup is involved, and that is deliberate: another terminal is
     working in index.html. The trick is that absolutely-positioned children
     resolve `inset` against the PADDING box, so padding on section.hero insets
     the card art for free. One variable drives all three layers; change the
     card height here and the art, the veil and the overlap all follow.

     ⛔ NEVER put transform / filter / backdrop-filter / perspective /
     will-change on `section.hero` itself. #pcStage is position:fixed and
     hero-stage.css:21-30 documents that it relies on nothing here trapping it
     in a containing block — any of those properties silently shrinks the
     concierge's showroom takeover to the hero's box. On .hero-inner they are
     safe: #pcStage is its SIBLING, not its descendant. The browser guard
     asserts both halves of this.
     ---------------------------------------------------------------------- */
  /* Card height is capped, not just clamped to taste: the copy card below it is
     ~304px from the card's bottom edge down to the CTA's, so a card over ~330px
     pushes the CTA back under the 664px fold and undoes the point of all this.
     The browser guard measures the CTA, so raising this too far fails loudly. */
  html { --pb-hero-card: clamp(260px, 44vh, 330px); }

  html section.hero {
    padding: 12px;            /* the inset. Also insets .hero-veil and ::before */
    min-height: auto;         /* was 92vh — the card + copy decide the height now */
    display: block;           /* was flex/align-items:center, which fought the flow */
  }

  /* The media card. A pseudo-element rather than an <img> so index.html keeps a
     zero-line diff; `section.hero::before` was verified unused before claiming
     it. Vera is a *-poster.webp still (18,908 bytes) — deliberately NOT the
     webm: stage 1 exists to get this page's media down from 41.4 MB, and
     spending a megabyte to re-animate the hero would hand most of that back. */
  /* ⚠️ `cover` is WRONG for this asset and it is worth saying why, because it is
     the obvious choice and it looked plausible until it was screenshotted.
     vera-poster.webp is 480×640 WITH AN ALPHA CHANNEL — a cut-out figure, not a
     photograph. Covering a 366×266 landscape box with a 0.75-ratio portrait
     crops ~45% of its height, and what it crops is the top: her head came off
     at the card's edge. There is no background-position that fixes it, because
     a full-length figure simply does not fit a short wide crop.

     So she is sized to the card's HEIGHT (`auto 100%`) and stood on its bottom
     edge instead — full figure, never clipped, at any card height. The layers
     read back-to-front in reverse: the base gradient is the lit room, the
     radial is the glow behind her, and she is painted last, on top. The copy
     card's 34px overlap then covers her hem, so she reads as standing behind
     the panel rather than being cut off by it. */
  html section.hero::before {
    content: "";
    position: absolute;
    inset: 12px 12px auto;
    height: var(--pb-hero-card);
    border-radius: 28px;
    background:
      url("/assets/live-agents/vera-poster.webp") center bottom / auto 100% no-repeat,
      radial-gradient(120% 88% at 50% 16%, rgba(99,102,241,0.34) 0%, rgba(99,102,241,0.10) 44%, transparent 74%),
      linear-gradient(180deg, #141d36 0%, #0b1220 100%);
    z-index: 1;
  }

  /* The veil rides exactly on top of the card, same rect and radius. It needs no
     z-index of its own: it is a real element and ::before is painted as the
     first child, so at equal z-index document order already puts it above.

     On desktop this is a heavy radial vignette because the copy sits directly
     on it. Here the copy has its own opaque panel, so the veil's only remaining
     job is to sink the card's bottom edge into that panel — anything stronger
     just turns Vera murky. Hence a light one-way fade, not the vignette. */
  html .hero-veil {
    inset: 12px 12px auto;
    height: var(--pb-hero-card);
    border-radius: 28px;
    background:
      linear-gradient(180deg, transparent 0%, transparent 62%, rgba(11,18,32,0.55) 88%, rgba(13,19,34,0.85) 100%);
  }

  /* The spiral canvas is HIDDEN, not resized, and the distinction is not
     cosmetic: index.html's size() writes canvas.style.width/height in px as
     INLINE styles, which no selector can outrank. `display` is not set inline,
     so this plain rule wins where a height rule would silently lose.

     Hiding does not stop its requestAnimationFrame loop — the phone still
     animates 620 points it cannot see. Removing the element from
     mobile-shell.js does stop it, and was tried and reverted: see the comment
     there. Short version — rotation. `display:none` reverses itself the moment
     the phone turns sideways; a removed element does not come back. */
  html canvas#spiral { display: none; }

  /* The copy card, pulled up over the media card's bottom edge. `backdrop-filter`
     is safe HERE (see the warning above) — this is #pcStage's sibling. */
  html .hero-inner {
    position: relative;
    z-index: 2;
    margin-top: calc(var(--pb-hero-card) - 34px);   /* the 34px bite */
    padding: 20px 16px 22px;
    border-radius: 24px;
    background: rgba(13, 19, 34, 0.82);
    border: 1px solid rgba(255,255,255,0.09);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px -18px rgba(0,0,0,0.75);
    /* Column flex purely so the CTA can be reordered — see below. */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ⚠️ THE CTA IS MOVED ABOVE THE LEAD PARAGRAPH ON PHONES ONLY.
     The lead is ~55 words of desktop copy. Below the media card it runs seven
     lines, which put the primary CTA 208px under the fold even after the card
     was cut to 40vh — measured, not estimated. The two ways out were to clamp
     the paragraph (which drops "One script. Live in minutes.", the line that
     closes it) or to reorder. Reordering keeps every word Mario wrote, in the
     DOM and in the reading order for a screen reader, and gives the phone the
     pattern it wants anyway: headline, then the button, then the detail.

     `order` only bites because .hero-inner is a flex container here; the
     desktop rendering is untouched. If Mario would rather read the paragraph
     first, deleting these five lines restores source order — and the guard
     will then go red on the CTA, which is the correct argument to have. */
  html .hero-eyebrow   { order: 1; }
  html .hero h1        { order: 2; }
  html .hero-actions   { order: 3; }
  html .hero p.lead-hero { order: 4; }
  html .hero-meta      { order: 5; }

  html .hero-eyebrow { margin-bottom: 12px; font-size: 10.5px; padding: 7px 13px; letter-spacing: 0.14em; }
  html .hero h1 { font-size: clamp(32px, 9vw, 46px); margin: 0 0 14px; }
  html .hero p.lead-hero { font-size: 15px; line-height: 1.55; margin: 4px 0 16px; }

  /* The CTA row is the reason for the whole section. Grid rather than the
     inline-flex above: the primary goes full-width on its own row so it is
     unmissable and comfortably past 44px, and the two ghost buttons share the
     row under it instead of each wrapping to a line of their own. */
  html .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
    width: 100%;
  }
  html .hero-actions .btn { justify-content: center; width: 100%; }
  html .hero-actions .btn-primary { grid-column: 1 / -1; }
  html .hero-actions .btn-big { padding: 15px 18px; font-size: 15px; }
  html .hero-actions .btn-ghost { padding: 12px 10px; font-size: 13px; }

  /* Five claims separated by dots wrap to four lines on a 390px screen and push
     the CTA back under the fold — which is the bug this section is fixing. The
     first three carry the pitch; the rest are repeated verbatim further down
     the page, so nothing is lost by dropping them here. */
  html .hero-meta { gap: 8px 10px; font-size: 11.5px; }
  html .hero-meta > *:nth-child(n+6) { display: none; }
}

/* ── Rotation ────────────────────────────────────────────────────────────────
   mobile-shell.js decides once, at load, whether this is a phone — so on an
   iPhone turned sideways (844px wide) the injected chrome is still in the DOM
   while every rule above has stopped applying. Unstyled, #pbm-menu becomes a
   bare button with three stray <span>s in the nav bar and the drawer becomes a
   static block of links in the middle of the page. Nothing above can prevent
   that, because the whole point is that those rules are no longer matching.

   No !important needed: 640 and 641 can never both match, so this is not
   competing with the display rules above — it is the other half of the switch.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
  html #pbm-menu, html #pbm-drawer, html #pbm-scrim { display: none; }
}
