/* ═══════════════════════════════════════════════════════════════════════════
   SONO XR — THE SITE HEADER. One definition, every page.
   (2026-08-09 · rebuilt on the chrome system 2026-08-11)

   Michael: "let's solve header/menu sitch. Currently we have three versions"
   — it was five. The homepage had a centred logo with no nav, pricing had the
   floating pill, building.html had a plain bar with four links, contact and
   showcases pulled an APP nav out of js/sxr-nav.js (Builder / Dashboard /
   Showcases), and the legal pages had a third thing again. He picked the
   pricing pill, so that one became the only one.

   ⚠️ THIS FILE IS THE SOURCE OF TRUTH FOR THE LOOK. Two renderers consume it
   and they must produce the same classes:
       · js/sxr-header.js        — static pages (pricing, building, contact…)
       · src/components/Navbar.jsx — the React homepage
   Change the markup in one and you must change the other. The CSS lives here
   precisely so that a drift shows up as a visual bug in one place rather than
   two headers slowly diverging again, which is how we got five.

   ⚠️ BUMP ?v= ON EVERY CHANGE TO THIS FILE. Netlify serves it with
   `cache-control: public, max-age=31536000` — one YEAR — and the filename is
   not content-hashed, so the query string is the only cache key there is. On
   2026-08-09 the menu was cut to three rows, curl showed it live, and Michael's
   pricing page still had six. Static pages only; Vite hashes the SPA bundle.

   Classes keep their `pg-` prefix. Renaming them would have meant touching
   every rule in pricing.html's 308-line inline block in the same commit that
   moves them out — two risky changes at once for a cosmetic gain.

   ── THE 2026-08-11 PASS ────────────────────────────────────────────────────
   Michael pointed at flexis-mobility.com: "much better than ours… all the
   different versions/actions". Three things carried over — the bar DIVIDED
   INTO CELLS by vertical rules, a bar that is transparent over the hero and
   solid once you scroll, and a panel that is three columns (image · nav ·
   actions) rather than a stack of rows. Dropped from that reference by his
   call: the light/dark SWITCH MODE and the EN language switcher.

   ⚠️ THE PILL IS GONE, AND THAT IS A CONSEQUENCE, NOT A WHIM. Two reasons.
   The cell rules are the signature of the reference and they have nothing to
   divide on a floating capsule — the dividers need edges that reach the top
   and bottom of the bar. And the chrome system this now wears sets
   `--radius: 2px` as *the only radius in the product*; a 999px capsule is the
   most off-system shape available. DESIGN.md's floating-capsule note (the
   FintechX pattern, addendum 2026-07-23 late) is a CYAN-ERA decision and this
   supersedes it for the header. If it reads wrong, restoring the capsule is
   `border-radius: 999px` + `width: min(1280px, …)` on .pg-head-in.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LOCAL CHROME TOKENS ──────────────────────────────────────────────────
   ⚠️ DECLARED HERE, NOT PULLED FROM css/sono-tokens.css, AND ON PURPOSE.
   The static pages do not load the token file — pricing.html links exactly
   two stylesheets, this one and the footer — so `var(--accent)` is undefined
   on every page except the showcase. This file has always been self-contained
   (see THE HEADER'S OWN BUTTONS below for the same reasoning applied to .btn);
   adding a token dependency would mean editing eight pages plus the React
   entry, and would drag the showcase's `--radius: 2px` into stylesheets that
   do not expect it.

   ⚠️ AND THE INK IS SILVER, NOT THE SYSTEM'S INK. sono-tokens.css sets
   `--ink-primary: #EDE8E0` — R237 G232 B224, a WARM near-white. That warmth is
   exactly why "chrome" first came out looking like brass on the dock, and the
   fix there was to declare silver locally rather than cool the global tokens
   and restyle the whole product. Same fix, same values, same reason. Anything
   in this file that should read as metal uses --h-ink; anything that should
   read as state uses --h-accent, and nothing else is coloured at all. */
