/* Homepage usability pass (2026-11-01), loaded last. From a measured audit at 1440px and 375px:
     - a text link that wraps keeps its arrow after the last word (it used to float to the far right edge)
     - on a phone the TikTok Shop and author service cards sit in a swipe row instead of a 2,000px stack
     - no text under 12px, and 44px tap targets on the footer links and the video avatars */

/* arrows follow the last word */
.card .link,.see-all .link{display:inline-block}
.card .link svg,.see-all .link svg{display:inline-block;vertical-align:-3px;margin-left:2px}
.link .nw{white-space:nowrap}   /* the last word and the arrow never part */

/* the Trustpilot panel ended on its stats strip; the strip repeated the results ledger and is gone, so the panel gets its own floor */
.rt-panel{padding-bottom:clamp(44px,5vw,72px)}

/* 12px floor for the small labels */
.hv-res-top small,.hv-legend small{font-size:.75rem}
.pw-tag{font-size:.75rem}
.aeo-lab{font-size:12px}

.swipe-hint{display:none}

@media (max-width:760px){
  /* one card at a time, the next one peeking in; the thin scrollbar doubles as a position indicator */
  .tts-grid,#authors .kdp-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,340px);gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;
    margin-inline:-16px;padding:4px 16px 14px;scrollbar-width:thin}
  .tts-grid{scrollbar-color:rgba(255,255,255,.28) transparent}
  #authors .kdp-cards{scrollbar-color:rgba(40,88,15,.3) transparent}
  .tts-grid>*,#authors .kdp-cards>*{scroll-snap-align:start}
  #authors .brand-card img{display:none}   /* decorative; in a swipe row it set every card's height */
  #authors .kdp-grid{row-gap:0}
  #authors .kdp-grid>div:first-child{margin-bottom:32px}
  .kdp-grid .swipe-hint{margin:0 0 10px}
  .swipe-hint{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:13px;font-weight:500;color:var(--slate-500)}
  .swipe-hint svg{width:16px;height:16px}
  .tts .swipe-hint{color:var(--slate-300);margin-top:-24px}

  /* footer links: 44px targets without them overlapping */
  .sf-col ul{gap:22px}
  .site-footer ul a{padding:11px 0;margin:-11px 0}
}
@media (prefers-reduced-motion:no-preference){
  .tts-grid,#authors .kdp-cards{scroll-behavior:smooth}
}