/* Type: the phone's own system font for the page (SF Pro on Apple devices, Roboto on Android),
   and Roboto Condensed 800 in capitals only inside the app fragments, for a class name: the app's
   brand moment (frontend/src/index.css). */
@font-face { font-family: 'Roboto Condensed'; font-weight: 800; font-display: swap;
  src: url(fonts/roboto-condensed-greek-800-normal.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF }
@font-face { font-family: 'Roboto Condensed'; font-weight: 800; font-display: swap;
  src: url(fonts/roboto-condensed-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

/* ---------- tokens: the app's dark default ---------- */
:root {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --ink: #ffffff;
  --muted: rgba(235,235,245,.64);
  --soft: rgba(235,235,245,.42);
  --accent: #30d158;
  --on-accent: #000000;
  --accent-tint: rgba(48,209,88,.16);
  --orange: #ff9f0a;
  --red: #ff6961;
  --sep: rgba(84,84,88,.6);
  --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Noto Sans', system-ui, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Noto Sans', system-ui, sans-serif;
  --font-class: 'Roboto Condensed', 'Arial Narrow', sans-serif-condensed, system-ui, sans-serif;
  /* five sizes */
  /* in rem, so the reader's text size (and Dynamic Type on iPhone) scales the page; 1rem = 17px by default */
  --fs-hero: clamp(2.6rem, 1rem + 5vw, 6.35rem);
  --fs-h2: clamp(1.88rem, .9rem + 3.4vw, 3.88rem);
  --fs-lead: clamp(1.18rem, .9rem + .55vw, 1.47rem);
  --fs-body: 1rem;
  --fs-small: .8235rem;
  --margin: clamp(16px, 2.4vw, 32px);
  --gap: clamp(16px, 1.6vw, 24px);
  /* spacing: one rhythm for the whole page, from loose to tight */
  --sec: clamp(56px, 6.6vw, 96px);     /* above and below a plain section; two meet as one gap */
  --band: clamp(72px, 8.4vw, 120px);   /* inside a grey band, a little more so its edge reads as the divider */
  --head: clamp(32px, 3.4vw, 48px);    /* a heading to the content it introduces */
  --stack: clamp(24px, 2.6vw, 36px);   /* parts that stack inside one group */
  --hairline: .5px solid var(--sep);   /* the only drawn divider */
  /* a card, a field on the card, its hover: on black these are the three greys, inside a grey band each moves one step up */
  --panel: var(--surface); --panel-2: var(--surface-2); --panel-3: var(--surface-3);
  --r-panel: clamp(20px, 2vw, 30px);
  --r-card: 14px;
  --r-device: 44px; /* the phone's screen; its bezel adds its padding, so the corners stay concentric */
  /* motion: the iOS sheet curve for state changes, a light spring for things that land */
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring: linear(0, .013 .6%, .05 1.2%, .2 2.6%, .43 4.4%, .7 6.7%, .89 8.9%, 1.03 11.4%, 1.1 13.9%, 1.12 16.3%, 1.1 19.3%, 1.04 24.6%, 1 29.6%, .99 36.2%, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; background: var(--bg) }
/* iPhone and iPad: the body size follows the reader's Dynamic Type setting (17px at the default) */
@supports (-webkit-touch-callout: none) { html { font: -apple-system-body } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/1.5 var(--font-text); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; padding: 0 }
ul, ol { list-style: none }
a { color: inherit }
button, input, select { font: inherit; color: inherit }
::selection { background: rgba(48,209,88,.35); color: var(--ink) }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px }
.wrap { padding-inline: var(--margin) }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap) }
.num { font-variant-numeric: tabular-nums }
.vh, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap } /* taste-skill-ignore: visually hidden, not a rule */
h1, h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance }
h1 { font-size: var(--fs-hero) }
h2 { font-size: var(--fs-h2); line-height: 1.04 }
h3, h4 { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.015em; line-height: 1.35 }
.lead { font-size: var(--fs-lead); line-height: 1.38; letter-spacing: -.02em; text-wrap: pretty }
.note { color: var(--muted) }

