/* ============================================================
   PRODUCT-PAGE HERO — "Bold" treatment, BAKED (2026-07-21)
   Was an A/B exploration (Current | Scale | Lift | Bold via a pill) on
   Magellan; Chris picked Bold, extended to Raven + Flock, then About +
   Partner. Linked from magellan/raven/flock/about/partner.html (all share
   the centered hero: image → headline → sub → dotted cue). Anchored to the
   master's permanent html[data-den="1"] and loaded AFTER density.css so it
   wins over the base hero rules.

   About uses a ring logo (.hero-logo) like the product pages, so Bold
   applies as-is. Partner uses a bare engraving (.hero-figure, no ring), so
   its image is sized by the :not(.hero-logo) rule below.

   Levers: bigger ring logo + fonts, content shifted up, dotted line
   extended, bigger red fold dot, "SCROLL" removed. Kept centered. On the
   short laptop the hero is near the vertical limit, so the size increase is
   paid for by tightening the generous 2rem inter-element gaps + top padding
   (which also cuts the whitespace the feedback flagged).
   ============================================================ */

/* Remove the "SCROLL" word (keeps the clickable dotted cue + dot) */
html[data-den="1"] .hero > .scroll-cue::before { content: none; }

/* Bigger red fold dot */
html[data-den="1"] .hero > .scroll-cue::after {
  width: 18px; height: 18px; left: 50%; transform: translateX(-50%); bottom: -8px;
}

/* ---- Bold: big logo AND type, tightest gaps, content lifted ---- */
html[data-den="1"] .hero { gap: clamp(0.65rem, 1.2vh, 1rem); padding-top: clamp(0.9rem, 2.2vh, 2rem); }
html[data-den="1"] .hero-logo { height: clamp(180px, 27vh, 310px); }
/* Partner: bare engraving portrait (no ring). :not(.hero-logo) matches only
   Partner's figure — the product/About ring logos keep the .hero-logo size.
   Portrait (314×391) so sized a touch shorter than the square ring logos. */
html[data-den="1"] .hero > .hero-figure:not(.hero-logo) { height: clamp(185px, 27vh, 310px); }
html[data-den="1"] .hero .display { font-size: clamp(3rem, 7vw, 6.2rem); }
html[data-den="1"] .hero .hero-sub { font-size: clamp(1.55rem, 2.05vw, 2rem); }
html[data-den="1"] .hero > .scroll-cue { height: clamp(85px, 13vh, 180px); }