/* pickmall.app homepage. Colours, type and the road pattern follow
   docs/identity.md; the page is generated by store/build.rb. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --raspberry: #C2185B;
  --blush: #FFC1D8;
  --ink: #1A1A1A;
  --white: #FFFFFF;
  --panel: var(--white);
  --panel-ink: var(--ink);
  --soft: rgb(26 26 26 / 0.62);
  --hair: rgb(26 26 26 / 0.1);
  --friend: #FFE3EE;
  --gutter: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --panel: var(--ink);
    --panel-ink: var(--white);
    --soft: rgb(255 255 255 / 0.66);
    --hair: rgb(255 255 255 / 0.12);
    --friend: rgb(255 193 216 / 0.16);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--raspberry);
  color: var(--white);
  font: 400 1.0625rem/1.55 "Bricolage Grotesque", system-ui, sans-serif;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
::selection { background: var(--blush); color: var(--ink); }
img { display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--blush); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 10; background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.skip:focus { top: 12px; }

/* The brand's round full stop: 0.2em across, 0.04em after the last letter. */
.stop {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.04em;
  border-radius: 50%;
  background: var(--blush);
  overflow: hidden;
  text-indent: 1em;
  vertical-align: baseline;
}

.keep { white-space: nowrap; }

h1, h2, .word {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
  text-wrap: balance;
}

/* Road pattern: anchored right at 62% width, fading out to the left. */
.roads {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: -1;
  background: url("/roads.svg") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 100%);
  mask-image: linear-gradient(to left, #000 10%, transparent 100%);
  pointer-events: none;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--gutter) 0;
  position: relative;
  z-index: 2;
}
.brand img { height: 34px; width: auto; }
.top nav { display: flex; gap: 28px; font-size: 1rem; }
.top nav a { text-decoration: none; opacity: 0.88; }
.top nav a:hover { opacity: 1; text-decoration: underline; }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
  padding: clamp(16px, 3vh, 40px) var(--gutter) clamp(64px, 10vh, 120px);
}
.pitch { position: sticky; top: 48px; padding-top: clamp(0px, 4vh, 48px); }
h1 { font-size: clamp(3.25rem, 1.6rem + 5.4vw, 6rem); }
h1 .keep { display: inline-block; }
.lede { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); max-width: 34ch; margin: 28px 0 0; }
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0;
  font-weight: 600;
}
.soon::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blush); }

.chat { max-width: 620px; justify-self: end; width: 100%; scroll-margin-top: 24px; }
.trips {
  display: flex;
  gap: 6px;
  margin: 14px 0 0 auto;
  padding: 5px;
  border-radius: 999px;
  background: rgb(26 26 26 / 0.18);
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.trips button {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.trips button:hover { background: rgb(255 255 255 / 0.12); }
.trips button[aria-selected="true"] { background: var(--white); color: var(--raspberry); }

.phone {
  position: relative;
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: 32px;
  padding: 22px 22px 18px;
  box-shadow: 0 2px 4px rgb(74 6 32 / 0.12), 0 28px 70px -12px rgb(74 6 32 / 0.5);
}
.group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 16px;
  border-bottom: 1px solid var(--hair);
}
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blush); color: var(--ink); font-weight: 700;
}
.group b { display: block; font-size: 1.0625rem; line-height: 1.2; }
.group small { color: var(--soft); font-size: 0.85rem; }

.messages { list-style: none; margin: auto 0 0; padding: 14px 0 6px; display: grid; gap: 8px; }
.msg { position: relative; display: flex; align-items: flex-end; gap: 8px; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), filter 0.5s var(--ease); }
/* The thread plays in once, message by message. Every message keeps its place
   while it waits, so the panel never changes height. Hidden only when the
   script runs and motion is welcome, so it never fades out what was shown. */
