/* =========================================================================
   home.css: the biteout.app homepage (redesign of 22 Oct 2026, put on the
   BiteOut design system the same day, made simpler that night, and trimmed
   on 23 Oct): the hero with its wall of the venues' own photos, one phone for
   how it works (three taps and a swipe), the three deals, every dish gliding
   past in two rows, the areas, the questions, the app. Layout and motion
   only. Colours, type sizes and corners are site.css tokens
   (PublicDesignGuardTest holds every page sheet to that), and the shared
   pieces are site.css classes used in the markup: .bo-hero,
   .bo-section-heading, .bo-deal-pill, .bo-chip, .bo-step-n, .bo-btn, the
   store badges. /partner reuses the hero and its wall, the drawn phone, the
   deal tickets, the phone that plays the app and the rise into place.

   The character, from the design system: a black page, grey blocks, white
   words, Poppins on the one scale, and green as a fill with black words, the
   way the app's deal ticket uses it (the tagline's bubble, the deal pills,
   the tickets, the closing block, the primary button). Never a green
   heading, figure, icon, glow or gradient; on black an edge is a hairline,
   never a shadow. The logo is the real file, never redrawn or recoloured.
   Photos are the venues' own, cover-fit at the card's corner with the one
   photo scrim.

   Motion: nothing above the fold animates in, so the page reads the moment it
   loads. Above the fold the motion is ambient: the wall drifts, its columns
   leaning apart as the page scrolls. Below the fold the phone tilts through
   the steps and, on the last, the slider is swiped and the deal redeemed;
   the dish rows glide; things rise into place and count up once. Nothing
   leans toward the pointer. Interface transitions use the three timings
   (150, 250 and 400 ms). Everything stops for prefers-reduced-motion; a
   pointer resting on the wall, a row or a phone holds it. Breakpoints: 480,
   768, 1024 only.
   ========================================================================= */

.home {
  overflow-x: clip; /* the tape and the gliding rows never widen the page */
}

/* The site's container: 1200 wide inside the gutters, like the header. */
.hx__inner,
.vx__head,
.sx__inner,
.dx__inner,
.rv__inner,
.ex__inner,
.fq__inner {
  width: 100%;
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------ the phone */

/* A drawn phone, shared by the hero, how it works and /partner. Its corners
   are a device's shape, not a card's (PublicDesignGuardTest lets these two
   keep them, as it does /join's phone). */
.dv {
  aspect-ratio: 600 / 1299;
  padding: 2.4%;
  border-radius: 13% / 6%;
  background: var(--canvas);
  box-shadow: 0 0 0 1px var(--line-strong);
}

.dv__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 11% / 5%;
  background: var(--surface);
}

/* ------------------------------------------------------------------ hero */

.hx {
  position: relative;
  padding-top: var(--space-24);
}

.hx__inner {
  display: grid;
  gap: var(--space-24);
  align-items: center;
}

.hx__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

/* The h1 is .bo-hero (48, 32 on phones): the keyword line over the tagline,
   whose second half sits in a green chat bubble, black on green like the
   deal ticket, its tail at the bottom left. */
.hx__title {
  margin: 0;
}

.hx__kicker {
  display: block;
  margin-bottom: var(--space-16);
  text-wrap: wrap;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--text-2);
}

.hx__line {
  display: block;
}

.hx__bubble {
  position: relative;
  display: inline-block;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-16) var(--space-8);
  border-radius: var(--radius-card);
  background: var(--green);
  color: var(--on-green);
  transform: rotate(-3deg);
  transform-origin: left bottom;
}

.hx__bubble::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: var(--space-20);
  width: 22px;
  height: 14px;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, 10% 100%);
}

.hx__badges {
  margin-top: var(--space-32);
}

/* The phone, slanted and floating, plays the app (home.js changes the
   screen). Its width is --phone-w; /partner sets its own. It stands over
   the tape. */
.hx__stage {
  --phone-w: min(54vw, 220px);
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding-block: var(--space-16) var(--space-8);
}

.hx__phone {
  width: var(--phone-w);
  rotate: 7deg;
  animation: hx-float 6s ease-in-out infinite;
}

