.media-block .media-visual img{
  display: block; width: 100%; height: 100%; object-fit: cover;
}

.timeline-wrap p{grid-column:1;grid-row:2;margin:0;color:color-mix(in srgb,var(--color-on-contrast) 78%,transparent)}

.wnhf5scl .waf3rcqs > .wocam5tx {
  font-weight: 600;
}

.footer-main {
  background: var(--color-surface);
  border-top: 0 !important;
  box-shadow: 0 -4px 24px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.promo-ribbon .ribbon-btn-3{
  background: transparent; color: var(--color-accent); border: 2px solid var(--color-accent);
  padding: 13px 12px; text-decoration: none; font-weight: 700;
  border-radius: 4px;
}

[data-bl2jiin]:hover,
 [data-bl2jiin]:focus-within {
  border-left-color: var(--color-accent);
}

.process-root .accordion-a-6{padding:0 clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px);color:color-mix(in srgb,var(--color-on-contrast) 80%,transparent)}

a[class*="btn"]:hover,
a[class*="-cta-"]:hover,
button:hover,
[class*="Btn"]:hover,
[class*="-btn-"]:hover {
  transform: var(--btn-hover-transform);
  filter: var(--btn-hover-filter);
  box-shadow: var(--btn-hover-shadow);
}

.features-grid .feature-item{
  padding: 0 0 12px;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-on-contrast) 28%, transparent);
}

.features-grid{
  display: grid;
  gap: 12px;
  padding: clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px);
  background: var(--color-surface-inverted);
  color: var(--color-on-contrast);
  border-radius: 4px;
}

.wd8vfn2a,
[data-qrefwcs] {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.product-feed .product-item img{
  display:block; width:100%; max-width:100%; aspect-ratio:4 / 3;
  height:auto; object-fit:cover; border-radius:calc(4px * .55);
}

/* Toggle must not inherit active fill / on-accent text from the row. */
.whbg6hpt li.wz9qz2jj > .block-766,
.whbg6hpt li:has(.wz9qz2jj) > .block-766,
.whbg6hpt .block-766 {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-muted);
}

.payout-list{display:grid;gap:0;border:1px solid var(--color-border-strong);border-radius:min(4px, 20px);overflow:hidden;min-width:0}

/* CLS: reserve widget footprint before match list paints */
.wszq02og{min-height:280px}

/* Hub pages with nested children are links, not accordion buttons — keep
   the nested list visible so mobile still shows every page. */
.wnhf5scl li:not(.waf3rcqs) > .wczrvhyw {
  display: grid;
}

.process-root .process-item{border-bottom:1px solid color-mix(in srgb,var(--color-on-contrast) 18%,transparent)}

/* fixed_bottom_right — floating FAB bottom-right. */
 .wksebi8j {
  position: fixed;
  top: auto;
  left: auto;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  border-radius: 999px;
  width: 52px;
  height: 52px;
  padding: 0;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 18%, transparent);
}

.sidebar-container .sidebar-link .who0bk2q {
  display: block; padding: 12px 14px; text-decoration: none;
  font-size: 0.92rem; font-weight: 500; color: var(--color-text);
  background: var(--color-surface);
  border-radius: var(--ui-radius, 8px);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-text) 8%, transparent);
  border: 1px solid var(--color-border);
}

.footer-main .footer-extra-nav {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;
}

.how-it-works .step-bullet{grid-column:1;grid-row:1;font-weight:800;color:var(--color-accent);font-size:1.1rem}

.wnzbgwxy:hover,
.wnzbgwxy:focus-visible,
.wnzbgwxy.wz9qz2jj {
  background: var(--color-accent);
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  max-width: 100%;
  overflow-x: clip;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  background: var(--color-bg, #f7f6f8);
  color: var(--color-text, #261a2c);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.author-card .author-thumb img{width:100%;height:100%;object-fit:cover}

.wnhf5scl .wczrvhyw {
  display: none;
  gap: 0;
  padding: 2px 0 8px 10px;
  margin: 0 0 4px 8px;
  border-left: 2px solid var(--color-border);
}

.whbg6hpt .block-766 {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  position: relative;
  z-index: 1;
}

.timeline-wrap .timeline-entry:last-child{border-bottom:0}

.breadcrumb-nav .breadcrumb-sep{display:none}

.header-main .header-inner > .wkmzd7uf {
  display: flex;
  gap: 4px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.payout-list .payout-info{grid-column:2;grid-row:1 / span 2;align-self:center;font-weight:800;color:var(--color-accent-2);font-size:.9rem}

.breadcrumb-nav .breadcrumb-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}

.wnhf5scl .wtnvwbbc { list-style: none; margin: 0; }

.stats-root-4 .stats-item-5 span{ color: var(--color-muted); font-size: 0.9rem; }

h1 { font-size: calc(2.25rem * var(--heading-scale, 1)); }

.faq-compact .faq-compact-item-9{border:1px dashed var(--color-border-strong);padding:8px 10px;box-sizing:border-box}

/* ===== Header utility: nav list to the right ===== */
.__gone__ .wy0tre7y,
.__gone__ ul:first-child {
  margin-left: auto;
}

.benefits-grid .benefit-item{
  display: grid; grid-template-columns: 22px 1fr; gap: 12px 14px;
  align-items: start; padding: clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) calc(clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) + 8px);
  background: var(--color-surface); border: 1px dashed var(--color-border-strong);
  box-sizing: border-box; min-width: 0;
}

.whbg6hpt li:has(> ul) > a::after {
  content: none;
}

.author-card .author-bio{color:var(--color-muted)}

.wo2bxibn {
  color: var(--color-text);
  margin: 0 0 12px;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.sidebar-container .sidebar-link.wz9qz2jj > .who0bk2q {
  border-color: var(--color-accent);
  color: var(--color-accent); font-weight: 700;
}

.partners-section .partners-intro{max-width:72ch;line-height:1.55;color:var(--color-text);font-size:.95rem}

h4 { font-size: calc(1.15rem * var(--heading-scale, 1)); }

.toc-container .wqt582t5 a{
  display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline;
  color: var(--color-text); text-decoration: none; padding: 6px 4px;
}

.whbg6hpt li:has(> ul).w77stfce > ul {
  display: grid;
}

.testi-root-9 .testi-text-5{
  margin: 0 0 10px; color: color-mix(in srgb, var(--color-on-contrast) 80%, transparent);
}

.w6pqnfv2 a:hover { text-decoration: underline; }

.wzpbvb6f[data-mvn0ibx] { left: 0.4rem; }

.category-grid .category-thumb img{width:100%;height:100%;object-fit:cover;display:block}


.sidebar-container .sidebar-sub { list-style: none; padding: 0; margin: 0; border: 0; gap: 6px; }

.header-main .who0bk2q:hover,
.header-main .nav-text:hover { color: var(--color-accent); }

.faq-compact{display:grid;gap:6px;font-family:var(--font-mono,ui-monospace,monospace);min-width:0}

.action-box > p{ margin: 0; color: color-mix(in srgb, var(--color-on-contrast) 80%, transparent); max-width: 36rem; }

[data-qrefwcs="vr8npib"]:has([data-s2394tp="vi1ya3q"]) .chrome-sidebar {
  box-shadow: -4px 0 28px color-mix(in srgb, var(--color-text) 9%, transparent);
}

.wnhf5scl .waf3rcqs > .wocam5tx::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.55;
  transition: transform .2s ease;
  flex-shrink: 0;
}

.whbg6hpt .block-766:hover,
.whbg6hpt .block-766:focus-visible {
  color: var(--color-text, inherit);
  outline: none;
}

.content-root{padding:25px 0}

.header-main .wdm624f0 .who0bk2q {
  display: block;
  width: 100%;
  padding: 8px 14px;
  white-space: normal;
}

.how-it-works{display:grid;gap:12px;font-family:var(--font-mono,ui-monospace,monospace);min-width:0}

.pros-cons-wrap p{margin:0;color:var(--color-muted)}

.footer-main .footer-extra-nav a:hover {
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

html {
  font-size: calc(100% * var(--site-scale, 1) * var(--text-scale, 1));
}

@font-face {
  font-family: 'Work Sans';
  src: url('/assets/fonts/work-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

.breadcrumb-nav{padding:8px 12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;min-width:0;box-sizing:border-box}

.author-card .author-rank{margin:0 0 8px;color:var(--color-muted);font-size:.85rem}

.process-root .process-title{display:flex;gap:12px;align-items:center;padding:clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px);cursor:pointer;color:var(--color-on-contrast);list-style:none;font-weight:700}

.header-main .wdm624f0::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

/* denser v2 */


.media-block{
  display: grid; gap: 0; box-sizing: border-box; min-width: 0; overflow: hidden;
  border: 1px solid var(--color-border);
}

.w0ljbg6y .wq6b4vf7{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

.how-it-works .step-item{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:12px;padding:16px;border:2px dashed var(--color-border-strong);min-width:0;box-sizing:border-box}

.category-grid .category-name{margin:0 0 6px;color:var(--color-text)}

.whbg6hpt li:has(> ul).w77stfce > .block-766::before {
  transform: rotate(90deg);
}

.sidebar-container .sidebar-heading {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-muted); margin: 0 0 8px; font-weight: 700;
}

/* v6 skin + elevated cards */
.sidebar-container .sidebar-container { padding: 6px 4px; }

.header-main .wemjdurw:hover > .wdm624f0,
.header-main .wemjdurw:focus-within > .wdm624f0,
.header-main .wemjdurw.w77stfce > .wdm624f0,
.header-main .wm5z00ht:has(> .wdm624f0):hover > .wdm624f0,
.header-main .wm5z00ht:has(> .wdm624f0):focus-within > .wdm624f0,
.header-main .wm5z00ht.w77stfce > .wdm624f0 {
  display: flex;
}

.pros-cons-wrap .pros-cons-kicker-8{margin:0 0 12px;color:var(--color-text);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}

.wnhf5scl .w1dg01av .wdc7ajb8 {
  margin-top: 12px;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-on-accent, #fff) !important;
  border-radius: var(--ui-radius, 8px);
  padding: 12px 16px;
  font-weight: 700;
  box-shadow: none;
  transform: none;
  filter: none;
}

.process-root .process-title::-webkit-details-marker{display:none}

/* Logo spacing */
.sidebar-container > .who0bk2q,
.sidebar-container .who0bk2q.wpcbc4ul { display: block; margin-bottom: 16px; }

.wnhf5scl .w1dg01av .wdc7ajb8:hover {
  filter: brightness(1.06);
  background: var(--color-accent);
  color: var(--color-on-accent, #fff) !important;
  transform: none;
  box-shadow: none;
}

.partners-section .partner-item span{display:block;line-height:1.3;color:var(--color-muted);word-break:break-word}

[data-szdko6r="vkbxer8"].w1zb5ojb.w77stfce,
body.nav-open [data-szdko6r="vkbxer8"].w1zb5ojb {
  pointer-events: auto;
  background: color-mix(in srgb, #000 35%, transparent);
}

.wknrpb88 { padding: 28px 0 8px; }

.faq-section .faq-item.wz9qz2jj .faq-answer { display: block; }

[data-k4pchfp] { scroll-snap-type: x mandatory; margin-bottom: 2.5rem; }

.wnhf5scl .wczrvhyw .wdc7ajb8 {
  font-weight: 500;
  font-size: 0.95rem;
  padding: 10px 8px;
  color: var(--color-muted);
}

.wszq02og {
  /* Approximate header + ~3 match rows before widget paint (mobile CLS). */
  min-height: 280px;
}

.sidebar-container .who0bk2q {
  border-radius: var(--ui-radius, 8px);
  transition: background .15s ease, box-shadow .15s ease;
}

@media (min-width: 901px) {
  [data-szdko6r="vkbxer8"].w1zb5ojb { display: none !important; }
}

.footer-main .w2urna24 a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--ui-radius, 10px);
  background: color-mix(in srgb, var(--color-bg) 80%, var(--color-surface));
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 75%, transparent);
}

/* height:auto + HTML width/height attrs → browser reserves aspect-ratio (CLS). */
img { max-width: 100%; height: auto; }

.testi-root-9{
  display: grid; gap: 12px;
  padding: 25px 31px;
  background: var(--color-surface-inverted); box-sizing: border-box; min-width: 0;
}

.category-grid p{margin:0;color:var(--color-muted);font-size:.9rem;line-height:1.5}

/* a nav too wide for the bar wraps onto a second row instead of scrolling */
.header-main .header-inner > .wkmzd7uf {
  flex-wrap: wrap;
  min-width: 0;
}

/* CLS media: reserve box before image decode */
.media-block .media-visual{aspect-ratio:4 / 3;overflow:hidden}

.cards-container .card-visual{
  aspect-ratio: 16 / 10;
  background: var(--color-border);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}

.chrome-brand-slot {
  line-height: 0;
}

.product-feed{
  width:100%; max-width:1040px; margin-inline:auto;
  min-width:0; box-sizing:border-box;
}

.payout-list p{margin:0;grid-column:1;color:var(--color-muted);font-size:.9rem}

.text-block{color:var(--color-text);line-height:1.6}

[data-szdko6r="vkbxer8"].w1zb5ojb.w77stfce .w2zwo0cz,
body.nav-open [data-szdko6r="vkbxer8"] .w2zwo0cz {
  transform: translateX(0);
  visibility: visible;
}

.wzpbvb6f {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.4rem; height: 2.4rem; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; line-height: 1;
  color: var(--color-on-accent); background: var(--color-accent);
  transition: opacity .15s ease;
}

.author-card .author-name{margin:0 0 2px;color:var(--color-text)}

.product-feed .product-name{
  margin:0; padding:0 4px; color:var(--color-text); font-size:.9rem;
  text-align:center; line-height:1.35; width:100%; box-sizing:border-box;
}

.breadcrumb-nav [aria-current="page"]{color:var(--color-accent);font-weight:700}

.timeline-wrap{display:grid;gap:0;background:var(--color-contrast);color:var(--color-on-contrast);border-radius:min(4px, 20px);overflow:hidden;min-width:0}

.faq-section { display: grid; gap: 34px; }

.toc-container{
  padding: clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) calc(clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) + 8px);
  border-left: 3px solid var(--color-accent); background: var(--color-surface);
  box-sizing: border-box; min-width: 0; counter-reset: toc;
}