@media (prefers-reduced-motion: no-preference) {
  .js .thread:not(.played) .msg:not(.in) { visibility: hidden; }
  .js .thread:not(.played) .msg.in { animation: arrive 0.5s var(--ease) both; }
  .js .thread:not(.played) .have img:not(.in) { opacity: 0; transform: scale(0.6); }
}
.bubble { padding: 11px 15px; border-radius: 20px; line-height: 1.35; max-width: 80%; }
.bubble b { display: block; font-size: 0.8rem; font-weight: 700; color: var(--raspberry); }
.friend .bubble { background: var(--friend); border-bottom-left-radius: 6px; }
@media (prefers-color-scheme: dark) { .friend .bubble b { color: var(--blush); } }
.stickers { display: flex; flex-shrink: 0; gap: 3px; }
.stickers img { width: 30px; height: 30px; border-radius: 50%; }
.you .stickers { order: -1; }
/* Tiles with white grounds would vanish on the white panel without a hairline. */
.stickers img, .have img { outline: 1px solid var(--hair); outline-offset: -1px; }
.you { justify-content: flex-end; }
.you .bubble { background: var(--ink); color: var(--white); border-bottom-right-radius: 6px; }
@media (prefers-color-scheme: dark) { .you .bubble { background: var(--white); color: var(--ink); } }
.bot { align-items: flex-end; }
.bot-face { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--raspberry); flex-shrink: 0; }
.bot .bubble { background: var(--raspberry); color: var(--white); max-width: 92%; flex: 1; border-bottom-left-radius: 6px; padding: 13px 14px 12px; }
.bot .bubble b { color: var(--white); opacity: 0.86; }
.bot .bubble p { margin: 2px 2px 10px; font-weight: 500; }

.ranking { list-style: none; margin: 0; padding: 4px 12px; background: var(--white); color: var(--ink); border-radius: 14px; }
.ranking li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.ranking li + li { border-top: 1px solid rgb(26 26 26 / 0.08); }
.mall { font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.mall small { display: block; font-weight: 400; font-size: 0.8rem; color: rgb(26 26 26 / 0.62); }
.have { display: flex; gap: 3px; }
.have img { width: 24px; height: 24px; border-radius: 50%; transition: opacity 0.4s var(--ease), filter 0.4s var(--ease), transform 0.4s var(--ease); }
.have img.miss { opacity: 0.22; filter: grayscale(1); }
.score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--raspberry); min-width: 2.6ch; text-align: right; }
.source { display: block; margin: 9px 2px 0; font-size: 0.78rem; color: rgb(255 255 255 / 0.86); }

/* The typing dots sit in the slot of the message that is on its way. */
.typing {
  position: absolute; top: 0; left: 0;
  display: flex; gap: 5px; padding: 13px 15px;
  border-radius: 20px; border-bottom-left-radius: 6px;
  background: var(--friend);
  visibility: visible;
  animation: arrive 0.3s var(--ease) both;
}
.bot > .typing { left: 42px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--soft); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(4px); } }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* Launch-list form, styled as the chat's reply box */
.join {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  margin-top: 10px;
}
.join input[type="email"] {
  flex: 1 1 12ch;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.0625rem;
  padding: 10px 0;
  caret-color: var(--raspberry);
}
.join input::placeholder { color: var(--soft); opacity: 1; }
.join input:focus { outline: none; }
.join:focus-within { box-shadow: 0 0 0 4px rgb(255 193 216 / 0.7); }
.phone :focus-visible { outline-color: var(--raspberry); }
.phone .join:focus-within { box-shadow: 0 0 0 3px var(--raspberry); }
@media (prefers-color-scheme: dark) {
  .phone :focus-visible { outline-color: var(--blush); }
  .phone .join:focus-within { box-shadow: 0 0 0 3px var(--blush); }
}
.join button {
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--white);
  background: var(--raspberry);
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.join button:hover { background: var(--ink); }
@media (prefers-color-scheme: dark) { .phone .join button:hover { background: var(--blush); color: var(--ink); } }
.join button:active { transform: scale(0.97); }
.join button[disabled] { opacity: 0.6; cursor: progress; }
.join .trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.join .status { flex-basis: 100%; margin: 0; font-size: 0.95rem; font-weight: 600; }
.join .status:empty { display: none; }
.join.done { border-color: transparent; padding-left: 0; }
.join.done input, .join.done button { display: none; }
.join .status.bad { color: var(--raspberry); }
@media (prefers-color-scheme: dark) { .phone .join .status.bad { color: var(--blush); } }
.fine { margin: 10px 4px 0; font-size: 0.82rem; color: var(--soft); }

/* Pick. Pin. Period. */
.how {
  padding: clamp(72px, 12vh, 140px) var(--gutter);
  display: grid;
  gap: clamp(40px, 7vh, 80px);
  border-top: 1px solid rgb(255 255 255 / 0.16);
}
.beat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: baseline;
}
.word { font-size: clamp(4rem, 2rem + 4.5vw, 6rem); line-height: 0.85; }
.beat p:not(.word) { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); max-width: 36ch; margin: 0; }