.hx__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-enter);
}

.hx__shot.is-on {
  opacity: 1;
}

.hx__shot.is-off {
  opacity: 0;
  transition-timing-function: var(--ease-exit);
}

@keyframes hx-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

/* The green tape across the foot of the hero: the deal amounts and the
   promises with the logo file between them (never redrawn). Tilted against
   the phone, it runs behind it; a pointer resting on it holds it. */
.hx__tape {
  position: relative;
  z-index: 1;
  margin: calc(var(--space-48) * -1) -8vw var(--space-48);
  padding-block: var(--space-12);
  overflow: hidden;
  background: var(--green);
  color: var(--on-green);
  transform: rotate(-3deg);
}

.hx__run {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  width: max-content;
  padding-inline: var(--space-24);
  font-size: var(--fs-hero-phone);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

html.js-motion .hx__run {
  padding-inline: 0;
  animation: hx-run var(--hx-dur, 40s) linear infinite;
  will-change: transform;
}

.hx__tape:hover .hx__run {
  animation-play-state: paused;
}

/* One copy's width (home.js sets --hx-period; the run holds three). */
@keyframes hx-run {
  to { transform: translateX(calc(var(--hx-period, 50%) * -1)); }
}

.hx__logo {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
  border-radius: var(--radius-thumb);
}

@media (min-width: 768px) {
  .hx__run {
    font-size: var(--fs-hero);
    letter-spacing: -1px;
  }
}

@media (min-width: 1024px) {
  .hx {
    padding-top: var(--space-48);
  }

  .hx__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-48);
  }

  .hx__stage {
    --phone-w: 260px;
  }
}

/* --------------------------------------------------------------- the wall */

/* The venues' own photos in columns that drift past each other, every photo
   a link to its venue with its deal on it: two columns on a phone, three
   from 768. The edges fade into the page. home.js copies each column once for
   the loop and sets its pace (--hw-dur) and its lean on scroll (--hw-shift);
   without JS each column is a still stack, cut by the wall's edge. */
.hw {
  --hw-h: 480px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  height: var(--hw-h);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 10%, black 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 10%, black 86%, transparent);
}

.hw__col {
  min-width: 0;
  transform: translate3d(0, var(--hw-shift, 0px), 0);
}

.hw__col--2 {
  margin-top: calc(var(--space-48) * -1.5);
}

.hw__col--3 {
  display: none;
}

.hw__track {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.js-motion .hw__track {
  animation: hw-drift var(--hw-dur, 60s) linear infinite;
  will-change: transform;
}

html.js-motion .hw__col--2 .hw__track {
  animation-direction: reverse;
}

.hw:hover .hw__track,
.hw:focus-within .hw__track {
  animation-play-state: paused;
}

@keyframes hw-drift {
  to { transform: translate3d(0, calc(-50% - var(--space-12) / 2), 0); }
}

.hw__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.hw__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--photo-scrim);
}

.hw__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-enter);
}

.hw__text {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  left: var(--space-12);
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 2px;
}

.hw__deal {
  margin-bottom: var(--space-8);
}

.hw__name {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.25;
}

.hw__area {
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-2);
}

.hw__card:hover .hw__img,
.hw__card:focus-visible .hw__img {
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .hw {
    --hw-h: 560px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hw__col--3 {
    display: block;
    margin-top: calc(var(--space-48) * -0.5);
  }
}

@media (min-width: 1024px) {
  .hx--wall .hx__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .hw {
    --hw-h: clamp(560px, calc(100vh - var(--header-h) - var(--space-48) * 2), 680px);
    margin-top: calc(var(--space-24) * -1);
  }
}

/* --------------------------------------------------------- the photo rows */

.vx {
  padding-block: var(--space-48);
}

.vx__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8) var(--space-16);
  margin-bottom: var(--space-16);
}

.vx__title {
  margin: 0;
}

.vx__all {
  padding-inline: 0;
}

.vx__all svg {
  transition: transform var(--dur-med) var(--ease-enter);
}

.vx__all:hover svg {
  transform: translateX(4px);
}

