/* gowane.com. Colour comes only from the theme variables the Worker emits from
   src/ui/tokens.ts (src/site/theme.ts); the one fixed colour is the QR code's
   white ground. Logical properties only. No textures, patterns or art: only
   photographs. */

@font-face {
  font-family: 'Plex Arabic';
  src: url('/assets/fonts/plex-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('/assets/fonts/plex-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('/assets/fonts/plex-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('/assets/fonts/plex-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'House Display';
  src: url('/assets/fonts/house-display.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'House Text';
  src: url('/assets/fonts/house-text.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'House Numeral';
  src: url('/assets/fonts/house-numeral.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font: 'Plex Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'House Display', 'Iowan Old Style', Georgia, serif;
  --font-text: 'House Text', 'Iowan Old Style', Georgia, serif;
  --font-numeral: 'House Numeral', 'Iowan Old Style', Georgia, serif;
  --tracking-display: -0.02em;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--shadow-color) 10%, transparent);
  --shadow-float: 0 30px 60px -28px color-mix(in srgb, var(--shadow-color) 45%, transparent);
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  inset-block-start: -80px;
  inset-inline-start: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--text);
  color: var(--background);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  inset-block-start: 16px;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 719px) {
  .wrap {
    padding-inline: 16px;
  }
}

/* Type */

.display-2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.h2 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
}

.lede {
  max-width: 34em;
  color: var(--text-muted);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  text-wrap: pretty;
}

.eyebrow {
  display: block;
  margin-block-end: 12px;
  color: var(--primary-text);
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding-inline: 20px;
  border: 0;
  border-radius: 12px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.7;
  cursor: progress;
}

.btn-lg {
  height: 48px;
}

.btn-sm {
  height: 40px;
  padding-inline: 16px;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--primary-pressed);
}

.btn-secondary {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--background);
}

.btn-text {
  padding-inline: 8px;
  background: transparent;
  color: var(--primary-text);
}

.btn-text:hover {
  background: var(--primary-soft);
}

/* Chips and cards */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding-inline: 13px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.chip-selected {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.card {
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.btn .icon {
  width: 18px;
  height: 18px;
}

/* Header */

.site-header {
  padding-block: 21px;
}

.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 64px;
}

.wordmark {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  color: var(--primary);
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
}

.wordmark .logo {
  display: block;
}

.nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-link,
.nav-sep {
  color: var(--text);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-sep {
  color: var(--text-muted);
  font-weight: 400;
}

.nav-link:hover {
  color: var(--primary);
}

.menu {
  display: none;
  position: relative;
}

.menu-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  list-style: none;
  cursor: pointer;
}

.menu-button::-webkit-details-marker {
  display: none;
}

.menu-button .icon {
  width: 24px;
  height: 24px;
}

.menu-panel {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-start: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--background);
  box-shadow: var(--shadow-float);
}

.menu-panel .nav-link {
  padding: 14px 12px;
  font-size: 12px;
}

@media (max-width: 899px) {
  .nav {
    display: none;
  }

  .menu {
    display: block;
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
  }

  .wordmark {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
  }
}

/* Home: the hero */

.hero {
  padding-block: 0 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 40px;
}

.hero-copy {
  justify-self: start;
  width: 100%;
  max-width: 520px;
  text-align: start;
}

.hero-title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 35px;
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.hero .hero-title {
  margin-block-end: 18px;
  font-size: clamp(44px, 7vw, 66px);
  line-height: 1.02;
}

.hero-line {
  max-width: 28em;
  margin: 0 0 28px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
}

.hero-action {
  display: flex;
  justify-content: flex-start;
}

.btn-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: 20px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

.btn-store:hover {
  background: var(--primary-pressed);
}

.hero-phone {
  justify-self: end;
}

/* A drawn app screen in a drawn phone: dark body in both themes (--scrim is
   ink on light and black on dark), the screen's corners following the
   body's. The screen itself is the real app's 402x874pt, sized in app points
   (--pt, below) so it scales with whatever --w the phone is. */
.device {
  --w: 384;
  width: calc(var(--w) * 1px);
  margin: 0;
  padding: calc(var(--w) * 0.032px);
  border-radius: calc(var(--w) * 0.14px);
  background: var(--scrim);
  box-shadow: 0 0 0 1px var(--border);
}

.screen {
  /* One app point: the phone's inner width (the body's 3.2% padding comes off
     each side) divided by the real app's 402pt screen width. Every drawn size
     is calc(N * var(--pt)), so each phone width shows the same proportions. */
  --k: calc(var(--w) * 0.936 / 402);
  --pt: calc(var(--k) * 1px);
  overflow: hidden;
  border-radius: calc(var(--w) * 0.11px);
  background: var(--background);
}

.app {
  --shadow-app-card: 0 calc(1 * var(--pt)) calc(2 * var(--pt))
    color-mix(in srgb, var(--shadow-color) 10%, transparent);
  --shadow-app-float: 0 calc(6 * var(--pt)) calc(16 * var(--pt))
    color-mix(in srgb, var(--shadow-color) 12%, transparent);
  position: relative;
  width: calc(402 * var(--pt));
  height: calc(874 * var(--pt));
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  line-height: 1.3;
}

@media (max-width: 899px) {
  .hero {
    padding-block: 24px 64px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .hero-phone {
    justify-self: center;
  }

  .hero .device {
    --w: 330;
  }
}

@media (max-width: 370px) {
  .hero .device {
    --w: 300;
  }
}

@media (max-width: 340px) {
  .hero .device {
    --w: 270;
  }
}

/* Home: the seven features as a ranked list. A giant hanging numeral in House
   Numeral, then the words, then the phone. On wide screens the phones
   alternate sides (odd at the end, even at the start); below 900px the
   numeral and words share a row and the phone sits underneath. The numeral is
   italic and leans past its advance width, so it carries padding on its end
   side. */

.features-ranked {
  padding-block-end: 72px;
}

.ranked {
  display: flex;
  flex-direction: column;
  gap: 72px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranked-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'num copy'
    'phone phone';
  align-items: center;
  gap: 24px 16px;
}

.ranked-num {
  --num-size: clamp(88px, 12vw, 140px);
  grid-area: num;
  box-sizing: border-box;
  width: 0.9em;
  padding-inline-end: 0.12em;
  color: var(--numeral);
  font-family: var(--font-numeral);
  font-style: italic;
  font-weight: 900;
  font-size: var(--num-size);
  font-variant-numeric: tabular-nums;
  line-height: 0.8;
  text-align: end;
}

.ranked-copy {
  grid-area: copy;
  max-width: 30em;
}

.ranked-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.ranked-line {
  margin: 0;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

.ranked-phone {
  grid-area: phone;
  justify-self: center;
}

.ranked-phone .device {
  --w: 280;
}

@media (min-width: 900px) {
  .features-ranked {
    padding-block-end: 120px;
  }

  .ranked {
    gap: 96px;
  }

  .ranked-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'num copy phone';
    gap: 32px;
  }

  .ranked-item:nth-child(even) {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: 'phone num copy';
  }

  .ranked-phone {
    justify-self: end;
  }

  .ranked-item:nth-child(even) .ranked-phone {
    justify-self: start;
  }
}

@media (max-width: 899px) {
  /* The numeral hangs from the top of the words, not their middle: a tall
     copy column would otherwise push it down beside the line. */
  .ranked-item {
    align-items: start;
  }

  .ranked-title {
    font-size: 28px;
  }
}

@media (max-width: 360px) {
  .ranked-phone .device {
    --w: 250;
  }
}

/* Home: the closing section. Centred: one House Display line, then the
   waitlist form or, once the store link is live, the App Store badge. */

.closing {
  padding-block-end: 118px;
}

.closing-inner {
  max-width: 560px;
  text-align: center;
}

.closing-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.closing .form-promise,
.download .form-promise {
  text-align: center;
}

.closing-action {
  display: flex;
  justify-content: center;
  margin-block-start: 32px;
}

.closing .waitlist {
  max-width: 460px;
}

@media (max-width: 519px) {
  .closing-line {
    font-size: 28px;
  }
}

/* Home: the numbers strip sits between the hero and the ranked features. */

.numbers-home + .features-ranked {
  padding-block-start: 96px;
}

@media (max-width: 899px) {
  .numbers-home + .features-ranked {
    padding-block-start: 64px;
  }
}

/* Home: the hint under the live duel's phone (shown by site.js). */

.duel-hint {
  margin-block-start: 14px;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}

/* Invisible but keeping its space: before site.js and while a result shows. */
.duel-hint.is-off {
  visibility: hidden;
}

/* Home: the rule, centred: nobody can pay to rank. */

.home-rule {
  padding-block: 0 120px;
}

.home-rule-inner {
  text-align: center;
}

.home-rule-title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.home-rule-line {
  max-width: 36rem;
  margin-inline: auto;
  color: var(--text-muted);
  font-size: 19px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Home: the oxblood band (the app's header-band gradient) that sends restaurant owners to /restaurants. */

.home-biz {
  padding-block-end: 120px;
}

.home-biz-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 48px;
  border-radius: 28px;
  background: linear-gradient(var(--band), var(--band-bottom));
  color: var(--on-primary);
}

.home-biz-copy {
  flex: 1 1 22rem;
  max-width: 38rem;
}

.home-biz-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
}

.home-biz-line {
  color: color-mix(in srgb, var(--on-primary) 85%, transparent);
  font-size: 17px;
  line-height: 1.55;
}

.home-biz-cta {
  background: var(--on-primary);
  color: var(--primary);
}

.home-biz-cta:hover {
  background: var(--primary-tint);
}

.home-biz-cta:focus-visible {
  outline-color: var(--on-primary);
}

@media (max-width: 899px) {
  .home-rule,
  .home-biz {
    padding-block-end: 72px;
  }
}

@media (max-width: 719px) {
  .home-biz-card {
    padding: 28px;
  }
}

@media (max-width: 519px) {
  .home-biz-title {
    font-size: 34px;
  }
}

/* Waitlist */

.waitlist {
  width: 100%;
  max-width: 540px;
  text-align: start;
}

.field-row {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: var(--background);
  box-shadow: 0 0 0 1.5px var(--border);
  transition: box-shadow 0.15s ease;
}

.field-row:focus-within {
  box-shadow: 0 0 0 3px var(--primary);
}

.input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding-inline: 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  outline: none;
}

