/* RetainerCareGuide: components shared by every article page (top list, single review, comparison,
   how-to / blog post). Load after site.css. Every class starts with rc-. See styleguide.html.
   Page shape:
     <div class="rc-wrap"> <nav class="rc-crumbs"> … </nav> </div>
     <header class="rc-ahero"> … </header>
     <div class="rc-wrap rc-article"> <article class="rc-article__main"> … </article>
                                      <aside class="rc-article__side"> .rc-toc + .rc-howmini </aside> </div> */

/* ---------- article hero ---------- */
.rc-ahero{padding-block:.5rem clamp(1.5rem,1rem + 2vw,2.75rem)}
.rc-ahero__grid{display:grid;gap:1.5rem;align-items:center}
.rc-ahero__copy{display:grid;gap:.9rem;justify-items:start}
.rc-ahero__tags{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.rc-ahero h1{font-size:clamp(1.85rem,1.3rem + 2.3vw,2.85rem);line-height:1.12;max-width:26ch}
.rc-ahero__dek{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--text);max-width:40rem}
.rc-ahero__note{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .75rem;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:.84rem;font-weight:700;color:var(--aqua-900)}
.rc-ahero__note .ic{color:var(--aqua)}
@media (min-width:1024px){.rc-ahero__grid{grid-template-columns:1.1fr .9fr;gap:3rem}}
.rc-ahero--stack .rc-ahero__grid{grid-template-columns:1fr}
/* cover image */
.rc-cover{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--mist);box-shadow:var(--sh-2)}
.rc-cover img{width:100%;aspect-ratio:16/10;object-fit:cover}
.rc-cover figcaption{position:absolute;right:.75rem;bottom:.75rem;padding:.2rem .55rem;border-radius:8px;background:#fff;color:var(--muted);font-size:.75rem}
.rc-cover__chip{position:absolute;left:1rem;top:1rem}
.rc-cover--art{aspect-ratio:16/10}
.rc-cover--art>svg{width:min(58%,20rem)}

/* ---------- article layout: main column + sticky side (on this page, how we pick) ---------- */
.rc-article{display:grid;gap:2rem;align-items:start}
.rc-article__main{min-width:0;display:grid;gap:clamp(2rem,1.5rem + 1.6vw,3rem)}
.rc-article__side{display:none}
@media (min-width:1100px){
  .rc-article{grid-template-columns:minmax(0,1fr) 18.5rem;gap:3rem}
  /* the rail runs the full height of the article. Every box except "On this page" leads and scrolls
     away with the page; only the contents box sticks, capped to the screen, so nothing is cut off at
     laptop heights (1366x768, 1280x720) and no rail box sits below the fold for the whole article. */
  .rc-article__side{display:flex;flex-direction:column;gap:1rem;align-self:stretch}
  .rc-article__side>:not(.rc-toc){order:-1}
  .rc-article__side>.rc-toc{position:sticky;top:6rem;max-height:calc(100vh - 7rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
  .rc-toc-m{display:none}
}
/* "On this page": a collapsible <details> on phones/tablets (.rc-toc-m), a sticky list on desktop (.rc-toc) */
.rc-toc-m{border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.rc-toc-m>summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3rem;padding:.6rem 1rem;font:600 1rem var(--display);color:var(--ink)}
.rc-toc-m>summary .ic{transition:transform .2s;color:var(--aqua)}
.rc-toc-m[open]>summary .ic{transform:rotate(180deg)}
.rc-toc-m ol{padding:0 .6rem .7rem}
.rc-toc,.rc-toc-m ol{counter-reset:toc}
.rc-toc{padding:1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.rc-toc__title{display:flex;align-items:center;gap:.45rem;font:600 .98rem var(--display);color:var(--ink);margin-bottom:.4rem}
.rc-toc__title .ic{color:var(--aqua)}
.rc-toc li,.rc-toc-m li{counter-increment:toc}
.rc-toc a,.rc-toc-m li a{display:grid;grid-template-columns:1.6rem 1fr;gap:.4rem;align-items:start;padding:.4rem .4rem;border-radius:10px;color:var(--text);font-size:.92rem;line-height:1.4;text-decoration:none}
.rc-toc a::before,.rc-toc-m li a::before{content:counter(toc);display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:8px;background:var(--ground);color:var(--aqua-900);font:600 .78rem var(--display)}
.rc-toc a:hover,.rc-toc-m li a:hover{background:var(--ground);color:var(--ink)}
.rc-toc a[aria-current]{background:var(--aqua-tint);color:var(--ink);font-weight:700}
@media (max-width:767px){.rc-toc-m li a{padding-block:.6rem}}

/* ---------- prose ---------- */
.rc-prose{font-size:1.0625rem;line-height:1.7;color:var(--text);max-width:46rem}
.rc-prose>*+*{margin-top:1rem}
.rc-prose h2{margin-top:2.25rem;font-size:clamp(1.4rem,1.15rem + 1vw,1.85rem);scroll-margin-top:6rem}
.rc-prose h3{margin-top:1.6rem;font-size:1.2rem;scroll-margin-top:6rem}
.rc-prose h2+*,.rc-prose h3+*{margin-top:.6rem}
.rc-prose>:first-child{margin-top:0}
.rc-prose a{color:var(--aqua-800);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rc-prose ul>li,.rc-prose ol>li{position:relative;padding-left:1.9rem}
.rc-prose ul>li+li,.rc-prose ol>li+li{margin-top:.5rem}
.rc-prose ul>li::before{content:"";position:absolute;left:.45rem;top:.66em;width:.5rem;height:.5rem;border-radius:3px;background:var(--aqua);transform:rotate(45deg)}
.rc-prose ol{counter-reset:ol}
.rc-prose ol>li{counter-increment:ol}
.rc-prose ol>li::before{content:counter(ol);position:absolute;left:0;top:.2em;display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:8px;background:var(--aqua);color:#fff;font:600 .8rem/1 var(--display)}
.rc-prose blockquote{padding:1rem 1.15rem;border-radius:var(--r-m);border-left:4px solid var(--aqua-pale);background:#fff;color:var(--ink)}
.rc-prose figure{margin:1.5rem 0 0}
.rc-prose figure img{border-radius:var(--r-l);width:100%}
.rc-prose figcaption{margin-top:.5rem;font-size:.875rem;color:var(--muted)}
.rc-prose hr{border:0;border-top:1px dashed var(--line-2);margin-block:2rem}
.rc-prose .rc-src{font-size:.75rem}
/* a section heading with its own icon tile (use on H2s of long guides) */
.rc-h2{display:flex;align-items:center;gap:.75rem}
.rc-h2__ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;flex:none;border-radius:13px;background:#fff;color:var(--aqua);box-shadow:0 0 0 1px var(--line)}
/* the featured-snippet answer at the top of a how-to */
.rc-answer{display:grid;gap:.6rem;padding:1.15rem 1.25rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--aqua-pale);box-shadow:var(--sh-1)}
.rc-answer__label{display:inline-flex;align-items:center;gap:.4rem;font:600 .9rem var(--display);color:var(--aqua-900)}
.rc-answer p{font-size:1.06rem;line-height:1.65;color:var(--ink)}

/* ---------- callouts ---------- */
.rc-callout{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;padding:1rem 1.1rem;border-radius:var(--r-l);background:var(--aqua-tint);color:var(--ink);font-size:.98rem;line-height:1.6}
.rc-callout__ico{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:#fff;color:var(--aqua-800)}
.rc-callout__title{font:600 1rem var(--display);margin-bottom:.15rem}
.rc-callout p+p{margin-top:.4rem}
.rc-callout--caution{background:var(--rasp-tint);border:1px solid var(--rasp-line)}
.rc-callout--caution .rc-callout__ico{color:var(--rasp-800)}
.rc-callout--note{background:var(--lav-tint)}
.rc-callout--note .rc-callout__ico{color:var(--lav)}
/* end-of-page care note (general information, not dental advice) */
.rc-carenote{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.15rem;border-radius:var(--r-l);background:#fff;border:1.5px dashed var(--aqua-pale);font-size:.95rem;line-height:1.55}
.rc-carenote .ic{color:var(--aqua);margin-top:.1rem}
/* a maker's claim, quoted and attributed, never restated as fact */
.rc-claim{display:grid;gap:.4rem;padding:.9rem 1.05rem;border-radius:var(--r-m);background:var(--ground);border:1px solid var(--line)}
.rc-claim__who{display:inline-flex;align-items:center;gap:.4rem;font:700 .8125rem var(--body);color:var(--lav)}
.rc-claim blockquote{font-size:.98rem;color:var(--ink);font-style:italic}
.rc-claim small{font-size:.84rem;color:var(--muted)}

/* ---------- quick picks summary (top lists) ---------- */
.rc-quick{padding:clamp(1rem,.8rem + 1vw,1.5rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rc-quick__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin-bottom:.9rem}
.rc-quick__head h2{font-size:1.3rem}
.rc-quick__list{display:grid;gap:.6rem}
@media (min-width:1100px){.rc-quick__list{grid-template-columns:repeat(2,1fr)}}
.rc-quick__item{display:grid;grid-template-columns:auto 4rem 1fr;gap:.7rem;align-items:center;padding:.6rem;border-radius:var(--r-m);background:var(--ground)}
.rc-quick__item img{width:4rem;height:4rem;border-radius:12px;object-fit:cover;background:var(--mist)}
.rc-quick__item b{display:block;font:600 .98rem/1.3 var(--display)}
.rc-quick__item b a{color:var(--ink);text-decoration:none}
.rc-quick__item b a:hover{color:var(--aqua-900);text-decoration:underline}
.rc-quick__item small{display:block;font-size:.84rem;color:var(--muted)}
.rc-quick__item .rc-btn{grid-column:1/-1}
@media (min-width:480px){.rc-quick__item{grid-template-columns:auto 4rem 1fr auto}.rc-quick__item .rc-btn{grid-column:auto}}
.rc-quick__item:first-child{background:#fff;box-shadow:inset 0 0 0 1.5px var(--aqua-pale)}
.rc-quick__art{width:4rem;height:4rem;border-radius:12px}
.rc-quick__art>svg{width:88%}

/* ---------- product pick block (one ranked product) ---------- */
.rc-pick{scroll-margin-top:6rem;display:grid;gap:1rem;padding:clamp(1rem,.8rem + 1vw,1.6rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rc-pick__head{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;align-items:center}
.rc-pick__rank{grid-row:1/3;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:16px;background:#fff;color:var(--aqua-900);font:600 1.45rem var(--display);box-shadow:inset 0 0 0 2px var(--line-2)}
.rc-pick--top .rc-pick__rank{background:var(--aqua);color:#fff;box-shadow:0 10px 20px -12px rgb(14 116 144/.8)}
.rc-pick__award{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.rc-pick h2,.rc-pick h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);margin-top:.1rem}
.rc-pick__for{grid-column:1/-1;display:flex;gap:.5rem;align-items:flex-start;padding:.6rem .8rem;border-radius:var(--r-m);background:var(--ground);font-size:.94rem;color:var(--ink)}
.rc-pick__for .ic{color:var(--aqua);margin-top:.15rem}
.rc-pick__grid{display:grid;gap:1rem}
@media (min-width:768px){.rc-pick__grid{grid-template-columns:.9fr 1.1fr;align-items:start}}
.rc-pick__media{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;background:var(--mist)}
.rc-pick__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rc-pick__media .rc-chip{position:absolute;left:.75rem;bottom:.75rem;box-shadow:0 2px 8px rgb(16 35 43/.12)}
.rc-pick__media--art{aspect-ratio:16/11}
.rc-pick__media--art>svg{width:min(66%,16rem)}
/* beside the specs column the drawing panel runs the column's full height (no empty gap under it) */
@media (min-width:768px){.rc-pick__media--art{align-self:stretch;aspect-ratio:auto;min-height:14rem}.rc-pick__media--art>svg{width:min(76%,17rem)}}
.rc-pick__verdict{font-size:1.02rem;line-height:1.65;color:var(--ink)}
.rc-pick__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.rc-pick__cta .rc-more{margin-left:auto}
/* key specs: icon, label, value (from the maker's page) */
.rc-keyspecs{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr))}
.rc-keyspecs div{display:grid;grid-template-columns:auto 1fr;gap:0 .55rem;align-items:center;padding:.55rem .65rem;border-radius:var(--r-s);background:var(--ground);border:1px solid var(--line)}
.rc-keyspecs .ic{grid-row:1/3;color:var(--aqua)}
.rc-keyspecs dt{font-size:.78rem;font-weight:700;color:var(--muted)}
.rc-keyspecs dd{font:600 .92rem/1.3 var(--display);color:var(--ink)}
.rc-keyspecs__src{grid-column:1/-1;font-size:.8125rem;color:var(--muted)}
/* pros / cons in an article (bigger than the home card's .rc-pc) */
.rc-pros{display:grid;gap:.75rem}
@media (min-width:640px){.rc-pros{grid-template-columns:1fr 1fr}}
.rc-pros__col{padding:1rem 1.05rem;border-radius:var(--r-l);background:var(--ground);border:1px solid var(--line)}
.rc-pros__col--con{background:#fdf6f9;border-color:#f3dbe6}
.rc-pros__col p{display:flex;align-items:center;gap:.45rem;font:600 .98rem var(--display);color:var(--ink);margin-bottom:.55rem}
.rc-pros__col p .ic{width:1.6rem;height:1.6rem;padding:.3rem;border-radius:8px;background:var(--aqua);color:#fff;stroke-width:2.6}
.rc-pros__col--con p .ic{background:var(--rasp)}
.rc-pros__col li{display:flex;gap:.5rem;align-items:flex-start;font-size:.96rem;line-height:1.5}
.rc-pros__col li+li{margin-top:.45rem}
.rc-pros__col li .ic{width:1rem;height:1rem;margin-top:.22rem;color:var(--aqua);stroke-width:2.6}
.rc-pros__col--con li .ic{color:var(--rasp)}

/* ---------- spec / comparison table (scrolls inside its own box on phones) ---------- */
.rc-tablewrap{position:relative;overflow-x:auto;border-radius:var(--r-l);border:1px solid var(--line);background:#fff;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.rc-table{width:100%;min-width:40rem;border-collapse:separate;border-spacing:0;font-size:.92rem}
.rc-table caption{caption-side:top;text-align:left;padding:.85rem 1rem .25rem;font:600 1rem var(--display);color:var(--ink)}
.rc-table th,.rc-table td{padding:.7rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.rc-table thead th{position:sticky;top:0;background:var(--ground);font:600 .84rem var(--display);color:var(--ink);white-space:nowrap}
.rc-table tbody th{position:sticky;left:0;z-index:1;background:#fff;font:600 .92rem var(--display);color:var(--ink);min-width:10rem;box-shadow:1px 0 0 var(--line)}
.rc-table tbody tr:nth-child(even) td,.rc-table tbody tr:nth-child(even) th{background:#f8fdfe}
.rc-table tbody tr:last-child>*{border-bottom:0}
.rc-table td small{display:block;color:var(--muted);font-size:.8125rem}
.rc-yes,.rc-no{display:inline-flex;align-items:center;gap:.3rem;font-weight:700}
.rc-yes{color:var(--aqua-900)}.rc-no{color:var(--rasp-800)}
.rc-yes .ic,.rc-no .ic{width:1rem;height:1rem;stroke-width:2.6}
.rc-table-hint{display:flex;align-items:center;gap:.4rem;margin-top:.45rem;font-size:.8125rem;color:var(--muted)}
@media (min-width:900px){.rc-table-hint{display:none}}

/* ---------- verdict box (reviews, comparisons) ---------- */
.rc-verdictbox{display:grid;gap:1rem;padding:clamp(1.1rem,.8rem + 1.2vw,1.75rem);border-radius:var(--r-xl);background:linear-gradient(150deg,#fff,var(--aqua-tint));border:1px solid var(--mist-2)}
.rc-verdictbox__seal{display:flex;align-items:center;gap:.8rem}
.rc-verdictbox__seal .rc-seal__ico{width:3rem;height:3rem;border-radius:15px}
.rc-verdictbox__seal small{display:block;font-size:.84rem;color:var(--muted)}
.rc-verdictbox__seal b{font:600 clamp(1.2rem,1rem + .7vw,1.5rem)/1.2 var(--display)}
.rc-verdictbox__seal--mixed .rc-seal__ico{background:var(--lav)}
.rc-verdictbox__seal--no .rc-seal__ico{background:var(--rasp)}
.rc-verdictbox>p{font-size:1.02rem;color:var(--ink)}
.rc-suits{display:grid;gap:.75rem}
@media (min-width:640px){.rc-suits{grid-template-columns:1fr 1fr}}
.rc-suits div{padding:.85rem .95rem;border-radius:var(--r-m);background:#fff}
.rc-suits p{font:600 .92rem var(--display);color:var(--ink);margin-bottom:.35rem}
.rc-suits li{display:flex;gap:.45rem;font-size:.93rem;line-height:1.45}
.rc-suits li+li{margin-top:.3rem}
.rc-suits li .ic{width:1rem;height:1rem;margin-top:.2rem;color:var(--aqua)}
.rc-suits div:last-child li .ic{color:var(--lav)}

/* ---------- side-by-side rounds (comparisons, no invented winner) ---------- */
.rc-rounds{display:grid;gap:.65rem}
.rc-round{display:grid;gap:.6rem;padding:.9rem 1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.rc-round__title{display:flex;align-items:center;gap:.5rem;font:600 1rem var(--display);color:var(--ink)}
.rc-round__title .ic{color:var(--aqua)}
.rc-round__pair{display:grid;gap:.5rem}
@media (min-width:560px){.rc-round__pair{grid-template-columns:1fr 1fr}}
.rc-round__pair div{padding:.6rem .75rem;border-radius:var(--r-s);background:var(--ground);font-size:.94rem;line-height:1.5}
.rc-round__pair b{display:block;font:600 .84rem var(--display);color:var(--muted);margin-bottom:.15rem}

/* ---------- how-to steps ---------- */
.rc-howto{display:grid;gap:.85rem;counter-reset:howto}
.rc-howto>li{counter-increment:howto;position:relative;display:grid;gap:.45rem;padding:1rem 1.1rem 1.1rem 4.4rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.rc-howto>li::before{content:counter(howto);position:absolute;left:1rem;top:1rem;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--aqua);color:#fff;font:600 1.1rem var(--display)}
.rc-howto h3{font-size:1.08rem}
.rc-howto p{font-size:.98rem;line-height:1.6}
.rc-howto img{margin-top:.35rem;border-radius:var(--r-m);width:100%;max-width:22rem;aspect-ratio:4/3;object-fit:cover}
@media (min-width:768px){.rc-howto--photos>li{grid-template-columns:1fr 13rem;column-gap:1.25rem}.rc-howto--photos>li>img{grid-column:2;grid-row:1/5;margin:0;max-width:none}}

/* ---------- owner quote card in articles: reuse .rc-say from site.css ---------- */
.rc-says{display:grid;gap:.85rem}
@media (min-width:768px){.rc-says{grid-template-columns:1fr 1fr}}

/* ---------- related reads ---------- */
.rc-related{display:grid;gap:.85rem}
.rc-related__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.rc-related__head h2{font-size:1.35rem}

/* ---------- "how we pick" mini box + team box ---------- */
.rc-howmini{display:grid;gap:.6rem;padding:1rem;border-radius:var(--r-l);background:linear-gradient(160deg,#fff,var(--aqua-tint));border:1px solid var(--mist-2)}
.rc-howmini__title{display:flex;align-items:center;gap:.45rem;font:600 .98rem var(--display);color:var(--ink)}
.rc-howmini__title .ic{color:var(--aqua)}
.rc-howmini li{display:flex;gap:.45rem;font-size:.9rem;line-height:1.45}
.rc-howmini li+li{margin-top:.35rem}
.rc-howmini li .ic{width:1rem;height:1rem;margin-top:.2rem;color:var(--aqua);stroke-width:2.6}
.rc-howmini__links{display:flex;flex-wrap:wrap;gap:.1rem 1rem}
.rc-team{display:grid;grid-template-columns:auto 1fr;gap:.9rem 1rem;align-items:start;padding:clamp(1rem,.8rem + 1vw,1.5rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line)}
.rc-team__mark{width:3.5rem;height:3.5rem}
.rc-team b{font:600 1.1rem var(--display)}
.rc-team p{font-size:.95rem;margin-top:.25rem}
.rc-team__links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem}
@media (min-width:640px){.rc-team__links{grid-column:2}}

/* ---------- named source list (end of a how-to) ---------- */
.rc-sourcelist{display:grid;gap:.45rem;counter-reset:srcl}
.rc-sourcelist li{counter-increment:srcl;display:grid;grid-template-columns:1.75rem 1fr;gap:.6rem;align-items:start;font-size:.94rem;line-height:1.5}
.rc-sourcelist li::before{content:counter(srcl);display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--aqua-900);font:600 .8rem var(--display)}
.rc-sourcelist small{display:block;color:var(--muted);font-size:.84rem}

/* =====================================================================================================
   TIDY KIT (2026-10-18). Short, structured article blocks: few words, rich layout. Native HTML only
   (closed <details>, no JS). Shared by the top list, review, how-to and comparison; the classes above
   keep working. Usage notes: _review/tidy-articles-A.md.
   ===================================================================================================== */

/* ---------- section head: H2 + one dek line (<= 25 words) ---------- */
.rc-shead{display:grid;gap:.4rem}
.rc-shead>h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.85rem)}
.rc-dek{max-width:44rem;font-size:1rem;line-height:1.55;color:var(--muted)}
.rc-tsec{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);scroll-margin-top:6rem}

/* ---------- one source / caption line per block ---------- */
.rc-srcline{display:flex;align-items:flex-start;gap:.4rem;font-size:.8125rem;line-height:1.45;color:var(--muted)}
.rc-srcline .ic{flex:none;width:.95rem;height:.95rem;margin-top:.1rem;color:var(--aqua)}
.rc-srcline a{color:var(--aqua-800);font-weight:700}

/* ---------- closed <details> drawn as a button row with a chevron ("More about this pick", "Details") ---------- */
.rc-expand{border-radius:var(--r-m);background:var(--ground);border:1px solid var(--line)}
.rc-expand>summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2.75rem;padding:.5rem .6rem .5rem .95rem;border-radius:inherit;font:600 .93rem/1.25 var(--display);color:var(--aqua-900)}
.rc-expand>summary:hover{background:var(--aqua-tint)}
.rc-expand>summary .ic{flex:none;width:1.85rem;height:1.85rem;padding:.38rem;border-radius:999px;background:#fff;color:var(--aqua-800);box-shadow:0 0 0 1px var(--line);transition:transform .2s}
.rc-expand[open]>summary .ic{transform:rotate(180deg)}
.rc-expand__body{display:grid;gap:.75rem;padding:.2rem .95rem 1rem;font-size:.94rem;line-height:1.55;color:var(--text)}
.rc-expand__body h3,.rc-expand__body h4{font:600 .95rem/1.3 var(--display);color:var(--ink)}
.rc-expand__body a{color:var(--aqua-800);font-weight:700}
.rc-expand--white{background:#fff}
/* a bullet list inside an expand or a card */
.rc-ticks{display:grid;gap:.35rem}
.rc-ticks li{display:flex;gap:.45rem;align-items:flex-start;font-size:.93rem;line-height:1.45}
.rc-ticks li .ic{flex:none;width:1rem;height:1rem;margin-top:.2rem;color:var(--aqua);stroke-width:2.6}

/* ---------- key spec chips: icon + value, 3-4 per product ---------- */
.rc-specchips{display:flex;flex-wrap:wrap;gap:.4rem}
.rc-specchips li{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .7rem;border-radius:999px;background:var(--ground);box-shadow:inset 0 0 0 1px var(--line);font:600 .84rem/1.25 var(--display);color:var(--ink)}
.rc-specchips .ic{width:1rem;height:1rem;color:var(--aqua)}
.rc-specchips .is-off{color:var(--muted);font-weight:500}
.rc-specchips .is-off .ic{color:var(--muted)}
/* full spec list (inside an expand): label left, value right */
.rc-specrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:0 1.5rem}
.rc-specrows>div{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;padding:.42rem 0;border-bottom:1px dashed var(--line-2)}
.rc-specrows dt{font-size:.875rem;color:var(--muted)}
.rc-specrows dd{font:600 .875rem/1.4 var(--display);color:var(--ink);text-align:right}

/* ---------- one visible safety / flag line ---------- */
.rc-warnline{display:flex;align-items:flex-start;gap:.5rem;padding:.55rem .8rem;border-radius:var(--r-s);background:var(--rasp-tint);color:var(--ink);font-size:.9rem;line-height:1.45}
.rc-warnline .ic{flex:none;width:1.05rem;height:1.05rem;margin-top:.12rem;color:var(--rasp-800)}
.rc-warnline b{color:var(--ink)}
.rc-warnline--lav{background:var(--lav-tint)}
.rc-warnline--lav .ic{color:var(--lav)}
.rc-warnline--info{background:var(--ground);box-shadow:inset 0 0 0 1px var(--line)}
.rc-warnline--info .ic{color:var(--aqua)}

/* ---------- pros / cons: ONE card, two halves (first 3 shown; the rest in .rc-pc2__more) ---------- */
.rc-pc2{display:grid;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);overflow:hidden}
@media (min-width:560px){.rc-pc2{grid-template-columns:1fr 1fr}}
.rc-pc2__half{display:grid;gap:.55rem;align-content:start;padding:.9rem 1rem 1rem}
.rc-pc2__half+.rc-pc2__half{border-top:1px solid var(--line)}
@media (min-width:560px){.rc-pc2__half+.rc-pc2__half{border-top:0;border-left:1px solid var(--line)}}
.rc-pc2__half--con{background:#fdf7fa}
.rc-pc2__title{display:flex;align-items:center;gap:.5rem;font:600 .95rem/1.3 var(--display);color:var(--ink)}
.rc-pc2__title .ic{width:1.5rem;height:1.5rem;padding:.28rem;border-radius:8px;background:var(--aqua);color:#fff;stroke-width:2.6}
.rc-pc2__half--con .rc-pc2__title .ic{background:var(--rasp)}
.rc-pc2--maker .rc-pc2__half:first-child .rc-pc2__title .ic{background:var(--muted)}
.rc-pc2 ul{display:grid;gap:.45rem}
.rc-pc2 li{display:flex;gap:.5rem;align-items:flex-start;font-size:.93rem;line-height:1.45;color:var(--text)}
.rc-pc2 li>.ic{flex:none;width:1rem;height:1rem;margin-top:.2rem;color:var(--aqua);stroke-width:2.6}
.rc-pc2__half--con li>.ic{color:var(--rasp)}
.rc-pc2__more>summary{display:inline-flex;align-items:center;gap:.3rem;min-height:2.75rem;font:600 .875rem var(--display);color:var(--aqua-800)}
.rc-pc2__more>summary .ic{width:1rem;height:1rem;transition:transform .2s}
.rc-pc2__more[open]>summary .ic{transform:rotate(180deg)}
.rc-pc2__more:not([open]) .when-open,.rc-pc2__more[open] .when-closed{display:none}

/* ---------- compact owner quote inside a card ---------- */
.rc-pquote{margin:0;display:grid;gap:.45rem;padding:.85rem 1rem;border-radius:var(--r-m);background:var(--ground);border-left:4px solid var(--aqua-pale)}
.rc-pquote blockquote{font:400 .98rem/1.55 var(--body);color:var(--ink)}
.rc-pquote figcaption{font-size:.84rem;color:var(--muted)}
.rc-pquote figcaption b{color:var(--ink)}

/* ---------- icon cards: method tiles, buying-guide factors, owner themes, safety, difference rows ---------- */
.rc-icards{display:grid;gap:.65rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.rc-icard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .8rem;align-content:start;align-items:start;padding:.9rem 1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line)}
.rc-icard__ico{grid-row:span 2;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:13px;background:var(--aqua-tint);color:var(--aqua-800)}
.rc-icard h3,.rc-icard__title{font:600 1rem/1.3 var(--display);color:var(--ink)}
.rc-icard p{font-size:.92rem;line-height:1.5;color:var(--text)}
.rc-icard>.rc-expand,.rc-icard>.rc-icard__wide{grid-column:1/-1;margin-top:.5rem}
.rc-icard--wide{grid-column:1/-1}
.rc-icard--lav .rc-icard__ico{background:var(--lav-tint);color:var(--lav)}
.rc-icard--mint .rc-icard__ico{background:var(--mint-tint);color:var(--mint)}
.rc-icard--rasp{border-color:#f3d9e5}
.rc-icard--rasp .rc-icard__ico{background:var(--rasp-tint);color:var(--rasp-800)}
/* tiles: icon above a title and one line, 2 across on phones, 4 across in a wide column */
.rc-icards--tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr))}
.rc-icards--tiles .rc-icard{grid-template-columns:minmax(0,1fr);gap:.45rem;padding:.85rem .9rem .95rem}
.rc-icards--tiles .rc-icard__ico{grid-row:auto;width:2.4rem;height:2.4rem;border-radius:12px}
.rc-icards--tiles .rc-icard h3,.rc-icards--tiles .rc-icard__title{font-size:.95rem}
.rc-icards--tiles .rc-icard p{font-size:.875rem;color:var(--muted)}
/* rows: one full-width line per item (comparison differences) */
.rc-icards--rows{grid-template-columns:minmax(0,1fr);gap:.5rem}
.rc-icards--rows .rc-icard{padding:.7rem .9rem}
.rc-icards--rows .rc-icard__ico{width:2.3rem;height:2.3rem;border-radius:11px}

/* ---------- quick picks: 3 cards (award, drawing/photo, name, one line, Check price) ---------- */
.rc-qpicks{display:grid;gap:.65rem}
@media (min-width:640px){.rc-qpicks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rc-qpick{position:relative;display:grid;grid-template-columns:6.25rem minmax(0,1fr);border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden}
@media (min-width:640px){.rc-qpick{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}}
.rc-qpick--top{border-color:var(--aqua-pale);box-shadow:0 0 0 1.5px var(--aqua-pale),var(--sh-1)}
.rc-qpick__media{position:relative}
.rc-qpick__media>svg{width:86%;height:auto}
.rc-qpick__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* an svg sized by height needs an absolute box: % heights do not resolve against an aspect-ratio box */
@media (min-width:640px){.rc-qpick__media{aspect-ratio:16/10}.rc-qpick__media>svg{position:absolute;top:9%;left:50%;height:82%;width:auto;transform:translateX(-50%)}}
.rc-qpick__rank{position:absolute;left:.5rem;top:.5rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:10px;background:#fff;color:var(--aqua-900);font:600 .95rem var(--display);box-shadow:0 0 0 1px var(--line)}
.rc-qpick--top .rc-qpick__rank{background:var(--aqua);color:#fff;box-shadow:none}
.rc-qpick__body{display:grid;gap:.35rem;align-content:start;justify-items:start;padding:.75rem .85rem .85rem}
.rc-qpick__name{font:600 1.02rem/1.25 var(--display);color:var(--ink)}
.rc-qpick__name a{color:inherit;text-decoration:none}
.rc-qpick__name a:hover{color:var(--aqua-900);text-decoration:underline}
.rc-qpick__line{font-size:.9rem;line-height:1.45;color:var(--muted)}
.rc-qpick .rc-btn{margin-top:.25rem}
.rc-qpick .rc-chip{white-space:normal}

/* ---------- product card: one ranked pick ---------- */
.rc-pcard{scroll-margin-top:6rem;display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr);padding:clamp(.85rem,.6rem + 1vw,1.5rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.rc-pcard__top{display:grid;gap:.9rem}
@media (min-width:640px){.rc-pcard__top{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}}
.rc-pcard__media{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;aspect-ratio:2/1}
.rc-pcard__media>svg{position:absolute;top:8%;left:50%;height:84%;width:auto;transform:translateX(-50%)}
.rc-pcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:640px){.rc-pcard__media{aspect-ratio:1/1}.rc-pcard__media>svg{position:static;width:84%;height:auto;transform:none}}
.rc-pcard__rank{position:absolute;left:.7rem;top:.7rem;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:14px;background:#fff;color:var(--aqua-900);font:600 1.2rem var(--display);box-shadow:0 0 0 1px var(--line),0 6px 14px -8px rgb(16 35 43/.35)}
.rc-pcard--top .rc-pcard__rank{background:var(--aqua);color:#fff;box-shadow:0 10px 20px -12px rgb(14 116 144/.8)}
.rc-pcard__head{display:grid;gap:.6rem;align-content:start;justify-items:start}
.rc-pcard__head>h2,.rc-pcard__head>h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);line-height:1.15}
.rc-pcard__chips{display:flex;flex-wrap:wrap;gap:.35rem}
.rc-pcard__chips .rc-chip{white-space:normal}
.rc-pcard__for{font-size:.97rem;line-height:1.45;color:var(--ink)}
.rc-pcard__for b{color:var(--aqua-900)}
.rc-pcard__cta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;width:100%}
@media (max-width:479px){.rc-pcard__cta .rc-btn{flex:1 1 9rem}}
.rc-pcard__head>.rc-warnline{width:100%}
.rc-pcard--flag{border-color:var(--lav-line)}
.rc-pcard--flag .rc-pcard__rank{color:var(--lav);box-shadow:0 0 0 1.5px var(--lav-line)}

/* ---------- comparison table cell: small drawing/photo beside the name, best-for line under it ---------- */
.rc-tname{display:grid;grid-template-columns:2.9rem minmax(0,1fr);gap:.2rem .65rem;align-items:center}
.rc-tname__art{grid-row:span 2;width:2.9rem;height:2.5rem;border-radius:10px;overflow:hidden}
.rc-tname__art>svg{width:92%;height:auto}
.rc-tname__art img{width:100%;height:100%;object-fit:cover}
.rc-tname a{display:flex;align-items:center;min-height:1.6rem;color:var(--ink);text-decoration:none}
.rc-tname a:hover{color:var(--aqua-900);text-decoration:underline}
.rc-tname small{font:400 .8125rem/1.35 var(--body);color:var(--muted)}
.rc-table .rc-btn{white-space:nowrap}

/* ---------- "Choose A if / Choose B if": two split cards (comparisons, a review's fit box) ---------- */
.rc-choose{display:grid;gap:.75rem}
@media (min-width:640px){.rc-choose{grid-template-columns:1fr 1fr}}
.rc-choose__card{display:grid;gap:.6rem;align-content:start;padding:1rem 1.05rem 1.1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);border-top:4px solid var(--aqua)}
.rc-choose__card--b{border-top-color:var(--lav)}
.rc-choose__head{display:flex;align-items:center;gap:.65rem}
.rc-choose__head h3{font:600 1.05rem/1.3 var(--display)}
.rc-choose__art{display:grid;place-items:center;flex:none;width:3rem;height:3rem;border-radius:14px;overflow:hidden}
.rc-choose__art>svg{width:90%;height:auto}
.rc-choose__card--b .rc-ticks li .ic{color:var(--lav)}

/* ---------- related reads: compact cards (thumb + kind + title) ---------- */
.rc-rels{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.rc-rel{position:relative;display:grid;grid-template-columns:5rem minmax(0,1fr);gap:.8rem;align-items:center;padding:.5rem .8rem .5rem .5rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);transition:border-color .18s,box-shadow .18s}
.rc-rel:hover{border-color:var(--aqua-pale);box-shadow:var(--sh-1)}
.rc-rel__media{position:relative;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;background:var(--mist)}
.rc-rel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-rel__media>svg{width:88%;height:auto}
.rc-rel__body{display:grid;gap:.3rem;justify-items:start}
.rc-rel__body a{font:600 .95rem/1.3 var(--display);color:var(--ink);text-decoration:none}
.rc-rel__body a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.rc-rel:hover .rc-rel__body a{color:var(--aqua-900)}