/* v16-content-and-overlay-fixes-v20260514a.css — 2026-05-14 (round 2 fixes)
 *
 * Critical bugs caught after audit-perf-design deploy:
 *
 *   1. `.dr-reveal` class collision. deskrune-mega.css defines:
 *        .dr-reveal { position: fixed; inset: 0; z-index: 10000;
 *                     background: var(--dr-paper); display: flex; ... }
 *      That was intended for the brief page-load brand-glyph overlay
 *      (a <div class="dr-reveal"> appended to body for ~700ms). But
 *      `.dr-reveal` is ALSO used as a scroll-reveal trigger on most
 *      headings and lede paragraphs throughout the site. Result: every
 *      <h2 class="dr-reveal"> and <p class="lede dr-reveal"> on the page
 *      becomes a full-viewport fixed overlay at z-index 10000, covering
 *      all the content below it. That's the "scroll down, half the page
 *      flashes white, then slate-blue with no content" symptom.
 *
 *   2. `content-visibility: auto` on `.dr-social-proof`, `.dr-product-preview`,
 *      `.dr-faq`, and `.section + .section` was causing a paint flash when
 *      sections came into view. With `contain-intrinsic-size: auto 600px`,
 *      the section reserved 600px before paint, then expanded to actual
 *      height when in view — producing a layout shift + flash.
 *
 *   3. The home page hero H1 with `data-split` was wrapping individual
 *      words in `<span style="display:inline-block; overflow:hidden">`
 *      wrappers combined with `text-wrap: balance` from the canonical
 *      .hero-vp h1 rules. On long headlines, Chromium's text-balance
 *      algorithm broke a long inline-block word ("planners") mid-glyph,
 *      rendering "p" on one line and "lanners" on the next. Hard-disable
 *      the text-split via `[data-split-disabled]` so JS skips the rewrite.
 *
 * Loaded LAST.
 */

/* ═══════════════════════════════════════════════════════════════════
   1. .dr-reveal class collision — reset for heading/paragraph use
   ═══════════════════════════════════════════════════════════════════ */
h1.dr-reveal,
h2.dr-reveal,
h3.dr-reveal,
h4.dr-reveal,
h5.dr-reveal,
h6.dr-reveal,
p.dr-reveal,
.lede.dr-reveal,
.afm-summary.dr-reveal,
.attr.dr-reveal,
section .dr-reveal,
[data-dr-reveal].dr-reveal {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  background: transparent !important;
  display: revert !important;
  align-items: revert !important;
  justify-content: revert !important;
  pointer-events: auto !important;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) !important;
}

/* The page-load brand-glyph overlay (from v4-foundation) used `.dr-reveal`
   directly on a <div> appended to body. Keep that overlay behavior via a
   more specific selector so it stays a thin polish layer that fades out.
   v4-foundation appends with `.dr-reveal-active` shortly after; we scope
   the overlay rule to that variant only. */
body > .dr-reveal:not(h1):not(h2):not(h3):not(p) {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--ds-bg, #faf7f2);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.45,0,0.55,1), opacity 200ms cubic-bezier(0.45,0,0.55,1);
}

/* ═══════════════════════════════════════════════════════════════════
   2. Remove content-visibility:auto that caused white flash on scroll
   ═══════════════════════════════════════════════════════════════════ */