.input::placeholder {
  color: var(--text-muted);
}

.field-row .btn-lg {
  height: 48px;
}

.form-error {
  margin-block-start: 10px;
  color: var(--danger);
  font-weight: 600;
  font-size: 14px;
}

.form-error:empty {
  display: none;
}

.form-promise {
  margin-block-start: 10px;
  color: var(--text-muted);
  font-size: 14px;
}

.hp {
  position: absolute;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist-success {
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
  outline: none;
}

.success-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 4px;
  font-weight: 700;
  font-size: 20px;
}

.success-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--success);
  color: var(--on-primary);
}

.success-check .icon {
  width: 16px;
  height: 16px;
}

.success-body {
  color: var(--text-muted);
}

@media (max-width: 519px) {
  .field-row {
    flex-direction: column;
  }

  .field-row .btn {
    width: 100%;
  }
}

/* Footer */

.site-footer {
  padding-block: 72px 56px;
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--text);
}

.footer-social .icon {
  width: 16px;
  height: 16px;
}

/* Team */

.team {
  padding-block: 56px 118px;
}

.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}

.team-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-align: center;
}

.team-sub {
  margin-block-end: 28px;
  text-align: center;
}

.story-body p {
  margin-block-end: 20px;
  color: color-mix(in srgb, var(--text) 81%, transparent);
  font-size: 18px;
  line-height: 1.7;
}

.portrait {
  justify-self: end;
  width: 100%;
  max-width: 300px;
  margin: 0;
}

.portrait img {
  display: block;
  width: 100%;
}

.portrait-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-block-start: 14px;
}

.portrait-name {
  font-weight: 700;
}

.portrait-role {
  color: var(--text-muted);
}

.portrait-link {
  flex-basis: 100%;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.team-action {
  display: flex;
  justify-content: center;
  margin-block-start: 64px;
}

@media (max-width: 899px) {
  .team-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .story-body p {
    font-size: 17px;
  }

  .portrait {
    justify-self: center;
    max-width: 240px;
  }
}

/* Download */

.download {
  padding-block: clamp(40px, 7vw, 104px) clamp(80px, 11vw, 152px);
}

.download-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  text-align: center;
}

.download-wrap .lede {
  margin-block-end: 32px;
}

.store-badge {
  display: inline-block;
}

.store-badge img {
  width: auto;
  height: 60px;
}

.qr-block {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 460px;
  margin-block-start: 28px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.qr {
  flex: none;
  width: 120px;
  height: 120px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
}

.qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.qr-title {
  margin-block-end: 4px;
  font-weight: 700;
}

.qr-body {
  color: var(--text-muted);
  font-size: 15px;
}

/* Privacy and support */

.legal {
  padding-block: clamp(40px, 7vw, 96px) clamp(80px, 11vw, 152px);
}

.legal-wrap {
  max-width: 760px;
}

.legal-updated {
  margin-block-end: 28px;
  color: var(--text-muted);
  font-size: 15px;
}

.legal-lede {
  margin-block-end: 20px;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.6;
}

.legal-toc {
  margin-block: 32px 48px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.legal-toc ol {
  margin: 0;
  padding-inline-start: 22px;
  columns: 2;
  column-gap: 32px;
}

.legal-toc li {
  margin-block: 4px;
  break-inside: avoid;
}

.legal-toc a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.legal-toc a:hover {
  color: var(--primary);
}

.legal-section {
  padding-block: 24px;
  border-block-start: 1px solid var(--border);
}

.legal-section p,
.legal-section li {
  line-height: 1.75;
}

.legal-section p + p,
.legal-section ul + p {
  margin-block-start: 12px;
}

.legal-section ul {
  margin: 12px 0 0;
  padding-inline-start: 22px;
}

.legal-section li + li {
  margin-block-start: 8px;
}

.legal a[href^='mailto'] {
  color: var(--primary);
  font-weight: 600;
}

.hello {
  margin-block: 32px 0;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.hello p {
  margin-block-end: 8px;
  color: var(--text-muted);
}

.hello-email {
  font-weight: 600;
}

.faq-title {
  margin-block: 56px 20px;
}

.faq {
  border-block-start: 1px solid var(--border);
}

.faq-item {
  border-block-end: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  font-weight: 600;
  font-size: 18px;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  flex: none;
  color: var(--primary);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding-block-end: 20px;
  color: var(--text-muted);
  line-height: 1.7;
}

.legal-note {
  margin-block-start: 40px;
  color: var(--text-muted);
}

.legal-note a {
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 719px) {
  .legal-toc ol {
    columns: 1;
  }
}

/* App screens: drawn phone content, one screen at the real app's size
   (402x874pt), scaled by the .device/.screen/.app chain above: every size is
   calc(N * var(--pt)) with N the app's own point value, taken from
   src/ui/tokens.ts and src/ui/components/*.tsx. Every class is prefixed app-.
   Colour comes only from theme variables, except the drawn map's --map-*
   variables declared near the top of this file (the one other deliberate
   exception, next to the QR code's white). */

.app-status {
  position: relative;
  flex: none;
  height: calc(62 * var(--pt));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(42 * var(--pt)) calc(36 * var(--pt));
}

.app-status-time {
  font-size: calc(17 * var(--pt));
  font-weight: 600;
}

.app-status-island {
  position: absolute;
  inset-block-start: calc(14 * var(--pt));
  inset-inline: 0;
  margin-inline: auto;
  width: calc(126 * var(--pt));
  height: calc(37 * var(--pt));
  border-radius: calc(19 * var(--pt));
  background: var(--scrim);
}

.app-status-icons {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--pt));
}

.app-status-icons .icon {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
}

.app-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Type: House Display titles, the eyebrow above them (tokens.type.eyebrow). */
.app-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(28 * var(--pt));
  line-height: calc(32 * var(--pt));
  letter-spacing: calc(-0.56 * var(--pt));
}

.app-eyebrow {
  margin: 0;
  color: var(--primary-text);
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  font-weight: 600;
  letter-spacing: calc(1.3 * var(--pt));
  text-transform: uppercase;
}

/* SegmentedControl.tsx: a radius-12 track on `sunken`, 3pt padding; the selected
   segment is a floating radius-9 square. */
.app-segment {
  display: flex;
  align-items: stretch;
  padding: calc(3 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: var(--sunken);
}

.app-segment-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(34 * var(--pt));
  border-radius: calc(9 * var(--pt));
  color: var(--text-muted);
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
  white-space: nowrap;
}

.app-segment-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-app-card);
}

/* Chip.tsx: a soft square, 32pt high, radius 10, a 1.5pt outline; selected is solid
   sumac. The row scrolls off the end, so its last chip is a cut-off sliver. */
.app-chips {
  display: flex;
  align-items: center;
  flex: none;
  gap: calc(4 * var(--pt));
  padding-block: calc(4 * var(--pt));
  overflow: hidden;
}

.app-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  min-height: calc(32 * var(--pt));
  padding-inline: calc(13 * var(--pt));
  border: calc(1.5 * var(--pt)) solid var(--border);
  border-radius: calc(10 * var(--pt));
  background: var(--surface);
  color: var(--text);
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
  white-space: nowrap;
}

.app-chip-active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

/* MapSearchCapsule.tsx: a 44pt radius-12 field on `surface` with the float shadow. */
.app-search {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  height: calc(44 * var(--pt));
  padding-inline: calc(16 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-float);
}

.app-search .icon {
  width: calc(16 * var(--pt));
  height: calc(16 * var(--pt));
  color: var(--text-muted);
}

.app-search-placeholder {
  color: var(--text-muted);
  font-size: calc(15 * var(--pt));
  line-height: calc(20 * var(--pt));
}

/* Button.tsx: a soft square, radius 12; lg is 48pt high, md 40, sm 32; a 14pt
   semibold label, an optional 16pt glyph. Primary is sumac, secondary a white card
   with a 1.5pt outline, ghost the text button. `compact` tightens the padding. */
.app-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--pt));
  min-height: calc(48 * var(--pt));
  padding-inline: calc(16 * var(--pt));
  border-radius: calc(12 * var(--pt));
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 600;
  white-space: nowrap;
}

.app-btn .icon {
  width: calc(16 * var(--pt));
  height: calc(16 * var(--pt));
}

.app-btn-md {
  min-height: calc(40 * var(--pt));
}

.app-btn-sm {
  min-height: calc(32 * var(--pt));
  padding-inline: calc(12 * var(--pt));
}

.app-btn-compact {
  padding-inline: calc(10 * var(--pt));
}

