/* The homepage uses the same native carousel behavior as the product catalogue. */
.home-needs .heading-row { margin-bottom: 25px; }
.home-needs .needs-intro { margin-top: 12px; font-size: 14px; }
.home-needs .needs-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 15px; }
.home-needs .need-tile { grid-column: span 2; min-height: 162px; cursor: pointer; transform: none; }
.home-needs .need-tile:nth-child(5) { grid-column: 2 / span 2; }
.home-needs .need-tile:nth-child(6) { grid-column: 4 / span 2; }
.home-needs .need-tile:nth-child(7) { grid-column: 6 / span 2; }
.home-needs .need-tile small { margin-top: 6px; margin-bottom: 0; color: #806000; font-size: 11px; font-weight: 700; line-height: 1.45; }
.home-needs .need-tile:hover { transform: none; }
.needs-navigation { display: none; }
.needs-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.home-needs .needs-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; }
.home-needs .needs-links .simple-link { min-height: 44px; }

@media (max-width: 900px) {
  .home-needs.section { padding-block: 30px 32px; }
  .home-needs .heading-row { margin-bottom: 18px; display: block; }
  .home-needs .eyebrow { margin-bottom: 10px; font-size: 9px; }
  .home-needs #needs-title { max-width: none; white-space: nowrap; text-wrap: nowrap; font-size: clamp(20px, 6.1vw, 36px); line-height: 1.2; letter-spacing: -.045em; }
  .home-needs .needs-intro { margin-top: 9px; font-size: 12px; }
  .home-needs .needs-rail {
    display: flex; align-items: stretch; gap: 12px; margin-inline: 0; padding: 0;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scroll-padding-inline: 0; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .home-needs .needs-rail::-webkit-scrollbar { display: none; }
  .home-needs .needs-rail:focus-visible { outline-offset: 2px; border-radius: 12px; }
  .home-needs .needs-rail > .need-tile {
    flex: 0 0 100%; grid-column: auto; display: flex;
    align-items: center; gap: 16px; min-width: 0; min-height: 142px;
    padding: 22px 20px; scroll-snap-align: start; scroll-snap-stop: always; background: var(--mist);
    border: 1px solid var(--line); transform: none;
  }
  .home-needs .need-tile > .icon { width: 31px; height: 31px; margin: 0; }
  .home-needs .need-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; padding-right: 13px; }
  .home-needs .need-tile strong { font-size: 18px; line-height: 1.3; letter-spacing: -.035em; text-wrap: pretty; }
  .home-needs .need-tile small { font-size: 11px; line-height: 1.45; margin-top: 6px; }
  .home-needs .tile-arrow { top: 16px; right: 15px; }
  .home-needs .tile-arrow > .icon { width: 17px; height: 17px; }
  .home-needs .need-tile:focus-visible { outline-offset: -3px; }
  .home-needs .need-tile:hover { border-color: #a27b00; background: #fffcef; }
  .home-needs .need-tile:active { background: #fff4c4; }
  .needs-navigation { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; margin-top: 12px; }
  .needs-help { font-size: 10px; color: var(--muted); }
  .needs-controls:not([hidden]) { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; width: 100%; }
  .needs-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; padding: 0; background: var(--paper); }
  .needs-arrow > .icon { width: 18px; height: 18px; }
  .needs-previous > .icon { transform: rotate(180deg); }
  .needs-arrow:not(:disabled):hover { background: #fff4c4; border-color: #a27b00; }
  .needs-arrow:not(:disabled):active { background: var(--yellow); }
  .needs-arrow:disabled { opacity: .35; }
  .needs-counter { min-width: 37px; text-align: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .home-needs .needs-links { justify-content: space-between; gap: 5px 12px; margin-top: 8px; }
  .home-needs .needs-links .simple-link { font-size: 11px; gap: 8px; }
  .home-needs .needs-links .icon { width: 16px; height: 16px; }
}

@media (max-width: 360px) {
  .home-needs .needs-rail > .need-tile { min-height: 140px; padding: 19px 16px; gap: 12px; }
  .home-needs .need-tile strong { font-size: 17px; }
  .home-needs .need-tile > .icon { width: 27px; height: 27px; }
  .needs-help { max-width: 108px; }
  .needs-controls:not([hidden]) { gap: 4px; }
  .home-needs .needs-links .simple-link { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-needs .need-tile { transition: none; }
}

@media (forced-colors: active) {
  .needs-arrow, .home-needs .need-tile { border-color: ButtonText; }
}