/* Homepage only. The approved design lives in site.css; these are small fixes on top of it.
   Tidy pass 2026-10-18: the method strip, the phone rails and the phone-only drops are here. */

/* hero: the disclosure line wraps under its icon, the link stays in the sentence */
.intro .disclose{align-items:flex-start}
.intro .disclose .ic{margin-top:.2rem}
.intro .disclose a{white-space:nowrap}

/* Cover picks: the product name links to its block in the top list (#pick-N) */
.cpick__name{color:inherit;text-decoration:none}
.cpick__name:hover b{text-decoration:underline}

/* Review cards: the two actions wrap instead of clipping "Read review" at tablet width (also in site.css now) */
.reviews .rv__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .9rem}

/* "Demo items" chip (mockup only) */
.fresh__mock{margin-top:.4rem}

/* How we pick: the counters and the method in one strip, with a small head row */
.trust__head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;margin-bottom:.75rem}
.trust__head h2{font-size:1.2rem}
.trust__head .more-link{order:2;margin-left:auto}
.trust__head .sample-chip{order:1}
.trust--method dd{font-size:1.25rem}

/* the lead quote: content sits in the middle instead of leaving a gap above the caption */
.say--lead{justify-content:center}
.say--lead figcaption{margin-top:1.25rem}

/* phones: store buttons and small links reach 44 px */
@media (max-width:47.99rem){
  .cpick .btn,.rank .btn,.rv__actions .btn{min-height:44px;display:inline-flex;align-items:center}
  .popular a,.trust__head .more-link{min-height:44px}
}

/* phones: the Popular chips are one scrolling row that runs to the screen edge and fades there, so the
   next chip always shows (review static-home r3, P3-1) */
@media (max-width:47.99rem){
  .intro .popular{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 2.5rem .2rem 0;margin-right:calc(-1 * var(--gut));
    -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
  .intro .popular>*{flex:none}
}

/* phones: top lists become a swipe rail like the reviews and comparisons below them; the next card shows
   at the edge. The big card photo stays, the small rank thumbnails go, so names keep their width. */
@media (max-width:47.99rem){
  #lists .lists{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem .25rem 1rem;margin-inline:-.25rem}
  #lists .lists>*{scroll-snap-align:start}
  #lists .rank{grid-template-columns:1.4rem 1fr auto}
  #lists .rank img{display:none}
  #lists .showmore{margin-top:.5rem}
}

/* phones: the body map's six labels repeat the eight category tiles, so only the tiles show */
@media (max-width:47.99rem){
  .zones__map{display:none}
}

/* phones: the lead review's two buttons share a row; smaller blog thumbnails */
@media (max-width:47.99rem){
  .rv-lead__actions{display:flex;flex-wrap:wrap}
  .rv-lead__actions .btn{flex:1 1 auto}
  .post{grid-template-columns:5.5rem 1fr;gap:.85rem}
  .post img{width:5.5rem}
}

/* tablet: four counters as 2 x 2 */
@media (min-width:40rem) and (max-width:63.99rem){
  .trust dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__item{border-bottom:1px solid var(--line)}
  .trust__item:nth-child(2n){border-right:0}
  .trust__item:nth-child(n+3){border-bottom:0}
}
/* tablet: the third top-list card, alone in its row, runs across both columns as a wide card */
@media (min-width:48rem) and (max-width:63.99rem){
  .lists>.tl:nth-child(3){grid-column:1/-1;flex-direction:row}
  .lists>.tl:nth-child(3) .tl__media{flex:0 0 42%;aspect-ratio:auto;min-height:100%}
}

/* small desktop: the cover picks and Popular chips drop their icons, and the body figure narrows so
   the eight category tiles stay four across (two even rows) */
@media (min-width:64rem) and (max-width:79.99rem){
  .cpick{grid-template-columns:auto 1fr}
  .cpick img{display:none}
  .intro .popular a .ic{display:none}
  .zones{grid-template-columns:17rem 1fr;gap:2rem}
  .cat__body h3{font-size:.95rem}
}

/* phones: a tighter section rhythm; the method head keeps heading and link on one row (chip below);
   the sign-up field and button share a row */
@media (max-width:47.99rem){
  main .sec{padding-block:2.75rem}
  .trust__head .sample-chip{order:3}
  .widget--mail form{display:flex;gap:.5rem}
  .widget--mail input{flex:1 1 0;width:0;min-width:0}
}

/* tablet and up: the four small blog posts (kind + title) sit two by two under the lead post */
@media (min-width:40rem){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-lead{grid-column:1/-1}
  .post{grid-template-columns:5.5rem 1fr;align-items:center}
  .post img{width:5.5rem}
}

/* desktop: the lead quote is set larger, so it fills the card the two stacked quotes set the height of
   (post-tidy review P3-7: the centred content left about 90 px empty above and below) */
@media (min-width:64rem){
  .say--lead blockquote{font-size:clamp(1.5rem,.9rem + 1vw,1.8rem);line-height:1.38}
}
/* top-list cards in one row share a height; a card with fewer picks (the scarves list shows 2 since
   2026-10-18) gives the spare height to its photo, so no card ends on an empty band. Tablet keeps its
   wide third card, which sizes itself. */
@media (max-width:47.99rem),(min-width:64rem){
  #lists .tl__media{flex:1 0 auto}
  #lists .tl__body{flex:0 0 auto}
}