/* Station Santé — site styles */

/* Fonts are served from this site (SIL Open Font License), so visitors' browsers never contact a font CDN */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-stretch: 75% 100%; font-display: swap;
  src: url("fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-stretch: 75% 100%; font-display: swap;
  src: url("fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Headings use Lucida Fax where the visitor has it installed; Lucida Fax is a commercial font
   that may not be served from this site without a Monotype web licence, so Merriweather is the served stand-in */
@font-face {
  font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/merriweather-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/merriweather-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --brand: #65c5b7;
  --brand-hover: #80d2c6;
  --brand-light: #a6e3d9;
  --brand-dark: #1f8073;
  --deep: #0e3b36;
  --deep-2: #17514a;
  --mint: #e3f4f0;
  --paper: #f3faf8;
  --ink: #0c2926;
  --muted: #47625e;
  --line: #c3dcd6;
  --white: #ffffff;
  --on-deep: #cfe9e4;
  --on-brand: #1d4a45;
  --focus: var(--brand-dark);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --heading: "Lucida Fax", "Merriweather", Georgia, serif;
  --body: "Figtree", system-ui, sans-serif;
  --wrap: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.site-header, .locations, .doc-hero { --focus: var(--ink); }
.site-footer { --focus: var(--brand); }

/* On the teal header the teal button would disappear, so it turns dark */
.site-header .btn-primary { background: var(--ink); color: var(--white); }
.site-header .btn-primary:hover { background: var(--deep-2); }

/* Language switching: elements tagged data-l show only for the active language */
html[lang="fr"] [data-l="en"],
html[lang="en"] [data-l="fr"] { display: none !important; }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--brand); color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 50;
}
.skip:focus { left: 16px; }

/* Headings: Lucida Fax (see the font note above) */
.display, h1, h2, h3, h4 {
  font-family: var(--heading);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--brand);
  color: var(--ink);
  border-bottom: 1px solid rgba(12,41,38,.12);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 68px;
}
/* Wordmark mirrors the logo lettering: bold, condensed, capitals */
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; font-family: var(--display); font-weight: 800;
  font-stretch: 75%; font-variation-settings: "wdth" 75;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.45rem; line-height: 1; white-space: nowrap;
}
/* The logo's ring, leaf and lettering are transparent cut-outs: a white disc behind it makes them read white */
.brand img, .foot-logo { background: var(--white); border-radius: 50%; }
.brand img { width: 42px; height: 42px; box-shadow: 0 0 0 2px rgba(12,41,38,.15); }
.nav { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; gap: 4px; margin-right: 8px; }
.nav-links a {
  text-decoration: none; font-weight: 600; font-size: 0.97rem;
  padding: 8px 12px; border-radius: 999px; opacity: .9;
}
.nav-links a:hover { opacity: 1; background: rgba(12,41,38,.08); }
.lang-toggle, .menu-toggle {
  font: inherit; font-weight: 700; font-size: 0.9rem;
  border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer;
}
.lang-toggle { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px rgba(12,41,38,.35); }
.lang-toggle:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.nav-order { padding: 9px 16px; font-size: .95rem; }
.menu-toggle { display: none; background: transparent; color: var(--ink); padding: 8px; }
.menu-toggle svg { width: 26px; height: 26px; }

@media (max-width: 880px) {
  .menu-toggle { display: block; }
  .nav .nav-order { display: none; }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--brand); padding: 8px 20px 20px;
    border-bottom: 1px solid rgba(12,41,38,.12);
  }
  .nav-links a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid rgba(12,41,38,.1); font-size: 1.1rem; }
  .site-header.open .nav-links { display: flex; }
}
@media (max-width: 400px) {
  .site-header .wrap { gap: 8px; }
  .brand { font-size: 1.15rem; gap: 8px; }
  .brand img { width: 36px; height: 36px; }
  .nav { gap: 4px; }
  .lang-toggle { padding: 7px 11px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; text-decoration: none; font-size: 1rem; line-height: 1.2;
  padding: 14px 22px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--brand); color: var(--ink); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); }
.btn-dark { background: var(--deep); color: var(--white); }
.btn-dark:hover { background: var(--deep-2); }
.btn-outline { border-color: var(--deep); color: var(--deep); background: transparent; }
.btn-outline:hover { background: var(--deep); color: var(--white); }
.btn-sm { padding: 10px 16px; font-size: .93rem; }

