/* Deskrune v8 — Mobile Fixes Pass
 *
 * Concrete issues found via mobile-viewport audit (390×844, Playwright):
 *
 *   1. The floating "Pick up where you left off" pill covers the bottom-
 *      right of every screen — obscures section eyebrows, headlines,
 *      newsletter CTAs. On mobile it's a net negative.
 *
 *   2. /buy/ primary CTA "Buy the Executive Function Kit — $4.99" renders
 *      WASHED OUT (cream/light) instead of premium gradient orange. The
 *      conversion-critical button on the conversion-critical page looks
 *      worse than the homepage CTA. Needs the same gradient treatment.
 *
 *   3. Section "00 LIVE CHECKOUT" eyebrow has the bare number "00" alone
 *      with no rule line on mobile — looks orphaned.
 *
 *   4. Pull-quote ticker marquee overflows past viewport edges visibly
 *      on mobile, breaking the calm-margin rhythm.
 *
 *   5. "1,000 buyers" text has weird character-spacing artifact on mobile.
 *
 *   6. Excessive empty space below CTA blocks on the homepage.
 *
 *   7. Tool pages' "1 OF 3 FREE AI TOOLS" eyebrow is outdated (Mirror
 *      added → 5 tools). Fixed via per-page HTML edit, not CSS.
 *
 * 3 KB minified. Loaded after v7.
 */

/* ─── 1. Hide the resume-bar pill on mobile ────────────────────────────
 *
 * The pill is meant to help return-visitors pick up where they left off,
 * but on mobile (where viewport real estate is scarce) it covers section
 * eyebrows and tagline copy. The "fixed bottom-right" positioning that
 * works on desktop just shouts on mobile.
 */
@media (max-width: 760px) {
  .reentry-pill,
  .deskrune-resume-bar,
  .dr-resume-pill {
    display: none !important;
  }
}