.app-btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.app-btn-secondary {
  border: calc(1.5 * var(--pt)) solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.app-btn-ghost {
  color: var(--primary-text);
}

/* ScoreCoin.tsx: a filled rounded square in the tier's coin colour, the number in Plex
   semibold at 36% of the coin. On a sumac field the coin is white with a sumac
   number. */
.app-coin {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30%;
  background: var(--coin-loved);
  color: var(--on-coin-loved);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-coin-fine {
  background: var(--coin-fine);
  color: var(--on-coin-fine);
}

.app-coin-not {
  background: var(--coin-not);
  color: var(--on-coin-not);
}

.app-coin-field {
  background: var(--on-field);
  color: var(--field);
}

.app-coin-28 {
  width: calc(28 * var(--pt));
  height: calc(28 * var(--pt));
  font-size: calc(10 * var(--pt));
  line-height: calc(12 * var(--pt));
}

.app-coin-30 {
  width: calc(30 * var(--pt));
  height: calc(30 * var(--pt));
  font-size: calc(11 * var(--pt));
  line-height: calc(13 * var(--pt));
}

.app-coin-34 {
  width: calc(34 * var(--pt));
  height: calc(34 * var(--pt));
  font-size: calc(12 * var(--pt));
  line-height: calc(14 * var(--pt));
}

.app-coin-40 {
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  font-size: calc(14 * var(--pt));
  line-height: calc(16 * var(--pt));
}

/* ScoreCircle.tsx at 40pt (the place page's coins): the number is 16pt, not 36%. */
.app-coin-p40 {
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  font-size: calc(16 * var(--pt));
  line-height: calc(18 * var(--pt));
}

.app-coin-120 {
  width: calc(120 * var(--pt));
  height: calc(120 * var(--pt));
  font-size: calc(43 * var(--pt));
  line-height: calc(49 * var(--pt));
}

/* RankNumeral.tsx: House Numeral, italic, in `numeral`; each size carries the
   numeral lean (ceil(size * 0.16)) as end padding, cancelled by an equal
   negative margin, so the glyph sits where it would and its lean is drawn. */
.app-rank-num {
  display: block;
  color: var(--numeral);
  font-family: var(--font-numeral);
  font-style: italic;
  font-weight: 900;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: calc(var(--n) * var(--pt));
  line-height: calc(var(--lh) * var(--pt));
  padding-inline-end: calc(var(--lean) * var(--pt));
  margin-inline-end: calc(var(--lean) * -1 * var(--pt));
  white-space: nowrap;
}

.app-rank-50 {
  --n: 50;
  --lh: 53;
  --lean: 8;
}

.app-rank-38 {
  --n: 38;
  --lh: 40;
  --lean: 7;
}

.app-rank-26 {
  --n: 26;
  --lh: 27;
  --lean: 5;
}

.app-rank-21 {
  --n: 21;
  --lh: 22;
  --lean: 4;
}

.app-rank-60 {
  --n: 60;
  --lh: 63;
  --lean: 10;
}

.app-rank-34 {
  --n: 34;
  --lh: 36;
  --lean: 6;
}

/* RankedRow.tsx, PlaceCard.tsx and Podium.tsx share the card: a 16pt-radius
   `surface` card with the hairline lift, a House Text name (two lines, then an
   ellipsis) over a one-line Plex caption. */
.app-ranked-row {
  display: flex;
  align-items: center;
  margin-block-end: calc(8 * var(--pt));
}

.app-rank-gutter {
  flex: none;
  display: flex;
  justify-content: flex-end;
  width: calc(62 * var(--pt));
  margin-inline-end: calc(8 * var(--pt));
}

.app-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  padding-block: calc(10 * var(--pt));
  padding-inline: calc(16 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-card);
}

.app-card-text {
  flex: 1;
  min-width: 0;
}

.app-name {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: calc(16 * var(--pt));
  line-height: calc(19 * var(--pt));
}

.app-name-3 {
  -webkit-line-clamp: 3;
}

.app-sub {
  margin: calc(2 * var(--pt)) 0 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Podium.tsx: #1 on the sumac field (radius 22), #2 and #3 as white squares
   (radius 18) side by side. */
.app-podium-first {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  padding-block: calc(12 * var(--pt));
  padding-inline: calc(16 * var(--pt)) calc(14 * var(--pt));
  margin-block-end: calc(8 * var(--pt));
  border-radius: calc(22 * var(--pt));
  background: var(--field);
  color: var(--on-field);
}

.app-podium-first-num {
  flex: none;
  display: flex;
  justify-content: center;
  width: calc(36 * var(--pt));
}

.app-podium-first .app-rank-num {
  color: var(--on-field);
}

.app-podium-first-name {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--on-field);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(20 * var(--pt));
  line-height: calc(22 * var(--pt));
}

.app-podium-sub {
  margin: calc(3 * var(--pt)) 0 0;
  overflow: hidden;
  color: var(--on-field-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-podium-pair {
  display: flex;
  gap: calc(8 * var(--pt));
}

.app-podium-square {
  flex: 1;
  min-width: 0;
  padding-block: calc(11 * var(--pt)) calc(12 * var(--pt));
  padding-inline: calc(12 * var(--pt)) calc(11 * var(--pt));
  border-radius: calc(18 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-card);
}

.app-podium-square-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: calc(8 * var(--pt));
}

.app-podium-square .app-sub {
  margin-block-start: calc(3 * var(--pt));
}

/* TierPill.tsx: the one full pill (radius 999), tinted by tier. */
.app-tier-pill {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  margin-block-end: calc(6 * var(--pt));
  padding-block: calc(7 * var(--pt));
  padding-inline: calc(14 * var(--pt));
  border-radius: 999px;
  background: var(--tier-loved-tint);
}

/* With a leading avatar, 8pt clears the curve; without one it takes 14pt. */
.app-tier-pill-lead {
  padding-inline: calc(8 * var(--pt));
}

.app-tier-pill-fine {
  background: var(--tier-fine-tint);
}

.app-tier-pill-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: calc(16 * var(--pt));
  line-height: calc(19 * var(--pt));
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A place's food photo, in a sized, rounded wrapper. */
.app-photo-wrap {
  flex: none;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
}

.app-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avatar.tsx without a photo: the initial in Plex regular at 40% of the size, muted,
   on the `border` fill. Stacked avatars overlap with a ring of the screen's own
   background. */
.app-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-weight: 400;
}

.app-avatar-28 {
  width: calc(28 * var(--pt));
  height: calc(28 * var(--pt));
  font-size: calc(11.2 * var(--pt));
}

.app-avatar-32 {
  width: calc(32 * var(--pt));
  height: calc(32 * var(--pt));
  font-size: calc(12.8 * var(--pt));
}

.app-avatar-44 {
  width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
  font-size: calc(17.6 * var(--pt));
}

.app-avatar-md {
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  font-size: calc(16 * var(--pt));
}

.app-avatar-xl {
  width: calc(88 * var(--pt));
  height: calc(88 * var(--pt));
  font-size: calc(35.2 * var(--pt));
}

/* The tab bar (src/features/shell/TabsLayout.tsx): the platform's floating glass
   capsule with four tabs, the selected one filled and tinted sumac on a soft
   highlight, and beside it the separate round Log button. 290 + 8 + 62 pt, 22pt
   above the bottom edge. */
.app-tabbar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(22 * var(--pt));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--pt));
}

.app-tabbar-capsule {
  display: flex;
  align-items: center;
  width: calc(290 * var(--pt));
  height: calc(62 * var(--pt));
  padding: calc(4 * var(--pt));
  border-radius: 999px;
  background: color-mix(in srgb, var(--background) 72%, transparent);
  backdrop-filter: blur(calc(20 * var(--pt))) saturate(1.6);
  box-shadow: var(--shadow-app-float);
}

.app-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1 * var(--pt));
  height: calc(54 * var(--pt));
  border-radius: 999px;
  color: var(--text);
}

.app-tab .icon {
  width: calc(26 * var(--pt));
  height: calc(26 * var(--pt));
}

.app-tab-label {
  font-size: calc(11 * var(--pt));
  line-height: calc(13 * var(--pt));
  font-weight: 500;
}

.app-tab-active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--primary);
}

.app-tabbar-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(62 * var(--pt));
  height: calc(62 * var(--pt));
  border-radius: 50%;
  background: color-mix(in srgb, var(--background) 72%, transparent);
  backdrop-filter: blur(calc(20 * var(--pt))) saturate(1.6);
  box-shadow: var(--shadow-app-float);
}

.app-tabbar-add-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(26 * var(--pt));
  height: calc(26 * var(--pt));
  border-radius: 50%;
  background: var(--text);
  color: var(--background);
}

.app-tabbar-add-inner .icon {
  width: calc(14 * var(--pt));
  height: calc(14 * var(--pt));
}

.app-tabbar-add-inner.app-tab-active {
  background: var(--primary);
  color: var(--on-primary);
}

/* Screen: map (the Discover tab's hero). The map is a real Apple Maps
   capture of central Dubai, full bleed under the status bar as in the app; the
   controls, pins and card are drawn on top (DiscoverScreen.tsx's chrome:
   16pt gutter, 8pt gaps, 70pt down; DiscoverMap.tsx's card, 155pt up). */

.app-map .app-status {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 3;
}

.app-map-map {
  position: absolute;
  inset: 0;
}

.app-map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-map-pins {
  position: absolute;
  inset: 0;
}

/* MapPin.tsx: a place with a photo is a 36pt photo in a 2pt ring of its tier
   colour (loved is sumac, fine is amber); the selected pin scales to 1.3. A
   place that is not on the list is a 12pt dot. */
.app-map-pin {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--pt));
  height: calc(36 * var(--pt));
  border: calc(2 * var(--pt)) solid var(--primary);
  border-radius: 50%;
  background: var(--background);
  overflow: hidden;
  translate: -50% -50%;
}

.app-map-pin .app-photo {
  flex: none;
  width: calc(30 * var(--pt));
  height: calc(30 * var(--pt));
  border-radius: calc(12 * var(--pt));
}

.app-map-pin-fine {
  border-color: var(--tier-fine);
}

.app-map-pin-selected {
  z-index: 2;
  scale: 1.3;
}

.app-map-dot {
  position: absolute;
  width: calc(12 * var(--pt));
  height: calc(12 * var(--pt));
  border: calc(2 * var(--pt)) solid var(--background);
  border-radius: 50%;
  background: var(--text-muted);
  translate: -50% -50%;
}

.app-map-controls {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pt));
  padding: calc(70 * var(--pt)) calc(16 * var(--pt)) 0;
}

/* The map's chips sit on the map: the selected one is sumac, the rest white cards. */
.app-map-bottom {
  position: absolute;
  z-index: 2;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pt));
  padding: 0 calc(16 * var(--pt)) calc(155 * var(--pt));
}

.app-map-recenter {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
  border-radius: 50%;
  background: var(--background);
  box-shadow: var(--shadow-app-float);
}

.app-map-recenter .icon {
  width: calc(24 * var(--pt));
  height: calc(24 * var(--pt));
}

/* MapPlaceCard.tsx: a `background` card, 1pt border, radius 20, 16pt padding, 4pt
   gaps; the name is House Display 20, the rest Plex. */
.app-map-card {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pt));
  padding: calc(16 * var(--pt));
  border: 1px solid var(--border);
  border-radius: calc(20 * var(--pt));
  background: var(--background);
}