/* Without JS (or with reduced motion) a row is a still strip you scroll. */
.vx__row {
  overflow-x: auto;
  padding-block: var(--space-8);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.vx__row::-webkit-scrollbar {
  display: none;
}

.vx__row + .vx__row {
  margin-top: var(--space-4);
}

.vx__track {
  display: flex;
  gap: var(--space-12);
  width: max-content;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}

.vx__item {
  scroll-snap-align: start;
}

html.js-motion .vx__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

html.js-motion .vx__track {
  padding: 0;
  animation: vx-glide var(--vx-dur, 60s) linear infinite;
  will-change: transform;
}

html.js-motion .vx__row--back .vx__track {
  animation-direction: reverse;
}

.vx__row:hover .vx__track,
.vx__row:focus-within .vx__track {
  animation-play-state: paused;
}

@keyframes vx-glide {
  to { transform: translateX(calc(-50% - var(--space-12) / 2)); }
}

.vx__card {
  position: relative;
  display: block;
  width: 200px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur-med) var(--ease-enter);
}

.vx__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--photo-scrim);
}

.vx__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-enter);
}

.vx__deal {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  z-index: 1;
}

.vx__text {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  left: var(--space-12);
  z-index: 1;
  display: grid;
  gap: 2px;
}

.vx__name {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
}

.vx__area {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-2);
}

.vx__card:hover,
.vx__card:focus-visible {
  transform: translateY(-4px);
}

.vx__card:hover .vx__img,
.vx__card:focus-visible .vx__img {
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .vx__card {
    width: 240px;
  }

  .vx__name {
    font-size: var(--fs-headline);
  }
}

@media (min-width: 1024px) {
  .vx {
    padding-block: calc(var(--space-32) * 2);
  }
}

/* ------------------------------------------------------- how it works */

.sx {
  padding-block: var(--space-48);
}

.sx__inner {
  display: grid;
  gap: var(--space-32);
}

.sx__title {
  margin: 0 0 var(--space-32);
}

.sx__steps {
  display: grid;
  gap: var(--space-48);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-16);
  row-gap: var(--space-4);
  align-items: center;
}

.sx__num {
  grid-row: span 2;
}

.sx__name {
  margin: 0;
  font-size: var(--fs-headline);
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.sx__body {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-2);
}

/* On phones each step carries its own screen. */
.sx__inline {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(64%, 240px);
  height: auto;
  margin-top: var(--space-16);
  border: 8px solid var(--canvas);
  border-radius: var(--radius-sheet);
  box-shadow: 0 0 0 1px var(--line-strong);
}

/* The last step's screen: the booking with its slider live, as the app
   draws it (the render 09_bookings.png, 1170 x 2532; every position below is
   its own, in per cent of the screen). The thumb slides across, the label
   fades as the app fades it, and the app's "Deal redeemed" screen follows:
   one loop of 5.6 seconds while the step is showing (.is-on). The black disc
   covers the rendered thumb once the drawn one leaves it. */
.sw__frame {
  position: relative;
  aspect-ratio: 600 / 1299;
}

.sw__img,
.sw__done {
  display: block;
  width: 100%;
  height: 100%;
}

.sw__done {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.sw__hide,
.sw__dim,
.sw__thumb {
  position: absolute;
}

.sw__hide {
  top: 61.098%;
  left: 8.376%;
  width: 14.53%;
  height: 6.714%;
  border-radius: 50%;
  background: var(--canvas);
}

.sw__dim {
  top: 63.033%;
  left: 31.795%;
  width: 36.239%;
  height: 2.765%;
  background: var(--canvas);
  opacity: 0;
}

.sw__thumb {
  top: 61.256%;
  left: 8.718%;
  display: grid;
  width: 13.846%;
  height: 6.398%;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-green);
}

.sw__thumb svg {
  width: 40%;
  height: 40%;
}

.sx__inline.sw {
  overflow: hidden;
}

html.js-motion .sx__step.is-on .sw__thumb,
html.js-motion .sx__shot.sw.is-on .sw__thumb {
  animation: sw-thumb 5.6s linear infinite;
}

html.js-motion .sx__step.is-on .sw__dim,
html.js-motion .sx__shot.sw.is-on .sw__dim {
  animation: sw-dim 5.6s linear infinite;
}