.media-block .media-visual{
  min-height: 180px; background: var(--color-accent-soft); overflow: hidden;
  max-width: 100%; min-width: 0;
}

a { color: var(--color-link, var(--color-accent)); }

[data-bl2jiin] {
  scroll-snap-align: start;
  border-left: 3px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.footer-main .w2urna24 a:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* snap_plain / peek_soft / rail_left / glow_active / contrast_strip / brutal_frame
   all deliberately keep prev/next buttons and the progress bar out of their look,
   but were also hiding dots entirely — leaving zero visible manual-navigation
   affordance on desktop (autoplay + native scroll only). Give them a shared plain
   dots row via an UNSCOPED fallback (no html[data-hbopmll="vld68oz"] prefix) rather
   than one rule naming all 6 style values — css_selection_filter.py's site-level
   filter drops a rule outright if it references more than one non-selected value
   for the same attribute, so a rule listing 6 different data-hbopmll values
   only ever matches the one this specific site rolled and gets deleted entirely
   on every other site (confirmed: this exact mistake shipped with zero dots on
   the very first site checked). An unscoped rule has no site-level attribute
   reference at all, so the filter always keeps it; the 6 styles above that DO
   want their own colored dots already out-specificity this via their
   html[data-hbopmll="vld68oz"] prefix, so they aren't affected. */
.w4h8q53t {
  display: flex; gap: 8px; justify-content: center;
  margin-top: -2.25rem; margin-bottom: 0; min-height: 1.5rem; align-items: center;
}

.w0ljbg6y .hero-desc{
  position: relative; z-index: 1; display: grid; gap: 8px;
  justify-items: start; text-align: left; max-width: 40rem;
  min-width: 0; box-sizing: border-box;
}

.two-col-layout{
  display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 12px;
  box-sizing: border-box; min-width: 0;
}

@media(max-width:640px){.category-grid{grid-template-columns:1fr}}

/* CLS media: reserve box before image decode */
.author-card .author-thumb{aspect-ratio:1 / 1;overflow:hidden}

.cards-container .card-desc{
  margin: 0;
  padding: clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px);
  color: var(--color-muted);
}

/* Global who0bk2q decoration skins — selected via html[data-duz5ltd="vblcblm"].
   Applies to plain navigational links (header/sidebar/footer menu items)
   tagged with the plain [data-kstk4ve] marker attribute; [data-nf8g8m4] marks
   which chrome region the link lives in ("header" | "sidebar" | "footer")
   so a shared style id can still read right at each scale — footer text is
   small/muted so most skins tone the effect down there. CTA pill buttons are
   intentionally NOT tagged [data-kstk4ve] and stay outside this axis. */

 [data-kstk4ve] {
  position: relative;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease,
    text-shadow .18s ease, border-color .18s ease;
}

.payout-list .payout-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px);border-bottom:1px solid var(--color-border);background:var(--color-surface);min-width:0;box-sizing:border-box}

.wsmivzrp {
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 12px;
}

.breadcrumb-nav .breadcrumb-item a{color:var(--color-text);text-decoration:none;padding:2px 8px;border-radius:999px;background:var(--color-accent-soft)}

.w0ljbg6y .wy7a40yq{
  position: absolute; inset: 0; z-index: 0; opacity: .22;
  background: var(--hero-bg, none) center/cover no-repeat;
}

.faq-compact .faq-compact-kicker-4{margin:0 0 4px;font-size:.72rem;color:var(--color-accent);letter-spacing:.06em;text-transform:uppercase}

.header-main .wdm624f0 {
  max-width: calc(100vw - 24px);
}

.footer-main .footer-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border-radius: calc(var(--ui-radius, 12px) + 4px);
  background: var(--color-surface);
  box-shadow:
    0 10px 30px color-mix(in srgb, var(--color-text) 10%, transparent),
    0 1px 0 color-mix(in srgb, var(--color-border) 80%, transparent);
}

.header-main .header-inner > .who0bk2q:first-child {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.media-block .media-content{
  padding: 25px calc(31px + 8px);
  background: var(--color-surface); box-sizing: border-box; min-width: 0;
}

.toc-container .wqt582t5 a::before{
  content: counter(toc, decimal-leading-zero);
  color: var(--color-accent); font-weight: 700; font-size: 0.85rem;
}

.pros-cons-wrap .pros-column,.pros-cons-wrap .cons-column{min-width:0;padding:clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) calc(clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) + 8px);box-sizing:border-box;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface)}

.partners-section .partner-item img{width:52px;height:52px;max-width:100%;object-fit:cover;border-radius:6px;opacity:.92;filter:none}

.process-root .process-mark{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:4px;background:var(--color-accent-2);color:var(--color-on-accent);font-size:.8rem}

.w7w7vx6k, .w0ns8evn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  background: var(--color-accent);
  color: var(--color-on-accent, #fff) !important;
  padding: 12px 22px;
  border-radius: var(--ui-radius, 8px);
  text-decoration: none;
}

.wnhf5scl, .wnhf5scl ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

