:root {
  --color-yellow-joy: #ecb029;
  --color-almost-black: #0f0211;
  --color-pink: #d91656;
  --color-mid-grey: #a9a9a9;
  --color-soft-grey: #f2f1f1;
  --color-bg: #ffffff;
  --color-orange: #eb5b00;
  --color-purple: #640d5f;
  --color-memories-dark: #231f20;
  --font-h1-size: 86px;
  --font-h1-line: 94.6px;
  --font-h1-card-line: 86px;
  --font-h2-size: 60px;
  --font-h2-line: 76.8px;
  --font-h3-size: 30px;
  --font-h3-line: 42px;
  --font-h4-size: 24px;
  --font-h4-line: 28px;
  --font-body-large-size: 32px;
  --font-body-large-line: 44.8px;
  --font-body-size: 18px;
  --font-body-line: 25.2px;
  --font-body-medium-size: 24px;
  --font-body-medium-line: 33.6px;
  --font-h6-size: 18px;
  --font-h6-line: 25.2px;
  --font-caption-size: 14px;
  --font-caption-line: 19.6px;
  --font-membership-price-size: 38px;
  --font-membership-price-line: 38px;
  --font-btn-size: 13px;
  --font-btn-line: 14.3px;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-fallback:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Satoshi Web", var(--font-fallback);
  --font-display: var(--font-body);
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --section-gap: 120px;
  --section-gap-mobile: 60px;
  --section-heading-extra-top-mobile: calc(var(--section-gap-mobile) * 0.5);
  --section-heading-reduced-bottom-mobile: calc(var(--space-3xl) * -0.5);
  --section-heading-size-mobile: clamp(28px, 8vw, 44px);
  --hero-title-size-adaptive: clamp(34px, 10vw, 52px);
  --container-max: 1120px;
  --container-padding: var(--space-md);
  --container-padding-mobile: 20px;
  --scroll-copy-section-gutter: 8vw;
  --scroll-copy-card-padding-inline: clamp(12px, 3vw, 40px);
  --scroll-copy-inset-inline: calc(
    var(--scroll-copy-section-gutter) + var(--scroll-copy-card-padding-inline)
  );
  --layout-wide-max: 1400px;
  --hero-banner-min-height: 100svh;
  --hero-banner-max-height: 62.5rem;
  --hero-banner-bg-position-y: 7%;
  --hero-headline-max: 1220px;
  --hero-center-gap: 100px;
  --hero-center-offset-top: 96px;
  --hero-center-offset-top-lg: 128px;
  --hero-logo-max: 7.5rem;
  --hero-logo-max-md: 9rem;
  --hero-logo-max-lg: 11.875rem;
  --hero-logo-offset: var(--space-xl);
  --letter-spacing-tight: 0.01em;
  --letter-spacing-wide: 0.12em;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --duration-fast: 150ms;
  --duration-why-yoree-hover: 200ms;
  --duration-why-yoree-expand: 520ms;
  --ease-why-yoree-hover: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-why-yoree-expand: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gradient-footer: linear-gradient(
    to bottom right,
    color-mix(in srgb, var(--color-pink) 80%, var(--color-bg)) 0%,
    color-mix(in srgb, var(--color-orange) 88%, var(--color-bg)) 42%,
    var(--color-bg) 100%
  );
  --gradient-hero-btn: linear-gradient(
    180deg,
    rgb(15 2 17 / 0.5) 0%,
    rgb(15 2 17 / 0.72) 100%
  );
  --gradient-hero-btn-hover: linear-gradient(
    90deg,
    var(--color-yellow-joy) 0%,
    var(--color-orange) 100%
  );
  --underline-offset: 2px;
  --social-link-size: 2rem;
  --social-icon-size: 1.25rem;
  --color-why-yoree-toggle-bg: rgb(15 2 17 / 0.3);
  --color-why-yoree-toggle-bg-hover: rgb(15 2 17 / 0.55);
  --gradient-why-yoree-card-hover: linear-gradient(
    to bottom,
    rgb(35 31 32 / 0.9) 0%,
    rgba(156, 59, 59, 0.7) 28%,
    rgba(156, 59, 59, 0.55) 52%,
    rgba(211, 102, 18, 0.33) 72%,
    rgba(211, 102, 18, 0.2) 88%,
    rgba(211, 102, 18, 0.1) 100%
  );
  --memories-card-max: 620px;
  --memories-card-radius: 14px;
  --memories-card-radius-pill: 100px;
  --memories-card-radius-pill-mobile: 72px;
  --memories-card-fill-opacity: 0.45;
  --memories-card-fill-opacity-mid: 0.3;
  --gradient-memories-card: linear-gradient(
    to bottom right,
    rgb(35 31 32 / var(--memories-card-fill-opacity)) 0%,
    rgb(0 0 0 / var(--memories-card-fill-opacity-mid)) 58%,
    rgb(0 0 0 / 0) 100%
  );
  --memories-card-fill-opacity-secondary: 0.52;
  --memories-card-fill-opacity-secondary-mid: 0.38;
  --gradient-memories-card-secondary: linear-gradient(
    to bottom right,
    rgb(35 31 32 / var(--memories-card-fill-opacity-secondary)) 0%,
    rgb(0 0 0 / var(--memories-card-fill-opacity-secondary-mid)) 58%,
    rgb(0 0 0 / 0) 100%
  );
  --memories-cards-offset-top: calc(var(--space-4xl) - var(--space-lg));
  --memories-cards-offset-bottom: 64px;
  --memories-cards-gap-mobile: clamp(160px, 38vw, 240px);
  --memories-card-secondary-offset-y: 320px;
  --memories-card-secondary-offset-y-md: clamp(96px, 14vw, 220px);
  --memories-card-padding-block-start: var(--space-lg);
  --memories-card-padding-block-end: var(--space-lg);
  --memories-card-padding-block-end-mobile: var(--space-2xl);
  --memories-card-padding-block-end-desktop: var(--space-4xl);
  --memories-card-padding-inline: var(--space-xl);
  --memories-card-secondary-padding-bottom-mobile: var(--space-3xl);
  --memories-card-secondary-padding-bottom: calc(
    var(--space-4xl) + var(--space-md)
  );
  --memories-card-sticky-top: 0;
  --memories-card-sticky-scroll: clamp(96px, 14vh, 336px);
  --memories-sponsor-logo-width: 337px;
  --memories-sponsor-offset-top-mobile: clamp(48px, 12vw, 96px);
  --why-yoree-card-width-adaptive: 246px;
  --why-yoree-card-width-mobile: clamp(210px, 58vw, 240px);
  --why-yoree-card-width-desktop: 307px;
  --why-yoree-card-width-mobile-max: var(--why-yoree-card-width-adaptive);
  --why-yoree-card-height-fixed: 420px;
  --why-yoree-card-radius-md: 16px;
  --why-yoree-card-padding-md: 40px;
  --why-yoree-grid-gap-md: 10px;
  --why-yoree-card-expand-factor-adaptive: 2.15;
  --why-yoree-card-expand-factor-mobile: 3.5;
  --why-yoree-card-expand-factor-desktop: 2.05;
  --why-yoree-card-expanded-max-width: min(100%, 640px);
  --why-yoree-card-expanded-max-width-mobile: calc(
    100vw - var(--container-padding)
  );
  --why-yoree-card-height: clamp(300px, 30vw, 420px);
  --why-yoree-card-toggle-size: 2.5rem;
  --why-yoree-card-toggle-icon-size: 30px;
  --why-yoree-card-content-gap: var(--space-xl);
  --why-yoree-card-title-body-gap: var(--space-sm);
  --why-yoree-card-title-size: clamp(21px, 4.8vw, 28px);
  --why-yoree-card-title-line: 1.22;
  --why-yoree-card-title-size-desktop: clamp(20px, 1.5vw, 24px);
  --why-yoree-card-title-size-desktop-lg: 24px;
  --why-yoree-card-body-size: clamp(17px, 1.75vw, 20px);
  --why-yoree-card-body-line: 1.45;
  --hero-btn-radius: 48px;
  --hero-btn-gap: 8px;
  --hero-btn-padding-block: 22px;
  --hero-btn-padding-inline: 28px;
  --hero-btn-icon-width: 24px;
  --hero-btn-icon-height: 26px;
  --hero-scroll-card-design-width: 638px;
  --hero-scroll-card-design-base: 1400px;
  --hero-scroll-card-max: clamp(
    260px,
    calc(
      var(--hero-scroll-card-design-width) * 100vw /
        var(--hero-scroll-card-design-base)
    ),
    var(--hero-scroll-card-design-width)
  );
  --hero-scroll-card-padding-block: clamp(
    16px,
    calc(40px * 100vw / var(--hero-scroll-card-design-base)),
    40px
  );
  --hero-scroll-card-padding-inline: clamp(
    16px,
    calc(40px * 100vw / var(--hero-scroll-card-design-base)),
    40px
  );
  --hero-scroll-card-radius-tl: clamp(
    10px,
    calc(16px * 100vw / var(--hero-scroll-card-design-base)),
    16px
  );
  --hero-scroll-card-radius-br: clamp(
    40px,
    calc(120px * 100vw / var(--hero-scroll-card-design-base)),
    120px
  );
  --hero-scroll-card-radius: var(--hero-scroll-card-radius-tl)
    var(--hero-scroll-card-radius-tl) var(--hero-scroll-card-radius-br)
    var(--hero-scroll-card-radius-tl);
  --hero-scroll-canvas-scale: 0.8;
  --hero-scroll-canvas-max-width: calc(
    var(--layout-wide-max) * var(--hero-scroll-canvas-scale)
  );
  --hero-scroll-canvas-aspect: 1400 / 788;
  --hero-showcase-phone-width: clamp(160px, 22vw, 280px);
  --hero-showcase-phone-overlap: clamp(56px, 8vw, 96px);
  --about-inner-max: min(100%, 933px);
  --about-nav-offset-top: calc(
    var(--hero-center-offset-top) + var(--space-3xl)
  );
  --about-back-icon-size: 44px;
  --about-back-icon-glyph-size: 11px;
  --about-back-font-size: 14px;
  --about-back-line-height: 15.4px;
  --about-back-transition-duration: 400ms;
  --about-blob-branch-size: clamp(260px, 92vw, 960px);
  --about-blob-blur: 72px;
  --gradient-about-blob-left: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    color-mix(in srgb, var(--color-yellow-joy) 48%, var(--color-bg)) 0%,
    color-mix(in srgb, var(--color-orange) 38%, var(--color-bg)) 32%,
    color-mix(in srgb, var(--color-orange) 18%, var(--color-bg)) 52%,
    transparent 78%
  );
  --gradient-about-blob-right: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    color-mix(in srgb, var(--color-pink) 44%, var(--color-bg)) 0%,
    color-mix(in srgb, var(--color-orange) 36%, var(--color-bg)) 30%,
    color-mix(in srgb, var(--color-purple) 28%, var(--color-bg)) 52%,
    transparent 78%
  );
  --hero-scroll-section-gap: clamp(72px, 9vw, 140px);
  --hero-scroll-card-bg: linear-gradient(
    180deg,
    rgb(15 2 17 / 0.8) 0%,
    rgb(15 2 17 / 0.5) 100%
  );
  --hero-scroll-card-border: rgb(255 255 255 / 0.16);
  --hero-scroll-card-highlight: rgb(255 255 255 / 0.08);
  --welcome-modal-overlay-bg: rgb(15 2 17 / 0.88);
  --welcome-modal-max-width: 1100px;
  --welcome-modal-close-size: 48px;
  --welcome-modal-aspect-ratio: 16 / 9;
  --welcome-modal-viewport-inset: calc(
    2 * var(--space-md) + var(--welcome-modal-close-size) + var(--space-lg)
  );
  --welcome-modal-max-height: calc(
    100dvh - var(--welcome-modal-viewport-inset)
  );
  --welcome-modal-width: min(
    78vw,
    var(--welcome-modal-max-width),
    calc(var(--welcome-modal-max-height) * 16 / 9)
  );
  --waitlist-modal-width: 638px;
  --waitlist-modal-width-adaptive: min(var(--waitlist-modal-width), 88vw);
  --waitlist-modal-width-mobile: min(480px, calc(100vw - 2 * var(--space-xl)));
  --waitlist-modal-padding: 40px;
  --waitlist-modal-gap: 40px;
  --waitlist-modal-radius: 16px;
  --waitlist-modal-radius-br: 120px;
  --waitlist-input-bg: #f5efe4;
  --waitlist-close-size: 48px;
  --waitlist-close-icon-size: 30px;
  --waitlist-input-padding-block: 18px;
  --waitlist-input-padding-inline: 24px;
  --color-founder-btn-bg: rgb(15 2 17 / 0.5);
  --founder-media-radius: 30px;
  --founder-media-radius-pill: 100px;
  --founder-story-media-radius: 30px 30px 120px 50px;
  --founder-btn-radius: 32px;
  --founder-btn-gap: 10px;
  --founder-btn-padding-block: 20px;
  --founder-btn-padding-inline: 30px;
  --founder-btn-icon-width: 20px;
  --founder-btn-icon-height: 22px;
  --recognition-card-radius: 16px;
  --recognition-card-ratio: 307 / 231;
  --recognition-card-max: 307px;
  --color-membership-pricing-bg: #f2efe9;
  --color-membership-founding-bg: #ffca4c;
  --color-membership-legacy-accent: #7eb8d4;
  --color-membership-badge-muted: #9e9e9e;
  --membership-panel-radius: 20px;
  --membership-dot-size: 34px;
  --membership-card-opacity-inactive: 0.72;
  --membership-header-padding-block: 24px;
  --membership-header-min-height: calc(
    var(--membership-header-padding-block) * 2 +
      var(--membership-launch-pill-padding-block) * 2 + var(--font-h6-line)
  );
  --membership-launch-pill-radius: 40px;
  --membership-launch-pill-padding-block: 8px;
  --membership-launch-pill-padding-inline: 24px;
  --color-membership-launch-pill-bg: rgb(15 2 17 / 0.1);
  --membership-pricing-divider-size: 3px;
  --membership-pricing-footer-padding-block: 4px;
  --membership-chevron-size: 14px;
  --membership-chevron-stroke: 2px;
  --membership-detail-gap: 1px;
  --membership-detail-leading-size: 12px;
  --membership-detail-leading-stroke: 2.5px;
  --membership-detail-status-size: 24px;
  --membership-detail-count-size: 28px;
  --footer-card-radius: 14px;
  --footer-card-wrap-padding-bottom: var(--space-3xl);
  --footer-card-grid-offset-top-desktop: var(--space-2xl);
  --footer-promo-gap: var(--space-2xl);
}

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

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100%;
  font-family: var(--font-body);
  color: var(--color-almost-black);
  background-color: var(--color-bg);
}

