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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
  color: var(--color-ink);
  background: var(--color-surface);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section { padding-block: var(--space-10); }
.section--dark { background: var(--color-dark-surface); color: var(--color-on-dark); }

.section-header { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }

.section-title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-h2-weight);
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-line);
  color: var(--color-ink);
}
.section--dark .section-title { color: var(--color-on-dark); }

.section-lead {
  font-family: var(--font-family-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
  color: var(--color-muted);
}
.section--dark .section-lead { color: var(--color-on-dark-muted); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.card--outline {
  background: transparent;
  border-color: rgba(251, 251, 252, 0.16);
}

.card-title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line);
  color: var(--color-ink);
}
.section--dark .card-title { color: var(--color-on-dark); }

.card-desc {
  font-family: var(--font-family-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
  color: var(--color-muted);
}
.section--dark .card-desc { color: var(--color-on-dark-muted); }

.badge-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-badge);
  display: grid;
  place-items: center;
  background: var(--color-border);
  flex-shrink: 0;
}
.badge-icon img { width: 24px; height: 24px; }
.badge-icon--flush { background: transparent; }

/* Grid-stacks the image and overlay in the same cell so the overlay can sit
   flush against the card edge without position: absolute, and the image's
   natural (uncropped) height drives the card's height instead of a forced
   aspect-ratio. */
.media-card {
  display: grid;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.media-card__img { grid-area: 1 / 1; width: 100%; height: auto; display: block; }
.media-card picture { display: contents; }

.media-card--label .media-card__overlay {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-card) 0; /* Only the bottom-right corner is rounded */
  background: rgba(251, 251, 252, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(251, 251, 252, 0.3);
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 14px;
}

.media-card--content .media-card__overlay {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  /* Guarantees text legibility regardless of how bright the underlying photo
     is at the crop shown — without it, contrast is down to luck (e.g. the
     about section's full-width card crops into a bright sky and the title
     disappears). */
}
.media-card__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  color: var(--color-on-dark);
}
.media-card__desc {
  font-family: var(--font-family-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  color: var(--color-on-dark-muted);
}

/* Qualified with .btn so this border-radius beats .btn's own (equal-specificity,
   later-declared) border-radius instead of losing to it. Bottom corners are
   squared off because the underline runs the full text width and, combined
   with zero horizontal padding, was poking past the rounded bottom edge. */
.btn.btn--outline-light {
  margin-top: var(--space-2);
  align-self: flex-start;
  background: transparent;
  border-radius: var(--radius-badge) var(--radius-badge) 0 0;
  color: var(--color-on-dark);
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
}

/* Qualified with .btn so this display value beats .btn's own (equal-specificity,
   later-declared) display: inline-flex instead of losing to it. */
.btn.btn--block { display: flex; width: 100%; }

@media (min-width: 768px) {
  .btn--block { max-width: 360px; margin-inline: auto; }
  .store-row { margin-inline: auto; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-badge);
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 16px;
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  border: none;
}
.btn--primary { background: linear-gradient(90deg, #F25C05, #E83B30); color: var(--color-on-dark); }

@media (min-width: 768px) {
  .container { padding-inline: 40px; }
  .section { padding-block: var(--space-16); }
}
@media (min-width: 1024px) {
  .container { padding-inline: 64px; }
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.navbar__logo { flex-shrink: 0; }
.navbar__logo img { height: 24px; width: auto; }
.navbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.navbar__toggle img { width: 24px; height: 24px; }

.navbar__mobile-cta { display: inline-flex; margin-left: auto; }

.navbar__links {
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-6);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
.navbar__links.is-open { transform: translateX(0); }
.navbar__links a:not(.btn):not(.help-contact__link) {
  padding: var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-ink);
}
.navbar__links a:not(.btn):not(.help-contact__link):hover { border-bottom: #F25C05; border-bottom-style: solid; border-bottom-width: 2px; }

.navbar__cta-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.navbar__cta-group a.help-contact__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-badge);
  color: var(--color-accent);
}
.navbar__cta-group .btn { width: 100%; }

@media (min-width: 768px) {
  .navbar__inner { justify-content: space-between; }
  .navbar__toggle { display: none; }
  .navbar__mobile-cta { display: none; }
  .navbar__links {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    background: none;
    padding: 0;
    transform: none;
    gap: var(--space-6);
  }
  .navbar__links a:not(.btn):not(.help-contact__link) { padding: var(--space-2) var(--space-3); font-size: 16px; }
  .navbar__cta-group {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    margin-top: 0;
  }
  .navbar__cta-group a.help-contact__link {
    width: auto;
    padding: 0;
    border: none;
  }
  .navbar__cta-group .btn { width: auto; }
}

/* Fixed over the hero on index.html so hero content scrolls underneath it;
   background is the same permanent dark surface as every other page's navbar. */
.navbar.navbar--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.hero { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: flex-end; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.35) 0%, rgba(17, 24, 39, 0.85) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }

.hero .store-row { flex-direction: row-reverse; margin-inline: 0; max-width: 360px;}

.hero__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-hero-weight);
  font-size: var(--font-hero-size);
  line-height: var(--font-hero-line);
  display: flex;
  flex-direction: column;
  color: var(--color-on-dark);
}
.hero__title-accent { color: var(--color-accent); }

