/* ==========================================================================
   Say Local — landing site
   Design source: Claude Design project "Landing Site.dc.html"
   ========================================================================== */

:root {
  --bg: #faf9f7;
  --bg-white: #fff;
  --bg-inset: #ecedf7;
  --bg-card: #f6f5f3;
  --bg-contact: #faeede;

  --ink: #20242e;
  --ink-2: #3a3f52;
  --ink-3: #41475a;
  --ink-4: #5a6078;
  --muted: #8b91a6;
  --muted-2: #8087a0;
  --muted-3: #6a7088;

  --amber: #e0913a;
  --amber-dark: #c07d2e;
  --violet: #6d6fc0;
  --green: #2fa36b;
  --red: #d1594e;
  --blue: #4f8fd6;
  --pink: #c268a0;

  --border-card: #ececea;

  --display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* horizontal page gutter — 1200px content, 40px minimum edge padding */
  --gutter: max(40px, calc((100% - 1200px) / 2));

  /* hero headline size, reused to position the overlapping phone */
  --h1-size: clamp(56px, 8.6vw, 104px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--amber-dark); text-decoration: none; }
a:hover { color: var(--amber); }

img { max-width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  z-index: 99;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.section { padding-left: var(--gutter); padding-right: var(--gutter); }

/* --------------------------------------------------------------- headings */

.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 60px);
  line-height: 0.92;
  letter-spacing: -1.8px;
  text-transform: uppercase;
  color: var(--ink);
}

.title--sm {
  font-size: clamp(34px, 5vw, 44px);
  line-height: 0.95;
  letter-spacing: -1.2px;
}

.eyebrow {
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}

.eyebrow--lg {
  margin-top: 14px;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.3;
}

.eyebrow--sm {
  margin-top: 22px;
  font-size: 15px;
  color: #878da0;
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  border-radius: 14px;
}

.btn--dark {
  margin-top: 26px;
  background: var(--ink);
  color: #fff;
  font-size: 16px;
  padding: 15px 26px;
}
.btn--dark:hover { background: #2c3243; color: #fff; }

.btn--amber {
  background: var(--amber);
  color: #fff;
  font-size: 15px;
  padding: 13px 20px;
  border-radius: 12px;
}
.btn--amber:hover { background: var(--amber-dark); color: #fff; }

/* --------------------------------------------------------------- brand/nav */

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  flex: none;
}
.brand-mark--sm { width: 32px; height: 32px; border-radius: 9px; }

.brand-word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.3px;
  /* never let the wordmark break between SAY and LOCAL */
  white-space: nowrap;
}
.brand-word--light { font-size: 18px; color: #fff; }

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.nav__brand:hover { color: var(--ink); }

.nav__links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 34px;
}
.nav__links a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); }

/* "Available on / Android and iOS" + the two circular store links.
   Sits at the right end of the nav, where the Download App pill used to be.
   Duplicated markup in index.html and privacy.html. */
.nav__stores {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav__stores-text {
  font-size: 14px;
  color: var(--ink-4);
  line-height: 1.35;
  white-space: nowrap;
}

.store-circles { display: flex; gap: 10px; }

.store-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background-color 0.15s ease;
}
.store-circle img {
  display: block;
  transition: filter 0.15s ease;
}

/* the Apple mark sits optically low in a circle; nudge it up a hair */
.store-circle--apple img { transform: translateY(-1px); }

/* Both logos are black artwork on transparency, so inverting them when the
   circle fills in gives a white mark on the dark ground. The Android robot's
   eyes are white in the source and invert to black against its now-white
   head, which is what we want. */
.store-circle:hover { background: var(--ink); }
.store-circle:hover img { filter: invert(1); }

/* Dark-ground variant for the footer. The same black artwork would be
   invisible on the dark footer, so it starts inverted (white mark, light
   border) and returns to black when the circle fills with white on hover —
   the light version's interaction, run in reverse. */