/* one button shape: the iPhone's filled capsule; pressed on pointer-down */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--fs-body); letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)) }
.btn:active { transform: scale(.96); transition-duration: 80ms }
.btn[disabled] { opacity: .55; cursor: default }
.link {
  color: var(--ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .3em; min-height: 44px;
  transition: color 140ms var(--ease);
}
.link::after { content: '›'; font-size: 1.25em; line-height: 1; transform: translateY(-.04em); transition: transform 200ms var(--ease) }
.link:hover { color: var(--accent) }
.link:hover::after { transform: translate(3px, -.04em) }

/* ---------- navigation: wordmark, three links, one action ---------- */
.nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 10px var(--margin);
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -.5px 0 transparent; transition: box-shadow 200ms var(--ease);
}
.nav.under { box-shadow: inset 0 -.5px 0 var(--sep) }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.06rem; text-decoration: none; letter-spacing: -.025em }
.wordmark img { width: 30px; height: 30px; border-radius: 8px }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 34px); font-size: var(--fs-small) }
.nav-links a:not(.btn) { text-decoration: none; color: var(--muted); transition: color 140ms var(--ease) }
.nav-links a:not(.btn):hover { color: var(--ink) }
.lang {
  border: 0; background: var(--surface-2); color: var(--ink); border-radius: 999px;
  min-height: 36px; min-width: 44px; padding: 0 14px; font-size: var(--fs-small); font-weight: 600; cursor: pointer;
  transition: transform 140ms var(--ease), background-color 140ms var(--ease);
}
.lang:hover { background: var(--surface-3) }
.lang:active { transform: scale(.94) }
.nav .btn { min-height: 38px; padding: 0 18px; font-size: var(--fs-small) }
.nav .cta { transition: opacity 220ms var(--ease), transform 220ms var(--ease), background-color 160ms var(--ease), visibility 0s }
.js .nav:not(.show-cta) .cta { opacity: 0; transform: scale(.92); visibility: hidden; transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms }
.menu-btn {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 140ms var(--ease)
}
.menu-btn:active { background: var(--surface-2) }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.menu {
  position: absolute; top: calc(100% - 4px); right: var(--margin); width: min(260px, calc(100vw - 2 * var(--margin)));
  display: none; padding: 6px; border-radius: 22px; /* 16px items + 6px padding */
  background: color-mix(in srgb, var(--surface-2) 94%, transparent); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 16px 48px rgba(0,0,0,.5); transform-origin: calc(100% - 66px) 0;
  opacity: 0; transform: scale(.94); visibility: hidden;
  transition: opacity 180ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms
}
.menu.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s }
.menu a, .menu button {
  display: flex; align-items: center; min-height: 48px; padding: 0 16px; border: 0; border-radius: 16px; background: none;
  color: var(--ink); font-size: var(--fs-body); text-decoration: none; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent
}
.menu a:active, .menu button:active { background: var(--surface-3) }
.menu hr { border: 0; height: .5px; margin: 4px 16px; background: var(--sep) }
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none }
  .menu { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none }
  .notif { background: var(--surface-3); -webkit-backdrop-filter: none; backdrop-filter: none }
}
/* small targets keep their look but take a 44px tap */
.nav .btn, .lang { position: relative }
.nav .btn::before, .lang::before { content: ''; position: absolute; inset: -4px 0 }