.app-map-card-name {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(20 * var(--pt));
  line-height: calc(24 * var(--pt));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-map-card-cuisine,
.app-map-card-social,
.app-map-card-friends {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-map-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(8 * var(--pt));
}

.app-map-card-rank {
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
}

/* ViewPill.tsx: a radius-12 pill in `text` with a `background` label, 99pt up. */
.app-map-list-btn {
  position: absolute;
  z-index: 2;
  inset-block-end: calc(99 * var(--pt));
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  width: fit-content;
  margin-inline: auto;
  padding: calc(8 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: var(--text);
  color: var(--background);
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
  box-shadow: var(--shadow-app-float);
}

.app-map-list-btn .icon {
  width: calc(16 * var(--pt));
  height: calc(16 * var(--pt));
}

/* Screen: duel. LogDuelStep.tsx: the eyebrow and the question in a paper frame
   (16pt gutter), DuelSplit.tsx filling the rest (radius 22: a `surface` half and
   a `field` half, an "or" chip in House Numeral on the seam), then the
   BottomBar (Skip and Close). */

.app-duel-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.app-duel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: calc(16 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-duel-eyebrow {
  margin-block-end: calc(4 * var(--pt));
}

.app-duel-title {
  text-align: center;
}

.app-duel-split {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: calc(22 * var(--pt));
  overflow: hidden;
}

/* Each half: the tag, the name (House Display 26, three lines) and the second line;
   18pt from its outer edge and 28pt clear of the seam. */
.app-duel-half {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(4 * var(--pt));
  padding-inline: calc(18 * var(--pt));
}

.app-duel-half-top {
  padding-block: calc(18 * var(--pt)) calc(28 * var(--pt));
}

.app-duel-half-bottom {
  padding-block: calc(28 * var(--pt)) calc(18 * var(--pt));
}

.app-duel-half-neutral {
  background: var(--surface);
}

.app-duel-half-field {
  background: var(--field);
  color: var(--on-field);
}

.app-duel-tag {
  padding: calc(3 * var(--pt)) calc(8 * var(--pt));
  border-radius: calc(6 * var(--pt));
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
  font-weight: 600;
}

.app-duel-half-neutral .app-duel-tag,
.app-duel-new {
  background: var(--primary-tint);
  color: var(--primary-text);
}

.app-duel-half-field .app-duel-tag {
  border: calc(1.5 * var(--pt)) solid var(--on-field-muted);
  color: var(--on-field-muted);
}

.app-duel-name {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(26 * var(--pt));
  line-height: calc(30 * var(--pt));
}

.app-duel-sub {
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-duel-half-field .app-duel-sub {
  color: var(--on-field-muted);
}

/* The "or" chip: a radius-12 `background` tile with the float shadow, the word in
   House Numeral 22 (its end padding is the numeral lean, 4pt, on both sides). */
.app-duel-or {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  inset-block-start: 50%;
  width: fit-content;
  margin-inline: auto;
  translate: 0 -50%;
  padding: calc(5 * var(--pt)) calc(14 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: var(--background);
  color: var(--numeral);
  font-family: var(--font-numeral);
  font-style: italic;
  font-weight: 900;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: calc(22 * var(--pt));
  line-height: calc(26 * var(--pt));
  box-shadow: var(--shadow-app-float);
}

/* The home page's live duel (appScreens.ts duelDemo): the halves are real
   buttons. A pick leans the chosen half in and fades the other, then one of
   two drawn results covers the screen: the list with the picked place at #3,
   marked New, and Try again where Skip and Close were. Every movement waits
   for prefers-reduced-motion: no-preference; without it the result simply
   appears. */

button.app-duel-half {
  width: 100%;
  margin: 0;
  border: 0;
  font: inherit;
  text-align: start;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

/* Rendered disabled; site.js enables the halves once it can answer a tap. */
button.app-duel-half:not(:disabled) {
  cursor: pointer;
}

button.app-duel-half:focus-visible {
  outline-offset: -6px;
}

button.app-duel-half-field:focus-visible {
  outline-color: var(--on-field);
}

.app-duel-result {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--background);
}

.app-duel-result-bar {
  margin-block-start: auto;
}

.app-duel-again {
  cursor: pointer;
}

/* The landed line under the list title, at the app's 14pt body size. */
.app-duel-landed {
  margin-block-start: calc(4 * var(--pt));
  color: var(--text-muted);
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
}

/* The New tag on the placed row: the duel's own tag (colours shared with
   the neutral half's, above). */
.app-duel-new {
  display: inline-block;
  margin-block-end: calc(4 * var(--pt));
}

.app-ranked-row-new .app-card {
  outline: 2px solid var(--primary);
}

@media (prefers-reduced-motion: no-preference) {
  [data-duel] [data-duel-pick] {
    transition:
      transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
      opacity 0.3s ease;
  }

  /* The chosen half paints over the faded one; the "or" chip stays on top. */
  [data-picked='top'] [data-duel-pick='top'],
  [data-picked='bottom'] [data-duel-pick='bottom'] {
    position: relative;
    z-index: 1;
    transform: scale(1.03);
  }

  [data-duel] .app-duel-or {
    z-index: 2;
  }

  [data-picked='top'] [data-duel-pick='bottom'],
  [data-picked='bottom'] [data-duel-pick='top'] {
    opacity: 0.4;
  }

  .is-landed .app-duel-result {
    animation: duel-land 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .is-landed .app-ranked-row-new .app-card {
    animation: duel-pulse 0.6s ease-out 0.3s both;
  }
}

@keyframes duel-land {
  from {
    opacity: 0;
    transform: translateY(calc(12 * var(--pt)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes duel-pulse {
  from {
    box-shadow:
      var(--shadow-app-card),
      0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent);
  }
  to {
    box-shadow:
      var(--shadow-app-card),
      0 0 0 calc(12 * var(--pt)) color-mix(in srgb, var(--primary) 0%, transparent);
  }
}

/* BottomBar.tsx: 12pt above one or two 48pt buttons of equal width, 16pt from the
   sides, 16pt plus the home indicator (34pt) below. */
.app-bottombar {
  flex: none;
  display: flex;
  gap: calc(8 * var(--pt));
  padding: calc(12 * var(--pt)) calc(16 * var(--pt)) calc(50 * var(--pt));
  background: var(--background);
}

.app-bottombar > .app-btn {
  flex: 1;
  min-width: 0;
}

/* Screen: list (a ranked list: Screen's 16pt gutter, an eyebrow and a House
   Display title, the segmented control, then RankedRows grouped by tier,
   as BeenList.tsx lays them out: an 8pt gap between rows plus each row's own
   8pt margin). */

.app-list-head {
  padding: calc(16 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-list-head .app-title {
  margin-block-start: calc(4 * var(--pt));
}

.app-list-mode {
  margin: calc(12 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-list-rows {
  padding: calc(12 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-list-group {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pt));
  padding-block-start: calc(8 * var(--pt));
}

/* Screen: place. PlaceMapHeader.tsx: a 420pt map under the status bar that fades
   into the page from halfway down, a muted pin at y 232, the name in House
   Display 40 at the bottom (20pt in, 44pt up), Rank again and a check at the end;
   PlaceTopBar.tsx's glass back, share and more discs; then PlaceInfo, PlaceActions
   and ScoreRow.tsx. */

.app-place .app-status,
.app-ask .app-status {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 3;
}

.app-place-header {
  position: relative;
  height: calc(420 * var(--pt));
  overflow: hidden;
}

.app-place-map {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* The fade: the page colour at zero alpha first (never 'transparent'), then 78%,
   95% and solid at 50%, 67%, 80% and 100% of the header. */
.app-place-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--background) 0%, transparent) 50%,
    color-mix(in srgb, var(--background) 78%, transparent) 67%,
    color-mix(in srgb, var(--background) 95%, transparent) 80%,
    var(--background) 100%
  );
}

.app-place-pin {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(204.5 * var(--pt));
  display: flex;
  justify-content: center;
  color: var(--text-muted);
}

.app-place-pin .icon {
  width: calc(30 * var(--pt));
  height: calc(30 * var(--pt));
}

.app-place-title {
  position: absolute;
  inset-inline: calc(20 * var(--pt));
  inset-block-end: calc(44 * var(--pt));
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(40 * var(--pt));
  line-height: calc(46 * var(--pt));
}

.app-place-cluster {
  position: absolute;
  inset-inline-end: calc(18 * var(--pt));
  inset-block-end: calc(12 * var(--pt));
  display: flex;
  align-items: center;
  gap: calc(13 * var(--pt));
  height: calc(32 * var(--pt));
}

.app-place-check {
  display: flex;
  color: var(--success);
}

.app-place-check .icon {
  width: calc(28 * var(--pt));
  height: calc(28 * var(--pt));
}

.app-place-top {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  inset-block-start: calc(62 * var(--pt));
  height: calc(50 * var(--pt));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(6 * var(--pt));
}

.app-place-top-end {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
}

.app-place-info {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pt));
  padding: calc(16 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-place-line {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(16 * var(--pt));
  line-height: calc(24 * var(--pt));
}

.app-place-area {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-place-actions {
  display: flex;
  gap: calc(8 * var(--pt));
  padding: calc(14 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-place-actions .app-btn {
  flex: 1;
  min-width: 0;
}

/* tokens.type.section: House Display 18 over the 22pt line. */
.app-place-section {
  margin: calc(20 * var(--pt)) 0 calc(14 * var(--pt));
  padding-inline: calc(16 * var(--pt));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(18 * var(--pt));
  line-height: calc(22 * var(--pt));
}

.app-place-section-takes {
  margin-block-start: calc(24 * var(--pt));
}

/* ScoreRow.tsx: three equal cards, 8pt apart, 12pt padding, a 40pt coin with its
   badge, a one-line label and up to three lines of muted caption. */
.app-place-scores {
  display: flex;
  gap: calc(8 * var(--pt));
  padding-inline: calc(16 * var(--pt));
}

.app-place-score-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(12 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-card);
}

.app-coin-wrap {
  position: relative;
  flex: none;
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
}

.app-coin-badge {
  position: absolute;
  inset-block-start: calc(26 * var(--pt));
  inset-inline-start: calc(35 * var(--pt));
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
  padding-inline: calc(4 * var(--pt));
  border-radius: calc(9 * var(--pt));
  background: var(--primary);
  color: var(--on-primary);
  font-size: calc(10 * var(--pt));
  line-height: calc(12 * var(--pt));
  font-weight: 600;
  white-space: nowrap;
}

.app-place-caption {
  margin-block-start: calc(8 * var(--pt));
  text-align: center;
}

.app-place-caption-title {
  margin: 0;
  font-size: calc(12.5 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
  white-space: nowrap;
}

.app-place-caption-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-place-caption-sub strong {
  font-weight: 600;
}

.app-place-takes {
  padding-inline: calc(16 * var(--pt));
}

/* Screen: feed. FeedScreen.tsx's header (the title, Find friends and the bell as
   40pt icon buttons, then the chips row), CatchUpCard.tsx, and FeedCard.tsx: a
   floating post card of 16pt padding with a 40pt avatar, a headline whose place
   is in House Text, the tier pin and the italic House Numeral rank at the end,
   photos 155pt square, the note, and the action row. */

.app-feed-header {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pt));
  padding-block-start: calc(16 * var(--pt));
}

.app-feed-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(16 * var(--pt));
}

.app-feed-header-end {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
}

.app-icon-btn {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
}

.app-icon-btn .icon {
  width: calc(22 * var(--pt));
  height: calc(22 * var(--pt));
}

.app-badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(16 * var(--pt));
  height: calc(16 * var(--pt));
  padding-inline: calc(3 * var(--pt));
  border-radius: calc(8 * var(--pt));
  background: var(--primary);
  color: var(--on-primary);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-feed-chips {
  padding: 0 calc(16 * var(--pt));
}

.app-chip .icon {
  width: calc(16 * var(--pt));
  height: calc(16 * var(--pt));
}

.app-feed-list {
  padding: calc(16 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-catchup {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--pt));
  margin-block-end: calc(16 * var(--pt));
  padding: calc(16 * var(--pt));
  border-radius: calc(20 * var(--pt));
  background: var(--primary-soft);
}

.app-catchup-faces {
  display: flex;
}

.app-catchup-faces .app-avatar + .app-avatar {
  margin-inline-start: calc(-8 * var(--pt));
}

.app-catchup-text {
  flex: 1;
  margin: 0;
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
}

.app-feed-card {
  margin-block-end: calc(8 * var(--pt));
  padding: calc(16 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-card);
}

.app-feed-card-top {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--pt));
}

.app-feed-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--pt));
}

.app-feed-sentence {
  margin: 0;
  font-size: calc(16 * var(--pt));
  line-height: calc(21 * var(--pt));
}

.app-feed-person {
  font-weight: 500;
}

.app-feed-place {
  font-family: var(--font-text);
  font-weight: 400;
}

.app-feed-meta {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(4 * var(--pt));
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-feed-meta .icon {
  width: calc(14 * var(--pt));
  height: calc(14 * var(--pt));
}

.app-feed-rank {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  margin-inline-start: calc(4 * var(--pt));
  color: var(--tier-loved);
}

.app-feed-rank-fine {
  color: var(--tier-fine);
}

.app-feed-rank .icon {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
}

.app-rank-22 {
  --n: 22;
  --lh: 23;
  --lean: 4;
}

.app-feed-photos {
  display: flex;
  gap: calc(8 * var(--pt));
  margin-block-start: calc(8 * var(--pt));
}

.app-photo-wrap.app-feed-photo {
  width: calc(155 * var(--pt));
  height: calc(155 * var(--pt));
  border-radius: calc(12 * var(--pt));
}

.app-feed-note {
  margin: calc(8 * var(--pt)) 0 0;
  font-size: calc(16 * var(--pt));
  line-height: calc(24 * var(--pt));
}

.app-feed-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: calc(16 * var(--pt));
}

.app-feed-actions-group {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--pt));
  color: var(--text-muted);
}

.app-feed-actions .icon {
  width: calc(20 * var(--pt));
  height: calc(20 * var(--pt));
}

.app-feed-time {
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

/* Screen: plan. ListDetailBody.tsx (a back button, the title in House Display and
   the menu; a 112pt ListCollage beside the count and the MemberStack; ListItemRow
   cards) behind a scrim, with the invite editor as a sheet: its hint, a 44pt
   search field and PersonRow cards, then a BottomBar with Done. */

/* The scrim covers the whole screen, status bar included: the page starts under
   the status bar, which stays beneath the scrim. */
.app-plan .app-status {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
}

.app-plan-page {
  position: absolute;
  inset: 0;
  padding-block-start: calc(62 * var(--pt));
}

.app-plan-header {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  padding: calc(16 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-plan-back {
  display: flex;
  padding: calc(4 * var(--pt));
}

.app-plan-back .icon {
  width: calc(24 * var(--pt));
  height: calc(24 * var(--pt));
}

.app-plan-title {
  flex: 1;
  min-width: 0;
}

.app-plan-hero {
  display: flex;
  gap: calc(16 * var(--pt));
  padding: calc(16 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-collage {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, calc(55.5 * var(--pt)));
  gap: calc(1 * var(--pt));
  width: calc(112 * var(--pt));
  height: calc(112 * var(--pt));
  border-radius: calc(12 * var(--pt));
  overflow: hidden;
}

.app-collage-tile {
  width: calc(55.5 * var(--pt));
  height: calc(55.5 * var(--pt));
  border-radius: calc(12 * var(--pt));
  overflow: hidden;
  background: var(--primary-tint);
}

.app-plan-hero-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(4 * var(--pt));
}

.app-plan-hero-info .app-sub {
  margin: 0;
}

.app-members {
  display: flex;
}

.app-member-ring {
  display: flex;
  border: calc(2 * var(--pt)) solid var(--background);
  border-radius: 50%;
}

.app-member-ring + .app-member-ring {
  margin-inline-start: calc(-9.33 * var(--pt));
}

.app-plan-rows {
  padding-inline: calc(16 * var(--pt));
}

/* PlaceCard.tsx and ListItemRow.tsx: a radius-16 card, 12pt above and below the text. */
.app-place-card {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  margin-block-end: calc(8 * var(--pt));
  padding-block: calc(12 * var(--pt));
  padding-inline: calc(16 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-card);
}

.app-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0.4;
}

.app-sheet {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  border-start-start-radius: calc(20 * var(--pt));
  border-start-end-radius: calc(20 * var(--pt));
  background: var(--background);
}

.app-sheet-body {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pt));
  padding: calc(24 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-sheet-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(20 * var(--pt));
  line-height: calc(24 * var(--pt));
}

.app-sheet-hint {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(16 * var(--pt));
  line-height: calc(24 * var(--pt));
}

.app-field {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  height: calc(44 * var(--pt));
  padding-inline: calc(16 * var(--pt));
  border: calc(1.5 * var(--pt)) solid var(--border);
  border-radius: calc(12 * var(--pt));
  background: var(--surface);
  color: var(--text-muted);
  font-size: calc(16 * var(--pt));
  line-height: calc(24 * var(--pt));
}

.app-field .icon {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
}

.app-sheet-people {
  display: flex;
  flex-direction: column;
}

/* PersonRow.tsx: a floating card, a 44pt avatar, a name over a handle, a small button. */
.app-person-row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  margin-block-end: calc(8 * var(--pt));
  padding: calc(12 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-card);
}

.app-person-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--pt));
}