.tm {
  font-size: 0.6em;
  line-height: 0;
  vertical-align: super;
  font-weight: inherit;
  color: inherit;
  letter-spacing: 0;
}

main {
  overflow-x: clip;
  max-width: 100%;
}

.text-h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, var(--font-h1-size));
  font-weight: var(--font-weight-light);
  line-height: 1.1;
}

.text-h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, var(--font-h2-size));
  font-weight: var(--font-weight-light);
  line-height: 1.28;
}

.text-h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, var(--font-h3-size));
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.text-h4 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, var(--font-h4-size));
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}

.text-body-large {
  font-family: var(--font-body);
  font-size: clamp(18px, 2.4vw, var(--font-body-large-size));
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
}

.text-body {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, var(--font-body-size));
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
}

.text-body-medium {
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, var(--font-body-medium-size));
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.text-body-link {
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-body-line);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.text-h6 {
  font-family: var(--font-body);
  font-size: var(--font-h6-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-h6-line);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.text-caption {
  font-family: var(--font-body);
  font-size: var(--font-caption-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-caption-line);
}

.text-membership-price {
  font-family: var(--font-display);
  font-size: var(--font-membership-price-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-membership-price-line);
}

.text-btn {
  font-family: var(--font-body);
  font-size: var(--font-btn-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-btn-line);
}

.text-global-nav {
  font-family: var(--font-body);
  font-size: var(--font-btn-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-btn-line);
}

@media (min-width: 1400px) {
  .text-h1 {
    font-size: var(--font-h1-size);
    line-height: var(--font-h1-line);
  }

  .text-h2 {
    font-size: var(--font-h2-size);
    line-height: var(--font-h2-line);
  }

  .text-h3 {
    font-size: var(--font-h3-size);
    line-height: var(--font-h3-line);
  }

  .text-h4 {
    font-size: var(--font-h4-size);
    line-height: var(--font-h4-line);
  }

  .text-body-large {
    font-size: var(--font-body-large-size);
    line-height: var(--font-body-large-line);
  }

  .text-body {
    font-size: var(--font-body-size);
    line-height: var(--font-body-line);
  }

  .text-body-medium {
    font-size: var(--font-body-medium-size);
    line-height: var(--font-body-medium-line);
  }
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

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

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

@media (min-width: 1400px) {
  .container {
    max-width: var(--layout-wide-max);
    padding-inline: var(--space-xl);
  }
}

.section {
  padding-block: 0;
}

main > .section + .section {
  margin-top: var(--section-gap);
}

main + .site-footer {
  margin-top: var(--section-gap);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: 0;
  border-radius: var(--radius-full);
  font-family: inherit;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.btn:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

.btn--hero {
  gap: var(--hero-btn-gap);
  justify-content: flex-start;
  width: fit-content;
  padding: var(--hero-btn-padding-block) var(--hero-btn-padding-inline);
  border-radius: var(--hero-btn-radius);
  background: var(--gradient-hero-btn);
  color: var(--color-yellow-joy);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.btn--hero:hover {
  background: var(--gradient-hero-btn-hover);
  color: var(--color-bg);
}

.btn--hero:hover .btn--hero__icon {
  filter: brightness(0) invert(1);
}

.btn--hero__icon {
  width: var(--hero-btn-icon-width);
  height: var(--hero-btn-icon-height);
  flex-shrink: 0;
  object-fit: contain;
  transition: filter var(--duration-fast) var(--ease-out);
}

.welcome-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

.welcome-modal[hidden] {
  display: none;
}

.welcome-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--welcome-modal-overlay-bg);
}

.welcome-modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  width: var(--welcome-modal-width);
}

.welcome-modal__content {
  width: 100%;
  aspect-ratio: var(--welcome-modal-aspect-ratio);
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-almost-black);
}

.welcome-modal__video-wrap {
  width: 100%;
  height: 100%;
}

.welcome-modal__iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.welcome-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--welcome-modal-close-size);
  height: var(--welcome-modal-close-size);
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-almost-black);
  color: var(--color-yellow-joy);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.welcome-modal__close:focus-visible {
  outline: 2px solid var(--color-yellow-joy);
  outline-offset: 2px;
}

.waitlist-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

.waitlist-modal[hidden] {
  display: none;
}

.waitlist-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--welcome-modal-overlay-bg);
}

.waitlist-modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--waitlist-modal-gap);
  width: min(100%, var(--waitlist-modal-width));
  padding: var(--waitlist-modal-padding);
  background-color: var(--color-yellow-joy);
  border-radius: var(--waitlist-modal-radius) var(--waitlist-modal-radius)
    var(--waitlist-modal-radius-br) var(--waitlist-modal-radius);
  color: var(--color-almost-black);
}

.waitlist-modal__view {
  display: grid;
  gap: var(--waitlist-modal-gap);
}

.waitlist-modal__view[hidden] {
  display: none;
}

.waitlist-modal__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  justify-self: start;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-almost-black);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  cursor: pointer;
}

.waitlist-modal__close:focus-visible {
  outline: 2px solid var(--color-almost-black);
  outline-offset: 2px;
}

.waitlist-modal__close-label {
  font-weight: var(--font-weight-bold);
}

.waitlist-modal__close-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--waitlist-close-size);
  height: var(--waitlist-close-size);
  border-radius: var(--radius-full);
  background-color: var(--color-almost-black);
  color: var(--color-yellow-joy);
  font-size: var(--waitlist-close-icon-size);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.waitlist-modal__close-icon::before {
  content: "×";
  display: block;
  transform: translateY(1px);
}

.waitlist-modal__close:hover .waitlist-modal__close-icon,
.waitlist-modal__close:focus-visible .waitlist-modal__close-icon {
  background-color: var(--color-bg);
  color: var(--color-yellow-joy);
}

.waitlist-modal__title {
  color: var(--color-almost-black);
}

.waitlist-modal__form {
  display: grid;
  gap: var(--waitlist-modal-gap);
}

.waitlist-modal__input {
  width: 100%;
  border: 0;
  border-radius: var(--radius-full);
  padding: var(--waitlist-input-padding-block)
    var(--waitlist-input-padding-inline);
  background-color: var(--waitlist-input-bg);
  color: var(--color-almost-black);
  letter-spacing: var(--letter-spacing-wide);
}

.waitlist-modal__input::placeholder {
  color: var(--color-almost-black);
  opacity: 1;
  text-transform: uppercase;
}

.waitlist-modal__input:focus-visible {
  outline: 2px solid var(--color-almost-black);
  outline-offset: 2px;
}

.btn--waitlist {
  justify-self: start;
  padding: var(--space-md) var(--space-xl);
  background-color: var(--color-almost-black);
  color: var(--color-yellow-joy);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  transition: color 350ms var(--ease-why-yoree-hover);
}

.btn--waitlist:hover,
.btn--waitlist:focus-visible {
  background-color: var(--color-almost-black);
  color: var(--color-bg);
}

.waitlist-modal__message {
  color: var(--color-almost-black);
  font-weight: var(--font-weight-light);
}