.pg-head,
.pg-mega {
  --h-ground:    #0B0A09;                       /* the room */
  --h-panel:     #121110;                       /* raised surface */
  --h-ink:       #d4dce4;                       /* silver — the dock's value */
  --h-ink-2:     rgba(212, 220, 228, 0.60);
  --h-ink-3:     rgba(212, 220, 228, 0.34);
  --h-line:      rgba(212, 220, 228, 0.14);
  --h-line-lit:  rgba(212, 220, 228, 0.30);     /* the lit top edge */
  --h-accent:    #B08D57;                       /* antique brass — STATE ONLY */
  --h-accent-dim: rgba(176, 141, 87, 0.14);
  --h-ease:      cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── THE BAR ──────────────────────────────────────────────────────────────
   Full-bleed and flush to the top.

   ⚠️ THIS COMMENT USED TO SAY "pricing.html sets body.has-annc and carries its
   own top:50px offset". That was WRONG, and checkably so — pricing.html has
   never contained the string. `has-annc` was only ever set by
   src/components/AnnouncementBar.jsx on the React homepage, styled in
   src/index.css. Corrected 2026-08-12 rather than left to mislead the next
   person into hunting for an offset that is not there.

   As of 2026-08-12 nothing renders the announcement strip at all (Michael:
   the header's Join the Beta button already covers it), so no page offsets this
   bar. If the strip ever returns, the offset belongs wherever the strip is
   defined — not duplicated here, since the same declaration in two files is
   precisely the drift that left this site with five headers. */
.pg-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--h-dur, 300ms) var(--h-ease),
              border-color var(--h-dur, 300ms) var(--h-ease);
}

/* TRANSPARENT AT REST, SOLID ONCE MOVED. js/sxr-header.js adds .is-stuck past
   8px of scroll. At the top of a page the bar sits over the hero and claims no
   space of its own; the moment the page moves it becomes a surface so that
   body copy scrolling underneath never has to compete with it. Both states are
   dark, so this is safe on the pages with no hero at all. */
.pg-head.is-stuck {
  background: rgba(11, 10, 9, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--h-line);
}

/* ⚠️ GRID, NOT space-between (2026-08-10). Michael: "SONO XR's menu is off
   set" — matched against mbb3d.media, whose bar reads properly portioned. The
   cause: `justify-content: space-between` on three flex children centres
   NOTHING. It spaces the gaps evenly, so MENU sits at the midpoint of whatever
   is left after the logo and the CTA group, and any change to either side
   shifts it. Adding a third CTA had pushed it visibly left.

   `1fr auto 1fr` is MBB's recipe (.mbb-nav-inner): the two side columns are
   equal by construction, so the middle is centred on the BAR regardless of
   what the sides contain.

   ⚠️ align-items is STRETCH, not center, and the gap is 0 — both are load-
   bearing for the cell rules. A divider is a border on a grid child, so the
   child has to fill its cell's full height or the rule stops short, and any
   gap would leave the border floating away from its neighbour. Vertical
   centring moves inside each cell instead. */
.pg-head-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  min-height: 88px;
}

.pg-head-in > .pg-logo,
.pg-head-in > .pg-menu-btn,
.pg-head-in > .pg-cta {
  display: flex;
  align-items: center;
  border-left: 1px solid var(--h-line);
}
.pg-head-in > .pg-logo { justify-content: flex-start; padding: 0 28px; border-left: none; }
.pg-head-in > .pg-menu-btn { justify-content: center; padding: 0 56px; }
.pg-head-in > .pg-cta { justify-content: flex-end; padding: 0 28px; gap: 12px; }

/* ⚠️ 56px MATCHED MBB'S NUMBER AND STILL READ SMALLER, and the reason is not
   geometry — the two lockups are almost the same shape (SXR 2.00:1, MBB
   1.86:1), so at equal height SXR is actually the WIDER of the two. The
   difference is what is inside the box: MBB's file is a mark and two words,
   while this one carries the monogram, "SONO XR" AND a tagline rule, so its
   glyphs occupy far less of their own height. Matching the container was never
   going to match the impression. 72px sizes the LETTERS to MBB's. */
