/* Masar. The app's own look (apps/mobile/src/theme.ts): Fredoka for headings and big numbers, Nunito for everything
   else, JetBrains Mono for codes; warm paper, logo green, soft sage, gold. Motion by Emil Kowalski's rules: a strong
   ease-out for anything that answers you, presses at 0.97, hover only on a real pointer, nothing from scale(0). */
@font-face { font-family: "Fredoka"; src: url("fonts/Fredoka-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/Fredoka-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* exactly the app's theme tokens */
  --warmwhite: #fbf4ec;
  --surface: #ffffff;
  --ink: #332a22;
  --muted: #6f6155;
  --green: #566b3e;        /* primary: the logo's green */
  --green-deep: #3f5230;   /* forestDeep */
  --sage: #dde6cc;         /* the app's "pink" token */
  --sage-soft: #edf2e2;    /* pinkSoft */
  --gold: #d9a441;
  --gold-soft: #f6e7c7;
  --track: #e7dccb;
  --line: rgb(51 42 34 / 0.1);
  --danger: #b3202e;
  --on-green: #ffffff;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gut: clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--warmwhite); color: var(--ink); font-family: var(--text); font-weight: 600; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 12px; background: var(--green); color: var(--on-green); }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gut), 1280px); margin: 0 auto; }
.eyebrow { margin: 0 0 16px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.eyebrow--light { color: var(--gold-soft); }

/* buttons: the app's green pill; press at 0.97 (Emil); hover only with a real pointer */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--green); color: var(--on-green); font: 700 16px/1 var(--text); text-decoration: none; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn--small { min-height: 40px; padding: 0 18px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--green-deep); } }
.link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.link--light { color: var(--warmwhite); }

/* ---------- the top bar: no ground on the film; the section's ground after it ---------- */
.bar { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) var(--gut) 14px; pointer-events: none; transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.bar > * { pointer-events: auto; }
.bar__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 21px; text-decoration: none; color: var(--ink); }
.bar__brand img { border-radius: 9px; }
.bar.is-solid { background: rgb(251 244 236 / 0.95); box-shadow: 0 1px 0 var(--line); }
.bar.is-dark { background: rgb(63 82 48 / 0.97); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08); }
.bar.is-dark .bar__brand { color: var(--warmwhite); }
.bar.is-dark .btn { background: var(--warmwhite); color: var(--green-deep); }
.bar .bar__brand, .bar .btn { transition: color 240ms ease, background-color 240ms ease, transform 160ms var(--ease-out); }

/* ---------- 1. the intro: a tall film; on wide screens the scroll tilts it down from the sky to the runner ---------- */
.intro { position: relative; background: var(--warmwhite); }
.intro__stage { position: relative; height: 100svh; overflow: hidden; }
.intro__film { position: absolute; inset: 0; overflow: hidden; background: #bccbd1 url("film/city-poster.jpg") 50% 16% / 100% auto no-repeat; will-change: clip-path; }
.intro__video { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; will-change: transform; }
.intro__copy { position: absolute; z-index: 2; left: var(--gut); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding-bottom: 6vh; max-width: min(760px, 62vw); }
.intro h1 { margin: 0; font-size: clamp(56px, 6vw, 112px); line-height: 0.94; letter-spacing: -0.025em; color: var(--ink); }
.intro h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.intro h1 .line > span { display: inline-block; white-space: nowrap; }
.intro h1 .line--accent { color: var(--green); }
.intro__sub { margin: 24px 0 0; max-width: 34ch; overflow: hidden; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; line-height: 1.45; color: var(--ink); }
.intro__sub > span { display: inline-block; }
.intro__after { position: absolute; z-index: 2; left: 0; right: 0; bottom: 6vh; width: min(100% - 2 * var(--gut), 760px); margin: 0 auto; text-align: center; font-family: var(--display); font-weight: 500; font-size: clamp(21px, 2.1vw, 30px); line-height: 1.3; color: var(--ink); opacity: 0; }
.intro__after b { font-weight: 600; color: var(--green); }
.intro__scroll { position: absolute; z-index: 2; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: max(22px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; font: 800 11px/1 var(--text); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.intro__scroll svg { width: 14px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2.4s var(--ease-in-out) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-3px); opacity: 0.5; } 50% { transform: translateY(4px); opacity: 1; } }

/* the intro's entrance on load: each line rises out of its own mask (only when script runs, so words never wait on nothing) */
.js .intro h1 .line > span, .js .intro__sub > span { transform: translateY(120%); }
.js.is-loaded .intro h1 .line > span, .js.is-loaded .intro__sub > span { transform: none; transition: transform 1100ms var(--ease-out); }
.js.is-loaded .intro h1 .line:nth-child(2) > span { transition-delay: 90ms; }
.js.is-loaded .intro__sub > span { transition-delay: 260ms; }

/* laptops and wide windows: the landscape cut opens on the runners; it is busy, so the words go light over a soft shade */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .intro__film { background: #55613f url("film/run-wide-poster.jpg") 50% 50% / cover no-repeat; }
  .intro__video { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .intro__film::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgb(35 29 23 / 0.62) 0%, rgb(35 29 23 / 0.34) 42%, rgb(35 29 23 / 0) 70%),
                linear-gradient(180deg, rgb(35 29 23 / 0.28) 0%, rgb(35 29 23 / 0) 22%); }
  .intro__copy { top: auto; bottom: 12vh; justify-content: flex-end; padding-bottom: 0; }
  .intro h1, .intro__sub { color: var(--warmwhite); }
  .intro h1 .line--accent { color: var(--gold); }
  .intro__scroll { color: var(--warmwhite); }
  .bar:not(.is-solid):not(.is-dark) .bar__brand { color: var(--warmwhite); }
}