@media (max-width: 1399px) {
  .waitlist-modal__panel {
    width: var(--waitlist-modal-width-adaptive);
    padding: clamp(24px, 4.5vw, var(--waitlist-modal-padding));
    gap: clamp(20px, 4vw, var(--waitlist-modal-gap));
    border-radius: clamp(12px, 2vw, var(--waitlist-modal-radius))
      clamp(12px, 2vw, var(--waitlist-modal-radius))
      clamp(56px, 14vw, var(--waitlist-modal-radius-br))
      clamp(12px, 2vw, var(--waitlist-modal-radius));
  }

  .waitlist-modal__view,
  .waitlist-modal__form {
    gap: clamp(20px, 4vw, var(--waitlist-modal-gap));
  }

  .waitlist-modal__title.text-h2 {
    font-size: clamp(24px, 5.5vw, 44px);
    line-height: 1.2;
  }

  .waitlist-modal__close-icon {
    width: clamp(36px, 9vw, var(--waitlist-close-size));
    height: clamp(36px, 9vw, var(--waitlist-close-size));
    font-size: clamp(20px, 5vw, var(--waitlist-close-icon-size));
  }

  .waitlist-modal__input {
    --waitlist-input-padding-block: clamp(12px, 3vw, 18px);
    --waitlist-input-padding-inline: clamp(16px, 4vw, 24px);
  }

  .btn--waitlist {
    padding: clamp(12px, 3vw, var(--space-md)) clamp(20px, 5vw, var(--space-xl));
  }

  .waitlist-modal__message.text-body-large {
    font-size: clamp(16px, 4vw, 24px);
    line-height: 1.4;
  }
}

@media (max-width: 768px) {
  .waitlist-modal {
    padding: var(--space-lg);
  }

  .waitlist-modal__panel {
    width: var(--waitlist-modal-width-mobile);
    max-width: none;
    max-height: calc(100dvh - 2 * var(--space-lg));
    overflow-y: auto;
    padding: clamp(20px, 5vw, 28px);
    gap: clamp(16px, 4vw, 24px);
    border-radius: 12px 12px clamp(48px, 20vw, 72px) 12px;
  }

  .waitlist-modal__view,
  .waitlist-modal__form {
    gap: clamp(16px, 4vw, 24px);
  }

  .waitlist-modal__title.text-h2 {
    font-size: clamp(22px, 6.5vw, 32px);
  }

  .waitlist-modal__close-icon {
    width: clamp(32px, 10vw, 40px);
    height: clamp(32px, 10vw, 40px);
    font-size: clamp(18px, 5.5vw, 24px);
  }

  .waitlist-modal__input {
    --waitlist-input-padding-block: clamp(10px, 2.8vw, 14px);
    --waitlist-input-padding-inline: clamp(14px, 4vw, 20px);
  }

  .btn--waitlist {
    padding: clamp(10px, 2.8vw, 14px) clamp(16px, 5vw, 24px);
  }
}

.site-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--gradient-footer);
}

.site-footer__seo {
  block-size: 2px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.site-footer__seo p {
  margin: 0;
  font-size: 2px;
  line-height: 2px;
}

.site-footer__panel {
  display: grid;
  gap: var(--footer-promo-gap);
  width: 100%;
  background: transparent;
}

.site-footer__promo {
  display: grid;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl) 0;
}

.site-footer__launch {
  color: var(--color-bg);
}

.site-footer__promo-grid {
  display: grid;
  gap: var(--space-xl);
  min-width: 0;
}

.site-footer__promo-title {
  color: var(--color-almost-black);
}

.site-footer__promo-main {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
  min-width: 0;
}

.site-footer__promo-note {
  color: var(--color-almost-black);
  font-style: italic;
}

.btn--footer {
  justify-self: start;
  font-family: var(--font-body);
  font-size: var(--font-btn-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-btn-line);
  background-color: var(--color-almost-black);
  color: var(--color-yellow-joy);
  padding: var(--space-md) var(--space-xl);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.btn--footer:hover {
  background-color: var(--color-yellow-joy);
  color: var(--color-bg);
}

.btn--founder-video {
  gap: var(--founder-btn-gap);
  width: fit-content;
  padding: var(--founder-btn-padding-block) var(--founder-btn-padding-inline);
  border-radius: var(--founder-btn-radius);
  background-color: var(--color-founder-btn-bg);
  color: var(--color-bg);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.btn--founder-video:hover {
  background-color: var(--color-yellow-joy);
  color: var(--color-bg);
}

.btn--founder-video:hover .btn--founder-video__icon {
  filter: brightness(0) invert(1);
}

.btn--founder-video__icon {
  width: var(--founder-btn-icon-width);
  height: var(--founder-btn-icon-height);
  flex-shrink: 0;
  object-fit: contain;
  transition: filter var(--duration-fast) var(--ease-out);
}

.site-footer__promo-aside {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.site-footer__promo-text {
  color: var(--color-almost-black);
}

.site-footer__promo-text--lead {
  font-weight: var(--font-weight-light);
}

.site-footer__promo-text--lead .site-footer__promo-line:last-child {
  font-weight: var(--font-weight-bold);
}

.site-footer__promo-line {
  display: block;
}

.site-footer__promo-text .site-footer__inline-link {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.site-footer__inline-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-orange);
}

.site-footer__inline-link--light {
  color: var(--color-bg);
}

.site-footer__inline-link:hover {
  color: var(--color-purple);
}

.site-footer__inline-link--light:hover {
  color: var(--color-bg);
}

.site-footer__card-wrap {
  padding-bottom: var(--footer-card-wrap-padding-bottom);
}

.site-footer__card {
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-2xl);
  background: var(--color-bg);
  border-radius: var(--footer-card-radius);
}

.site-footer__card-title,
.site-footer__card-text {
  font-weight: var(--font-weight-light);
  color: var(--color-almost-black);
}

.site-footer__card-line {
  display: block;
  white-space: nowrap;
}

.site-footer__card-text .site-footer__inline-link {
  font-size: inherit;
  line-height: inherit;
}

.site-footer__card-grid {
  display: grid;
  gap: var(--space-xl);
}

.site-footer__nav {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}

.site-footer__nav a {
  color: var(--color-orange);
}

.site-footer__nav a:hover {
  color: var(--color-purple);
}

.site-footer__address {
  display: grid;
  gap: var(--space-sm);
}

.site-footer__address-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-almost-black);
}

.site-footer__address-text {
  color: var(--color-almost-black);
}

.site-footer__meta-link {
  font-size: inherit;
  line-height: inherit;
}

.site-footer__address .site-footer__inline-link {
  text-decoration: none;
}

.site-footer__address-line {
  display: block;
  white-space: nowrap;
}

.site-footer__legal-copy {
  color: var(--color-almost-black);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-footer__social-link {
  display: grid;
  place-items: center;
  width: var(--social-link-size);
  height: var(--social-link-size);
  color: var(--color-almost-black);
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__social-link:hover {
  color: var(--color-orange);
}

.site-footer__social-icon {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  object-fit: contain;
}

@media (max-width: 1399px) {
  .site-footer__promo-line,
  .site-footer__card-line,
  .site-footer__address-line {
    white-space: normal;
  }

  .site-footer__card-line {
    display: inline;
  }
}

@media (max-width: 768px) {
  .site-footer,
  .site-footer__panel,
  .site-footer__card {
    min-width: 0;
    max-width: 100%;
  }

  .site-footer__promo-line,
  .site-footer__card-line,
  .site-footer__address-line {
    white-space: normal;
  }

  .site-footer__promo-aside {
    gap: var(--space-md);
    padding-bottom: 0;
  }

  .site-footer__promo {
    padding-bottom: 0;
  }

  .site-footer__card {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
  }

  .site-footer__card .site-footer__card-title,
  .site-footer__card .site-footer__card-text {
    grid-column: 1;
  }

  .site-footer__card .site-footer__card-title {
    grid-row: auto;
  }

  .site-footer__card .site-footer__card-text {
    grid-row: auto;
  }

  .site-footer__card-grid {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: 1fr;
  }

  .site-footer__nav,
  .site-footer__address,
  .site-footer__legal-copy,
  .site-footer__social {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }

  .site-footer__address {
    gap: var(--space-2xs);
  }

  .site-footer__address-label {
    display: none;
  }

  .site-footer__address .site-footer__address-text::before {
    content: "Registered address ";
    font-weight: var(--font-weight-medium);
  }

  .site-footer__address-line {
    display: inline;
    white-space: normal;
  }

  .site-footer__address-line:not(:last-child)::after {
    content: ", ";
  }

  .site-footer__legal-copy {
    font-size: 10px;
    line-height: 1.4;
    color: var(--color-mid-grey);
  }

  .site-footer__card-grid .text-body,
  .site-footer__card-grid .site-footer__meta-link {
    font-size: 12px;
    line-height: 1.45;
  }

  .site-footer__social {
    margin-top: var(--space-xs);
    opacity: 0.5;
  }

  .site-footer__social-icon {
    width: 1rem;
    height: 1rem;
  }
}

@media (min-width: 769px) {
  .site-footer__promo {
    padding-block: var(--space-4xl) 0;
  }

  .site-footer__promo-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
    gap: var(--space-4xl);
    align-items: first baseline;
  }

  .site-footer__card {
    padding: var(--space-3xl);
  }

  .site-footer__card-grid {
    grid-template-columns: 1fr 1.2fr auto;
    gap: var(--space-2xl);
    align-items: start;
    margin-top: var(--footer-card-grid-offset-top-desktop);
  }

  .site-footer__legal-copy {
    justify-self: end;
    text-align: right;
  }
}

@media (min-width: 1400px) {
  .site-footer__card-wrap {
    padding-bottom: var(--space-4xl);
  }
}

.hero.section {
  padding-block: 0;
}

.hero__banner {
  position: relative;
  overflow: hidden;
  min-height: var(--hero-banner-min-height);
  max-height: var(--hero-banner-max-height);
}

.hero__banner-bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/hero/bg.jpg");
  background-size: cover;
  background-position: center var(--hero-banner-bg-position-y);
  background-repeat: no-repeat;
}