/* Logo spacing */
.whbg6hpt a.wpcbc4ul,
.whbg6hpt > aside > a:first-of-type {
  display: block;
  margin-bottom: 12px;
}

.cards-container .cards-layout{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.sidebar-container .nav-text {
  padding: 8px 4px; font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; color: var(--color-muted);
}

.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}

.header-main .w2fod26j a,
.header-main .w2fod26j {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent);
  color: var(--color-on-accent) !important;
  padding: 13px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.__gone__ .wdm624f0 .nav-text:hover,
.__gone__ .wdm624f0 .who0bk2q:hover {
  color: var(--color-accent);
}

html {
  background: var(--color-bg, #f7f6f8);
  scroll-behavior: smooth;
  /* Sticky/fixed headers — keep hash targets visible below chrome. */
  scroll-padding-top: var(--header-h, 80px);
}

.timeline-wrap .timeline-dot{grid-column:1;grid-row:1;font-size:1.25rem;font-weight:800;color:var(--color-accent-2);line-height:1.1}

:root[data-btn-hover="glow"] {}

/* dropdown panels overlay outside the header box — no ancestor may scroll or clip them.
   A non-visible overflow on either axis computes the other axis to auto, which both clips
   the panel and adds a scrollbar as soon as it opens. */
.header-main,
.header-main .header-inner,
.header-main .header-inner > .wkmzd7uf,
.header-main .wm5z00ht {
  overflow: visible;
}

.wv8q6sd3,
.wpgat9iu,
.wzbbaznb,
.war66fgt,
.w1vahemn {
  min-width: 0;
  max-width: 100%;
}

[data-qrefwcs="vnzding"] .w1nd0vad > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.footer-main {
  margin-top: auto;
  padding: calc(18px * 0.85) 31px calc(18px * 1.2);
  /* !important: this variant keeps data-s2394tp="vi1ya3q" on its own root so the
     shared skin still lifts the header/sidebar to match (chrome_skins.css.tpl's
     [data-qrefwcs]:has([data-s2394tp="vi1ya3q"]) rules), but the pill look here comes
     entirely from .footerPanel below — without !important this ties on specificity with
     chrome_skins.css.tpl's own .footerRoot rule and randomly
     wins or loses per rebuild (css_shuffle reorders equal-specificity rules), showing a
     stray section-wide glow/background behind the pill on the builds where it loses. */
  background: transparent !important;
  box-shadow: none !important;
  border-top: 0 !important;
}

/* v6 — elevated surfaces + soft shadows */
.header-main,
.header-main,
header {
  background: var(--color-surface);
  border-bottom: 0 !important;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--color-text) 10%, transparent);
}

.cards-container .card-header{
  padding: calc(clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) * 0.75) clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px);
  background: var(--color-contrast);
  color: var(--color-on-contrast);
  border-bottom: 2px solid var(--color-accent-2);
}

.toc-container .wqt582t5{ counter-increment: toc; }

@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/sora-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.wnhf5scl .waf3rcqs.w77stfce > .wczrvhyw {
  display: grid;
}

.product-feed .product-item{
  display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px);
  margin:0; min-width:0; overflow:hidden; scroll-snap-align:start;
  border:1px solid var(--color-border-strong); border-radius:4px;
  background:var(--color-surface); box-sizing:border-box;
}

.w2fod26j a,
 .w2fod26j {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-accent) 32%, transparent);
}

.category-grid .category-item{padding:clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;min-width:0;box-sizing:border-box}

.wnhf5scl .wdc7ajb8,
.wnhf5scl .wocam5tx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 8px;
  margin: 0;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--ui-radius, 8px);
  text-transform: none;
  letter-spacing: normal;
}

.pros-cons-wrap .pros-item,.pros-cons-wrap .cons-item{margin:0 0 12px;padding:0 0 10px;border-bottom:1px dashed var(--color-border)}

/* Collapsible submenu handled by chrome_base.css global rules */


.stats-root-4{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; box-sizing: border-box; min-width: 0;
}

.faq-section .faq-question {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border);
  padding: clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px); border-radius: 4px;
  color: var(--color-text); font-weight: 600;
}

.wksebi8j[aria-expanded="true"]::after {
  content: "✕";
}

@media (min-width: 901px) {
  .wksebi8j,
  .w1zb5ojb { display: none !important; }
}

.header-main .wdm624f0 .wdm624f0::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 12px;
}

.features-grid .feature-item p{
  margin: 0;
  color: color-mix(in srgb, var(--color-on-contrast) 78%, transparent);
}

.header-main .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100%, 1040px);
  margin: 0 auto;
}

.wszq02og { border: 2px solid var(--color-border-strong); border-radius: 4px; padding: 1rem; background: var(--color-surface); }

*, *::before, *::after { box-sizing: border-box; }

.header-main .wemjdurw,
.header-main .wm5z00ht:has(> .wdm624f0) {
  padding-bottom: 0;
}

.content-title{color:var(--color-accent)}

.w0ljbg6y .hero-heading{
  margin: 0; color: var(--color-on-contrast); overflow-wrap: anywhere;
  line-height: 1.1; font-size: clamp(1.75rem, 4vw, 2.85rem);
}

@media (max-width: 800px){
  .two-col-layout{ grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .header-main .header-inner > .wkmzd7uf,
  [data-qrefwcs] header > div > ul,
  header > div > ul {
    display: none !important;
  }
  /* CTA may be a list item or a sibling chip — never keep it in the sticky bar. */
  [data-qrefwcs] header .w2fod26j,
  [data-qrefwcs] header [class*="w2fod26j"],
  [data-qrefwcs] header [class*="-cta"],
  header .w2fod26j,
  header [class*="w2fod26j"],
  header [class*="-cta"] {
    display: none !important;
  }
  .header-main .header-inner,
  [data-qrefwcs] header > div,
  header > div {
    padding-right: 56px;
  }
}

.two-col-layout .col-left,
.two-col-layout .col-right{
  min-width: 0; box-sizing: border-box;
  padding: clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) calc(clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) + 10px);
  background: var(--color-surface); color: var(--color-muted);
  border-left: 5px solid var(--color-accent);
}

.how-it-works p{grid-column:2;grid-row:2;margin:0;color:var(--color-muted);font-family:var(--font-body,sans-serif);font-size:.92rem;line-height:1.55}

.benefits-grid .benefit-item p{
  margin: 0; color: var(--color-muted); grid-column: 2;
}

.partners-section .partners-intro a{color:var(--color-accent)}

.action-box{
  padding: 25px 31px;
  background: var(--color-contrast);
  color: var(--color-on-contrast);
  border-radius: 4px;
  text-align: left;
  display: grid;
  gap: 12px;
  justify-items: start;
  border-left: 6px solid var(--color-accent-2);
}

.how-it-works .step-title{grid-column:2;grid-row:1;margin:0 0 6px;color:var(--color-text);font-size:.95rem}

/* ensureControls() (see the JS bundle) wraps the scrolling track in a plain
   .wyar2qpa div rather than appending buttons as track children —
   a button living inside a CSS Grid (grid-auto-flow:column) or Flexbox track
   becomes another row item and gets its own column/flex slot sized by the
   track's own rules (e.g. grid-auto-columns), regardless of the button's own
   width or margin tricks — that both detaches it visually from the real
   content and inflates scrollWidth so "nothing left to scroll" never
   registers. The host is a non-scrolling sibling wrapper instead, so plain
   position:absolute anchors correctly to the track's visible box without the
   button ever becoming part of what's being measured/scrolled. */
/* The chrome layouts style every direct child of the content column via
   `.contentMain > *` (width/max-width/min-width/box-sizing, so wide content
   can't blow out the page). Wrapping a block's root in .wyar2qpa
   makes the host the new direct child instead of the block — replicate
   those properties here so that rule's protection isn't lost. */
.wyar2qpa {
  position: relative; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}

/* nested header dropdowns open sideways instead of covering the parent menu */
.header-main .wdm624f0 .wm5z00ht {
  position: relative;
}

[data-qrefwcs]:has([data-s2394tp="vi1ya3q"]) .chrome-sidebar {
  background: var(--color-surface);
  border: 0 !important;
  box-shadow: 4px 0 28px color-mix(in srgb, var(--color-text) 9%, transparent);
}

.partners-section .partners-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;min-width:0;align-items:stretch}

.toc-container .toc-list{
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
}

.wnzbgwxy {
  width: 8px; height: 8px; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--color-muted) 45%, transparent);
  cursor: pointer; padding: 0;
}

/* Shared burger — sibling of [data-szdko6r] wrapper, so do not nest under [data-szdko6r].
   Default placement is fixed_right; plan.mobile_burger may override via
    rules in mobile_burger.css.tpl. */
/* The trigger's literal "☰" text never changed to indicate open state — mobile.js.tpl
   sets aria-expanded on click, but nothing consumed it visually. font-size:0 hides the
   raw glyph text node; ::after renders the actual glyph, swapped via [aria-expanded].
   Kept as ONE rule, not a separate font-size override rule — css_shuffle.py's rule
   splitter can reorder same-selector rules independently per site, and a second
   trigger rule setting only font-size sometimes shuffled to before this one, leaving
   the default font-size to win and both the raw glyph text and the ::after glyph
   visible at once. NOTE: never put a literal curly brace pair inside a CSS comment
   in this pack — shuffle_css_rules' rule splitter does not know it is inside a
   comment and treats the pair as a real rule boundary, splitting the comment apart
   and shuffling the pieces separately; any real rules that land between the split
   pieces then get silently deleted the next time client_cleanup's fingerprint-
   comment scrub runs, since it reads the reunited span as one big comment.
   Confirmed as the actual cause of a live missing stats-block rule on a real site
   — the same class of bug as the token-in-comment gotcha in VARIANT_PACK.md, one
   level more general since it is about the raw punctuation, not a specific token
   syntax. */