/* ---------- about: who is behind it ---------- */
.about { padding: clamp(90px, 14vh, 150px) 0; background: var(--warmwhite); }
.about__grid { display: grid; gap: 28px 64px; }
@media (min-width: 900px) { .about__grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.about h2 { margin: 0; font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.about h2 span { color: var(--green); }
.about__body p { margin: 0 0 18px; max-width: 52ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
.about__body p:last-child { margin-bottom: 0; color: var(--muted); }

/* ---------- 2. the shelf ---------- */
.how { position: relative; background: var(--warmwhite); --ph: clamp(340px, 52vh, 500px); --pw: calc(var(--ph) * 0.49); }
.how__pin { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(88px, 12vh, 120px) var(--gut) clamp(28px, 5vh, 56px); overflow: hidden; }
.how h2 { margin: 0; font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.shelf { position: relative; min-height: 420px; }
/* the 3D scene lives in a flat stage, and the stage is what shrinks on short screens (Safari scales a flat box reliably) */
.shelf__stage { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 40%; transform-origin: 50% 50%; }
.how__head { position: relative; z-index: 3; }
.shelf__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.phone { position: absolute; left: calc(var(--pw) / -2); top: calc(var(--ph) / -2); width: var(--pw); height: var(--ph); padding: 9px; border-radius: 38px; background: var(--ink); box-shadow: 0 30px 60px -28px rgb(51 42 34 / 0.5), 0 0 0 1px rgb(51 42 34 / 0.06); backface-visibility: hidden; }
.phone .scr { transition: opacity 400ms ease; }
.phone.is-off .scr { opacity: 0.78; }
.scr { position: relative; height: 100%; overflow: hidden; border-radius: 30px; padding: 46px 18px 18px; background: var(--warmwhite); color: var(--ink); display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.scr::before { content: ""; position: absolute; top: 10px; left: 50%; width: 76px; height: 22px; translate: -50% 0; border-radius: 999px; background: var(--ink); }
.scr p { margin: 0; }
.scr--centre { align-items: center; justify-content: center; text-align: center; }
.scr__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 17px; }
.scr__pill { padding: 4px 10px; border-radius: 999px; background: var(--gold-soft); font: 700 12px/1.3 var(--text); font-variant-numeric: tabular-nums; }
.scr__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); display: flex; align-items: center; gap: 7px; }
.scr__eyebrow--rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgb(179 32 46 / 0.14); }
.scr__ring { position: relative; margin: 8px auto 6px; width: 150px; height: 150px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--green) 0 62%, #d3ddc0 62% 100%); }
.scr__ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--warmwhite); }
.scr__ring b, .scr__ring small { position: relative; }
.scr__ring b { font: 600 34px/1 var(--display); }
.scr__ring small { color: var(--muted); }
.scr__btn { margin-top: auto !important; padding: 13px; border-radius: 999px; background: var(--green); color: var(--on-green); text-align: center; font-weight: 800; font-size: 14px; }
.scr__btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(51 42 34 / 0.2); }
.scr__muted { color: var(--muted); font-size: 12px; text-align: center; }
.scr__big { font: 600 46px/1 var(--display); font-variant-numeric: tabular-nums; }
.scr__big small { font: 700 15px var(--text); margin-left: 4px; color: var(--muted); }
.scr__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scr__pair span { padding: 9px 10px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 600 16px/1.2 var(--display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.scr__pair small { display: block; font: 700 11px/1.4 var(--text); color: var(--muted); }
.scr__map { width: 100%; border-radius: 14px; background: var(--sage-soft); }
.scr__map .g { fill: none; stroke: rgb(86 107 62 / 0.16); }
.scr__map .r { fill: none; stroke: var(--green); stroke-width: 3.5; stroke-linecap: round; }
.scr__map circle { fill: var(--gold); stroke: #fff; stroke-width: 2; }
.scr__tick { width: 52px; height: 52px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.scr__tick svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.scr__points { padding: 8px 16px; border-radius: 999px; background: var(--gold-soft); font: 600 22px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.scr__points i { font: 700 13px var(--text); color: var(--muted); font-style: normal; }
.scr__list { list-style: none; margin: 8px 0 0; padding: 0; }
.scr__list li { display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); }
.scr__list li span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scr__list b { color: var(--green); font-weight: 800; font-variant-numeric: tabular-nums; }
.scr__offer { font: 600 21px/1.2 var(--display); }
.scr__qr { width: 150px; height: 150px; padding: 10px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.scr__qr svg { width: 100%; height: 100%; }
.scr__qr rect { fill: var(--ink); }
.scr__code { font: 600 19px var(--mono); letter-spacing: 0.08em; }

/* the shelf answers sideways swipes in script, so the browser keeps only vertical panning there */
.shelf { touch-action: pan-y; }
.phone:not(.is-off) { cursor: default; }
.phone.is-off { cursor: pointer; }
.how__hint { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; top: calc(50% + var(--ph) * var(--fit, 1) / 2 - 15px); z-index: 2; display: none; box-shadow: 0 6px 18px -8px rgb(51 42 34 / 0.35), 0 0 0 1px rgb(63 82 48 / 0.12);
  padding: 7px 14px; border-radius: 999px; background: var(--sage-soft); color: var(--green-deep); font: 800 12px/1 var(--text); letter-spacing: 0.04em;
  transition: opacity 300ms ease; pointer-events: none; }
.js:not(.static) .how__hint { display: block; }
.how.is-turned .how__hint { opacity: 0; }
.how__steps { position: relative; list-style: none; margin: 0 auto; padding: 0; width: min(100%, 560px); min-height: 7.5em; text-align: center; }
.how__steps li { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.how__steps li.on { opacity: 1; transform: none; }
.how__steps b { font: 600 12px/1 var(--mono); letter-spacing: 0.16em; color: var(--green); }
.how__steps h3 { margin: 8px 0 6px; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; }
.how__steps p { margin: 0; color: var(--muted); }
/* without the scroll scene (reduced motion, no script): every step reads as a list under the front phone */
.static .how__steps { min-height: 0; display: grid; gap: 22px; text-align: left; width: min(100%, 720px); }
.static .how__steps li { position: static; opacity: 1; transform: none; filter: none; }
.static .phone.is-off .scr { opacity: 1; }

/* ---------- 3. the cafés: the app's deep green, word by word ---------- */
.cafes { background: var(--green-deep); color: var(--warmwhite); padding: clamp(110px, 18vh, 200px) 0; }
.cafes__statement { margin: 0; max-width: 21ch; font-family: var(--display); font-weight: 600; font-size: clamp(38px, 5.4vw, 80px); line-height: 1.04; letter-spacing: -0.015em; }
.cafes__statement .w { white-space: nowrap; color: rgb(251 244 236 / 0.26); transition: color 120ms linear; }
.cafes__statement .w.lit { color: var(--warmwhite); }
.cafes__owner { margin: 56px 0 0; max-width: 46ch; font-size: 18px; color: rgb(251 244 236 / 0.82); }

/* ---------- 4. the waitlist ---------- */
.join { padding: clamp(110px, 16vh, 180px) 0; background: var(--warmwhite); }
.join__grid { display: grid; gap: 56px; align-items: end; }
@media (min-width: 960px) { .join__grid { grid-template-columns: 1.15fr 0.85fr; gap: 80px; } }
.join h2 { margin: 0; font-size: clamp(60px, 8vw, 124px); line-height: 0.95; letter-spacing: -0.025em; }
.join h2 span { color: var(--green); }
.join__lead { margin: 0 0 28px; max-width: 38ch; font-size: 19px; color: var(--muted); }
#waitlist { display: grid; gap: 14px; }
#waitlist label[for="email"], #waitlist legend { font-size: 14px; font-weight: 800; color: var(--muted); padding: 0; }
.field input { width: 100%; padding: 12px 0 14px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 600 clamp(22px, 2vw, 28px)/1.2 var(--display); outline: 0; transition: border-color 200ms ease; }
.field input::placeholder { color: rgb(51 42 34 / 0.3); }
.field input:focus { border-bottom-color: var(--green); }
.field input[aria-invalid="true"] { border-bottom-color: var(--danger); }
.field__err { margin: -4px 0 0; font-size: 14px; color: var(--danger); }
fieldset { margin: 6px 0 4px; padding: 0; border: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pills label { position: relative; }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.pills span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; font-size: 15px; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out); }
.pills span:active { transform: scale(0.97); }
.pills input:checked + span { background: var(--sage); color: var(--green-deep); box-shadow: inset 0 0 0 1.5px var(--green); }
.pills input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
#waitlist .btn { justify-self: start; margin-top: 6px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { min-height: 1.4em; margin: 0; font-size: 15px; font-weight: 700; }
.status.err { color: var(--danger); }
.fine { margin: 0; font-size: 13px; color: var(--muted); }
.done h3 { margin: 0 0 6px; font-size: 34px; }
.done p { margin: 0; color: var(--muted); }
.done:not([hidden]) { animation: done-in 420ms var(--ease-out) both; }
@keyframes done-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* ---------- questions and footer ---------- */
.faq { padding: 0 0 clamp(100px, 14vh, 160px); }
.faq h2 { margin: 0 0 40px; font-size: clamp(34px, 3.6vw, 48px); }
.faq__list { margin: 0; display: grid; gap: 0 64px; }
@media (min-width: 900px) { .faq__list { grid-template-columns: 1fr 1fr; } }
.faq__list div { padding: 22px 0; border-top: 1px solid var(--line); }
.faq__list dt { font-family: var(--display); font-weight: 600; font-size: 19px; }
.faq__list dd { margin: 6px 0 0; color: var(--muted); }
.foot { padding: 40px 0 max(40px, env(safe-area-inset-bottom)); background: var(--sage-soft); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted); font-weight: 700; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .foot nav a:hover { color: var(--green-deep); } }
.foot p { margin: 0; width: 100%; font-size: 13px; color: var(--muted); }

/* ---------- phones: the tall film fills the screen; the words sit in its sky ---------- */
@media (max-width: 720px) {
  .intro__film { background-size: cover; background-position: 50% 0; }
  .intro__copy { top: 13vh; bottom: auto; display: block; right: var(--gut); max-width: none; padding-bottom: 0; }
  .intro h1 { font-size: clamp(48px, 14vw, 68px); }
  .intro h1 .line > span { white-space: normal; }
  .intro__sub { font-size: 16px; }
  .intro__after { bottom: 10vh; }
  .how { --ph: 400px; }
  .how__steps { min-height: 8.5em; }
  .shelf { min-height: 0; }
  .scr { padding: 40px 14px 14px; }
  .scr__ring, .scr__qr { width: 124px; height: 124px; }
  .scr__big { font-size: 38px; }
}

/* reduced motion (Emil: fewer and gentler, not zero): no pinning or travel, colour and opacity only */
@media (prefers-reduced-motion: reduce) {
  .js .intro h1 .line > span, .js .intro__sub > span { transform: none; }
  .intro__scroll svg { animation: none; }
  .how__steps li { transition: opacity 200ms ease; transform: none; filter: none; }
  .btn, .pills span { transition: background-color 200ms ease; }
  .btn:active, .pills span:active { transform: none; }
}

/* the waitlist's asterisk points at the Terms */
.join__lead .star { margin-left: 2px; color: var(--green); font-weight: 800; text-decoration: none; }