/* ---------- the app, as fragments (data-ui): the member's and the owner's screens ---------- */
.bezel {
  /* the frame keeps its 412px size; the bezel is 15% thinner and both curves come from one radius, so they stay concentric */
  --pad: 9.5px; width: min(412px, 100%); padding: var(--pad); border-radius: calc(var(--r-device) + var(--pad));
  background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.45)
}
/* continuous curvature where the browser draws it: a squircle corner reads smaller, so the radius grows to keep the silhouette */
@supports (corner-shape: squircle) {
  .bezel, .device { corner-shape: squircle }
  :root { --r-device: 58px }
}
.device {
  width: 100%; min-height: 600px; /* all three phones share one screen size; the tallest content is 591px */
  background: var(--bg); border-radius: var(--r-device); padding: 22px 16px 18px; color: var(--ink);
  font-size: 15px; line-height: 1.35; letter-spacing: -.01em; text-align: start;
}
.app-studio { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: -.005em; padding: 0 6px }
.app-ttl { font: 700 32px/1.1 var(--font-head); letter-spacing: -.03em; padding: 2px 6px 14px }
.list { background: var(--surface); border-radius: var(--r-card); overflow: hidden }
.row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; position: relative }
.row + .row::before { content: ''; position: absolute; top: 0; right: 0; left: 16px; height: .5px; background: var(--sep) }
.row .tx { flex: 1; min-width: 0; display: grid; gap: 1px }
.row .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.row .mt { color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.row .val { flex: none; color: var(--muted); font-variant-numeric: tabular-nums }
.row .val.strong { color: var(--ink); font-weight: 600 }
.pill { flex: none; font-size: 13px; letter-spacing: -.005em; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted) }
.pill.low { color: var(--orange) }
.pill.owe { color: var(--red) }
.pill.ok { color: var(--accent) }
.sec-ttl { font-size: 13px; letter-spacing: -.005em; color: var(--muted); padding: 18px 6px 7px }
.cls + .list { margin-top: 12px }
.tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent) }
.tick svg { width: 14px; height: 14px; stroke: #000; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round }

/* today's class */
.cls { background: var(--surface); border-radius: 18px; padding: 16px 16px 14px; display: grid; gap: 6px }
.cls .top { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font-size: 14px }
.cls .count { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; overflow: hidden }
.cls .name { font: 800 34px/1 var(--font-class); text-transform: uppercase; letter-spacing: -.01em }
.cls .meta { color: var(--muted); font-size: 14px }
.seats { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 8px }
.seats i { aspect-ratio: 1; border-radius: 50%; background: var(--surface-3); transition: background-color 260ms var(--ease) }
.seats i.on { background: var(--ink) }
.seats i.me { background: var(--accent) }
.seats i.pop { animation: pop 520ms var(--spring) }
@keyframes pop { 0% { transform: scale(.4) } 100% { transform: scale(1) } }

/* the booking: one place, two states, crossfaded in the same spot */
.bookbox { display: grid; margin: 12px 0 }
.bookbox > * { grid-area: 1 / 1; transition: opacity 260ms var(--ease), transform 420ms var(--ease) }
.book-btn {
  align-self: stretch; width: 100%; min-height: 62px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #000; font-weight: 600; font-size: 17px; -webkit-tap-highlight-color: transparent;
}
.book-btn:active { transform: scale(.96); transition-duration: 80ms }
/* if nobody has tried it, the button breathes twice to say it works; it never books by itself */
.book-btn.hint { animation: nudge 1400ms var(--ease) 2 }
@keyframes nudge { 0%, 60%, 100% { transform: none } 30% { transform: scale(1.035) } }
.done { display: flex; gap: 12px; align-items: center; min-height: 62px; background: var(--accent-tint); border-radius: 18px; padding: 8px 6px 8px 14px; opacity: 0; transform: scale(.94); pointer-events: none }
.done .tick path { stroke-dasharray: 20; stroke-dashoffset: 20 }
.done .tx { flex: 1; display: grid; gap: 2px }
.done b { font-weight: 600 }
.done span { color: var(--muted); font-size: 14px }
.done b { font-size: 15px }
.done span { font-size: 13px }
.undo { flex: none; border: 0; background: none; padding: 0 12px; color: var(--accent); font-weight: 600; font-size: 15px; cursor: pointer; min-height: 44px; border-radius: 999px }
.undo:active { opacity: .6 }
.booked .book-btn { opacity: 0; transform: scale(1.04); pointer-events: none }
.booked .done { opacity: 1; transform: none; pointer-events: auto }
.booked .done .tick path { stroke-dashoffset: 0; transition: stroke-dashoffset 360ms var(--ease) 140ms }
.roll { display: inline-block }
.roll.in { animation: roll 360ms var(--ease) }
@keyframes roll { from { transform: translateY(55%); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- hero: one promise, one product moment ---------- */
.hero { padding-block: clamp(12px, 3vh, 40px) 0 }
.hero-in { align-items: stretch; min-height: min(calc(100svh - 90px), 900px) }
.hero-copy { grid-column: 1 / 8; display: flex; flex-direction: column; justify-content: center; padding-block: 40px }
.hero-copy .lead { margin-top: 32px; max-width: 26em }
.hero-act { display: flex; align-items: center; gap: 24px; margin-top: 36px; flex-wrap: wrap }
/* side-by-side sections: the text block is centred in its columns just as the phone is in its own */
.hero-copy, .brief .say, .tax.focus h2 { justify-self: center; width: fit-content }
.brief .say h2 { max-width: 10em }
.tax.focus h2 { max-width: 8em } /* its three lines are narrower; a tighter box keeps it centred */
.stage { grid-column: 8 / -1; display: grid; place-items: center; padding-block: 24px }

/* ---------- benefit one: myDATA ---------- */
.tax h2 { grid-column: 1 / 11 }
.tax .say { grid-column: 1 / 6; margin-top: var(--head) }
.tax .say h3 { margin-top: var(--stack) }
.tax .say h3 + p { margin-top: 4px; color: var(--muted) }
.tax .proof { grid-column: 7 / -1; margin-top: var(--head); display: grid; gap: var(--gap) }
/* heading and receipt only: laid out like the morning brief, the receipt where its phone sits and as wide */
.tax.focus .proof { grid-column: 1 / 6; grid-row: 1; display: grid; place-items: center; margin-top: 0 }
.tax.focus h2 { grid-column: 7 / -1; grid-row: 1; align-self: center } /* mirror of the brief: phone centred in five columns, text in the other six */
.status { display: grid }
.status > * { grid-area: 1 / 1; display: flex; align-items: center; gap: 12px; transition: opacity 300ms var(--ease), transform 420ms var(--ease) }
.status .sending { color: var(--muted) }
.status .sent { opacity: 0; transform: translateY(8px) }
.sent-now .status .sending { opacity: 0; transform: translateY(-8px) }
.sent-now .status .sent { opacity: 1; transform: none }
/* the e-mail copy follows the AADE row: waiting, then sent */
.flip { display: grid; justify-items: end }
.flip > * { grid-area: 1 / 1; transition: opacity 300ms var(--ease) 120ms }
.flip .ok, .mailed .flip > :first-child { opacity: 0 }
.mailed .flip .ok { opacity: 1 }
/* the tick lands with a small spring and draws itself, the way iOS confirms a send */
.status .sent .tick path { stroke-dasharray: 20; stroke-dashoffset: 20 }
.sent-now .status .sent .tick { animation: pop 520ms var(--spring) }
.sent-now .status .sent .tick path { stroke-dashoffset: 0; transition: stroke-dashoffset 360ms var(--ease) 160ms }
.spin { width: 22px; height: 22px; flex: none; color: var(--ink); animation: spin 800ms steps(8) infinite }
.spin path { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round }
@keyframes spin { to { transform: rotate(1turn) } }

/* ---------- benefit two: the morning brief, on a field of its own ---------- */
.brief .phone-col { grid-column: 8 / -1; grid-row: 1; display: grid; place-items: center } /* phone right, as in the hero */
.brief .device { background: var(--bg) }
.brief .say { grid-column: 1 / 7; grid-row: 1; align-self: center }
.brief .say .lead { margin-top: 28px; max-width: 26em }
.brief .say .small { margin-top: 36px; font-size: var(--fs-small); color: var(--muted) }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px }
.tile { background: var(--surface); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px }
.tile b { font: 700 24px/1.1 var(--font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.tile span { color: var(--muted); font-size: 13px; letter-spacing: -.005em }
.tile.soon b { color: var(--orange) }
.tile.owe b { color: var(--red) }
.call { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint) }
.call svg { width: 16px; height: 16px; fill: var(--accent) }

/* ---------- benefit three: closures and freezes ---------- */
.seats.twelve { grid-template-columns: repeat(12, 1fr) }
.device .aside { color: var(--muted); font-size: 14px; padding: 12px 6px 0 }
.device .swap > * { white-space: normal }
.sw {
  position: relative; flex: none; width: 51px; height: 31px; border: 0; padding: 0; border-radius: 999px;
  background: var(--surface-3); cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; transition: background-color 240ms var(--ease);
}
.sw::before { content: ''; position: absolute; inset: -7px -4px }
.sw.hint::after { animation: peek 1200ms var(--ease) 2 }
@keyframes peek { 0%, 70%, 100% { transform: none } 35% { transform: translateX(7px) } }
.sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px;
  background: #fff; transition: transform 320ms var(--spring), width 140ms var(--ease);
}
.sw::before { content: ''; position: absolute; inset: -7px -4px }
.sw:active::after { width: 33px }
.sw[aria-checked="true"] { background: var(--accent) }
.sw[aria-checked="true"]::after { transform: translateX(20px) }
.sw[aria-checked="true"]:active::after { transform: translateX(14px) }
.passbig { font: 700 40px/1 var(--font-head); letter-spacing: -.03em; padding: 4px 2px 0; font-variant-numeric: tabular-nums }
.swap { display: grid }
.swap > * { grid-area: 1 / 1; transition: opacity 260ms var(--ease), transform 420ms var(--ease) }
.swap .after { opacity: 0; transform: translateY(10px) }
.swap.pills { justify-items: end }
:is(.closed, .got) .swap .before { opacity: 0; transform: translateY(-10px) }
:is(.closed, .got) .swap .after { opacity: 1; transform: none }
.swap .after.good { color: var(--accent) }
#memberBox .list .row:nth-child(1) .swap > * { transition-delay: 70ms }
#memberBox .list .row:nth-child(2) .swap > * { transition-delay: 140ms }

/* ---------- motion inside the phones ----------
   Each phone plays one short scene, once, when it is well in view: its parts arrive in reading order, numbers
   count to what the page says, and the moment that matters arrives as an iOS banner from the top of the screen. */
.device { position: relative; overflow: hidden }
.notif {
  position: absolute; z-index: 3; top: 8px; left: 8px; right: 8px; display: flex; gap: 10px; align-items: center;
  padding: 10px 14px 11px 10px; border-radius: 22px; pointer-events: none;
  background: rgba(44,44,46,.78); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), inset 0 .5px 0 rgba(255,255,255,.14);
  /* it leaves the way it came, up and out, with no bounce */
  opacity: 0; transform: translateY(-115%) scale(.94); filter: blur(4px);
  transition: transform 420ms var(--ease), opacity 260ms var(--ease) 100ms, filter 300ms var(--ease)
}
.notif.on { opacity: 1; transform: none; filter: none; transition: transform 640ms var(--spring), opacity 200ms var(--ease), filter 360ms var(--ease) }
.notif img { flex: none; width: 32px; height: 32px; border-radius: 8px }
.notif-tx { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13.5px; line-height: 1.3; letter-spacing: -.005em }
.notif-top { display: flex; justify-content: space-between; gap: 8px }
.notif-top b { font-weight: 600 }
.notif-top span { color: var(--muted); font-size: 12px }
/* a row that just changed glows once in the accent, then settles */
.row.flash { animation: flash 1600ms var(--ease) }
@keyframes flash { 0%, 25% { background-color: color-mix(in srgb, var(--accent) 16%, transparent) } 100% { background-color: transparent } }

/* ---------- the rest, as names ---------- */
.more h2 { grid-column: 1 / -1 }
.ico { width: 28px; height: 28px; margin-bottom: 8px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
/* home: the rest as names only, the detail lives on the features page */
.short { grid-column: 1 / -1; margin-top: var(--head); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px } /* every card as tall as the tallest */
.short li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 18px; background: var(--panel); border-radius: var(--r-card); font-weight: 600; letter-spacing: -.015em; line-height: 1.3 }
.short svg { flex: none; width: 18px; height: 18px; stroke: var(--accent); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round }
.more > .link, .pricing .link { grid-column: 1 / -1; justify-self: start; margin-top: var(--gap) }

/* ---------- features page: a promise, two demonstrations, then every detail ---------- */
.intro h1 { grid-column: 1 / 11 }
.intro .lead { grid-column: 1 / 8; margin-top: 28px; color: var(--muted) }
/* six chapters, one tap each */
.chapters { grid-column: 1 / -1; margin-top: var(--head); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px }
.chapters a { display: grid; align-content: start; gap: 4px; min-height: 84px; padding: 14px 16px; border-radius: var(--r-card); background: var(--panel); text-decoration: none; transition: background-color 160ms var(--ease), transform 160ms var(--ease) }
.chapters a:hover { background: var(--panel-2) }
.chapters a:active { transform: scale(.98); transition-duration: 80ms }
.chapters span { color: var(--accent); font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums }
.chapters b { font-weight: 600; letter-spacing: -.015em; line-height: 1.3 }
.chap { grid-column: 1 / -1; margin-bottom: 14px; color: var(--accent); font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums }
/* a short story: what it does on the left, one panel of the app on the right */
/* space-around, as on the home page: the text is centred in six columns, the phone in the other five,
   and the sides swap from one chapter to the next */
.story .say { grid-column: 1 / 7; grid-row: 1; align-self: center; justify-self: center; width: fit-content }
.story .say .lead { margin-top: 28px; max-width: 26em }
.story .say .note { margin-top: 20px; max-width: 30em }
.story .say h2 { max-width: 10em }
.story .vis { grid-column: 8 / -1; grid-row: 1; align-self: center }
.story .phone-col { grid-column: 8 / -1; grid-row: 1; display: grid; place-items: center }
.story.phone-left .say { grid-column: 7 / -1 }
.story.phone-left .phone-col { grid-column: 1 / 6 }
.story.tax .say { margin-top: 0 }
.story.tax .say > * { max-width: 26em } /* a measure, so the block can centre like the others */
/* the team: four short notes */
.team h2 { grid-column: 1 / 11 }
.crew { grid-column: 1 / -1; margin-top: var(--head); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.crew li { display: grid; align-content: start; gap: 6px; padding: 22px 20px; border-radius: var(--r-card); background: var(--panel) }
.crew p { color: var(--muted) }
.team > .note { grid-column: 1 / -1; margin-top: var(--gap); font-size: var(--fs-small) }

/* ---------- pricing: three plans, one table ---------- */
.pricing h2 { grid-column: 1 / 9 }
.pricing .lead { grid-column: 1 / 8; margin-top: 24px; color: var(--muted) }
.plans { grid-column: 1 / -1; margin-top: 12px; width: 100%; border-collapse: collapse; table-layout: fixed }
.plans col.feat { width: 34% }
.plans th, .plans td { padding: 18px 16px; text-align: center; vertical-align: middle }
.plans tbody th { text-align: start; font-weight: 400 }
/* the plans head the table: a small name, the price as the hero, one line, one button */
.plans thead th { padding: 46px 16px 32px; vertical-align: top }
.plans thead th:first-child { vertical-align: bottom; text-align: start; color: var(--muted); font-weight: 500 }
.plan-name { display: block; font: 600 var(--fs-lead)/1.2 var(--font-head); letter-spacing: -.02em }
.plan-price { display: block; margin-top: 10px; font: 700 clamp(2.2rem, 1.2rem + 2.4vw, 3.5rem)/1 var(--font-head); letter-spacing: -.04em; font-variant-numeric: tabular-nums }
.plan-price small { display: block; margin-top: 8px; font: 400 var(--fs-small)/1.3 var(--font-text); letter-spacing: 0; color: var(--muted) }
.plan-who { display: block; margin: 16px auto 0; max-width: 16em; color: var(--muted); font-weight: 400; font-size: .88rem; line-height: 1.4; min-height: 4.2em }
.plans thead .btn { margin-top: 20px; min-height: 44px; padding: 0 20px; font-size: .88rem; background: var(--surface-3); color: var(--ink) }
.plans thead .btn:hover { background: color-mix(in srgb, var(--surface-3) 80%, var(--ink)) }
.plans thead .rec .btn { background: var(--accent); color: var(--on-accent) }
.plans thead .rec .btn:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)) }
.plans thead th.rec { position: relative }
.plan-tag { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: .76rem; font-weight: 600; letter-spacing: -.005em }
/* rows sit on the section itself, split by hairlines; the recommended column is one lifted panel */
.plans tbody tr > * { border-top: .5px solid var(--sep) }
.plans tr > :nth-child(3) { background: var(--panel) }
.plans thead tr > :nth-child(3) { border-start-start-radius: 20px; border-start-end-radius: 20px }
.plans tbody tr:last-child > :nth-child(3) { border-end-start-radius: 20px; border-end-end-radius: 20px }
.plans td { font-variant-numeric: tabular-nums }
.yes svg { width: 18px; height: 18px; stroke: var(--accent); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px }
.no { color: var(--soft) }
.plans-cta { display: none }
.plan-notes { display: none }
.start { grid-column: 1 / -1; margin-top: var(--head); padding-top: var(--head); border-top: var(--hairline); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap) }
.start > h3 { grid-column: 1 / 4; font-size: var(--fs-lead); letter-spacing: -.02em; line-height: 1.25 }
.start ul { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap) }
.start li { display: grid; gap: 4px; align-content: start }
.start li p { color: var(--muted) }

