/* Whose Buy Is It? website: one stylesheet for every page. The app's coffee look, light mode only. */

@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/Fredoka-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/Fredoka-500.ttf) format('truetype');
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/Fredoka-600.ttf) format('truetype');
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/Fredoka-700.ttf) format('truetype');
}

:root {
  --ceramic: #EDE4D8;
  --saucer: #F6F1EA;
  --cup: #FFFFFF;
  --crema: #C0823F;
  --foam: #F5E9DA;
  --espresso: #3A2418;
  --slate: #6B5A4D;
  --dashed: #B2A392;
  --mug: #7F9DAD;
  --radius: 22px;
  --max: 1120px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--espresso);
  background: var(--ceramic);
  line-height: 1.55;
  font-size: 18px;
}
img { max-width: 100%; display: block; }
/* Anchors land below the sticky 72 px header. */
[id] { scroll-margin-top: 88px; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Header */
header.site {
  position: sticky; top: 0; z-index: 10;
  background: rgba(237, 228, 216, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(58, 36, 24, 0.08);
}
header.site .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 20px; line-height: 1.1; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
nav.links { display: flex; gap: 24px; margin-left: auto; }
nav.links a { text-decoration: none; color: var(--slate); font-weight: 500; font-size: 16px; }
nav.links a:hover { color: var(--espresso); }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--espresso); color: var(--foam);
  text-decoration: none; font-weight: 600; font-size: 16px;
  padding: 10px 20px; border-radius: 999px; border: 2px solid var(--espresso);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn.ghost { background: transparent; color: var(--espresso); }

/* Hero */
.hero { padding: 72px 0 96px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.eyebrow {
  display: inline-block; font-weight: 500; font-size: 15px; color: var(--crema);
  background: var(--foam); padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1.02; margin: 0 0 20px; font-weight: 700; letter-spacing: -0.5px; }
h1 span { display: block; color: var(--slate); font-weight: 500; font-size: 0.55em; letter-spacing: 0; margin-top: 10px; }
.lede { font-size: 20px; color: var(--slate); max-width: 30em; margin: 0 0 32px; }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.soon {
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px;
  border: 2px dashed var(--dashed); border-radius: 12px; color: var(--slate); font-weight: 500; font-size: 15px;
}
.soon svg { width: 20px; height: 20px; opacity: 0.6; }
.facts { margin-top: 22px; color: var(--slate); font-size: 16px; display: flex; gap: 18px; flex-wrap: wrap; }
.facts span::before { content: "✓"; color: var(--crema); font-weight: 700; margin-right: 6px; }

/* Google's official badge, unaltered. Its transparent border is the required clear space, so the black badge itself
   shows about 56 px tall. */
.play-badge { display: inline-block; }
.play-badge img { height: 80px; width: auto; }

.hero-art { position: relative; height: 600px; }
.hero-art::before {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: var(--foam); left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.hero-art .phone { position: absolute; width: 270px; }
.hero-art .back { left: 52%; top: 40px; transform: rotate(7deg); opacity: 0.96; }
.hero-art .front { left: 14%; top: 20px; transform: rotate(-4deg); }
.blob { position: absolute; border-radius: 50%; }
.blob-1 { width: 70px; height: 70px; background: #D3563E; opacity: .18; right: 4%; top: 30px; }
.blob-2 { width: 44px; height: 44px; background: #E9A42A; opacity: .3; left: 6%; bottom: 60px; }
.blob-3 { width: 28px; height: 28px; background: var(--mug); opacity: .5; right: 12%; bottom: 24px; }

/* Phone frame (pure CSS): a 16:9 phone with a square-cornered screen, like the 1080 × 1920 screenshots,
   so nothing in them is rounded off or covered. The speaker sits in the top bezel. */
.phone {
  background: #1d1612; border-radius: 36px; padding: 28px 10px;
  box-shadow: 0 30px 60px -20px rgba(58, 36, 24, 0.45), inset 0 0 0 2px #3b302a;
  position: relative;
}
.phone::before { /* speaker */
  content: ""; position: absolute; top: 12px; left: 50%; width: 44px; height: 4px; margin-left: -22px;
  background: #0d0a08; border-radius: 2px;
}
.phone::after { /* side button */
  content: ""; position: absolute; right: -3px; top: 120px; width: 3px; height: 56px;
  background: #2a211c; border-radius: 0 3px 3px 0;
}
.phone .screen { overflow: hidden; position: relative; aspect-ratio: 9 / 16; background: var(--ceramic); }
.phone .screen img { width: 100%; height: 100%; object-fit: cover; }

/* Sections */
section { padding: 96px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; margin: 0 0 14px; font-weight: 700; }
.section-head p { color: var(--slate); margin: 0; font-size: 19px; }

/* How it works */
.how { background: var(--saucer); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
.step { background: var(--cup); border-radius: var(--radius); padding: 32px 28px; position: relative; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--espresso); color: var(--foam); font-weight: 600; font-size: 20px; margin-bottom: 18px;
}
.step h3 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.step p { margin: 0; color: var(--slate); }
.steps-more { text-align: center; margin: 40px 0 0; font-weight: 600; }
.steps-more a { color: var(--espresso); }

/* Features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature { background: var(--saucer); border-radius: var(--radius); padding: 28px; border: 1px solid rgba(58, 36, 24, 0.06); }
.feature .icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--foam); color: var(--crema);
}
.feature .icon svg { width: 28px; height: 28px; }
.feature h3 { margin: 0 0 8px; font-size: 21px; font-weight: 600; }
.feature p { margin: 0; color: var(--slate); font-size: 17px; }
.swatches { display: flex; gap: 8px; margin-top: 16px; }
.swatches i { width: 26px; height: 26px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.5); }
.swatch-coffee { background: #C0823F; }
.swatch-breakfast { background: #E9A42A; }
.swatch-lunch { background: #D3563E; }
.swatch-dinner { background: #222738; }
.swatch-drinks { background: #3F2236; }

/* Screenshots */
.shots { background: var(--saucer); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.gallery figure { margin: 0; }
.gallery figcaption { text-align: center; margin-top: 16px; color: var(--slate); font-weight: 500; font-size: 16px; }

/* Privacy band */
.privacy-band { background: var(--espresso); color: var(--foam); text-align: center; }
.privacy-band h2 { font-size: clamp(32px, 4.5vw, 52px); margin: 0 0 16px; line-height: 1.1; }
.privacy-band p { max-width: 36em; margin: 0 auto 28px; color: rgba(245, 233, 218, 0.78); font-size: 19px; }
.privacy-band .btn { background: var(--foam); color: var(--espresso); border-color: var(--foam); }
.lock { width: 56px; height: 56px; margin: 0 auto 20px; color: var(--crema); }

/* Final CTA */
.cta { text-align: center; }
.cta .card {
  background: var(--cup); border-radius: 32px; padding: 64px 32px; position: relative; overflow: hidden;
}
.cta img.icon { width: 96px; height: 96px; border-radius: 24px; margin: 0 auto 24px; box-shadow: 0 12px 30px -12px rgba(58,36,24,0.4); }
.cta h2 { font-size: clamp(32px, 4vw, 44px); margin: 0 0 12px; }
.cta p { color: var(--slate); margin: 0 0 28px; }
.cta .stores { justify-content: center; }

/* Footer */
footer.site { padding: 56px 0 40px; font-size: 16px; color: var(--slate); }
footer.site .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
footer.site .footer-tagline { margin: 12px 0 0; }
footer.site h4 { margin: 0 0 12px; color: var(--espresso); font-size: 16px; font-weight: 600; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--espresso); text-decoration: underline; }
footer.site .legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(58,36,24,0.12); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Cookie banner: js/consent.js builds it only when a GA Measurement ID is set, and removes it once answered. */
.cookie {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
  width: min(640px, calc(100% - 32px)); background: var(--cup); border-radius: 20px; padding: 20px 22px;
  box-shadow: 0 20px 50px -15px rgba(58,36,24,0.45); display: flex; gap: 18px; align-items: center;
}
.cookie p { margin: 0; font-size: 15px; color: var(--slate); }
.cookie p strong { color: var(--espresso); display: block; font-size: 16px; margin-bottom: 2px; }
.cookie .actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie .btn { padding: 8px 16px; font-size: 15px; }

/* Privacy, Support and 404: one readable column */
.prose { max-width: 680px; padding-top: 56px; padding-bottom: 72px; }
.prose h1 { font-size: clamp(36px, 5vw, 52px); }
.prose h2 { font-size: 24px; line-height: 1.25; margin: 36px 0 8px; font-weight: 600; }
.prose p, .prose li { color: var(--slate); }
.prose a { color: var(--espresso); }
.prose .btn { color: var(--foam); }
.prose section { padding: 0; }

/* How to use Today: each step beside the Today screenshot, its part of the screen picked out the way the app's tour
   does, with everything else dimmed. The spots are placed in percent of the 1080 × 1920 screenshot. */
.guide { padding: 56px 0 72px; }
.guide .section-head h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.1; margin: 0 0 14px; }
.guide .section-head p + p { margin-top: 14px; }
.tour { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 56px; counter-reset: tour; }
.tour li { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; }
.tour h2 { font-size: 26px; line-height: 1.2; margin: 0 0 10px; font-weight: 600; }
.tour h2::before {
  counter-increment: tour; content: counter(tour);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--espresso); color: var(--foam); font-size: 20px; margin-bottom: 14px;
}
.tour p { margin: 0; color: var(--slate); font-size: 19px; }
.spot { position: absolute; border: 3px solid var(--crema); border-radius: 12px; box-shadow: 0 0 0 999px rgba(29, 22, 18, 0.55); }
.spot-buyer { left: 18%; top: 51.7%; width: 64%; height: 10.5%; }
.spot-chips { left: 7%; top: 65.2%; width: 86%; height: 8.5%; }
.spot-confirm { left: 3%; top: 77%; width: 94%; height: 7.5%; }
.spot-other-payer { left: 30.8%; top: 85.7%; width: 38.5%; height: 5.7%; }
.spot-history { left: 14.5%; top: 43.3%; width: 70%; height: 4.6%; }
.spot-other-groups { left: 1.5%; top: 46.5%; width: 97%; height: 37.5%; }
.spot-top-row { left: 2%; top: 3.6%; width: 96%; height: 7.2%; }
.guide-more { text-align: center; color: var(--slate); margin: 64px 0 0; }
.guide-more a { color: var(--espresso); }

/* Responsive */
@media (max-width: 900px) {
  nav.links { display: none; }
  header.site .btn { margin-left: auto; }
  .hero { padding-top: 40px; }
  .hero .wrap { grid-template-columns: 1fr; text-align: center; }
  .lede { margin-left: auto; margin-right: auto; }
  .stores, .facts { justify-content: center; }
  .hero-art { height: 480px; }
  .hero-art::before { width: 360px; height: 360px; }
  .hero-art .phone { width: 210px; }
  .hero-art .front { left: calc(50% - 175px); }
  .hero-art .back { left: calc(50% - 20px); }
  .steps, .features { grid-template-columns: 1fr; }
  .tour li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; }
  .tour .phone { width: 220px; }
  .tour h2::before { margin: 0 auto 14px; }
  .gallery {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px;
    margin: 0 -24px; padding: 0 24px 12px;
  }
  .gallery figure { flex: 0 0 64%; scroll-snap-align: center; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .cookie { flex-direction: column; align-items: stretch; }
  section { padding: 72px 0; }
}

/* Narrow phones: the name and "Get the app" still fit on one header row (the name may take two lines at 320 px). */
@media (max-width: 420px) {
  header.site .wrap { gap: 12px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand img { width: 34px; height: 34px; }
  header.site .btn { padding: 8px 14px; font-size: 15px; }
}