/* Shine pass, 20 Oct 2026: homepage polish layered on styles.css */

/* Hero picture reel: three real guides, shown under the headline */
.hero-reel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 22px; max-width: 620px; }
.hero-reel a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; border: 1px solid var(--border); box-shadow: 0 14px 30px -14px rgba(0,0,0,.7); transition: transform .2s ease, border-color .2s ease; }
.hero-reel a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,8,15,.85) 100%); }
.hero-reel a span { position: absolute; left: 10px; right: 8px; bottom: 8px; z-index: 1; font-size: 13px; font-weight: 700; line-height: 1.25; color: #fff; }
.hero-reel a:hover { transform: translateY(-2px); border-color: var(--accent); }

/* Snapshot rows: long values wrap cleanly instead of colliding with the label */
.stat-row { gap: 12px; }
.stat-row .stat-value { text-align: right; }
.stat-row-stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.stat-row-stack .stat-value { text-align: left; font-size: 15px; }

/* Footer line */
.footer-bottom .built-with { color: var(--text-faint); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom .built-with:hover { color: var(--accent); }

@media (max-width: 720px) {
  /* Less empty space above the headline */
  .hero { padding: 36px 0 48px; }
  .hero h1 { margin-bottom: 16px; }

  /* Top strip: bigger tap targets and a fade that shows it scrolls sideways */
  .topbar-links a { display: inline-block; padding: 8px 0; font-size: 13px; }
  .topbar-links { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }

  /* Cookie notice: a slim bar instead of half the screen */
  #dmj-cookies { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 10px 12px !important; gap: 8px 12px !important; font-size: 12.5px !important; line-height: 1.45 !important; }
  #dmj-cookies p { flex-basis: 100% !important; }
  #dmj-cookies button { padding: 7px 14px !important; }

  /* "Talk to us" waits until the reader scrolls, so it never covers the intro */
  html:not(.dmj-scrolled) .dmjt-pill { opacity: 0; pointer-events: none; }
  .dmjt-pill { transition: opacity .25s ease, bottom .2s ease; }

  /* Small labels a touch bigger */
  .stat-card .cap, .eyebrow { font-size: 12.5px; }
  .card-meta { font-size: 13px; }
}