.hero__subtitle { margin-top: var(--space-4); color: var(--color-on-dark-muted); max-width: 42ch; }
.hero__subtitle strong { color: var(--color-on-dark); font-weight: 700; }

.store-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  max-width: 360px;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-on-dark);
  border-radius: 16px; /* Matches Figma's explicit 16px radius for app store buttons */
  transition: opacity 0.15s ease;
  flex: 1 1 0;
  min-width: 0; /* Overrides the default content-based min-width so both buttons truly split the row evenly */
}
.store-btn:hover { opacity: 0.85; }

.store-btn__icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.store-btn__icon--invert,
.store-btn__wordmark { filter: invert(1); }

.store-btn__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 auto; }

.store-btn__label {
  font-family: var(--font-family-body);
  font-weight: var(--font-label-weight);
  font-size: var(--font-label-size);
  color: var(--color-muted);
  white-space: nowrap;
  text-align: center;
}

.store-btn__wordmark { display: block; height: 18px; width: auto; max-width: 100%; }
@media (min-width: 1024px) {
  .hero__content { max-width: 55%; }
}

.stats__grid { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.stats__card {
  flex: 1 1 calc((100% - var(--space-4)) / 2);
  max-width: calc((100% - var(--space-4)) / 2);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background-color: #FDF2E7;
}
/* Mobile: row layout, text on the left, image flush against the bottom-right.
   Reset to match the other cards (column, centered) at 768px+ below. */
.stats__card--primary {
  flex: 1 1 100%;
  max-width: 100%;
  flex-direction: row;
  align-items: flex-end;
  background-color: #FDF2E7;
}
.stats__card--primary .stats__text { align-self: center; align-items: flex-start; text-align: left; flex: 1 1 auto; }
.stats__card--primary .stats__img { flex: 0 0 42%; width: 42%; }

.stats__text { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-6); text-align: center; }
.stats__value {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-h2-size);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.stats__value img { width: 20px; height: 20px; }
.stats__label { font-family: var(--font-family-body); font-size: var(--font-body-size); color: var(--color-muted); }
.stats__img { display: block; width: 100%; height: auto; flex-shrink: 0; }
.stats__stores { margin-bottom: var(--space-6); }

@media (min-width: 768px) {
  .stats__grid { justify-content: center; }
  .stats__card, .stats__card--primary {
    flex: 1 1 calc((100% - 2 * var(--space-4)) / 3);
    max-width: calc((100% - 2 * var(--space-4)) / 3);
  }
  /* All three cards share the same column layout at this width. */
  .stats__card--primary { flex-direction: column; align-items: stretch; }
  .stats__card--primary .stats__text { align-self: stretch; align-items: center; text-align: center; }
  .stats__card--primary .stats__img { flex: 0 0 auto; width: 100%; }
}