@media (max-width: 1399px) {
  .hero.section {
    max-width: 100%;
    overflow-x: clip;
  }

  .hero__banner {
    width: 100%;
    max-width: 100%;
    /* Static svh on purpose (not dvh): dvh tracks the mobile browser's
       address bar live during scroll, which changes the page's total
       height mid-gesture and causes visible scroll jitter/rubber-banding. */
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero__banner-bg {
    inset: 0;
    background-position: center center;
    transform: scale(1.22);
    transform-origin: center center;
  }

  .hero__title {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .hero__banner-bg {
    background-position: 54% 26%;
    transform: scale(1.35);
    transform-origin: 54% 26%;
  }
}

.hero__banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: inherit;
  padding-block: var(--space-xl) var(--space-3xl);
}

.hero__center {
  display: grid;
  gap: var(--hero-center-gap);
  justify-items: center;
  width: 100%;
  max-width: var(--hero-headline-max);
  margin-inline: auto;
  margin-block: auto;
  padding-top: var(--hero-center-offset-top);
}

.hero__logo {
  position: absolute;
  top: var(--hero-logo-offset);
  inset-inline-start: var(--hero-logo-offset);
  z-index: 2;
  width: auto;
  max-width: var(--hero-logo-max);
}

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

.hero__headline {
  display: grid;
  gap: var(--space-lg);
  width: 100%;
  text-align: center;
}

.hero__title {
  font-size: clamp(13px, 3.8vw, var(--font-h1-size));
  line-height: 1.1;
  color: var(--color-bg);
  letter-spacing: var(--letter-spacing-tight);
  white-space: nowrap;
}

@media (min-width: 1400px) {
  .hero__title {
    font-size: var(--font-h1-size);
    line-height: var(--font-h1-line);
  }
}

@media (max-width: 1399px) {
  .hero__title {
    font-size: var(--hero-title-size-adaptive);
    line-height: 1.12;
    white-space: normal;
    text-wrap: balance;
  }
}

.hero__launch {
  font-weight: var(--font-weight-light);
  color: var(--color-yellow-joy);
}

.hero__scroll {
  position: relative;
  width: 100%;
}

.hero__scroll-inner {
  display: grid;
  gap: var(--hero-scroll-section-gap);
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-2xl);
}

.hero__scroll-lead {
  max-width: var(--layout-wide-max);
  margin-inline: auto;
  text-align: center;
  color: var(--color-yellow-joy);
}

.hero__scroll-lead-line {
  display: block;
  white-space: nowrap;
}

.hero__scroll-section {
  display: flex;
  justify-content: center;
}

.hero__scroll-visual {
  position: relative;
  width: min(100%, var(--hero-scroll-canvas-max-width));
  overflow: hidden;
}

.hero__scroll-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--hero-scroll-canvas-aspect);
  object-fit: cover;
}

.hero__scroll-visual--o-ring {
  display: grid;
  place-items: center;
  aspect-ratio: unset;
  overflow: visible;
  background-color: var(--color-bg);
  padding-block: clamp(var(--space-xs), 1.5vw, var(--space-md));
}

.hero__scroll-img--o-ring {
  width: min(58%, 520px);
  height: auto;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.hero__scroll-card {
  width: min(100%, var(--hero-scroll-card-max));
  flex-shrink: 0;
}

.hero__scroll-visual .hero__scroll-card--box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  max-width: calc(100% - 2 * var(--space-lg));
}

.hero__scroll-card--shift-left {
  left: var(--space-lg);
  right: auto;
}

.hero__scroll-card--shift-right {
  right: var(--space-lg);
  left: auto;
}

.hero__scroll-card--box {
  width: min(100%, var(--hero-scroll-card-max));
  padding: var(--hero-scroll-card-padding-block)
    var(--hero-scroll-card-padding-inline);
  border-radius: var(--hero-scroll-card-radius);
  border: 1px solid var(--hero-scroll-card-border);
  background: var(--hero-scroll-card-bg);
  box-shadow:
    inset 0 1px 0 var(--hero-scroll-card-highlight),
    inset 0 -1px 0 rgb(0 0 0 / 0.18),
    0 12px 32px rgb(15 2 17 / 0.2);
  color: var(--color-bg);
}

.hero__scroll-card-text {
  text-align: left;
}

.hero__scroll-card--box strong {
  font-weight: var(--font-weight-bold);
}

@media (max-width: 1199px) {
  :root {
    --hero-scroll-card-design-base: 1150px;
    --hero-scroll-card-max: clamp(
      300px,
      calc(
        var(--hero-scroll-card-design-width) * 100vw /
          var(--hero-scroll-card-design-base)
      ),
      var(--hero-scroll-card-design-width)
    );
    --hero-scroll-card-padding-block: clamp(
      18px,
      calc(40px * 100vw / var(--hero-scroll-card-design-base)),
      40px
    );
    --hero-scroll-card-padding-inline: clamp(
      18px,
      calc(40px * 100vw / var(--hero-scroll-card-design-base)),
      40px
    );
    --hero-scroll-card-radius-tl: clamp(
      12px,
      calc(16px * 100vw / var(--hero-scroll-card-design-base)),
      16px
    );
    --hero-scroll-card-radius-br: clamp(
      48px,
      calc(120px * 100vw / var(--hero-scroll-card-design-base)),
      120px
    );
    --hero-scroll-card-radius: var(--hero-scroll-card-radius-tl)
      var(--hero-scroll-card-radius-tl) var(--hero-scroll-card-radius-br)
      var(--hero-scroll-card-radius-tl);
  }

  .hero__scroll-inner {
    gap: clamp(72px, 10vw, 120px);
  }
}

@media (min-width: 577px) {
  :root {
    --hero-scroll-card-max: 440px;
    --hero-scroll-card-padding-block: 32px;
    --hero-scroll-card-padding-inline: 32px;
    --hero-scroll-card-radius-tl: 16px;
    --hero-scroll-card-radius-br: 120px;
    --hero-scroll-card-radius: 16px 16px 120px 16px;
  }

  .hero__scroll-card--box,
  .hero__scroll-visual .hero__scroll-card--box {
    width: min(440px, calc(100% - 2 * var(--space-xl)));
    max-width: calc(100% - 2 * var(--space-xl));
  }
}

@media (max-width: 767px) {
  .hero__scroll-inner {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-2xl);
    gap: clamp(64px, 16vw, 120px);
  }

  .hero__scroll-lead {
    padding-inline: var(--space-sm);
    font-size: clamp(28px, 7.5vw, 40px);
    line-height: 1.2;
  }

  .hero__scroll-lead-line {
    white-space: normal;
  }

  .hero__scroll-section {
    width: 100%;
  }

  .hero__scroll-visual {
    width: 100%;
    max-width: none;
  }

  .hero__scroll-img {
    width: 100%;
    aspect-ratio: var(--hero-scroll-canvas-aspect);
    object-fit: cover;
    object-position: center center;
  }

  .hero__scroll-img--o-ring {
    width: min(78%, 320px);
    aspect-ratio: 1;
    object-fit: contain;
  }

  .hero__scroll-visual--o-ring {
    overflow: visible;
    padding-block: clamp(var(--space-sm), 3vw, var(--space-lg));
  }

  .hero__scroll-visual .hero__scroll-card--box {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    width: min(440px, calc(100% - 2 * var(--space-xl)));
    max-width: calc(100% - 2 * var(--space-xl));
    transform: translate(-50%, -50%);
  }

  .hero__scroll-card--shift-left,
  .hero__scroll-card--shift-right {
    left: 50%;
    right: auto;
  }
}

@media (max-width: 576px) {
  .hero__scroll-visual .hero__scroll-card--box {
    width: min(78%, calc(100% - 2 * var(--space-xl)));
    max-width: calc(100% - 2 * var(--space-xl));
  }
}

@media (min-width: 1400px) {
  :root {
    --hero-scroll-card-max: var(--hero-scroll-card-design-width);
    --hero-scroll-card-padding-block: 40px;
    --hero-scroll-card-padding-inline: 40px;
    --hero-scroll-card-radius-tl: 16px;
    --hero-scroll-card-radius-br: 120px;
    --hero-scroll-card-radius: 16px 16px 120px 16px;
  }

  .hero__scroll-card--box,
  .hero__scroll-visual .hero__scroll-card--box {
    width: min(
      var(--hero-scroll-card-design-width),
      calc(100% - 2 * var(--space-xl))
    );
    max-width: calc(100% - 2 * var(--space-xl));
  }
}

@media (min-width: 576px) {
  :root {
    --hero-logo-offset: var(--space-2xl);
    --hero-btn-radius: 60px;
    --hero-btn-gap: 10px;
    --hero-btn-padding-block: 30px;
    --hero-btn-padding-inline: 35px;
    --hero-btn-icon-width: 30px;
    --hero-btn-icon-height: 33px;
  }

  .hero__banner-inner {
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .hero__logo {
    max-width: var(--hero-logo-max-md);
  }
}

@media (min-width: 768px) {
  .hero__banner-inner {
    padding-block: var(--space-2xl) var(--space-3xl);
  }
}

@media (min-width: 1200px) {
  :root {
    --hero-logo-offset: var(--space-3xl);
  }

  .hero__banner-inner {
    padding-block: var(--space-3xl) var(--space-4xl);
  }

  .hero__center {
    padding-top: var(--hero-center-offset-top-lg);
  }

  .hero__logo {
    max-width: var(--hero-logo-max-lg);
  }
}

@media (min-width: 1400px) {
  .hero__banner-inner {
    max-width: var(--layout-wide-max);
    padding-inline: var(--space-xl);
  }
}

.hero.section + .hero-showcase.section {
  margin-top: 0;
}

.hero-showcase.section {
  position: relative;
  z-index: 2;
  width: 100%;
  background-color: var(--color-bg);
  padding-top: clamp(48px, 8vw, 80px);
  padding-bottom: var(--space-3xl);
}

.hero-showcase.section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 50vh;
  background-color: var(--color-bg);
  pointer-events: none;
}

.memories.section,
.why-yoree.section {
  position: relative;
  z-index: 3;
}

.hero-showcase.section + .memories.section {
  margin-top: var(--space-3xl);
}

.memories.section + .why-yoree.section {
  margin-top: var(--space-4xl);
}

.hero-showcase__wrap {
  width: 100%;
}

.hero-showcase__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
}

.hero-showcase__phones,
.hero-showcase__copy {
  min-width: 0;
}

.hero-showcase__copy {
  width: 100%;
  max-width: 36rem;
}

.hero-showcase__text.text-body-large {
  max-width: none;
  color: var(--color-almost-black);
  font-family: var(--font-body);
  font-size: clamp(18px, 2.4vw, var(--font-body-large-size));
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
}

@media (min-width: 1400px) {
  .hero-showcase__text.text-body-large {
    font-size: var(--font-body-large-size);
    line-height: var(--font-body-large-line);
  }
}

.hero-showcase__phones {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 36rem;
  padding-block: 20px;
  overflow: visible;
  isolation: isolate;
  container-type: inline-size;
}

.hero-showcase__phone {
  display: block;
  width: clamp(110px, 38cqi, 280px);
  height: auto;
  flex-shrink: 0;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgb(15 2 17 / 0.12);
}

.hero-showcase__phone--left {
  z-index: 1;
  margin-right: calc(-1 * clamp(36px, 12cqi, 96px));
  transform: translateY(18px);
}

.hero-showcase__phone--center {
  z-index: 3;
  transform: translateY(-12px);
}

.hero-showcase__phone--right {
  z-index: 2;
  margin-left: calc(-1 * clamp(36px, 12cqi, 96px));
  transform: translateY(18px);
}

