/* RetainerCareGuide: builder 4's page styles shared by the eight category hubs and the index pages
   (top-lists, reviews, categories, sitemap, gift guide). Loads after site.css, listing.css (and article.css on
   hubs). Reuses the shared tokens; every class here is page-level. */

/* the first section after a page hero sits closer to it */
.rc-sec--first{padding-top:clamp(1.25rem,.9rem + 1.6vw,2.25rem)}
.rc-phero .rc-disclose,.rc-hhero .rc-disclose{max-width:40rem}
.rc-phero__art{width:12rem}

/* ---------- hub hero ---------- */
.hub-cta{display:flex;flex-wrap:wrap;gap:.5rem}
.rc-hhero__media img{display:block}
@media (max-width:420px){.rc-hhero__stat span{padding:.4rem .6rem}}

/* retainer-type selector in the hub hero (hub-retainer-types) */
.hub-typeshero{background:linear-gradient(150deg,#fff 0,var(--aqua-tint) 60%,var(--lav-tint) 100%)!important;padding:clamp(.75rem,.5rem + 1vw,1.25rem)}
.hub-typesel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media (min-width:640px){.hub-typesel{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hub-typesel__item{display:grid;justify-items:center;gap:.15rem;padding:.7rem .5rem .8rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);text-align:center;text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);transition:border-color .18s,transform .18s}
.hub-typesel__item:hover{border-color:var(--aqua);transform:translateY(-2px);color:var(--ink)}
.hub-typesel__art{display:grid;place-items:center;width:100%;aspect-ratio:5/3;border-radius:var(--r-m);background:var(--ground);margin-bottom:.35rem}
.hub-typesel__item--lav .hub-typesel__art{background:var(--lav-tint)}
.hub-typesel__art svg{width:62%;height:auto}
.hub-typesel__item b{font:600 .95rem/1.25 var(--display)}
.hub-typesel__item small{font-size:.8125rem;color:var(--muted);line-height:1.35}
.hub-typesel__item:first-child{grid-column:1/-1}
@media (min-width:640px){.hub-typesel__item:first-child{grid-column:auto}}

/* ---------- full hub: the six picks ---------- */
.hub-picks{display:grid;gap:1.25rem;padding:clamp(1.1rem,.8rem + 1.2vw,1.75rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
@media (min-width:1024px){.hub-picks{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2rem;align-items:start}}
.hub-picks__intro{display:grid;gap:.8rem;justify-items:start}
.hub-picks__intro h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem)}
.hub-picks__facts{display:grid;gap:.5rem;width:100%}
.hub-picks__facts li{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .75rem;border-radius:var(--r-m);background:var(--ground);font-size:.94rem;line-height:1.45}
.hub-picks__facts .ic{color:var(--aqua);margin-top:.1rem}

/* ---------- hub section parts ---------- */
.hub-revrow{margin-bottom:1.15rem}
.hub-cmp{display:grid;gap:1.15rem}
.hub-cmp__cards{display:grid;gap:1.15rem}
@media (min-width:640px){.hub-cmp__cards{grid-template-columns:1fr 1fr}}
.hub-cmp__table .rc-table td .rc-src{margin-left:.15rem}
.hub-howto{display:grid;gap:1.15rem;align-items:start}
@media (min-width:1024px){.hub-howto{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.hub-howto__side{display:grid;gap:.85rem}
.hub-howto__side .rc-infobox p:not(.rc-infobox__title){font-size:.95rem;line-height:1.55}

.hub-worth{display:grid;gap:1rem;padding:clamp(1.1rem,.8rem + 1.4vw,2rem);border-radius:var(--r-xl);background:linear-gradient(150deg,#fff 0,var(--lav-tint) 100%);border:1px solid var(--lav-line)}
.hub-worth__head{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;align-items:center}
.hub-worth__head h2{font-size:var(--t-h2)}
.hub-worth__head p{grid-column:2;color:var(--text)}
@media (max-width:639px){.hub-worth__head{grid-template-columns:1fr}.hub-worth__head p{grid-column:1}}
.hub-worth .rc-suits li .rc-src{margin-left:.2rem}
.hub-worth__study{display:flex;gap:.55rem;align-items:flex-start;font-size:.94rem;color:var(--text)}
.hub-worth__study .ic{color:var(--lav);margin-top:.2rem}

.hub-safety{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));align-items:start}
.hub-safety .rc-claim{align-self:stretch;align-content:start;background:#fff}

.hub-related.rc-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.hub-related.rc-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hub-related .rc-cat__img{aspect-ratio:16/10}
@media (max-width:767px){.hub-related .rc-cat:last-child:nth-child(odd){grid-column:1/-1}.hub-related .rc-cat:last-child:nth-child(odd) .rc-cat__img{aspect-ratio:16/7}}
.hub-foot{margin-top:1.5rem}

/* ---------- template hubs: start here, groups, basics ---------- */
.hub-start{display:grid;gap:1.15rem}
@media (min-width:1024px){.hub-start--split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.hub-lead .rc-postlead__media.rc-art>svg{width:auto;height:78%;max-width:80%}
@media (min-width:900px){
  .hub-lead{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .hub-lead .rc-postlead__media{aspect-ratio:auto;min-height:17rem}
}
.hub-lead .rc-postlead__body h3{font-size:clamp(1.2rem,1rem + .7vw,1.55rem)}
.hub-group+.hub-group{margin-top:1.75rem}
.hub-group__label{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;font:600 1.05rem var(--display);color:var(--ink)}
.hub-group__label .ic{color:var(--aqua)}
.hub-group__label span{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .4rem;border-radius:999px;background:var(--aqua-tint);color:var(--aqua-900);font:700 .8125rem var(--body)}
.hub-basics{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
.hub-basics .rc-value h3{font-size:1.02rem}
.hub-basics .rc-value p{color:var(--text)}
.hub-basics .rc-srcs{margin-top:auto}
.hub-own{margin-top:1rem}
.hub-claims{display:grid;gap:.85rem}
@media (min-width:768px){.hub-claims{grid-template-columns:1fr 1fr}}
.hub-claims .rc-claim{background:#fff}
.hub-note{margin-bottom:1rem}

/* care by retainer type */
.hub-types{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))}
.hub-type{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;align-items:start;padding:1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);scroll-margin-top:6rem}
.hub-type__art{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-m);background:var(--ground)}
.hub-type--lav .hub-type__art{background:var(--lav-tint)}
.hub-type__art svg{width:80%;height:auto}
.hub-type__body{display:grid;gap:.45rem;justify-items:start}
.hub-type h3{font-size:1.08rem}
.hub-type__sub{font-size:.875rem;color:var(--muted)}
.hub-type ul{display:grid;gap:.4rem;margin-block:.2rem .25rem}
.hub-type li{display:flex;gap:.5rem;align-items:flex-start;font-size:.93rem;line-height:1.5}
.hub-type li .ic{width:1.05rem;height:1.05rem;margin-top:.2rem;color:var(--aqua)}
.hub-type--lav li .ic{color:var(--lav)}
@media (max-width:420px){.hub-type{grid-template-columns:1fr}.hub-type__art{width:5.5rem}}

/* the HTML sitemap's section heads and link rows */
.rc-sitemap section{scroll-margin-top:6rem}

/* fixes measured at 360/390: a chip rail inside a grid hero must stretch, or it grows to its content */
.rc-hhero__copy .rc-subtopics,.rc-phero__copy .rc-subtopics{justify-self:stretch;min-width:0}
.hub-cmp{grid-template-columns:minmax(0,1fr)}
.hub-cmp>*,.hub-cmp__cards>*{min-width:0}
.hub-type__body{min-width:0}
.hub-type .rc-more{white-space:normal}
@media (max-width:420px){.hub-type{grid-template-columns:minmax(0,1fr)}}

/* layout polish after the first screenshots */
@media (min-width:640px){
  .hub-typesel{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hub-typesel__item{grid-column:span 2}
  .hub-typesel__item:nth-child(-n+2){grid-column:span 3}
}
@media (min-width:1100px){
  .hub-types{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hub-type{grid-column:span 2}
  .hub-type:nth-child(n+4){grid-column:span 3}
}
/* a lone card in the last row of a 3-column grid lies down across the row */
@media (min-width:1024px){
  .rc-grid--3>.rc-card:last-child:nth-child(3n+1){grid-column:1/-1;flex-direction:row}
  .rc-grid--3>.rc-card:last-child:nth-child(3n+1)>.rc-card__media{flex:0 0 38%;aspect-ratio:auto;min-height:14rem}
  .rc-grid--3>.rc-card:last-child:nth-child(3n+1)>.rc-card__body{justify-content:center}
}
.hub-cmp__cards .rc-card__media{aspect-ratio:16/8}
/* the ask tile that closes the top-lists grid */
.tl-ask{align-content:center}
@media (max-width:639px){.hub-typesel__item:first-child .hub-typesel__art{aspect-ratio:16/7}.hub-typesel__item:first-child .hub-typesel__art svg{width:auto;height:84%}}

/* ---------- review round 1 ---------- */
/* a planned page (an idea with no page yet) on its own hub: no link, no lift */
.rc-card--planned:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--line)}
.rc-card--planned .rc-card__foot .sample-chip{margin-left:auto}
/* a hub hero drawn instead of photographed (chewies) */
.hub-heroart{display:grid;place-items:center;aspect-ratio:16/10}
.hub-heroart>svg{width:auto;height:72%;max-width:80%}
/* care hub: smells and stains table */
.hub-trouble td,.hub-trouble th{vertical-align:top}
.hub-trouble td .rc-src{margin-left:.2rem}
.hub-trouble__p{display:flex;gap:.45rem;align-items:flex-start}
.hub-trouble__p .ic{color:var(--lav);margin-top:.1rem}
.hub-trouble__note{display:flex;gap:.45rem;align-items:flex-start;margin-top:.75rem;font-size:.92rem;color:var(--muted)}
.hub-trouble__note .ic{color:var(--aqua);margin-top:.15rem}
/* cases hub: which case, travel kit */
.hub-casekinds{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14.5rem),1fr))}
.hub-casekind{display:grid;gap:.5rem;align-content:start;padding:1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.hub-casekind__art{display:grid;place-items:center;aspect-ratio:5/3;border-radius:var(--r-m);background:var(--ground)}
.hub-casekind__art svg{width:52%;height:auto}
.hub-casekind h3{font-size:1.05rem}
.hub-casekind p{font-size:.94rem;line-height:1.55}
.hub-kit{display:grid;gap:1rem;margin-top:1.15rem;padding:clamp(1.1rem,.8rem + 1.2vw,1.75rem);border-radius:var(--r-xl);background:linear-gradient(150deg,#fff 0,var(--aqua-tint) 100%);border:1px solid var(--mist-2)}
.hub-kit__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start}
.hub-kit__head h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);margin-bottom:.3rem}
.hub-kit__list{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.hub-kit__list li{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .8rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);font-size:.92rem;line-height:1.45}
.hub-kit__list li>.ic{color:var(--aqua);margin-top:.1rem}
.hub-kit__list b{display:block;font:600 .95rem/1.3 var(--display)}
@media (max-width:479px){.hub-kit__head{grid-template-columns:1fr}}
/* chewies hub: seating and removal tools */
.hub-tools{display:grid;gap:.85rem}
@media (min-width:900px){.hub-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-tool--wide{grid-column:1/-1}}
.hub-tool{display:grid;gap:.5rem;align-content:start;padding:1.1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.hub-tool--wide{gap:1rem;padding:0;overflow:hidden}
@media (min-width:768px){.hub-tool--wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.hub-tool__art{min-height:12rem}
.hub-tool__art>svg{width:min(70%,16rem)}
.hub-tool--wide .hub-tool__body{display:grid;gap:.6rem;align-content:center;padding:1.1rem 1.2rem}
.hub-tool__ico{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:14px;background:var(--lav-tint);color:var(--lav)}
.hub-tool h3{font-size:1.08rem}
.hub-tool p{font-size:.95rem;line-height:1.55}
.hub-tool__steps{display:grid;gap:.4rem;counter-reset:tstep}
.hub-tool__steps li{counter-increment:tstep;position:relative;padding-left:2.1rem;font-size:.95rem;line-height:1.5}
.hub-tool__steps li::before{content:counter(tstep);position:absolute;left:0;top:0;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:8px;background:var(--aqua);color:#fff;font:600 .8125rem var(--display)}
.hub-tool__note{display:flex;gap:.45rem;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.hub-tool__note .ic{color:var(--aqua);margin-top:.15rem}
/* sitemap: cards keep their own height; wrapped links get air and a top-aligned chevron */
.rc-sitemap{align-items:start}
.rc-sitemap a{align-items:flex-start;padding-block:.4rem;line-height:1.4}
.rc-sitemap a .ic{margin-top:.2rem}
/* top-lists: the ask tile closes the grid without orphaning at tablet widths */
@media (min-width:640px) and (max-width:1023px){.tl-ask{grid-column:1/-1}}

/* ---------- tidy pass 2026-10-18: shorter blocks on the eight hubs (hub-only classes) ---------- */
/* review r2 P2-1: a type tile's track never grows past its tile */
.hub-typesel__item{grid-template-columns:minmax(0,1fr)}
.hub-typesel__art{min-width:0}
@media (max-width:639px){.hub-typesel__item{padding:.55rem .45rem .65rem}.hub-typesel__art{aspect-ratio:2/1}.hub-typesel__art svg{width:auto;height:80%}}
/* start here: a shorter picture on phones */
@media (max-width:767px){.hub-lead .rc-postlead__media{aspect-ratio:16/8}.hub-lead .rc-postlead__body{gap:.55rem}}
/* care by type: the drawing sits beside the title on phones */
@media (max-width:420px){
  .hub-type{grid-template-columns:3.5rem minmax(0,1fr);gap:.75rem;padding:.85rem}
  .hub-type__art{width:3.5rem}
}
.hub-type ul{gap:.3rem}
/* related hubs: three small tiles in one row on phones */
@media (max-width:767px){
  .hub-related.rc-cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .hub-related .rc-cat:last-child:nth-child(odd){grid-column:auto}
  .hub-related .rc-cat__img,.hub-related .rc-cat:last-child:nth-child(odd) .rc-cat__img{aspect-ratio:1/1}
  .hub-related .rc-cat{padding:.35rem}
  .hub-related .rc-cat__label{grid-template-columns:1fr;padding:.5rem .2rem .2rem}
  .hub-related .rc-cat__label h3{font-size:.84rem}
  .hub-related .rc-cat__label .ic{display:none}
}
/* the basics: icon beside a one-line fact, two per row from tablets */
.hub-facts{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.hub-fact{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .8rem;align-items:start;padding:.85rem .95rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.hub-fact__ico{grid-row:1/3;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:13px;background:var(--aqua-tint);color:var(--aqua-800)}
.hub-fact--lav .hub-fact__ico{background:var(--lav-tint);color:var(--lav)}
.hub-fact h3{font-size:1rem;line-height:1.3}
.hub-fact p{font-size:.92rem;line-height:1.5;color:var(--text)}
.hub-fact .rc-src{margin-left:.2rem}
/* which case: two small cards per row on phones */
@media (max-width:639px){
  .hub-casekinds{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .hub-casekind{padding:.7rem}
  .hub-casekind__art{aspect-ratio:16/9}
  .hub-casekind h3{font-size:.95rem}
  .hub-casekind p{font-size:.875rem;line-height:1.45}
}
/* FAQ ask box: one line and a button */
.hub-ask{gap:.55rem}
.hub-ask .rc-ask__art{width:4.5rem}
@media (max-width:1023px){.hub-ask{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:1rem}.hub-ask .rc-ask__art{grid-row:1/3}.hub-ask .rc-btn{grid-column:1/-1}}
/* care hub: the AAO's own words, inside the closed "why it happens" row */
.hub-why{display:grid;gap:.55rem}
.hub-why li{font-size:.94rem;line-height:1.55;color:var(--text)}
.hub-why li .rc-src{margin-left:.2rem}
/* types hub: below the 3 + 2 desktop layout, a fifth care card spans its row instead of leaving a hole */
@media (max-width:1099.98px){.hub-types>.hub-type:last-child:nth-child(odd){grid-column:1/-1}}
/* hub-facts and the cases kit list: whole rows at every width (no 2 + 1 or 3 + 1 rows on tablets) */
@media (min-width:640px){.hub-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-facts:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.hub-facts:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:1023.98px){.hub-kit__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.hub-kit__list:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- post-tidy review fixes 2026-10-18 (listing scope) ---------- */
/* P2-4: the four how-to steps sit 2 x 2 from tablets, with the side card as one full row under them
   (at 1440 the steps filled one column and the side card left a 330 px hole beside them) */
@media (min-width:1024px){.hub-howto{grid-template-columns:minmax(0,1fr)}}
@media (min-width:768px){.hub-howto>.rc-howto{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hub-howto__side{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));align-items:start}
/* P3-21: the quoted claim keeps its own height; on tablets it runs across the row instead of sitting alone */
.hub-safety .rc-claim{align-self:start}
@media (min-width:640px) and (max-width:1023.98px){.hub-safety>.rc-claim:last-child:nth-child(odd){grid-column:1/-1}}
/* P3-21: on a small phone a rank row keeps its Check price button beside the name (six full-width buttons
   ran 750 px); the button stays 44 px tall */
@media (max-width:420px){
  .rc-ranks .rc-rank{grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem .55rem}
  .rc-ranks .rc-rank .rc-btn{grid-column:auto;padding-inline:.7rem;font-size:.875rem}
}
/* P3-23: a basics tile starts its text under its title, however tall its row is */
.hub-fact{align-content:start}
/* P3-23: a lone last card lying across the row groups its title, line and foot instead of pushing the foot
   to the bottom of an empty body */
@media (min-width:640px) and (max-width:1023.98px){
  .rc-grid--3>.rc-card:last-child:nth-child(odd)>.rc-card__media{min-height:11rem}
  .rc-grid--3>.rc-card:last-child:nth-child(odd)>.rc-card__body{justify-content:center}
  .rc-grid--3>.rc-card:last-child:nth-child(odd) .rc-card__foot{margin-top:.25rem}
}
@media (min-width:1024px){
  .rc-grid--3>.rc-card:last-child:nth-child(3n+1)>.rc-card__media{min-height:11rem}
  .rc-grid--3>.rc-card:last-child:nth-child(3n+1) .rc-card__foot{margin-top:.25rem}
}
/* P3-23: a drawn lead picture is capped, so the card is as tall as its text (UV hub: 390 px for one line) */
@media (min-width:768px){.hub-lead .rc-postlead__media.rc-art>svg{width:min(44%,13rem);height:auto;max-width:none}}
@media (min-width:900px){.hub-lead .rc-postlead__media.rc-art{min-height:14rem}}
/* P3-24: the chewies hub's two tool cards sit side by side from 640 px */
@media (min-width:640px){.hub-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-tool--wide{grid-column:1/-1}}