/* ---------- Hero ---------- */
.hero {
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
  padding: 64px 0 88px;
}
.hero .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
  line-height: 1.08;
  margin: 0 0 22px;
  text-wrap: balance;
}
.hero p.lead {
  font-size: 1.2rem; max-width: 42ch; margin: 0 0 30px; color: var(--muted);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }

/* Mini transit line of the five stops, echoing the locations section */
.hero-stops { position: relative; display: flex; justify-content: space-between; max-width: 520px; }
.hero-stops::before {
  content: ""; position: absolute; left: 2.2rem; right: 2.6rem; top: 5px;
  height: 4px; border-radius: 4px; background: var(--brand);
}
.hero-stops a {
  position: relative; padding-top: 22px; text-align: center;
  font-weight: 700; font-size: .88rem; text-decoration: none; color: var(--ink);
}
.hero-stops a::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--ink);
}
.hero-stops a:hover::before { background: var(--brand); }

/* Photo collage on a teal panel */
.hero-media { position: relative; padding: 0 0 56px 56px; }
.hero-media::before {
  content: ""; position: absolute; top: 48px; bottom: 0; left: 140px; right: -60px;
  background: var(--brand); border-radius: 32px;
}
.ph-hero-main { position: relative; z-index: 1; width: 82%; margin-left: auto; aspect-ratio: 4 / 5; border-radius: 28px; }
.ph.ph-hero-side {
  position: absolute; z-index: 2; left: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3;
  border-radius: 20px; outline: 6px solid var(--white);
}

@media (max-width: 880px) {
  .hero { padding: 40px 0 56px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-media { padding: 0 0 40px 28px; width: 100%; max-width: 520px; }
  .hero-media::before { left: 80px; right: -20px; }
}
@media (max-width: 560px) {
  .hero-stops { display: none; }
  .hero-actions { margin-bottom: 0; }
}

/* ---------- Photo slots ----------
   Each slot points at a file in assets/photos/. Until that file exists, main.js marks
   the slot .missing and the labelled placeholder (what to shoot + file name) shows. */
.ph { position: relative; margin: 0; overflow: hidden; background: var(--mint); border-radius: 18px; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; color: transparent; }
.ph-note { display: none; }
.ph.missing { box-shadow: inset 0 0 0 2px rgba(12,41,38,.22); }
.ph.missing img { display: none; }
.ph.missing .ph-note {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 8px; padding: 16px; text-align: center; color: var(--deep);
}
.ph-note::before {
  content: ""; width: 34px; height: 34px; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3b36' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 8h4l2-3h6l2 3h4v11H3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ph-note b { font-size: .95rem; line-height: 1.3; max-width: 24ch; }
.ph-note code { font: 600 .74rem/1.4 ui-monospace, Consolas, monospace; background: rgba(255,255,255,.75); padding: 2px 8px; border-radius: 6px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .ph.missing .ph-note { gap: 4px; padding: 8px; }
  .ph-note::before { width: 24px; height: 24px; }
  .ph-note b { font-size: .8rem; }
  .ph-note code { font-size: .64rem; padding: 1px 5px; }
  .food-strip .ph-note::before, .ph-hero-side .ph-note::before { display: none; }
}
/* ---------- Generic sections ---------- */
.section { padding: 96px 0; }
@media (max-width: 640px) { .section { padding: 64px 0; } .section-head { margin-bottom: 32px; } }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section h2, .doc-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.1;
  margin: 0 0 16px;
}
h3 { font-size: 1.2rem; margin: 0 0 6px; line-height: 1.25; }
.section-head p { color: var(--muted); margin: 0; font-size: 1.14rem; }

/* ---------- Menu ---------- */
.menu { background: var(--paper); }
.goal-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 28px; padding: 0; list-style: none;
}
.goal-tabs button {
  font: inherit; font-weight: 700; font-size: .98rem;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--line);
}
.goal-tabs button:hover { border-color: var(--deep); }
.goal-tabs button[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--white); }
.goal-help { color: var(--muted); margin: -12px 0 28px; min-height: 1.6em; max-width: 64ch; }