@media (min-width: 768px) {
  .hero-showcase {
    --hero-showcase-phone-width: clamp(160px, 20vw, 280px);
    --hero-showcase-phone-overlap: clamp(48px, 6vw, 96px);
  }

  .hero-showcase__layout {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  }

  .hero-showcase__phones {
    flex: 0 1 auto;
    width: auto;
    max-width: min(
      58%,
      calc(
        3 * var(--hero-showcase-phone-width) - 2 *
          var(--hero-showcase-phone-overlap)
      )
    );
    padding-block: 24px;
    container-type: normal;
  }

  .hero-showcase__phone {
    width: var(--hero-showcase-phone-width);
  }

  .hero-showcase__phone--left {
    margin-right: calc(-1 * var(--hero-showcase-phone-overlap));
  }

  .hero-showcase__phone--right {
    margin-left: calc(-1 * var(--hero-showcase-phone-overlap));
  }

  .hero-showcase__copy {
    flex: 0 1 36rem;
    width: auto;
    max-width: min(48%, 36rem);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .hero-showcase {
    --hero-showcase-phone-width: clamp(140px, 17vw, 240px);
    --hero-showcase-phone-overlap: clamp(40px, 5vw, 80px);
  }
}

@media (min-width: 1200px) {
  .hero-showcase.section {
    padding-top: var(--section-gap);
    padding-bottom: var(--space-3xl);
  }
}

.memories.section {
  position: relative;
  width: 100%;
  padding-block: 0;
}

@media (max-width: 1399px) {
  .memories.section {
    aspect-ratio: auto;
    min-height: clamp(640px, 88svh, 1200px);
    overflow-x: clip;
  }

  .memories__card-line {
    white-space: normal;
  }

  .memories__sponsor-logo {
    width: clamp(260px, 28vw, var(--memories-sponsor-logo-width));
  }
}

@media (max-width: 1399px) and (min-width: 769px) {
  .memories__card {
    padding-block: clamp(var(--space-md), 2.2vw, var(--space-xl))
      clamp(var(--space-2xl), 3.5vw, var(--space-4xl));
    padding-inline: clamp(var(--space-lg), 3vw, var(--space-2xl));
  }
}

@media (min-width: 1400px) {
  .memories.section {
    aspect-ratio: 1400 / 1338.8;
  }
}

.memories__bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/memories/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.memories__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  height: 100%;
  min-height: 100%;
  padding-block: var(--space-3xl) var(--space-2xl);
}

.memories__sponsor {
  display: grid;
  gap: var(--space-2xs);
  justify-items: center;
  margin-top: auto;
  margin-bottom: var(--memories-cards-offset-bottom);
  text-align: center;
}

.memories__sponsor-label {
  color: var(--color-memories-dark);
}

.memories__sponsor-logo {
  width: var(--memories-sponsor-logo-width);
  max-width: 100%;
  height: auto;
}

.memories__cards {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
  margin-top: var(--memories-cards-offset-top);
}

.memories__card--secondary {
  border-radius: var(--memories-card-radius) var(--memories-card-radius)
    var(--memories-card-radius-pill) var(--memories-card-radius);
  background: var(--gradient-memories-card-secondary);
  padding-bottom: var(--memories-card-secondary-padding-bottom);
  margin-bottom: var(--memories-card-sticky-scroll);
}

.memories__card {
  display: grid;
  gap: var(--space-md);
  max-width: var(--memories-card-max);
  padding-block: var(--memories-card-padding-block-start)
    var(--memories-card-padding-block-end);
  padding-inline: var(--memories-card-padding-inline);
  background: var(--gradient-memories-card);
  color: var(--color-bg);
}

.memories__card--primary {
  z-index: 1;
  border-radius: var(--memories-card-radius) var(--memories-card-radius)
    var(--memories-card-radius) var(--memories-card-radius-pill);
}

.memories__card-text {
  font-weight: var(--font-weight-light);
}

.memories__card-line {
  display: block;
  white-space: nowrap;
}

@media (min-width: 769px) {
  .memories__card--secondary {
    padding-bottom: calc(var(--space-4xl) + var(--space-xl));
  }
}

@media (max-width: 767px) {
  .hero-showcase__layout {
    gap: var(--space-3xl);
  }

  .hero-showcase__copy {
    align-self: stretch;
    width: 100%;
    max-width: none;
    padding-inline: calc(
      var(--scroll-copy-inset-inline) - var(--container-padding)
    );
    text-align: left;
  }

  .hero-showcase.section {
    padding-top: clamp(64px, 12vw, 96px);
    padding-bottom: var(--space-lg);
  }

  .hero-showcase.section + .memories.section {
    margin-top: var(--space-lg);
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: var(--container-padding-mobile);
    --memories-card-radius-pill: var(--memories-card-radius-pill-mobile);
  }

  main > .section + .section,
  main + .site-footer {
    margin-top: var(--section-gap-mobile);
  }

  .hero.section + .hero-showcase.section {
    margin-top: 0;
  }

  .memories.section + .why-yoree.section {
    margin-top: var(--space-2xl);
  }

  .memories.section {
    min-height: clamp(780px, 155vw, 960px);
  }

  .memories__inner {
    gap: var(--space-xl);
    height: auto;
    min-height: 100%;
    padding-block: var(--space-3xl) var(--space-xl);
  }

  .memories__cards {
    grid-template-columns: 1fr;
    gap: var(--memories-cards-gap-mobile);
    margin-top: var(--space-xl);
  }

  .memories__card {
    width: 100%;
    max-width: none;
    --memories-card-padding-block-end: var(
      --memories-card-padding-block-end-mobile
    );
    padding-block: var(--memories-card-padding-block-start)
      var(--memories-card-padding-block-end);
    padding-inline: var(--memories-card-padding-inline);
  }

  .memories__card--primary {
    position: static;
    top: auto;
  }

  .memories__card--secondary {
    transform: none;
    margin-top: var(--space-lg);
    margin-bottom: 0;
    padding-bottom: var(--memories-card-secondary-padding-bottom-mobile);
  }

  .memories__sponsor {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: var(--memories-sponsor-offset-top-mobile);
  }

  .memories__sponsor-logo {
    width: clamp(260px, 58vw, 320px);
  }
}

@media (min-width: 769px) {
  .memories__inner {
    gap: var(--space-3xl);
    padding-block: var(--space-4xl) var(--space-2xl);
  }

  .memories__cards {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: var(--space-2xl);
  }

  .memories__card {
    width: 100%;
    max-width: none;
    --memories-card-padding-block-start: var(--space-xl);
    --memories-card-padding-block-end: var(
      --memories-card-padding-block-end-desktop
    );
    --memories-card-padding-inline: var(--space-2xl);
    padding-block: var(--memories-card-padding-block-start)
      var(--memories-card-padding-block-end);
    padding-inline: var(--memories-card-padding-inline);
  }

  .memories__card--primary {
    position: sticky;
    top: var(--memories-card-sticky-top);
    justify-self: stretch;
    align-self: start;
  }

  .memories__card--secondary {
    justify-self: stretch;
    align-self: end;
    transform: translateY(var(--memories-card-secondary-offset-y));
    margin-bottom: calc(
      var(--memories-card-secondary-offset-y) +
        var(--memories-card-sticky-scroll)
    );
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  :root {
    --memories-card-secondary-offset-y-md: clamp(112px, 17vw, 220px);
  }
}

@media (min-width: 769px) and (max-width: 1399px) {
  .memories__cards {
    min-width: 0;
  }

  .memories__card {
    min-width: 0;
    padding-block: clamp(var(--space-md), 2vw, var(--space-xl))
      clamp(var(--space-2xl), 3.4vw, var(--space-4xl));
    padding-inline: clamp(var(--space-lg), 2.5vw, var(--space-2xl));
  }

  .memories__card--secondary {
    transform: translateY(var(--memories-card-secondary-offset-y-md));
    margin-bottom: calc(
      var(--memories-card-secondary-offset-y-md) +
        var(--memories-card-sticky-scroll)
    );
  }
}

@media (min-width: 1400px) {
  .memories__inner {
    max-width: var(--layout-wide-max);
  }
}

.why-yoree__inner {
  display: grid;
  gap: var(--space-3xl);
}

.why-yoree.section {
  overflow-x: clip;
  max-width: 100%;
}

@media (max-width: 1399px) {
  .why-yoree__title {
    font-size: var(--hero-title-size-adaptive);
    line-height: 1.12;
    text-wrap: balance;
  }
}

.why-yoree__grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--why-yoree-grid-gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  --why-yoree-grid-gap: var(--space-lg);
  --why-yoree-card-width: clamp(240px, 72vw, 307px);
  --why-yoree-card-expanded-width: min(
    calc(var(--why-yoree-card-width) * 2 + var(--why-yoree-grid-gap)),
    100%
  );
  --why-yoree-card-expanded-width-adaptive: min(
    calc(
      var(--why-yoree-card-width) *
        var(--why-yoree-card-expand-factor-adaptive) + var(--why-yoree-grid-gap)
    ),
    var(--why-yoree-card-expanded-max-width)
  );
}

.why-yoree__grid::-webkit-scrollbar {
  display: none;
}

.why-yoree__card {
  position: relative;
  aspect-ratio: unset;
  height: var(--why-yoree-card-height);
  flex: 0 0 var(--why-yoree-card-width);
  min-width: 0;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: flex-basis var(--duration-why-yoree-expand)
    var(--ease-why-yoree-expand);
}

.why-yoree__card--expanded {
  cursor: pointer;
  flex: 0 0 var(--why-yoree-card-expanded-width);
  align-self: stretch;
  scroll-snap-align: start;
}

.why-yoree__card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-yoree__card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-lg);
  color: var(--color-bg);
  isolation: isolate;
}

.why-yoree__card-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gradient-why-yoree-card-hover);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-why-yoree-hover)
    var(--ease-why-yoree-hover);
}

.why-yoree__card:hover .why-yoree__card-overlay::before,
.why-yoree__card:focus-within .why-yoree__card-overlay::before,
.why-yoree__card--expanded .why-yoree__card-overlay::before {
  opacity: 1;
}

.why-yoree__card-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "num toggle"
    "title title";
  gap: var(--why-yoree-card-content-gap) var(--space-md);
  align-items: start;
}

.why-yoree__card-num {
  grid-area: num;
  position: relative;
  z-index: 1;
  font-size: clamp(36px, 10vw, var(--font-h1-size));
  line-height: 1;
  font-weight: var(--font-weight-light);
  color: var(--color-bg);
}

.why-yoree__card-title {
  grid-area: title;
  max-width: 85%;
  font-size: var(--why-yoree-card-title-size);
  line-height: var(--why-yoree-card-title-line);
  font-weight: var(--font-weight-bold);
  color: var(--color-bg);
  transition:
    max-width var(--duration-why-yoree-expand) var(--ease-why-yoree-expand),
    font-size var(--duration-why-yoree-expand) var(--ease-why-yoree-expand);
}

@media (max-width: 1399px) {
  .why-yoree__card-num {
    font-size: clamp(40px, 11vw, 58px);
  }
}