/* ---------- questions ---------- */
.faq h2 { grid-column: 1 / -1; margin-bottom: var(--head) }
.qa { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-block: var(--stack); border-top: var(--hairline) }
.qa:last-child { padding-bottom: 0 } /* the list ends on its last answer, so the section closes on the same rhythm as the rest */
.qa h3 { grid-column: 1 / 6; font-size: var(--fs-lead); letter-spacing: -.02em; line-height: 1.25 }
.qa p { grid-column: 7 / -1; max-width: 36em; color: var(--muted) }

/* ---------- demo: three taps and a phone number ---------- */
.demo .say { grid-column: 1 / 6 }
.demo .say .lead { margin-top: 28px }
.ask { --pad: clamp(18px, 2vw, 28px); grid-column: 7 / -1; background: var(--panel); border-radius: calc(16px + var(--pad)); padding: var(--pad); display: grid; align-content: start; overflow: hidden }
.ask-top { display: flex; align-items: center; gap: 16px; min-height: 44px; margin-bottom: 24px }
.back { flex: none; border: 0; background: none; padding: 0 10px 0 0; min-height: 44px; color: var(--accent); font-weight: 600; cursor: pointer; transition: opacity 200ms var(--ease) }
.back[hidden] { display: inline-block; visibility: hidden }
.back:active { opacity: .6 }
.bar { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.bar i { height: 4px; border-radius: 2px; background: var(--panel-3); transition: background-color 360ms var(--ease) }
.bar i.on { background: var(--accent) }
.steps { display: grid; grid-template-columns: minmax(0, 1fr) }
.steps > * { grid-area: 1 / 1; transition: opacity 220ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms }
.step { opacity: 0; transform: translateX(48px); visibility: hidden }
.step.past { transform: translateX(-48px) }
.step.on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s }
.ask .q { font: 700 clamp(1.41rem, .7rem + 1.2vw, 2rem)/1.15 var(--font-head); letter-spacing: -.03em; margin-bottom: 22px; text-wrap: balance }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.opts.one { grid-template-columns: 1fr }
.opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 18px;
  border: 0; border-radius: 16px; background: var(--panel-2); color: var(--ink); font-size: var(--fs-body); font-weight: 500;
  text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease)
}
.opt:hover { background: var(--panel-3) }
.opt:active { transform: scale(.98); transition-duration: 80ms }
.opt .tick { width: 24px; height: 24px; opacity: 0; transform: scale(.5); transition: opacity 200ms var(--ease), transform 360ms var(--spring) }
.opt[aria-pressed="true"] { background: var(--accent-tint) }
.opt[aria-pressed="true"] .tick { opacity: 1; transform: none }
.picked { color: var(--muted); margin: -10px 0 18px }
.tel { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 20px; border-radius: 16px; background: var(--panel-2); transition: background-color 160ms var(--ease) }
.tel:focus-within { background: var(--panel-3) }
.tel.bad { background: color-mix(in srgb, var(--red) 18%, var(--panel-2)) }
.tel span { color: var(--muted); font-size: 1.29rem; font-variant-numeric: tabular-nums }
.tel input { flex: 1; min-width: 0; min-height: 66px; border: 0; background: none; outline: none; padding: 0; font-size: 1.41rem; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--ink) }
.tel input::placeholder { color: var(--soft); font-weight: 400 }
.form-help { margin: 12px 4px 0; font-size: var(--fs-small); color: var(--muted); min-height: 1.5em }
.form-help.bad { color: var(--red) }
.ask .send { margin-top: 18px; width: 100%; min-height: 56px }
.endcard { display: grid; gap: 12px; align-content: start; opacity: 0; transform: translateY(12px); visibility: hidden }
.endcard.on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s }
.endcard .tick { width: 44px; height: 44px; margin-bottom: 8px }
.endcard .tick svg { width: 22px; height: 22px }
.endcard .tick path { stroke-dasharray: 20; stroke-dashoffset: 20 }
.endcard.on .tick path { stroke-dashoffset: 0; transition: stroke-dashoffset 360ms var(--ease) 160ms }
.endcard.on .tick { animation: pop 520ms var(--spring) }
.endcard p { color: var(--muted); max-width: 30em }
.endcard .btn { justify-self: start; margin-top: 8px }

