:root {
  --paper: #EEF2EF;
  --ink: #0E1B17;
  --ink-soft: #3F4F49;
  --green: #0B7A3E;
  --mint: #D8F0DF;
  --sage: #C9DDD2;
  --white: #FFFFFF;
  --stripe: 56px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1B17;
    --ink: #EEF2EF;
    --ink-soft: #A9BDB4;
  }
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 6px; }

/* The market-stall awning is the one loud thing on the page. */
.awning-wrap {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 14px rgba(14, 27, 23, .22));
  transform-origin: top;
  animation: unroll .9s cubic-bezier(.2, .9, .25, 1) both;
}
.awning {
  height: 76px;
  background: repeating-linear-gradient(90deg, var(--green) 0 var(--stripe), #fff var(--stripe) calc(var(--stripe) * 2));
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 28px) no-repeat,
    radial-gradient(circle 28px at 50% 0, #000 97%, transparent 100%) bottom / var(--stripe) 28px repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 28px) no-repeat,
    radial-gradient(circle 28px at 50% 0, #000 97%, transparent 100%) bottom / var(--stripe) 28px repeat-x;
}
@keyframes unroll { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.page {
  min-height: calc(100vh - 76px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: 56px;
  align-items: center;
}

.page { position: relative; }
.lang { position: absolute; top: 22px; right: 32px; display: flex; gap: 20px; font-size: 15px; font-weight: 600; z-index: 1; }
.lang a { color: var(--ink-soft); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.lang a:hover { color: var(--ink); }
.lang a[aria-current] { color: var(--ink); border-bottom-color: var(--green); }
@media (max-width: 880px) { .lang { right: 20px; top: 14px; } }
.copy { padding: 8px 0 40px; }
.stand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 20px; letter-spacing: -.01em;
  margin-bottom: 28px;
}
.stand .where { color: var(--ink-soft); font-weight: 400; font-size: 17px; }
h1 {
  font-weight: 800;
  font-size: clamp(44px, 6.2vw, 92px);
  line-height: .96;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 96;
  max-width: 11ch;
}
.lede {
  margin-top: 24px;
  max-width: 34em;
  font-size: 20px;
  color: var(--ink-soft);
}
.get { margin-top: 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.get a.badge { display: block; line-height: 0; border-radius: 9px; }
.get a.badge img { height: 54px; width: auto; display: block; }
.get small { color: var(--ink-soft); font-size: 15px; line-height: 1.3; }
.store { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.legal { margin-top: 28px; display: flex; gap: 8px 24px; flex-wrap: wrap; font-size: 15px; }
.legal a { color: var(--ink-soft); text-underline-offset: 3px; }
.legal a:hover { color: var(--ink); }
.facts {
  list-style: none; padding: 0;
  margin-top: 44px;
  display: flex; gap: 12px 36px; flex-wrap: wrap;
  font-size: 16px; font-weight: 600;
}
.facts li { display: flex; align-items: center; gap: 10px; }
.facts svg { width: 22px; height: 22px; stroke: var(--green); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (prefers-color-scheme: dark) { .facts svg { stroke: #5fd08c; } }

/* Phone preview */
.stage {
  align-self: end;
  justify-self: center;
  height: calc(100vh - 76px);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  padding-top: 28px;
  text-decoration: none;
}
.phone {
  width: 320px; flex: none;
  margin-bottom: -60px;
  background: #101614;
  border-radius: 50px;
  padding: 10px;
  box-shadow: 0 0 0 2px #2a3631, 0 30px 60px -20px rgba(14, 27, 23, .45);
  animation: rise .8s .45s cubic-bezier(.2, .8, .25, 1) both;
  transition: transform .25s ease, box-shadow .25s ease;
}
.stage:hover .phone {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2px #2a3631, 0 36px 70px -18px rgba(11, 122, 62, .35);
}
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 41px;
}

@media (max-width: 880px) {
  html, body { height: auto; }
  /* Mobile: no language switcher (the browser language already chose this page).
     The App Store link stays in the middle, the phone preview is fully visible
     under it, and hours and address fall to the bottom. */
  .page {
    display: flex; flex-direction: column; align-items: stretch;
    min-height: 0; padding: 0 20px; column-gap: 0;
  }
  .copy { display: contents; }
  .lang { display: none; }
  .awning { height: 60px; }
  .stand { margin: 18px 0 12px; font-size: 18px; }
  h1 { font-size: clamp(38px, 10vw, 52px); }
  .lede { margin-top: 12px; font-size: 15px; line-height: 1.4; }
  .get { order: 1; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
  .get .cta { width: 100%; box-sizing: border-box; text-align: center; }
  .get small { font-size: 14px; }
  .store { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .get a.badge img { height: 48px; }
  .stage {
    order: 2; align-self: center;
    height: auto; overflow: visible; padding-top: 0; margin-top: 20px;
    display: flex; justify-content: center;
    text-decoration: none;
  }
  .phone {
    width: min(310px, 84vw);
    margin-bottom: 0;
    border-radius: 44px;
    padding: 9px;
    box-shadow: 0 0 0 2px #2a3631, 0 24px 50px -15px rgba(14, 27, 23, .35);
    animation: none;
  }
  .phone img {
    border-radius: 36px;
  }
  .facts { order: 3; margin-top: 30px; }
  .legal { order: 4; margin-top: 22px; }
}
/* Short screens: tighten the header */
@media (max-width: 880px) and (max-height: 720px) {
  .stand { margin-top: 10px; margin-bottom: 6px; }
  h1 { font-size: clamp(30px, 9vw, 42px); }
  .lede { margin-top: 8px; font-size: 15px; }
  .get { margin-top: 12px; }
  .stage { margin-top: 14px; }
}
@media (max-height: 700px) and (min-width: 881px) {
  h1 { font-size: clamp(40px, 5vw, 64px); }
  .facts { margin-top: 28px; }
  .stand { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .awning-wrap, .phone { animation: none; }
}
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 17px; padding: 13px 24px; border-radius: 99px;
  box-shadow: 0 4px 12px rgba(11, 122, 62, .22);
  transition: filter .15s ease, transform .1s ease;
}
.cta:hover { filter: brightness(1.08); transform: translateY(-1px); }