.why-yoree__card-toggle {
  grid-area: toggle;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--why-yoree-card-toggle-size);
  height: var(--why-yoree-card-toggle-size);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-why-yoree-toggle-bg);
  color: var(--color-yellow-joy);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-why-yoree-hover)
    var(--ease-why-yoree-hover);
}

.why-yoree__card:hover .why-yoree__card-toggle,
.why-yoree__card:focus-within .why-yoree__card-toggle,
.why-yoree__card--expanded .why-yoree__card-toggle {
  background: var(--color-why-yoree-toggle-bg-hover);
}

.why-yoree__card-toggle-open,
.why-yoree__card-toggle-close {
  font-family: var(--font-display);
  font-size: var(--why-yoree-card-toggle-icon-size);
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.why-yoree__card-toggle-close {
  display: none;
  font-size: 34px;
}

.why-yoree__card--expanded .why-yoree__card-toggle-open {
  display: none;
}

.why-yoree__card--expanded .why-yoree__card-toggle-close {
  display: block;
}

.why-yoree__card--expanded .why-yoree__card-overlay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start;
  align-content: start;
  gap: var(--why-yoree-card-title-body-gap) var(--space-md);
  overflow: hidden;
}

.why-yoree__card--expanded .why-yoree__card-header {
  display: contents;
}

.why-yoree__card--expanded .why-yoree__card-num {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
}

.why-yoree__card--expanded .why-yoree__card-title {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  font-size: clamp(22px, 2.5vw, var(--font-h3-size));
  line-height: 1.25;
  font-weight: var(--font-weight-light);
  color: var(--color-bg);
  opacity: 1;
}

.why-yoree__card--expanded .why-yoree__card-toggle {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  background: var(--color-why-yoree-toggle-bg-hover);
  color: var(--color-yellow-joy);
}

.why-yoree__card-body {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  font-weight: var(--font-weight-regular);
  font-size: var(--why-yoree-card-body-size);
  line-height: var(--why-yoree-card-body-line);
  transition:
    max-height var(--duration-why-yoree-expand) var(--ease-why-yoree-expand),
    opacity var(--duration-why-yoree-expand) var(--ease-why-yoree-expand),
    margin-top var(--duration-why-yoree-expand) var(--ease-why-yoree-expand);
}

.why-yoree__card-body p + p {
  margin-top: 0;
}

.why-yoree__card--expanded .why-yoree__card-body p + p {
  margin-top: var(--space-sm);
}

.why-yoree__card--expanded .why-yoree__card-body {
  grid-column: 2 / -1;
  grid-row: 2;
  flex: none;
  min-height: 0;
  max-height: none;
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.35) transparent;
  opacity: 1;
  align-self: start;
  line-height: 1.25;
  transition:
    opacity var(--duration-why-yoree-expand) var(--ease-why-yoree-expand),
    margin-top var(--duration-why-yoree-expand) var(--ease-why-yoree-expand);
}

.why-yoree__card--expanded .why-yoree__card-overlay::before {
  transition-duration: var(--duration-why-yoree-expand);
  transition-timing-function: var(--ease-why-yoree-expand);
}

@media (max-width: 1199px) {
  .why-yoree__grid {
    --why-yoree-card-expanded-width: var(
      --why-yoree-card-expanded-width-adaptive
    );
    width: auto;
    margin-inline: calc(-1 * var(--container-padding));
    padding-inline: var(--container-padding);
    scroll-padding-inline: var(--container-padding);
  }
}

@media (max-width: 575px) {
  .why-yoree__inner {
    overflow: visible;
  }

  .why-yoree__grid {
    --why-yoree-grid-gap: var(--why-yoree-grid-gap-md);
    --why-yoree-card-width: var(--why-yoree-card-width-mobile);
    --why-yoree-card-expanded-width: var(
      --why-yoree-card-expanded-max-width-mobile
    );
  }

  .why-yoree__card {
    height: var(--why-yoree-card-height-fixed);
    border-radius: var(--why-yoree-card-radius-md);
  }

  .why-yoree__card-title {
    max-width: none;
  }

  .why-yoree__card-overlay {
    padding: clamp(var(--space-lg), 10vw, var(--why-yoree-card-padding-md));
  }

  .why-yoree__card--expanded {
    height: auto;
    min-height: var(--why-yoree-card-height-fixed);
    align-self: start;
  }

  .why-yoree__card--expanded .why-yoree__card-overlay {
    position: relative;
    inset: auto;
    height: auto;
    min-height: var(--why-yoree-card-height-fixed);
    align-content: start;
    overflow: visible;
    grid-template-rows: auto auto;
  }

  .why-yoree__card--expanded .why-yoree__card-body {
    align-self: start;
    overflow: visible;
    max-height: none;
  }
}

@media (min-width: 576px) {
  .why-yoree__card--expanded {
    height: auto;
    min-height: var(--why-yoree-card-height-fixed);
    align-self: start;
  }

  .why-yoree__card--expanded .why-yoree__card-overlay {
    position: relative;
    inset: auto;
    height: auto;
    min-height: var(--why-yoree-card-height-fixed);
    align-content: start;
    overflow: visible;
    grid-template-rows: auto auto;
  }

  .why-yoree__card--expanded .why-yoree__card-body {
    align-self: start;
    overflow: visible;
    max-height: none;
  }
}

@media (min-width: 576px) and (max-width: 1199px) {
  .why-yoree__inner {
    overflow: visible;
  }

  .why-yoree__grid {
    --why-yoree-grid-gap: var(--why-yoree-grid-gap-md);
    --why-yoree-card-width: var(--why-yoree-card-width-adaptive);
    --why-yoree-card-expanded-width: min(
      calc(
        var(--why-yoree-card-width) *
          var(--why-yoree-card-expand-factor-adaptive) +
          var(--why-yoree-grid-gap)
      ),
      var(--why-yoree-card-expanded-max-width)
    );
  }
}

