/* ============================================================
   SNACK PAPER — Shared "black poster" hero
   Used by page-about.php, page-contact.php, page-track-order.php.
   Loaded only on those three page templates.
   ============================================================ */

.ap-grain{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 56px,rgba(255,255,255,.026) 56px,rgba(255,255,255,.026) 57px),repeating-linear-gradient(0deg,transparent 0,transparent 11px,rgba(255,255,255,.018) 11px,rgba(255,255,255,.018) 12px);pointer-events:none;z-index:0}
.ap-eyebrow{font-size:9px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.42);font-family:var(--sans)}
.ap-hero{background:var(--k);position:relative;overflow:hidden;min-height:58vh;display:grid;grid-template-rows:auto 1fr auto;padding:26px 20px 40px}
.ap-hero>*{position:relative;z-index:1}
.ap-hero-top{display:flex;align-items:center;gap:12px}
.ap-hero-top::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.16)}
.ap-hero-mid{display:flex;align-items:center}
.ap-wordmark{font-family:var(--neo);color:#fff;font-size:clamp(58px,20vw,108px);line-height:.82;letter-spacing:.01em}
.ap-hero-line{font-family:var(--serif);font-size:22px;font-weight:400;font-style:italic;color:#fff;line-height:1.3;margin-bottom:12px}
.ap-hero-meta{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);font-family:var(--sans)}

/* Track Order hero tagline ("Track with your phone or email.") stays hidden at every width now
   — the whole find-order card needs to fit on screen without scrolling on desktop too, not just
   mobile. Login/My Account keeps the old mobile-only-hide behavior (desktop still shows its
   tagline) since that page wasn't part of this fit-above-the-fold requirement. About/Contact
   hero taglines are untouched (different pages, same shared .ap-hero-line/.ap-hero-meta classes). */
.tr-hero .ap-hero-line,.tr-hero .ap-hero-meta,.acc-hero .ap-hero-line,.acc-hero .ap-hero-meta{display:none}
.ap-cue{position:absolute;bottom:16px;left:50%;color:rgba(255,255,255,.32);font-size:15px;z-index:1;animation:apBob 1.8s ease-in-out infinite}
@keyframes apBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

@media (min-width:1024px){
  .ap-wordmark{font-size:clamp(90px,12vw,150px)}
  .ap-hero-line{font-size:30px}
  .acc-hero .ap-hero-line,.acc-hero .ap-hero-meta{display:block}
  /* Desktop keeps the original taller hero — only Track Order needed pulling up (see
     track-order.css for its own, tighter desktop override). */
  .ap-hero{min-height:78vh}
}

/* ===== Reviews page (page-reviews.php) — reuses .rv-card from style.css, just switches its
   container from a horizontal scroll track to a wrapping grid. ===== */
.rv-page-wrap{background:var(--cr);padding:30px 14px 50px}
.rv-page-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:1100px;margin:0 auto}
.rv-page-grid .rv-card{width:100%;max-width:320px}
.rv-page-empty{text-align:center;color:var(--gr);font-size:13px;padding:40px 0}
@media (min-width:640px){
  .rv-page-grid .rv-card{width:calc(50% - 6px);max-width:none}
}
@media (min-width:1024px){
  .rv-page-grid .rv-card{width:calc(33.33% - 8px)}
}

/* ---- Legal / policy pages (Privacy, Terms, Shipping, Refund) ---- */
.legal-hero{min-height:16vh;padding:26px 20px 18px}
.legal-hero .ap-hero-top{display:none}
.legal-wordmark{font-size:clamp(30px,8vw,52px) !important;line-height:1.15 !important;text-transform:none !important}
.legal-content{max-width:720px;margin:0 auto;padding:28px 20px 60px;font-size:13px;line-height:1.75;color:#333}
.legal-content h1,.legal-content h2,.legal-content h3{font-family:var(--serif);color:var(--k);line-height:1.3;margin:28px 0 10px}
.legal-content h1{font-size:22px}
.legal-content h2{font-size:18px}
.legal-content h3{font-size:15px}
.legal-content h2:first-child,.legal-content h3:first-child{margin-top:0}
.legal-content p{margin-bottom:14px}
.legal-content ul,.legal-content ol{margin:0 0 14px 20px}
.legal-content li{margin-bottom:6px}
.legal-content a{color:var(--k);text-decoration:underline}
.legal-content strong{color:var(--k)}
@media (min-width:1024px){
  .legal-hero{min-height:26vh}
  .legal-content{padding:48px 20px 80px;font-size:14px}
  .legal-hero .ap-hero-mid{justify-content:center;text-align:center}
}