/* Mobile: plain single-column stack, same as before. The bento grid only
   kicks in at 768px+ — a 3-column version was too cramped for the badge
   text on narrow screens (see 768px+ block below for that layout). */
.highlights__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  /* Bento grid: the first four cards fill a 2x2 block via plain
     auto-placement, and the final card is the only one explicitly
     positioned, spanning both rows in the third column. */
  .highlights__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .highlights__card:last-child {
    grid-column: 3;
    grid-row: 1 / span 2;
    /* Containing block for the absolutely-positioned fill image below. */
    position: relative;
  }
  /* Absolutely positioned so the image's intrinsic aspect ratio can never
     leak into the outer grid's auto-sized 1fr row tracks (a percentage
     height here would resolve against an indefinite parent, so browsers
     fall back to the image's natural size for track-sizing purposes —
     inflating rows 1-2 and growing the other four cards whenever this
     image isn't landscape-ish, as happened when swapping in a portrait
     desktop asset). Being out-of-flow removes it from that calculation
     entirely, regardless of the image's aspect ratio. */
  .highlights__card:last-child .media-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The final feature keeps the original top-left badge treatment; only the
     other four move theirs to the bottom with a top-right rounded corner. */
  .highlights__card:not(:last-child) .media-card__overlay {
    align-self: end;
    border-radius: 0 var(--radius-card) 0 0;
  }
}

.highlights__stores { margin-bottom: var(--space-6); }

.benefits__grid { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--space-4); }

/* Mobile: photo on top (full width), text stacked below in normal document
   flow instead of overlaid on the photo. The card's own border-radius only
   rounds the top of the image (its bottom edge sits mid-stack, above the
   text), so the image needs its own radius to get all four corners. */
.benefits__card .media-card__img {
  border-radius: var(--radius-card);
}
.benefits__card .media-card__overlay {
  grid-area: auto;
  max-width: none;
  align-items: flex-start;
  text-align: left;
}

/* Tablet/desktop: split the card into a photo pane and a text pane side by
   side, alternating which side the photo sits on per card. Only the photo
   gets the rounded/bordered treatment — the row itself has no visible box. */
@media (min-width: 768px) {
  .benefits__grid { gap: var(--space-6); }

  .benefits__card {
    display: flex;
    min-height: 280px;
    border-radius: 0;
    overflow: visible;
  }
  .benefits__card:nth-child(even) { flex-direction: row-reverse; }

  .benefits__card .media-card__img {
    flex: 0 0 44%;
    width: 44%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid rgba(251, 251, 252, 0.1);
  }

  .benefits__card .media-card__overlay {
    align-self: stretch;
    flex: 1 1 auto;
    max-width: none;
    background: none;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-8) var(--space-10);
  }
}

.help-contact__grid { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.help-contact__card { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--space-3); }

@media (min-width: 768px) {
  .help-contact__card { flex: 1 1 calc((100% - var(--space-4)) / 2); max-width: calc((100% - var(--space-4)) / 2); }
}
@media (min-width: 1024px) {
  .help-contact__grid { justify-content: center; }
  .help-contact__card { flex: 1 1 calc((100% - 2 * var(--space-4)) / 3); max-width: calc((100% - 2 * var(--space-4)) / 3); }
}

.help-contact__link { font-family: var(--font-family-heading); font-weight: 700; font-size: 16px; color: var(--color-accent); }

.help-search { padding-block: var(--space-6) 0; }
.help-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: text;
}
.help-search__field:focus-within { border-color: var(--color-accent); }
.help-search__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-muted); }
.help-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-family-body);
  font-size: 16px;
  color: var(--color-ink);
}
.help-search__input::placeholder { color: var(--color-muted); }
.help-search__empty { margin-top: var(--space-4); text-align: center; color: var(--color-muted); }