@media (min-width: 576px) and (max-width: 1399px) {
  .why-yoree__card {
    height: var(--why-yoree-card-height-fixed);
    border-radius: var(--why-yoree-card-radius-md);
  }

  .why-yoree__card-title {
    max-width: none;
  }

  .why-yoree__card-overlay {
    padding: var(--why-yoree-card-padding-md);
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .why-yoree__inner {
    overflow: visible;
  }

  .why-yoree__grid {
    --why-yoree-card-height-fixed: 456px;
    --why-yoree-grid-gap: var(--why-yoree-grid-gap-md);
    --why-yoree-card-width: calc((100% - 3 * var(--why-yoree-grid-gap-md)) / 4);
    --why-yoree-card-expanded-width: min(
      calc(var(--why-yoree-card-width) * 2.27 + var(--why-yoree-grid-gap-md)),
      var(--why-yoree-card-expanded-max-width)
    );
    overflow-x: auto;
    scroll-snap-type: none;
  }

  .why-yoree__card--expanded {
    height: var(--why-yoree-card-height-fixed);
    min-height: unset;
    align-self: stretch;
  }

  .why-yoree__card--expanded .why-yoree__card-overlay {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: unset;
    overflow: hidden;
  }

  .why-yoree__card--expanded .why-yoree__card-body {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media (min-width: 1400px) {
  .why-yoree__inner {
    max-width: var(--layout-wide-max);
    padding-inline: var(--space-xl);
  }

  .why-yoree__grid {
    width: 100%;
    gap: var(--why-yoree-grid-gap-md);
    --why-yoree-grid-gap: var(--why-yoree-grid-gap-md);
    --why-yoree-card-width: calc((100% - 3 * var(--why-yoree-grid-gap-md)) / 4);
    --why-yoree-card-expanded-width: min(
      calc(
        var(--why-yoree-card-width) *
          var(--why-yoree-card-expand-factor-desktop) +
          var(--why-yoree-grid-gap)
      ),
      var(--why-yoree-card-expanded-max-width)
    );
    overflow-x: auto;
    scroll-snap-type: none;
  }

  .why-yoree__card {
    height: var(--why-yoree-card-height-fixed);
    border-radius: var(--why-yoree-card-radius-md);
  }

  .why-yoree__card--expanded {
    flex: 0 0 var(--why-yoree-card-expanded-width);
  }

  .why-yoree__card-overlay {
    padding: var(--why-yoree-card-padding-md);
  }

  .why-yoree__card-num {
    font-size: var(--font-h1-size);
    line-height: var(--font-h1-card-line);
  }

  .why-yoree__card-title {
    font-size: var(--why-yoree-card-title-size-desktop-lg);
    line-height: 1.25;
  }
}

.founder-video__inner {
  display: grid;
  gap: var(--space-3xl);
}

.founder-video__content {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

.founder-video__media-img {
  width: 100%;
  height: auto;
  border-radius: var(--founder-media-radius) var(--founder-media-radius)
    var(--founder-media-radius) var(--founder-media-radius-pill);
  object-fit: cover;
}

.founder-video__copy {
  display: grid;
  gap: var(--space-xl);
  align-content: start;
}

.founder-video__text {
  display: grid;
  gap: var(--space-md);
  font-weight: var(--font-weight-light);
}

.founder-video__link {
  color: var(--color-orange);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.founder-video__link:hover {
  color: var(--color-purple);
}

@media (min-width: 768px) {
  .founder-video__content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

@media (min-width: 1400px) {
  .founder-video__inner {
    max-width: var(--layout-wide-max);
    padding-inline: var(--space-xl);
  }
}

/* Reduce all copy text 20% on non-mobile for sections above recognition */
@media (min-width: 768px) {
  .hero,
  .hero-showcase,
  .memories,
  .why-yoree,
  .founder-video {
    --font-h1-size: 68.8px;
    --font-h1-line: 75.68px;
    --font-h2-size: 48px;
    --font-h2-line: 61.44px;
    --font-h3-size: 24px;
    --font-h3-line: 33.6px;
    --font-h4-size: 19.2px;
    --font-h4-line: 22.4px;
    --font-body-large-size: 25.6px;
    --font-body-large-line: 35.84px;
    --font-body-size: 14.4px;
    --font-body-line: 20.16px;
    --hero-title-size-adaptive: clamp(27.2px, 8vw, 41.6px);
  }

  .hero .text-h1,
  .hero-showcase .text-h1,
  .memories .text-h1,
  .why-yoree .text-h1,
  .founder-video .text-h1 {
    font-size: clamp(32px, 4.4vw, var(--font-h1-size));
  }

  .hero .text-h2,
  .hero-showcase .text-h2,
  .memories .text-h2,
  .why-yoree .text-h2,
  .founder-video .text-h2 {
    font-size: clamp(19.2px, 2.8vw, var(--font-h2-size));
  }

  .hero .text-h3,
  .hero-showcase .text-h3,
  .memories .text-h3,
  .why-yoree .text-h3,
  .founder-video .text-h3 {
    font-size: clamp(17.6px, 2vw, var(--font-h3-size));
  }

  .hero .text-h4,
  .hero-showcase .text-h4,
  .memories .text-h4,
  .why-yoree .text-h4:not(.why-yoree__card-title),
  .founder-video .text-h4 {
    font-size: clamp(14.4px, 1.6vw, var(--font-h4-size));
  }

  .hero .text-body-large,
  .hero-showcase .text-body-large,
  .memories .text-body-large,
  .why-yoree .text-body-large,
  .founder-video .text-body-large {
    font-size: clamp(14.4px, 1.92vw, var(--font-body-large-size));
  }

  .hero .text-body,
  .hero-showcase .text-body,
  .memories .text-body,
  .why-yoree .text-body,
  .founder-video .text-body {
    font-size: clamp(12px, 1.2vw, var(--font-body-size));
  }
}

/* why-yoree hardcoded clamp overrides (was inside max-width: 1399px block) */
@media (min-width: 768px) and (max-width: 1399px) {
  .why-yoree__card-num {
    font-size: clamp(32px, 8.8vw, 46.4px);
  }

  .why-yoree__card-title {
    font-size: var(--why-yoree-card-title-size-desktop);
    line-height: 1.25;
  }

  .why-yoree__card--expanded .why-yoree__card-title {
    font-size: clamp(17.6px, 2vw, var(--font-h3-size));
  }
}

.why-yoree__card-body.text-body {
  font-size: var(--why-yoree-card-body-size);
  line-height: var(--why-yoree-card-body-line);
}

@media (min-width: 768px) {
  .why-yoree__card-body.text-body {
    font-size: clamp(16px, 1.45vw, 19px);
    line-height: 1.45;
  }
}

.recognition__inner {
  display: grid;
  gap: var(--space-3xl);
}

.recognition__grid {
  display: grid;
  gap: var(--space-3xl);
}

.recognition__subtitle {
  font-weight: var(--font-weight-light);
}

.recognition__awards,
.recognition__featured {
  display: grid;
  gap: var(--space-xl);
}

.recognition__award-list {
  display: grid;
  gap: var(--space-xl);
}

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

.recognition__card {
  width: 100%;
  max-width: var(--recognition-card-max);
}

.recognition__card-img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--recognition-card-ratio);
  border-radius: var(--recognition-card-radius);
}

.recognition__featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.recognition__quote {
  display: grid;
  gap: var(--space-md);
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  justify-items: start;
  text-align: left;
}

.recognition__quote-text {
  font-weight: var(--font-weight-bold);
  color: var(--color-yellow-joy);
}

.recognition__quote-cite {
  font-style: normal;
  color: var(--color-yellow-joy);
}

@media (max-width: 767px) {
  .recognition__award-list {
    gap: var(--space-2xl);
  }

  .recognition__award {
    align-items: stretch;
    gap: var(--space-md);
  }

  .recognition__award-text.text-body {
    font-size: 18px;
    line-height: 1.5;
  }

  .recognition__card {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 768px) {
  .recognition__award {
    grid-template-columns: minmax(0, var(--recognition-card-max)) 1fr;
    gap: var(--space-xl);
  }
}

@media (min-width: 1200px) {
  .recognition__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: start;
  }
}

@media (min-width: 1400px) {
  .recognition__inner {
    max-width: var(--layout-wide-max);
    padding-inline: var(--space-xl);
  }
}

.memberships__inner {
  display: grid;
  gap: var(--space-3xl);
}

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

.memberships__body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: var(--membership-panel-radius);
  overflow: hidden;
}

.memberships__header {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--membership-header-min-height);
  padding: var(--membership-header-padding-block) var(--space-lg);
  background-color: var(--color-membership-pricing-bg);
  border-top-left-radius: var(--membership-panel-radius);
  border-top-right-radius: var(--membership-panel-radius);
}
/* Hardcode  */
.memberships__badge-label {
  color: #666666;
}

.memberships__badge-pill {
  padding: var(--membership-launch-pill-padding-block)
    var(--membership-launch-pill-padding-inline);
  border-radius: var(--membership-launch-pill-radius);
  background-color: var(--color-membership-launch-pill-bg);
  color: var(--color-almost-black);
}

.memberships__panel {
  position: relative;
  display: grid;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-almost-black);
  color: var(--color-bg);
}

.memberships__card:not(.memberships__card--active) .memberships__panel,
.memberships__card:not(.memberships__card--active) .memberships__pricing {
  opacity: var(--membership-card-opacity-inactive);
}

.memberships__dot {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: var(--membership-dot-size);
  height: var(--membership-dot-size);
  border-radius: var(--radius-full);
}

.memberships__dot--essential {
  background-color: var(--color-yellow-joy);
}

.memberships__dot--storyteller {
  background-color: var(--color-orange);
}

.memberships__dot--kin {
  background-color: var(--color-pink);
}

.memberships__dot--legacy {
  background-color: var(--color-membership-legacy-accent);
}

.memberships__name {
  padding-right: var(--space-xl);
  font-weight: var(--font-weight-light);
  color: inherit;
}

.memberships__intro,
.memberships__features {
  font-weight: var(--font-weight-light);
}

.memberships__price,
.memberships__price-was {
  font-weight: var(--font-weight-light);
  white-space: nowrap;
}

.memberships__features {
  display: grid;
  gap: var(--space-xs);
  padding-left: var(--space-lg);
  list-style: disc;
}

.memberships__pricing {
  display: grid;
  background-color: var(--color-membership-pricing-bg);
  color: var(--color-almost-black);
  border-bottom-left-radius: var(--membership-panel-radius);
  border-bottom-right-radius: var(--membership-panel-radius);
  overflow: hidden;
}

.memberships__pricing-content {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg);
  cursor: pointer;
}

.memberships__founding {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-membership-founding-bg);
  color: var(--color-almost-black);
}

.memberships__founding-title {
  margin: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-body-line);
  color: var(--color-almost-black);
}

.memberships__founding .memberships__price,
.memberships__founding .memberships__price-col:first-child .text-caption {
  color: var(--color-almost-black);
}

.memberships__pricing-footer {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding-block: var(--membership-pricing-footer-padding-block);
  padding-inline: var(--space-lg);
  border: 0;
  border-top: var(--membership-pricing-divider-size) solid var(--color-bg);
  background: transparent;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.memberships__chevron-btn {
  cursor: pointer;
  line-height: 0;
}

.memberships__chevron-btn:focus-visible {
  outline: 2px solid var(--color-almost-black);
  outline-offset: -2px;
}

.memberships__chevron-btn[aria-expanded="true"] .memberships__chevron::before {
  transform: rotate(-135deg);
}

.memberships__details {
  display: grid;
  grid-template-rows: 0fr;
  background-color: var(--color-membership-pricing-bg);
  transition: grid-template-rows 0.3s var(--ease-out);
}

.memberships__pricing--expanded .memberships__details {
  grid-template-rows: 1fr;
}

.memberships__pricing--expanded .memberships__details-inner {
  padding-top: var(--space-xs);
}

.memberships__details-inner {
  overflow: hidden;
  min-height: 0;
  display: grid;
  gap: var(--space-lg);
  padding: 0 var(--membership-detail-gap) var(--space-lg);
  background-color: var(--color-membership-pricing-bg);
}

.memberships__detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--membership-detail-gap);
  background-color: transparent;
  border-radius: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.28s var(--ease-out) 0.08s,
    transform 0.28s var(--ease-out) 0.08s;
}

.memberships__pricing--expanded .memberships__detail-list {
  opacity: 1;
  transform: translateY(0);
}

.memberships__detail-item {
  background-color: var(--color-bg);
  border: 1px solid var(--color-membership-pricing-bg);
  border-radius: 0;
  overflow: hidden;
  transition: background-color 0.35s var(--ease-why-yoree-hover);
}

.memberships__detail-item--expanded {
  background-color: var(--color-membership-pricing-bg);
}

.memberships__detail-trigger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.memberships__detail-trigger:focus-visible {
  outline: 2px solid var(--color-almost-black);
  outline-offset: -2px;
}

.memberships__detail-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.35s var(--ease-why-yoree-hover);
}

.memberships__detail-item--expanded .memberships__detail-panel {
  grid-template-rows: 1fr;
}

.memberships__detail-panel-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 var(--space-lg);
  opacity: 0;
  transition: opacity 0.35s var(--ease-why-yoree-hover);
}

.memberships__detail-item--expanded .memberships__detail-panel-inner {
  padding-bottom: var(--space-md);
  opacity: 1;
}

.memberships__detail-copy {
  color: rgb(15 2 17 / 0.72);
  font-weight: var(--font-weight-light);
}

.memberships__detail-leading {
  width: var(--membership-detail-leading-size);
  height: var(--membership-detail-leading-size);
  border-right: var(--membership-detail-leading-stroke) solid
    var(--color-yellow-joy);
  border-bottom: var(--membership-detail-leading-stroke) solid
    var(--color-yellow-joy);
  transform: rotate(-45deg);
  transition:
    transform 0.35s var(--ease-why-yoree-hover),
    border-color 0.35s var(--ease-why-yoree-hover);
}

.memberships__detail-item--expanded .memberships__detail-leading {
  border-right-color: var(--color-almost-black);
  border-bottom-color: var(--color-almost-black);
  transform: rotate(-135deg);
}

.memberships__detail-label {
  font-weight: var(--font-weight-light);
}

.memberships__detail-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--membership-detail-status-size);
  height: var(--membership-detail-status-size);
  color: var(--color-membership-badge-muted);
  line-height: 1;
}

.memberships__detail-status--yes {
  font-size: calc(var(--membership-detail-status-size) * 1.15);
}

.memberships__detail-status--no {
  font-size: calc(var(--membership-detail-status-size) * 0.82);
}

.memberships__detail-status--count {
  min-width: var(--membership-detail-count-size);
  height: var(--membership-detail-count-size);
  border-radius: var(--radius-full);
  background-color: var(--color-almost-black);
  color: var(--color-bg);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-regular);
}

.btn--membership-cta {
  justify-self: center;
  width: fit-content;
  margin-inline: var(--membership-detail-gap);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  background-color: var(--color-yellow-joy);
  color: var(--color-almost-black);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color 350ms var(--ease-why-yoree-hover),
    opacity 0.28s var(--ease-out) 0.12s,
    transform 0.28s var(--ease-out) 0.12s;
}

.memberships__pricing--expanded .btn--membership-cta {
  opacity: 1;
  transform: translateY(0);
}

.btn--membership-cta:hover,
.btn--membership-cta:focus-visible {
  background-color: var(--color-almost-black);
  color: var(--color-yellow-joy);
}

.memberships__price-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-sm);
}

.memberships__price-col {
  display: grid;
  gap: var(--space-sm);
}

.memberships__price-col:last-child .text-caption,
.memberships__price-col:has(.memberships__price-was) .text-caption,
.memberships__price-was {
  color: var(--color-mid-grey);
}