.wksebi8j {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  border: 0;
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
  padding: 11px 18px;
  border-radius: var(--ui-radius, 6px);
  cursor: pointer;
  font-size: 0;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

html, body {
  font-family: var(--font-body);
}

.wf41oc3c{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 34px;
  padding: 25px 31px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: 4px;
  flex-wrap: wrap;
}

.features-grid .feature-item:last-child{ border-bottom: 0; padding-bottom: 0; }

.__gone__ .wdm624f0 .nav-text,
.__gone__ .wdm624f0 .who0bk2q {
  color: var(--color-text);
}

@media (max-width: 800px){
  .w0ljbg6y{ min-height: 300px; }
  .w0ljbg6y .hero-desc{ justify-items: center; text-align: center; }
}

.header-main .wdm624f0 .who0bk2q,
.header-main .wdm624f0 .nav-text {
  width: 100%;
  justify-content: space-between;
}

.product-feed .product-feed__rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr);
  gap:12px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:12px 2px 32px; scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-inline:contain; max-width:100%; box-sizing:border-box;
}

.product-feed .product-feed__heading{ margin:0 0 12px; }

.cards-container .card-entry{
  display: grid;
  gap: 0;
  border-radius: min(4px, 20px);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-contrast) 8%, transparent);
  min-width: 0;
}

[data-szdko6r="vkbxer8"] .w2zwo0cz {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: min(300px, 320px);
  max-width: 100%;
  height: 100%;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 15px 12px;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .28s ease, visibility .28s ease;
  box-shadow: -8px 0 24px rgba(0,0,0,.08);
  overflow-y: auto;
  box-sizing: border-box;
}

.promo-ribbon{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 34px; padding: 12px 31px;
  background: var(--color-bg); border: 2px solid var(--color-accent);
  box-sizing: border-box; min-width: 0;
}

.product-feed .product-feed__rail:focus-visible{ outline:3px solid var(--color-accent); outline-offset:2px; }

[data-qrefwcs="vfddpvu"]:has([data-s2394tp="vi1ya3q"]) .chrome-navbar {
  border-bottom: 0 !important;
  background: var(--color-surface);
  box-shadow: 0 4px 22px color-mix(in srgb, var(--color-text) 8%, transparent);
}

.sidebar-container .who0bk2q:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
}

.benefits-grid{
  display: grid; gap: 10px; box-sizing: border-box; min-width: 0;
}

.wnhf5scl .wczrvhyw .wdc7ajb8:hover {
  color: var(--color-accent);
}

/* ===== Sidebar: universal collapsible submenu (structure-based, variant-agnostic) =====
   Split hit targets: parent <a> navigates; .block-766 expands/collapses. */
.whbg6hpt li:has(> ul) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.footer-main .footer-wrap {
  width: min(100%, 1040px);
  margin: 0 auto;
}

/* Direct child only — descendant `.wz9qz2jj .navLink` painted every nested
   link when a hub parent is current (fat stacked soft-green blocks). Soft fill
   must use dark text; never --color-on-accent (near-white) on accent-soft.
   !important: css_shuffle reorders rules, so variant `color: accent` can otherwise
   win and wash out labels on the soft fill.
   Also reset gradient_text's -webkit-text-fill-color / background-clip: soft
   opaque bg wins via !important while transparent text-fill would remain and
   erase the label on hover/active. */
 .sidebar-container .sidebar-link.wz9qz2jj > .who0bk2q,
 .sidebar-container .who0bk2q.wz9qz2jj,
 .sidebar-container .who0bk2q:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)) !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  font-weight: 600;
}

.w6pqnfv2 a { color: var(--color-accent); font-weight: 600; text-decoration: none; }

.pros-cons-wrap .pros-cons-title-8{display:block;margin:0 0 4px;color:var(--color-text)}

.whbg6hpt li:has(> ul) > ul {
  flex: 1 1 100%;
  width: 100%;
  display: none;
  padding-left: 12px;
}

.header-main .wdm624f0 {
  display: none;
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--color-surface-elevated, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: min(4px, 20px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-contrast) 14%, transparent);
  z-index: 50;
  flex-direction: column;
  gap: 0;
}

@media(max-width:700px){
  .product-feed .product-feed__rail{ grid-auto-columns:88%; scroll-snap-type:x mandatory; }
}

.w0ljbg6y .w7w7vx6k{
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 13px 12px;
  border-radius: 4px;
  text-decoration: none; font-weight: 700;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.faq-compact .faq-compact-a-6{margin-top:6px;font-family:var(--font-body,sans-serif);font-size:.84rem;color:var(--color-muted)}

.two-col-layout .col-right{ border-left-color: var(--color-accent-2); }

.action-box .action-btn{
  display: inline-block;
  background: var(--color-accent-2);
  color: var(--color-on-accent);
  padding: 13px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

.cards-container .card-image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-wrap .timeline-heading{grid-column:2;grid-row:1 / span 2;align-self:start;margin:0;color:var(--color-on-contrast)}

.wksebi8j::after {
  content: "☰";
  font-size: 1.25rem;
  line-height: 1;
}

.author-card .author-badge{font-weight:800;color:var(--color-accent)}

.category-grid .category-thumb{aspect-ratio:16/10;overflow:hidden;margin:0 0 12px;background:var(--color-accent-soft);border-radius:calc(4px - 2px)}

.testi-root-9 .testi-title-8{ font-style: normal; color: var(--color-accent-2); font-weight: 700; }

.pros-cons-wrap .pros-column{border-top:3px solid var(--color-accent)}

.faq-compact .faq-compact-q-2::-webkit-details-marker{display:none}

[data-mvn0ibx].woa9fpjd, [data-a615kpc].woa9fpjd { opacity: 0; pointer-events: none; }

.process-root{display:grid;gap:0;background:var(--color-contrast);border-radius:min(4px, 20px);overflow:hidden;min-width:0}

.pros-cons-wrap .pros-item:last-child,.pros-cons-wrap .cons-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

.faq-section .faq-answer { padding: clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px); color: var(--color-muted); display: none; }

.wf41oc3c .promo-btn{
  background: var(--color-on-accent);
  color: var(--color-accent);
  padding: 13px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}

.footer-main .w2urna24 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

:root {
  --color-accent: #2e9c2a;
  --color-accent-2: #90e020;
  --color-accent-contrast: #482a8a;
  --color-accent-soft: #1f3f1f;
  --color-bg: #080810;
  --color-border: #3b483c;
  --color-border-strong: #506651;
  --color-contrast: #e8ece9;
  --color-danger: #b42318;
  --color-link: #2e9c2a;
  --color-link-hover: #5aba25;
  --color-muted: #96a597;
  --color-on-accent: #f9faf9;
  --color-on-contrast: #182419;
  --color-success: #067647;
  --color-surface: #1c251c;
  --color-surface-elevated: #263026;
  --color-surface-inverted: #e8ece9;
  --color-text: #eef0ef;
  --color-text-inverse: #182419;
}

.header-main .wdm624f0 .wdm624f0 {
  top: -8px;
  left: calc(100% - 8px);
  min-width: 200px;
}

.whbg6hpt li:has(> ul) > a,
.whbg6hpt li:has(> ul) > span {
  flex: 1 1 auto;
  min-width: 0;
}

/* Hide the whole control surface when the track doesn't actually overflow at
   the current viewport (e.g. a 4-item icon row exactly filling 4 desktop
   columns) — the JS toggles .is-scrollable on the host once it measures
   scrollWidth > clientWidth, re-checked on resize since desktop vs. mobile can
   flip this for the same block instance. Unscoped (no data-hbopmll
   prefix) so every style gets this regardless of which one a site rolled. */
.wyar2qpa:not(.is-scrollable) .wzpbvb6f,
.wyar2qpa:not(.is-scrollable) .w4h8q53t,
.wyar2qpa:not(.is-scrollable) .wxhpc3nz {
  display: none !important;
}

.header-main {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 12px;
  position: relative;
  z-index: 40;
}

.stats-root-4 .stats-item-5{
  padding: clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) calc(clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) + 8px);
  text-align: center; background: var(--color-surface);
  border-bottom: 4px solid var(--color-accent); box-sizing: border-box; min-width: 0;
}

h3 { font-size: calc(1.35rem * var(--heading-scale, 1)); }

/* .woa9fpjd fades a button to transparent and disables clicks (keeping its
   layout space, so nothing reflows) once there's nothing left to scroll
   in that direction. */

/* Attribute-scoped (not .wzpbvb6f-scoped) so this edge-hide affordance
   also applies to block variants that mount their own real prev/next buttons
   (e.g. gallery/v7) instead of the auto-injected ones above. */
[data-mvn0ibx], [data-a615kpc] { transition: opacity .15s ease; }

.testi-root-9 .testi-item-8{
  margin: 0; padding: clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) calc(clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) + 8px);
  border-bottom: 1px dashed color-mix(in srgb, var(--color-on-contrast) 28%, transparent);
  box-sizing: border-box; min-width: 0;
}

.media-block .media-content div{ color: var(--color-muted); line-height: 1.65; }

.wzpbvb6f[data-a615kpc] { right: 0.4rem; }

.w6pqnfv2 { color: var(--color-muted); line-height: 1.65; }

[data-nf8g8m4="vwamxlz"] [data-kstk4ve]:not(:has(~ ul))::after { height: 1px; }

[data-qrefwcs="vnzding"].wyoe0msd {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  gap: 0;
  background: var(--color-bg);
  color: var(--color-text);
}

.whbg6hpt .block-766:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-accent, currentColor);
}

