/* Menu icons and the mobile menu (loaded after the page stylesheet). */
.nav-ic{flex:none;width:28px;height:28px;overflow:visible}
.nav__link .nav-ic{margin-right:.5rem}
.nav__sublink{display:flex;align-items:center;gap:.85rem}
.nav__sublink .nav-ic{width:54px;height:54px;padding:9px;border-radius:15px;background:rgba(34,201,116,.12);border:1px solid rgba(34,201,116,.22)}
.nav__sublink .tile{flex:none}
.nav__menu{min-width:21.5rem}
.nav__menu--cols{min-width:41rem}
/* Menus of the later items open leftwards, so a wide menu never reaches past the page edge */
.nav__item:nth-child(n+4) .nav__menu{left:auto;right:0}
.nav__subtext{display:flex;flex-direction:column;min-width:0}
.nav__subtext .nav__subnote{display:block;margin:0}

/* Mobile menu */
.drawer__nav{padding:.75rem .75rem 1rem}
.drawer__list,.drawer__sub{list-style:none;margin:0;padding:0}
.drawer__list>li+li{margin-top:.25rem}
.drawer__link{display:flex;align-items:center;justify-content:flex-start;gap:.8rem;min-height:4rem;padding:0 .6rem;border-radius:16px;font-size:1.125rem;font-weight:700;color:inherit;text-decoration:none}
.drawer__link .nav-ic{width:50px;height:50px;padding:8px;border-radius:14px;background:rgba(34,201,116,.12);border:1px solid rgba(34,201,116,.22)}
.drawer__link:hover,.drawer__link:focus-visible{background:rgba(0,135,81,.08)}
.drawer__group>summary{list-style:none;cursor:pointer;user-select:none}
.drawer__group>summary::-webkit-details-marker{display:none}
.drawer__chev{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-left:auto;border-radius:50%;background:rgba(0,135,81,.12);color:#008751;transition:transform .18s ease,background-color .18s ease}
.drawer__chev svg{width:16px;height:16px}
.drawer__group[open]{border-radius:16px;background:rgba(0,135,81,.07)}
.drawer__group[open]>summary{color:#008751}
.drawer__group[open] .drawer__chev{transform:rotate(180deg);background:#FFD21F;color:#0F1A15}
.drawer__sub{margin:.1rem .6rem .2rem 1.65rem;padding:.2rem 0 .7rem .7rem;border-left:2px solid rgba(0,135,81,.28)}
.drawer__sub a{display:flex;align-items:center;gap:.65rem;min-height:3.1rem;padding:0 .6rem;border-radius:11px;font-size:1rem;font-weight:500;color:inherit;text-decoration:none}
.drawer__sub a .nav-ic{width:34px;height:34px}
.drawer__sub a:hover,.drawer__sub a:focus-visible{background:rgba(0,135,81,.10)}
.drawer__sub a[aria-current=page]{background:rgba(255,210,31,.28);font-weight:700}
.drawer__sub .drawer__all{font-weight:700;color:#008751}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .drawer__group[open]>summary,:root:not([data-theme=light]) .drawer__sub .drawer__all,:root:not([data-theme=light]) .drawer__chev{color:#2EDC7A}}
:root[data-theme=dark] .drawer__group[open]>summary,:root[data-theme=dark] .drawer__sub .drawer__all,:root[data-theme=dark] .drawer__chev{color:#2EDC7A}
:root[data-theme=dark] .drawer__group[open] .drawer__chev{color:#0F1A15}

/* Icon motion: each animated part names its own keyframes in --n; they run while the link is hovered or focused, while its menu is open, and in the open mobile menu. */
.nav-ic [class*="a-"]{transform-box:fill-box;transform-origin:50% 50%;animation:2.8s ease-in-out infinite both;animation-delay:calc(var(--li,0s) + var(--dd,0s))}
.nav-ic .a-d2{--dd:.14s}
.nav-ic .a-d3{--dd:.28s}
.a-grow{--n:ic-grow;transform-origin:50% 100%!important}
.a-pop{--n:ic-pop}
.a-hop{--n:ic-hop}
.a-draw{--n:ic-draw;stroke-dasharray:1}
.a-blink{--n:ic-blink}
.a-drop{--n:ic-drop}
.a-spin{--n:ic-spin}
.nav-ic .a-slow{--n:ic-turn;animation-duration:9s;animation-timing-function:linear}
.a-flip{--n:ic-flip}
.a-flash{--n:ic-flash}
.a-slide{--n:ic-slide}
.a-tilt{--n:ic-tilt}
.a-wobble{--n:ic-wobble}
.a-bounce{--n:ic-bounce;transform-origin:50% 100%!important}
.a-swing{--n:ic-swing;transform-origin:22% 22%!important}
:is(.nav__link:hover,.nav__link:focus-visible,.nav__item--menu:hover>.nav__link,.nav__item.is-open>.nav__link,.nav__item:hover .nav__menu,.nav__item:focus-within .nav__menu,.nav__item.is-open .nav__menu,.drawer__nav) .nav-ic [class*="a-"]{animation-name:var(--n)}
.nav__sub li:nth-child(3n+2),.drawer__list>li:nth-child(3n+2),.drawer__sub li:nth-child(3n+2){--li:.35s}
.nav__sub li:nth-child(3n),.drawer__list>li:nth-child(3n),.drawer__sub li:nth-child(3n){--li:.7s}
.nav__sublink .nav-ic,.drawer__link .nav-ic{transition:transform .2s ease,background-color .2s ease}
.nav__sublink:hover .nav-ic,.nav__sublink:focus-visible .nav-ic{transform:scale(1.08);background:rgba(34,201,116,.2)}
@keyframes ic-grow{0%,45%,to{transform:none}12%{transform:scaleY(.3)}30%{transform:scaleY(1.1)}}
@keyframes ic-pop{0%,45%,to{transform:none}15%{transform:scale(1.4) rotate(-14deg)}30%{transform:scale(.9) rotate(8deg)}}
@keyframes ic-hop{0%,45%,to{transform:none}14%{transform:translateY(-2.6px) rotate(-7deg)}28%{transform:none}36%{transform:translateY(-.9px)}}
@keyframes ic-draw{0%{stroke-dashoffset:1}32%,to{stroke-dashoffset:0}}
@keyframes ic-blink{0%,24%,50%,to{opacity:1}12%,36%{opacity:.12}}
@keyframes ic-drop{0%,45%,to{transform:none}14%{transform:translateY(-3px)}28%{transform:translateY(.7px)}}
@keyframes ic-spin{0%{transform:rotate(0)}42%,to{transform:rotate(360deg)}}
@keyframes ic-turn{to{transform:rotate(360deg)}}
@keyframes ic-flip{0%,20%,40%,to{transform:none}10%,30%{transform:scaleX(.06)}}
@keyframes ic-flash{0%,45%,to{transform:none}10%{transform:scale(1.2) rotate(-7deg)}20%{transform:scale(.94)}30%{transform:scale(1.1) rotate(3deg)}}
@keyframes ic-slide{0%,50%,to{transform:none;opacity:1}20%{transform:translateX(-2.5px);opacity:0}21%{transform:translateX(3px);opacity:0}}
@keyframes ic-tilt{0%,50%,to{transform:none}12%{transform:rotate(-10deg)}26%{transform:rotate(8deg)}38%{transform:rotate(-3deg)}}
@keyframes ic-wobble{0%,50%,to{transform:none}12%{transform:rotate(-18deg)}26%{transform:rotate(15deg)}38%{transform:rotate(-6deg)}}
@keyframes ic-bounce{0%,52%,to{transform:none}14%{transform:translateY(-3.6px)}26%{transform:scale(1.06,.88)}36%{transform:translateY(-1.5px)}44%{transform:scale(1.02,.96)}}
@keyframes ic-swing{0%,50%,to{transform:none}12%{transform:rotate(15deg)}26%{transform:rotate(-11deg)}38%{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.drawer__chev,.nav-ic{transition:none}.nav-ic [class*="a-"]{animation:none!important}}

/* Author pages */
.noavatar{display:grid;place-items:center;width:88px;height:88px;margin-bottom:1rem;border-radius:50%;background:rgba(34,201,116,.14);border:1px solid rgba(34,201,116,.3);color:#16A75C}
.noavatar svg{width:54px;height:54px}
.chero__role{margin:.25rem 0 .6rem;font-weight:700}
/* Footer: the publication's own channels */
.footer__social{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.footer__social a{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:inherit;font-weight:600;text-decoration:none;transition:border-color .15s,background-color .15s}
.footer__social a:hover,.footer__social a:focus-visible{border-color:currentColor;background:rgba(255,255,255,.08)}
.footer__social .icon{margin:0}

/* Headings that used to be read by screen readers only are shown: the table's own title bar and the title of a card list */
.standings__title{padding:.8rem var(--s-4) .7rem;background:var(--band-deep);box-shadow:inset 0 3px 0 var(--yellow-500);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;line-height:1.35;color:var(--band-text);text-wrap:pretty}
.standings__title + .standings__head{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.list-title{margin:0 0 var(--s-4);font-size:var(--fs-h3);line-height:1.2;letter-spacing:0;max-width:40ch}
.standings__terms--list{margin:0;padding:var(--s-2) var(--s-4) 0}
.bonus-card__legal--once,.rcards__terms{margin-top:var(--s-3);font-size:var(--fs-xs);line-height:1.4;color:var(--text-3)}
/* Labels of the page chrome are paragraphs, not headings: they keep the heading face */
.search__title{font-family:var(--font-display);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.01em}
/* A score with its scale ("8.2/10"), and a cell whose value the operator does not publish */
.crit__of,.score__of{margin-left:.08em;font-size:.58em;font-weight:700;letter-spacing:0;color:var(--text-3)}
.table__na{color:var(--text-3);font-size:var(--fs-sm)}

/* Titles of the boxes every page of a type shares (key points, next steps, about this guide, the cards of the
   "other reviews" rail) are labels, not headings: paragraphs that keep the face their heading had */
.boxlabel{font-family:var(--font-display);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.01em;text-wrap:balance}
.boxlabel--sub{line-height:1.15;letter-spacing:0}
.keypoints__title,.nextsteps__label{text-wrap:balance}
.rcard--compact .rcard__name a{min-height:0}
/* The sources of an article: a labelled list of links under its last section */
.asources{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--border)}
.asources__list{margin:var(--s-2) 0 0;padding-left:1.1rem;list-style:disc;font-size:var(--fs-md);color:var(--text-2)}
.asources__list li + li{margin-top:.25rem}
.asources__list a{color:var(--link);text-decoration:underline;text-underline-offset:.18em;overflow-wrap:anywhere}
/* The source of an offer's terms, under the terms on its card */
.bonus-card__source{margin-top:var(--s-2);font-size:var(--fs-xs);line-height:1.4}
.bonus-card__source a{color:var(--link);text-decoration:underline;text-underline-offset:.18em;overflow-wrap:anywhere}

/* A table cell that holds a sentence, not a figure (a licence with a register entry beside it): it wraps */
.table td.table__wrap{min-width:13rem;max-width:22rem;white-space:normal;line-height:1.35}
/* The line under the heading of the reviews list: what the number on a card is */
.rindex__note{margin:calc(var(--s-2) * -1) 0 var(--s-4)}
/* The facts of a single listed site, shown as a card where a list has one row */
.sitecard .facts{margin-top:var(--s-3)}