.section,
.section + .section,
.dr-social-proof,
.dr-product-preview,
.dr-faq,
footer.minimal {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* Keep paint/layout containment as a perf win — that part was fine. */
.section,
.dr-social-proof,
.dr-product-preview,
.dr-faq,
footer.minimal {
  contain: layout style;
}

/* ═══════════════════════════════════════════════════════════════════
   3. Hide hidden spiraling-badge collision targets
   ═══════════════════════════════════════════════════════════════════ */
.spiraling-badge-link,
.dr-spiraling-badge,
.dr-crisis-float {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   4. Hide any leftover sale-banner stubs or sale-price overlays
   ═══════════════════════════════════════════════════════════════════ */
.dr-disabled-sale-banner-stub,
.deskrune-sale-banner,
.deskrune-proof-toast,
.deskrune-live-rev {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5. Disable hero text-split if its data-split-disabled flag is set
   (we set it on the H1 in index.html, but also defensively kill any
   word-wrap clipping for split text containers).
   ═══════════════════════════════════════════════════════════════════ */
[data-split-disabled] {
  opacity: 1 !important;
}
[data-split-disabled] span {
  overflow: visible !important;
  transform: none !important;
  opacity: 1 !important;
}

/* The hero H1 specifically — give descenders room and prevent inline-block
   breaks no matter what. */
.hero-vp h1 {
  overflow: visible !important;
  padding-bottom: 0.12em;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   5b. CRITICAL — force visibility on all reveal-target cards/sections.
   GSAP `.from()` applies inline `opacity:0; transform:translateY(24px)`
   to every `.dr-reveal`, `[data-dr-reveal]`, and `.dr-stagger-group > *`
   that starts below the fold, then relies on ScrollTrigger to animate
   them back to visible. ScrollTrigger fires unreliably (race with
   content-visibility transitions, deferred boot, etc.) leaving entire
   sections of cards permanently invisible — the navy "Six tools you
   can use right now" section was empty even though all 6 cards exist
   in the DOM.
   `!important` on author stylesheet beats inline styles per CSS spec
   (author-important > author-normal-inline).
   ═══════════════════════════════════════════════════════════════════ */
.dr-stagger-group > *,
.tool-card,
.dr-preview-card,
.audience-card,
.product-rich,
.quote-card,
.afm-card,
.picks-strip > *,
.dr-receipt,
.hero-product-card,
.hero-action,
h2.dr-reveal,
h3.dr-reveal,
p.dr-reveal,
p.lede.dr-reveal,
.hpc-pullquote {
  opacity: 1 !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6. Donation framing — restyle the home-sticky-buy bar
   The element keeps its class for layout/animation, but content is
   semantically a tip jar now. The button color stays clay for visibility.
   ═══════════════════════════════════════════════════════════════════ */
.home-sticky-buy-text strong {
  font-family: var(--ds-font-serif);
}
.home-sticky-buy-text span {
  color: rgba(250, 249, 245, 0.75);
}

/* Strip the legacy `text-decoration: line-through` on .hpc-price .was.
   That class used to mean "old price (was $19)" and styled the strikeout.
   Now `.was` holds descriptive text ("Open to the ADHD community · tip jar
   appreciated") which should NOT render as struck-through. */
.hpc-price .was {
  text-decoration: none !important;
  font-style: normal;
  color: var(--ds-ink-soft);
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   6b. HERO RUNE PLACEMENT — keep the 3D rune in the first viewport.
   The today pill previously became a third grid child and pushed this
   card below the fold. After that fix, the card still led with copy and
   only showed the cube's top edge. Make the rune the card's visual lead.
   ═══════════════════════════════════════════════════════════════════ */
.hero-vp .hero-product-card {
  display: flex !important;
  flex-direction: column;
}
.hero-vp .hero-product-card .hpc-tag { order: 1; align-self: flex-start; }
.hero-vp .hero-product-card .hero-rune-stage { order: 2; }
.hero-vp .hero-product-card .hpc-title { order: 3; }
.hero-vp .hero-product-card .hpc-desc { order: 4; }
.hero-vp .hero-product-card .hpc-price { order: 5; }
.hero-vp .hero-product-card .hpc-actions { order: 6; }
.hero-vp .hero-product-card .hpc-pullquote { order: 7; }

@media (min-width: 881px) {
  .hero-vp .hero-product-card .hero-rune-stage {
    gap: 18px;
    padding: 18px 0 10px;
  }
  .hero-vp .hero-product-card .rune-stage-inner {
    width: 220px !important;
    height: 220px !important;
    min-height: 220px !important;
    margin: 8px 0 10px;
  }
  .hero-vp .hero-product-card .rune-face--front  { transform: translateZ(110px) !important; }
  .hero-vp .hero-product-card .rune-face--back   { transform: translateZ(-110px) rotateY(180deg) !important; }
  .hero-vp .hero-product-card .rune-face--right  { transform: rotateY(90deg)  translateZ(110px) !important; }
  .hero-vp .hero-product-card .rune-face--left   { transform: rotateY(-90deg) translateZ(110px) !important; }
  .hero-vp .hero-product-card .rune-face--top    { transform: rotateX(90deg)  translateZ(110px) !important; }
  .hero-vp .hero-product-card .rune-face--bottom { transform: rotateX(-90deg) translateZ(110px) !important; }
  .hero-vp .hero-product-card .rune-word {
    font-size: clamp(18px, 1.8vw, 22px);
    margin-bottom: 8px;
  }
  .hero-vp .hero-product-card .rune-defs {
    font-size: 12px;
    line-height: 1.34;
  }
  .hero-vp .hero-product-card .rune-def + .rune-def {
    margin-top: 4px;
  }
  .hero-vp .hero-product-card .hpc-title {
    margin-top: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   7. MOBILE — force the hero product card (which now contains the rune
   cube animation) to be visible. v7-mobile-premium-v20260509b.css set
   `:root.dr-v4 .hero-vp .hero-product-card, .hero-vp .hero-product-card
   { display: none }` at `@media (max-width: 760px)` to declutter the
   old mobile hero. That now hides the entire rune-stage on mobile.
   Override here so mobile users get the cube unfolding animation +
   DESK · RUNE explainer too.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* The decorative canvas was taking the first ~320px on mobile, leaving
     users with a blank-looking hero before the actual 3D rune. */
  .hero-vp .dr-hero-canvas-wrap,
  .hero-vp #dr-hero-canvas {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  .hero-vp {
    padding-top: 28px !important;
  }

  /* Reorder: cube card FIRST on mobile, then the headline/CTA column.
     The hero-inner-vp computes to `display: block` on mobile (some
     deeper rule wins over the original `display: grid`), so neither
     `order` nor grid-row works. Force flex column-reverse and the
     LAST DOM child (the .hero-product-card aside) renders first
     visually. The stagger div is the FIRST DOM child and renders second. */
  /* Match the specificity of v6-mobile-power-v20260509c.css which has:
       `:root.dr-v4 .hero-vp .hero-inner-vp { display: block !important; }`
     A bare `.hero-vp .hero-inner-vp` is (0,2,0) and loses to v6's (0,4,0)
     even with !important — !important ties break on specificity. Mirror
     its selector chain to win on source-order at equal specificity. */
  :root.dr-v4 .hero-vp .hero-inner-vp,
  .hero-vp .hero-inner-vp {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 24px !important;
  }

  :root.dr-v4 .hero-vp .hero-product-card,
  .hero-vp .hero-product-card {
    display: block !important;
    padding: 18px 16px !important;
    margin-top: 0 !important;      /* was 24px — now first, sits flush with hero top padding */
    margin-bottom: 24px !important; /* space between cube card and headline below */
    max-width: 100% !important;
  }

  /* Drop redundant content on mobile — keep ONLY the rune-stage and a
     compact CTA. Mobile users still get the brand reveal but without
     the desktop card's extra copy stacking up. */
  .hero-vp .hero-product-card .hpc-tag,
  .hero-vp .hero-product-card .hpc-title,
  .hero-vp .hero-product-card .hpc-desc,
  .hero-vp .hero-product-card .hpc-pullquote {
    display: none !important;
  }

  /* Tighten the rune stage on mobile: smaller cube, smaller word, smaller defs */
  .hero-vp .hero-product-card .rune-stage-inner {
    width: 200px !important;
    height: 200px !important;
  }

  .hero-vp .hero-product-card .rune-face--front  { transform: translateZ(100px) !important; }
  .hero-vp .hero-product-card .rune-face--back   { transform: translateZ(-100px) rotateY(180deg) !important; }
  .hero-vp .hero-product-card .rune-face--right  { transform: rotateY(90deg)  translateZ(100px) !important; }
  .hero-vp .hero-product-card .rune-face--left   { transform: rotateY(-90deg) translateZ(100px) !important; }
  .hero-vp .hero-product-card .rune-face--top    { transform: rotateX(90deg)  translateZ(100px) !important; }
  .hero-vp .hero-product-card .rune-face--bottom { transform: rotateX(-90deg) translateZ(100px) !important; }

  .hero-vp .hero-product-card .rune-word {
    font-size: clamp(18px, 5vw, 22px);
    margin-bottom: 10px;
  }
  .hero-vp .hero-product-card .rune-defs {
    font-size: 12.5px;
    line-height: 1.55;
  }
  .hero-vp .hero-product-card .rune-def--sum {
    font-size: 14px;
    max-width: 28ch;
  }

  /* Tighten the .hpc-actions buttons on mobile so they don't push the
     fold past the cube. Also keep them visible. */
  .hero-vp .hero-product-card .hpc-actions {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
  }
  .hero-vp .hero-product-card .hpc-actions .hero-action {
    width: 100%;
    text-align: center;
  }

  /* Price row on mobile — keep visible but compact */
  .hero-vp .hero-product-card .hpc-price {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 14px;
  }
  .hero-vp .hero-product-card .hpc-price .now {
    font-size: 22px;
  }
  .hero-vp .hero-product-card .hpc-price .was {
    font-size: 11px;
    text-align: center;
  }

  /* Center the rune stage in the card column */
  .hero-vp .hero-product-card .hero-rune-stage {
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   8. EXTRA-SMALL screens (<=380px — iPhone SE) — even tighter cube
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hero-vp .hero-product-card .rune-stage-inner {
    width: 180px !important;
    height: 180px !important;
  }
  .hero-vp .hero-product-card .rune-face--front  { transform: translateZ(90px) !important; }
  .hero-vp .hero-product-card .rune-face--back   { transform: translateZ(-90px) rotateY(180deg) !important; }
  .hero-vp .hero-product-card .rune-face--right  { transform: rotateY(90deg)  translateZ(90px) !important; }
  .hero-vp .hero-product-card .rune-face--left   { transform: rotateY(-90deg) translateZ(90px) !important; }
  .hero-vp .hero-product-card .rune-face--top    { transform: rotateX(90deg)  translateZ(90px) !important; }
  .hero-vp .hero-product-card .rune-face--bottom { transform: rotateX(-90deg) translateZ(90px) !important; }
}