.app-person-name {
  margin: 0;
  overflow: hidden;
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-person-text .app-sub {
  margin: 0;
}

/* Screen: ask. AskScreen.tsx while a vote is open, with Screen's 16pt gutter and no
   gaps between its parts: AskBackdrop.tsx (the candidate's photo, blurred, fading
   into the page), the card (radius 22, the float shadow, two 64pt soft-square
   answers), who has answered, and AskTally.tsx. */

.app-ask-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.app-ask-backdrop .app-photo {
  opacity: 0.55;
  filter: blur(calc(18 * var(--pt)));
  scale: 1.15;
}

.app-ask-backdrop-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--background) 0%, transparent) 25%,
    var(--background) 75%
  );
}

.app-ask-content {
  position: relative;
  padding: calc(78 * var(--pt)) calc(16 * var(--pt)) 0;
}

.app-ask-header {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pt));
  padding-block-end: calc(8 * var(--pt));
}

.app-ask-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(16 * var(--pt));
  line-height: calc(24 * var(--pt));
}

.app-ask-summary {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--pt));
  margin: 0;
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-ask-progress {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
}

.app-ask-card {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pt));
  padding: calc(16 * var(--pt));
  border-radius: calc(22 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-float);
}

.app-ask-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(20 * var(--pt));
  line-height: calc(24 * var(--pt));
}

.app-ask-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--pt));
  margin: 0;
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-ask-card-reasons {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pt));
  margin: 0;
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-ask-actions {
  display: flex;
  justify-content: center;
  gap: calc(32 * var(--pt));
  padding-block-start: calc(8 * var(--pt));
}

.app-ask-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--pt));
}

.app-ask-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--pt));
  height: calc(64 * var(--pt));
  border-radius: calc(16 * var(--pt));
  box-shadow: var(--shadow-app-float);
}

.app-ask-disc .icon {
  width: calc(24 * var(--pt));
  height: calc(24 * var(--pt));
}

.app-ask-disc-no {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.app-ask-disc-yes {
  background: var(--primary);
  color: var(--on-primary);
}

.app-ask-action-label {
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
}

.app-ask-action-muted {
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
  font-weight: 400;
}

.app-ask-participants {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--pt));
  padding-block: calc(8 * var(--pt));
}

.app-ask-participant {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-ask-participant .icon {
  width: calc(14 * var(--pt));
  height: calc(14 * var(--pt));
  color: var(--success);
}

.app-ask-tally {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pt));
  padding-block: calc(8 * var(--pt));
}

.app-ask-tally-label {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
}

.app-ask-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(4 * var(--pt));
  min-height: calc(40 * var(--pt));
  border: 1px solid var(--border);
  border-radius: calc(12 * var(--pt));
  background: var(--background);
  overflow: hidden;
}

.app-ask-block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--pt));
  padding: calc(4 * var(--pt)) calc(8 * var(--pt)) 0;
}