.drinks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 0; border-top: 2px solid var(--deep);
}
.drink {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start;
  padding: 22px 20px 22px 0;
  border-bottom: 1px solid var(--line);
}
.drink[hidden] { display: none; }
.drink-media { position: relative; width: 64px; height: 84px; }
.drink .mini { width: 64px; height: 84px; }
/* A drink's photo covers its cup drawing; main.js removes the photo if the file is missing */
.drink-photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; color: transparent; }
.drink h3 { font-size: 1.15rem; margin-bottom: 4px; }
.drink .ingr { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.5; }
.tag {
  display: inline-block; margin-top: 10px;
  font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.tag.classic { background: var(--mint); color: var(--deep); }
.tag.energy { background: #fde9b8; color: #6b4a00; }
.tag.slim { background: #fbd6e3; color: #8a1c44; }
.tag.masse { background: var(--deep); color: var(--white); }
.tag.treat { background: #ece6e0; color: #4a3d33; }

.food-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; }
.food-strip .ph { aspect-ratio: 4 / 3; }
@media (max-width: 820px) { .food-strip { grid-template-columns: 1fr 1fr; } }

.counter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  margin-top: 56px; padding-top: 40px; border-top: 2px solid var(--deep);
}
.food-strip + .counter { margin-top: 36px; }
.counter h3 { font-size: 1.35rem; }
.counter ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.counter li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; }
.counter li b { font-weight: 700; }
.counter li span { color: var(--muted); }
.menu-note { color: var(--muted); font-size: .95rem; margin: 0; }
@media (max-width: 820px) {
  .counter { grid-template-columns: 1fr; gap: 28px; }
  .counter li { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- App ---------- */
.app .wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
/* Phone mockup: mirrors the app's home screen. Values follow ElPointzz constants/Theme.js
   (ink #0a201f, cream #f1faf7, mute #6a8b89) with Station Santé teal as the tenant primary. */
.phone {
  --app-primary: #65c5b7;
  --app-accent: #3aa597;
  --app-ink: #0a201f;
  --app-ink2: #1c3a38;
  --app-cream: #f1faf7;
  --app-mute: #6a8b89;
  --app-stroke: rgba(10,32,31,.08);
  width: 300px; max-width: 100%; margin: 0 auto;
  background: #05100f; border-radius: 46px; padding: 11px;
  box-shadow: 0 40px 70px -40px rgba(14,59,54,.7);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--app-ink);
}
.screen {
  position: relative; overflow: hidden;
  background: #fff; border-radius: 36px; height: 600px;
  padding: 14px 11px 0;
}
.screen svg { display: inline-block; }
.screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: #fff; z-index: 1; }

.app-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 4px 4px 6px; }
.app-head > svg { width: 17px; height: 17px; }
.app-head img { width: 40px; height: 40px; }
.app-bell { position: relative; width: 17px; height: 17px; }
.app-bell svg { width: 17px; height: 17px; }
.app-bell i {
  position: absolute; top: -5px; right: -6px; min-width: 13px; height: 13px; border-radius: 7px;
  background: var(--app-primary); color: #fff; font: 700 8px/13px system-ui, sans-serif; font-style: normal;
  text-align: center; border: 1.5px solid #fff;
}

.app-greet { font-size: 22px; font-weight: 700; letter-spacing: -.6px; line-height: 1.15; margin: 4px 3px 0; }
.app-greet em { font-style: normal; color: var(--app-accent); }
.app-greet-sub { font-size: 12px; color: var(--app-ink2); margin: 2px 3px 12px; }
.app-label { font: 700 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .8px; color: var(--app-mute); margin: 0 3px 7px; }

.wallet { margin-bottom: 12px; }
.w-card { border-radius: 18px; padding: 13px; box-shadow: 0 14px 30px -14px rgba(0,51,48,.45); }
.w-stamp { background: #112926; height: 54px; }
.w-points { background: var(--app-ink); color: var(--app-cream); margin-top: -18px; position: relative; }
.w-row { display: flex; justify-content: space-between; align-items: center; }
.w-lab { display: block; font: 600 7.5px/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .4px; color: rgba(241,250,247,.55); }
.w-count { font: 700 9px ui-monospace, Consolas, monospace; color: var(--app-primary); }
.w-top { display: flex; align-items: flex-start; gap: 9px; }
.w-top > div:first-child { flex: 1; }
.w-bal { display: block; font-size: 32px; font-weight: 700; letter-spacing: -1.1px; line-height: 1.1; margin: 1px 0 2px; }
.redeem { width: 82px; flex: none; background: var(--app-accent); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 10px -4px rgba(58,165,151,.6); }
.redeem-img { height: 25px; display: grid; place-items: center; background: rgba(0,0,0,.08); }
.redeem-img svg { width: 15px; height: 15px; }
.redeem-meta { padding: 3px 6px 6px; color: var(--app-ink); }
.redeem-meta > span { display: block; font: 800 6px ui-monospace, Consolas, monospace; letter-spacing: .4px; }
.redeem-meta b { display: block; font-size: 8px; line-height: 1.2; margin-top: 1px; }
.perf { border-top: 1px dashed rgba(241,250,247,.18); margin: 8px 0; }
.next-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.next-row .w-lab { color: rgba(241,250,247,.5); font-weight: 700; }
.next-rem { font: 700 8px ui-monospace, Consolas, monospace; color: var(--app-primary); }
.next { display: flex; align-items: center; gap: 9px; }
.next > div { flex: 1; }
.next-thumb { width: 30px; height: 30px; border-radius: 9px; background: rgba(101,197,183,.16); color: var(--app-primary); display: grid; place-items: center; flex: none; }
.next-thumb svg { width: 16px; height: 16px; }
.next b { display: block; font-size: 10.5px; font-weight: 600; margin-bottom: 5px; }
.bar { display: block; height: 4.5px; border-radius: 999px; background: rgba(241,250,247,.12); overflow: hidden; }
.bar i { display: block; height: 100%; width: 78%; border-radius: 999px; background: var(--app-accent); }

.pills { display: flex; gap: 6px; margin-bottom: 12px; white-space: nowrap; }
.pill {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 7px 10px; border-radius: 999px; font-size: 9.5px; font-weight: 600;
  background: #fff; border: 1px solid var(--app-stroke); box-shadow: 0 1px 2px rgba(10,32,31,.06);
}
.pill svg { width: 11px; height: 11px; }
.pill.on { background: var(--app-primary); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -6px rgba(101,197,183,.8); }

.promo-b {
  display: flex; align-items: center; gap: 8px; min-height: 72px;
  border-radius: 16px; padding: 12px; color: #fff;
  background: linear-gradient(135deg, var(--app-accent), var(--app-primary));
  box-shadow: 0 12px 24px -10px rgba(101,197,183,.7);
}
.promo-b > div { flex: 1; }
.promo-b > div > span { display: block; font: 700 7.5px ui-monospace, Consolas, monospace; letter-spacing: .6px; color: rgba(255,255,255,.88); }
.promo-b b { display: block; font-size: 16px; line-height: 1.15; letter-spacing: -.3px; margin-top: 3px; }
.promo-b > svg { width: 30px; height: 30px; flex: none; }

.sips-head { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 3px 7px; }
.sips-head b { font-size: 14px; letter-spacing: -.3px; }
.sips-head > span { font-size: 9px; font-weight: 600; color: var(--app-accent); }
.sips { display: flex; gap: 8px; }
.sip { flex: 0 0 100px; background: #fff; border: 1px solid var(--app-stroke); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(10,32,31,.06); }
.sip-art { position: relative; height: 78px; background: #d9f1ec; display: grid; place-items: center; }
.sip-art .mini { width: 40px; height: 52px; }
.sip-art i { position: absolute; top: 5px; right: 5px; font: 700 7px ui-monospace, Consolas, monospace; font-style: normal; color: var(--app-cream); background: var(--app-ink); border-radius: 999px; padding: 2px 5px; }
.sip p { margin: 6px 7px 0; font-size: 7px; font-weight: 600; letter-spacing: .3px; color: var(--app-mute); }
.sip b { display: block; margin: 0 7px 7px; font-size: 10px; }

.tabbar {
  position: absolute; left: 10px; right: 10px; bottom: 14px;
  height: 48px; border-radius: 21px; background: var(--app-ink); z-index: 2;
  display: flex; align-items: stretch; padding: 4px;
  box-shadow: 0 10px 22px -8px rgba(10,32,31,.5);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 16px; font-size: 7px; font-weight: 500; color: rgba(241,250,247,.4); white-space: nowrap;
}
.tab svg { width: 14px; height: 14px; }
.tab.on { background: rgba(241,250,247,.1); color: var(--app-cream); font-weight: 700; }
.tab.scan { flex: 0 0 48px; justify-content: flex-start; color: var(--app-accent); font-weight: 700; }
.scan-circle {
  width: 37px; height: 37px; border-radius: 50%; margin-top: -14px;
  display: grid; place-items: center; background: var(--app-primary);
  border: 2px solid var(--app-ink); box-shadow: 0 6px 14px -4px rgba(101,197,183,.8);
}
.scan-circle svg { width: 17px; height: 17px; }

.app-copy > p { color: var(--muted); font-size: 1.14rem; margin: 0; max-width: 52ch; }
.features { list-style: none; padding: 0; margin: 32px 0 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; }
.features li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.features .ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--mint);
}
.features .ico svg { width: 22px; height: 22px; }
.features h3 { font-size: 1.15rem; }
.features p { margin: 2px 0 0; color: var(--muted); font-size: .97rem; }
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.soon {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--white); border-radius: 12px; padding: 10px 16px;
  font-weight: 600; font-size: 0.95rem;
}
.soon svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .app .wrap { grid-template-columns: 1fr; gap: 48px; }
  .phone { order: 2; }
}
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* ---------- Locations: the line ---------- */
.locations { background: var(--brand); color: var(--ink); }
.locations .section-head p { color: var(--on-brand); }

