@font-face {
  font-family: "Bangers";
  src: url("/fonts/bangers-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lilita One";
  src: url("/fonts/lilita-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --cream: #faedd3;
  --card: #ede0c8;
  --card-light: #fbeed8;
  --ink: #050505;
  --muted: #766d61;
  --teal: #1cbeaa;
  --button-background: #1cbeaa;
  --teal-shadow: #14a492;
  --button-ink: #fff;
  --impact-ink: #fff;
  --focus: #0a7d72;
  --marker: #8b8478;
  --quote: #e7dcc5;
  --divider: rgba(118, 109, 97, 0.2);
  /* Sign-in provider buttons mirror the app's auth screen: a white game button in
     both schemes, because the Apple and Google marks are drawn for a light backing. */
  --provider-face: #fff;
  --provider-shadow: #cfcfcf;
  --provider-ink: #050505;
  --wrap: 1152px;
  --heading: "Lilita One", sans-serif;
  --body: "Lilita One", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --cream: #16181c;
    --card: #2a2e36;
    --card-light: #343b45;
    --ink: #fff7ea;
    --muted: #b8bcc2;
    --teal: #59d1c2;
    --button-background: #59d1c2;
    --teal-shadow: #47a79b;
    --button-ink: #fff;
    --focus: #59d1c2;
    --marker: #a9b1b7;
    --quote: #4c4a49;
    --divider: rgba(255, 247, 234, 0.18);
    --provider-face: #fff;
    --provider-shadow: #c2c2c2;
    --provider-ink: #050505;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  background: var(--cream);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

picture.optimized-picture {
  display: contents;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
summary {
  font: inherit;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  border-radius: 10px;
  background: var(--button-background);
  color: var(--button-ink);
  font-family: var(--body);
}

.skip-link:focus,
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 12px 16px;
  overflow: visible;
  clip: auto;
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.site-header {
  position: absolute;
  z-index: 10;
  top: 24px;
  left: 50%;
  display: flex;
  width: min(var(--wrap), calc(100% - 128px));
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
}

.brand {
  display: inline-flex;
  align-items: center;
}

.site-wordmark {
  display: block;
  width: 200px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Used on both <a> and <button>; the border/cursor reset keeps a <button>
   from picking up the UA's outset stroke and arrow cursor. */
.download-button {
  display: inline-flex;
  min-width: 190px;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 12px 26px 13px;
  border: 0;
  border-radius: 23px;
  background: var(--button-background);
  box-shadow: 0 6px 0 var(--teal-shadow);
  color: var(--button-ink);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.header-download {
  min-width: 165px;
}

.download-button:hover,
.download-button:focus-visible {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--teal-shadow);
}

.hero {
  min-height: 930px;
  padding: 106px 64px 35px;
}

.hero-inner {
  display: grid;
  width: min(var(--wrap), 100%);
  min-height: 730px;
  margin: 0 auto;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.4fr);
  align-items: center;
  transform: translateY(60.5px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding-top: 35px;
  transform: translateY(-71.25px);
}

.hero-copy h1,
.hero-copy p,
.faq-intro h2,
.impact h2,
.final-cta h2 {
  margin: 0;
}

.hero-copy h1 {
  font-family: var(--heading);
  font-size: 53.84px;
  font-weight: 400;
  line-height: 1.03;
}

.hero-copy p {
  max-width: none;
  margin-top: 19.25px;
  color: var(--muted);
  font-size: 23.75px;
  line-height: 1.25;
  white-space: nowrap;
}

.hero-copy .download-button {
  margin-top: 14.25px;
}

.hero-visual {
  position: relative;
  z-index: 1;
  width: 812.12px;
  min-width: 0;
  justify-self: end;
  transform: translate(42.56px, -44.5px);
}

.hero-fan {
  position: relative;
  aspect-ratio: 3150 / 2847;
}

.hero-phone {
  position: absolute;
  height: auto;
}

.hero-phone-left {
  top: 14%;
  left: 14.4%;
  width: 32%;
  filter: drop-shadow(0 14px 22px rgba(22, 24, 28, 0.3));
  transform: rotate(-15deg);
}

.hero-phone-center {
  z-index: 1;
  top: 8%;
  left: 33.65%;
  width: 32.7%;
  filter: drop-shadow(0 18px 28px rgba(22, 24, 28, 0.38));
}

.hero-phone-right {
  top: 14%;
  left: 53.5%;
  width: 32%;
  filter: drop-shadow(0 14px 22px rgba(22, 24, 28, 0.3));
  transform: rotate(15deg);
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-copy h1,
  .hero-copy p {
    max-width: 200px;
  }

  .hero-copy p {
    white-space: normal;
  }
}

.features {
  margin-top: -72px;
  padding: 70.5px 64px 180px;
}

.feature-grid {
  display: grid;
  width: min(var(--wrap), 100%);
  margin: 0 auto;
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
  position: relative;
  min-height: 384px;
  overflow: hidden;
  padding: 31.5px 32px 0;
  border-radius: 16px;
  background: var(--card);
}

.feature-copy {
  position: relative;
  z-index: 1;
}

.feature-card h2 {
  margin: 0;
  font-family: var(--heading);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.12;
}

.feature-card h2 span,
.impact h2 span,
.faq-intro h2 span,
.founder-heading p {
  color: var(--teal);
}

.feature-card p {
  max-width: 310px;
  margin: 10.25px 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 17.8px;
  font-weight: 400;
  line-height: 26px;
}

.feature-art {
  position: absolute;
  z-index: 0;
  right: auto;
  bottom: 0;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.feature-art-gift {
  left: -48px;
  bottom: -15.5px;
  width: 306px;
  aspect-ratio: 2486 / 1682;
}

.feature-art-kids {
  left: 20.3359px;
  bottom: -93.125px;
  width: 321px;
  aspect-ratio: 1468 / 1332;
}

.feature-art-helmet {
  right: 0;
  bottom: -10.5%;
  left: auto;
  width: 85%;
  aspect-ratio: 1101 / 818;
  transform: none;
}

.benefits-section {
  min-height: 1184px;
  padding: 120px 64px;
  background-color: #16181c;
  background-image: image-set(
    url("/images/design/feature-pattern-desktop.avif") type("image/avif") 1x,
    url("/images/design/feature-pattern-desktop.webp") type("image/webp") 1x,
    url("/images/design/feature-pattern-desktop.png") 1x
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: luminosity;
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .benefits-section {
    background-color: #1b1e23;
  }
}

.benefit-row {
  display: grid;
  height: 432px;
  width: min(var(--wrap), 100%);
  margin: 0 auto;
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.benefits-pattern {
  display: none;
}

.benefit-row-chores .benefit-art-living {
  grid-column: 2;
  grid-row: 1;
}

.benefit-row-chores .benefit-copy {
  grid-column: 1;
  grid-row: 1;
}

.benefit-row + .benefit-row {
  margin-top: 80px;
}

.benefit-copy {
  position: relative;
  z-index: 1;
}

.benefit-copy h2,
.benefit-copy p {
  margin: 0;
}

.benefit-copy h2 {
  font-family: var(--heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.benefit-copy p {
  max-width: 520px;
  margin-top: 24px;
  color: #959698;
  font-family: var(--body);
  font-size: 19px;
  font-weight: 400;
  line-height: 26px;
}

.benefit-art {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.benefit-art-living {
  width: 515.56px;
  margin-left: 32px;
}

.benefit-art-rewards-pile {
  width: 437.17px;
  margin-left: 0;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55));
}

.impact {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 541px;
  align-items: center;
  justify-items: center;
  padding: 75px 24px;
  background: #31444a url("/images/design/chores-background-1280.webp") center center / cover no-repeat;
  background-image: image-set(
    url("/images/design/chores-background-1280.avif") type("image/avif") 1x,
    url("/images/design/chores-background-2560.avif") type("image/avif") 2x,
    url("/images/design/chores-background-1280.webp") type("image/webp") 1x,
    url("/images/design/chores-background-2560.webp") type("image/webp") 2x,
    url("/images/design/chores-background.png") 1x
  );
  color: var(--impact-ink);
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .impact {
    background: var(--cream);
  }

  .impact::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: image-set(
      url("/images/design/chores-background-1280.avif") type("image/avif") 1x,
      url("/images/design/chores-background-2560.avif") type("image/avif") 2x,
      url("/images/design/chores-background-1280.webp") type("image/webp") 1x,
      url("/images/design/chores-background-2560.webp") type("image/webp") 2x,
      url("/images/design/chores-background.png") 1x
    );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    filter: brightness(0.42) saturate(0.82);
  }

  .impact-inner {
    position: relative;
    z-index: 1;
  }

  .founder-card {
    border-color: rgba(255, 247, 234, 0.18);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.24);
  }
}

.impact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.impact-kicker {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 23.75px;
  line-height: 30px;
}

.impact h2 {
  font-size: 61.5px;
  font-weight: 400;
  line-height: 70px;
}

.impact h2 span {
  color: var(--teal);
}

.impact .download-button {
  width: 306px;
  margin-top: 54px;
}

.faq-section {
  padding: 120px 64px 120px;
}

.faq-layout {
  display: grid;
  width: min(var(--wrap), 100%);
  min-height: 588px;
  margin: 0 auto;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.faq-intro h2 {
  font-family: var(--heading);
  font-size: 46.2px;
  font-weight: 400;
  line-height: 58px;
}

.faq-intro img {
  width: 321px;
  height: auto;
  aspect-ratio: 1034 / 1323;
  object-fit: contain;
  margin: 29px 0 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-card {
  overflow: hidden;
  padding: 20px 24px 25px;
  border-radius: 17px;
  background: var(--card);
}

.faq-card summary {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  list-style: none;
  cursor: pointer;
  font-family: var(--heading);
  font-size: 23.25px;
  line-height: 25px;
}

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

.faq-marker {
  display: block;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  background: var(--marker);
}

.marker-circle {
  border-radius: 50%;
}

.marker-diamond {
  width: 16px;
  height: 16px;
  margin: 4px 2px 0 1px;
  transform: rotate(45deg);
}

.marker-triangle {
  width: 0;
  height: 0;
  margin-top: 1px;
  border-right: 10px solid transparent;
  border-bottom: 18px solid var(--marker);
  border-left: 10px solid transparent;
  background: transparent;
}

.faq-card:not([open]) {
  padding-bottom: 22px;
}

.faq-card:not([open]) summary::after {
  content: "+";
  margin-left: auto;
  color: var(--teal);
  font-family: var(--body);
  font-size: 1.5rem;
  line-height: 1;
}

.faq-card p {
  max-width: 49ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 17.8px;
  font-weight: 400;
  line-height: 26px;
}

.compact-rewards {
  display: none;
}

.mobile-break {
  display: none;
}

.founder-card {
  position: relative;
  width: min(800px, 100%);
  min-height: 218px;
  margin: 16px auto 0;
  padding: 30px 31px 27px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  background: var(--card-light);
  box-shadow: 0 15px 25px rgba(164, 139, 95, 0.13);
}

.founder-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.founder-heading img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 5px;
}

.founder-heading h3,
.founder-heading p {
  margin: 0;
}

.founder-heading h3 {
  font-family: var(--heading);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.1;
}

.founder-heading p {
  margin-top: 5px;
  font-size: 1rem;
  line-height: 1;
}

.founder-quote {
  max-width: 88ch;
  margin: 27.5px 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 17.8px;
  font-weight: 400;
  line-height: 26px;
}

.quote-mark {
  position: absolute;
  top: 23px;
  right: 32px;
  color: var(--quote);
  font-family: var(--body);
  font-size: 6rem;
  font-weight: 400;
  line-height: 0.65;
  transform: rotate(12deg);
}

.app-screens {
  overflow: hidden;
  padding: 80px 0 0;
}

.screens-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 30px 0;
  cursor: grab;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.screens-marquee::-webkit-scrollbar {
  display: none;
}

.screens-marquee.is-dragging {
  cursor: grabbing;
}

.screens-marquee.is-dragging .screens-item {
  cursor: grabbing;
}

.screens-track {
  display: flex;
  width: max-content;
}

.screens-group {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.screens-item {
  margin-right: 28px;
  cursor: zoom-in;
}

.screens-item img {
  display: block;
  width: 195px;
  height: auto;
  aspect-ratio: 390 / 844;
  border-radius: 22px;
  box-shadow: 0 0 25px rgba(164, 139, 95, 0.2);
}

@media (prefers-color-scheme: dark) {
  .screens-item img {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.45);
  }
}

body.has-screenshot-lightbox {
  overflow: hidden;
}

.screenshot-lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0;
  background: transparent;
  opacity: 0;
  overflow: hidden;
  transition: opacity 180ms ease;
}

.screenshot-lightbox[open] {
  display: grid;
  place-items: center;
}

.screenshot-lightbox::backdrop {
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.screenshot-lightbox.is-visible {
  opacity: 1;
}

.screenshot-lightbox-image {
  width: auto;
  max-width: min(430px, calc(100vw - 40px));
  height: auto;
  max-height: calc(100dvh - 40px);
  margin: auto;
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
  object-fit: contain;
  transform: scale(0.97);
  transition: transform 180ms ease;
}

.screenshot-lightbox.is-visible .screenshot-lightbox-image {
  transform: scale(1);
}

.screenshot-lightbox-close {
  position: fixed;
  z-index: 1;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  color: #050505;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.screenshot-lightbox-close:hover {
  background: #fff;
  transform: scale(1.06);
}

.screenshot-lightbox-close span {
  font-family: Arial, sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-1px);
}

.final-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px 116px;
  text-align: center;
}

.final-cta h2 {
  font-family: var(--heading);
  font-size: 45.95px;
  font-weight: 400;
  line-height: 62px;
}

.final-cta h2 span {
  color: var(--teal);
}

.final-cta-subline {
  max-width: 46ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 17.8px;
  line-height: 26px;
}

.final-cta .download-button {
  width: 306px;
  margin-top: 28px;
}

/* Attributions page — the same card, typography, and responsive system as the
   homepage, with a readable system stack for copyright and license metadata. */
.page-attributions,
.page-accessibility {
  --legal-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.site-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.header-action-separator {
  color: var(--divider);
}

.attributions-main {
  width: min(960px, calc(100% - 128px));
  margin: 0 auto;
  padding: 56px 0 96px;
}

.attributions-intro h1 {
  margin: 0;
  font-family: var(--heading);
  font-size: 45.95px;
  font-weight: 400;
  line-height: 1.24;
}

.attributions-intro h1 span {
  color: var(--teal);
}

.attributions-lead,
.attributions-section-lead,
.attributions-license p {
  color: var(--muted);
  font-family: var(--legal-body);
  font-size: 17px;
  line-height: 27px;
}

.attributions-lead {
  max-width: 62ch;
  margin: 14px 0 0;
}

.attributions-section {
  margin-top: 52px;
}

.attributions-section h2,
.attributions-license h2 {
  margin: 0;
  font-family: var(--heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
}

.attributions-section-lead {
  margin: 10px 0 0;
}

.attributions-list {
  display: grid;
  margin-top: 24px;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.attribution-card {
  min-width: 0;
  padding: 28px 28px 30px;
  border-radius: 17px;
  background: var(--card);
}

.attribution-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.attribution-card-heading > div {
  min-width: 0;
}

.attribution-card h3 {
  margin: 0;
  font-family: var(--heading);
  font-size: 23.75px;
  font-weight: 400;
  line-height: 1.2;
}

.attribution-copyright {
  margin: 8px 0 0;
  color: var(--muted);
  font-family: var(--legal-body);
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.attribution-license {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--button-background);
  color: var(--button-ink);
  font-family: var(--heading);
  font-size: 13px;
  line-height: 1.1;
}

.attribution-specimen {
  margin: 26px 0 20px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  color: var(--ink);
  font-size: 42px;
  line-height: 1;
}

.attribution-specimen-lilita {
  font-family: var(--heading);
}

.attribution-specimen-bangers {
  font-family: "Bangers", sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.attribution-meta {
  margin: 0;
}

.attribution-meta-row {
  display: grid;
  padding-top: 10px;
  gap: 18px;
  grid-template-columns: 92px minmax(0, 1fr);
}

.attribution-meta-row + .attribution-meta-row {
  margin-top: 10px;
  border-top: 1px solid var(--divider);
}

.attribution-meta dt,
.attribution-meta dd {
  font-family: var(--legal-body);
  font-size: 14px;
  line-height: 21px;
}

.attribution-meta dt {
  color: var(--muted);
}

.attribution-meta dd {
  margin: 0;
  color: var(--ink);
}

.attribution-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  color: var(--focus);
  font-family: var(--legal-body);
  font-size: 15px;
  line-height: 22px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.attribution-source:hover,
.attribution-source:focus-visible {
  color: var(--ink);
}

.attributions-license {
  margin-top: 52px;
  padding: 28px 28px 30px;
  border-radius: 17px;
  background: var(--card-light);
}

.attributions-license p {
  max-width: 62ch;
  margin: 10px 0 0;
}

.attributions-license-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Accessibility statement — readable, reflow-friendly content that uses the
   same navigation and color tokens as the public site. */
.accessibility-main {
  width: min(800px, calc(100% - 128px));
  margin: 0 auto;
  padding: 56px 0 96px;
}

.accessibility-intro h1 {
  margin: 0;
  font-family: var(--heading);
  font-size: 45.95px;
  font-weight: 400;
  line-height: 1.24;
}

.accessibility-intro h1 span {
  color: var(--teal);
}

.accessibility-lead,
.accessibility-main p,
.accessibility-main li {
  max-width: 70ch;
  font-family: var(--legal-body, var(--body));
  font-size: 17px;
  line-height: 27px;
}

.accessibility-lead,
.accessibility-main p {
  color: var(--muted);
}

.accessibility-lead {
  margin: 14px 0 0;
}

.accessibility-review {
  margin: 18px 0 0;
  font-size: 15px !important;
  line-height: 24px !important;
}

.accessibility-section {
  margin-top: 44px;
}

.accessibility-section h2 {
  margin: 0 0 12px;
  font-family: var(--heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
}

.accessibility-section ul {
  margin: 14px 0 0;
  padding-left: 1.35rem;
}

.accessibility-section li + li {
  margin-top: 8px;
}

.accessibility-section a {
  color: var(--focus);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accessibility-callout {
  margin-top: 18px;
  padding: 20px 22px;
  border-left: 4px solid var(--focus);
  border-radius: 0 14px 14px 0;
  background: var(--card-light);
}

.accessibility-callout p {
  margin: 0;
}

.accessibility-contact {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 8px;
  color: var(--focus);
  font-family: var(--legal-body, var(--body));
  font-size: 17px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Support page (/support) — reuses the landing tokens. Lilita One is the only
   face here, form fields and user-entered text included; no system stack. */
.site-header-static {
  position: static;
  width: min(var(--wrap), calc(100% - 128px));
  margin: 0 auto;
  padding-top: 24px;
  transform: none;
}

.header-back {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
}

.header-back:hover,
.header-back:focus-visible {
  color: var(--ink);
}

.support-main {
  width: min(720px, calc(100% - 128px));
  margin: 0 auto;
  padding: 56px 0 96px;
}

.support-intro h1 {
  margin: 0;
  font-family: var(--heading);
  font-size: 45.95px;
  font-weight: 400;
  line-height: 1.24;
}

.support-intro h1 span {
  color: var(--teal);
}

.support-lead {
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 17px;
  line-height: 27px;
}

.support-card {
  margin-top: 28px;
  padding: 28px 28px 32px;
  border-radius: 17px;
  background: var(--card);
}

.support-card h2 {
  margin: 0;
  font-family: var(--heading);
  font-size: 23.75px;
  font-weight: 400;
  line-height: 1.2;
}

.support-hint {
  max-width: 52ch;
  margin: 8px 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 15px;
  line-height: 23px;
}

.support-label {
  display: block;
  margin: 22px 0 8px;
  font-family: var(--heading);
  font-size: 16px;
  line-height: 1.2;
}

.support-input {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 2px solid var(--divider);
  border-radius: 14px;
  background: var(--card-light);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 24px;
  transition: border-color 160ms ease;
}

/* Replaces the UA focus ring, which paints in the OS accent colour (orange on
   some Macs). Same 3px --focus outline the rest of the site uses, pulled in
   tight against the field instead of the global 4px offset. */
.support-input:focus-visible,
.support-file:focus-visible {
  border-color: var(--focus);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.support-input[aria-invalid="true"] {
  border-color: var(--focus);
}

.support-input:disabled,
.provider-button:disabled,
.download-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.support-textarea {
  min-height: 168px;
  resize: vertical;
}

.support-select {
  appearance: none;
  cursor: pointer;
}

.support-input-code {
  max-width: 180px;
  font-size: 22px;
  letter-spacing: 0.32em;
}

.support-counter {
  margin: 6px 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 13px;
  text-align: right;
}

.support-providers {
  display: flex;
  margin-top: 20px;
  flex-direction: column;
  gap: 16px;
}

/* Same game-button geometry as .download-button, matching the app's sign-in screen:
   white face for Apple/Google, the teal CTA face for email. */
.provider-button {
  display: inline-flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px 13px;
  border: 0;
  border-radius: 23px;
  background: var(--provider-face);
  box-shadow: 0 6px 0 var(--provider-shadow);
  color: var(--provider-ink);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.provider-button:hover,
.provider-button:focus-visible {
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--provider-shadow);
}

.provider-button[data-provider="email"] {
  background: var(--button-background);
  box-shadow: 0 6px 0 var(--teal-shadow);
  color: var(--button-ink);
}

.provider-button[data-provider="email"]:hover,
.provider-button[data-provider="email"]:focus-visible {
  box-shadow: 0 4px 0 var(--teal-shadow);
}

.provider-glyph {
  display: flex;
  width: 24px;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 24px;
}

/* Mirrors the app's `.scaledToFit().frame(width: 22, height: 22)`: the mark is
   fitted inside a 22px square, never distorted. `max-width: none` and the fixed
   flex basis are load-bearing — the global `img { max-width: 100% }` otherwise
   clamps the width to the 24px glyph box without re-deriving the height, which
   stretches a non-square mark (the Apple logo is 235x298). */
.provider-glyph img {
  width: 22px;
  height: 22px;
  max-width: none;
  flex: 0 0 22px;
  object-fit: contain;
}

.provider-glyph svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Every CTA on the support page takes the .provider-button height, so the shared
   23px radius renders the same corner curvature on all of them. Compound selector
   because the mobile block re-states `.download-button { min-height: 50px }`. */
.support-main .download-button {
  min-height: 56px;
}

.support-secondary {
  min-width: 0;
  margin-top: 14px;
  font-size: 17px;
}

.support-turnstile {
  margin-top: 24px;
  padding: 16px 18px;
  border: 2px solid var(--divider);
  border-radius: 14px;
  background: var(--card-light);
}

.support-turnstile-label {
  margin: 0;
  font-family: var(--heading);
  font-size: 16px;
  line-height: 1.2;
}

.support-turnstile-widget {
  min-height: 140px;
}

.support-turnstile-hint {
  margin-top: 8px;
}

.support-codefield {
  margin-top: 6px;
}

.support-identity {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--card-light);
}

.support-identity-line {
  display: flex;
  margin: 0;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--body);
  font-size: 16px;
}

.support-identity-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--button-background);
  color: var(--button-ink);
  font-family: var(--heading);
  font-size: 13px;
  line-height: 1.2;
}

.support-identity-badge.is-unverified {
  background: var(--marker);
}

.support-noaccount {
  margin: 18px 0 0;
}

.support-linkbutton {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--body);
  font-size: 15px;
  text-decoration: underline;
}

.support-linkbutton:hover,
.support-linkbutton:focus-visible {
  color: var(--ink);
}

/* The UA gives a file input `overflow: clip`, and the clip edge is the padding
   box — without the bottom padding it crops the file-selector button's shadow.
   Exactly the shadow's 5px, so no dead space is left under the button. */
.support-file {
  display: block;
  width: 100%;
  padding-bottom: 5px;
  color: var(--muted);
  font-family: var(--body);
  font-size: 15px;
}

.support-file::file-selector-button {
  min-height: 44px;
  margin-right: 12px;
  padding: 10px 20px 11px;
  border: 0;
  border-radius: 20px;
  background: var(--provider-face);
  box-shadow: 0 5px 0 var(--provider-shadow);
  color: var(--provider-ink);
  cursor: pointer;
  font-family: var(--heading);
  font-size: 16px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* Pseudo-element hover has to be driven off the host input. */
.support-file:hover::file-selector-button {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--provider-shadow);
}

.support-filelist {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

/* With no files picked the list is empty; its margin would otherwise sit under
   the button as dead space. */
.support-filelist:empty {
  margin-top: 0;
}

.support-fileitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--card-light);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
}

.support-fileitem + .support-fileitem {
  margin-top: 8px;
}

.support-error {
  margin: 20px 0 0;
  padding: 14px 18px;
  border: 2px solid var(--focus);
  border-radius: 14px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 23px;
}

.support-submit {
  width: 100%;
  margin-top: 28px;
}

.support-legal {
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.support-legal a {
  text-decoration: underline;
}

.support-confirmation p {
  max-width: 54ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--body);
  font-size: 16px;
  line-height: 25px;
}

.support-confirmation-email {
  color: var(--ink);
}

.support-confirmation .download-button {
  margin-top: 24px;
}

.site-footer {
  display: grid;
  width: min(var(--wrap), calc(100% - 128px));
  min-height: 232px;
  margin: 0 auto;
  padding: 64px 0 46px;
  border-top: 1px solid var(--divider);
  column-gap: 92px;
  grid-template-columns: 1fr auto auto;
  color: var(--ink);
  font-family: var(--body);
  line-height: normal;
}

.site-footer h2,
.site-footer h3,
.site-footer p {
  margin: 0;
}

.footer-brand-link {
  display: inline-flex;
  color: var(--ink);
}

.site-footer h2,
.site-footer h3 {
  font-family: var(--heading);
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.1;
}

.site-footer h3 {
  font-size: 1rem;
}

.footer-brand p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1rem;
}

.site-footer nav {
  display: flex;
  min-width: 110px;
  flex-direction: column;
  gap: 13px;
}

.site-footer nav h3 {
  margin-bottom: 8px;
}

.site-footer nav a {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  color: var(--ink);
}

.instagram-icon {
  position: relative;
  display: block;
  width: 23px;
  height: 23px;
  margin-top: 48px;
  border: 3px solid var(--marker);
  border-radius: 7px;
}

.instagram-icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid var(--marker);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.instagram-icon::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--marker);
  content: "";
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
}

.language-label {
  margin-right: 4px;
}

.language-option {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: inherit;
  line-height: inherit;
}

.language-option:hover,
.language-option.is-active {
  color: var(--ink);
}

@media (forced-colors: active) {
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .download-button,
  .provider-button,
  .support-file::file-selector-button {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .screens-marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

@media (min-width: 701px) and (max-width: 1023px) {
  .site-header {
    width: calc(100% - 64px);
  }

  .site-header-static {
    width: calc(100% - 64px);
  }

  .support-main {
    width: calc(100% - 64px);
  }

  .attributions-main {
    width: calc(100% - 64px);
  }

  .site-wordmark {
    width: 180px;
  }

  .hero {
    min-height: 732px;
    padding: 95px 32px 35px;
  }

  .hero-inner {
    min-height: 530px;
    grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.5fr);
    transform: translateY(51.5px);
  }

  .hero-copy {
    padding-top: 6px;
    transform: translateY(-30.5px);
  }

  .hero-copy h1 {
    max-width: 230px;
    font-size: 46.2px;
    line-height: 53px;
  }

  .hero-copy p {
    max-width: 215px;
    margin-top: 21.5px;
    font-size: 1.38rem;
    line-height: 29px;
    white-space: normal;
  }

  .hero-copy .download-button {
    width: 213px;
    margin-top: 9.5px;
  }

  .hero-visual {
    width: 555px;
    transform: translate(32px, -21.5px);
  }

  .features {
    margin-top: -67px;
    padding: 61.5px 32px 96px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-card {
    min-height: 367px;
    padding: 31.5px 32px 0;
  }

  .feature-card h2 {
    font-size: 23px;
  }

  .feature-card p {
    max-width: 290px;
    font-size: 17.8px;
    line-height: 26px;
  }

  .feature-art-gift {
    left: -55px;
    bottom: 10px;
    width: 294px;
  }

  .feature-art-kids {
    left: 32px;
    bottom: -62px;
    width: 288px;
  }

  .feature-card-control {
    min-height: 180px;
    grid-column: 1 / -1;
  }

  .feature-card-control .feature-copy {
    position: absolute;
    top: 50%;
    left: 32px;
    max-width: 55%;
    transform: translateY(-50%);
  }

  .feature-card-control .feature-art-helmet {
    right: 3.5%;
    bottom: 8%;
    left: auto;
    width: 24.5%;
    transform: none;
  }

  .benefits-section {
    min-height: 784px;
    padding: 96px 32px;
    background-image: image-set(
      url("/images/design/feature-pattern-tablet.avif") type("image/avif") 1x,
      url("/images/design/feature-pattern-tablet.webp") type("image/webp") 1x,
      url("/images/design/feature-pattern-tablet.png") 1x
    );
  }

  .benefit-row {
    height: 264px;
  }

  .benefit-row + .benefit-row {
    margin-top: 64px;
  }

  .benefit-copy h2 {
    font-size: 24px;
    line-height: 1.1;
  }

  .benefit-copy p {
    max-width: 340px;
    margin-top: 16px;
    font-size: 17.8px;
    line-height: 26px;
  }

  .benefit-art-living {
    width: 315.06px;
    margin-left: 18.47px;
  }

  .benefit-art-rewards-pile {
    width: 267.16px;
    margin-left: 0;
  }

  .impact {
    min-height: 484px;
  }

  .impact h2 {
    font-size: 61.5px;
    line-height: 70px;
    transform: translateY(-10.5px);
  }

  .impact .download-button {
    margin-top: 44px;
  }

  .impact-kicker {
    transform: translateY(-6.5px);
  }

  .faq-section {
    padding: 96px 32px 96px;
  }

  .faq-layout {
    min-height: 578px;
    gap: 32px;
  }

  .faq-intro h2 {
    font-size: 46.2px;
    line-height: 58px;
    transform: translateY(-4.5px);
  }

  .faq-intro img {
    width: 309.5px;
    margin-left: -3.25px;
    margin-top: 35px;
  }

  .faq-card {
    padding: 23px 24px 25.5px;
  }

  .faq-card summary {
    font-size: 19.4px;
  }

  .faq-card p {
    margin-left: 0;
    margin-top: 10.5px;
    font-size: 17.8px;
    line-height: 26px;
  }

  .desktop-rewards {
    display: none;
  }

  .compact-rewards {
    display: inline;
  }

  .founder-card {
    width: calc(100% - 64px);
    min-height: 244px;
    margin-top: 93.5px;
  }

  .app-screens {
    padding: 66px 0 0;
  }

  .screens-item {
    margin-right: 24px;
  }

  .screens-item img {
    width: 175px;
    border-radius: 20px;
  }

  .final-cta {
    justify-content: flex-start;
    padding: 0 24px 100px;
  }

  .final-cta .download-button {
    margin-top: 20.5px;
  }

  .site-footer {
    width: calc(100% - 64px);
    min-height: 267px;
    padding: 66px 0 40px;
    column-gap: 52px;
    grid-template-columns: 1fr 110px 90px;
  }

  .site-footer h2 {
    font-size: 23px;
  }

  .footer-brand p {
    margin-top: 25px;
    font-size: 15.8px;
  }

  .site-footer nav {
    min-width: 0;
    gap: 15px;
  }

  .site-footer nav h3 {
    margin-bottom: 15px;
  }
}

@media (min-width: 1024px) {
  .impact-inner {
    transform: translateY(-1px);
  }

  .impact-kicker {
    transform: translateY(-3px);
  }

  .impact .download-button {
    margin-top: 55px;
  }

  .faq-intro h2 {
    transform: translateY(-4.5px);
  }

  .final-cta {
    justify-content: flex-start;
    padding: 0 24px 160px;
  }

  .final-cta .download-button {
    margin-top: 20.5px;
  }

  .site-footer {
    min-height: 298px;
    padding: 82px 0 84px;
    column-gap: 60px;
    grid-template-columns: 1fr 110px 130px;
  }

  .site-footer h2 {
    font-size: 23px;
  }

  .site-footer nav {
    gap: 15px;
  }

  .site-footer nav h3 {
    margin-bottom: 15px;
  }
}

@media (max-width: 700px) {
  .site-header {
    top: 34px;
    width: calc(100% - 48px);
  }

  .site-header-static {
    top: 0;
    width: calc(100% - 48px);
  }

  .support-main {
    width: calc(100% - 48px);
    padding: 36px 0 72px;
  }

  .site-header-actions {
    gap: 8px;
  }

  .site-header-actions .header-back {
    font-size: 14px;
  }

  .header-action-separator {
    display: none;
  }

  .attributions-main {
    width: calc(100% - 48px);
    padding: 36px 0 72px;
  }

  .accessibility-main {
    width: calc(100% - 48px);
    padding: 36px 0 72px;
  }

  .accessibility-intro h1 {
    font-size: 34px;
  }

  .accessibility-main p,
  .accessibility-main li {
    font-size: 16px;
    line-height: 24px;
  }

  .accessibility-section h2 {
    font-size: 26px;
  }

  .attributions-intro h1 {
    font-size: 34px;
  }

  .attributions-lead,
  .attributions-section-lead,
  .attributions-license p {
    font-size: 16px;
    line-height: 24px;
  }

  .attributions-section {
    margin-top: 38px;
  }

  .attributions-section h2,
  .attributions-license h2 {
    font-size: 26px;
  }

  .attributions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .attribution-card,
  .attributions-license {
    padding: 22px 20px 26px;
  }

  .attribution-card-heading {
    gap: 10px;
  }

  .attribution-card h3 {
    font-size: 22px;
  }

  .attribution-copyright {
    font-size: 12px;
    line-height: 18px;
  }

  .attribution-license {
    padding: 5px 8px;
    font-size: 12px;
  }

  .attribution-specimen {
    font-size: 36px;
  }

  .attribution-meta-row {
    gap: 3px;
    grid-template-columns: 1fr;
  }

  .attributions-license {
    margin-top: 38px;
  }

  .attributions-license-links {
    flex-direction: column;
    gap: 0;
  }

  .support-intro h1 {
    font-size: 34px;
  }

  .support-card {
    padding: 22px 20px 26px;
  }

  .site-wordmark {
    width: 180px;
  }


  .header-download {
    display: none;
  }

  .hero {
    min-height: 0;
    padding: 91px 24px 91px;
  }

  .hero-inner {
    display: flex;
    min-height: 0;
    flex-direction: column;
    transform: none;
  }

  .hero-visual {
    order: -1;
    width: 393.433px;
    max-width: none;
    align-self: center;
    margin-left: 0;
    transform: none;
  }

  .hero-copy {
    padding-top: 64px;
    transform: none;
    align-self: stretch;
    width: 100%;
    text-align: center;
  }

  .hero-copy h1 {
    font-size: 3rem;
    line-height: 1.06;
  }

  .hero-copy p {
    max-width: 290px;
    margin: 20px auto 0;
    color: var(--muted);
    font-size: 1.48rem;
    line-height: 1.48;
    white-space: normal;
  }

  .hero-copy .download-button {
    width: 100%;
    margin-top: 12.5px;
  }

  .download-button {
    min-height: 50px;
  }

  .features {
    margin-top: 0;
    padding: 0 24px 63px;
  }

  .feature-grid {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 24px;
  }

  .feature-card,
  .feature-card-control {
    min-height: 352px;
    padding: 24px 24px 0;
  }

  .feature-card h2 {
    font-size: 1.4375rem;
  }

  .feature-card p {
    max-width: none;
    width: 100%;
    margin-top: 10.25px;
    font-size: 15.8px;
    line-height: 23px;
  }

  .feature-art-gift {
    left: -48px;
    bottom: 5px;
    width: 270px;
  }

  .feature-art-kids {
    left: 30px;
    bottom: -75px;
    width: 267px;
  }

  .feature-art-helmet {
    right: 0;
    bottom: -10.5%;
    left: auto;
    width: 85%;
    transform: none;
  }

  .benefits-section {
    position: relative;
    isolation: isolate;
    min-height: 0;
    padding: 40px 24px;
    background-image: none;
  }

  .benefits-pattern {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    padding: 24px 4px;
    pointer-events: none;
  }

  .benefits-pattern span {
    width: 50px;
    aspect-ratio: 1373 / 1500;
    background-image: image-set(
      url("/images/design/logo-mark-96.avif") type("image/avif") 1x,
      url("/images/design/logo-mark-96.webp") type("image/webp") 1x,
      url("/images/design/logo-mark.png") 1x
    );
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    opacity: 0.12;
    filter: grayscale(1) brightness(0.32) saturate(0.2) contrast(0.85);
  }

  .benefits-pattern span:nth-child(8n + 5),
  .benefits-pattern span:nth-child(8n + 6),
  .benefits-pattern span:nth-child(8n + 7),
  .benefits-pattern span:nth-child(8n + 8) {
    transform: translateX(12px);
  }

  .benefits-section > .benefit-row {
    position: relative;
    z-index: 1;
  }

  .benefit-row {
    display: flex;
    height: auto;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .benefit-row > picture.optimized-picture {
    display: block;
  }

  .benefit-row + .benefit-row {
    margin-top: 64px;
  }

  .benefit-row-rewards .benefit-copy {
    order: 2;
  }

  .benefit-copy h2 {
    font-size: 23px;
    line-height: 1.1;
  }

  .benefit-copy p {
    max-width: none;
    margin-top: 16px;
    font-size: 17.8px;
    line-height: 26px;
  }

  .benefit-art-living {
    width: 290px;
    margin: 0 auto;
  }

  .benefit-art-rewards-pile {
    width: 245.91px;
    margin: 0 auto;
  }

  .impact {
    min-height: 541px;
    padding: 80px 24px;
  }

  .impact-kicker {
    max-width: 327px;
    margin-bottom: 10px;
    font-size: 1.5rem;
    line-height: 1.4167;
  }

  .impact h2 {
    max-width: 327px;
    font-size: 3.84rem;
    line-height: 70px;
  }

  .impact .download-button {
    width: 306px;
    margin-top: 39px;
  }

  .impact-inner {
    transform: translateY(-3px);
  }

  .faq-section {
    padding: 76px 24px 76px;
  }

  .faq-layout {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 44px;
  }

  .faq-intro h2 {
    font-size: 2.8875rem;
    line-height: 58px;
  }

  .faq-intro img {
    display: none;
  }

  .faq-list {
    gap: 16px;
  }

  .faq-card {
    padding: 24px 24px 25.5px;
    border-radius: 17px;
  }

  .faq-card summary {
    gap: 17px;
    font-size: 1rem;
    line-height: 1.25;
  }

  .faq-marker {
    flex-basis: 19px;
    width: 19px;
    height: 19px;
    margin-top: 1px;
  }

  .marker-diamond {
    width: 17px;
    height: 17px;
    margin: 4px 2px 0 2px;
  }

  .marker-triangle {
    width: 0;
    height: 0;
    margin-top: 1px;
    border-right-width: 11px;
    border-bottom-width: 20px;
    border-left-width: 11px;
  }

  .faq-card p {
    width: 100%;
    margin: 14.5px 0 0;
    font-size: 1.125rem;
    line-height: 26px;
  }

  .faq-card:nth-child(2),
  .faq-card:nth-child(3) {
    padding-bottom: 24.5px;
  }

  .mobile-break {
    display: inline;
  }

  .desktop-rewards {
    display: none;
  }

  .compact-rewards {
    display: inline;
  }

  .founder-card {
    width: 100%;
    min-height: 0;
    margin-top: 104px;
    padding: 33px 23px 32px;
  }

  .founder-heading {
    gap: 16px;
  }

  .founder-heading img {
    width: 48px;
    height: 48px;
  }

  .founder-heading h3 {
    font-size: 1.125rem;
  }

  .founder-heading p {
    margin-top: 10px;
    font-size: 1rem;
  }

  .quote-mark {
    display: none;
  }

  .founder-quote {
    width: 100%;
    margin-top: 25px;
    font-size: 1.1125rem;
    line-height: 26px;
  }

  .app-screens {
    padding: 50px 0 0;
  }

  .screens-item {
    margin-right: 20px;
  }

  .screens-item img {
    width: 150px;
    border-radius: 17px;
  }

  .final-cta {
    padding: 0 24px 84px;
  }

  .final-cta h2 {
    max-width: 340px;
    font-size: 2.8875rem;
    line-height: 62px;
  }

  .final-cta .download-button {
    width: 100%;
    margin-top: 36px;
  }

  .site-footer {
    display: flex;
    width: calc(100% - 48px);
    min-height: 0;
    flex-direction: column;
    gap: 46px;
    padding: 66.5px 0 67.5px;
  }

  .footer-brand {
    margin-bottom: 18px;
  }

  .site-footer h2 {
    font-size: 23px;
  }

  .footer-brand p {
    margin-top: 16px;
    font-size: 15.8px;
  }

  .instagram-icon {
    width: 27px;
    height: 27px;
    margin-top: 34px;
  }

  .site-footer nav {
    gap: 15px;
  }

  .site-footer nav h3 {
    margin-bottom: 8.2px;
    font-size: 16px;
  }

  .site-footer nav a {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}