/* ---------- footer: the name returns ---------- */
.foot { padding: var(--band) var(--margin) 28px }
.foot .big { font: 700 clamp(64px, 15vw, 260px)/.85 var(--font-head); letter-spacing: -.055em; display: block; margin-left: -.04em }
.foot .row2 { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); flex-wrap: wrap; margin-top: var(--stack) }
.foot .row2 p { color: var(--muted); max-width: 30em }
.foot .meta { display: flex; justify-content: space-between; gap: 16px; margin-top: var(--head); padding-top: 20px; border-top: var(--hairline); font-size: var(--fs-small); color: var(--muted) }
.foot .meta a { color: var(--ink); text-decoration: none }

/* ---------- rhythm: every section pads itself, so two neighbours always meet at the same distance ---------- */
main > section:not(.hero) { padding-block: var(--sec) }
main > section.band { padding-block: var(--band); background: var(--surface); --panel: var(--surface-2); --panel-2: var(--surface-3); --panel-3: #48484a }

/* ---------- motion: parts of each section rise in turn, once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: calc(min(var(--i, 0), 4) * 50ms) }
  .js .rise.in { opacity: 1; transform: none }
  .js .stage .bezel { transform: translateY(24px) scale(.98); opacity: 0; transition: transform 700ms var(--ease-out) 120ms, opacity 450ms var(--ease) 120ms }
  .js .stage.in .bezel { transform: none; opacity: 1 }
  /* a phone's parts materialise in reading order: up a little, out of a soft blur */
  .js .scene .device > :is(.app-ttl, .cls, .sec-ttl, .list, .aside), .js .scene .tile {
    opacity: 0; transform: translateY(10px) scale(.985); filter: blur(3px);
    transition: opacity 420ms var(--ease), transform 640ms var(--ease-out), filter 420ms var(--ease);
    transition-delay: calc(120ms + var(--k, 0) * 60ms)
  }
  .js .scene.play .device > :is(.app-ttl, .cls, .sec-ttl, .list, .aside), .js .scene.play .tile { opacity: 1; transform: none; filter: none }
}
@media (prefers-reduced-motion: reduce) {
  .bookbox > *, .status > *, .swap > *, .steps > * { transition: opacity 200ms ease !important; transform: none !important }
  .seats i.pop, .roll.in, .endcard.on .tick, .book-btn.hint, .sw.hint::after, .sent-now .status .sent .tick, .row.flash { animation: none }
  .spin { animation-duration: 2.4s }
}