.pg-logo { text-decoration: none; }
.pg-logo img { height: 72px; width: auto; display: block; }

/* ── THE SCROLL PROGRESS RULE ─────────────────────────────────────────────
   The one hairline of accent in the bar, and it is reporting a real quantity —
   how far down the document you are — which is what keeps --h-accent inside
   "STATE ONLY". js/sxr-header.js writes --pg-progress (0→1) on rAF.
   transform-origin left + scaleX so it costs no layout. */
.pg-head::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--h-accent);
  transform: scaleX(var(--pg-progress, 0));
  transform-origin: left center;
  opacity: 0; transition: opacity 200ms var(--h-ease);
}
.pg-head.is-stuck::after { opacity: 1; }

/* ── THE MENU BUTTON — A WORD AND A RULE ──────────────────────────────────
   The reference uses a word plus a drawn line rather than a hamburger, and it
   is the better control here: the bar already reads as an instrument panel, and
   a rule that extends on hover says "this opens" without borrowing a mobile
   idiom onto a 1440px screen. The glyph SVGs are gone from both renderers. */
.pg-menu-btn {
  background: none; border: none; color: var(--h-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  cursor: pointer; gap: 14px;
}
.pg-menu-btn .pg-rule {
  display: block; width: 34px; height: 1px;
  background: var(--h-ink); opacity: 0.7;
  transition: width 260ms var(--h-ease), background 200ms var(--h-ease);
}
.pg-menu-btn:hover .pg-rule { width: 52px; background: var(--h-accent); opacity: 1; }

/* ── THE MEGA MENU ────────────────────────────────────────────────────────
   ⚠️ A DROPDOWN, NOT A TAKEOVER (Michael, 2026-08-10): "I like how on MBB's
   you can still see site beneath expanding menu." This was `inset:0` filled
   with solid #030509 — a full-screen wall, so the site vanished the moment the
   menu opened.

   MBB splits it in two: .mbb-backdrop dims the page, .mbb-mega is a panel that
   drops from the top. Same split here WITHOUT touching the markup — .pg-mega
   is the backdrop and .pg-mega-in is the panel. That matters because the
   markup exists twice and a structural change must be made identically in
   both. */
.pg-mega {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(3, 3, 2, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 300ms var(--h-ease);
  overflow-y: auto;
}
.pg-mega.on { opacity: 1; visibility: visible; }

.pg-mega-in {
  background: var(--h-ground);
  border-bottom: 1px solid var(--h-line);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(-14px);
  transition: transform 320ms var(--h-ease);
}
.pg-mega.on .pg-mega-in { transform: translateY(0); }

/* the panel's own bar mirrors the page bar's cells, so opening the menu does
   not visibly re-jig the top of the screen — only the word changes */
.pg-mega-top {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; min-height: 88px;
  border-bottom: 1px solid var(--h-line);
}
.pg-mega-top > .pg-logo,
.pg-mega-top > .pg-menu-btn,
.pg-mega-top > .pg-cta {
  display: flex; align-items: center; border-left: 1px solid var(--h-line);
}
.pg-mega-top > .pg-logo { justify-content: flex-start; padding: 0 28px; border-left: none; }
.pg-mega-top > .pg-menu-btn { justify-content: center; padding: 0 56px; }
.pg-mega-top > .pg-cta { justify-content: flex-end; padding: 0 28px; gap: 12px; }

/* ── THE PANEL BODY — TWO COLUMNS ────────────────────────────────────────
   nav · actions.

   ⚠️ THERE WAS A THIRD COLUMN AND IT CAME OUT ON PURPOSE (Michael, 2026-08-11,
   on seeing it live: "not sure we need one"). flexis-mobility.com puts a
   portrait photograph on the left of its panel, and the first build of this
   copied it — a real captured space, swapping as you moved between rows.

   Removing it settled a problem rather than losing a feature. The slot could
   only ever hold work we can actually show, that list is short, and three of
   the four candidates in assets/ failed on their own terms (a neon CGI render,
   a prospect's logo on white, and a published house that is not ours). A slot
   that has to be fed to stay honest is a standing liability; the panel now
   claims nothing because it shows nothing.

   The markup, the CSS and the cross-fade swap are all in 123391a if it is ever
   wanted back — restoring is that commit's .pg-figure block plus a third
   column here. */
.pg-mega-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 56px;
  padding: 40px 28px 48px;
  max-width: 1560px; margin: 0 auto;
}

/* ── THE ROWS ─────────────────────────────────────────────────────────────
   ⚠️ NOT UPPERCASE, and that is a deliberate departure from the reference.
   flexis sets its whole nav in uppercase mono and it is a large part of why
   that panel looks good — but the chrome system this header now wears reserves
   uppercase for exactly one role (the slate), and a nav list is not it. The
   numbers and the caption keep the mono voice instead. */
.pg-mega nav { display: flex; flex-direction: column; }
.pg-mega a.row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--h-line);
  padding: 22px 4px; text-decoration: none;
}
.pg-mega a.row:first-child { border-top: 1px solid var(--h-line); }
.pg-mega a.row span.lbl {
  font-family: 'Syne', 'Outfit', sans-serif; font-weight: 700;
  color: var(--h-ink);
  font-size: clamp(1.35rem, 2.2vw, 2.1rem); letter-spacing: -0.01em;
  transition: color 200ms var(--h-ease);
}
.pg-mega a.row:hover span.lbl { color: #fff; }
/* the page you are on is stated, not guessed at — and this is the one place a
   nav row is allowed accent, because it is reporting state */
.pg-mega a.row[aria-current="page"] span.lbl { color: var(--h-accent); }
.pg-mega a.row span.num {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.7rem;
  color: var(--h-ink-3);
}
.pg-mega a.row .arw {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--h-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--h-ink-2);
  transition: border-color 200ms var(--h-ease), color 200ms var(--h-ease),
              transform 200ms var(--h-ease);
}
.pg-mega a.row:hover .arw {
  border-color: var(--h-line-lit); color: var(--h-ink);
  transform: translateX(4px);
}