@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/sora-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  src: url('/assets/fonts/work-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

.author-card .author-thumb{width:64px;height:64px;border-radius:22px;overflow:hidden;background:var(--color-accent-soft);display:grid;place-items:center}

a[class*="btn"],
a[class*="-cta-"],
button,
[class*="Btn"],
[class*="-btn-"] {
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

/* Global slider / carousel skins — selected via html[data-hbopmll="vld68oz"].
   Tracks/items use data-k4pchfp / data-bl2jiin (and optional controls). */

 [data-k4pchfp] {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* overflow-x scrolling otherwise clips card shadows / bottom radii */
  padding-block: 12px 28px;
  box-sizing: border-box;
}

/* Ancestor of the current page: subtler cue than the leaf current item. */
.whbg6hpt li:has(> ul):not(.wz9qz2jj):has(.wz9qz2jj) > a,
.whbg6hpt li:has(> ul):not(.wz9qz2jj):has(.wz9qz2jj) > span {
  color: var(--color-text);
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}

.process-root .process-item:last-child{border-bottom:0}

.cards-container .card-heading{
  margin: 0;
  color: var(--color-on-contrast);
}

.w7w7vx6k:hover, .w0ns8evn:hover { filter: brightness(1.06); }

.partners-section{display:flex;flex-direction:column;gap:12px;min-width:0}

.wf41oc3c .promo-title{ margin: 0; color: var(--color-on-accent); }

.footer-main .w994rnts {
  margin: 0;
  padding-top: 4px;
  border-top: 1px dashed color-mix(in srgb, var(--color-border) 80%, transparent);
  color: var(--color-muted);
  font-size: 0.82rem;
}

.sidebar-container .sidebar-menu {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
}

.whbg6hpt .block-766::before {
  content: '›';
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}

.partners-section .partner-item{flex:0 0 140px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:0;padding:14px 12px;border:2px dashed var(--color-border-strong);color:var(--color-muted);font-family:var(--font-mono,ui-monospace,monospace);font-size:.78rem;box-sizing:border-box;text-align:center}

.promo-ribbon .ribbon-title-7{ margin: 0; color: var(--color-text); padding-right: 8px; }

.wnhf5scl .wdc7ajb8:hover,
.wnhf5scl .wocam5tx:hover {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

h1, h2, h3, h4,
[class*="title"], [class*="Title"], [class*="headline"], [class*="Headline"] {
  font-family: var(--font-heading);
}

.testi-root-9 .testi-item-8:last-child{ border-bottom: 0; }

.benefits-grid .benefit-heading{
  margin: 0; color: var(--color-text); grid-column: 2;
}

/* Shared hero utilities only — width is owned by shell .contentMain > * */
.wvgkej5z,
.w0ljbg6y {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: normal;
}

.header-main .wemjdurw > .nav-text::after,
.header-main .wm5z00ht:has(> .wdm624f0) > .who0bk2q::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
}

/* underline_sweep — accent underline sweeps in from the left.
   :not(:has(~ ul)) skips nav items that own a submenu — those already carry
   the sidebar/header dropdown chevron in ::after, and only one ::after can
   exist per element. */
 [data-kstk4ve] { padding-bottom: 2px; }

.payout-list .payout-row:last-child{border-bottom:0}

:root {
  --font-heading: 'Sora', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
  --ui-radius: 4px;
  --btn-hover-transform: none;
  --btn-hover-filter: brightness(1.06);
  --btn-hover-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);
  --text-scale: 1.08;
  --heading-scale: 1.06;
  --site-scale: 1;
}

.w9vzntfe,
.w0ljbg6y h1 {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.2;
}

.header-main .wm5z00ht {
  list-style: none;
  position: relative;
}

.faq-compact .faq-compact-a-6 p{margin:0}

.w0ljbg6y .hero-text{
  margin: 0; max-width: 36rem; line-height: 1.55;
  color: color-mix(in srgb, var(--color-on-contrast) 82%, transparent);
}

.w0ljbg6y{
  position: relative; display: grid; align-items: center;
  min-height: 360px; width: 100%; min-width: 0; box-sizing: border-box;
  overflow: hidden; padding: 16px 10px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--color-accent) 55%, transparent), transparent 60%),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--color-accent-2) 40%, transparent), transparent 48%),
    var(--color-contrast);
}

.benefits-grid .benefit-item::before{
  content: ""; width: 16px; height: 16px; margin-top: 4px;
  border: 2px solid var(--color-accent); background: var(--color-accent-soft);
  grid-row: 1 / span 2;
}

.faq-compact .faq-compact-q-2{cursor:pointer;font-size:.8rem;color:var(--color-text);list-style:none}

.pros-cons-wrap .cons-column{border-top:3px solid var(--color-accent-2)}

[data-kstk4ve]:not(:has(~ ul))::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}

.product-feed .product-feed__rail::-webkit-scrollbar{ display:none; }

.pros-cons-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0;box-sizing:border-box}

.payout-list .payout-label{margin:0;color:var(--color-text)}

@media (max-width: 900px) {
  .wksebi8j { display: inline-flex !important; }
  .wd8vfn2a {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /*
   * Sidebar shells: CSS rule shuffle can place desktop
   * `grid-template-columns: <aside> 1fr` AFTER this mobile block.
   * !important + structure selectors keep a single column even then.
   * .whbg6hpt is fingerprint-aliased in lockstep with HTML.
   */
  .wpgat9iu,
  .whbg6hpt {
    display: none !important;
  }
  *:has(> .whbg6hpt) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Reset grid placement only — do NOT force width:100% on every child
     (that stretches fixed .wksebi8j / burger into a full-width bar). */
  *:has(> .whbg6hpt) > * {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0;
    box-sizing: border-box;
  }
  .wksebi8j {
    width: auto !important;
    max-width: none !important;
  }
  .wv8q6sd3 {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }
  .wzbbaznb,
  .war66fgt,
  .w1vahemn,
  .wv8q6sd3 > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .wx19jtip,
  .w7udb2h0 {
    grid-template-columns: 1fr !important;
  }
  .wvgkej5z,
  .w0ljbg6y {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

.timeline-wrap .timeline-entry{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;padding:clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) calc(clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) + 8px);border-bottom:1px dashed color-mix(in srgb,var(--color-on-contrast) 25%,transparent);min-width:0;box-sizing:border-box}

.stats-root-4 .stats-title-7{
  display: block; font-size: 2.4rem; line-height: 1; color: var(--color-accent); font-weight: 800;
}

@media(max-width:800px){.pros-cons-wrap{grid-template-columns:1fr}}

.features-grid .feature-heading{
  margin: 0 0 6px;
  color: var(--color-accent-2);
}

@media(min-width:901px){
  .product-feed .product-feed__rail{ grid-auto-columns:calc((100% - (2 * 12px)) / 3); }
}

.media-block .media-content h2{ margin: 0 0 10px; color: var(--color-text); }

.two-col-layout .col-left p,
.two-col-layout .col-right p{ margin: 0 0 0.85em; }

.footer-main .footer-extra-nav a {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: transparent;
  color: var(--color-muted); text-decoration: none; font-size: 0.8rem; font-weight: 500;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 55%, transparent);
}

[data-qrefwcs="vnzding"] .chrome-sidebar { display: none; }

.header-main .who0bk2q,
.header-main .nav-text {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: inherit;
}

.breadcrumb-nav .breadcrumb-item{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--color-muted)}

.wnhf5scl .waf3rcqs.w77stfce > .wocam5tx::after {
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  .header-main .header-inner > .wkmzd7uf { display: none; }
}

.wzpbvb6f,
 .wxhpc3nz { display: none !important; }

.wnhf5scl .wtnvwbbc.wz9qz2jj > .wdc7ajb8 {
  color: var(--color-accent);
  font-weight: 600;
}

.author-card{display:grid;gap:12px;padding:clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) calc(clamp(14px, calc(14px + 0.0318 * (100vw - 360px)), 28px) + 8px);background:var(--color-surface);border-top:3px solid var(--color-accent);border-bottom:3px solid var(--color-accent-2);min-width:0;box-sizing:border-box}

[data-szdko6r="vkbxer8"].w1zb5ojb {
  position: fixed;
  inset: 0;
  /* Above the mobile sticky-header z-index (55, header_inline_fixed*) so the
     open drawer's close button / home link never render under the header. */
  z-index: 58;
  pointer-events: none;
  background: transparent;
}

/* Hub parent that is itself the current page: readable, not a fat tree paint. */
.whbg6hpt li.wz9qz2jj:has(> ul) > a {
  color: var(--color-text);
  font-weight: 700;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  box-shadow: none;
}

.two-col-layout .col-left p:last-child,
.two-col-layout .col-right p:last-child{ margin-bottom: 0; }

h2 { font-size: calc(1.75rem * var(--heading-scale, 1)); }

