/* 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:#9B7BB8;text-decoration:none}
a:hover{color:#CDB6E4}
[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}
/* The purple design (handoff-3) adds two base behaviours the prototype declared inline. */
input::placeholder{color:#a396b0;opacity:1}
input:focus{border-color:#9B7BB8}
sc-if,sc-for{display:contents}

@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:#9B7BB8;color:#12100c}

/* The phone month picker (site.js swaps the card grid for this below 900px). Hidden by
   default so the desktop grid is the only picker on a wide screen. `appearance:none` plus
   a drawn chevron, because the platform's default control is a light-on-light box that
   disappears against the dark section. */
.pair-month-select{
  display:none;width:100%;margin-bottom:4px;
  font-family:Newsreader,serif;font-size:17px;color:#f0ece1;
  padding:13px 40px 13px 15px;border-radius:12px;
  background:#1a1712 no-repeat right 14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239B7BB8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border:1px solid rgba(255,255,255,.14);
  -webkit-appearance:none;appearance:none;
}
.pair-month-select:focus{outline:none;border-color:#9B7BB8}

/* ---- 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}
  /* The 12-month picker is a grid BY DESIGN. The blanket rule above stacked it into a wall
     of 12 full-width rows, and because it also carries `grid-auto-rows:minmax(0,1fr)` and
     `flex:1` — sized on desktop to fill the column beside the map — each of those rows then
     STRETCHED to share that tall height. Hence twelve giant pills.
     On a phone the grid gives way to a native <select> (built in site.js). This is the
     no-JS fallback: keep three columns and let the rows take their content height, so the
     picker still works if the select never gets built. */
  [style*="grid-auto-rows: minmax(0,1fr)"]{
    grid-template-columns:repeat(3,1fr)!important;
    grid-auto-rows:auto!important;
    flex:none!important;
    gap:8px!important;
  }
  /* …and once site.js HAS built the select, the grid steps aside for it. */
  html.month-select-ready [style*="grid-auto-rows: minmax(0,1fr)"]{display:none!important}
  html.month-select-ready .pair-month-select{display:block}
  /* 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}
}

/* ---- store buttons (handoff-57 "PAIR Store Buttons", B3 outlined, on ink) ----------------
   The stores' own glyphs and the familiar kicker-over-name, in PAIR's type. The motion is the
   design's: a 1px lift on hover, a slight press on tap, .16s. Markup comes from store_button()
   in build-site.py. */
.sb{display:inline-flex;align-items:center;gap:11px;height:52px;padding:0 18px 0 14px;border-radius:12px;
  background:rgba(244,241,232,.06);color:#f4f1e8;border:1px solid #4a443c;text-decoration:none;white-space:nowrap;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.sb:hover{transform:translateY(-1px);border-color:#5d564c;color:#f4f1e8}
.sb:active{transform:translateY(0) scale(.985)}
.sb:focus-visible{outline:2px solid #B79BD0;outline-offset:3px}
/* "Coming soon to Google Play" is a promise, not a control: it links nowhere (there is no
   listing and no waitlist), so it keeps the look but drops the pointer and the hover/press. */
.sb--soon{cursor:default}
.sb--soon:hover,.sb--soon:active{transform:none;border-color:#4a443c}
.sb .sb-g{display:block;flex:none}
.sb .s{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;font-size:8.5px;letter-spacing:1.3px;
  text-transform:uppercase;line-height:1;color:#a49c8c}
.sb .n{display:block;font-family:Newsreader,serif;font-size:17px;line-height:1;margin-top:4px}
.sb--m{height:48px;padding:0 16px 0 13px;gap:10px}
.sb--m .s{font-size:8px}
.sb--m .n{font-size:16px;margin-top:4px}
.sb--s{height:40px;padding:0 14px 0 11px;border-radius:10px;gap:9px}
.sb--s .s{font-size:7.5px}
.sb--s .n{font-size:14px;margin-top:3px}
.sb-row{display:flex;flex-wrap:wrap;gap:10px}
.sb-navgroup{display:flex;align-items:center;gap:10px}
@media (prefers-reduced-motion:reduce){.sb{transition:none}.sb:hover,.sb:active{transform:none}}
@media (max-width:560px){
  /* the top bar has room for one action on a phone; the hero carries the App Store button */
  .sb--nav{display:none}
}