/* ── THE ACTION STACK ─────────────────────────────────────────────────────
   The reference's right-hand column: bordered blocks, label left, circled
   arrow right, the primary one tinted.

   ⚠️ NO SOCIAL LINKS UNTIL THERE ARE SOCIAL LINKS. flexis puts YOUTUBE and
   LINKEDIN here; this repo contains no SONO XR social URL anywhere, and
   DESIGN.md §1 is "everything shown is real". ACTIONS in js/sxr-header.js is a
   plain list — the moment Michael has the accounts, they are two entries, not
   a rebuild. */
.pg-actions { display: flex; flex-direction: column; gap: 10px; }
.pg-act {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 18px;
  border: 1px solid var(--h-line);
  color: var(--h-ink); text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  transition: border-color 200ms var(--h-ease), background 200ms var(--h-ease);
}
.pg-act .arw {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 1px solid currentColor; opacity: 0.5;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 200ms var(--h-ease), transform 200ms var(--h-ease);
}
.pg-act:hover { border-color: var(--h-line-lit); background: rgba(212, 220, 228, 0.04); }
.pg-act:hover .arw { opacity: 1; transform: translateX(3px); }
/* the primary — the one tinted block, which is the whole budget for accent in
   this panel */
.pg-act.is-primary {
  border-color: rgba(176, 141, 87, 0.45);
  background: var(--h-accent-dim);
  color: var(--h-accent);
}
.pg-act.is-primary:hover {
  border-color: var(--h-accent);
  background: rgba(176, 141, 87, 0.20);
}