html.js-motion .sx__step.is-on .sw__done,
html.js-motion .sx__shot.sw.is-on .sw__done {
  animation: sw-done 5.6s linear infinite;
}

/* The thumb's travel is the track less the thumb and its padding: 804 of
   the render's pixels, 4.963 thumbs. */
@keyframes sw-thumb {
  0%,
  14% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.55, 0, 0.25, 1);
  }

  34%,
  88% {
    transform: translateX(496.3%);
  }

  89%,
  100% {
    transform: translateX(0);
  }
}

@keyframes sw-dim {
  0%,
  14% {
    opacity: 0;
  }

  34%,
  88% {
    opacity: 0.75;
  }

  89%,
  100% {
    opacity: 0;
  }
}

@keyframes sw-done {
  0%,
  38% {
    opacity: 0;
  }

  44%,
  90% {
    opacity: 1;
  }

  98%,
  100% {
    opacity: 0;
  }
}

.sx__stage {
  display: none;
}

@media (min-width: 1024px) {
  .sx {
    padding-block: calc(var(--space-32) * 2) var(--space-48);
  }

  .sx__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-48);
    align-items: start;
  }

  /* The phone stays while the steps scroll past (home.js picks the screen). */
  .sx__stage {
    position: sticky;
    top: calc(var(--header-h) + var(--space-32));
    display: grid;
    height: min(76vh, 640px);
    place-items: center;
  }

  /* It leans from one side to the other as the steps go by (home.js sets
     --sx-p, 0 to 1, from the scroll; still at 0.5 without it). */
  .sx__phone {
    height: 88%;
    transform: rotate(calc((var(--sx-p, 0.5) - 0.5) * 10deg)) scale(calc(0.97 + var(--sx-p, 0.5) * 0.03));
    transition: transform var(--dur-fast) linear;
  }

  .sx__shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.03);
    transition:
      opacity var(--dur-slow) var(--ease-enter),
      transform var(--dur-slow) var(--ease-enter);
  }

  .sx__shot.is-on {
    opacity: 1;
    transform: none;
  }

  /* Cover-fit, as object-fit does for the pictures: the phone's screen is a
     little narrower than the render, so it is as tall as the screen and
     centred. */
  .sx__shot.sw {
    overflow: hidden;
  }

  .sx__shot.sw .sw__frame {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
  }

  .sx__copy {
    padding-top: var(--space-48);
  }

  .sx__steps {
    position: relative;
    gap: 0;
    padding-left: var(--space-24);
  }

  /* The way through the steps: a hairline that fills as the page scrolls. */
  .sx__steps::before,
  .sx__steps::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    border-radius: var(--radius-pill);
  }

  .sx__steps::before {
    background: var(--line);
  }

  .sx__steps::after {
    background: var(--text);
    transform: scaleY(var(--sx-p, 0));
    transform-origin: top;
  }

  .sx__step {
    min-height: 48vh;
    align-content: center;
  }

  /* Beside a phone this size, the steps read at the display size. */
  .sx__name {
    font-size: var(--fs-display);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
  }

  .sx__body {
    font-size: var(--fs-headline);
  }

  html.js-motion .sx__step {
    opacity: 0.35;
    transition: opacity var(--dur-slow) var(--ease-enter);
  }

  html.js-motion .sx__step.is-on {
    opacity: 1;
  }

  .sx__inline {
    display: none;
  }
}

/* ------------------------------------------------- the deals, explained */

/* The three deals as the app's own tickets (green with black words, a notch
   each side where the stub tears off), flat on the page (23 Oct 2026: no
   lean toward the pointer). */
.dx {
  padding-block: var(--space-48);
}

.dx__head {
  max-width: 640px;
}

.dx__title {
  margin: 0;
}

.dx__tickets {
  display: grid;
  gap: var(--space-16);
  margin: var(--space-32) 0 0;
  padding: 0;
  list-style: none;
}

.dx__card {
  position: relative;
  display: grid;
  height: 100%;
  border-radius: var(--radius-card);
  background: var(--green);
  color: var(--on-green);
}