.app-ask-block-name {
  min-width: 0;
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-ask-block-count {
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.app-ask-bar {
  height: calc(6 * var(--pt));
  margin: 0 calc(8 * var(--pt)) calc(4 * var(--pt));
  border-radius: calc(4 * var(--pt));
  background: var(--sunken);
  overflow: hidden;
}

.app-ask-bar-fill {
  display: block;
  height: 100%;
  background: var(--coin-not);
}

.app-ask-block-leader .app-ask-bar-fill {
  background: var(--coin-loved);
}

.app-ask-buttons {
  display: flex;
  flex-direction: column;
}

/* Screen: profile (Noor): ProfileHeader.tsx (88pt avatar, House Display name,
   stats in House Display 24, the Rank and Streak cards), the Badges row, then
   the podium from BeenList.tsx. The share and settings actions are glass discs
   (IconButton.tsx, variant glass) pinned top right. */

.app-profile-top {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(8 * var(--pt));
  inset-inline-end: calc(16 * var(--pt));
  display: flex;
  gap: calc(16 * var(--pt));
}

.app-glass-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  border-radius: 50%;
  background: var(--background);
  box-shadow: var(--shadow-app-float);
}

.app-glass-disc .icon {
  width: calc(22 * var(--pt));
  height: calc(22 * var(--pt));
}

.app-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--pt));
  padding: calc(40 * var(--pt)) calc(16 * var(--pt)) calc(24 * var(--pt));
  text-align: center;
}

.app-profile-handle {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(16 * var(--pt));
  line-height: calc(24 * var(--pt));
}

.app-profile-since {
  margin: 0;
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-profile-bio {
  margin: 0;
  font-size: calc(16 * var(--pt));
  line-height: calc(24 * var(--pt));
}

.app-profile-stats {
  display: flex;
  padding: calc(16 * var(--pt)) calc(16 * var(--pt));
}

.app-profile-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--pt));
}

.app-profile-stat-num {
  font-family: var(--font-display);
  font-size: calc(24 * var(--pt));
  line-height: calc(28 * var(--pt));
}

.app-profile-stat-label {
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.app-profile-cards {
  display: flex;
  gap: calc(8 * var(--pt));
  padding: 0 calc(16 * var(--pt)) calc(16 * var(--pt));
}

.app-profile-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pt));
  padding: calc(16 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-card);
}

.app-profile-card-head {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
}

.app-profile-card-head .icon {
  width: calc(13 * var(--pt));
  height: calc(13 * var(--pt));
  color: var(--primary-text);
}

.app-profile-card-value {
  font-family: var(--font-display);
  font-size: calc(20 * var(--pt));
  line-height: calc(24 * var(--pt));
}

/* ListRow.tsx: 56pt, 16pt gaps, a 14pt medium title, the value in House Display
   20, a muted chevron. */
.app-profile-row {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--pt));
  min-height: calc(56 * var(--pt));
  padding: calc(8 * var(--pt)) calc(16 * var(--pt));
}

.app-profile-row-title {
  flex: 1;
  font-size: calc(14 * var(--pt));
  line-height: calc(20 * var(--pt));
  font-weight: 500;
}

.app-profile-row-value {
  font-family: var(--font-display);
  font-size: calc(20 * var(--pt));
  line-height: calc(24 * var(--pt));
}

.app-profile-row .icon {
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
  color: var(--text-muted);
}

.app-podium {
  padding: calc(8 * var(--pt)) calc(16 * var(--pt)) 0;
}

/* /switch: the steps list and the closing download action. */
.switch-steps {
  margin: 12px 0 0;
  padding-inline-start: 22px;
}

.switch .legal-section li {
  line-height: 1.75;
}

.switch-steps li + li,
.switch .legal-section ul li + li {
  margin-block-start: 12px;
}

.switch-get {
  display: grid;
  justify-items: start;
  gap: 16px;
  margin-block-start: 48px;
}

.closing-switch {
  margin-block-start: 20px;
  text-align: center;
}

.closing-switch a {
  color: var(--primary);
  font-weight: 600;
}

/* Restaurants (layout only; the drawn screens are styled with them) */

.section-title {
  max-inline-size: 18ch;
  margin: 0 0 40px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.biz-hero,
.biz-how,
.biz-tools,
.biz-plans,
.biz-faq,
.biz-talk {
  padding-block: 96px;
}

.biz-hero {
  padding-block-start: 32px;
}

.biz-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 56px;
}

.biz-hero-copy {
  min-width: 0;
}

.biz-hero .biz-title {
  margin-block-end: 18px;
  font-size: clamp(44px, 6vw, 64px);
  line-height: 1.02;
}

.biz-find-label {
  display: block;
  margin-block-end: 8px;
  font-weight: 600;
  font-size: 14px;
}

.biz-find-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding-inline: 16px 8px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.biz-find-row:has(.biz-find-input:focus-visible) {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.biz-find-icon {
  display: inline-flex;
  color: var(--text-muted);
  font-size: 20px;
}

.biz-find-input {
  height: 54px;
  padding-inline: 8px;
}

.biz-find-input:focus-visible {
  outline: none;
}

.biz-results {
  margin-block-start: 12px;
}

.biz-results-title {
  margin-block-end: 8px;
  font-weight: 600;
  font-size: 14px;
}

.biz-results-empty {
  color: var(--text-muted);
  font-size: 15px;
}

.biz-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.biz-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 12px;
  padding-inline: 16px 8px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.biz-result-text {
  flex: 1 1 auto;
  min-width: 0;
}

.biz-result-name {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.biz-result-name a {
  color: inherit;
  text-decoration: none;
}

.biz-result-name a:hover {
  color: var(--primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.biz-result-line {
  color: var(--text-muted);
  font-size: 14px;
}

.biz-result-how {
  margin-block-start: 6px;
}

.biz-result .btn-text {
  flex: none;
  font-size: 14px;
}

/* The first result is the answer: a raised card with both actions. */
.biz-result-top {
  display: block;
  padding: 18px 20px;
  border-radius: 18px;
  box-shadow: var(--shadow-float);
}

.biz-result-top .biz-result-name {
  font-size: 22px;
}

.biz-result-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 6px;
  color: var(--success);
  font-weight: 600;
  font-size: 13px;
}

.biz-result-tag .icon {
  width: 16px;
  height: 16px;
}

.biz-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 14px;
}

/* While a search runs: a quiet ring in the field, and the old answer dimmed. */
.biz-find-spin {
  flex: none;
  width: 18px;
  height: 18px;
  margin-inline-end: 6px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.biz-hero-copy:has(.biz-results[aria-busy='true']) .biz-find-spin {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .biz-find-spin {
    border: 2px solid var(--primary-tint);
    border-block-start-color: var(--primary);
    animation: biz-spin 0.8s linear infinite paused;
  }

  .biz-hero-copy:has(.biz-results[aria-busy='true']) .biz-find-spin {
    animation-play-state: running;
  }
}

@media (prefers-reduced-motion: reduce) {
  .biz-find-spin {
    width: 8px;
    height: 8px;
    background: var(--primary);
  }
}

@keyframes biz-spin {
  to {
    transform: rotate(1turn);
  }
}

.biz-results > * {
  transition: opacity 0.2s ease;
}

.biz-results[aria-busy='true'] > * {
  opacity: 0.5;
}

.biz-hero-alt {
  margin-block-start: 20px;
}

/* Numbers strip */

.numbers {
  padding-block: 56px;
  background: var(--surface);
}

.numbers-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 32px;
  margin: 0;
}

.numbers-item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.numbers-value {
  margin: 0;
  color: var(--primary-text);
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}

.numbers-label {
  color: var(--text-muted);
  font-size: 15px;
}

/* How it works */

.biz-how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.biz-how-step {
  padding: 28px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.biz-how-num {
  display: block;
  margin-block-end: 16px;
  padding-inline-end: 0.12em;
  color: var(--numeral);
  font-family: var(--font-numeral);
  font-style: italic;
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
}

.biz-how-title {
  margin: 0 0 8px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
}

.biz-how-body {
  color: var(--text-muted);
  font-size: 16px;
}

/* Tools: the home page's ranked list, plus facts and the drawn visual */

.biz-facts {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.biz-facts li,
.biz-plan-items li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.biz-facts li + li {
  margin-block-start: 8px;
}

.biz-fact-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
}

/* The rule */

.biz-rule {
  padding-block: 96px;
  background: linear-gradient(var(--band), var(--band-bottom));
  color: var(--on-primary);
}

/* An eyebrow on sumac (the /restaurants rule, the home band): plain white,
   since 11px text needs the full 5.9:1. */
.biz-rule .eyebrow,
.home-biz .eyebrow {
  color: var(--on-primary);
}

.biz-rule-title {
  max-inline-size: 14ch;
  margin: 0 0 48px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.biz-rule-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.biz-rule-items h3 {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 20px;
}

.biz-rule-items p {
  color: color-mix(in srgb, var(--on-primary) 85%, transparent);
  font-size: 16px;
}

.biz-rule-close {
  margin-block-start: 56px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
}

/* Plans */

.biz-plans-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.biz-plan {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.biz-plan-feature {
  outline: 2px solid var(--primary);
}

.biz-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-block-end: 4px;
}

.biz-plan-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 600;
  font-size: 12px;
}

.biz-plan-head .biz-plan-name {
  margin: 0;
}

.biz-plan-name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
}

.biz-plan-tagline {
  margin-block-end: 20px;
  color: var(--text-muted);
}

.biz-plan-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.biz-plan-note {
  margin-block-end: 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.biz-plan-cta {
  align-self: flex-start;
  margin-block-start: auto;
}

/* FAQ */

.biz-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
}

.biz-faq-item {
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.biz-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-weight: 600;
  font-size: 18px;
  list-style: none;
  cursor: pointer;
}

.biz-faq-q::-webkit-details-marker {
  display: none;
}

.biz-faq-mark {
  display: inline-flex;
  flex: none;
  color: var(--primary-text);
}

@media (prefers-reduced-motion: no-preference) {
  .biz-faq-mark {
    transition: transform 0.2s ease;
  }
}

.biz-faq-item[open] .biz-faq-mark {
  transform: rotate(45deg);
}

.biz-faq-a {
  padding: 0 24px 22px;
  color: var(--text-muted);
}

/* Talk to us */

.biz-talk-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}

.biz-talk-line {
  max-width: 28em;
  margin-block-end: 28px;
  color: var(--text-muted);
  font-size: 18px;
}

.biz-talk-founding {
  margin-block-start: -12px;
}

.biz-next-title {
  margin-block-end: 8px;
  font-weight: 600;
}

.biz-next {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: next;
}

.biz-next li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-block-end: 8px;
  counter-increment: next;
}