@media (prefers-contrast: more) {
  :root { --muted: rgba(235,235,245,.82); --soft: rgba(235,235,245,.66); --sep: rgba(142,142,147,.9) }
}
@media print { .js .rise, .js .stage .bezel, .js .scene .device > :not(.notif), .js .scene .tile { opacity: 1 !important; transform: none !important } .nav { position: static } }

/* ---------- desktop: every text-and-phone row is a true space-around ----------
   The two blocks sit in one flex row with equal space each side of each block, so the outer gaps are
   half the middle gap whatever the widths. The phone side alternates through order alone. */
@media (min-width: 901px) {
  .hero-in, .tax.focus, .brief > .wrap, .story > .wrap { display: flex; justify-content: space-around; align-items: center }
  /* the phone keeps its 412px; the text gives way on narrower screens but always leaves room to breathe */
  .stage, .tax.focus .proof, .brief .phone-col, .story .phone-col { flex: none; width: 412px; margin: 0 }
  .hero-copy, .tax.focus h2, .brief .say, .story .say { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 412px - 96px); margin: 0 }
  .tax.focus h2 { max-width: min(8em, calc(100% - 412px - 96px)) }
  .tax.focus .proof, .story.phone-left .phone-col { order: -1 }
  .brief .phone-col { order: 1 }
}