.dx__face {
  display: grid;
  align-content: start;
  gap: var(--space-8);
  padding: var(--space-24) var(--space-20) var(--space-20);
}

.dx__off {
  font-size: var(--fs-hero-phone);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.dx__min {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
}

/* The stub: a dashed tear across its top, a round notch at each end (the
   page's black showing through), and how often the deal comes back. */
.dx__stub {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-20);
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 5px, transparent 5px 9px);
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.35;
}

.dx__stub::before,
.dx__stub::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--canvas);
}

.dx__stub::before {
  left: -10px;
}

.dx__stub::after {
  right: -10px;
}

.dx__stub svg {
  flex: none;
  width: 16px;
  height: 16px;
}

@media (min-width: 768px) {
  .dx__tickets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dx__off {
    font-size: var(--fs-hero);
  }
}

@media (min-width: 1024px) {
  .dx {
    padding-block: calc(var(--space-32) * 2);
  }
}

/* ------------------------------------------------------ what diners said */

/* Quiet on purpose (23 Oct 2026, "a bit more low key, not so loud"): the
   heading, one grey line with the average, and one slow row of plain cards,
   outlined rather than filled, words first. */
.rv {
  padding-block: var(--space-48);
}

.rv__title {
  margin: 0;
}

.rv__sub {
  margin: var(--space-8) 0 0;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-2);
}

.rv__avg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-right: var(--space-4);
  font-weight: 700;
  color: var(--text);
}

.rv__star {
  font-size: var(--fs-body);
}

.rv__row {
  margin-top: var(--space-24);
}

.rv__item {
  display: flex;
}

.rv__card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-8);
  width: 272px;
  margin: 0;
  padding: var(--space-16) var(--space-20);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.rv__five {
  --size: 12px;
  background: linear-gradient(90deg, var(--text-2) calc(var(--rating) / 5 * 100%), var(--line-strong) 0);
}

.rv__quote {
  margin: 0;
}

.rv__quote p {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}

.rv__who {
  display: grid;
  min-width: 0;
  font-size: var(--fs-caption);
  line-height: 1.4;
}

.rv__name {
  font-weight: 600;
  color: var(--text-2);
}

.rv__venue {
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-3);
  text-decoration: none;
}

.rv__venue:hover {
  color: var(--text);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .rv__card {
    width: 300px;
  }
}

@media (min-width: 1024px) {
  .rv {
    padding-block: calc(var(--space-32) * 2) var(--space-48);
  }
}

/* ------------------------------------------------- dishes and areas */

.ex {
  padding-block: var(--space-48);
}

.ex__title {
  margin: 0;
}

/* The heading, and from a tablet up the two arrows that move the row. */
.ex__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
}

.ex__arrows {
  display: none;
  gap: var(--space-8);
}

.ex__arrow {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-enter),
    opacity var(--dur-fast) var(--ease-enter);
}

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

.ex__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.ex__arrow:disabled:hover {
  background: transparent;
}

.ex__arrow[hidden] {
  display: none;
}

/* The app's dish icons, each on its own small tile, the name under it: every
   dish with a page of its own (23 Oct 2026, "add all the options"), in one
   row that scrolls sideways and stops on a dish. Its far edge fades while
   there is more to see. */
.ex__strip {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-20) calc(var(--space-8) * -1) 0;
  padding: 0 var(--space-8) var(--space-4);
  overflow-x: auto;
  list-style: none;
  scroll-padding-inline: var(--space-8);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, black 85%, transparent);
  mask-image: linear-gradient(90deg, black 85%, transparent);
}

.ex__strip::-webkit-scrollbar {
  display: none;
}

.ex__strip.is-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.ex__strip > li {
  flex: none;
  scroll-snap-align: start;
}

.ex__dish {
  display: grid;
  justify-items: center;
  gap: var(--space-8);
  width: 92px;
  padding: var(--space-8) var(--space-4) var(--space-12);
  border-radius: var(--radius-card);
  color: var(--text);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-enter);
}

.ex__ico {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-thumb);
  transition: transform var(--dur-med) var(--ease-enter);
}

.ex__dish:hover {
  background: var(--pressed);
  color: var(--text);
  text-decoration: none;
}