.store-circle--light { border-color: var(--muted); }
.store-circle--light img { filter: invert(1); }
.store-circle--light:hover { background: #fff; border-color: #fff; }
.store-circle--light:hover img { filter: none; }

/* --------------------------------------------------------------- hero */

.hero {
  background: var(--bg);
  padding-top: 30px;
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
}

.hero__title {
  margin: 34px 0 0;
  padding-right: 368px;
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -2.5px;
  color: var(--ink);
}
.hero__title span { display: block; font-size: var(--h1-size); }
.hero__title-light { font-weight: 400; }
.hero__title-bold { font-weight: 700; }

.hero__row { margin-top: 32px; position: relative; }

.hero__inset {
  background: var(--bg-inset);
  border-radius: 30px;
  padding: 38px 36px;
  position: relative;
  overflow: hidden;
  min-height: 452px;
}

.hero__swoosh {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 120%;
  height: 70%;
  opacity: 0.65;
  pointer-events: none;
}

.hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 376px;
  max-width: min(540px, calc(100% - 340px));
}

.hero__lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Official App Store / Google Play badges, pinned to the bottom of the
   hero copy column where the "available now" note used to sit. The two
   badge SVGs have different aspect ratios (2.99 vs 3.38), so they are
   matched on height — the convention both stores' guidelines expect. */