.line-map { margin: 8px 0 56px; }
.line-map ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.line-map ol::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 17px;
  height: 10px; border-radius: 10px; background: var(--ink);
}
.line-map li { position: relative; text-align: center; }
.line-map a {
  display: grid; justify-items: center; gap: 12px;
  text-decoration: none; padding: 0 4px 6px; border-radius: 12px;
}
.line-map .dot {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 8px solid var(--brand);
  box-shadow: 0 0 0 4px var(--ink);
  position: relative; z-index: 1;
}
.line-map a:hover .dot, .line-map a:focus-visible .dot { background: var(--ink); }
.line-map .stop {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-stretch: 75%; font-variation-settings: "wdth" 75; line-height: 1;
}
.line-map .area { display: block; font-family: var(--body); font-weight: 600; font-size: .85rem; color: var(--on-brand); margin-top: 4px; letter-spacing: 0; }

@media (max-width: 720px) {
  .line-map ol { grid-template-columns: 1fr; gap: 6px; }
  .line-map ol::before { left: 17px; right: auto; top: 22px; bottom: 22px; width: 10px; height: auto; }
  .line-map li { text-align: left; }
  .line-map a { grid-template-columns: 44px 1fr; justify-items: start; align-items: center; gap: 16px; padding: 4px 0; }
}