.ex__dish:hover .ex__ico,
.ex__dish:focus-visible .ex__ico {
  transform: scale(1.06);
}

.ex__sub {
  margin: var(--space-32) 0 var(--space-12);
  font-size: var(--fs-headline);
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

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

@media (min-width: 768px) {
  .ex__arrows {
    display: flex;
  }

  .ex__dish {
    width: 104px;
  }

  .ex__ico {
    width: 64px;
    height: 64px;
  }
}

@media (min-width: 1024px) {
  .ex {
    padding-block: calc(var(--space-32) * 2);
  }
}

/* ------------------------------------------------------------- answers */

/* Rows grouped in one block with hairlines between them, as in the app. */
.fq {
  padding-block: var(--space-48);
  interpolate-size: allow-keywords;
}

.fq__inner {
  display: grid;
  gap: var(--space-24);
}

.fq__title {
  margin: 0;
}

.fq__list {
  border-radius: var(--radius-card);
  background: var(--surface);
}

.fq__item + .fq__item {
  border-top: 1px solid var(--line);
}

.fq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 52px;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-card);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  list-style: none;
  cursor: pointer;
}

.fq__q::-webkit-details-marker {
  display: none;
}

.fq__q::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--text-3) 0 0) center / 14px 2px no-repeat,
    linear-gradient(var(--text-3) 0 0) center / 2px 14px no-repeat;
  transition: transform var(--dur-med) var(--ease-enter);
}

.fq__item[open] .fq__q::after {
  transform: rotate(45deg);
}

.fq__a {
  max-width: 40em;
  margin: 0;
  padding: 0 var(--space-16) var(--space-16);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-2);
}

.fq__a a {
  color: var(--green);
}

.fq__item::details-content {
  height: 0;
  overflow: hidden;
  transition:
    height var(--dur-med) var(--ease-enter),
    content-visibility var(--dur-med) allow-discrete;
}

.fq__item[open]::details-content {
  height: auto;
}

@media (min-width: 1024px) {
  .fq__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-48);
  }
}

/* ------------------------------------------------------------- the end */

.cx {
  padding: var(--space-24) var(--gutter) var(--space-48);
}

.cx__block {
  position: relative;
  display: grid;
  gap: var(--space-24);
  max-width: var(--max-width);
  margin-inline: auto;
  overflow: hidden;
  padding: var(--space-32) var(--space-20) 0;
  border-radius: var(--radius-card);
  background: var(--green);
  color: var(--on-green);
}

.cx__copy {
  padding-bottom: var(--space-8);
}

.cx__title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.cx__lede {
  margin: var(--space-8) 0 var(--space-20);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
}

.cx__art {
  justify-self: center;
  width: min(84%, 360px);
  transition: transform var(--dur-slow) var(--ease-enter);
}

.cx__art img {
  display: block;
  width: 100%;
  height: auto;
}

html.js-motion .cx__block:not(.is-in) .cx__art {
  transform: translateY(var(--space-24));
}

@media (min-width: 768px) {
  .cx__block {
    padding-inline: var(--space-48);
  }
}

@media (min-width: 1024px) {
  .cx {
    padding-bottom: calc(var(--space-32) * 2);
  }

  .cx__block {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    padding: var(--space-32) var(--space-48);
  }

  .cx__copy {
    padding-bottom: 0;
  }
}

/* --------------------------------- rising into place, below the fold only */

html.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(var(--space-16));
  transition:
    opacity var(--dur-slow) var(--ease-enter) var(--d, 0ms),
    transform var(--dur-slow) var(--ease-enter) var(--d, 0ms);
}

html.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------- stillness */

.hx__stage.is-away .hx__phone {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hx__phone,
  .hx__run,
  .vx__track,
  .hw__track,
  .sw__thumb,
  .sw__dim,
  .sw__done {
    animation: none !important;
  }

  .hx__shot,
  .sx__shot,
  .sx__phone,
  .vx__card,
  .vx__img,
  .hw__img,
  .ex__dish,
  .ex__ico,
  .cx__art,
  [data-reveal] {
    transition: none !important;
  }

  .hw__col,
  .sx__phone {
    transform: none !important;
  }
}