.hero__badges {
  --badge-h: 44px;
  margin-top: auto;
  padding-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.hero__badge { display: block; border-radius: 8px; }
.hero__badge img {
  display: block;
  height: var(--badge-h);
  width: auto;
}
.hero__badge:hover { opacity: 0.82; }

/* --------------------------------------------------------------- devices */

/* devices.css frames are fixed-size (428 × 868); scale them down while
   keeping the wrapper's layout box the correct scaled size. */
.phone {
  --frame-w: 428px;
  --frame-h: 868px;
  --phone-scale: 1;
  position: relative;
  width: calc(var(--frame-w) * var(--phone-scale));
  height: calc(var(--frame-h) * var(--phone-scale));
  flex: none;
}

.phone > .device {
  transform: scale(var(--phone-scale));
  transform-origin: top left;
}

/* recolour the stock frame to the Say Local dark navy + add a drop shadow */
.phone .device-frame {
  border-color: #14171f;
  box-shadow:
    inset 0 0 4px 2px #4a5266,
    inset 0 0 0 6px var(--ink),
    var(--phone-shadow, 0 34px 70px rgba(20, 24, 50, 0.28));
}
.phone .device-btns,
.phone .device-btns::after,
.phone .device-btns::before,
.phone .device-power { background: #14171f; }

.phone .device-screen { background-color: #f5f6fa; }

/* NB: --phone-scale must be set on the .phone element itself — the default
   above would otherwise shadow anything inherited from an ancestor. */
.phone--hero { --phone-scale: 0.673; }

/* The hero phone hangs above the inset card, overlapping the headline.
   1.84 = two headline lines at line-height 0.92. Declared after `.phone`
   so its `position: absolute` isn't overridden by `.phone`'s `relative`. */
.hero__phone {
  position: absolute;
  top: calc(-32px - 1.84 * var(--h1-size));
  right: 40px;
}

/* --------------------------------------------------------------- stats */

.stats-band {
  background: var(--bg);
  padding-top: 20px;
  padding-bottom: 24px;
}

.stats {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 36px 56px;
  max-width: calc(100% - 410px);
}
.stat { margin: 0; }

.stat__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(62px, 8vw, 84px);
  line-height: 0.85;
  letter-spacing: -2px;
  color: var(--ink);
}

.stat__label {
  margin: 14px 0 0;
  font-family: var(--body);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- phrases */

/* The copy column is much shorter than the device column, so centre the two
   against each other rather than top-aligning them. The negative margin pulls
   the whole row up so the phones overlap the stats band, as in the design. */
.phrases {
  margin-top: -92px;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.phrases__copy { flex: 1; min-width: 300px; }
.phrases__copy .eyebrow--lg { margin-top: 16px; max-width: 440px; }

.phone-pair {
  flex: none;
  display: flex;
  align-items: flex-start;
}

.phone-pair .phone { --phone-scale: 0.495; }

.phone-pair .phone--front { z-index: 2; }
.phone-pair .phone--back {
  z-index: 1;
  --phone-shadow: 0 34px 70px rgba(20, 24, 50, 0.2);
  /* overlap scales with the frames: -56px / -113px at the base 0.495 scale */
  margin-left: calc(-113px * var(--phone-scale));
  margin-top: calc(53px * var(--phone-scale));
}

/* --------------------------------------------------------------- features */

.features {
  background: var(--bg-white);
  padding-top: 80px;
  padding-bottom: 80px;
}

.cards {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 22px;
  padding: 28px;
}

.card__icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
}
.card__icon--amber  { background: var(--amber); }
.card__icon--violet { background: var(--violet); }
.card__icon--green  { background: var(--green); }
.card__icon--red    { background: var(--red); }
.card__icon--blue   { background: var(--blue); }
.card__icon--pink   { background: var(--pink); }

.card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  margin: 16px 0 0;
}

.card__body {
  font-size: 15.5px;
  color: var(--ink-4);
  line-height: 1.55;
  margin: 8px 0 0;
}

/* --------------------------------------------------------------- showcase */

/* A rail of app screens drifting sideways, full-bleed between the two white
   sections. Deliberately wordless — the band is a visual breather, so it
   carries no heading and nothing here is a link. */
.showcase {
  --rail-gap: 30px;
  --drift: 78s;
  /* Clear lavender wanted above and below the screens. The rail's padding is
     this plus the stagger below, so the band stays evenly cushioned even
     though the screens sit at different heights. */
  --band-space: 46px;
  /* How far the stagger throws a screen past the track, worst case: the
     furthest translateY in either direction plus the overhang its rotation
     adds. Recalculate these if the stagger transforms below change. */
  --stagger-up: 33px;
  --stagger-down: 35px;
  background: var(--bg-inset);
  /* full bleed: the rail runs off both page edges */
  padding-left: 0;
  padding-right: 0;
  position: relative;
  overflow: hidden;
}

/* the hero's swoosh, doubled and crossed, sitting behind the phones */
.showcase__swoosh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.showcase__rail {
  position: relative;
  padding-top: calc(var(--band-space) + var(--stagger-up));
  padding-bottom: calc(var(--band-space) + var(--stagger-down));
  /* screens dissolve into the band rather than butting against the edge */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}

.showcase__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: max-content;
  animation: showcase-drift var(--drift) linear infinite;
}

/* Exactly half the track, because the eight screens are held twice and the
   spacing lives on the items rather than in a flex gap — so -50% lands the
   ninth screen precisely where the first one started. */
@keyframes showcase-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.showcase__rail:hover .showcase__track { animation-play-state: paused; }

.showcase__item {
  margin-right: var(--rail-gap);
  /* the stagger repeats every four screens; with an even number of screens
     held twice, the pattern carries straight across the loop's seam */
  transform: translateY(-28px) rotate(-3deg);
}
.showcase__item:nth-child(4n + 2) { transform: translateY(20px)  rotate(2deg); }
.showcase__item:nth-child(4n + 3) { transform: translateY(-6px)  rotate(3.5deg); }
.showcase__item:nth-child(4n + 4) { transform: translateY(32px)  rotate(-1.5deg); }

.showcase .phone { --phone-scale: 0.46; }

/* Nothing to pause for, so the rail becomes a plain scrollable strip and the
   duplicate screens — which only exist to close the loop — are dropped. */
@media (prefers-reduced-motion: reduce) {
  .showcase__track { animation: none; }
  .showcase__item--loop { display: none; }
  .showcase__rail {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .showcase__rail::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------- support */

/* padding-top matches .features' padding-bottom so the showcase band between
   them sits on equal white margins */
.support {
  background: var(--bg-white);
  padding-top: 80px;
  padding-bottom: 80px;
}

.faq {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 28px 40px;
}

.faq__q {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.faq__a {
  font-size: 15px;
  color: var(--ink-4);
  line-height: 1.55;
  margin: 6px 0 0;
}
.faq__a strong { color: var(--ink); }

.contact {
  margin-top: 32px;
  background: var(--bg-contact);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.contact__copy { flex: 1; min-width: 240px; }

.contact__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
}

.contact__sub {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: #8a6a3e;
}

/* ------------------------------------------------- legal page (privacy.html) */

.legal-nav { padding-top: 30px; }

.legal {
  display: block;
  background: var(--bg);
  padding-top: 56px;
  padding-bottom: 96px;
}

.legal__back {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-4);
}
.legal__back:hover { color: var(--ink); }

.legal__updated {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 0;
}

.prose {
  max-width: 760px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-3);
}
.prose p { margin: 0 0 20px; }
.prose__last { margin-bottom: 0; }
.prose h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin: 28px 0 8px;
}

/* --------------------------------------------------------------- footer */

.site-footer {
  background: var(--ink);
  padding-top: 52px;
  padding-bottom: 52px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.site-footer__top .nav__brand { color: #fff; }
.site-footer__top .nav__brand:hover { color: #fff; }

.site-footer__links { display: flex; gap: 24px; }
.site-footer__links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.site-footer__links a:hover { color: #fff; }
.site-footer__links a[aria-current="page"] { color: #fff; }

.site-footer__legal {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--muted-3);
  line-height: 1.6;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .hero__title { padding-right: 320px; }
}

@media (max-width: 880px) {
  .hero__title { padding-right: 0; letter-spacing: -1.2px; }
  .hero__row { margin-top: 40px; }
  .hero__inset { min-height: 0; }
  .hero__copy { max-width: 100%; min-height: 0; }

  /* phone drops out of the overlap and sits under the copy */
  .hero__phone {
    position: static;
    margin: 28px auto 0;
  }

  .stats { max-width: 100%; }

  /* stacked: back to normal flow, no overlap, no cross-axis centring */
  .phrases {
    margin-top: 40px;
    align-items: flex-start;
    justify-content: center;
  }
  .phone-pair { margin: 32px auto 0; }
}

@media (max-width: 620px) {
  :root { --gutter: 22px; }

  /* brand + store circles share the first row, links drop to a second row.
     The "Available on…" label is dropped here — the full-size store badges
     sit a few hundred pixels below in the hero and say the same thing. */
  .nav { flex-wrap: wrap; gap: 14px 18px; }
  .nav__brand { flex: 1; }
  .nav__stores-text { display: none; }
  .nav__links {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 22px;
  }

  .hero { padding-bottom: 48px; }
  .hero__title span { font-size: clamp(40px, 13vw, 64px); }
  .hero__inset { padding: 26px 22px; }

  .phone--hero { --phone-scale: 0.62; }
  .phone-pair .phone { --phone-scale: 0.42; }

  /* fewer screens fit, so shorten the loop to keep the drift feeling the same.
     The stagger is a fixed pixel throw, so only the cushion tightens here. */
  .showcase { --rail-gap: 20px; --drift: 58s; --band-space: 26px; }
  .showcase .phone { --phone-scale: 0.38; }

  .stats { gap: 26px 32px; }

  .features { padding-top: 60px; padding-bottom: 60px; }
  .support { padding-top: 60px; padding-bottom: 60px; }
  .legal { padding-top: 40px; padding-bottom: 64px; }

  /* stack brand over links so the wordmark never wraps mid-name */
  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

@media (max-width: 380px) {
  .phone--hero { --phone-scale: 0.55; }
  .phone-pair .phone { --phone-scale: 0.36; }
  .showcase .phone { --phone-scale: 0.34; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}