[data-kstk4ve]:not(:has(~ ul)):hover::after,
 [data-kstk4ve]:not(:has(~ ul)):focus-visible::after,
 [data-kstk4ve]:not(:has(~ ul))[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 720px) {
  main#w1nd0vad {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  main .action-box,
main .author-card,
main .benefits-grid,
main .breadcrumb-nav,
main .cards-container,
main .category-grid,
main .faq-compact,
main .faq-section,
main .features-grid,
main .footer-main,
main .header-main,
main .how-it-works,
main .media-block,
main .partners-section,
main .payout-list,
main .process-root,
main .product-feed,
main .promo-ribbon,
main .pros-cons-wrap,
main .sidebar-container,
main .stats-root-4,
main .testi-root-9,
main .timeline-wrap,
main .toc-container,
main .two-col-layout,
main .w0ljbg6y,
main .wf41oc3c,
main .wszq02og,
  main .action-box *,
main .author-card *,
main .benefits-grid *,
main .breadcrumb-nav *,
main .cards-container *,
main .category-grid *,
main .faq-compact *,
main .faq-section *,
main .features-grid *,
main .footer-main *,
main .header-main *,
main .how-it-works *,
main .media-block *,
main .partners-section *,
main .payout-list *,
main .process-root *,
main .product-feed *,
main .promo-ribbon *,
main .pros-cons-wrap *,
main .sidebar-container *,
main .stats-root-4 *,
main .testi-root-9 *,
main .timeline-wrap *,
main .toc-container *,
main .two-col-layout *,
main .w0ljbg6y *,
main .wf41oc3c *,
main .wszq02og * {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: 100%;
  }
  main .action-box *,
main .author-card *,
main .benefits-grid *,
main .breadcrumb-nav *,
main .cards-container *,
main .category-grid *,
main .faq-compact *,
main .faq-section *,
main .features-grid *,
main .footer-main *,
main .header-main *,
main .how-it-works *,
main .media-block *,
main .partners-section *,
main .payout-list *,
main .process-root *,
main .product-feed *,
main .promo-ribbon *,
main .pros-cons-wrap *,
main .sidebar-container *,
main .stats-root-4 *,
main .testi-root-9 *,
main .timeline-wrap *,
main .toc-container *,
main .two-col-layout *,
main .w0ljbg6y *,
main .wf41oc3c *,
main .wszq02og * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* Exclude [data-k4pchfp]/[data-bl2jiin] — this blanket mobile stack
     rule was forcing horizontal-scroll sliders (TOC v8, gallery/testimonials/
     stats/etc. slider variants — see slider_styles.css.tpl) into a vertical
     column, breaking their intentional overflow-x scroll and, for TOC, causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .action-box,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .author-card,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .benefits-grid,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .breadcrumb-nav,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .cards-container,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .category-grid,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .faq-compact,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .faq-section,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .features-grid,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .footer-main,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .header-main,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .how-it-works,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .media-block,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .partners-section,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .payout-list,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .process-root,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .product-feed,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .promo-ribbon,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .pros-cons-wrap,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .sidebar-container,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .stats-root-4,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .testi-root-9,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .timeline-wrap,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .toc-container,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .two-col-layout,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .w0ljbg6y,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .wf41oc3c,
causing
     page-level horizontal overflow since the now-stacked chips no longer sized
     to the container. */
  main .wszq02og,
  main .action-box > *:not([data-k4pchfp]),
main .author-card > *:not([data-k4pchfp]),
main .benefits-grid > *:not([data-k4pchfp]),
main .breadcrumb-nav > *:not([data-k4pchfp]),
main .cards-container > *:not([data-k4pchfp]),
main .category-grid > *:not([data-k4pchfp]),
main .faq-compact > *:not([data-k4pchfp]),
main .faq-section > *:not([data-k4pchfp]),
main .features-grid > *:not([data-k4pchfp]),
main .footer-main > *:not([data-k4pchfp]),
main .header-main > *:not([data-k4pchfp]),
main .how-it-works > *:not([data-k4pchfp]),
main .media-block > *:not([data-k4pchfp]),
main .partners-section > *:not([data-k4pchfp]),
main .payout-list > *:not([data-k4pchfp]),
main .process-root > *:not([data-k4pchfp]),
main .product-feed > *:not([data-k4pchfp]),
main .promo-ribbon > *:not([data-k4pchfp]),
main .pros-cons-wrap > *:not([data-k4pchfp]),
main .sidebar-container > *:not([data-k4pchfp]),
main .stats-root-4 > *:not([data-k4pchfp]),
main .testi-root-9 > *:not([data-k4pchfp]),
main .timeline-wrap > *:not([data-k4pchfp]),
main .toc-container > *:not([data-k4pchfp]),
main .two-col-layout > *:not([data-k4pchfp]),
main .w0ljbg6y > *:not([data-k4pchfp]),
main .wf41oc3c > *:not([data-k4pchfp]),
main .wszq02og > *:not([data-k4pchfp]),
  main .action-box > * > *:not([data-bl2jiin]),
main .author-card > * > *:not([data-bl2jiin]),
main .benefits-grid > * > *:not([data-bl2jiin]),
main .breadcrumb-nav > * > *:not([data-bl2jiin]),
main .cards-container > * > *:not([data-bl2jiin]),
main .category-grid > * > *:not([data-bl2jiin]),
main .faq-compact > * > *:not([data-bl2jiin]),
main .faq-section > * > *:not([data-bl2jiin]),
main .features-grid > * > *:not([data-bl2jiin]),
main .footer-main > * > *:not([data-bl2jiin]),
main .header-main > * > *:not([data-bl2jiin]),
main .how-it-works > * > *:not([data-bl2jiin]),
main .media-block > * > *:not([data-bl2jiin]),
main .partners-section > * > *:not([data-bl2jiin]),
main .payout-list > * > *:not([data-bl2jiin]),
main .process-root > * > *:not([data-bl2jiin]),
main .product-feed > * > *:not([data-bl2jiin]),
main .promo-ribbon > * > *:not([data-bl2jiin]),
main .pros-cons-wrap > * > *:not([data-bl2jiin]),
main .sidebar-container > * > *:not([data-bl2jiin]),
main .stats-root-4 > * > *:not([data-bl2jiin]),
main .testi-root-9 > * > *:not([data-bl2jiin]),
main .timeline-wrap > * > *:not([data-bl2jiin]),
main .toc-container > * > *:not([data-bl2jiin]),
main .two-col-layout > * > *:not([data-bl2jiin]),
main .w0ljbg6y > * > *:not([data-bl2jiin]),
main .wf41oc3c > * > *:not([data-bl2jiin]),
main .wszq02og > * > *:not([data-bl2jiin]) {
    flex-direction: column !important;
  }
  main .action-box > *,
main .author-card > *,
main .benefits-grid > *,
main .breadcrumb-nav > *,
main .cards-container > *,
main .category-grid > *,
main .faq-compact > *,
main .faq-section > *,
main .features-grid > *,
main .footer-main > *,
main .header-main > *,
main .how-it-works > *,
main .media-block > *,
main .partners-section > *,
main .payout-list > *,
main .process-root > *,
main .product-feed > *,
main .promo-ribbon > *,
main .pros-cons-wrap > *,
main .sidebar-container > *,
main .stats-root-4 > *,
main .testi-root-9 > *,
main .timeline-wrap > *,
main .toc-container > *,
main .two-col-layout > *,
main .w0ljbg6y > *,
main .wf41oc3c > *,
main .wszq02og > * {
    width: 100%;
    max-width: 100%;
  }
  main .action-box > * > img,
main .author-card > * > img,
main .benefits-grid > * > img,
main .breadcrumb-nav > * > img,
main .cards-container > * > img,
main .category-grid > * > img,
main .faq-compact > * > img,
main .faq-section > * > img,
main .features-grid > * > img,
main .footer-main > * > img,
main .header-main > * > img,
main .how-it-works > * > img,
main .media-block > * > img,
main .partners-section > * > img,
main .payout-list > * > img,
main .process-root > * > img,
main .product-feed > * > img,
main .promo-ribbon > * > img,
main .pros-cons-wrap > * > img,
main .sidebar-container > * > img,
main .stats-root-4 > * > img,
main .testi-root-9 > * > img,
main .timeline-wrap > * > img,
main .toc-container > * > img,
main .two-col-layout > * > img,
main .w0ljbg6y > * > img,
main .wf41oc3c > * > img,
main .wszq02og > * > img,
  main .action-box > * > picture,
main .author-card > * > picture,
main .benefits-grid > * > picture,
main .breadcrumb-nav > * > picture,
main .cards-container > * > picture,
main .category-grid > * > picture,
main .faq-compact > * > picture,
main .faq-section > * > picture,
main .features-grid > * > picture,
main .footer-main > * > picture,
main .header-main > * > picture,
main .how-it-works > * > picture,
main .media-block > * > picture,
main .partners-section > * > picture,
main .payout-list > * > picture,
main .process-root > * > picture,
main .product-feed > * > picture,
main .promo-ribbon > * > picture,
main .pros-cons-wrap > * > picture,
main .sidebar-container > * > picture,
main .stats-root-4 > * > picture,
main .testi-root-9 > * > picture,
main .timeline-wrap > * > picture,
main .toc-container > * > picture,
main .two-col-layout > * > picture,
main .w0ljbg6y > * > picture,
main .wf41oc3c > * > picture,
main .wszq02og > * > picture,
  main .action-box > * > figure,
main .author-card > * > figure,
main .benefits-grid > * > figure,
main .breadcrumb-nav > * > figure,
main .cards-container > * > figure,
main .category-grid > * > figure,
main .faq-compact > * > figure,
main .faq-section > * > figure,
main .features-grid > * > figure,
main .footer-main > * > figure,
main .header-main > * > figure,
main .how-it-works > * > figure,
main .media-block > * > figure,
main .partners-section > * > figure,
main .payout-list > * > figure,
main .process-root > * > figure,
main .product-feed > * > figure,
main .promo-ribbon > * > figure,
main .pros-cons-wrap > * > figure,
main .sidebar-container > * > figure,
main .stats-root-4 > * > figure,
main .testi-root-9 > * > figure,
main .timeline-wrap > * > figure,
main .toc-container > * > figure,
main .two-col-layout > * > figure,
main .w0ljbg6y > * > figure,
main .wf41oc3c > * > figure,
main .wszq02og > * > figure,
  main .action-box > * > * > img,
main .author-card > * > * > img,
main .benefits-grid > * > * > img,
main .breadcrumb-nav > * > * > img,
main .cards-container > * > * > img,
main .category-grid > * > * > img,
main .faq-compact > * > * > img,
main .faq-section > * > * > img,
main .features-grid > * > * > img,
main .footer-main > * > * > img,
main .header-main > * > * > img,
main .how-it-works > * > * > img,
main .media-block > * > * > img,
main .partners-section > * > * > img,
main .payout-list > * > * > img,
main .process-root > * > * > img,
main .product-feed > * > * > img,
main .promo-ribbon > * > * > img,
main .pros-cons-wrap > * > * > img,
main .sidebar-container > * > * > img,
main .stats-root-4 > * > * > img,
main .testi-root-9 > * > * > img,
main .timeline-wrap > * > * > img,
main .toc-container > * > * > img,
main .two-col-layout > * > * > img,
main .w0ljbg6y > * > * > img,
main .wf41oc3c > * > * > img,
main .wszq02og > * > * > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .wvgkej5z,
  .w0ljbg6y {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .w0ljbg6y > *,
  .w0ljbg6y [class*="copy"],
  .w0ljbg6y [class*="content"],
  .w0ljbg6y [class*="body"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-left-width: 0 !important;
  }
  .w9vzntfe,
  .w0ljbg6y h1 {
    font-size: clamp(1.7rem, 8vw, 2.35rem) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

.action-box .action-title{ margin: 0; color: var(--color-on-contrast); }

/* ===== Sidebar active states (structure-based, variant-safe) =====
   Variants / chrome skins must target only the direct link of the current
   item. Soft fills use --color-text so accent-on-accent-soft never washes out
   labels (esp. with elevated/floating skins). */
.whbg6hpt li.wz9qz2jj > a,
.whbg6hpt a.wz9qz2jj[aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
}

[data-qrefwcs="vnzding"] .w1nd0vad {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 25px 31px;
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* __va_widget_css_begin__ */


.wszq02og,
.wkju06m2 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  /* Reserve space before match list paints (mobile CLS). */
  min-height: 280px;
}

.wx30gqh7 {
  width: 100%;
}

.wwmcrwf7 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--color-text);
}

.wp9juhmn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-bottom: 1px solid var(--color-border);
}