/* ── THE HEADER'S OWN BUTTONS ────────────────────────────────────────────
   ⚠️ SCOPED AND SELF-CONTAINED ON PURPOSE. The header markup uses .btn /
   .btn-solid / .btn-ghost, and those meant three different things depending on
   the page: css/site.css defines a square uppercase button, pricing.html
   defined a pill inline, and pricing and building.html don't load site.css at
   all — so an extracted header would have rendered unstyled buttons on exactly
   the pages it was meant to unify. Scoping them here means the header carries
   its own appearance with no hidden dependency on which stylesheet the page
   happens to include.

   ⚠️ THE PILL AND THE CYAN ARE BOTH GONE (2026-08-11). --sxr-grad is no longer
   consulted: it resolves to the cyan gradient on pages that define it, which is
   the one thing this pass exists to remove. */
/* ── THE CONTROLS (Michael, 2026-08-11: "a little more modern, Apple-esque") ──
   DESIGN.md amended first, then this. See the 2026-08-11 addendum, "Radius on
   the marketing site".

   What was making it read as industrial rather than modern was not the colour —
   it was that the label was set like a MACHINE READOUT: uppercase, monospaced,
   0.16em of tracking, on a 2px corner. Every one of those is a deliberate
   choice elsewhere in this product (the slate, the row numbers, the showcase's
   whole chrome) and every one of them is wrong on a button somebody is supposed
   to want to press.

   So the label is now sentence case in the site's own face at a normal weight,
   the corner is soft, and — the part that actually reads as Apple — the button
   answers the PRESS rather than the hover. Hover is a faint lift in fill only;
   :active takes it down 2%, fast, on a curve that decelerates. Nothing
   translates, nothing bounces, nothing glows (§2).

   ⚠️ THE SOFT RADIUS IS FOR CONTROLS ONLY. The bar, its cells, the panel and
   the action blocks all stay square — that squared structure carrying softened
   controls IS the look. Rounding the containers too would undo it. */
.pg-head .btn,
.pg-mega .btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 500; font-size: 0.86rem; letter-spacing: 0;
  text-transform: none;
  padding: 11px 20px; border: 1px solid transparent;
  cursor: pointer; background: none; white-space: nowrap;
  transition: background 240ms var(--h-ease), border-color 240ms var(--h-ease),
              color 240ms var(--h-ease), transform 120ms var(--h-ease);
}
/* the press, not the hover — 120ms down, and it returns on the same curve */
.pg-head .btn:active,
.pg-mega .btn:active { transform: scale(0.98); }

.pg-head .btn-solid,
.pg-mega .btn-solid {
  background: var(--h-accent); color: #0B0A09;
  box-shadow: none;   /* DESIGN.md: no glow shadows */
}
.pg-head .btn-solid:hover,
.pg-mega .btn-solid:hover {
  background: #bd9a63;   /* a lift in fill only — nothing moves */
  box-shadow: none;
}
.pg-head .btn-ghost,
.pg-mega .btn-ghost {
  background: transparent; color: var(--h-ink);
  border-color: var(--h-line);
}
.pg-head .btn-ghost:hover,
.pg-mega .btn-ghost:hover {
  border-color: var(--h-line-lit);
  background: rgba(212, 220, 228, 0.04);
}

/* The live dot marks that the beta is genuinely open. If that ever stops being
   true this dot is the first thing that has to go.

   ⚠️ IT NO LONGER PULSES. A blinking dot is an alert, and this is a statement of
   fact — the pulse was the least Apple-esque thing in the bar and it was pulling
   the eye off the words. Steady, inset, and slightly transparent so it reads as
   part of the button rather than a badge stuck on it. */
.pg-cta .btn-solid::after {
  content: ''; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: #0B0A09; opacity: 0.42;
  margin-left: 9px;
}

/* The legal pages are a narrow document column that started at the very top of
   the page — with a FIXED header they need headroom, or the bar sits on the
   title. They previously had their own static header, which is why this never
   came up. */
body:has(> .page) .page { padding-top: 112px; }

