/* top-lists.html (page-only, tidy pass 2026-10-18): the one-line method strip that replaced the four method
   steps and the money box. Loads after listing.css and hub.css. */
.tl-method{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem 1rem;align-items:center;padding:1rem 1.15rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.tl-method__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:15px;background:var(--aqua-tint);color:var(--aqua-800)}
.tl-method h2{font-size:1.1rem;line-height:1.3}
.tl-method p{font-size:.94rem;color:var(--text);margin-top:.15rem}
.tl-method .rc-more{grid-column:2;justify-self:start;min-height:2.75rem}
@media (min-width:768px){.tl-method{grid-template-columns:auto minmax(0,1fr) auto}.tl-method .rc-more{grid-column:auto}}
/* the method strip sits closer to the card grid above it */
#method{padding-top:clamp(1.5rem,1rem + 1.5vw,2.5rem)}
/* phones and tablets: the "Missing a list?" tile as one short row (drawing left); its button under it on a phone,
   at the row's end on a tablet, where the tile spans the grid */
@media (max-width:1023.98px){
  .tl-ask{grid-template-columns:3.5rem minmax(0,1fr);gap:.2rem .9rem;align-items:center;padding:1rem 1.1rem}
  .tl-ask .rc-ask__art{grid-column:1;grid-row:1/3;width:3.5rem}
  .tl-ask h3{grid-column:2;grid-row:1}
  .tl-ask p{grid-column:2;grid-row:2}
  .tl-ask .rc-btn{grid-column:1/-1;margin-top:.5rem}
}
@media (min-width:640px) and (max-width:1023.98px){.tl-ask{grid-template-columns:3.5rem minmax(0,1fr) auto}.tl-ask .rc-btn{grid-column:3;grid-row:1/3;margin-top:0}}
/* review-tidy P3-13: the promo button keeps one line at 1024; on a phone the three hero facts sit two per row
   (the last one across the row) instead of one per row */
.rc-promo__cta{white-space:nowrap}
@media (max-width:479.98px){
  .tl-hero .rc-phero__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .tl-hero .rc-phero__facts span{align-items:flex-start;border-radius:var(--r-m);line-height:1.3}
  .tl-hero .rc-phero__facts span .ic{flex:none;margin-top:.05rem}
  .tl-hero .rc-phero__facts span:last-child:nth-child(odd){grid-column:1/-1}
}