/* Brands band, on ink */
.brands { background: var(--ink); padding: clamp(72px, 12vh, 140px) 0; overflow: hidden; }
.brands-copy {
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: end;
}
.brands h2 { font-size: clamp(2.75rem, 1.5rem + 4vw, 5.5rem); }
.brands-copy p { margin: 0; max-width: 46ch; font-size: 1.125rem; color: rgb(255 255 255 / 0.82); }
.band { margin-top: clamp(48px, 8vh, 88px); display: grid; gap: 16px; }
.belt { display: flex; width: max-content; animation: drift 70s linear infinite; }
.belt-b { animation-duration: 90s; animation-direction: reverse; }
.band:hover .belt { animation-play-state: paused; }
.belt ul { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0 8px; }
.belt img { width: 72px; height: 72px; border-radius: 50%; }
@keyframes drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .belt { animation: none; }
  .band { overflow-x: auto; }
}

/* States */
.where { padding: clamp(72px, 12vh, 140px) var(--gutter); }
.where h2 { font-size: clamp(2.75rem, 1.5rem + 4vw, 5.5rem); max-width: 12ch; }
.states {
  list-style: none;
  margin: clamp(32px, 6vh, 56px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 0.9em;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  max-width: 1200px;
}
.states span { color: var(--blush); font-variant-numeric: tabular-nums; }
.note { margin: 28px 0 0; color: rgb(255 255 255 / 0.85); }

/* Closing sign-up */
.close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 14vh, 160px) var(--gutter);
  border-top: 1px solid rgb(255 255 255 / 0.16);
}
.close .pick { width: clamp(72px, 8vw, 120px); height: auto; margin-bottom: 28px; filter: drop-shadow(0 10px 18px rgb(74 6 32 / 0.35)); }
.close h2 { font-size: clamp(3.25rem, 1.6rem + 5.4vw, 6rem); }
.close p { font-size: 1.1875rem; max-width: 40ch; margin: 22px 0 0; }
.close .join { max-width: 520px; margin-top: 32px; color: var(--white); }
.close .join input::placeholder { color: var(--white); opacity: 0.92; }
.close .join input { caret-color: var(--blush); }
.close .join button { background: var(--white); color: var(--raspberry); }
.close .join button:hover { background: var(--blush); color: var(--ink); }
.close .join .status.bad { color: var(--white); }

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px var(--gutter) calc(40px + env(safe-area-inset-bottom));
  background: var(--ink);
}
.foot img { height: 26px; width: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.95rem; }
.social { list-style: none; display: flex; gap: 8px; margin: 0 auto 0 0; padding: 0; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--white); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.social a:hover { background: var(--white); color: var(--ink); }
.social svg { display: block; }

/* The panel fits the screen like a phone: the thread scrolls under its
   header, and the reply box stays at the bottom. */
.phone { display: flex; flex-direction: column; max-height: max(600px, calc(100svh - 110px)); }
.feed { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; overscroll-behavior: contain; }
/* All the chats share one spot, so the panel is as tall as the longest and
   stays that size when they take turns. Short chats sit at the bottom. */
.feed-inner { flex-shrink: 0; display: grid; }
.thread { grid-area: 1 / 1; display: flex; flex-direction: column; }
.js .thread[hidden] { display: flex; visibility: hidden; }
/* Short desktop screens: drop the city lines so the whole thread fits. */
@media (max-height: 880px) and (min-width: 961px) {
  .mall small { display: none; }
  .ranking li { padding: 7px 0; }
  .phone { padding-top: 16px; }
  .group { padding-bottom: 12px; }
  .messages { gap: 6px; padding-top: 10px; }
  .bubble { padding-block: 8px; }
  .bot .bubble p { margin-bottom: 8px; }
}
.group { position: sticky; top: 0; z-index: 1; background: var(--panel); }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pitch { position: static; padding-top: 0; }
  .chat { justify-self: stretch; max-width: none; }
  /* Stacked layout: the whole thread shows and the page does the scrolling. */
  .phone { max-height: none; }
  .feed { overflow: visible; }
  .beat, .brands-copy { grid-template-columns: 1fr; gap: 12px; }
  .roads { width: 100%; }
}
@media (max-width: 520px) {
  .mall small { display: none; }
  .top { padding-top: 20px; }
  .brand img { height: 28px; }
  .top nav { gap: 18px; font-size: 0.95rem; }
  .top nav a:first-child { display: none; }
  .phone { padding: 16px 12px 14px; border-radius: 26px; margin-inline: -4px; }
  .bubble { max-width: 86%; }
  .ranking { padding: 2px 10px; }
  .ranking li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .have { grid-row: 2; }
  .score { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .have img { width: 22px; height: 22px; }
  .join { padding-left: 16px; }
  .join button { padding: 12px 16px; }
  .belt img { width: 56px; height: 56px; }
}