/* RestfulPicks: index, hub and static page components. Load after site.css (and article.css when a page
   uses rp-crumbs or rp-prose):  <link rel="stylesheet" href="assets/listing.css">
   Cards and grids come from site.css (rp-card + rp-tl / rp-rv / rp-duel / rp-post, rp-grid--2/3/4, rp-cat,
   rp-icard). Vocabulary (see styleguide.html): rp-phero, rp-filters, rp-toolbar, rp-pager, rp-hubhero +
   rp-subtopics, rp-icards, rp-tiles, rp-split, rp-legal (+ rail), rp-contact / rp-form / rp-field / rp-cinfo,
   rp-sresults / rp-sr, rp-empty, rp-lost, rp-smap. */

/* ---------- page hero (index pages, about, legal) ---------- */
.rp-phero{position:relative;background:linear-gradient(180deg,var(--lav),var(--ground));padding:clamp(1.25rem,1rem + 1vw,2rem) 0 clamp(2rem,1.4rem + 2.5vw,3.5rem);overflow:hidden}
.rp-phero::after{content:"";position:absolute;left:-8rem;bottom:-10rem;width:24rem;height:24rem;border-radius:999px;background:radial-gradient(circle,rgb(185 176 245/.35),transparent 70%);pointer-events:none}
.rp-phero__grid{position:relative;z-index:1;display:grid;gap:1.75rem;align-items:center;margin-top:1rem}
.rp-phero h1{margin-top:.75rem;font-size:clamp(1.9rem,1.35rem + 2.2vw,2.9rem);line-height:1.1;letter-spacing:-.02em}
.rp-phero__lede{margin-top:.75rem;max-width:38rem;font-size:1.08rem;color:var(--text)}
.rp-phero__counts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.rp-phero__art{position:relative;justify-self:center;width:min(100%,24rem)}
.rp-phero__art img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:999px 999px var(--r-l) var(--r-l);outline:1px solid rgb(185 176 245/.7);outline-offset:7px;box-shadow:var(--sh-2)}
.rp-phero__art .rp-acover__moon,.rp-phero__moon{position:absolute;top:-.6rem;right:.6rem;width:3.4rem;height:3.4rem;border-radius:999px;background:radial-gradient(circle at 36% 34%,#fff8de,var(--moon) 64%,#d4a03a);box-shadow:0 0 40px 8px rgb(232 184 74/.35)}
@media (min-width:900px){.rp-phero__grid--art{grid-template-columns:1.2fr .8fr;gap:3rem}}

/* ---------- filter chips, toolbar, pagination ---------- */
.rp-filters{display:flex;gap:.45rem;overflow-x:auto;padding:.2rem .1rem .5rem;scrollbar-width:thin}
.rp-filters a,.rp-filters button{display:inline-flex;align-items:center;gap:.4rem;flex:none;min-height:2.6rem;padding:.4rem .95rem;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font:700 .9rem var(--body);text-decoration:none;cursor:pointer;white-space:nowrap}
.rp-filters a .rp-ic{color:var(--act)}
.rp-filters a:hover{border-color:var(--act);color:var(--act)}
.rp-filters a[aria-current]{background:var(--night);border-color:var(--night);color:#fff}
.rp-filters a[aria-current] .rp-ic{color:var(--moon)}
.rp-filters__count{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:999px;background:var(--lav);color:var(--chip-text);font-size:.78rem}
.rp-filters a[aria-current] .rp-filters__count{background:rgb(255 255 255/.15);color:#fff}
.rp-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;margin-block:1rem 1.25rem}
.rp-toolbar__count{color:var(--muted);font-size:.95rem}
.rp-toolbar__count b{color:var(--ink)}
.rp-select{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--muted)}
.rp-select select{min-height:2.6rem;padding:.35rem 2.2rem .35rem .85rem;border-radius:12px;border:1.5px solid var(--line-2);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5878' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .65rem center/1rem;font:600 .92rem var(--body);color:var(--ink);appearance:none}
.rp-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem;margin-top:2rem}
.rp-pager a,.rp-pager span{display:inline-grid;place-items:center;min-width:2.75rem;min-height:2.75rem;padding:0 .7rem;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font-weight:700;text-decoration:none}
.rp-pager a:hover{border-color:var(--act);color:var(--act)}
.rp-pager [aria-current]{background:var(--act);border-color:var(--act);color:#fff}
.rp-pager__step{display:inline-flex!important;gap:.3rem}
.rp-pager__gap{border:0!important;background:transparent!important;min-width:1.5rem!important}
/* small phones: page numbers on the first row, Previous and Next share a second row */
@media (max-width:479px){.rp-pager{gap:.4rem}.rp-pager::after{content:"";flex-basis:100%;order:0}.rp-pager__step{order:1;flex:1 1 40%;justify-content:center}}

/* ---------- hub hero: a small night sky, arched photo, sub-topic chips ---------- */
.rp-hubhero{position:relative;background-color:var(--night);color:var(--night-muted);overflow:hidden;padding:clamp(1.25rem,1rem + 1vw,2rem) 0 0}
.rp-hubhero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1b1846,rgb(46 42 110/0) 70%),var(--stars);background-size:auto,560px 300px;pointer-events:none}
.rp-hubhero>*{position:relative}
.rp-hubhero__grid{display:grid;gap:1.75rem;align-items:center;margin-top:1rem;padding-bottom:clamp(2rem,1.4rem + 2.5vw,3.5rem)}
.rp-hubhero__h1{font-family:var(--display);font-weight:700}
.rp-hubhero h1,.rp-hubhero__h1{margin-top:.75rem;color:#fff;font-size:clamp(1.9rem,1.35rem + 2.2vw,2.9rem);line-height:1.1;letter-spacing:-.02em}
.rp-hubhero__lede{margin-top:.75rem;max-width:38rem;font-size:1.08rem}
.rp-hubhero__note{display:flex;gap:.5rem;align-items:flex-start;margin-top:1rem;font-size:.9rem}
.rp-hubhero__note .rp-ic{color:var(--moon);margin-top:.15rem}
.rp-hubhero__media{position:relative;justify-self:center;width:min(100%,24rem)}
.rp-hubhero__media img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:999px 999px var(--r-l) var(--r-l);outline:1px solid rgb(232 184 74/.45);outline-offset:8px}
.rp-hubhero__media .rp-phero__moon{top:-1rem;right:-.3rem;width:4rem;height:4rem}
.rp-hubhero__wave{display:block;width:100%;height:clamp(36px,5vw,72px);color:var(--ground);margin-bottom:-1px}
@media (min-width:900px){.rp-hubhero__grid{grid-template-columns:1.2fr .8fr;gap:3rem}}
.rp-subtopics{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.rp-subtopics a{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.35rem .9rem;border-radius:999px;background:rgb(255 255 255/.08);border:1px solid rgb(205 200 244/.3);color:#fff;font-weight:700;font-size:.9rem;text-decoration:none}
.rp-subtopics a .rp-ic{color:var(--moon)}
.rp-subtopics a:hover{background:rgb(255 255 255/.16)}
.rp-subtopics--light a{background:#fff;border-color:var(--line-2);color:var(--chip-text)}
.rp-subtopics--light a .rp-ic{color:var(--act)}
.rp-subtopics--light a:hover{border-color:var(--act)}

/* ---------- icon cards (pick by situation), type tiles, split block ---------- */
.rp-icards{display:grid;gap:1rem}
@media (min-width:640px){.rp-icards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.rp-icards--4{grid-template-columns:repeat(4,minmax(0,1fr))}.rp-icards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rp-icard__links{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:auto;padding-top:.4rem}
.rp-icard p{font-size:.93rem;color:var(--muted)}
.rp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (min-width:900px){.rp-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rp-tile{display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);text-decoration:none;color:var(--text)}
.rp-tile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rp-tile__art{display:grid;place-items:center;aspect-ratio:4/3;background:linear-gradient(145deg,#fff,var(--lav));color:var(--act)}
.rp-tile__art .rp-ic{width:4.5rem;height:4.5rem;stroke-width:1.3}
.rp-tile__body{padding:.8rem .9rem 1rem}
.rp-tile h3{font-size:1.02rem}
.rp-tile p{margin-top:.25rem;font-size:.86rem;color:var(--muted)}
a.rp-tile:hover{border-color:var(--lilac)}
.rp-split{display:grid;gap:1.75rem;align-items:center}
.rp-split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 110px;box-shadow:var(--sh-1)}
.rp-split__text>*+*{margin-top:.8rem}
.rp-split__text h2,.rp-split__text h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
@media (min-width:900px){.rp-split{grid-template-columns:1fr 1fr;gap:3rem}.rp-split--flip .rp-split__media{order:2}}

/* ---------- legal pages: prose + side table of contents ---------- */
.rp-legal{display:grid;gap:2rem;padding-block:clamp(1.5rem,1rem + 2vw,2.75rem) var(--sec)}
.rp-legal__main{min-width:0;padding:clamp(1.1rem,.8rem + 1.5vw,2.25rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-legal__note{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:1.5rem;padding:.8rem 1rem;border-radius:var(--r-m);background:var(--lav);font-size:.92rem;color:var(--ink)}
.rp-legal__note .rp-ic{color:var(--act);margin-top:.15rem}
.rp-legal__rail{display:none}
/* phones and tablets: a collapsible details.rp-toc (article.css) at the top of rp-legal__main stands in for the rail */
.rp-legal__main>.rp-toc{margin-bottom:1.25rem}
@media (min-width:1024px){.rp-legal{grid-template-columns:16rem minmax(0,1fr);gap:2.5rem}.rp-legal__rail{display:block}.rp-legal__rail>div{position:sticky;top:6rem}}
/* the rail shows from 1024 px, so the toggle goes from there too (article.css hides details.rp-toc only from 1200 px) */
@media (min-width:1024px){.rp-legal__main>.rp-toc{display:none}}

/* ---------- contact ---------- */
.rp-contact{display:grid;gap:1.5rem;padding-block:clamp(1.5rem,1rem + 2vw,2.75rem) var(--sec)}
@media (min-width:1024px){.rp-contact{grid-template-columns:1.3fr .7fr;align-items:start;gap:2.5rem}}
.rp-form{display:grid;gap:1rem;padding:clamp(1.1rem,.8rem + 1.5vw,2rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-form__row{display:grid;gap:1rem}
@media (min-width:640px){.rp-form__row{grid-template-columns:1fr 1fr}}
.rp-field{display:grid;gap:.35rem}
.rp-field label{font-weight:700;color:var(--ink);font-size:.95rem}
.rp-field small{color:var(--muted);font-size:.84rem}
.rp-field input,.rp-field select,.rp-field textarea{width:100%;min-height:2.9rem;padding:.6rem .85rem;border-radius:12px;border:1.5px solid var(--line-2);background:var(--ground);font:500 1rem var(--body);color:var(--ink)}
.rp-field textarea{min-height:9rem;resize:vertical}
.rp-field select{appearance:none;background:var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5878' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center/1rem;padding-right:2.4rem}
.rp-field input:focus,.rp-field select:focus,.rp-field textarea:focus{outline:none;border-color:var(--act);background:#fff;box-shadow:0 0 0 4px rgb(74 67 168/.15)}
.rp-form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.rp-form__note{font-size:.85rem;color:var(--muted)}
.rp-cinfo{position:relative;display:grid;gap:.9rem;padding:1.4rem;border-radius:var(--r-xl);background-color:var(--night);color:var(--night-muted);overflow:hidden}
.rp-cinfo::before{content:"";position:absolute;inset:0;background-image:var(--stars);background-size:380px 220px;opacity:.6}
.rp-cinfo>*{position:relative}
.rp-cinfo h2{color:#fff;font-size:1.35rem}
.rp-cinfo li{display:flex;gap:.6rem;align-items:flex-start}
.rp-cinfo li .rp-ic{color:var(--moon);margin-top:.2rem}
.rp-cinfo a{color:#fff;font-weight:700}

/* ---------- search results ---------- */
.rp-sresults{display:grid;gap:.75rem}
.rp-sresults__count{color:var(--muted);margin-bottom:.4rem}
.rp-sr{position:relative;display:grid;grid-template-columns:5rem minmax(0,1fr);gap:.9rem;align-items:start;padding:.8rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -18px rgb(46 42 110/.5)}
.rp-sr img{width:5rem;height:5rem;border-radius:14px;object-fit:cover}
.rp-sr__title{font-size:1.08rem;margin-top:.25rem}
.rp-sr__title a{color:var(--ink);text-decoration:none}
.rp-sr__title a::after{content:"";position:absolute;inset:0}
.rp-sr__title a:hover{color:var(--act)}
.rp-sr__path{font-size:.8rem;color:var(--ok)}
.rp-sr__snip{margin-top:.25rem;font-size:.92rem;color:var(--muted)}
.rp-sr mark{background:var(--moon-soft);color:var(--ink);border-radius:4px;padding:0 .15em}
.rp-sr:hover{border-color:var(--lilac)}
@media (min-width:640px){.rp-sr{grid-template-columns:7rem minmax(0,1fr)}.rp-sr img{width:7rem;height:5.5rem}}

/* ---------- empty state, 404 ---------- */
.rp-empty{display:grid;justify-items:center;gap:.75rem;padding:2rem 1.25rem;border-radius:var(--r-xl);background:#fff;border:1px dashed var(--line-2);text-align:center}
.rp-empty__ico{display:grid;place-items:center;width:4rem;height:4rem;border-radius:999px;background:var(--lav);color:var(--act)}
.rp-empty img{width:min(100%,22rem);aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-l)}
.rp-lost{display:grid;gap:2rem;align-items:center;padding-block:clamp(2rem,1.5rem + 3vw,4.5rem)}
.rp-lost__art{position:relative;justify-self:center;width:min(100%,22rem);aspect-ratio:1;border-radius:999px;background-color:var(--night);overflow:hidden;box-shadow:var(--sh-2)}
.rp-lost__art::before{content:"";position:absolute;inset:0;background-image:var(--stars);background-size:260px 160px}
.rp-lost__moon{position:absolute;left:50%;top:44%;width:42%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:999px;background:radial-gradient(circle at 36% 34%,#fff8de,var(--moon) 64%,#d4a03a);box-shadow:0 0 60px 14px rgb(232 184 74/.35)}
.rp-lost__moon::after{content:"";position:absolute;width:88%;height:88%;left:34%;top:-6%;border-radius:999px;background:var(--night)}
.rp-lost__art svg{position:absolute;left:0;right:0;bottom:-1px;width:100%;color:var(--night-2)}
.rp-lost__code{font:800 clamp(3rem,2rem + 5vw,5.5rem)/1 var(--display);color:var(--act);letter-spacing:-.04em}
.rp-lost__text>*+*{margin-top:.8rem}
.rp-lost__text h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem)}
.rp-lost .rp-finder{max-width:30rem}
@media (min-width:900px){.rp-lost{grid-template-columns:.8fr 1.2fr;gap:3.5rem}}

/* ---------- HTML sitemap ---------- */
.rp-smap{display:grid;gap:1rem}
@media (min-width:768px){.rp-smap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rp-smap{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rp-smap__group{padding:1.1rem 1.2rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rp-smap__head{display:flex;align-items:center;gap:.55rem;margin-bottom:.6rem;font:700 1.1rem var(--display);color:var(--ink)}
.rp-smap__head .rp-ic{width:2.2rem;height:2.2rem;padding:.45rem;border-radius:10px;background:var(--lav);color:var(--act)}
.rp-smap ul{display:grid;gap:.1rem}
.rp-smap li a{display:flex;align-items:center;gap:.4rem;min-height:2.2rem;color:var(--text);text-decoration:none;font-size:.95rem}
.rp-smap li a .rp-ic{color:var(--lilac-2)}
.rp-smap li a:hover{color:var(--act)}

/* ==========================================================================================================
   TIDY (2026-10-18): hub, index and gift-guide pieces. New and additive, prefix lst-: no class above changed.
   lst-tiles / lst-tile (icon tiles, title + one line) · lst-src (one source line per block) · lst-soon ("Being
   written" chip on a planned card) · lst-method (method in one line + a link) · lst-faq (FAQ side box as a short
   band on phones and tablets) · lst-rail (a grid becomes a swipe rail on phones) · lst-promo (a seasonal banner
   as one short row on phones) · lst-row (a card lies on its side from 640 px)
   ========================================================================================================== */

/* icon tiles: title + one line; rows (icon left) on phones, 2 a row from 640, 3 or 4 from 1024 (icon on top) */
.lst-tiles{display:grid;gap:.7rem}
@media (min-width:640px){.lst-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.lst-tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}.lst-tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lst-tile{position:relative;display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.15rem .85rem;align-content:start;padding:.9rem 1rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);color:var(--text);text-decoration:none}
.lst-tile>:not(.lst-tile__ico){grid-column:2}
.lst-tile__ico{grid-column:1;grid-row:1 / span 3;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:14px;background:var(--lav);color:var(--act)}
.lst-tile:nth-child(4n+2) .lst-tile__ico{background:var(--moon-soft);color:var(--moon-text)}
.lst-tile:nth-child(4n+3) .lst-tile__ico{background:var(--block-tint);color:var(--night)}
.lst-tile:nth-child(4n) .lst-tile__ico{background:var(--ok-tint);color:var(--ok)}
.lst-tile__ico.rp-thumb .rp-ic{width:1.6rem;height:1.6rem}
.lst-tile__title{font:700 1rem/1.3 var(--display);color:var(--ink)}
.lst-tile__line{font-size:.9rem;line-height:1.45;color:var(--muted)}
.lst-tile__to{display:inline-flex;align-items:center;gap:.25rem;margin-top:.3rem;font:700 .8rem/1.3 var(--body);color:var(--chip-text)}
.lst-tile__to .rp-ic{width:.85rem;height:.85rem}
.lst-tile__to{flex-wrap:wrap}
.lst-tile__to a{display:inline-flex;align-items:center;min-height:1.5rem}
.lst-tile__title .rp-ic{width:.9rem;height:.9rem;vertical-align:-.1em;color:var(--lilac-2)}
a.lst-tile:hover .lst-tile__title .rp-ic{color:var(--act)}
a.lst-tile{transition:border-color .2s,transform .2s}
a.lst-tile:hover{border-color:var(--lilac);transform:translateY(-2px)}
a.lst-tile:hover .lst-tile__title{color:var(--act)}
.rp-sec--white .lst-tile{background:var(--ground);box-shadow:none}
@media (min-width:1024px){
  .lst-tiles--4 .lst-tile,.lst-tiles--3 .lst-tile{grid-template-columns:minmax(0,1fr);padding:1.05rem 1.1rem}
  .lst-tiles--4 .lst-tile>*,.lst-tiles--3 .lst-tile>*{grid-column:1}
  .lst-tiles--4 .lst-tile__ico,.lst-tiles--3 .lst-tile__ico{grid-row:auto;margin-bottom:.5rem}
}
/* three tiles: three a row from 640 px (icon on top), so a 2-column row never leaves one alone */
@media (min-width:640px) and (max-width:1023px){
  .lst-tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lst-tiles--3 .lst-tile{grid-template-columns:minmax(0,1fr);padding:1.05rem 1.1rem}
  .lst-tiles--3 .lst-tile>*{grid-column:1}
  .lst-tiles--3 .lst-tile__ico{grid-row:auto;margin-bottom:.5rem}
}
/* a link tile's chevron stays on the line of the title's last word */
.lst-tile__end{white-space:nowrap}

/* one muted source line under a block, in place of a source tag on every card */
.lst-src{display:flex;gap:.4rem;align-items:flex-start;margin-top:.85rem;font-size:.84rem;line-height:1.45;color:var(--muted)}
.lst-src .rp-ic{flex:none;margin-top:.15rem;color:var(--lilac-2)}
.lst-src a{font-weight:700}

/* a compact one-line callout (rp-callout from article.css, made smaller): a safety line under a block of picks
   (with rp-callout--safety lst-safety) or a short note under a zone's cards */
.lst-callout{grid-template-columns:2.1rem minmax(0,1fr);gap:.7rem;align-items:center;padding:.6rem .85rem;font-size:.9rem;line-height:1.45}
.lst-callout .rp-callout__ico{width:2.1rem;height:2.1rem;border-radius:10px}
.lst-safety b{color:var(--bad)}

/* "Being written" on a planned card */
.lst-soon{display:inline-flex;align-items:center;gap:.3rem;width:max-content;max-width:100%;padding:.2rem .6rem;border-radius:999px;background:var(--moon-soft);color:var(--moon-text);font:700 .78rem/1.35 var(--body);white-space:nowrap}
.lst-soon .rp-ic{width:.85rem;height:.85rem}

/* the method in one line and a link (the full method lives on how-we-pick.html) */
.lst-method{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem 1rem;align-items:center;padding:1.1rem 1.2rem;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.lst-method__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:16px;background:var(--lav);color:var(--act)}
.lst-method h2{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem)}
.lst-method p{margin-top:.2rem;font-size:.95rem;color:var(--muted)}
.lst-method__cta{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem}
@media (min-width:768px){.lst-method{grid-template-columns:auto minmax(0,1fr) auto;padding:1.25rem 1.5rem}.lst-method__cta{grid-column:auto}}

/* FAQ: the night box beside the accordion is a short band above it on phones and tablets */
@media (max-width:1023px){
  .lst-faq .rp-faqside{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1rem;padding:1.1rem 1.25rem}
  .lst-faq .rp-faqside h2{font-size:clamp(1.35rem,1.2rem + .8vw,1.7rem)}
  .lst-faq .rp-faqside .rp-btn{margin-top:0}
  .lst-faq .rp-faqside__moon{width:4.5rem;height:4.5rem;right:-1.5rem;bottom:-1.9rem}
}
@media (min-width:1024px){.lst-faq .rp-faqside{padding-bottom:3rem}}

/* phones: a grid of tiles or cards becomes a swipe rail inside its own box */
@media (max-width:639px){
  .lst-rail{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:var(--lst-rail,44%);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding:.45rem var(--gut) 1rem;scroll-padding-inline:var(--gut);scrollbar-width:thin}
  .lst-rail>*{scroll-snap-align:start;min-width:0}
  .lst-rail>.rp-card:hover{transform:none}
  .lst-rail--cards{--lst-rail:80%}
}

/* a seasonal banner as one short row on phones (the photo becomes a narrow column) */
@media (max-width:639px){
  .lst-promo .rp-promo{grid-template-rows:none;grid-template-columns:6.5rem minmax(0,1fr)}
  .lst-promo .rp-promo__media{position:relative}
  .lst-promo .rp-promo__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .lst-promo .rp-promo__body{gap:.5rem;padding:1rem 1rem 1.1rem}
  .lst-promo .rp-promo h2{font-size:1.25rem}
  .lst-promo .rp-early{position:static;grid-column:1 / -1;justify-self:start;margin:0 1rem .9rem}
}
/* from 640 the banner is as tall as its words, the photo fills its column */
@media (min-width:640px){
  .lst-promo .rp-promo{min-height:13rem}
  .lst-promo .rp-promo__media{position:relative}
  .lst-promo .rp-promo__media img{position:absolute;inset:0;width:100%;height:100%}
  .lst-promo .rp-promo__body{justify-content:center;padding:1.6rem 1.8rem}
}
@media (max-width:399px){.lst-promo .rp-promo{grid-template-columns:6rem minmax(0,1fr)}.lst-promo .rp-btn{padding-inline:1rem}.lst-promo .rp-btn .rp-ic{display:none}}

/* a card that lies on its side from 640 px: photo beside the text */
@media (min-width:640px){
  .lst-row{flex-direction:row}
  .lst-row>.rp-card__media{flex:0 0 44%;min-height:13rem}
  .lst-row>.rp-card__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .lst-row>.rp-card__body{justify-content:center;padding:1.3rem 1.5rem}
}

/* phones: the hub hero's picture and a lone card's photo are shorter crops, so the first block shows sooner */
@media (max-width:639px){
  .rp-hubhero__media{width:min(100%,15.5rem)}
  .lst-crop .rp-card__media img{aspect-ratio:2.2/1}
}
/* tablets: a lone card above a stacked list keeps a wide crop too */
@media (min-width:640px) and (max-width:1023px){.lst-crop .rp-card__media img{aspect-ratio:2.6/1}}