| . */
.osr table.osr-ctable{width:100%;border-collapse:collapse !important;border-spacing:0;font-size:14.5px;background:var(--card)}
.osr table.osr-ctable td,
.osr table.osr-ctable th{border:none !important;border-bottom:1px solid var(--line) !important;padding:14px 16px;color:var(--ink2);text-align:left !important;white-space:nowrap;vertical-align:middle}
.osr table.osr-ctable thead th,
.osr table.osr-ctable thead td,
.osr table.osr-ctable:not(:has(thead)) tr:first-child th,
.osr table.osr-ctable:not(:has(thead)) tr:first-child td{
background:var(--bg3) !important;font-family:var(--head);font-weight:600;font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink3) !important}
.osr table.osr-ctable tbody tr:last-child td,
.osr table.osr-ctable:not(:has(thead)) tr:last-child td{border-bottom:none !important}
.osr table.osr-ctable tbody tr:hover td{background:var(--bg-warm)}
.osr table.osr-ctable tbody td:first-child,
.osr table.osr-ctable:not(:has(thead)) tr:not(:first-child) td:first-child{font-family:var(--head);font-weight:700;color:var(--ink) !important}
.osr table.osr-ctable td.cmp-cta{white-space:nowrap;text-align:right !important}
.osr-compare .cmp-cta .osr-btn-sm{background:var(--olive);color:#fff}
.osr-compare .cmp-cta .osr-btn-sm:hover{background:var(--olive-d);color:#fff}
/* ---- faq: minimal look (hairline rows). CSS draws the chevron — no svg needed ---- */
#osr-faq{max-width:1400px}
.osr-faq.shell-narrow{padding-top:0;padding-bottom:72px}
.osr-faqlist.mode-min{gap:0}
.osr-faqlist.mode-min .osr-fq{border:none;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent}
.osr-faqlist.mode-min .osr-fq summary{padding:18px 30px 18px 2px;position:relative}
.osr-faqlist.mode-min .osr-fq summary::after{content:"";position:absolute;right:8px;top:23px;width:9px;height:9px;border-right:2px solid var(--ink4);border-bottom:2px solid var(--ink4);transform:rotate(45deg);transition:transform .2s}
.osr-faqlist.mode-min .osr-fq[open] summary::after{transform:rotate(225deg)}
.osr-faqlist.mode-min .osr-fq .a{padding:0 2px 20px 40px}
/* ---- bottom line: 1600 like the top cards, everything centered ---- */
.osr-bottom{padding:72px 0 80px}
.osr-bottom .shell{max-width:1600px;text-align:center}
.osr-bottom h2{margin-left:auto;margin-right:auto}
.osr-bottom-prose p{margin-left:auto;margin-right:auto;max-width:1180px}
.osr-bottom .osr-mgrid{margin-top:38px}
/* ---- hyperlinks, per section ----------------------------------------------
A global \`.osr a{color:inherit;text-decoration:none}\` reset means links are
invisible until styled. These target plain AND the [ilink] class, so they
work whether or not your shortcode adds a class. Light sections → brand green
with a hairline underline (amber on hover); dark sections (How-we-picked,
bottom line) → cream; the comparison table → bold ink product names. */
/* light-background prose: hero, segment intro, the pick, runner-up, skip-if, note, FAQ */
.osr-hero .intro a,.osr-hero .intro .ilink,
.osr-segpill .osr-segintro a,.osr-segpill .osr-segintro .ilink,
.osr-read .osr-prose a,.osr-read .osr-prose .ilink,
.osr-skipif a,.osr-skipif .ilink,
.osr-note a,.osr-note .ilink,
.osr-altpill-body a,.osr-altpill-body .ilink,
.osr-faqlist .osr-fq .a a,.osr-faqlist .osr-fq .a .ilink{
color:var(--olive);font-weight:600;text-decoration:none;
border-bottom:1.5px solid rgba(68,77,10,.32);transition:color .15s,border-color .15s}
.osr-hero .intro a:hover,.osr-hero .intro .ilink:hover,
.osr-segpill .osr-segintro a:hover,.osr-segpill .osr-segintro .ilink:hover,
.osr-read .osr-prose a:hover,.osr-read .osr-prose .ilink:hover,
.osr-skipif a:hover,.osr-skipif .ilink:hover,
.osr-note a:hover,.osr-note .ilink:hover,
.osr-altpill-body a:hover,.osr-altpill-body .ilink:hover,
.osr-faqlist .osr-fq .a a:hover,.osr-faqlist .osr-fq .a .ilink:hover{
color:var(--amber-d);border-bottom-color:var(--amber)}
/* dark-background prose: How we picked (green) + bottom line (near-black) */
.osr-method-prose a,.osr-method-prose .ilink,
.osr-bottom-prose a,.osr-bottom-prose .ilink{
color:#F3E4C4;font-weight:600;text-decoration:none;
border-bottom:1.5px solid rgba(228,162,26,.45);transition:color .15s,border-color .15s}
.osr-method-prose a:hover,.osr-method-prose .ilink:hover,
.osr-bottom-prose a:hover,.osr-bottom-prose .ilink:hover{
color:#fff;border-bottom-color:var(--amber)}
/* comparison table: product-name links are the bold first column — no underline */
.osr table.osr-ctable a,.osr table.osr-ctable .ilink{
color:var(--ink);font-weight:700;text-decoration:none;border-bottom:none;transition:color .15s}
.osr table.osr-ctable a:hover,.osr table.osr-ctable .ilink:hover{color:var(--olive)}
/* UTILITY link classes — drop on ANY Elementor Text Editor that contains links.
Hardcoded brand hex + !important so they style links even when the widget isn't
inside an .osr wrapper and regardless of theme/Elementor link-color settings.
• osr-prose → light backgrounds (hero, etc.): brand green, amber on hover
• osr-prose-dark → dark backgrounds (bottom line, How we picked): cream */
.osr-prose a,.osr-prose .ilink{
color:#444D0A !important;font-weight:600;text-decoration:none !important;
border-bottom:1.5px solid rgba(68,77,10,.32);transition:color .15s,border-color .15s}
.osr-prose a:hover,.osr-prose .ilink:hover{color:#C98A12 !important;border-bottom-color:#E4A21A}
.osr-prose-dark a,.osr-prose-dark .ilink{
color:#F3E4C4 !important;font-weight:600;text-decoration:none !important;
border-bottom:1.5px solid rgba(228,162,26,.45);transition:color .15s,border-color .15s}
.osr-prose-dark a:hover,.osr-prose-dark .ilink:hover{color:#fff !important;border-bottom-color:#E4A21A}
/* ---- responsive ---- */
@media (max-width:1100px){.osr-matrix.shell{max-width:1180px}}
@media (max-width:1000px){
.osr-seg .body{grid-template-columns:1fr;gap:24px;align-items:start}
.osr-rail{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
.osr-rail .pslot{width:180px;aspect-ratio:1/1}
.osr-rail .osr-specsheet{flex:1;min-width:220px}
.osr-altpill{grid-template-columns:1fr}
.osr-segpill{grid-template-columns:1fr;gap:12px}
.osr-method-prose{grid-template-columns:1fr}
}
@media (max-width:760px){
.osr-hero{padding:64px 0}
.osr-method{padding:56px 0}
.osr-seg{padding:52px 0}
.osr-seghead{margin:0 0 48px}
.osr-altpill{margin-top:48px}
.osr-compare.shell{padding-top:64px;padding-bottom:64px}
.osr-faq.shell-narrow{padding-bottom:84px}
.osr-bottom{padding:56px 0 64px}
.osr-segpill .osr-segtitle{font-size:20px}
}
@media (max-width:600px){.osr-rail .pslot{width:100%}.osr-rail{flex-direction:column}}/* End custom CSS */ |