/* OnlyFit light homepage — white, sage and leaf, with comfortable mobile type. */
@layer home {
  .home-page {
    min-inline-size: 0;
    background: var(--of-color-page);
  }

  .home-page :is(h1, h2, p, a, strong) { overflow-wrap: break-word; }

  .home-skip-link {
    position: fixed;
    z-index: 1000;
    inset: 1rem auto auto 1rem;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: var(--of-ink, #173025);
    color: #fff;
    transform: translateY(-180%);
  }
  .home-skip-link:focus { transform: translateY(0); }

  .home-header {
    position: relative;
    z-index: 30;
    background: var(--of-leaf, #4c7c24);
    color: #fff;
  }
  .home-header__inner {
    display: flex;
    min-block-size: var(--of-site-header-min-block-size);
    align-items: center;
    gap: 1rem;
    padding-block: max(.75rem, env(safe-area-inset-top)) .75rem;
  }
  .home-header__brand {
    display: flex;
    min-block-size: 3rem;
    align-items: center;
    flex-shrink: 0;
  }
  .home-header__brand .of-logo { inline-size: var(--of-site-header-logo-inline-size); }
  .home-header__nav { display: none; gap: 1.5rem; }
  .home-header__nav a,
  .home-header__account {
    display: inline-flex;
    align-items: center;
    min-block-size: 3rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
  }
  .home-header__actions {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: 1rem;
    margin-inline-start: auto;
  }
  .home-header__account { min-inline-size: 3rem; max-inline-size: 7rem; justify-content: center; }
  .home-menu { min-inline-size: 0; }
  .home-header__language { display: none; }
  .home-header__language .of-language-switcher summary {
    border-color: transparent;
    background: transparent;
    color: #fff;
  }
  .home-header :is(a, summary):focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
  }
  .home-menu > summary {
    display: flex;
    min-block-size: 3rem;
    max-inline-size: 7rem;
    align-items: center;
    gap: .375rem;
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
  }
  .home-menu > summary::-webkit-details-marker { display: none; }
  .home-menu > summary svg { inline-size: 1.5rem; flex: 0 0 1.5rem; }
  .home-menu__panel {
    position: absolute;
    inset: 100% 0 auto;
    display: grid;
    gap: .5rem;
    padding: 1rem max(1.25rem, calc((100vw - 1160px) / 2));
    border-block-end: 1px solid var(--of-color-border-subtle);
    background: #fff;
    color: var(--of-color-text);
    box-shadow: 0 .75rem 1.5rem rgb(23 48 37 / 8%);
  }
  .home-menu__panel > a {
    display: flex;
    min-block-size: 3rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
    font-size: 1.125rem;
  }
  .home-menu__panel :is(a, summary):focus-visible {
    outline-color: var(--of-ink, #173025);
  }
  .home-menu__panel .of-language-switcher { justify-self: start; }
  .home-menu__panel .of-language-switcher summary { border-color: var(--of-color-border); background: #fff; color: var(--of-ink, #173025); }
  .home-menu__panel .of-language-switcher__menu {
    inset-inline: 0 auto;
    max-inline-size: calc(100vw - 2.5rem);
  }

  .home-hero { padding-block: 2rem 3rem; }
  .home-hero__layout {
    display: grid;
    grid-template-areas: "copy" "stores" "visual";
    align-items: center;
    gap: 1.5rem;
  }
  .home-hero__copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-area: copy;
    min-inline-size: 0;
    gap: 1rem;
  }
  .home-kicker { color: var(--of-deep, #355d20); }
  .home-hero__eyebrow { display: none; }
  .home-hero__conversion { display: contents; }
  .home-hero .of-display {
    max-inline-size: 15ch;
    color: var(--of-color-text);
    font-size: 2.25rem;
    line-height: 2.5rem;
    letter-spacing: -.035em;
  }
  .home-hero__intro { max-inline-size: 33rem; color: var(--of-color-text-muted); }
  .home-hero__actions { display: flex; margin-block-start: .5rem; }
  .home-hero__actions .of-button { inline-size: 100%; }
  .home-hero__note {
    max-inline-size: 36rem;
    font-size: 1rem;
    line-height: 1.5;
  }
  .home-hero__note a {
    color: var(--of-deep, #355d20);
    text-underline-offset: .2em;
  }
  .home-hero__download {
    grid-area: stores;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  .home-store-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .home-store-badges li { inline-size: 10rem; max-inline-size: 100%; }
  .home-store-badges a {
    display: flex;
    min-block-size: 3rem;
    align-items: center;
    border-radius: .5rem;
  }
  .home-store-badges img { display: block; inline-size: 100%; block-size: auto; }
  .home-hero__qr { display: none; }
  .home-hero__visual {
    position: relative;
    display: grid;
    grid-area: visual;
    min-inline-size: 0;
    place-items: center;
    padding: 1.5rem;
    border-radius: 16px;
    background: var(--of-sage, #eef4e8) url('/assets/images/funnel/default/people-v3-lifestyle/home-backdrop.webp') center / cover no-repeat;
  }
  .home-hero__halo { display: none; }
  .home-hero__media {
    position: relative;
    display: grid;
    inline-size: min(15rem, 100%);
    margin: 0;
    overflow: hidden;
    border: 6px solid var(--of-ink, #173025);
    border-radius: 2.25rem;
    background: #fff;
    box-shadow: 0 .75rem 1.5rem rgb(23 48 37 / 12%);
  }
  .home-hero__media picture {
    display: block;
    grid-area: 1 / 1;
    min-inline-size: 0;
    inline-size: 100%;
    opacity: 0;
    transition: opacity .45s ease;
  }
  .home-hero__media picture.is-active { z-index: 1; opacity: 1; }
  .home-hero__media img { display: block; inline-size: 100%; block-size: auto; }

  .home-value-strip { background: var(--of-sage, #eef4e8); }
  .home-value-strip__grid { display: grid; padding-block: .5rem; }
  .home-value-strip__item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
    padding-block: 1.25rem;
  }
  .home-value-strip__item + .home-value-strip__item {
    border-block-start: 1px solid var(--of-color-border-subtle);
  }
  .home-value-strip__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    background: #fff;
    color: var(--of-deep, #355d20);
  }
  .home-value-strip__icon svg { inline-size: 26px; block-size: 26px; }
  .home-value-strip__item strong { display: block; font-size: 1.125rem; line-height: 1.35; }
  .home-value-strip__item p { margin-block-start: .375rem; color: var(--of-color-text-muted); font-size: 1rem; }

  :where(#why-onlyfit, #faq) { scroll-margin-block-start: 1rem; }
  .home-section { padding-block: 3rem; }
  .home-section__copy { display: grid; min-inline-size: 0; gap: 1rem; }
  .home-split { display: grid; align-items: center; gap: 1.5rem; }
  .home-preview-title { margin: 0; color: var(--of-deep); font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
  .home-workout-preview { min-inline-size: 0; }
  .home-workout-preview > .home-preview-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .home-workout-preview__head { display: none; }
  .home-workout-preview__rows { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
  .home-workout-preview__rows li { display: grid; gap: .375rem; border-radius: 16px; padding: 1.25rem; background: var(--of-color-surface-soft); }
  .home-workout-preview__rows h4 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
  .home-workout-preview__rows dl { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; }
  .home-workout-preview__rows dl > div { display: flex; gap: .25rem; align-items: baseline; }
  .home-workout-preview__rows dl > div:first-child dt { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .home-workout-preview__rows dl > div + div::before { content: "·"; color: var(--of-color-text-muted); margin-inline-end: .25rem; }
  .home-workout-preview__rows dt { color: var(--of-color-text-muted); font-size: 1rem; line-height: 1.5; }
  .home-workout-preview__rows dd { margin: 0; color: var(--of-color-text-muted); font-size: 1rem; line-height: 1.5; }
  .home-check-list { display: grid; gap: 1.25rem; margin: .5rem 0 0; padding: 0; list-style: none; }
  .home-check-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; }
  .home-check-list__icon {
    display: grid;
    inline-size: 2rem;
    block-size: 2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--of-leaf, #4c7c24);
    color: #fff;
    font-weight: 700;
  }
  .home-check-list strong { display: block; font-size: 1.125rem; }
  .home-check-list p { margin-block-start: .25rem; color: var(--of-color-text-muted); font-size: 1rem; }
  .home-athlete-photo { inline-size: 100%; margin: 0; overflow: hidden; border-radius: 16px; background: var(--of-sage, #eef4e8); }
  .home-athlete-photo picture, .home-athlete-photo img { display: block; inline-size: 100%; }
  .home-athlete-photo img { block-size: auto; }
  .home-plan__instructions { display: flex; align-items: center; gap: .75rem; font-size: 1.125rem; line-height: 1.5; }
  .home-plan__instructions .home-check-list__icon { flex-shrink: 0; }
  .home-plan__motivation { font-size: 1rem; line-height: 1.5; }

  .home-goal { padding-block-start: 0; }
  .home-goal__layout { display: grid; align-items: center; gap: 1.25rem; }
  .home-goal__layout > * { min-inline-size: 0; }
  .home-goal__heading { display: grid; gap: 1rem; }
  .home-meal-preview { display: grid; gap: 1rem; }
  .home-meal-preview > .home-preview-title { color: var(--of-ink); font-size: 1.75rem; font-weight: 700; line-height: 1.2142857143; }
  .home-meal-preview__rows { margin: 0; padding: 0; list-style: none; }
  .home-meal-preview__rows li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: 1rem; padding-block: .75rem; }
  .home-meal-preview__rows li + li { border-block-start: 1px solid var(--of-color-border-subtle); }
  .home-meal-preview__rows img { inline-size: 4rem; block-size: 4rem; border-radius: 10px; object-fit: cover; }
  .home-meal-preview__rows h4 { margin: 0 0 .25rem; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
  .home-meal-preview__rows p { color: var(--of-color-text-muted); font-size: 1.125rem; line-height: 1.5; }
  .home-shopping-preview { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: start; gap: 1rem; border-radius: 16px; padding: 1.25rem; background: var(--of-sage); }
  .home-shopping-preview svg { inline-size: 2.25rem; color: var(--of-deep); }
  .home-shopping-preview > div { display: grid; gap: .5rem; }
  .home-shopping-preview h4 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
  .home-shopping-preview p { color: var(--of-color-text-muted); font-size: 1rem; line-height: 1.5; }
  .home-product-shot { position: relative; }
  .home-product-shot__glow { display: none; }
  .home-product-shot__media { position: relative; inline-size: 100%; overflow: hidden; border-radius: 16px; }
  .home-product-shot picture, .home-product-shot img { display: block; inline-size: 100%; block-size: auto; }
  .home-calorie-map { --home-calorie-map-ready: 1; position: absolute; inset: 0; pointer-events: none; }
  .home-calorie-map__lines { inline-size: 100%; block-size: 100%; overflow: visible; }
  .home-calorie-map__line {
    fill: none;
    opacity: .82;
    stroke: #fff;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }
  .home-calorie-map__dot {
    fill: var(--of-leaf, #4c7c24);
    stroke: #fff;
    stroke-width: 3;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
  }
  .home-calorie-map__tip {
    position: absolute;
    display: grid;
    min-block-size: 2.5rem;
    justify-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 8px;
    padding: .5rem .625rem;
    background: var(--of-leaf, #4c7c24);
    color: #fff;
    font-size: 1rem;
    line-height: 1.45;
    opacity: 1;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  .home-calorie-map__tip strong { font-weight: 600; }
  .home-calorie-map__tip span { font-size: 1rem; }
  .home-calorie-map__tip--quinoa {
    top: 86%;
    left: 20%;
    --tip-delay: 200ms;
  }

  .home-calorie-map__tip--avocado {
    top: 88%;
    left: 80%;
    --tip-delay: 200ms;
  }

  .home-calorie-map__tip--salmon {
    top: 25%;
    left: 20%;
    --tip-delay: 200ms;
  }

  .home-calorie-map__line--quinoa {
    --line-delay: 200ms;
  }

  .home-calorie-map__line--avocado {
    --line-delay: 200ms;
  }

  .home-calorie-map__line--salmon {
    --line-delay: 200ms;
  }

  .home-calorie-map__dot--quinoa {
    --dot-delay: 60ms;
  }

  .home-calorie-map__dot--avocado {
    --dot-delay: 60ms;
  }

  .home-calorie-map__dot--salmon {
    --dot-delay: 60ms;
  }

  .home-product-shot.is-motion-ready:not(.is-revealed) .home-calorie-map__line {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  .home-product-shot.is-motion-ready:not(.is-revealed) .home-calorie-map__dot {
    opacity: 0;
    transform: scale(0.35);
  }

  .home-product-shot.is-motion-ready:not(.is-revealed) .home-calorie-map__tip {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 0.6rem)) scale(0.92);
  }

  .home-product-shot.is-motion-ready.is-revealed .home-calorie-map__line {
    animation: home-calorie-line 680ms var(--of-ease-out) var(--line-delay) both;
  }

  .home-product-shot.is-motion-ready.is-revealed .home-calorie-map__dot {
    animation: home-calorie-dot 300ms var(--of-ease-spring) var(--dot-delay) both;
  }

  .home-product-shot.is-motion-ready.is-revealed .home-calorie-map__tip {
    animation: home-calorie-tip 280ms var(--of-ease-spring) var(--tip-delay) both;
  }

  @keyframes home-calorie-line {
    from {
      opacity: 0;
      stroke-dashoffset: 1;
    }

    to {
      opacity: 0.82;
      stroke-dashoffset: 0;
    }
  }

  @keyframes home-calorie-dot {
    from {
      opacity: 0;
      transform: scale(0.35);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes home-calorie-tip {
    from {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 0.6rem)) scale(0.92);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .home-tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; }
  .home-tag-cloud span {
    border-radius: 8px;
    padding: .5rem .75rem;
    background: var(--of-sage, #eef4e8);
    color: var(--of-deep, #355d20);
    font-size: 1rem;
  }
  .home-inline-cta { inline-size: 100%; text-decoration: none; }
  .home-inline-cta > span { margin-inline-start: auto; font-size: 1.5rem; }

  .home-support__panel { display: grid; align-items: center; gap: 1.25rem; border-radius: 16px; padding: 1.25rem; background: var(--of-sage, #eef4e8); }
  .home-support__panel .of-heading { font-size: 1.75rem; line-height: 1.2142857143; }
  .home-support__panel .of-eyebrow { color: var(--of-deep, #355d20); margin-block-end: .5rem; }
  .home-support__panel .of-button { inline-size: 100%; }
  .home-faq__layout { display: grid; align-items: start; gap: 1.5rem; }
  .home-faq__list { min-inline-size: 0; }
  .home-faq details { border-block-end: 1px solid var(--of-color-border-subtle); }
  .home-faq summary {
    position: relative;
    display: flex;
    min-block-size: 3.5rem;
    align-items: center;
    padding-block: 1rem;
    padding-inline: 0 2.5rem;
    font-size: 1.125rem;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
  }
  .home-faq summary::-webkit-details-marker { display: none; }
  .home-faq summary:focus-visible { outline: 3px solid var(--of-ink, #173025); outline-offset: 3px; box-shadow: 0 0 0 2px #fff; }
  .home-faq summary::after { position: absolute; inset-inline-end: .25rem; color: var(--of-color-text-muted); content: "+"; font-size: 1.5rem; }
  .home-faq details[open] summary::after { content: "−"; }
  .home-faq details p { padding-block-end: 1.25rem; color: var(--of-color-text-muted); font-size: 1.125rem; line-height: 1.5; }

  .home-final-cta { padding-block: 0 3rem; }
  .home-final-cta__panel { display: grid; gap: 1rem; padding: 1.5rem; border-radius: 16px; background: var(--of-sage, #eef4e8); }
  .home-final-cta__panel .of-eyebrow { color: var(--of-deep, #355d20); }
  .home-final-cta__panel .of-display { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; }
  .home-final-cta__panel .of-body { max-inline-size: 38rem; color: var(--of-color-text-muted); }
  .home-final-cta__panel .of-button { inline-size: 100%; }
  .home-final-cta__panel .of-microcopy { font-size: 1rem; line-height: 1.5; }

  .home-footer { border-block-start: 1px solid var(--of-color-border-subtle); padding-block: 2rem max(1.5rem, env(safe-area-inset-bottom)); }
  .home-footer__grid { display: grid; gap: 1.5rem; }
  .home-footer .of-logo {
    inline-size: 10rem;
    margin-block-end: .75rem;
    filter: brightness(0) saturate(100%) invert(42%) sepia(67%) saturate(500%) hue-rotate(47deg) brightness(92%) contrast(93%);
  }
  .home-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .home-footer__nav a {
    overflow-wrap: anywhere;
    hyphens: auto;
    display: flex;
    min-block-size: 3rem;
    align-items: center;
    padding-block: .5rem;
    color: var(--of-color-text-muted);
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
  }
  .home-footer__platforms { display: grid; align-content: start; gap: .75rem; }
  .home-footer__platforms .of-tech { font-size: 1rem; }
  .home-footer__social { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem; margin-block-start: 1.5rem; border-block-start: 1px solid var(--of-color-border-subtle); padding-block-start: 1rem; }
  .home-footer__social h2 { margin: 0; font-size: 1rem; font-weight: 400; }
  .home-footer__social-list { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
  .home-footer__social-list a { display: inline-flex; min-block-size: 3rem; align-items: center; gap: .5rem; color: var(--of-color-text); font-size: 1rem; text-decoration: none; }
  .home-footer__social-list svg { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; }
  .home-footer__bottom { display: grid; gap: .75rem; margin-block-start: 1rem; border-block-start: 1px solid var(--of-color-border-subtle); padding-block-start: 1.25rem; color: var(--of-color-text-muted); font-size: 1rem; line-height: 1.5; }
  .home-footer__terms a { color: var(--of-deep); text-underline-offset: .2em; }

  @media (max-width: 47.999rem) {
    .home-hero { padding-block: 2rem; }
    .home-hero__layout {
      max-inline-size: 36rem;
      gap: 1.75rem;
    }
    .home-hero__copy {
      justify-items: center;
      gap: 1.25rem;
      text-align: center;
    }
    .home-hero__eyebrow {
      display: block;
      max-inline-size: 100%;
      border-radius: .625rem;
      padding: .375rem .75rem;
      background: var(--of-sage);
      color: var(--of-deep);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.5;
      text-wrap: balance;
    }
    .home-hero .of-display {
      max-inline-size: 19ch;
      font-size: clamp(2rem, 8.2vw, 2.75rem);
      line-height: 1.12;
      letter-spacing: -.04em;
    }
    .home-hero__intro {
      max-inline-size: 32ch;
      text-wrap: pretty;
    }
    .home-hero__conversion {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      inline-size: 100%;
      gap: .75rem;
      margin-block-start: .25rem;
    }
    .home-hero__actions { margin-block-start: 0; }
    .home-hero__actions .of-button {
      gap: .75rem;
      min-inline-size: 0;
      min-block-size: 3.5rem;
    }
    .home-hero__actions .of-button__label { flex: 0 1 auto; min-inline-size: 0; }
    .home-hero__note {
      max-inline-size: 34ch;
      justify-self: center;
      text-wrap: pretty;
    }
    .home-hero__download {
      justify-content: center;
      border-block-start: 1px solid var(--of-color-border-subtle);
      padding-block-start: 1.25rem;
    }
    .home-hero__stores {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      inline-size: min(100%, 20.75rem);
      gap: .75rem;
    }
    .home-hero__stores li { inline-size: auto; min-inline-size: 0; }
    .home-hero__stores a { min-block-size: 3rem; }
  }
  @media (min-width: 48rem) {
    .home-hero .of-display { font-size: clamp(3rem, 5vw, 4rem); line-height: 1.11; }
    .home-hero__actions .of-button { inline-size: min(100%, 22rem); }
    .home-hero__visual { padding: 2rem; }
    .home-hero__media { inline-size: 17rem; }
    .home-support__panel { grid-template-columns: minmax(0, 1fr) auto; }
    .home-support__panel .of-button { inline-size: auto; min-inline-size: 13rem; }
    .home-final-cta__panel { justify-items: center; padding: 2rem; text-align: center; }
    .home-final-cta__panel .of-button { inline-size: min(100%, 22rem); }
    .home-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .home-workout-preview__head,
    .home-workout-preview__rows li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .65fr); align-items: center; gap: 1rem; }
    .home-workout-preview__head { padding: .75rem 1.25rem; border-block-end: 1px solid var(--of-color-border-subtle); color: var(--of-color-text-muted); font-size: 1rem; line-height: 1.5; }
    .home-workout-preview__rows dl { display: contents; }
    .home-workout-preview__rows { gap: 0; border: 1px solid var(--of-color-border-subtle); border-block-start: 0; border-radius: 0 0 16px 16px; overflow: hidden; }
    .home-workout-preview__rows li { border-radius: 0; background: #fff; }
    .home-workout-preview__rows li + li { border-block-start: 1px solid var(--of-color-border-subtle); }
    .home-workout-preview__head { border: 1px solid var(--of-color-border-subtle); border-radius: 16px 16px 0 0; background: var(--of-sage); }
    .home-workout-preview__rows dl > div + div::before,
    .home-workout-preview__rows dd > span { display: none; }
    .home-workout-preview__rows dt { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .home-workout-preview__rows dd { margin: 0; }
  }
  @media (min-width: 60rem) {
    .home-header__nav { display: flex; }
    .home-header__language { display: block; }
    .home-menu { display: none; }
    .home-hero { padding-block: 2rem; }
    .home-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy visual" "stores visual"; gap: 1.5rem 3rem; }
    .home-hero__visual { align-self: stretch; }
    .home-hero__qr { display: grid; justify-items: center; gap: .25rem; max-inline-size: 6rem; color: var(--of-color-text-muted); font-size: .875rem; line-height: 1.3; text-align: center; text-decoration: none; }
    .home-hero__qr img { inline-size: 3.25rem; block-size: 3.25rem; }
    .home-value-strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 1.5rem; }
    .home-value-strip__item { grid-template-columns: minmax(0, 1fr); align-content: start; gap: .5rem; padding: 0 1.75rem; }
    .home-value-strip__item:first-child { padding-inline-start: 0; }
    .home-value-strip__item:last-child { padding-inline-end: 0; }
    .home-value-strip__item + .home-value-strip__item { border-block-start: 0; border-inline-start: 1px solid var(--of-color-border-subtle); }
    .home-section { padding-block: 3rem; }
    .home-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 3rem; }
    .home-section__copy,
    .home-workout-preview { grid-column: 1; }
    .home-athlete-photo { grid-area: 1 / 2 / 4 / 3; align-self: center; }
    .home-plan__instructions { grid-column: 1; }
    .home-check-list { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
    .home-plan__motivation { grid-column: 1 / -1; }
    .home-goal { padding-block-start: 0; }
    .home-goal__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; gap: 1.25rem 3rem; }
    .home-goal__layout > :not(.home-product-shot) { grid-column: 2; }
    .home-goal__layout .home-product-shot { grid-column: 1; grid-row: 1 / 4; align-self: start; }
    .home-goal__layout .home-inline-cta { align-self: start; }
    .home-faq__layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; }
    .home-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; }
    .home-footer__social { justify-content: center; }
    .home-footer__bottom { text-align: center; }
  }
  @media (max-width: 23rem) {
    .home-header__inner { gap: .5rem; }
    .home-header__brand .of-logo { inline-size: 6.25rem; }
    .home-header__actions { gap: .5rem; }
    .home-menu > summary { max-inline-size: 6rem; }
    .home-menu > summary svg { inline-size: 1.25rem; flex-basis: 1.25rem; }
    .home-store-badges { gap: .75rem; }
    .home-final-cta__panel { padding: 1.25rem; }
  }
  @media (hover: hover) and (pointer: fine) {
    .home-header__nav a:hover, .home-header__account:hover { text-decoration: underline; text-underline-offset: .25em; }
    .home-footer__nav a:hover, .home-menu__panel > a:hover { color: var(--of-deep, #355d20); text-decoration: underline; }
    .home-faq summary:hover { color: var(--of-deep, #355d20); }
  }
  @media (prefers-reduced-motion: reduce) {
    .home-hero__media picture { transition: none; }
    .home-product-shot.is-motion-ready .home-calorie-map__line,
    .home-product-shot.is-motion-ready .home-calorie-map__dot,
    .home-product-shot.is-motion-ready .home-calorie-map__tip { animation: none !important; opacity: 1; }
    .home-product-shot.is-motion-ready .home-calorie-map__line { stroke-dashoffset: 0; }
    .home-product-shot.is-motion-ready .home-calorie-map__dot { transform: scale(1); }
    .home-product-shot.is-motion-ready .home-calorie-map__tip { transform: translate(-50%, -50%) scale(1); }
  }
}

/* The mobile menu sits on white, inside the green site header. */
@media (hover: hover) and (pointer: fine) {
  [data-theme="onlyfit-light"] .home-header .home-menu__panel .of-language-switcher summary:hover {
    border-color: var(--of-deep);
    background: var(--of-sage);
    color: var(--of-ink);
  }
}