/* ---------- desktop, short windows: the whole hero phone fits on the first screen ----------
   The phone scales as one piece (zoom keeps its layout and type in proportion) in steps by window height. */
@media (min-width: 901px) and (max-height: 790px) { .stage .bezel { zoom: .9 } }
@media (min-width: 901px) and (max-height: 724px) { .stage .bezel { zoom: .8 } }
@media (min-width: 901px) and (max-height: 662px) { .stage .bezel { zoom: .7 } }
@media (min-width: 901px) and (max-height: 600px) { .stage .bezel { zoom: .62 } }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .nav-links a.wide { display: none }
  .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .crew { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .start > h3 { grid-column: 1 / -1; margin-bottom: 24px }
  .start ul { grid-column: 1 / -1 }
}
@media (max-width: 900px) {
  .hero-copy, .stage { grid-column: 1 / -1 }
  .hero-copy, .brief .say, .tax.focus h2 { justify-self: stretch; width: auto; max-width: none }
  .hero-in { min-height: 0 }
  .hero { padding-bottom: var(--sec) } /* the hero no longer fills the screen, so it closes like any black section */
  .hero-copy { padding-block: 32px 48px }
  .tax h2, .pricing h2, .pricing .lead, .intro h1, .intro .lead, .team h2 { grid-column: 1 / -1 }
  .story .say, .story .vis, .story.phone-left .say, .story .phone-col, .story.phone-left .phone-col { grid-column: 1 / -1 }
  .story .say { justify-self: stretch; width: auto }
  .story .say h2 { max-width: none }
  .story .phone-col { grid-row: 2; margin-top: var(--head) }
  .story .vis { grid-row: 2; margin-top: var(--head) }
  .short { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .tax .say, .tax .proof { grid-column: 1 / -1 }
  .tax .proof { margin-top: var(--stack) }
  /* stacked: the heading leads, the phone follows */
  .tax.focus h2 { grid-column: 1 / -1; grid-row: 1 }
  .tax.focus .proof { grid-column: 1 / -1; grid-row: 2; margin-top: var(--head) }
  .brief .say { grid-column: 1 / -1; grid-row: 1 }
  .brief .phone-col { grid-column: 1 / -1; grid-row: 2; margin-top: var(--head) }
  .qa h3, .qa p { grid-column: 1 / -1 }
  .qa p { margin-top: 10px }
  .demo .say, .ask { grid-column: 1 / -1 }
  .ask { margin-top: var(--head) }
}

/* ---------- phone: its own composition ---------- */
@media (max-width: 640px) {
  .nav-links a:not(.btn), .lang { display: none }
  .nav-links { gap: 6px }
  .menu-btn { display: grid }
  .menu { display: grid }
  :root { --r-device: 36px }
  @supports (corner-shape: squircle) { :root { --r-device: 48px } }
  h1 { font-size: calc(1rem + 6.7vw); letter-spacing: -.04em }
  h2 { font-size: calc(.9rem + 3.6vw); letter-spacing: -.03em }
  .hero-copy .lead { margin-top: 22px }
  .hero-act { margin-top: 28px; gap: 16px }
  .stage { padding-block: 8px 0 }
  /* phone hero: one tighter composition. Less air under the bar, the demo phone sits higher, its frame
     steps back so the booking screen leads, and "see pricing" is quieter beside the green button */
  .hero-copy { padding-block: 12px 32px }
  .stage .bezel { background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.45) }
  .hero-act .link { color: var(--muted) }
  .hero-act .link:hover, .hero-act .link:active { color: var(--ink) }
  main > section.intro { padding-top: 36px } /* the features page opens as close under the bar as the home hero */
  .bezel { --pad: 7px }
  .device { padding: 18px 12px 14px }
  .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .chapters a { min-height: 72px; padding: 12px 14px }
  .crew { grid-template-columns: 1fr }
  .short li { min-height: 58px; padding: 12px 14px; font-size: .94rem }
  /* the table regroups: plans across the top, then each feature on its own line with its three answers below */
  .plans, .plans thead, .plans tbody { display: block }
  .plans tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .plans thead th:first-child { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%) }
  .plans tbody th { grid-column: 1 / -1; padding: 16px 2px 2px; text-align: start; color: var(--muted); font-size: .8235rem }
  .plans tbody td { padding: 6px 4px 14px; font-size: .94rem }
  .plans tbody tr > * { border-top: 0 }
  .plans tbody tr + tr { border-top: .5px solid var(--sep) }
  .plans tbody tr > :nth-child(3) { background: none }
  .plans thead th { padding: 36px 4px 18px }
  .plans thead tr > :nth-child(3) { border-radius: 14px }
  .plan-name { font-size: .94rem }
  .plan-tag { top: 10px; padding: 2px 7px; font-size: .66rem }
  .plan-price { font-size: 1.5rem; margin-top: 6px }
  .plan-price small { margin-top: 4px; font-size: .72rem }
  .plan-notes { grid-column: 1 / -1; display: grid; gap: 14px; margin-top: 28px }
  .plan-notes li { display: grid; gap: 2px }
  .plan-notes span { color: var(--muted) }
  .plan-who { display: none }
  .plans thead .btn { display: none }
  .plans-cta { display: flex; grid-column: 1 / -1; margin-top: 28px }
  .start ul { grid-template-columns: 1fr; gap: 20px }
  .opts { grid-template-columns: 1fr }
  .opt { min-height: 56px }
  .foot .meta { flex-direction: column; gap: 8px }
}