/* ──────────────────────────────────────────────────────────────────
   mobile-fixes.css
   ──────────────────────────────────────────────────────────────────
   Isolated mobile-only overrides. Lives in its own file so changes
   stay scoped and never touch the HTML or the inline <style> blocks
   of individual pages. To opt a page in:
       <link rel="stylesheet" href="/css/mobile-fixes.css">
       <script src="/js/burger.js" defer></script>
   in <head>. To revert, remove those two lines.

   What's inside:
     1. Per-page overflow fixes (/install step-body, /privacy table)
     2. Burger menu + drawer styles. The burger HTML is *not* in the
        pages — js/burger.js injects it at runtime from the existing
        <nav> .links. So pages that load this CSS + that JS get a
        working mobile nav without any HTML edit beyond two <head> tags.
   ────────────────────────────────────────────────────────────────── */

/* ── /install ────────────────────────────────────────────────────────
   The "01 / 02 / 03 / 04" steps use grid-template-columns: 80px 1fr.
   On a 375px viewport with the shell's 20–32px padding, the 1fr
   column can't shrink below its content because grid items have an
   implicit min-width:auto. Anything inside that won't wrap (long
   inline <code> like "pump.fun" or domain lists) then pushes the
   whole grid past the viewport.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .step { min-width: 0; }
  .step-body { min-width: 0; }
  .step-body p,
  .step-body h3,
  .step-body li { overflow-wrap: anywhere; word-break: break-word; }
  .step-body code { word-break: break-all; white-space: normal; }
}

/* ── /privacy ────────────────────────────────────────────────────────
   The processors / cookies table has 3–4 columns that together need
   ~450px of horizontal room. At 375px viewport the table forces a
   page-level horizontal scroll. Make the table itself scroll
   horizontally so the surrounding page stays at 100% width.
   Scoped to <table> inside <main> so we don't catch decorative
   tables elsewhere.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  main table thead,
  main table tbody,
  main table tr { width: max-content; min-width: 100%; }
}

/* ── Burger menu + drawer ────────────────────────────────────────────
   Activated by js/burger.js which injects the button + drawer markup
   at runtime. We only ship the styles here; the HTML is portable
   across pages with different <nav> structures.
   ──────────────────────────────────────────────────────────────── */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 210;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c, #00e5b0);
  transition: transform .3s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, .97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}
