/* PAIR marketing site — shared base + keyframes + responsive layer.
   The pages keep the handoff design's inline styles for pixel fidelity; this file
   carries the global base, the animation keyframes, and a mobile layer that overrides
   the desktop-only inline layout via attribute selectors (so the pages stay untouched). */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0e0d0a;font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#aecb74;text-decoration:none}
a:hover{color:#c8de9a}
[id]{scroll-margin-top:86px}
img{max-width:100%}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details[open] [data-chev]{transform:rotate(180deg)}
details[open] summary [data-q]{color:#f0ece1}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes popin{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes chippop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes vscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes drawline{to{stroke-dashoffset:0}}

/* Seasonality-map markers (Landing) — hover reveals the tooltip, in place of the
   prototype's DCLogic handlers. */
.smk{position:relative}
.smk .smk-tip{opacity:0;transition:opacity .2s ease}
.smk:hover .smk-tip{opacity:1}
.smk .smk-dot{transition:transform .2s ease,box-shadow .2s ease}
.smk:hover .smk-dot{transform:scale(1.28);box-shadow:0 0 22px rgba(224,169,79,.8)}

/* "Coming soon" store badges — non-clickable, dimmed, with a ribbon. */
.badge-soon{position:relative;opacity:.55;cursor:default!important;filter:saturate(.6)}
.badge-soon::after{content:"SOON";position:absolute;top:-8px;right:-6px;font-family:'Space Mono',monospace;font-size:7.5px;letter-spacing:.1em;padding:2px 6px;border-radius:999px;background:#aecb74;color:#12100c}

/* ---- responsive: collapse the desktop 1220px layout for phones/tablets ---- */
@media (max-width:900px){
  /* tighten the horizontal gutters on every max-width container + the nav/footer */
  [style*="max-width:1220px"],[style*="max-width:920px"],[style*="max-width:820px"],[style*="max-width:760px"]{
    padding-left:20px!important;padding-right:20px!important;
  }
  nav[data-screen-label]{padding-left:18px!important;padding-right:18px!important}
  footer [style*="48px"]{padding-left:20px!important;padding-right:20px!important}
  /* stack every multi-column grid */
  [style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:22px!important}
  /* keep the small stat/feature rows two-up rather than a tall single column */
  [style*="repeat(4,1fr)"],[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;gap:16px!important}
  /* rein in the display type */
  [style*="font-size:68px"],[style*="font-size:64px"],[style*="font-size:56px"],[style*="font-size:52px"]{font-size:38px!important}
  [style*="font-size:48px"],[style*="font-size:46px"],[style*="font-size:44px"]{font-size:31px!important}
  [style*="font-size:40px"],[style*="font-size:36px"],[style*="font-size:34px"]{font-size:27px!important}
  /* trim the tall section padding */
  [style*="padding:110px 48px"],[style*="padding:92px 48px 104px"],[style*="padding:88px 48px"]{padding-top:60px!important;padding-bottom:60px!important}
}
@media (max-width:560px){
  /* the mono nav links get their own row so the logo + CTA stay legible */
  nav[data-screen-label]{flex-wrap:wrap;gap:12px!important}
  nav[data-screen-label] > div[style*="Space Mono"]{order:3;width:100%;justify-content:center;gap:16px!important}
  [style*="repeat(4,1fr)"],[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
}