.wfoqmu7m {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}

.w22acee7 {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.w99mj66w {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.w99mj66w:hover {
  background: var(--color-accent-2);
}

.w48sa7tl {
  padding: 14px 20px 0;
}

.who17du2 {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.85rem;
}

.who17du2:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-color: var(--color-accent);
}

.waa8lyl4 {
  padding: 16px 20px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.w7jdjy3r {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 0;
}

.w02o1ery {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.w02o1ery:hover {
  border-color: var(--color-accent);
}

.wgakryq4,
.w02o1ery.wgakryq4 {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.wbcqvsag {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Baseline vertical spacing between match rows — was only ever set inside the
   ≥640px grid rule below, so below that width [data-x96ekbc="vav7iu7"]
   had no display/gap of its own and rows (no margin of their own either) sat
   flush against each other with zero space between on mobile. Applies to
   every variant; the ≥640px rule overrides display to grid for the ones that
   go multi-column there. */
[data-x96ekbc="vav7iu7"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 640px) {
  [data-x96ekbc="vav7iu7"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
  }
}

/* Match rows — shared by the cached top list and JS-driven search results. */
.wwiuwmj9 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.wkli0t21 {
  flex: 0 0 100%;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.wmo9n77u {
  font-size: 0.75rem;
  color: var(--color-muted);
  order: 3;
}

.wshm7qai {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  order: 2;
}

.wshm7qai span {
  color: inherit;
}

.wnwyes1x {
  display: flex;
  gap: 6px;
  order: 4;
  flex: 0 0 100%;
}

.wly6mgtv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 56px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.85rem;
}

.wly6mgtv:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

.wly6mgtv .w6lxfqdr {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
}

.wly6mgtv .wddomt5t {
  font-weight: 700;
  color: var(--color-text);
}

/* Search / browse results — compact two-column row: team names left, kickoff
   time right, "Show markets" toggle as its own full-width row below (it reuses
   the same odd_button class as the 1/X/2 pills, so it needs its own override —
   see [data-x96ekbc="v0jvmsr"] below — or it renders squeezed
   into the flex row next to the team names). */
.wayh2n4a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* No side padding/margin of its own — flush with the box edges, individual
     rows carry their own inset via border + padding rather than the
     container adding a second, redundant gutter on top of theirs. */
  padding: 16px 0 20px;
  margin: 0;
}

/* Plain flex-wrap, not grid: league own line, then teams/time/button flow
   left-to-right and each wraps to a new line only when it doesn't fit —
   exactly "same line as the match name+date if there's room, own line if
   not", which grid's explicit placement can't express but wrap naturally does. */
.wwiuwmj9[data-x96ekbc="vqw6j2z"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
}

.wwiuwmj9[data-x96ekbc="vqw6j2z"] > .wkli0t21 {
  flex: 0 0 100%;
}

.wwiuwmj9[data-x96ekbc="vqw6j2z"] > .wshm7qai {
  flex: 1 1 auto;
  min-width: 140px;
  order: 1;
}

.wwiuwmj9[data-x96ekbc="vqw6j2z"] > .wmo9n77u {
  flex: 0 0 auto;
  white-space: nowrap;
  order: 2;
}

.wly6mgtv[data-x96ekbc="v0jvmsr"] {
  order: 3;
  flex: 0 0 auto;
  flex-direction: row;
  width: auto;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--color-bg);
  white-space: nowrap;
}

.wwiuwmj9[data-x96ekbc="vqw6j2z"] > .wnwyes1x,
.wwiuwmj9[data-x96ekbc="vqw6j2z"] > .wlwwdh4b,
.wwiuwmj9[data-x96ekbc="vqw6j2z"] > [data-x96ekbc="v5qllue"] {
  flex: 0 0 100%;
  order: 4;
}

.wlwwdh4b {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

.w6l2hjt2 {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--color-surface);
}

.woww4j7k {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.wkkzithx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: 0 6px 6px 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.82rem;
}

.wkkzithx:hover {
  border-color: var(--color-accent);
}

.wvpx0gfl {
  font-weight: 700;
  color: var(--color-accent);
}

/* v4 — horizontal scroll carousel (mobile / below 640px) that splits into
   carousel-left + search-results-right on desktop.
   On mobile: stacked as normal, carousel scrolls horizontally.
   On desktop: 2-column grid. The search-and-tabs and search-wrap wrappers
   get display:contents so their children (input, results, empty msg, nav)
   become direct grid children and can be placed into named grid areas.
   The JS setSearchMode() hides .wbcqvsag via inline style
   when search is active — overridden here so the carousel always stays visible
   on the left; search results appear simultaneously in the right column. */
.wszq02og [data-x96ekbc="vav7iu7"] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  padding-bottom: 8px;
}

.wszq02og .wwiuwmj9:not([data-x96ekbc]) {
  flex: 0 0 230px;
  scroll-snap-align: start;
}

.wszq02og [data-x96ekbc="vav7iu7"]::-webkit-scrollbar {
  height: 6px;
}

.wszq02og [data-x96ekbc="vav7iu7"]::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

@media (min-width: 640px) {
  /* Flatten search-and-tabs and search-wrap so their children participate
     directly in the box's 2-column grid layout. */
  .wszq02og [data-x96ekbc="vk0oapd"],
  .wszq02og [data-x96ekbc="v68plur"] {
    display: contents;
  }
  .wszq02og .wwmcrwf7 {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "header  header"
      "search  panel"
      "tabs    panel"
      "carousel panel";
    align-items: start;
    column-gap: 0;
  }
  .wszq02og .wp9juhmn {
    grid-area: header;
  }
  .wszq02og [data-x96ekbc="vfmbll0"] {
    grid-area: search;
    margin: 14px 20px 0;
    box-sizing: border-box;
    width: calc(100% - 40px);
  }
  /* Keep sport tabs visible in search mode — JS hides them via inline style,
     but in the split layout they anchor the left column and their absence
     creates a blank gap between the search input and the carousel. */
  .wszq02og .w7jdjy3r {
    grid-area: tabs;
    display: flex !important;
  }
  /* Keep carousel visible even when JS sets display:none in search mode. */
  .wszq02og .wbcqvsag {
    grid-area: carousel;
    display: block !important;
  }
  /* Right panel: search results + empty message. Always visible (override the
     PHP-rendered style="display:none") so the right column is always occupied;
     shows a placeholder hint when empty, search rows when the user is typing.
     The JS still controls the content of the div — we just stop it from
     collapsing the column by forcing display:block here. */
  .wszq02og [data-x96ekbc="vpht8e4"] {
    display: block !important;
    grid-area: panel;
    grid-row: 2 / -1;
    align-self: stretch;
    border-left: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 0 0 var(--radius, 12px) 0;
    padding: 12px;
    box-sizing: border-box;
    overflow-y: auto;
    min-height: 80px;
  }
  /* search-empty stays hidden — it overlaps with the results div in the same
     grid area and would double up the right column; the placeholder ::before
     on search-results:empty handles the idle-state hint instead. */
  .wszq02og [data-x96ekbc="vtyy6g0"] {
    display: none !important;
  }
  /* Placeholder shown in the right column before any search */
  .wszq02og [data-x96ekbc="vpht8e4"]:empty::before {
    content: "Type to search matches…";
    display: block;
    padding: 16px 4px;
    color: var(--color-muted);
    font-size: 0.8rem;
    text-align: center;
  }
  /* Panel header above results */
  .wszq02og [data-x96ekbc="vpht8e4"]:not(:empty)::before {
    content: "Search results";
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-muted);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
  }
}

/* __va_widget_css_begin__ */
.wszq02og,
.wkju06m2 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  /* Reserve space before match list paints (mobile CLS). */
  min-height: 280px;
}

.wx30gqh7 {
  width: 100%;
}

