/* Continuous homepage reels, using the welcome banner's linear motion. */
.info-bar.rtf-highlight-reel { overflow: hidden; }
.rtf-highlight-reel .info-bar-inner,
.how-section .steps-grid.rtf-continuous-reel,
.bases-section .bases-grid.rtf-continuous-reel {
  display: block;
  gap: 0;
  /* Native keyboard handlers read this value; block layout adds no extra gap. */
  column-gap: 16px;
  overflow: hidden;
  scroll-snap-type: none;
  scrollbar-width: none;
  touch-action: pan-y;
}
.rtf-highlight-reel .info-bar-inner {
  max-width: none;
  padding: 4px var(--gutter);
}
.how-section .steps-grid.rtf-continuous-reel,
.bases-section .bases-grid.rtf-continuous-reel {
  margin-inline: 0;
  padding: 4px 0;
}
.rtf-continuous-reel > .rtf-home-reel-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  will-change: transform;
  animation: rtf-home-continuous var(--rtf-home-reel-duration) linear infinite;
  animation-play-state: paused;
}
.rtf-continuous-reel.rtf-reel-running > .rtf-home-reel-track { animation-play-state: running; }
.rtf-home-reel-set {
  display: flex;
  align-items: stretch;
  flex: none;
  gap: 16px;
  padding-right: 16px;
  counter-reset: step;
}
.rtf-highlight-reel .info-item,
.rtf-continuous-reel .step-card {
  flex: 0 0 clamp(280px, 74vw, 360px);
  width: clamp(280px, 74vw, 360px);
  min-height: 82px;
  padding: 12px 14px;
  box-sizing: border-box;
  opacity: 1;
  transform: none;
}
.rtf-continuous-reel .step-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: center;
  gap: 2px 12px;
  scroll-snap-align: none;
}
.rtf-continuous-reel .step-card::before {
  content: attr(data-reel-step);
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  width: 36px;
  height: 36px;
  margin: 0;
}
.rtf-continuous-reel .step-card h3 {
  grid-column: 2;
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.35;
  letter-spacing: normal;
}
.rtf-continuous-reel .step-card .rtf-step-summary {
  grid-column: 2;
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.rtf-continuous-reel .step-card.rtf-step-compact > p:not(.rtf-step-summary) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: normal;
}
.rtf-continuous-reel .base-card {
  display: flex;
  flex: 0 0 clamp(264px, 80vw, 340px);
  width: clamp(264px, 80vw, 340px);
  min-height: 228px;
  scroll-snap-align: none;
  box-sizing: border-box;
  opacity: 1;
  transform: none;
}
.rtf-continuous-reel .base-card-content { display: flex; flex-direction: column; min-width: 0; }
.rtf-highlight-reel .info-item-text { overflow-wrap: anywhere; }
.rtf-highlight-reel .info-bar-inner:focus-visible,
.how-section .steps-grid.rtf-continuous-reel:focus-visible,
.bases-section .bases-grid.rtf-continuous-reel:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.rtf-continuous-reel.rtf-reel-reading {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}
.rtf-reel-reading > .rtf-home-reel-track { animation: none; transform: none; }
.rtf-reel-reading [data-home-reel-clone] { display: none; }
@keyframes rtf-home-continuous {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--rtf-home-reel-distance)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rtf-continuous-reel { overflow-x: auto !important; touch-action: pan-x pan-y; }
  .rtf-continuous-reel > .rtf-home-reel-track { animation: none !important; transform: none !important; will-change: auto; }
  .rtf-continuous-reel [data-home-reel-clone] { display: none; }
}

/* Compact desktop spacing around the two homepage information reels. */
@media (min-width: 901px) {
  .how-section { padding-block: 32px 20px; }
  .bases-section { padding-block: 24px 40px; }
  .how-section > .section-inner > .section-header,
  .bases-section > .section-inner > .section-header { margin-bottom: 16px; }
}

