/* ═══════════════════════════════════════════════════════════════
   30% OFF promo surfaces (js/promo.js)
   - .promo-bar    : countdown banner above the sticky header
   - .nav-off      : "30% OFF" pill on the nav Pricing link
   - .promo-claim  : "tap to apply" chips (hero + pricing cards)
   Design: the site's inverted-white + mono language, with the site's
   pink→magenta gradient (#C936DD→#FF2E88) as the offer accent (user
   preference over the mint variant); applied-state chips stay mint.
   Also hosts small site-wide layer tweaks: desktop nav simplification
   (.nav-extra) and the mobile section-shot fit fix.
   ═══════════════════════════════════════════════════════════════ */

/* ── Desktop nav: conversion-first — only Demo · Pricing · Download App ·
   Sign in. The `extra` links (Features/Roadmap/Leaderboard/Chronicle) stay
   in the mobile drawer and the footer (site.js marks them .nav-extra). ── */
@media (min-width:861px){
  .nav a.nav-extra{display:none}
  .nav{gap:8px}
  .nav a{padding:8px 16px}
}

/* ── Mobile: section screenshots were letterboxed (16:9 images forced into a
   4:3 frame by termi.css) — let the image set its own height instead, so it
   fills the card edge-to-edge with no empty bands. ── */
@media (max-width:640px){
  .img-f.section-shot{aspect-ratio:auto}
  .img-f.section-shot img{height:auto}
}