/* ─── 2. /buy/ primary CTA: same premium gradient as homepage hero ──── */
@media (max-width: 760px) {
  /* The .buy.primary class lives on every kit-card "Buy" button on /buy/
     and is also used in the hero of /buy/. Force it to match the
     homepage primary CTA depth + gradient + shadow. */
  :root.dr-v4 a.buy.primary,
  a.buy.primary,
  :root.dr-v4 .buy.primary,
  .buy.primary {
    background-image:
      linear-gradient(180deg,
        rgba(255, 132, 92, 0.18) 0%,
        rgba(255, 132, 92, 0) 40%,
        rgba(0, 0, 0, 0.06) 100%),
      linear-gradient(180deg, #d36a44 0%, #c9613f 50%, #b85733 100%) !important;
    background-color: #c9613f !important;
    color: #faf9f5 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    padding: 16px 24px !important;
    border-radius: 10px !important;
    border: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.18) inset,
      0 0 0 1px rgba(160, 74, 44, 0.18),
      0 6px 16px -6px rgba(160, 74, 44, 0.42),
      0 18px 32px -12px rgba(20, 20, 19, 0.18) !important;
    text-shadow: 0 1px 0 rgba(120, 50, 30, 0.25);
    transition: transform 160ms cubic-bezier(0.45, 0, 0.55, 1),
                box-shadow 200ms cubic-bezier(0.45, 0, 0.55, 1) !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
    line-height: 1.3 !important;
  }
  :root.dr-v4 a.buy.primary:active,
  a.buy.primary:active,
  .buy.primary:active {
    transform: translateY(1px) !important;
  }

  /* .buy.secondary stays paper-card style, but make sure it's readable */
  :root.dr-v4 a.buy.secondary,
  a.buy.secondary,
  .buy.secondary {
    background: var(--dr-paper, #faf9f5) !important;
    color: var(--dr-ink, #1f1c18) !important;
    border: 1px solid var(--dr-rule, #d8d4c8) !important;
    border-radius: 10px !important;
    padding: 14px 22px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    line-height: 1.3 !important;
  }
}

/* ─── 3. Section eyebrow: bare "00" → real format ──────────────────── */
@media (max-width: 760px) {
  /* Wrap the bare "00" number in a tighter row layout so it doesn't
     orphan. Also makes the rule line and label collapse cleanly. */
  :root.dr-v4 .section-eyebrow,
  .section-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 16px 0 !important;
  }
  :root.dr-v4 .section-eyebrow .num,
  .section-eyebrow .num {
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--dr-ink, #1f1c18) !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
  }
  :root.dr-v4 .section-eyebrow .rule,
  .section-eyebrow .rule {
    width: 24px !important;
    height: 1px !important;
    background: var(--dr-clay, #c9613f) !important;
    opacity: 0.5 !important;
    flex-shrink: 0 !important;
  }
  :root.dr-v4 .section-eyebrow .label,
  .section-eyebrow .label {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--dr-clay, #c9613f) !important;
    line-height: 1.4 !important;
    /* Truncate gracefully if section labels run long */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}

/* ─── 4. Pull-quote ticker: contain to viewport, no overflow ──────── */
@media (max-width: 760px) {
  .dr-ticker,
  .ticker,
  .pull-quote-strip {
    overflow: hidden !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Pull the fade-mask in tighter on mobile so the cut-off feels
       intentional rather than broken */
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important;
  }
  .dr-ticker-track,
  .ticker-track {
    font-size: 14px !important;
    gap: 32px !important;
  }
}

/* ─── 5. "1,000 buyers" rendering — Fraunces ligature artifact ──────
 *
 * Some <strong> / <em> spans inside body paragraphs inherit Fraunces
 * (because of `:root.dr-v4 p strong { font-family: Fraunces }` rules
 * elsewhere). Fraunces has a contextual alternate that styles the comma
 * between digits — on small viewports it renders as a bracket-like
 * artifact. Force Atkinson on these spans + disable `calt`.
 */
@media (max-width: 760px) {
  :root.dr-v4 p,
  :root.dr-v4 .lede,
  :root.dr-v4 .hero-lede,
  :root.dr-v4 p strong,
  :root.dr-v4 p em,
  :root.dr-v4 .section p strong,
  p, .lede, .hero-lede, p strong, p em {
    font-family: 'Atkinson Hyperlegible', system-ui, sans-serif !important;
    font-feature-settings: "lnum" 1, "calt" 0, "liga" 1, "kern" 1 !important;
    font-variant-numeric: lining-nums !important;
  }
  :root.dr-v4 .deskrune-countdown,
  .deskrune-countdown,
  :root.dr-v4 [data-tnum],
  [data-tnum] {
    font-variant-numeric: tabular-nums lining-nums !important;
    font-feature-settings: "tnum" 1, "lnum" 1, "calt" 0 !important;
  }
}

/* ─── 14. Kill button underlines on /buy/ + homepage CTAs ─────────── */
@media (max-width: 760px) {
  :root.dr-v4 a.buy,
  a.buy,
  :root.dr-v4 a.buy.primary,
  a.buy.primary,
  :root.dr-v4 a.buy.secondary,
  a.buy.secondary,
  :root.dr-v4 a.buy *,
  a.buy *,
  :root.dr-v4 .hero-action,
  .hero-action,
  :root.dr-v4 .hero-action *,
  .hero-action *,
  :root.dr-v4 .cta-buy,
  .cta-buy,
  :root.dr-v4 .cta-buy * {
    text-decoration: none !important;
    border-bottom: 0 !important;
    text-underline-offset: 0 !important;
  }
}

/* ─── 6. Section spacing: tighter on mobile, less empty space ───── */
@media (max-width: 760px) {
  :root.dr-v4 main > section,
  main > section {
    padding-top: clamp(40px, 10vw, 64px) !important;
    padding-bottom: clamp(40px, 10vw, 64px) !important;
  }

  /* Container / inner wrappers: tighter horizontal padding */
  :root.dr-v4 .container,
  .container,
  :root.dr-v4 .section .container,
  .section .container {
    padding-left: clamp(16px, 5vw, 24px) !important;
    padding-right: clamp(16px, 5vw, 24px) !important;
    max-width: 100% !important;
  }
}

/* ─── 7. Hero text inner padding ─────────────────────────────────── */
@media (max-width: 760px) {
  /* Tighter, more deliberate hero inner padding */
  :root.dr-v4 .hero-vp .hero-inner-vp,
  .hero-vp .hero-inner-vp {
    padding: 32px 20px 48px !important;
  }
}

/* ─── 8. Sale banner: ensure it doesn't wrap to 3 lines ──────────── */
@media (max-width: 380px) {
  .deskrune-sale-banner {
    font-size: 11px !important;
    padding: 9px 12px !important;
  }
  .deskrune-sale-banner strong {
    font-size: 10px !important;
  }
  .deskrune-sale-banner .deskrune-countdown {
    font-size: 11px !important;
    padding: 3px 7px !important;
  }
}

/* ─── 9. Hero kit-card preview (when present): contain mobile bleed ── */
@media (max-width: 760px) {
  :root.dr-v4 .hpc-tag,
  .hpc-tag {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
  }
  :root.dr-v4 .hpc-title,
  .hpc-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.018em !important;
    margin: 6px 0 12px !important;
  }
  :root.dr-v4 .hpc-desc,
  .hpc-desc {
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--dr-ink-soft, #2a2520) !important;
  }
  :root.dr-v4 .dr-cover-wrap,
  .dr-cover-wrap {
    grid-template-columns: 140px 1fr !important;
    gap: 16px !important;
  }
  :root.dr-v4 .dr-kit-cover,
  .dr-kit-cover {
    width: 140px !important;
    height: auto !important;
  }
  :root.dr-v4 .dr-cover-notes,
  .dr-cover-notes {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
}

/* ─── 10. Anything with overflow: hidden + horizontal scroll bug ─── */
@media (max-width: 760px) {
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  :root.dr-v4 main,
  main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* ─── 11. Floating "Try the free AI tool" mobile CTA: less obstructive ── */
@media (max-width: 760px) {
  /* Add some breathing room and reduce visual weight */
  .dr-mobile-cta {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    right: 8px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px -4px rgba(20, 20, 19, 0.28) !important;
  }
  .dr-mobile-cta-text {
    font-size: 12px !important;
  }
  .dr-mobile-cta-text small {
    font-size: 10.5px !important;
  }
}

/* ─── 12. H1 measure consistency on /buy/ and /tools/ ────────────── */
@media (max-width: 760px) {
  :root.dr-v4 .qi-h1,
  .qi-h1,
  :root.dr-v4 .buy h1,
  .buy h1 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: clamp(30px, 8vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.024em !important;
    text-wrap: pretty !important;
    max-width: 14ch !important;
  }
}

/* ─── 13. Card stacks (kits, products) full-width with proper gap ── */
@media (max-width: 760px) {
  :root.dr-v4 .live-product-grid,
  .live-product-grid,
  :root.dr-v4 .qi-grid,
  .qi-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  :root.dr-v4 .live-product,
  .live-product,
  :root.dr-v4 .qi-card,
  .qi-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}