.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 18px; }
.loc {
  background: var(--white); color: var(--ink); border-radius: 22px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-margin-top: 96px;
  box-shadow: 0 18px 36px -24px rgba(12,41,38,.5);
}
.loc:target { box-shadow: 0 0 0 3px var(--ink); }
.ph-loc { margin: -26px -26px 4px; aspect-ratio: 16 / 9; border-radius: 22px 22px 0 0; }
.loc h3 { font-size: 1.4rem; margin: 0; }
.loc .where { color: var(--brand-dark); font-weight: 700; font-size: 0.95rem; margin: 0; }
.loc address { font-style: normal; color: var(--ink); }
.hours { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.hours td { padding: 3px 0; }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.hours-note { color: var(--muted); font-size: .93rem; margin: 0; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.loc .btn-ghost { border-color: rgba(12,41,38,.35); color: var(--ink); }
.loc .btn-ghost:hover { border-color: var(--ink); }

/* ---------- Franchise ---------- */
.franchise { background: var(--brand); }
.franchise .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.franchise h2 { margin-bottom: 12px; }
.franchise p { margin: 0; font-size: 1.14rem; max-width: 52ch; }
.franchise ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ph-franchise { aspect-ratio: 4 / 3; border-radius: 24px; }
.franchise li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-weight: 600; }
.franchise li svg { width: 22px; height: 22px; margin-top: 2px; }
.franchise .btn { margin-top: 28px; }
@media (max-width: 820px) { .franchise .wrap { grid-template-columns: 1fr; } }

/* ---------- FAQ teaser ---------- */
.faq .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.faq .section-head { margin-bottom: 20px; }
@media (max-width: 820px) { .faq .wrap { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c9dcd8; padding: 56px 0 32px; font-size: 0.95rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { color: var(--white); margin: 0 0 10px; font-size: 1rem; }
.site-footer .foot-logo { width: 64px; height: 64px; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer a { text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid #234642; padding-top: 20px; margin: 8px 0 0; color: #8fb0aa; }
@media (max-width: 820px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .wrap > div:first-child { grid-column: 1 / -1; } }

/* ---------- Document pages (privacy, terms, support) ---------- */
.doc-hero { background: var(--brand); color: var(--ink); padding: 64px 0 48px; }
.doc-hero p { margin: 0; color: var(--on-brand); font-size: 1.1rem; }
.doc { padding: 56px 0 96px; }
.doc .wrap { max-width: 780px; }
.doc h2 { font-size: 1.55rem; line-height: 1.2; margin: 48px 0 12px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin-top: 24px; }
.doc p, .doc li { color: #213a37; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 6px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.97rem; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { background: var(--mint); }
.callout { background: var(--mint); border-left: 5px solid var(--brand); padding: 18px 20px; border-radius: 0 12px 12px 0; margin: 20px 0; }
details { border-bottom: 1px solid var(--line); padding: 16px 0; }
details summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--brand-dark); }
details[open] summary::after { content: "–"; }
details p { margin: 10px 0 0; color: var(--muted); }

/* ---------- How it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.steps li {
  counter-increment: step; position: relative;
  background: var(--paper); border-radius: 22px; padding: 28px 26px 26px;
}
.steps li::before {
  content: counter(step); display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 16px;
  background: var(--brand); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 1.3rem;
}
.steps h3 { font-size: 1.15rem; }
.steps p { margin: 4px 0 0; color: var(--muted); }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
@media (min-width: 641px) and (max-width: 900px) { .steps li { padding: 22px 18px; } }

/* ---------- Nutrition chips on drinks ---------- */
.nutri { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.nutri li { font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.nutri li b { font-variant-numeric: tabular-nums; }

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.review .stars { color: #e6a700; letter-spacing: 2px; font-size: 1.05rem; }
.review blockquote { margin: 0; font-size: 1.05rem; }
.review figcaption { color: var(--muted); font-size: .92rem; margin-top: auto; }
.review.slot { border: 2px dashed rgba(12,41,38,.22); background: var(--paper); align-items: center; justify-content: center; text-align: center; min-height: 190px; color: var(--deep); }
.review.slot code { font: 600 .74rem/1.4 ui-monospace, Consolas, monospace; background: var(--white); padding: 2px 8px; border-radius: 6px; color: var(--muted); }
.reviews-link { margin-top: 24px; }
@media (max-width: 700px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ---------- Closing call to action ---------- */
.cta-band { background: var(--brand); padding: 72px 0; }
.cta-band .wrap { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.cta-band h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1; margin: 0 0 10px; }
.cta-band p { margin: 0; font-size: 1.14rem; color: var(--on-brand); }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn-primary { background: var(--ink); color: var(--white); }
.cta-band .btn-primary:hover { background: var(--deep-2); }
.cta-band .btn-outline { border-color: var(--ink); color: var(--ink); }
.cta-band .btn-outline:hover { background: var(--ink); color: var(--white); }
.cta-band { --focus: var(--ink); }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: 1fr; } }

/* ---------- Location page ---------- */
.loc-page { padding: 56px 0 88px; }
.loc-page .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; }
.loc-page .ph { aspect-ratio: 16 / 10; border-radius: 22px; margin-bottom: 26px; }
.loc-facts { display: grid; gap: 22px; }
.loc-facts h2 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 6px; }
.loc-facts address { font-style: normal; font-size: 1.1rem; }
.loc-facts .hours { max-width: 380px; font-size: 1rem; }
.loc-facts .hours td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.loc-facts .note { color: var(--muted); margin: 0; }
.loc-actions-lg { display: flex; flex-wrap: wrap; gap: 10px; }
.map-frame { width: 100%; aspect-ratio: 4 / 5; border: 0; border-radius: 22px; background: var(--mint); display: block; }
.back-link { display: inline-block; margin-bottom: 14px; font-weight: 700; text-decoration: none; color: var(--ink); }
.back-link:hover { text-decoration: underline; }
.other-locs { background: var(--paper); padding: 56px 0; }
.other-locs ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.other-locs a { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--white); border: 2px solid var(--line); font-weight: 700; text-decoration: none; }
.other-locs a:hover { border-color: var(--ink); }
.loc h3 a { text-decoration: none; }
.loc h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) {
  .loc-page .wrap { grid-template-columns: 1fr; }
  .map-frame { aspect-ratio: 4 / 3; }
}

/* ---------- Contact page: email address and message templates ---------- */
.contact-page .wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: start; max-width: var(--wrap); }
.contact-page .wrap > * { min-width: 0; }
.mail-card { background: var(--mint); border-radius: 22px; padding: 26px; display: grid; gap: 10px; justify-items: start; }
.doc .mail-label { margin: 0; font-weight: 700; color: var(--muted); font-size: .95rem; }
.mail-addr {
  font-family: var(--heading); font-weight: 700; font-size: clamp(1.25rem, 3.4vw, 1.9rem);
  line-height: 1.2; text-decoration: none; color: var(--ink); overflow-wrap: anywhere;
}
.mail-addr:hover { text-decoration: underline; }
.contact-main > h2 { margin-top: 44px; }
.doc .tpl-help { color: var(--muted); margin: 0 0 8px; }
.tpl summary { font-size: 1.05rem; }
.tpl-body { display: grid; gap: 12px; padding-top: 14px; }
.doc .tpl-subj { margin: 0; overflow-wrap: anywhere; }
.tpl pre {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font: inherit; font-size: .97rem; line-height: 1.55; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
}
.tpl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.doc .tpl-tip { margin: 0; color: var(--muted); font-size: .95rem; }
.copy-btn .c-done, .copy-btn.copied .c-idle { display: none; }
.copy-btn.copied .c-done { display: inline; }
.copy-btn.copied { background: var(--deep); color: var(--white); }
.copy-buffer { position: fixed; left: -9999px; top: 0; opacity: 0; }
.contact-page .fine { color: var(--muted); font-size: .9rem; margin: 28px 0 0; }
.contact-side { display: grid; gap: 22px; }
.contact-side h2 { margin-top: 0; }
.contact-side ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
@media (max-width: 820px) {
  .contact-page .wrap { grid-template-columns: 1fr; }
}

/* ---------- Small layout helpers (instead of inline style attributes, which the CSP blocks) ---------- */
.foot-blurb { margin: 0; max-width: 34ch; }
.other-locs h2 { margin: 0; font-size: 1.6rem; }
.counter .menu-note { margin-top: 18px; }
.faq-link { margin-top: 20px; }
.notfound-text { font-size: 1.25rem; margin: 12px 0 28px; }
.callout p { margin: 0; }
.contact-side p { margin: 6px 0 0; }

/* ---------- Motion ----------
   One load sequence in the hero, content blocks rising in as they scroll into view, scroll-linked
   scenes (titles lighting up word by word, hero drift, photo zoom, phone tilt), the transit
   line drawing itself, the app mockup counting up, and feedback on clicks. Everything here is skipped for
   visitors who ask for reduced motion (global rule at the top), and the scroll-triggered
   starting states only apply when main.js is running (html.js). */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop-centered { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) scale(1); } }