.biz-next li::before {
  content: counter(next);
  min-width: 1em;
  padding-inline-end: 0.12em;
  color: var(--numeral);
  font-family: var(--font-numeral);
  font-style: italic;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
}

.biz-talk-email {
  color: var(--text-muted);
  font-size: 15px;
}

.biz-talk-email a {
  color: var(--primary-text);
  font-weight: 600;
}

.biz-talk-card {
  padding: 32px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.biz-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.biz-field {
  min-width: 0;
}

.biz-span {
  grid-column: 1 / -1;
}

.biz-label {
  display: block;
  margin-block-end: 6px;
  padding: 0;
  font-weight: 600;
  font-size: 14px;
}

.biz-input {
  width: 100%;
  border-radius: 12px;
  background: var(--background);
  box-shadow: 0 0 0 1.5px var(--border);
}

.biz-input:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 0;
}

select.biz-input {
  appearance: auto;
}

.biz-textarea {
  height: auto;
  padding-block: 12px;
  resize: vertical;
  line-height: 1.5;
}

.biz-interests {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.biz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.biz-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
}

.biz-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  overflow: hidden;
}

.biz-chip:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.biz-chip:has(input:focus-visible) {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.biz-submit {
  margin-block-start: 20px;
}

.biz-success {
  outline: none;
}

@media (max-width: 899px) {
  .biz-hero,
  .biz-how,
  .biz-tools,
  .biz-plans,
  .biz-faq,
  .biz-talk,
  .biz-rule {
    padding-block: 64px;
  }

  .biz-hero {
    padding-block-start: 24px;
  }

  .biz-hero-grid,
  .biz-talk-grid,
  .biz-plans-grid,
  .biz-how-steps,
  .biz-rule-items {
    grid-template-columns: minmax(0, 1fr);
  }

  .biz-hero-grid {
    gap: 48px;
  }

  .biz-talk-grid {
    gap: 40px;
  }
}

@media (max-width: 519px) {
  .biz-find-row {
    flex-wrap: wrap;
    padding: 8px;
  }

  .biz-find-input {
    flex: 1 1 0;
  }

  .biz-find-row .btn-lg {
    flex: 1 1 100%;
  }

  .biz-talk-card {
    padding: 20px;
  }

  .biz-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Restaurants: drawings. Pieces of the app's own UI (bizScreens.ts), sized in
   points: calc(N * var(--pt)). A tool panel sets --pt from its own width
   (below); the hero stage sets it from the stage's
   own width (--u, one unit of a 600-unit-wide canvas), so the composition
   holds at every width. The QR's white square is the one fixed colour. */

.biz-qr-ground {
  display: inline-flex;
  padding: calc(10 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: #fff;
  color: var(--text);
}

.biz-qr {
  display: block;
}

.biz-qr-96 .biz-qr {
  width: calc(96 * var(--pt));
  height: calc(96 * var(--pt));
}

.biz-qr-180 .biz-qr {
  width: calc(180 * var(--pt));
  height: calc(180 * var(--pt));
}

/* Zero specificity, so each drawing class sets its own margins. */
:where(.biz-draw) p {
  margin: 0;
}

.biz-draw-eyebrow {
  color: var(--primary-text);
  font-weight: 600;
  font-size: calc(11 * var(--pt));
  line-height: calc(14 * var(--pt));
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-avatar-36 {
  width: calc(36 * var(--pt));
  height: calc(36 * var(--pt));
  font-size: calc(14.4 * var(--pt));
}

/* Dashboard (VenueDashboardScreen), inside the drawn phone */

.biz-dash {
  padding: calc(8 * var(--pt)) calc(16 * var(--pt)) 0;
}

.biz-dash-title {
  margin-block: calc(4 * var(--pt)) calc(16 * var(--pt));
}

.biz-dash-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8 * var(--pt));
}

.biz-dash-stat {
  padding: calc(14 * var(--pt)) calc(14 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-card);
}

.biz-dash-stat-label {
  color: var(--text-muted);
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.biz-dash-stat-value {
  margin-block-start: calc(4 * var(--pt));
  font-family: var(--font-display);
  font-size: calc(28 * var(--pt));
  line-height: calc(32 * var(--pt));
  letter-spacing: calc(-0.56 * var(--pt));
}

.biz-dash-rank {
  margin-block-start: calc(12 * var(--pt));
  padding: calc(18 * var(--pt)) calc(18 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(20 * var(--pt));
  background: var(--field);
  color: var(--on-field);
}

.biz-dash-rank-title {
  color: var(--on-field-muted);
  font-weight: 600;
  font-size: calc(13 * var(--pt));
  line-height: calc(16 * var(--pt));
}

.biz-dash-rank-row {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--pt));
  margin-block-start: calc(6 * var(--pt));
}

.biz-dash-rank-num {
  font-family: var(--font-display);
  font-size: calc(56 * var(--pt));
  line-height: calc(58 * var(--pt));
  letter-spacing: calc(-1.12 * var(--pt));
}

.biz-dash-rank-of {
  color: var(--on-field-muted);
  font-size: calc(14 * var(--pt));
  line-height: calc(18 * var(--pt));
}

.biz-dash-section {
  margin-block: calc(22 * var(--pt)) calc(10 * var(--pt));
  font-family: var(--font-display);
  font-size: calc(18 * var(--pt));
  line-height: calc(22 * var(--pt));
}

.biz-dash-rows {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pt));
}

.biz-dash-row {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  padding-block: calc(10 * var(--pt));
  padding-inline: calc(10 * var(--pt)) calc(14 * var(--pt));
  border-radius: calc(14 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-app-card);
}

.app-photo-wrap.biz-dash-photo {
  width: calc(28 * var(--pt));
  height: calc(28 * var(--pt));
  border-radius: calc(8 * var(--pt));
}

.biz-dash-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-text);
  font-size: calc(15 * var(--pt));
  line-height: calc(19 * var(--pt));
}

.biz-dash-count {
  color: var(--text-muted);
  font-size: calc(13 * var(--pt));
  white-space: nowrap;
}

/* Loyalty: the card as Apple Wallet shows it, in ink (a colour a restaurant
   may choose), so it reads on the sumac stage and on paper alike. The icon is
   a plain square of the card's colour; the band is the cover photo darkened,
   holding the stamps. */

.biz-pass {
  width: calc(340 * var(--pt));
  overflow: hidden;
  border-radius: calc(16 * var(--pt));
  background: var(--text);
  color: var(--background);
  line-height: 1.2;
}

.biz-pass-head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  padding: calc(14 * var(--pt)) calc(16 * var(--pt));
}

.biz-pass-icon {
  flex: none;
  width: calc(28 * var(--pt));
  height: calc(28 * var(--pt));
  border-radius: calc(7 * var(--pt));
  background: color-mix(in srgb, var(--background) 20%, transparent);
}

.biz-pass-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: calc(15 * var(--pt));
}

.biz-pass-count,
.biz-pass-field {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--pt));
}

.biz-pass-count,
.biz-pass-field-end {
  align-items: flex-end;
}

.biz-pass-label {
  opacity: 0.75;
  font-weight: 600;
  font-size: calc(10 * var(--pt));
  letter-spacing: 0.12em;
}

.biz-pass-count-value {
  font-family: var(--font-display);
  font-size: calc(22 * var(--pt));
  line-height: 1;
}

.biz-pass-strip {
  position: relative;
  height: calc(120 * var(--pt));
}

.biz-pass-photo,
.biz-pass-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.biz-pass-photo {
  object-fit: cover;
}

.biz-pass-shade {
  background: color-mix(in srgb, var(--scrim) 55%, transparent);
}

.biz-pass-stamps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, calc(36 * var(--pt)));
  align-content: center;
  justify-content: center;
  gap: calc(10 * var(--pt)) calc(18 * var(--pt));
  height: 100%;
}

.biz-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--pt));
  height: calc(36 * var(--pt));
  border-radius: 50%;
}

.biz-stamp-filled {
  --i: 0;
  background: var(--surface);
  color: var(--primary);
  animation: none;
}

.biz-stamp-filled .icon {
  width: calc(20 * var(--pt));
  height: calc(20 * var(--pt));
}

.biz-stamp-empty {
  border: calc(2 * var(--pt)) dashed color-mix(in srgb, var(--background) 70%, transparent);
}

.biz-pass-fields {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--pt));
  padding: calc(14 * var(--pt)) calc(16 * var(--pt)) 0;
}

.biz-pass-value {
  font-weight: 500;
  font-size: calc(15 * var(--pt));
}

.biz-pass-code {
  display: flex;
  justify-content: center;
  padding: calc(18 * var(--pt)) calc(16 * var(--pt)) calc(18 * var(--pt));
}

/* Table codes: the printed table card. Scanning its QR opens /restaurants. */

.biz-tent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(300 * var(--pt));
  padding: calc(28 * var(--pt)) calc(24 * var(--pt)) calc(24 * var(--pt));
  border-radius: calc(20 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-float);
  text-align: center;
}

.biz-tent-title {
  font-family: var(--font-display);
  font-size: calc(30 * var(--pt));
  line-height: calc(34 * var(--pt));
  letter-spacing: calc(-0.6 * var(--pt));
}

.biz-tent-line {
  margin-block: calc(6 * var(--pt)) calc(20 * var(--pt));
  color: var(--text-muted);
  font-size: calc(15 * var(--pt));
  line-height: calc(20 * var(--pt));
}

.biz-tent-table {
  display: inline-flex;
  align-items: center;
  height: calc(32 * var(--pt));
  margin-block-start: calc(18 * var(--pt));
  padding-inline: calc(12 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: var(--sunken);
  font-weight: 600;
  font-size: calc(13 * var(--pt));
}

/* Inbox: a ranked visit, then the restaurant's public reply under it. */

.biz-draw-inbox {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--pt));
  width: calc(360 * var(--pt));
}