/* Match the compact pre-order cards on mobile and tablet. */
@media (max-width: 900px) {
  .bases-section .rtf-continuous-reel .base-card {
    flex-basis: clamp(280px, 74vw, 360px);
    width: clamp(280px, 74vw, 360px);
    min-height: 82px;
    padding: 12px 14px;
  }
  .bases-section .rtf-continuous-reel .base-card-content {
    justify-content: center;
    gap: 2px;
  }
  .bases-section .rtf-continuous-reel .base-card h3 {
    margin: 0;
    font-size: var(--t-sm);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .bases-section .rtf-continuous-reel .base-weight {
    margin-top: 0;
    padding: 0;
    font-size: var(--t-xs);
    line-height: 1.45;
    background: none;
    border-radius: 0;
  }
  .bases-section .rtf-continuous-reel .base-card p {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: normal;
  }
  .bases-section .rtf-continuous-reel.rtf-reel-reading .base-card p {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    font-size: var(--t-xs);
    line-height: 1.45;
  }
}

/* Keep full desktop base details together without an empty price spacer. */
@media (min-width: 901px) {
  .bases-section .rtf-home-reel-set {
    align-items: flex-start;
  }
  .bases-section .rtf-continuous-reel .base-card {
    min-height: 0;
    padding: 12px 14px;
  }
  .bases-section .rtf-continuous-reel .base-card-content {
    justify-content: flex-start;
    gap: 6px;
  }
  .bases-section .rtf-continuous-reel .base-card h3,
  .bases-section .rtf-continuous-reel .base-card p {
    margin: 0;
  }
  .bases-section .rtf-continuous-reel .base-weight {
    margin-top: 0;
  }
}

/* Compact the mobile section containing the fabric-base information reel. */
@media (max-width: 900px) {
  .how-section {
    padding-bottom: 16px;
  }
  .bases-section {
    padding-block: 16px 20px;
  }
  .bases-section > .section-inner > .section-header {
    margin-bottom: 12px;
  }
}

/* Let mobile fabric-base cards fit their two visible lines of information. */
@media (max-width: 900px) {
  .bases-section .rtf-home-reel-set {
    align-items: flex-start;
  }
  .bases-section .rtf-continuous-reel .base-card {
    flex-basis: auto;
    width: max-content;
    min-width: 0;
    max-width: min(280px, calc(100vw - 2 * var(--gutter)));
    min-height: 0;
    padding: 10px 12px;
  }
  .bases-section .rtf-continuous-reel.rtf-reel-reading .base-card {
    flex-basis: clamp(280px, 74vw, 360px);
    width: clamp(280px, 74vw, 360px);
    max-width: none;
  }
}

/* Match the compact mobile fabric-base reel and tighten vertical spacing. */
@media (max-width: 900px) {
  .rtf-highlight-reel { padding-block: 8px; }
  .how-section { padding-top: 16px; }
  .how-section > .section-inner > .section-header { margin-bottom: 12px; }
  .rtf-highlight-reel .rtf-home-reel-set,
  .how-section .rtf-home-reel-set { align-items: flex-start; }
  .rtf-highlight-reel .info-item,
  .how-section .rtf-continuous-reel .step-card {
    flex-basis: auto;
    width: max-content;
    min-width: 0;
    max-width: min(280px, calc(100vw - 2 * var(--gutter)));
    min-height: 0;
    padding: 10px 12px;
    border-radius: var(--r-md);
  }
  .rtf-highlight-reel .info-item { gap: 10px; padding: 10px 12px !important; }
  .rtf-highlight-reel .info-item-icon { width: 28px !important; height: 28px !important; border-radius: 8px; }
  .rtf-highlight-reel .info-item-icon svg { width: 18px; height: 18px; }
  .rtf-highlight-reel .info-item-text { gap: 2px; }
  .how-section .rtf-continuous-reel .step-card {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 2px 10px;
  }
  .how-section .rtf-continuous-reel .step-card::before {
    width: 28px;
    height: 28px;
    font-size: var(--t-xs);
    line-height: 1;
  }
  .rtf-highlight-reel .rtf-reel-reading .info-item,
  .how-section .rtf-continuous-reel.rtf-reel-reading .step-card {
    flex-basis: clamp(280px, 74vw, 360px);
    width: clamp(280px, 74vw, 360px);
    max-width: none;
  }
}