.faq__item.is-search-hidden,
.legal-section.is-search-hidden { display: none; }
.help-contact__link--muted { color: var(--color-muted); font-weight: 500; }

.features__list { display: flex; flex-direction: column; gap: var(--space-16); }
.features__item { display: flex; flex-direction: column; gap: var(--space-6); }
.features__image { width: 100%; height: auto; border-radius: 16px; }
.features__bullets { margin-top: var(--space-4); color: var(--color-muted); }

@media (min-width: 768px) {
  .features__list { flex-direction: row; flex-wrap: wrap; gap: var(--space-8); }
  .features__item {
    flex: 1 1 calc((100% - 2 * var(--space-8)) / 3);
    max-width: calc((100% - 2 * var(--space-8)) / 3);
    flex-direction: column;
    align-items: stretch;
  }
  .features__image { width: 100%; }
}

.features__stores { margin-top: var(--space-16); margin-bottom: var(--space-6); }


.about__header { max-width: 640px; }
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-4);
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

/* Thin gradient glass rim on top of each photo: a masked pseudo-element
   ring rather than `border`, since a flat border can't take a gradient
   and still follow the card's rounded corners cleanly. */
.about__card { position: relative; }
.about__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(251, 251, 252, 0.65) 0%, rgba(251, 251, 252, 0.08) 45%, rgba(251, 251, 252, 0.65) 0%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

@media (min-width: 768px) {
  /* Title sits top-left; the three lead paragraphs share the right column
     and stack there, rather than everything running full-width above the grid. */
  .about__header {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    column-gap: var(--space-16);
    row-gap: var(--space-3);
    max-width: none;
  }
  .about__header .section-title { grid-column: 1; grid-row: 1; }
  .about__header .section-lead { grid-column: 2; }

  /* Two cards share a row, the third spans full width beneath them. Its
     source photo shares the same ~1.19:1 ratio as the other two, so left
     to scale naturally at double width it would end up twice as tall —
     crop it to a wide letterbox instead to match the reference proportions. */
  .about__grid { grid-template-columns: repeat(2, 1fr); }
  /* grid-template-rows is forced to 100% because an implicit "auto" row
     sizes itself from the image's intrinsic height (~1.19:1, so ~900px
     at this width), not the shorter aspect-ratio the container is capped
     to — leaving the row taller than the visible, overflow-hidden card
     and pushing the bottom-aligned overlay out of view underneath it. */
  .about__card:nth-child(3) {
    grid-column: 1 / -1;
    aspect-ratio: 2.6 / 1;
    grid-template-rows: 100%;
  }
  .about__card:nth-child(3) .media-card__img { height: 100%; object-fit: cover; }
}

.reviews__carousel { overflow: hidden; }
.reviews__track { display: flex; transition: transform 0.4s ease; }
.reviews__card { flex: 0 0 100%; width: 100%; display: flex; flex-direction: column; gap: var(--space-4); }

@media (min-width: 768px) {
  .reviews__track { gap: var(--space-6); }
  .reviews__card { flex: 0 0 calc((100% - var(--space-6)) / 2); width: calc((100% - var(--space-6)) / 2); }
}
@media (min-width: 1024px) {
  .reviews__card { flex: 0 0 calc((100% - (2 * var(--space-6))) / 3); width: calc((100% - (2 * var(--space-6))) / 3); }
}
.reviews__stars { display: flex; gap: var(--space-1); }
.reviews__stars img { width: 16px; height: 16px; }
.reviews__quote { color: var(--color-ink); }
.reviews__author { display: flex; align-items: center; gap: var(--space-3); }
.reviews__avatar { width: 48px; height: 48px; border-radius: var(--radius-pill); object-fit: cover; }
.reviews__name { font-weight: 700; color: var(--color-ink); }
.reviews__role { font-family: var(--font-family-body); font-size: var(--font-label-size); color: var(--color-muted); }