/* ══ SMALL SCREENS — THE RULES THAT ACTUALLY APPLY ════════════════════════
   ⚠️ THESE LIVE AT THE END SO THEY ARE THE LAST WORD, and that is not tidiness.
   The previous version of this file had a `@media (max-width: 640px)` block
   near the TOP that shrank .pg-head .btn and hid .btn-ghost, and it never did
   anything: the base `.pg-head .btn` rule further down has EQUAL specificity
   (0,2,0) and came later, so it won. Measured consequence at 375px: "Join the
   Beta" ran to x=378 in a 375px viewport, and the panel's CTA row ran to x=560
   — two of three buttons entirely off-screen once the menu was opened.

   It is the same lesson HUB.md logs three times over for css/sono-hub.css:
   appending is not how you win, and equal specificity is decided by order.
   Anything added below must stay below. */
@media (max-width: 1020px) {
  .pg-mega-body { gap: 32px; }
}

@media (max-width: 760px) {
  .pg-mega-body { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 36px; }
}

@media (max-width: 640px) {
  .pg-head-in,
  .pg-mega-top { min-height: 64px; }
  .pg-head-in > .pg-logo,
  .pg-mega-top > .pg-logo { padding: 0 14px; }
  .pg-head-in > .pg-menu-btn,
  .pg-mega-top > .pg-menu-btn { padding: 0 16px; }
  .pg-head-in > .pg-cta,
  .pg-mega-top > .pg-cta { padding: 0 14px; }
  .pg-head .pg-logo img,
  .pg-mega-top .pg-logo img { height: 40px; }
  .pg-menu-btn { letter-spacing: 0.16em; gap: 8px; }
  .pg-menu-btn .pg-rule { width: 20px; }
  /* sentence case needs no tracking correction here — it just gets smaller and
     tighter. The old value re-added 0.1em, which was left over from the mono
     uppercase label and would have re-widened the button it was meant to shrink. */
  .pg-head .btn { font-size: 0.8rem; padding: 9px 14px; }
  /* ⚠️ THE PRIMARY GETS SMALLER STILL, AND THIS IS MEASURED, NOT TASTE.
     Door 3's label went "Join the Beta" (103px) → "Apply for a pilot" (120px)
     → "Become a founding client" (180px) in three days. At 375px the header's
     budget for that cell is 179px once the 40px logo (72px), the shrunk MENU
     (36px) and three lots of cell padding (88px) are taken out — so the new
     label overflowed by 1px at 375 and by 16px at 360, which is a common
     Android width. That is the same overflow this file's header comment
     records "Join the Beta" causing before the rule order was fixed.
     0.7rem/8px 11px measures 154px: 25px of headroom at 375, 10px at 360.
     ⚠️ MUST STAY AFTER the .pg-head .btn rule above — equal specificity
     (0,2,0), so order is the only thing deciding this, exactly as the header
     comment warns. If the label ever gets longer again, re-measure; do not
     assume it still fits. */
  .pg-head .btn-solid { font-size: 0.7rem; padding: 8px 11px; letter-spacing: 0.02em; }
  /* Login hides rather than wrapping both CTAs onto two lines — it is still one
     tap away inside the menu, which is why it can go. ⚠️ This finally takes
     effect now that it sits after the base rule; it did not for two commits. */
  .pg-head .btn-ghost { display: none; }
  .pg-mega a.row span.lbl { font-size: 1.25rem; }
  .pg-mega a.row .arw { width: 36px; height: 36px; }
}

@media (max-width: 640px) {
  /* the panel's top bar is a 3-cell grid like the page bar; on a phone the CTA
     cell has no room beside logo + Close, so it drops to its own full-width row
     underneath rather than being squeezed into a third of the width */
  .pg-mega-top { grid-template-columns: 1fr auto; }
  .pg-mega-top > .pg-cta {
    grid-column: 1 / -1; justify-content: stretch;
    border-left: none; border-top: 1px solid var(--h-line);
    padding: 12px 14px;
  }
  .pg-mega-top > .pg-cta .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-mega,
  .pg-mega-in { transition: none; }
  .pg-cta .btn-solid::after { animation: none; opacity: 0.6; }
  .pg-head::after { transition: none; }
}