/* ── Phone pass (2026-10-16) ─────────────────────────────────────────────
   Loaded LAST on every page, and every rule sits inside the ≤720px query, so
   tablets and desktop are untouched. Three jobs:
     1. Header: logo centred, smaller burger pinned right, shorter bar.
     2. Headlines bigger, subtitles shorter.
     3. Far less text: section ledes, card descriptions and footnotes are
        hidden on phones; headings, visuals, prices and buttons stay.
   The hidden copy is still in the page (desktop shows it), so nothing here
   changes what the site says — only how much of it a phone has to scroll.
   `html body` prefixes win the cascade over styles.css / light-theme.css
   without !important. ── */

/* Short phone-only copy, written next to the long version in the markup. */
.m-only { display: none; }

@media (max-width: 720px) {
  .m-only { display: revert; }
  .m-hide { display: none; }

  /* ── 1. Header ───────────────────────────────────────────────────────── */
  html body header.site-header,
  html body.mg-light header.site-header {
    grid-template-columns: 36px 1fr 36px;
    row-gap: 0;
    align-items: center;
    min-height: 0;
    padding: 9px 12px;
  }
  html body header.site-header .sg-brandwrap {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
  }
  html body header.site-header .sg-logo-link { gap: 8px; }
  html body header.site-header .sg-logo-mark { width: 30px; height: 30px; }
  html body header.site-header .sg-logo-word-img { width: 124px; height: auto; }

  html body header.site-header .menu-toggle,
  html body.mg-light header.site-header .menu-toggle {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 9px;
    gap: 3px;
  }
  html body header.site-header .menu-toggle span { width: 15px; height: 1.5px; }
  html body header.site-header .site-menu { grid-column: 1 / -1; grid-row: 2; }
  html body header.site-header.is-menu-open .site-menu { margin-top: 10px; }

  /* ── 2. Headlines ────────────────────────────────────────────────────── */
  /* Homepage masthead */
  html body.mg-light .hp-fan { padding-top: 26px; padding-left: 16px; padding-right: 16px; }
  /* Fixed lines that never wrap: "GenieCheats" / "The #1" / "Automation Tool"
     (index.html breaks after #1 with a phone-only <br class="m-only">; desktop
     keeps "The #1 Automation Tool" on one line). The longest phone line,
     "Automation Tool", is ~7.9em wide; dividing by 8.6 leaves room for Safari's
     wider rendering and the fallback font. 2026-10-18: the copy had become
     "The #1 Automation Tool" on one ~10.5em line, which ran off the screen. */
  html body.mg-light .hp-fan h1 .hp-line-in { white-space: nowrap; }
  html body.mg-light .hp-fan h1 {
    font-size: min(50px, calc((100vw - 32px) / 8.6));
    line-height: 1;
    letter-spacing: -0.035em;
  }
  html body.mg-light .hp-fan-lede {
    font-size: 16px;
    line-height: 1.45;
    max-width: 30ch;
    margin-top: 12px;
  }
  html body.mg-light .hp-fan-cta { margin-top: 18px; gap: 10px; }
  /* Platform grid: three across, logos and names only */
  html body.mg-light .hp-fan-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
  }
  html body.mg-light .hp-fan-item { padding: 12px 4px 10px; gap: 4px; }
  /* Three across, on a six-column grid so a short last row can be centred:
     one tile left over sits in the middle, two sit side by side in the middle. */
  html body.mg-light .hp-fan-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html body.mg-light .hp-fan-row > .hp-fan-item { grid-column: span 2; }
  html body.mg-light .hp-fan-row > .hp-fan-item:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
  html body.mg-light .hp-fan-row > .hp-fan-item:last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
  html body.mg-light .hp-fan-item img { width: 34px; height: 34px; }
  html body.mg-light .hp-fan-item strong { font-size: 13px; }
  html body.mg-light .hp-fan-item small { display: none; }
  html body.mg-light .hp-fan-ssa,
  html body.mg-light .hp-fan-new { font-size: 7.5px; padding: 2px 5px; top: 4px; }

  /* Product-page hero: headline first, then the video, then the buttons */
  html body.mg-light .mgh-inner { display: flex; flex-direction: column; align-items: stretch; }
  html body.mg-light .mgh-title { order: 1; }
  html body.mg-light .mgh-sub { order: 2; }
  html body.mg-light .mgh-player { order: 3; }
  html body.mg-light .mgh-cta { order: 4; }
  html body.mg-light .mgh-trust { order: 5; }
  html body.mg-light .mgh-feats { order: 6; }
  /* "The #1" never splits across lines */
  html body.mg-light .mgh-title .mgh-g1 { white-space: nowrap; }
  html body.mg-light .mgh-title {
    font-size: clamp(40px, 12vw, 50px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 6px 0 10px;
  }
  html body.mg-light .mgh-sub {
    font-size: 16px;
    line-height: 1.45;
    margin: 0 auto 16px;
    max-width: 32ch;
  }
  html body.mg-light .mgh-sub-b,
  html body.mg-light .mgh-sub br { display: none; }
  html body.mg-light .mgh-player { margin: 0 0 16px; }
  html body.mg-light .mgh-cta { margin-bottom: 14px; }
  /* "Trusted by 3,000+" appears three times in the hero; keep the rating pill */
  html body.mg-light .mgh-assure { display: none; }
  html body.mg-light .mgh-trust { flex-direction: row; justify-content: center; margin: 0 0 18px; }
  html body.mg-light .mgh-trust > :first-child:not(:only-child) { display: none; }
  /* Feature tiles: icon + title only */
  html body.mg-light .mgh-feat p { display: none; }
  html body.mg-light .mgh-feat { padding-bottom: 14px; }

  /* Other pages' h1s */
  html body .gp-hero h1,
  html body .plan-section h1,
  html body .plans-heading h1 { font-size: clamp(36px, 10.5vw, 44px); line-height: 1.04; }
  html body.sg-page:not(.mg-light) main h1 { font-size: clamp(30px, 8.6vw, 38px); line-height: 1.08; }

  /* ── 3. Less text ────────────────────────────────────────────────────── */
  /* Section intros under an h2 */
  html body .sg-section-head > p,
  html body .plans-sub,
  html body .ob-lede,
  html body .mgv-head > p,
  html body [class$="-how-lede"],
  html body [class*="-how-lede "],
  html body [class$="-how-foot-note"],
  html body .dg-snip-lede,
  html body .gk-live-lede,
  html body .eg-lede,
  html body .eg-tiers-foot,
  html body .bk-modes-lede,
  html body .bk-modes-note,
  html body .gp-head > p,
  html body .gp-calc-note,
  html body .sg-cta-inner > p { display: none; }

  /* Card and list descriptions: keep the title, drop the sentence under it */
  html body .hp-steps-grid p,
  html body .sg-feature-card p,
  html body .mgf-copy p,
  html body .mgv-cap p,
  html body .dg-how-body p,
  html body .dg-snip-points p,
  html body ol[class$="x-legend"] li > p,
  html body .gp-steps-grid p,
  html body .gp-who-card p,
  html body [class*="-set-note"] { display: none; }

  /* Homepage */
  html body.mg-light .hp-steps-grid { gap: 8px; }
  html body.mg-light .hp-steps-grid li {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 0;
  }
  html body.mg-light .hp-steps-grid li h3 { margin: 0; font-size: 17px; }
  html body.mg-light .hp-step-num { margin: 0; flex: none; }
  html body.mg-light .hp-discord-copy p { display: none; }
  html body.mg-light .hp-shelf .hp-lede,
  html body.mg-light .hp-shelf .hp-note { display: none; }
  html body.mg-light .hp-shelf .hp-points li { font-size: 14.5px; }
  html body.mg-light .hp-gp-lede,
  html body.mg-light .hp-gp-ways li span:not(:first-child),
  html body.mg-light .hp-gp-ways li p,
  html body.mg-light .hp-parent .sg-section-head p { display: none; }
  html body .footer-brandline { display: none; }

  /* Group plan page */
  html body .gp-final-card > p { display: none; }
  html body .gp-steps-grid { gap: 8px; }
  html body .gp-steps-grid li {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 0;
  }
  html body .gp-steps-grid li h3 { margin: 0; font-size: 18px; }
  html body .gp-steps-grid li > :first-child { margin: 0; flex: none; }

  /* Plan cards: price and button up front. The eight per-platform dropdowns
     made every card ~1,400px tall; a product page keeps only its own
     (the one pricing-block.js opens), the homepage keeps none. */
  html body.mg-light .pc-drops > .pc-drop:not([open]) { display: none; }
  html body.mg-light .pc-drops:not(:has(.pc-drop[open])) { display: none; }
  html body.mg-light .pc-ssa p { display: none; }
  html body.mg-light .pc-drop-body .fl-sub,
  html body.mg-light .pc-drop-note { display: none; }

  /* Onboarding stepper: five labels don't fit across a phone; numbers only */
  html body .ob-rail .ob-step-t,
  html body .ob-rail .ob-step-s { display: none; }
  html body.mg-light .pc-extra-copy { display: none; }
  html body.mg-light .pc-extra-note { display: none; }

  /* Footer: link columns side by side instead of one long list */
  html body footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }
}

@media (max-width: 380px) {
  html body.mg-light .hp-fan-item strong { font-size: 12px; }
  html body header.site-header .sg-logo-word-img { width: 112px; }
}