.memberships__chevron {
  display: block;
  flex-shrink: 0;
  position: relative;
  width: var(--membership-chevron-size);
  height: var(--membership-chevron-size);
  margin-top: 5px;
  transition: transform 0.3s var(--ease-out);
}

.memberships__chevron-btn[aria-expanded="true"] .memberships__chevron {
  transform: translateY(5px);
}

.memberships__chevron::before {
  content: "";
  position: absolute;
  inset: 0;
  border-right: var(--membership-chevron-stroke) solid var(--color-almost-black);
  border-bottom: var(--membership-chevron-stroke) solid
    var(--color-almost-black);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.3s var(--ease-out);
}

@media (max-width: 767px) {
  .memberships .text-h3 {
    font-size: var(--font-h3-size);
    line-height: var(--font-h3-line);
  }

  .memberships .text-body {
    font-size: 18px;
    line-height: 1.5;
  }

  .memberships__detail-item {
    padding-block: var(--space-md);
  }
}

@media (min-width: 576px) {
  .memberships__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .memberships__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

@media (min-width: 1400px) {
  .memberships__inner {
    max-width: var(--layout-wide-max);
    padding-inline: var(--space-xl);
  }
}

.about.about--plain .about__bg {
  display: none;
}

.about.section {
  position: relative;
  isolation: isolate;
  padding-block: 0 var(--space-4xl);
}

.about__bg {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  pointer-events: none;
  overflow: visible;
}

.about__scroll {
  position: relative;
}

.about__scroll-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-xl);
  text-align: left;
}

.about__bg::before,
.about__bg::after {
  content: "";
  position: absolute;
  width: var(--about-blob-branch-size);
  height: var(--about-blob-branch-size);
  border-radius: var(--radius-full);
  filter: blur(var(--about-blob-blur));
  transform: scale(1.08);
}

.about__bg::before {
  top: 18%;
  inset-inline-start: -8%;
  background: var(--gradient-about-blob-left);
}

.about__bg::after {
  top: 18%;
  inset-inline-end: -8%;
  background: var(--gradient-about-blob-right);
}

.about__nav {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--about-inner-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-top: var(--about-nav-offset-top);
}

.about__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2xl);
  width: 100%;
  max-width: var(--about-inner-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-top: var(--space-3xl);
}

.about__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  width: fit-content;
  color: var(--color-orange);
  font-size: var(--about-back-font-size);
  line-height: var(--about-back-line-height);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  transition: color var(--about-back-transition-duration) var(--ease-out);
}

.about__back:hover,
.about__back:focus-visible {
  color: var(--color-almost-black);
}

.about__back:hover .about__back-icon,
.about__back:focus-visible .about__back-icon {
  background: var(--color-almost-black);
  color: var(--color-bg);
}

.about__back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--about-back-icon-size);
  height: var(--about-back-icon-size);
  border-radius: var(--radius-full);
  background: var(--color-soft-grey);
  color: var(--color-orange);
  transition:
    background-color var(--about-back-transition-duration) var(--ease-out),
    color var(--about-back-transition-duration) var(--ease-out);
}

.about__back-icon svg {
  display: block;
  width: var(--about-back-icon-glyph-size);
  height: var(--about-back-icon-glyph-size);
}

.about__title {
  color: var(--color-almost-black);
  letter-spacing: var(--letter-spacing-tight);
}

.about__content {
  display: grid;
  gap: var(--space-xl);
  text-align: left;
}

.about__media {
  width: 100%;
}

.about__media-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--founder-story-media-radius);
  object-fit: cover;
}

.about__lead {
  color: var(--color-almost-black);
}

.about__body {
  color: var(--color-almost-black);
  font-weight: var(--font-weight-regular);
}

#founder-story .about__content {
  gap: var(--space-2xl);
}

#founder-story .about__scroll-body {
  gap: var(--space-2xl);
}

#founder-story .about__inner {
  gap: var(--space-lg);
}

.about__story {
  color: var(--color-almost-black);
  font-weight: var(--font-weight-light);
}

@media (min-width: 768px) {
  #founder-story .about__content {
    gap: var(--space-3xl);
  }

  #founder-story .about__scroll-body {
    gap: var(--space-3xl);
  }
}

@media (min-width: 576px) {
  .about__inner {
    gap: var(--space-3xl);
  }

  #founder-story .about__inner {
    gap: var(--space-xl);
  }
}

@media (min-width: 1200px) {
  .about.section {
    padding-block: 0 var(--space-4xl);
  }

  .about__nav {
    padding-top: calc(var(--hero-center-offset-top-lg) + var(--space-3xl));
  }

  .about__inner {
    gap: var(--space-4xl);
    padding-top: var(--space-4xl);
  }

  #founder-story .about__inner {
    gap: var(--space-2xl);
  }
}

@media (max-width: 1399px) {
  .founder-video__title,
  .recognition__title,
  .memberships__title,
  .site-footer__launch,
  .site-footer__promo-title,
  .site-footer__promo-text--lead {
    font-size: var(--section-heading-size-mobile);
    line-height: 1.15;
    text-wrap: balance;
  }
}

@media (max-width: 768px) {
  .why-yoree__title,
  .founder-video__title,
  .recognition__title,
  .memberships__title {
    margin-top: var(--section-heading-extra-top-mobile);
    margin-bottom: var(--section-heading-reduced-bottom-mobile);
  }
}

#terms .terms-doc {
  gap: var(--space-2xl);
}

#terms .terms-doc__part {
  color: var(--color-almost-black);
  margin-top: var(--space-lg);
}

#terms .terms-doc__section {
  display: grid;
  gap: var(--space-md);
}

#terms .terms-doc__heading,
#terms .terms-doc__subheading {
  color: var(--color-almost-black);
  font-weight: var(--font-weight-medium);
}

#terms .terms-doc__body {
  color: var(--color-almost-black);
  font-weight: var(--font-weight-regular);
}

#terms .terms-doc__list {
  display: grid;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
  color: var(--color-almost-black);
  font-weight: var(--font-weight-regular);
  list-style: disc;
}

#terms .terms-doc__list li::marker {
  color: var(--color-almost-black);
}

#terms .terms-doc a {
  color: var(--color-pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#terms .terms-doc a:hover,
#terms .terms-doc a:focus-visible {
  color: var(--color-purple);
}

#terms .terms-doc__table-wrap {
  width: 100%;
  overflow-x: auto;
}

#terms .terms-doc__table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  color: var(--color-almost-black);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line);
}

#terms .terms-doc__table th,
#terms .terms-doc__table td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-mid-grey);
  text-align: left;
  vertical-align: top;
}

#terms .terms-doc__table th {
  font-weight: var(--font-weight-medium);
  background: var(--color-soft-grey);
}

.contact-form {
  display: grid;
  gap: var(--waitlist-modal-gap);
}

.contact-form__textarea {
  width: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--waitlist-input-padding-block)
    var(--waitlist-input-padding-inline);
  background-color: var(--waitlist-input-bg);
  color: var(--color-almost-black);
  letter-spacing: var(--letter-spacing-wide);
  font-family: inherit;
  resize: vertical;
  min-height: 180px;
}

.contact-form__textarea::placeholder {
  color: var(--color-almost-black);
  opacity: 1;
  text-transform: uppercase;
}

.contact-form__textarea:focus-visible {
  outline: 2px solid var(--color-almost-black);
  outline-offset: 2px;
}

.contact-form__success {
  display: none;
  gap: var(--space-xl);
}

.contact-form__success:not([hidden]) {
  display: grid;
}

.contact-form__error {
  color: var(--color-pink);
  font-size: var(--font-body-size);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.kc__inner {
  display: grid;
  gap: var(--space-xl);
}

.kc__eyebrow {
  color: var(--color-mid-grey);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.kc__search {
  display: grid;
  gap: var(--space-sm);
}

.kc__search-input {
  width: 100%;
}

.kc__search-status {
  color: var(--color-mid-grey);
}

.kc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.kc__card {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border-radius: var(--membership-panel-radius);
  background-color: var(--color-membership-pricing-bg);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.kc__card:hover,
.kc__card:focus-visible {
  transform: translateY(-2px);
  background-color: color-mix(
    in srgb,
    var(--color-membership-pricing-bg) 70%,
    var(--color-yellow-joy)
  );
  outline: none;
}

.kc__card-title {
  margin: 0;
  font-weight: var(--font-weight-light);
}

.kc__card-meta {
  color: var(--color-mid-grey);
}

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

.kc__result-link {
  display: grid;
  gap: 2px;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--membership-panel-radius);
  background-color: var(--color-membership-pricing-bg);
  color: inherit;
  text-decoration: none;
}

.kc__result-link:hover,
.kc__result-link:focus-visible {
  background-color: color-mix(
    in srgb,
    var(--color-membership-pricing-bg) 70%,
    var(--color-yellow-joy)
  );
  outline: none;
}

.kc__result-section {
  color: var(--color-mid-grey);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.kc__list {
  display: grid;
  gap: var(--space-sm);
}

.kc__item {
  border-radius: var(--membership-panel-radius);
  background-color: var(--color-membership-pricing-bg);
  overflow: hidden;
  scroll-margin-top: var(--space-2xl);
}

.kc__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  cursor: pointer;
  list-style: none;
  font-weight: var(--font-weight-light);
}

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

.kc__chevron {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 0.45em;
  border-right: 2px solid var(--color-almost-black);
  border-bottom: 2px solid var(--color-almost-black);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}

.kc__item[open] .kc__chevron {
  transform: rotate(-135deg);
  margin-top: 0.65em;
}

.kc__answer {
  padding: 0 var(--space-lg) var(--space-lg);
}

.kc__answer p {
  margin: 0;
  color: rgb(15 2 17 / 0.78);
  font-weight: var(--font-weight-light);
}

.kc__empty {
  color: var(--color-mid-grey);
}

.kc__crumb-link {
  color: inherit;
  text-decoration: none;
}

.kc__crumb-link:hover,
.kc__crumb-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.kc__back-trail {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  color: var(--color-orange);
  font-size: var(--about-back-font-size);
  line-height: var(--about-back-line-height);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.kc__back-trail-link {
  color: inherit;
  text-decoration: none;
}

.kc__back-trail-link:hover,
.kc__back-trail-link:focus-visible {
  color: var(--color-almost-black);
  outline: none;
}

.kc__back-trail-sep {
  opacity: 0.7;
}

.kc__back-trail:hover .about__back-icon,
.kc__back-trail:focus-within .about__back-icon {
  background: var(--color-almost-black);
  color: var(--color-bg);
}

.kc__answer-body {
  max-width: 42rem;
}

.kc__answer-body p {
  margin: 0;
  font-weight: var(--font-weight-light);
}

.kc__answer-more {
  margin: var(--space-md) 0 0;
}

.kc__related {
  display: grid;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid rgb(15 2 17 / 0.08);
}

.kc__related-label {
  color: var(--color-mid-grey);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.kc__related-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

@media (min-width: 768px) {
  .kc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

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