/* Homepage sections — parity-locked to the original homepage styles. */

@layer pages {
  /* ── Hero ───────────────────────────────────────────────────────────── */

  .hero {
    background: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
  }

  .hero__content {
    max-width: var(--container-wide);
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  .hero__text {
    width: 40%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 48px 24px;
    flex-shrink: 0;
  }

  .hero .eyebrow {
    margin: 0;
    color: var(--green-deep);
    font-size: 13px;
  }

  .hero h1 {
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    font-family: var(--font-display);
    color: var(--green-deep);
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .hero__accent {
    font-style: italic;
    font-weight: 400;
    color: var(--green);
  }

  .hero__subtitle {
    width: 100%;
    margin: 0;
    color: var(--text-soft);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.18px;
    text-wrap: balance;
  }

  .hero__cta {
    padding: 14px 32px;
    background: var(--green);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.1px;
    transition: background-color 180ms var(--cf-ease);
  }

  .hero__cta:hover,
  .hero__cta:focus-visible {
    background: var(--green-hover);
  }

  .hero__media {
    justify-self: end;
    width: 100%;
    max-width: none;
    aspect-ratio: 5 / 4;
    /* matches the cream canvas baked into the hero image (owner request 2026-07-11) */
    background-color: var(--cream);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ── Trust strip + retailer marquee ─────────────────────────────────── */

  .trust-strip {
    background: var(--cream);
    padding: 96px 0;
    text-align: center;
    overflow: hidden;
  }

  .trust-strip__head {
    max-width: 880px;
    margin: 0 auto 44px;
    padding: 0 24px;
  }

  .trust-strip h2 {
    margin: 0 0 14px;
    color: var(--green-deep);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    font-size: var(--fs-40);
    line-height: 1.18;
  }

  .trust-strip h2 span {
    color: var(--green);
    font-style: italic;
  }

  .trust-strip p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
  }

  .logo-marquee {
    width: 100%;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 100% 120px;
  }

  .logo-marquee__track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 56px;
    animation: logo-scroll 50s linear infinite;
  }

  .logo-marquee:hover .logo-marquee__track {
    animation-play-state: paused;
  }

  @keyframes logo-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .logo-mark {
    display: inline-block;
    height: 32px;
    min-width: 150px;
    flex-shrink: 0;
    background-color: var(--green-deep);
    mask-image: var(--logo);
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  .logo-mark[data-brand="kaufland"]   { --logo: url("/assets/images/logos/kaufland.svg");   width: 150px; }
  .logo-mark[data-brand="linella"]    { --logo: url("/assets/images/logos/linella.svg");    width: 122px; }
  .logo-mark[data-brand="salamer"]    { --logo: url("/assets/images/logos/salamer.webp");   width: 76px; height: 40px; }
  .logo-mark[data-brand="nr1"]        { --logo: url("/assets/images/logos/nr1.svg");        width: 45px; }
  .logo-mark[data-brand="bonus"]      { --logo: url("/assets/images/logos/bonus.webp");     width: 118px; }
  .logo-mark[data-brand="mega-alina"] { --logo: url("/assets/images/logos/mega-alina.svg"); width: 90px; }
  .logo-mark[data-brand="rogob"]      { --logo: url("/assets/images/logos/rogob.webp");     width: 61px; }
  .logo-mark[data-brand="slavena"]    { --logo: url("/assets/images/logos/slavena.webp");   width: 109px; }

  .trust-strip__cta {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-top: 56px;
    color: var(--green);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: transform 180ms var(--cf-ease), color 180ms var(--cf-ease);
  }

  .trust-strip__cta:hover,
  .trust-strip__cta:focus-visible {
    color: var(--green-deep);
    transform: translateX(2px);
  }

  .trust-strip__cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--green-deep);
    border-radius: 6px;
  }

  /* ── Stat bridge (philosophy) ───────────────────────────────────────── */

  .stat-bridge {
    padding: 96px 24px 96px;
    background: url("/assets/images/brand/leaf-cover-beige.webp") center / cover no-repeat var(--warm-cream);
    text-align: center;
  }

  .stat-bridge .section-head {
    max-width: 880px;
    margin: 0 auto 64px;
  }

  .stat-bridge .section-eyebrow {
    color: var(--green);
    margin: 0 0 24px;
  }

  .stat-bridge h2 {
    margin: 0;
    color: var(--green-deep);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    font-size: var(--fs-40);
    line-height: 1.18;
    text-wrap: balance;
  }

  .stat-bridge__accent {
    font-style: italic;
    font-weight: 400;
    color: var(--green-deep);
  }

  .stat-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0;
  }

  .stat-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    border-radius: 50%;
    color: var(--green-deep);
  }

  .stat-icon svg {
    width: 36px;
    height: 36px;
  }

  .stat-grid > li:nth-child(1) .stat-icon { background: var(--green);   color: var(--warm-cream); }
  .stat-grid > li:nth-child(2) .stat-icon { background: var(--magenta); color: var(--warm-cream); }
  .stat-grid > li:nth-child(3) .stat-icon { background: var(--orange);  color: var(--warm-cream); }
  .stat-grid > li:nth-child(4) .stat-icon { background: var(--sky);     color: var(--green-deep); }

  .stat-grid strong {
    margin: 0 0 8px;
    color: var(--green-deep);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
  }

  .stat-grid del {
    display: inline-block;
    margin: 0 0 14px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration-thickness: 1.2px;
    text-decoration-skip-ink: none;
  }

  .stat-grid li > span:last-child {
    max-width: 240px;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
  }

  /* ── Section wrappers ───────────────────────────────────────────────── */

  .plans {
    padding: 96px 24px 120px;
    background: var(--cream);
  }

  .faq {
    padding: 96px 24px 120px;
    background: var(--cream);
  }

  .faq .section-head {
    margin-bottom: 56px;
  }

  /* ── Products (CSS radio tabs) ──────────────────────────────────────── */

  .products {
    padding: 96px 24px 120px;
    background: var(--cream);
  }

  .products__inner {
    max-width: var(--container);
    margin: 0 auto;
  }

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

  #prod-salate:focus-visible ~ .products__tabs label[for="prod-salate"],
  #prod-ierburi:focus-visible ~ .products__tabs label[for="prod-ierburi"],
  #prod-micro:focus-visible ~ .products__tabs label[for="prod-micro"],
  #prod-soon:focus-visible ~ .products__tabs label[for="prod-soon"] {
    outline: 2px solid var(--green);
    outline-offset: 3px;
  }

  .products__tabs {
    max-width: 720px;
    margin: 0 auto 56px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .products__tab {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border: 1px solid rgba(var(--green-rgb), 0.18);
    border-radius: 999px;
    background: var(--cream);
    color: var(--green);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: color 180ms var(--cf-ease), background-color 180ms var(--cf-ease), border-color 180ms var(--cf-ease);
  }

  .products__tab:hover,
  .products__tab:focus-visible {
    border-color: var(--green);
    color: var(--green);
    outline: none;
  }

  #prod-salate:checked ~ .products__tabs label[for="prod-salate"],
  #prod-ierburi:checked ~ .products__tabs label[for="prod-ierburi"],
  #prod-micro:checked ~ .products__tabs label[for="prod-micro"],
  #prod-soon:checked ~ .products__tabs label[for="prod-soon"] {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
  }

  .products__panels {
    position: relative;
    margin: 0 -24px;
  }

  .products__grid {
    list-style: none;
    margin: 0;
    padding: 8px 24px 24px;
    display: none;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    scrollbar-width: none;
  }

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

  .products__grid:focus-visible {
    outline: 3px solid var(--green-deep);
    outline-offset: -3px;
    border-radius: var(--radius-sm);
  }

  #prod-salate:checked ~ .products__panels .products__grid[data-tab="salate"],
  #prod-ierburi:checked ~ .products__panels .products__grid[data-tab="ierburi"],
  #prod-micro:checked ~ .products__panels .products__grid[data-tab="micro"],
  #prod-soon:checked ~ .products__panels .products__grid[data-tab="soon"] {
    display: flex;
  }

  .products__grid li {
    flex: 0 0 180px;
    height: 240px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 16px 26px;
    border-radius: var(--radius-sm);
    background: #fff;
    text-align: center;
    transition: transform 240ms var(--cf-ease);
  }

  .products__grid li:hover {
    transform: translateY(-4px);
  }

  .products__grid li > span {
    width: 108px;
    height: 108px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 78px;
  }

  .products__grid li > span img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Lettuce cutouts trim tight to bbox; pad to match herb-photo visual scale. */
  .products__grid li > span img[src*="/lettuce/"] {
    padding: 6px;
    box-sizing: border-box;
  }

  .products__grid h3 {
    margin: 0 0 4px;
    color: var(--green);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    font-size: 17px;
    line-height: 1.2;
  }

  .products__grid p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
  }

  .products__panels::before,
  .products__panels::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 48px;
    pointer-events: none;
  }

  .products__panels::before {
    left: 0;
    background: linear-gradient(to right, var(--cream) 30%, rgba(252, 250, 246, 0));
  }

  .products__panels::after {
    right: 0;
    background: linear-gradient(to left, var(--cream) 30%, rgba(252, 250, 246, 0));
  }

  /* ── Features ───────────────────────────────────────────────────────── */

  .features {
    padding: 96px 24px;
    background: var(--cream);
  }

  .features__grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .feature-card {
    position: relative;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--green);
    transition: transform 260ms var(--cf-ease);
  }

  .feature-card:hover {
    transform: translateY(-6px);
  }

  .feature-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Dark-green (--green-deep) scrim behind the text — cream fails WCAG AA over the lighter --green (2.5:1); over --green-deep it reaches 4.5:1+. Fades to reveal the photo up top. */
    background: linear-gradient(to top, rgba(var(--green-deep-rgb), 0.98) 0%, rgba(var(--green-deep-rgb), 0.95) 26%, rgba(var(--green-deep-rgb), 0.45) 48%, rgba(var(--green-deep-rgb), 0) 72%);
  }

  .feature-card div {
    position: relative;
    z-index: 1;
    padding: 32px 28px 28px;
    color: var(--warm-cream);
  }

  .feature-card h3 {
    margin: 0 0 10px;
    color: var(--warm-cream);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    font-size: 24px;
    line-height: 1.2;
  }

  .feature-card p {
    margin: 0;
    color: var(--warm-cream);
    font-size: 14px;
    line-height: 1.55;
  }

  /* ── Testimonials ───────────────────────────────────────────────────── */

  .testimonials {
    position: relative;
    padding: 96px 24px 120px;
    overflow: hidden;
    background: var(--cream);
  }

  .testimonials .section-head {
    max-width: 640px;
    margin: 0 auto 56px;
  }

  .testimonials .section-head h2 {
    margin: 0 0 14px;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .testimonials__columns {
    max-width: var(--container);
    height: 720px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 24px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  }

  .testimonials__column {
    position: relative;
    flex: 1 1 0;
    max-width: 360px;
    overflow: hidden;
  }

  .testimonials__track {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 24px;
    animation: testimonial-scroll linear infinite;
  }

  .testimonials__column--a .testimonials__track { animation-duration: 38s; }
  .testimonials__column--b .testimonials__track { animation-duration: 46s; }
  .testimonials__column--c .testimonials__track { animation-duration: 42s; }

  .testimonials__columns:hover .testimonials__track {
    animation-play-state: paused;
  }

  @keyframes testimonial-scroll {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
  }

  .quote-card {
    padding: 28px;
    border: 1px solid rgba(var(--green-deep-rgb), 0.10);
    border-radius: 24px;
    background: #fff;
  }

  .quote-card p {
    margin: 0 0 20px;
    color: var(--green-deep);
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0;
    font-size: 17px;
    font-style: italic;
    line-height: 1.5;
  }

  .quote-card div {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 12px;
    align-items: center;
  }

  .quote-card span {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
  }

  .quote-card span[data-color="g"] { background: var(--green); }
  .quote-card span[data-color="m"] { background: var(--magenta); }
  .quote-card span[data-color="o"] { background: var(--orange); }
  .quote-card span[data-color="s"] { background: var(--sky); color: var(--green-deep); }

  .quote-card strong {
    display: block;
    color: var(--green-deep);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .quote-card small {
    display: block;
    margin-top: 2px;
    /* 0.6 alpha on the white card measured 3.77:1, under the 4.5:1 minimum
       (WCAG SC 1.4.3). It only surfaced once ICP-02 un-hid columns b/c on
       mobile - the mask/animation had kept axe from evaluating it. --muted is
       the site's own 0.68 token and measures 4.72:1. */
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
  }

  /* ── Growly teaser ──────────────────────────────────────────────────── */

  .growly {
    padding: 96px 24px 100px;
    background: var(--cream);
  }

  .growly__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 72px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    border-radius: var(--radius-lg);
    background: var(--green);
    color: var(--warm-cream);
    overflow: hidden;
  }

  .growly__media {
    aspect-ratio: 4 / 3;
    overflow: visible;
  }

  /* Transparent device cut-out floating directly on the green — no panel. */
  .growly__device {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 16px 26px rgba(30, 43, 36, 0.22));
  }

  .growly h2 {
    margin: 0 0 18px;
    color: var(--warm-cream);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    font-size: var(--fs-40);
    line-height: 1.15;
  }

  .growly h2 em {
    font-style: italic;
  }

  .growly p {
    max-width: 460px;
    margin: 0 0 16px;
    color: var(--warm-cream);
    font-size: 17px;
    line-height: 1.6;
  }

  .growly__eyebrow {
    margin: 0 0 12px;
    color: var(--warm-cream);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .growly p.growly__wink {
    margin-bottom: 32px;
    font-family: var(--font-display);
    font-size: 18px;
    font-style: italic;
    opacity: 1;
  }

  .growly__cta {
    padding: 16px 28px;
    border: 1px solid var(--warm-cream);
    background: transparent;
    color: var(--warm-cream);
    font-size: 15px;
    transition: background-color 180ms var(--cf-ease), color 180ms var(--cf-ease);
  }

  .growly__cta:hover,
  .growly__cta:focus-visible {
    background: var(--warm-cream);
    color: var(--green);
    outline: none;
  }

  /* ── Responsive ─────────────────────────────────────────────────────── */

  @media (max-width: 1100px) and (min-width: 769px) {
    .features__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .stat-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
  }

  @media (max-width: 1100px) {
    .hero__content {
      max-width: var(--container);
    }

    .hero h1 {
      max-width: 416px;
      font-size: 52px;
    }

    .hero__subtitle {
      max-width: 416px;
      margin: 16px 0;
      font-size: 18px;
    }

    .testimonials__column--c {
      display: none;
    }
  }

  @media (max-width: 960px) {
    .hero {
      padding: 34px 21px 48px;
    }

    /* Parity note: the original keeps the hero as a flex ROW at every width;
       below ~700px the text column (min-width 320px, flex-shrink 0) squeezes
       the media to a sliver — the mobile "no hero image" look is that squeeze.
       Reproduced as-is (visible-change rule, DECISIONS.md D-010). */
    .hero__content {
      gap: 40px;
      text-align: center;
    }

    .hero__text {
      padding: 0;
    }

    .hero h1 {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
      font-size: 48px;
    }

    .hero__subtitle {
      margin-left: auto;
      margin-right: auto;
      font-size: 16px;
    }

    .hero__media {
      justify-self: center;
      max-width: 640px;
    }

    .stat-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 48px 32px;
    }

    .features__grid {
      grid-template-columns: 1fr;
    }

    .feature-card {
      aspect-ratio: 16 / 11;
    }

    /* Short 16/11 card → text spans ~half its height, so extend the dark-green scrim up to keep cream at WCAG AA. */
    .feature-card::after {
      background: linear-gradient(to top, rgba(var(--green-deep-rgb), 0.98) 0%, rgba(var(--green-deep-rgb), 0.96) 68%, rgba(var(--green-deep-rgb), 0.5) 84%, rgba(var(--green-deep-rgb), 0) 95%);
    }

    .growly__inner {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 48px 32px;
      border-radius: var(--radius-md);
    }

    .growly h2 {
      font-size: 30px;
    }
  }

  @media (max-width: 768px) {
    .hero h1 {
      font-size: 44px;
      line-height: 1.1;
    }

    /* Mobile: drop the hero image (the flex-row squeeze below ~700px left an
       8px image sliver poking out the right edge). Deliver the intended
       "no hero image on mobile" look cleanly, full-width centered text. */
    .hero__media {
      display: none;
    }

    .hero__text {
      width: 100%;
      min-width: 0;
      align-items: center;
      text-align: center;
    }

    .hero__cta {
      width: auto;
      max-width: 100%;
      padding: 15px 24px;
      font-size: 14px;
    }

    .trust-strip {
      padding: 88px 0 64px;
    }

    .trust-strip h2 {
      font-size: 30px;
    }

    .testimonials .section-head h2 {
      font-size: 28px;
    }

    .stat-bridge {
      padding: 64px 16px 64px;
    }

    .stat-bridge h2 {
      font-size: 30px;
    }

    .stat-bridge .section-head {
      margin-bottom: 48px;
    }

    .stat-grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }

    .stat-grid strong {
      font-size: 22px;
    }

    .plans,
    .products,
    .testimonials {
      padding: 64px 16px 80px;
    }

    .products__panels {
      margin: 0 -16px;
    }

    .products__grid {
      padding: 8px 16px 24px;
    }

    .products__tabs {
      gap: 8px;
      margin-bottom: 40px;
    }

    .products__tab {
      padding: 10px 18px;
      font-size: 13px;
    }

    .products__grid li {
      flex-basis: 160px;
    }

    /* All 9 quotes reach mobile, stacked as one static list instead of the
       3-up marquee (ICP-02): the 3 columns can't fit side by side at this
       width, and each column's track repeats its cards once for the
       vertical-scroll loop, so a naive un-hide would triple the height. */
    .testimonials__columns {
      height: auto;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 24px;
      mask-image: none;
    }

    .testimonials__column,
    .testimonials__column--b,
    .testimonials__column--c {
      display: block;
      /* .testimonials__column's base rule is a flex item (flex: 1 1 0) with
         overflow: hidden - in a column-direction flex container that combo
         collapses it to 0 height (flexbox's automatic-minimum-size rule
         drops to 0 once overflow isn't visible), which clipped every card.
         flex-basis: auto restores sizing from content. */
      flex: 0 1 auto;
      width: 100%;
      max-width: 400px;
    }

    .testimonials__track {
      transform: none;
      animation: none;
    }

    .testimonials__track .quote-card:nth-child(n+4) {
      display: none;
    }

    .quote-card {
      padding: 22px;
    }

    .quote-card p {
      font-size: 15px;
    }

    .growly {
      padding: 56px 16px 64px;
    }

    .features {
      padding: 56px 16px;
    }
  }

  @media (max-width: 430px) {
    .hero h1 {
      font-size: 43px;
    }

    .trust-strip h2 {
      font-size: 29px;
    }

    .logo-mark {
      height: 28px;
    }

    .products__panels::before,
    .products__panels::after {
      display: none;
    }

    .products__grid {
      scroll-padding-left: 16px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Stopped marquee/testimonial tracks would strand content off-screen:
       reflow so every unique item is reachable, hide the loop duplicates. */
    .logo-marquee__track {
      flex-wrap: wrap;
      justify-content: center;
      gap: 28px 36px;
      padding: 0 24px;
      transform: none;
      animation: none !important;
    }

    .logo-marquee__track .logo-mark:nth-child(n+9) {
      display: none;
    }

    .testimonials__columns {
      height: auto;
      flex-direction: column;
      align-items: center;
      mask-image: none;
    }

    .testimonials__column {
      width: 100%;
      max-width: 560px;
    }

    .testimonials__track {
      transform: none;
      animation: none !important;
    }

    .testimonials__track .quote-card:nth-child(n+4) {
      display: none;
    }
  }
}