/* The inbox, posts and menus drawings share one floating card. */
.biz-visit,
.biz-post,
.biz-menu {
  border-radius: calc(20 * var(--pt));
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.biz-visit {
  padding: calc(18 * var(--pt));
}

.biz-visit-head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
}

.biz-visit-who {
  flex: 1;
  min-width: 0;
  font-size: calc(15 * var(--pt));
  line-height: calc(20 * var(--pt));
}

.biz-visit-who strong {
  font-weight: 600;
}

.biz-visit-who span {
  color: var(--text-muted);
}

.biz-visit-note {
  margin-block-start: calc(12 * var(--pt));
  font-family: var(--font-text);
  font-size: calc(17 * var(--pt));
  line-height: calc(23 * var(--pt));
}

.biz-reply {
  margin-inline-start: calc(28 * var(--pt));
  padding: calc(16 * var(--pt)) calc(18 * var(--pt));
  border-radius: calc(18 * var(--pt));
  background: var(--primary-tint);
}

.biz-reply-text {
  margin-block-start: calc(6 * var(--pt));
  font-size: calc(15 * var(--pt));
  line-height: calc(21 * var(--pt));
}

/* Posts: a restaurant post as it lands in the feed. */

.biz-post {
  width: calc(360 * var(--pt));
  padding: calc(20 * var(--pt));
}

.biz-post-place {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  margin-block: calc(12 * var(--pt)) calc(16 * var(--pt));
}

.app-photo-wrap.biz-post-photo {
  width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
  border-radius: calc(12 * var(--pt));
}

.biz-post-name {
  font-family: var(--font-text);
  font-size: calc(18 * var(--pt));
  line-height: calc(22 * var(--pt));
}

.biz-post-kind {
  display: inline-flex;
  align-items: center;
  height: calc(26 * var(--pt));
  padding-inline: calc(10 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 600;
  font-size: calc(12 * var(--pt));
}

.biz-post-title {
  margin-block: calc(10 * var(--pt)) calc(8 * var(--pt));
  font-family: var(--font-display);
  font-size: calc(26 * var(--pt));
  line-height: calc(30 * var(--pt));
  letter-spacing: calc(-0.52 * var(--pt));
}

.biz-post-body {
  font-size: calc(15 * var(--pt));
  line-height: calc(22 * var(--pt));
}

.biz-post-until {
  margin-block-start: calc(8 * var(--pt));
  color: var(--text-muted);
  font-size: calc(13 * var(--pt));
}

.biz-post-reach {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  margin-block-start: calc(18 * var(--pt));
  color: var(--primary-text);
  font-weight: 600;
  font-size: calc(13 * var(--pt));
  line-height: calc(17 * var(--pt));
}

/* Menus: the top dishes, a hanging House Numeral for each. */

.biz-menu {
  width: calc(360 * var(--pt));
  padding: calc(20 * var(--pt)) calc(20 * var(--pt)) calc(10 * var(--pt));
}

.biz-menu-title {
  margin-block-end: calc(8 * var(--pt));
  font-family: var(--font-display);
  font-size: calc(22 * var(--pt));
  line-height: calc(26 * var(--pt));
  letter-spacing: calc(-0.44 * var(--pt));
}

.biz-menu-row {
  display: flex;
  align-items: center;
  padding-block: calc(10 * var(--pt));
}

.app-rank-gutter.biz-menu-gutter {
  width: calc(36 * var(--pt));
  margin-inline-end: calc(14 * var(--pt));
}

.biz-menu-text {
  flex: 1;
  min-width: 0;
}

.biz-menu-name {
  font-family: var(--font-text);
  font-size: calc(17 * var(--pt));
  line-height: calc(21 * var(--pt));
}

.biz-menu-loved {
  margin-block-start: calc(2 * var(--pt));
  color: var(--text-muted);
  font-size: calc(13 * var(--pt));
  line-height: calc(17 * var(--pt));
}

.biz-menu-price {
  margin-inline-start: calc(12 * var(--pt));
  font-weight: 600;
  font-size: calc(15 * var(--pt));
  white-space: nowrap;
}

/* The tool panels. Each sets its drawing's natural width (--natural, in
   points): the drawing fills the panel's width, up to 1.12 times its size. */

.biz-visual {
  --natural: 360;
  --pt: min(1.12px, calc(100cqw / var(--natural)));
  container-type: inline-size;
  display: grid;
  place-items: center;
  width: clamp(360px, 38vw, 480px);
  min-height: 520px;
  padding: 40px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--sunken);
  line-height: 1.3;
}

.biz-visual-loyalty {
  --natural: 340;
}

.biz-visual-codes {
  --natural: 300;
}

/* The dashboard phone rises from the panel's bottom edge, cut just below its
   last row, so the panel shows the screen and not the empty space under it. */
.biz-visual-dashboard {
  align-items: start;
  height: 520px;
  min-height: 0;
  padding-block-end: 0;
}

.biz-visual .device {
  --w: 300;
}

@media (max-width: 899px) {
  .biz-visual {
    width: 100%;
    min-height: 0;
  }
}

@media (max-width: 519px) {
  .biz-visual {
    padding: 32px 20px;
  }

  .biz-visual-dashboard {
    height: 440px;
    padding-block-end: 0;
  }

  .biz-visual .device {
    --w: 260;
  }
}

@media (max-width: 359px) {
  .biz-visual {
    padding-inline: 12px;
  }

  .biz-visual-dashboard {
    height: 400px;
  }

  .biz-visual .device {
    --w: 236;
  }
}

/* The hero stage: the dashboard phone toward the end, the Wallet card over its
   start side, the table card at the end. Everything is placed and sized in
   --u, so the stage scales as one picture. */

.biz-stage {
  position: relative;
  min-width: 0;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  border-radius: 32px;
  background: var(--primary);
  container-type: inline-size;
}

.biz-stage-inner {
  --u: calc(100cqw / 600);
  position: absolute;
  inset: 0;
  line-height: 1.3;
}

.biz-stage-phone,
.biz-stage-pass,
.biz-stage-tent {
  position: absolute;
}

.biz-stage-phone {
  --pw: 205;
  inset-block-start: calc(35 * var(--u));
  inset-inline-start: calc(318 * var(--u));
}

.biz-stage-phone .device {
  width: calc(var(--pw) * var(--u));
  padding: calc(var(--pw) * 0.032 * var(--u));
  border-radius: calc(var(--pw) * 0.14 * var(--u));
  box-shadow: var(--shadow-float);
}

.biz-stage-phone .screen {
  --pt: calc(var(--pw) * 0.936 / 402 * var(--u));
  border-radius: calc(var(--pw) * 0.11 * var(--u));
}

.biz-stage-pass {
  --pt: calc(0.72 * var(--u));
  inset-inline-start: calc(78 * var(--u));
  inset-block-end: calc(34 * var(--u));
  transform: rotate(-6deg);
}

.biz-stage-pass .biz-pass {
  box-shadow: var(--shadow-float);
}

.biz-stage-tent {
  --pt: calc(0.5 * var(--u));
  inset-inline-end: calc(22 * var(--u));
  inset-block-end: calc(26 * var(--u));
  transform: rotate(5deg);
}

/* A tablet keeps the wide picture. A phone gets a taller one: the phone in
   the middle, and the Wallet card and the table card in front of its lower
   third, below the last row, so they cover only empty screen and never a
   name. All three stay, so the picture is the same story at every width. */
@media (max-width: 599px) {
  .biz-stage {
    aspect-ratio: 3 / 4;
  }

  .biz-stage-phone {
    --pw: 330;
    inset-block-start: calc(28 * var(--u));
    inset-inline-start: calc(135 * var(--u));
  }

  .biz-stage-pass {
    --pt: calc(0.62 * var(--u));
    inset-inline-start: calc(34 * var(--u));
    inset-block-end: calc(18 * var(--u));
  }

  .biz-stage-tent {
    --pt: calc(0.46 * var(--u));
    inset-inline-end: calc(56 * var(--u));
    inset-block-end: calc(56 * var(--u));
  }
}

/* Without container units the drawings cannot be sized: leave the sumac
   stage and the paper panels empty rather than draw them broken. */
@supports not (width: 1cqw) {
  .biz-stage-inner,
  .biz-visual > * {
    display: none;
  }
}

/* Motion: sections below the fold rise in as they arrive (site.js adds
   .reveal-pending, then .is-in), and the Wallet card's stamps fill one by
   one. Nothing moves when the visitor asked for less, or without JavaScript. */

@media screen and (prefers-reduced-motion: no-preference) {
  .reveal-pending {
    opacity: 0;
    transform: translateY(28px);
  }

  .reveal-pending.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .is-in .biz-stamp-filled {
    animation: stamp 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
    animation-delay: calc(var(--i) * 140ms + 300ms);
  }
}

@media print {
  .reveal-pending {
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes stamp {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* Transparency and roadmap (ops autopilot WP10) */

.stats-years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 8px 28px;
}

.stats-years a {
  padding-block: 6px;
  padding-inline: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.stats-years a[aria-current='page'] {
  border-color: var(--primary);
  color: var(--primary);
}

.stats-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-block: 0 32px;
}

.stats-total {
  padding-block: 16px;
  padding-inline: 18px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.stats-total dt {
  color: var(--text-muted);
  font-size: 14px;
}

.stats-total dd {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stats-scroll {
  overflow-x: auto;
  margin-block-end: 32px;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.stats-table caption {
  margin-block-end: 12px;
  text-align: start;
  font-weight: 600;
}

.stats-table th,
.stats-table td {
  padding-block: 10px;
  padding-inline: 8px;
  border-block-end: 1px solid var(--border);
  text-align: end;
  white-space: nowrap;
}

.stats-table th[scope='row'],
.stats-table thead th:first-child {
  text-align: start;
}

.stats-table thead th {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

.stats-table tfoot th,
.stats-table tfoot td {
  border-block-end: 0;
  font-weight: 700;
}

.roadmap .roadmap-blurb {
  margin-block: 4px 12px;
  color: var(--text-muted);
}

.roadmap .roadmap-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.roadmap .roadmap-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding-block: 12px;
  border-block-end: 1px solid var(--border);
}

.roadmap .roadmap-votes {
  flex: none;
  color: var(--text-muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}