.reviews__nav { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.reviews__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent);
  cursor: pointer;
}
.reviews__arrow:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-dark); }
.reviews__arrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.faq__list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item { background: var(--color-surface); border-radius: 8px; border: 1px solid var(--color-border); overflow: hidden; }
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-body);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  color: var(--color-ink);
  text-align: left;
}
.faq__chevron { width: 12px; height: 8px; flex-shrink: 0; transition: transform 0.2s ease; }
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }

.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq__answer p { padding: 0 var(--space-6) var(--space-4); color: var(--color-muted); }
.faq__answer ul,
.faq__answer ol { margin: 0 var(--space-6) var(--space-4); padding-left: var(--space-4); }
/* The global reset strips link colour and underline, which would leave a link
   inside an answer indistinguishable from the surrounding muted text. */
.faq__answer a { color: var(--color-accent); font-weight: 700; }
.faq__item.is-open .faq__answer { max-height: 2000px; }

.footer__inner { display: flex; flex-direction: column; gap: var(--space-8); }
.footer__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-title-footer-weight);
  font-size: var(--font-title-footer-size);
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__links a, .footer__links span { color: var(--color-on-dark-muted); }
.footer__logo { height: 24px; width: auto; margin-bottom: var(--space-4); }
.footer__desc { color: var(--color-on-dark-muted); max-width: 48ch; margin-bottom: var(--space-4); }
.footer__social { display: flex;; gap: var(--space-4); margin-bottom: var(--space-6); }
.footer__social img { width: 24px; height: 24px; }
.footer__social-icon { display: inline-flex; align-self: flex-start; }
.footer__social-icon svg { width: 28px; height: 28px; }

.footer__bao { margin-top: var(--space-6); }
.footer__bao + .footer__links { margin-top: var(--space-6); }
.footer__fields { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__field-label {
  font-family: var(--font-family-heading);
  font-weight: var(--font-title-footer-weight);
  color: var(--color-on-dark);
  margin: 0;
}
.footer__field-value { color: var(--color-on-dark-muted); margin: 0; }

@media (min-width: 768px) {
  .footer__inner { flex-direction: row; justify-content: space-between; }
  .footer__col { flex: 1; }
  .footer__col--brand { flex: 1.4; }
}

.floating-actions {
  display: flex;
  position: fixed;
  right: max(24px, calc((100vw - var(--container-max)) / 2 + 24px));
  bottom: 24px;
  z-index: 46;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.floating-actions__item { display: block; }
.floating-actions__item img { display: block; width: 72px; height: auto; }

.floating-actions__item--top {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The phone icon above is a flat 72px-wide image, but its SVG canvas
     bakes in transparent padding for a drop shadow (viewBox 105x110 for
     a ~72-unit circle) — so its visible circle renders at ~49px, not 72px.
     Matching that here (rather than a literal 72px box) is what makes the
     two buttons look the same size. */
  width: 49px;
  height: 49px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(251, 251, 252, 0.3);
  cursor: pointer;
  background: rgba(251, 251, 252, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.floating-actions__item--top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.floating-actions__item--top svg { width: 19px; height: 19px; }

@media (min-width: 768px) {
  .floating-actions {
    right: max(40px, calc((100vw - var(--container-max)) / 2 + 40px));
  }
}
@media (min-width: 1024px) {
  .floating-actions {
    right: max(64px, calc((100vw - var(--container-max)) / 2 + 64px));
  }
}

/* Raised out of the way while the app-banner (mobile only) is on screen, so
   the banner never covers the call / back-to-top buttons. */
@media (max-width: 767px) {
  .floating-actions.is-raised {
    bottom: calc(24px + var(--app-banner-height, 0px) + var(--space-2));
  }
}

.app-banner {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.1);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.app-banner.is-visible { transform: translateY(0); }

.app-banner__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.app-banner__icon img { height: 24px; width: auto; }

.app-banner__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.app-banner__name {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-ink);
}
.app-banner__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-muted);
}
.app-banner__rating img { width: 12px; height: 12px; }

.app-banner__cta {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
}

@media (max-width: 767px) {
  .app-banner { display: flex; }
}