@keyframes ring { from { box-shadow: 0 0 0 14px rgba(12,41,38,0); } 40% { box-shadow: 0 0 0 8px rgba(12,41,38,.25); } to { box-shadow: 0 0 0 3px var(--ink); } }

/* Hero: text rises in order, panel and photos follow, then the stop line draws */
.hero-copy > * { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-media::before { transform-origin: right; animation: grow-x .9s cubic-bezier(.2,.8,.2,1) .1s both; }
.ph-hero-main { animation: slide-in .8s cubic-bezier(.2,.8,.2,1) .2s both; }
.ph.ph-hero-side { animation: rise .8s cubic-bezier(.2,.8,.2,1) .45s both; }
.hero-stops::before { transform-origin: left; animation: grow-x .9s ease-out .5s both; }
.hero-stops a::before { animation: pop-centered .35s cubic-bezier(.3,1.6,.5,1) both; }
.hero-stops a:nth-child(1)::before { animation-delay: .55s; }
.hero-stops a:nth-child(2)::before { animation-delay: .7s; }
.hero-stops a:nth-child(3)::before { animation-delay: .85s; }
.hero-stops a:nth-child(4)::before { animation-delay: 1s; }
.hero-stops a:nth-child(5)::before { animation-delay: 1.15s; }

@media (prefers-reduced-motion: no-preference) {
  /* Locations line: draws itself, then each station appears */
  .js .line-map ol::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s ease-out; }
  .js .line-map.in ol::before { transform: scaleX(1); }
  .js .line-map .dot { transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1), background-color .15s ease; }
  .js .line-map.in .dot { transform: scale(1); }
  .js .line-map.in li:nth-child(1) .dot { transition-delay: .15s, 0s; }
  .js .line-map.in li:nth-child(2) .dot { transition-delay: .35s, 0s; }
  .js .line-map.in li:nth-child(3) .dot { transition-delay: .55s, 0s; }
  .js .line-map.in li:nth-child(4) .dot { transition-delay: .75s, 0s; }
  .js .line-map.in li:nth-child(5) .dot { transition-delay: .95s, 0s; }

  /* App mockup: the reward bar fills as the points count up (main.js) */
  .js .phone .bar i { width: 0; transition: width 1.3s cubic-bezier(.2,.8,.2,1) .2s; }
  .js .phone.in .bar i { width: 78%; }

  /* Scroll reveal: main.js tags content blocks with .rv (plus a stagger delay within a group)
     and adds .in once each block enters the viewport */
  .js .rv {
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--rv-delay, 0s);
  }
  .js .ph.rv { transform: translateY(20px) scale(.97); }
  .js .rv.in { opacity: 1; transform: none; }

  .site-header { transition: box-shadow .25s ease; }

  /* Scroll scenes (main.js scrollScenes): --p is each element's scroll progress,
     0 as it enters at the bottom of the screen, 1 as it leaves at the top
     (for the hero: 0 at the top of the page, 1 once it has scrolled away) */

  /* Section titles light up word by word */
  .scenes .w { opacity: .14; transition: opacity .45s ease; }
  .scenes .w.lit { opacity: 1; }

  /* Hero drifts away: copy rises and fades, the photo panel lags behind, the shake zooms in */
  .scenes .hero-copy { transform: translateY(calc(var(--p, 0) * -90px)); opacity: calc(1 - var(--p, 0) * 1.3); }
  .scenes .hero-media { transform: translateY(calc(var(--p, 0) * 70px)); }
  .scenes .ph-hero-main img { transform: scale(calc(1 + var(--p, 0) * .14)); transform-origin: 50% 35%; }

  /* Photos zoom out gently while crossing the screen */
  .scenes .ph.sc img {
    transform: translateY(calc((var(--p, .5) - .5) * -4%)) scale(calc(1.16 - var(--p, .5) * .12));
    will-change: transform;
  }

  /* App mockup tilts up into place and flattens by the middle of the screen */
  .scenes .phone.sc {
    --q: min(1, calc(var(--p, .5) * 2.1));
    transform: perspective(1400px) translateY(calc((1 - var(--q)) * 90px)) rotateX(calc((1 - var(--q)) * 24deg)) scale(calc(.86 + var(--q) * .14));
    transform-origin: 50% 100%;
  }

  /* Food strip drifts sideways with the scroll */
  .scenes .food-strip.sc { transform: translateX(calc((.5 - var(--p, .5)) * 70px)); }
  .scenes .menu { overflow-x: clip; }

  /* Closing headline grows into place */
  .scenes .cta-band h2.sc {
    transform: scale(calc(.82 + min(1, calc(var(--p, .5) * 2)) * .18));
    transform-origin: left center;
  }
}
.site-header.scrolled { box-shadow: 0 8px 22px -14px rgba(12,41,38,.55); }
@media print { .js .rv { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  .js .line-map ol::before { transform: scaleY(0); transform-origin: top; }
  .js .line-map.in ol::before { transform: scaleY(1); }
}

/* Feedback on user actions */
.drink.pop { animation: rise .35s cubic-bezier(.2,.8,.2,1) both; }
.site-header.open .nav-links { animation: drop .2s ease-out; }
.loc:target { animation: ring 1.1s ease-out both; }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; background: var(--paper); padding: 64px 20px; }
.notfound h1 { font-size: clamp(5rem, 16vw, 11rem); margin: 0; line-height: .9; color: var(--brand-dark); }