.mobile-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: 0;
  font-size: 38px;
  line-height: 1;
  color: var(--c, #00e5b0);
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'IBM Plex Mono', monospace;
}
.mobile-links {
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: center;
}
.mobile-links a {
  font: 400 26px/1 'Bebas Neue', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #e0e0e0;
  text-decoration: none;
  transition: color .25s, transform .2s;
  padding: 6px 12px;
}
.mobile-links a:hover,
.mobile-links a.active {
  color: var(--c, #00e5b0);
  transform: translateY(-1px);
}
body.menu-open { overflow: hidden; }

@media (max-width: 820px) {
  /* The burger replaces the desktop links on mobile. Targets every
     known nav variant we ship (<header><nav>, plain <nav>, .nav-inner). */
  nav .links,
  nav .nav-actions,
  .nav-inner .links,
  .nav-inner .nav-actions { display: none; }
  .nav-burger { display: flex; }
}
@media (min-width: 821px) {
  .mobile-menu { display: none; }
}

/* ──────────────────────────────────────────────────────────────────
   Quick wins — strip noise from the mobile experience
   ──────────────────────────────────────────────────────────────────
   The mobile build is meant to PRESENT, not convert. Anything that
   exists purely for desktop "wow" (particle canvas, cursor halo,
   glitch text, candle chart, hero preview widget) earns its keep
   only when there's room and a mouse to drive it. On a 375px screen
   they stretch already-too-long pages without helping the user read
   the page or decide whether to install on desktop.

   Everything in this block is gated behind a single
   @media (max-width: 760px) rule, so desktop renders byte-identical
   to before this change.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

  /* ── 1. Hero preview widget ──────────────────────────────────────
     #pv-wrap is the right column of the home hero (the SAFE 847/1000
     mock overlay). Its parent <div class="reveal delay-3"> uses
     display:flex inline, so even when #pv-wrap itself is hidden the
     wrapper keeps the grid track height — that's the huge empty grey
     rectangle visible in the middle of the home screenshot.
     We collapse the wrapper too. The /demo page keeps its widget:
     #pv-wrap there is outside .hero. */
  .hero > div:nth-of-type(2) { display: none !important; }

  /* ── 2. Loss-strip candle chart on home ──────────────────────────
     The .loss-chart-bg SVG is a 40-element animated candle pattern
     sitting behind the "$2.8B" loss number. The number reads fine
     on its own; the chart adds visual weight and a perpetual reveal
     animation that does nothing on mobile. Keep the surrounding
     copy, drop the chart. */
  .loss-strip .loss-chart-bg { display: none !important; }

  /* ── 3. Particle canvas + cursor-glow ───────────────────────────
     The canvas runs at 60fps on every page that ships hero-effects.js
     (home, engine, features, sources). Mobile pays for that in
     battery and reading focus. cursor-glow chases a pointer mobile
     users don't have. */
  #particles-canvas,
  .cursor-glow { display: none !important; }

  /* ── 4. Top stripe animation ─────────────────────────────────────
     .stripe is a 3px-tall animated gradient pinned to top:0. To a
     first-time mobile visitor it reads as a never-ending loading bar.
     Freeze the gradient — keep the colour for brand continuity but
     stop the motion. */
  .stripe { animation: none !important; }

  /* ── 5. Reveal-on-scroll fades ───────────────────────────────────
     .reveal elements start at opacity:0 and animate to 1 when scrolled
     into view. Layered onto an already-tall mobile page that means
     every section starts invisible and the scroll feels janky on slow
     connections. Show them immediately — the page is short enough
     not to need a tease. */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* ── 6. Glitch text effect ───────────────────────────────────────
     .glitch::before / ::after duplicate the headline and shift it
     in opposite directions, mostly meant to read as a hover effect.
     Mobile has no hover, the duplicates just sit there as ghost
     text and reduce legibility. Strip the pseudo-elements; the
     real headline stays untouched. */
  .glitch::before,
  .glitch::after { display: none !important; }

  /* ── 7. Oversized step numbers on /install ───────────────────────
     The .step-n elements ("01", "02", "03", "04") render at 80px and
     the parent .step grid reserves 80px for them. On 375px that
     leaves only ~263px for the actual instructions — long inline
     <code> and domain lists then jam against the right edge.
     Half-size the numbers and tighten the gutter. */
  .step { grid-template-columns: 40px 1fr !important; gap: 16px !important; }
  .step-n { font-size: 38px !important; line-height: 1 !important; }

  /* ── 8. FAQ accordion ────────────────────────────────────────────
     Mobile FAQ collapses each .qa to just its <h3> until tapped.
     js/faq-accordion.js wires the click + keyboard handlers and
     toggles the .qa-collapsed class. A caret communicates the
     disclosure state. /faq drops from ~9 screens to ~2 (just the
     question list) — the user scans, taps what's relevant, reads. */
  .qa h3 {
    position: relative;
    padding-right: 28px;
  }
  .qa h3::after {
    content: "▾";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--c, #00e5b0);
    transition: transform .2s ease;
  }
  .qa.qa-collapsed h3::after {
    transform: translateY(-50%) rotate(-90deg);
  }
  .qa.qa-collapsed > *:not(h3) {
    display: none !important;
  }
  /* Press-state feedback on tap (no hover on touch). */
  .qa h3:active {
    color: var(--c, #00e5b0);
  }

  /* ── 9. Legal pages typography (privacy + terms) ─────────────────
     /privacy and /terms ship 6-7 mobile screens of dense legal copy
     with 1.85 line-height and 22-30px paragraph margins. The desktop
     defaults (built for an 880px-wide column) leave too much vertical
     air on a 375px column where the eye is already tracking 70+
     characters per line.

     Scoped to <body class="legal-page"> (added only on privacy.html
     and terms.html) so other pages' typography is untouched. We do
     NOT collapse content here — these are legal documents users
     should be able to scroll and read end-to-end on any device. */
  .legal-page main h1 { font-size: 36px !important; margin-bottom: 12px !important; }
  .legal-page main h2 {
    font-size: 14px !important;
    letter-spacing: .12em;
    margin-top: 24px !important;
    margin-bottom: 8px !important;
    color: var(--c, #00e5b0);
  }
  .legal-page main h3 {
    font-size: 12px !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
  }
  .legal-page main p,
  .legal-page main li {
    font-size: 12px !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
  }
  .legal-page main ul,
  .legal-page main ol {
    margin: 6px 0 12px 18px !important;
  }
  .legal-page main ul li,
  .legal-page main ol li {
    margin-bottom: 4px !important;
  }
  .legal-page main {
    padding: 0 16px !important;
  }
  /* The "Last updated: …" line on these pages can disappear into the
     normal paragraph rhythm — keep it visually distinct but compact. */
  .legal-page main .updated {
    font-size: 11px !important;
    margin-bottom: 18px !important;
  }

  /* ── 10. Secondary pages: short-mobile mode ──────────────────────
     /about, /api, /security, /changelog, /proof are reference pages
     a mobile visitor doesn't need in full — they're either developer
     docs (api), historical records (changelog), or marketing-density
     reads (proof, security, about) that fit better on a desktop
     column. We keep the hero (h1 + eyebrow + intro paragraphs) so the
     page identity is intact, and hide everything starting at the
     first <h2>. A short "continue on desktop" line replaces the
     missing content so the page doesn't end mid-sentence.

     Opt-in via <body class="short-mobile">. Pages that ship this
     pattern lose 3-7 mobile screens each without losing brand
     presence. Desktop is untouched. */
  /* Cutoff points across the 5 pages we apply this to:
       - about, api, security: first <h2> sibling under <main>
       - changelog: every <div class="release"> block
       - proof: <div class="section-label"> dividers and what follows
     Listing all three keeps the rule one block long and resilient to
     pages adopting either shape later. */
  body.short-mobile main > h2,
  body.short-mobile main > h2 ~ *,
  body.short-mobile main > .section-label,
  body.short-mobile main > .section-label ~ *,
  body.short-mobile main > .release {
    display: none !important;
  }
  body.short-mobile main::after {
    content: "↗  See the full version on desktop";
    display: block;
    margin: 28px 0 0;
    padding: 18px 20px;
    border: 1px solid var(--border, #1a1a1e);
    color: var(--c, #00e5b0);
    text-align: center;
    font: 600 11px/1.5 'IBM Plex Mono', monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  /* ── 11. /demo : drop the embedded DexScreener iframe ────────────
     The .browser-frame on /demo embeds a live DexScreener iframe
     plus the Antares overlay host. On mobile the iframe is too small
     to be readable, the drag-handle UX assumes a mouse, and the
     four-token switcher just makes the page longer. Hide the frame +
     the controls and surface a short "open on desktop" line where
     the demo-notice sits. The hero, the demo-notice intro and the
     bottom "Install" CTA stay — the page still reads as a demo
     teaser. */
  body.is-demo .browser-frame,
  body.is-demo .demo-controls { display: none !important; }
  body.is-demo .demo-notice::after {
    content: "↗  Open on desktop to interact with the live demo (drag the overlay, switch between the four token examples).";
    display: block;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--c, #00e5b0);
    background: rgba(0, 229, 176, .04);
    color: #aaa;
    font: 500 12px/1.6 'IBM Plex Mono', monospace;
    text-align: center;
  }

  /* ── 12. Polish pass #2 ──────────────────────────────────────────
     Adjustments from user review after PRs #156–#162. Every rule
     stays inside the parent @media (max-width: 760px). */

  /* 12a. Home — hide the "Scroll ↓" arrow under the hero. The bounce
     animation pulls focus and the user already knows how to scroll. */
  .scroll-indicator { display: none !important; }

  /* 12b. /demo — collapse the page to its hero on mobile. PR #162
     already hid the iframe + 4-token switcher; this drops the rest
     (demo-notice, bottom CTA) so the page is just title + an
     "open on desktop" line. */
  body.is-demo main > *:not(.page-hero) { display: none !important; }
  body.is-demo main::after {
    content: "↗  Open on desktop to interact with the live demo.";
    display: block;
    margin: 28px 16px 0;
    padding: 20px;
    border: 1px solid var(--c, #00e5b0);
    background: rgba(0, 229, 176, .04);
    color: #aaa;
    font: 500 12px/1.6 'IBM Plex Mono', monospace;
    text-align: center;
  }

  /* 12c. /engine — drop the "Score Ranges" band. .score-visual is
     unique to /engine, so sibling-has() also drops the
     .section-label that introduces it. */
  .section-label:has(+ .score-visual),
  .score-visual { display: none !important; }

  /* 12d. /compare — drop the bottom "Try the demo. Decide for
     yourself." cta-final block. The matrix above is the page's
     value; the demo card was a second CTA target on a page that
     already has "Install" in nav and footer. */
  body.is-compare .cta-final { display: none !important; }

  /* 12e. /pricing eyebrow "Two seconds · seven layers · one verdict"
     wraps onto multiple lines at 375px. Shrink + nowrap so it
     reads as a tagline, not a paragraph. */
  body.is-pricing .page-hero .eyebrow {
    font-size: 9px !important;
    letter-spacing: .18em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 12f. /pricing — hide the three tier CTAs entirely on mobile.
     "Install free", "Subscribe on desktop" Pro, "Subscribe on
     desktop" Yearly are all dead ends on a phone. Showing the
     prices + feature lists is enough — the page becomes a
     brochure, not a checkout. */
  body.is-pricing .tier-cta { display: none !important; }

  /* 12g. "Open on desktop" rewrites — these used to render as
     primary buttons. A button you can't action is worse than a
     sentence; strip the button chrome so they read as plain inline
     copy. pointer-events:none also makes "tap then nothing" go
     away — the text is informational, not interactive. */
  [data-mobile-rewritten] {
    display: inline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    color: var(--c, #00e5b0) !important;
    font: 500 12px/1.5 'IBM Plex Mono', monospace !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    /* Centre the rewritten copy. These rewrites replace CTAs that
       were originally button-shaped and visually centred. Even where
       the rewrite renders inline inside a paragraph, centring reads
       more like a quiet aside than a fragment that drifted left. */
    text-align: center !important;
    cursor: default !important;
    pointer-events: none !important;
  }
  /* If the parent was a CTA row, the inline span ends up sandwiched
     between paragraphs. Give it a small breathing block. */
  .cta-row > [data-mobile-rewritten],
  .tier > [data-mobile-rewritten] {
    display: block !important;
    margin: 12px 0 !important;
    text-align: center !important;
  }

  /* ── 13. Polish pass #3 ──────────────────────────────────────────
     Five more user-flagged adjustments after walking the site again
     on iPhone. Everything stays inside the parent
     @media (max-width: 760px). */

  /* 13a. Hide "Demo" from the navigation entirely on mobile — the
     /demo page is now a single-screen redirect anyway (PR #163),
     and the user wants the burger menu to surface only pages that
     read well on a phone. Targets both the desktop link group
     (already hidden by the burger swap but defence-in-depth) AND
     the mobile drawer where the burger.js injection copies links
     verbatim. */
  nav .links a[href*="demo"],
  .mobile-links a[href*="demo"] { display: none !important; }

  /* 13b. Hide install + login CTAs from the burger drawer.
     The drawer is meant to be navigation, not action buttons.
     The mobile-cta-rewrite already turned the inline CTAs on each
     page into plain text; their drawer copies should drop out too.

     Install side: matched on href + .m-install class (catches both
     inline-shipped drawers from PR #146 and the JS-injected drawer
     on /auth /account /faq).

     Login side: same treatment. Antares accounts only matter for
     paying users (Pro / Yearly), and paying happens on desktop —
     the checkout modal needs a popup that mobile browsers block.
     Surfacing "Log in" on mobile is a dead end. The /auth page
     itself stays reachable by typing the URL, just not advertised
     in the drawer. */
  .mobile-links a[href*="install"],
  .mobile-links a[href*="auth"],
  .mobile-actions a[href*="install"],
  .mobile-actions a[href*="auth"],
  .mobile-actions .m-install,
  .mobile-actions .m-login { display: none !important; }

  /* 13c. Footer — mobile rules.
       • Home (body.is-home) — footer is hidden entirely. The home
         page ends on the cta-final and doesn't need a secondary
         link strip below.
       • All other pages — the version line ("Antares v1.3.0 ·
         No mercy for scammers") is hidden via font-size:0 trick,
         and the .foot-links row is re-rendered as two lines:
            line 1: "Open on desktop"  (the install link, rewritten
                                        by mobile-cta-rewrite.js)
            line 2: "Support · Privacy · About"
         The " · " text-node separator between the install link
         and Support is stripped at runtime by mobile-cta-rewrite.js
         (otherwise it would orphan at the start of line 2). */
  body.is-home footer { display: none !important; }

  body:not(.is-home) footer {
    /* Hides the "Antares v1.3.0" text node + <span>No mercy</span>
       by zeroing the inherited font. We restore the font on
       .foot-links below. */
    font-size: 0 !important;
    padding: 24px 16px !important;
    margin-top: 32px !important;
    text-align: center !important;
  }
  body:not(.is-home) footer .foot-links {
    font-size: 9px !important;
    line-height: 1.8 !important;
    letter-spacing: .18em;
    display: block;
    margin-top: 0 !important;
  }
  body:not(.is-home) footer .foot-links * {
    font-size: inherit !important;
  }
  /* Install / "Full content available on desktop" sits on its own
     line above the other links. The !important is required to beat
     the global `[data-mobile-rewritten] { display: inline !important }`
     rule below (block 12g) — that rule strips button chrome from
     rewritten CTAs, but in the footer we want the rewritten link
     on its own line. Without !important the 12g rule wins because
     it carries its own !important. */
  body:not(.is-home) footer .foot-links a[href*="install"] {
    display: block !important;
    margin-bottom: 6px !important;
    /* Centre the rewritten label. Block 12g globally pins every
       rewritten CTA to text-align:left so they read as inline body
       copy; in the footer we want the line centred under the rest
       of the link row. Override with !important. */
    text-align: center !important;
  }

  /* 13d. Home — drop the giant "ANTARES" wordmark watermark behind
     the bottom cta-final. The pseudo-element renders at 280px on
     desktop where there's room; on a 375px column it just bleeds
     off both sides and adds nothing. The radial-glow pulse goes
     too (less motion = calmer page). */
  .cta-final::before,
  .cta-final::after { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────
   Desktop-only footer tweak
   ──────────────────────────────────────────────────────────────────
   On desktop every page renders a footer line like:

     Antares v1.3.0 · No mercy for scammers
     Install · Support · Privacy · About

   The version text and the link row both inherit the dim grey
   var(--dim) / #3a3a40 from <footer>. The "No mercy for scammers"
   span, however, was styled in inline <style> blocks as
   `footer span { color: var(--c) }` — mint — so it stood out as
   a brand accent on every page.

   The user asked for that span to read in the same dim grey as the
   rest of the line so the footer reads as one muted strip.

   Gated under min-width: 761px so the mobile rule above
   (font-size: 0 to hide the whole text line) is unchanged on
   small screens.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 761px) {
  footer span { color: inherit !important; }
}

/* ──────────────────────────────────────────────────────────────────
   14. Mobile watermarks — drawer + cta-final
   ──────────────────────────────────────────────────────────────────
   User feedback after walking the site on iPhone:
     • Burger drawer had two stray curved lines bleeding through.
       Cause: .stripe sits at z-index:999, above the drawer's 200,
       so the rainbow gradient bar at the top of the page (which
       has fade endings on both sides → it reads as a curve, not a
       straight line, on a 375px column) shows up on top of the
       drawer.
     • Drawer and the bottom cta-final both feel visually empty
       on mobile. Asked to put the antares atom icon as a faint
       background watermark in both places.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

  /* 14a. Hide the top stripe whenever the burger drawer is open.
     burger.js already adds .menu-open to <body> for the same
     reason it locks scroll. Reusing the hook lets us suppress the
     stripe without touching its z-index globally. */
  body.menu-open .stripe { display: none !important; }

  /* 14b. Antares brand signature at the bottom of the drawer.
     The previous attempt (#174, #175, #176) put the atom as a
     full-screen watermark BEHIND the links. The user reported it
     still read as visual noise — the icon sat right where the eye
     was scanning the link list, so the two competed for attention.

     New approach: drop the watermark, put a small atom + "ANTARES"
     wordmark at the bottom of the drawer, mirroring the brand
     signature in the header. Reads as a clean sign-off, doesn't
     fight the navigation.

     Implementation: ::after holds the wordmark text, with the atom
     icon as a left-aligned background. padding-left makes room for
     the icon at the start of the line so they read side by side.
     Position: bottom-centre via absolute + translateX(-50%). */
  .mobile-menu::after {
    content: 'ANTARES';
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 44px;
    font: 400 26px/1 'Bebas Neue', sans-serif;
    letter-spacing: .18em;
    color: #e0e0e0;
    background: url('/assets/icon.png') no-repeat left center;
    background-size: 32px auto;
    pointer-events: none;
    z-index: 0;
  }

  /* 14c. Same watermark behind the home's bottom cta-final
     ("The next rug pull won't warn you. ANTARES WILL."). PR #163
     hid .cta-final::before and ::after to drop the giant text
     watermark + radial pulse. Re-purpose ::after to carry the
     icon watermark instead — explicit !important to win against
     that hide rule. */
  .cta-final::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    background: url('/assets/icon.png') no-repeat center !important;
    /* Same enlarge as the drawer: 440px fills the empty space between
       the threat line and the bottom hand-off message, .12 opacity
       reads as a clear logo without competing with the headline. */
    background-size: 440px auto !important;
    opacity: .12 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    animation: none !important;
  }
  /* The cta-final's own content already sits at z-index:1 in the
     home stylesheet, so this watermark stays in the back. */
}