/* ── Countdown banner (Seedance-style strip, scrolls away; header sticks) ── */
.promo-bar{position:relative;z-index:110;background:#FAFAFA;color:#09090B;animation:promoDrop .45s cubic-bezier(.16,1,.3,1)}
@keyframes promoDrop{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.promo-bar-in{position:relative;max-width:1360px;margin:0 auto;padding:9px 44px 9px 16px;display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap}
.promo-exp{display:inline-flex;align-items:center;gap:9px}
.promo-exp-label{font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#C936DD,#FF2E88);padding:5px 10px;border-radius:100px;white-space:nowrap}
.promo-clock{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--f-mono)}
.promo-clock b{background:#09090B;color:#FAFAFA;font-weight:700;font-size:.8rem;line-height:1;padding:5px 6px;border-radius:6px;min-width:25px;text-align:center;font-variant-numeric:tabular-nums}
.promo-clock i{font-style:normal;font-size:.7rem;font-weight:600;color:rgba(9,9,11,.5)}
.promo-copy{display:inline-flex;align-items:center;gap:10px;min-width:0}
.promo-off{font-family:var(--f-mono);font-weight:800;font-size:.82rem;letter-spacing:.03em;white-space:nowrap;background:linear-gradient(135deg,#C936DD,#FF2E88);-webkit-background-clip:text;background-clip:text;color:transparent}
.promo-copy-txt{font-size:.85rem;font-weight:500;color:rgba(9,9,11,.75);line-height:1.35}
.promo-copy-txt b{font-family:var(--f-mono);font-weight:700;font-size:.78rem;color:#09090B;background:rgba(9,9,11,.05);border:1px dashed rgba(9,9,11,.4);border-radius:6px;padding:2px 7px;white-space:nowrap}
.promo-cta{display:inline-flex;align-items:baseline;gap:7px;background:#09090B;color:#FAFAFA;font-weight:600;font-size:.85rem;line-height:1;padding:10px 18px;border-radius:100px;white-space:nowrap;transition:transform .16s,box-shadow .16s}
.promo-cta:hover{color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(9,9,11,.35)}
.promo-cta-now{font-family:var(--f-mono);font-weight:700}
.promo-cta-was{font-size:.72rem;color:rgba(250,250,250,.5)}
.promo-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:rgba(9,9,11,.4);font-size:.8rem;line-height:1;transition:color .15s,background .15s}
.promo-x:hover{color:#09090B;background:rgba(9,9,11,.07)}
@media (max-width:1180px){
  .promo-copy-txt{display:none}
}
@media (max-width:900px){
  .promo-bar-in{gap:10px;padding:8px 42px 8px 12px}
  .promo-cta{padding:9px 14px;font-size:.8rem}
}
@media (max-width:480px){
  .promo-exp-label{display:none}
}

/* ── Nav "30% OFF" pill (under the Pricing item, like the mock) ── */
.nav a.nav-haspromo{position:relative}
.nav-off{position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;font-family:var(--f-mono);font-size:.55rem;font-weight:800;letter-spacing:.08em;line-height:1;padding:3px 8px;border-radius:100px;background:linear-gradient(135deg,#C936DD,#FF2E88);color:#fff;white-space:nowrap;pointer-events:none;box-shadow:0 2px 10px rgba(255,46,136,.4);animation:navOffPulse 2.4s ease-in-out infinite}
@keyframes navOffPulse{0%,100%{box-shadow:0 2px 10px rgba(255,46,136,.4)}50%{box-shadow:0 2px 16px rgba(255,46,136,.75)}}
@media (max-width:860px){
  /* mobile drawer nav is a column — inline the pill instead of floating it */
  .nav-off{position:static;transform:none;display:inline-block;vertical-align:middle;margin-left:8px;animation:none}
}

/* ── Status chips — quiet single-line terminal rows, in the site's own
   mono-label voice (founder-note / .pill-a); mint ✓ + border, no glow. ── */
.promo-claim{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;margin-top:12px;padding:7px 13px;border:1px solid rgba(250,250,250,.16);border-radius:9px;background:transparent;font-family:var(--f-mono);font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#A1A1AA;text-align:left;cursor:default;max-width:100%;transition:border-color .18s,color .18s,background .18s}
.promo-claim[hidden]{display:none}
.promo-claim:hover{border-color:rgba(250,250,250,.45);background:rgba(250,250,250,.04);color:#D4D4D8}
.promo-claim-tag{color:#6fe0d0;font-weight:800;font-size:.78rem;line-height:1}
.promo-claim-code{color:#FAFAFA;font-weight:700;white-space:nowrap}
.promo-claim-txt{line-height:1.5}
.promo-claim-txt b{color:#FAFAFA;font-weight:700}
.promo-claim-txt s{opacity:.45}
.promo-claim-count{color:#71717A;font-variant-numeric:tabular-nums;white-space:nowrap}
.promo-claim.is-claimed{cursor:default;border-color:rgba(111,224,208,.4)}
.promo-claim.is-claimed:hover{background:transparent;color:#A1A1AA;border-color:rgba(111,224,208,.4)}
.promo-claim.is-claimed .promo-claim-tag{color:#6fe0d0}
/* card variant: compact centered pill under the buy button */
.pack .promo-claim,.pr-card .promo-claim{display:flex;width:fit-content;justify-content:center;margin:12px auto 0}
.pack .promo-claim[hidden],.pr-card .promo-claim[hidden]{display:none}

/* ── Geo pill at the banner's far left (non-Reddit traffic: JP30OFF etc.) ── */
.promo-geo{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.64rem;font-weight:700;letter-spacing:.1em;background:#09090B;color:#FAFAFA;padding:5px 10px;border-radius:100px;white-space:nowrap}
@media (max-width:900px){.promo-geo{display:none}}

/* ── Download-page offer CTA: two-line white button + live countdown line ── */
.dl-buy{flex-direction:column;gap:3px;padding-top:12px;padding-bottom:11px;line-height:1.25}
.dl-buy-main{display:inline-flex;align-items:baseline;gap:8px;font-weight:600}
.dl-was{font-size:.8em;font-weight:500;opacity:.55;margin-left:2px}
.dl-sub{display:block;font-family:var(--f-mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(9,9,11,.5)}
.dl-count{margin:14px 0 0;font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#71717A}
.dl-count b{color:#FF5C9E;font-weight:700;font-variant-numeric:tabular-nums}
body.promo-owner .dl-count{display:none}

/* ── Mobile hero: sales-first — show the (auto-discounted) buy CTA instead of
   the old "Join us" swap in termi.css. Owners are excluded via body.promo-owner
   because this !important would otherwise beat applyHero()'s inline
   display:none; for them the old Join-us-only layout stays. ── */
@media (max-width:600px){
  body:not(.promo-owner) #heroBtn{display:inline-flex!important}
  body:not(.promo-owner) .hero-join-mobile{display:none!important}
  .hero-text .promo-claim{display:flex;width:fit-content;margin:12px auto 0}
}

/* Paid owners: no buy-side promo anywhere */
body.promo-owner .promo-bar,body.promo-owner .promo-claim,body.promo-owner .nav-off{display:none}