.wwmcrwf7 {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  color: var(--color-text);
}

.wp9juhmn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-bottom: 1px solid var(--color-border);
}

.wfoqmu7m {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}

.w22acee7 {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.w99mj66w {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.w99mj66w:hover {
  background: var(--color-accent-2);
}

.w48sa7tl {
  padding: 14px 20px 0;
}

.who17du2 {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.85rem;
}

.who17du2:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-color: var(--color-accent);
}

.waa8lyl4 {
  padding: 16px 20px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.w7jdjy3r {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 0;
}

.w02o1ery {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.w02o1ery:hover {
  border-color: var(--color-accent);
}

.wgakryq4,
.w02o1ery.wgakryq4 {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.wbcqvsag {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Baseline vertical spacing between match rows — was only ever set inside the
   ≥640px grid rule below, so below that width [data-x96ekbc="vav7iu7"]
   had no display/gap of its own and rows (no margin of their own either) sat
   flush against each other with zero space between on mobile. Applies to
   every variant; the ≥640px rule overrides display to grid for the ones that
   go multi-column there. */
[data-x96ekbc="vav7iu7"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 640px) {
  [data-x96ekbc="vav7iu7"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
  }
}

/* Match rows — shared by the cached top list and JS-driven search results. */
.wwiuwmj9 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}

.wkli0t21 {
  flex: 0 0 100%;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.wmo9n77u {
  font-size: 0.75rem;
  color: var(--color-muted);
  order: 3;
}

.wshm7qai {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  order: 2;
}

.wshm7qai span {
  color: inherit;
}

.wnwyes1x {
  display: flex;
  gap: 6px;
  order: 4;
  flex: 0 0 100%;
}

.wly6mgtv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 56px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.85rem;
}

.wly6mgtv:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

.wly6mgtv .w6lxfqdr {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
}

.wly6mgtv .wddomt5t {
  font-weight: 700;
  color: var(--color-text);
}

/* Search / browse results — compact two-column row: team names left, kickoff
   time right, "Show markets" toggle as its own full-width row below (it reuses
   the same odd_button class as the 1/X/2 pills, so it needs its own override —
   see [data-x96ekbc="v0jvmsr"] below — or it renders squeezed
   into the flex row next to the team names). */
.wayh2n4a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* No side padding/margin of its own — flush with the box edges, individual
     rows carry their own inset via border + padding rather than the
     container adding a second, redundant gutter on top of theirs. */
  padding: 16px 0 20px;
  margin: 0;
}

/* Plain flex-wrap, not grid: league own line, then teams/time/button flow
   left-to-right and each wraps to a new line only when it doesn't fit —
   exactly "same line as the match name+date if there's room, own line if
   not", which grid's explicit placement can't express but wrap naturally does. */
.wwiuwmj9[data-x96ekbc="vqw6j2z"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
}

.wwiuwmj9[data-x96ekbc="vqw6j2z"] > .wkli0t21 {
  flex: 0 0 100%;
}

.wwiuwmj9[data-x96ekbc="vqw6j2z"] > .wshm7qai {
  flex: 1 1 auto;
  min-width: 140px;
  order: 1;
}

.wwiuwmj9[data-x96ekbc="vqw6j2z"] > .wmo9n77u {
  flex: 0 0 auto;
  white-space: nowrap;
  order: 2;
}

.wly6mgtv[data-x96ekbc="v0jvmsr"] {
  order: 3;
  flex: 0 0 auto;
  flex-direction: row;
  width: auto;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--color-bg);
  white-space: nowrap;
}

.wwiuwmj9[data-x96ekbc="vqw6j2z"] > .wnwyes1x,
.wwiuwmj9[data-x96ekbc="vqw6j2z"] > .wlwwdh4b,
.wwiuwmj9[data-x96ekbc="vqw6j2z"] > [data-x96ekbc="v5qllue"] {
  flex: 0 0 100%;
  order: 4;
}

.wlwwdh4b {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

.w6l2hjt2 {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--color-surface);
}

.woww4j7k {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.wkkzithx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: 0 6px 6px 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.82rem;
}

.wkkzithx:hover {
  border-color: var(--color-accent);
}

.wvpx0gfl {
  font-weight: 700;
  color: var(--color-accent);
}

/* v4 — horizontal scroll carousel (mobile / below 640px) that splits into
   carousel-left + search-results-right on desktop.
   On mobile: stacked as normal, carousel scrolls horizontally.
   On desktop: 2-column grid. The search-and-tabs and search-wrap wrappers
   get display:contents so their children (input, results, empty msg, nav)
   become direct grid children and can be placed into named grid areas.
   The JS setSearchMode() hides .wbcqvsag via inline style
   when search is active — overridden here so the carousel always stays visible
   on the left; search results appear simultaneously in the right column. */
.wszq02og [data-x96ekbc="vav7iu7"] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  padding-bottom: 8px;
}

.wszq02og .wwiuwmj9:not([data-x96ekbc]) {
  flex: 0 0 230px;
  scroll-snap-align: start;
}

.wszq02og [data-x96ekbc="vav7iu7"]::-webkit-scrollbar {
  height: 6px;
}

.wszq02og [data-x96ekbc="vav7iu7"]::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

@media (min-width: 640px) {
  /* Flatten search-and-tabs and search-wrap so their children participate
     directly in the box's 2-column grid layout. */
  .wszq02og [data-x96ekbc="vk0oapd"],
  .wszq02og [data-x96ekbc="v68plur"] {
    display: contents;
  }
  .wszq02og .wwmcrwf7 {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "header  header"
      "search  panel"
      "tabs    panel"
      "carousel panel";
    align-items: start;
    column-gap: 0;
  }
  .wszq02og .wp9juhmn {
    grid-area: header;
  }
  .wszq02og [data-x96ekbc="vfmbll0"] {
    grid-area: search;
    margin: 14px 20px 0;
    box-sizing: border-box;
    width: calc(100% - 40px);
  }
  /* Keep sport tabs visible in search mode — JS hides them via inline style,
     but in the split layout they anchor the left column and their absence
     creates a blank gap between the search input and the carousel. */
  .wszq02og .w7jdjy3r {
    grid-area: tabs;
    display: flex !important;
  }
  /* Keep carousel visible even when JS sets display:none in search mode. */
  .wszq02og .wbcqvsag {
    grid-area: carousel;
    display: block !important;
  }
  /* Right panel: search results + empty message. Always visible (override the
     PHP-rendered style="display:none") so the right column is always occupied;
     shows a placeholder hint when empty, search rows when the user is typing.
     The JS still controls the content of the div — we just stop it from
     collapsing the column by forcing display:block here. */
  .wszq02og [data-x96ekbc="vpht8e4"] {
    display: block !important;
    grid-area: panel;
    grid-row: 2 / -1;
    align-self: stretch;
    border-left: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 0 0 var(--radius, 12px) 0;
    padding: 12px;
    box-sizing: border-box;
    overflow-y: auto;
    min-height: 80px;
  }
  /* search-empty stays hidden — it overlaps with the results div in the same
     grid area and would double up the right column; the placeholder ::before
     on search-results:empty handles the idle-state hint instead. */
  .wszq02og [data-x96ekbc="vtyy6g0"] {
    display: none !important;
  }
  /* Placeholder shown in the right column before any search */
  .wszq02og [data-x96ekbc="vpht8e4"]:empty::before {
    content: "Type to search matches…";
    display: block;
    padding: 16px 4px;
    color: var(--color-muted);
    font-size: 0.8rem;
    text-align: center;
  }
  /* Panel header above results */
  .wszq02og [data-x96ekbc="vpht8e4"]:not(:empty)::before {
    content: "Search results";
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-muted);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
  }
}
/* __va_widget_css_end__ */

/* __va_sidebar_active_contrast__ */
/* Appended at the end of the styles bundle AFTER harden/widget sync.
   Safety net: never paint nested links via an ancestor .wz9qz2jj, and keep
   the chevron toggle free of active fills / washed-out on-accent text.
   Soft-fill readable text for elevated/floating skins lives in chrome_skins
   (`color: var(--color-text) !important`) so solid-accent variants (v2/v7)
   keep white-on-accent when those skins are not selected. */
.whbg6hpt li.wz9qz2jj > ul a {
  background: transparent !important;
  box-shadow: none !important;
}
.whbg6hpt li.wz9qz2jj > ul a:not([aria-current="page"]):not(.wz9qz2jj) {
  color: var(--color-muted) !important;
  font-weight: 500 !important;
}
.whbg6hpt li.wz9qz2jj:has(> ul) > a {
  box-shadow: none !important;
}
.whbg6hpt li:has(> ul):not(.wz9qz2jj):has(.wz9qz2jj) > a,
.whbg6hpt li:has(> ul):not(.wz9qz2jj):has(.wz9qz2jj) > span {
  color: var(--color-text) !important;
  font-weight: 600;
  background: transparent !important;
  box-shadow: none !important;
}
.whbg6hpt .block-766,
.whbg6hpt li.wz9qz2jj > .block-766,
.whbg6hpt li:has(.wz9qz2jj) > .block-766 {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-muted) !important;
}

/* Hover/active: neutralize link-style gradient_text transparent fill.
   Soft-fill chrome skins replace the gradient bg with an opaque mix via
   !important; without resetting -webkit-text-fill-color the label vanishes.
   Use currentColor so solid-accent active (on-accent) and soft-fill
   (--color-text) both keep the fill matching the intended color. */
.whbg6hpt a:hover,
.whbg6hpt a:focus-visible,
.whbg6hpt li.wz9qz2jj > a,
.whbg6hpt a.wz9qz2jj,
.whbg6hpt a[aria-current="page"] {
  -webkit-text-fill-color: currentColor !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}