.btn_close { border: 0; background: transparent; color: var(--color-text); font-size: 1.75rem; line-height: 1; cursor: pointer; margin-bottom: 12px; } .cards-container .card-image{ display: block; width: 100%; height: 100%; object-fit: cover; } [data-hngdvy0="vl8qf09"].main_wrapper { 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; } .menu_list .action_btn .item_link { 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; } /* 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. */ .mod_header, .mod_header .header_container, .mod_header .header_container > .nav_child, .mod_header .nav-menu-item { overflow: visible; } .mod_header .nav-menu-link:hover { color: var(--color-accent); } .mod_footer { background: var(--color-surface); border-top: 0 !important; box-shadow: 0 -4px 24px color-mix(in srgb, var(--color-text) 8%, transparent); } .benefit-section .benefit-item{ padding: clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) calc(clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) + 8px); border: 1px dashed var(--color-border-strong); background: color-mix(in srgb, var(--color-surface) 90%, var(--color-accent-soft)); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); box-sizing: border-box; min-width: 0; } .category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:21px;min-width:0} .review-carousel { display: grid; gap: 21px; padding: clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px); background: var(--color-surface-inverted); border-radius: 4px; color: var(--color-on-contrast); } .__gone__ .dropdown_inner .nav-menu-label, .__gone__ .dropdown_inner .nav-menu-link { color: var(--color-text); } /* ===== Sidebar: universal collapsible submenu (structure-based, variant-agnostic) ===== Split hit targets: parent navigates; .sub_menu_toggle expands/collapses. */ .sidebar_right li:has(> ul) { display: flex; flex-wrap: wrap; align-items: stretch; } /* CLS media: reserve box before image decode */ .split-section_content .split-text-image{aspect-ratio:4 / 3;overflow:hidden} .ribbon-banner .ribbon-text{ margin: 0; color: var(--color-text); } /* ensureControls() (see the JS bundle) wraps the scrolling track in a plain .slider_container 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 .slider_container makes the host the new direct child instead of the block — replicate those properties here so that rule's protection isn't lost. */ .slider_container { position: relative; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .how-it-works{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(140px, calc((100% - 3px) / 4)),1fr));gap:1px;background:var(--color-border);border:1px solid var(--color-border);min-width:0} .feature-grid .feature-heading{ margin: 0 0 8px; color: var(--color-text); position: relative; } .mod_footer .footer_copy { 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; } .payout-table p{grid-column:1 / -1;grid-row:2;margin:0;color:var(--color-muted);line-height:1.55} .sidebar_right li:has(> ul).is_open > .sub_menu_toggle::before { transform: rotate(90deg); } .mod_header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 14px 19px; } .brand-logo-section .brand-logo-item span{display:block;line-height:1.3;color:var(--color-muted);word-break:break-word} .article_content a:hover { text-decoration: underline; } .ribbon-banner{ display: grid; gap: 10px; justify-items: center; text-align: center; padding: 29px 21px; background: var(--color-accent-soft); border-top: 3px solid var(--color-accent); box-sizing: border-box; min-width: 0; } .author-card .author-badge{font-weight:800;color:var(--color-accent)} .mod_block .hero_title{ margin: 0; color: var(--color-on-contrast); overflow-wrap: anywhere; line-height: 1.15; max-width: 40rem; } .feature-grid .feature-point::before{ content: counter(ft, decimal-leading-zero); position: absolute; right: 8px; top: 4px; font-size: 3rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--color-accent) 22%, transparent); pointer-events: none; } [data-hngdvy0="vl8qf09"] .offcanvas_drawer { position: absolute; inset: 0; width: 100%; max-width: 100%; height: 100%; background: var(--color-surface); color: var(--color-text); padding: 15px 19px; opacity: 0; visibility: hidden; transform: none; transition: opacity .28s ease, visibility .28s ease; overflow-y: auto; box-sizing: border-box; } @media(max-width:800px){.pros-cons-wrap{grid-template-columns:1fr}.pros-cons-wrap .pros-column{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--color-on-contrast) 22%,transparent)}} .author-card .author-summary{color:var(--color-muted)} 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); } .mod_header .nav-menu-link { color: var(--color-muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; } .mod_block{ padding: 28px 20px; border-radius: 4px; background-color: var(--color-contrast); color: var(--color-on-contrast); display: grid; gap: 21px; align-items: start; width: 100%; min-width: 0; box-sizing: border-box; background-image: linear-gradient( 135deg, color-mix(in srgb, var(--color-contrast) 88%, transparent), color-mix(in srgb, var(--color-contrast) 94%, transparent) ), var(--hero-bg, none) center/cover no-repeat, repeating-linear-gradient( -45deg, transparent, transparent 10px, color-mix(in srgb, var(--color-on-contrast) 6%, transparent) 10px, color-mix(in srgb, var(--color-on-contrast) 6%, transparent) 11px ); } .article-section .article-body{ color: var(--color-muted); line-height: 1.7; } .slider_bar { display: block; height: 100%; width: 8%; background: var(--color-accent); border-radius: inherit; transition: width .2s ease; } /* .outer_wrap 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 .slider_nav_btn-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-0k8fsbn], [data-gx47arn] { transition: opacity .15s ease; } [data-8w14mhk="v5c3a6u"] .mod_footer, [data-8w14mhk="v5c3a6u"] > .mod_footer, [data-8w14mhk="v5c3a6u"] > footer { grid-column: 1 / span 2; grid-row: 3; } .cards-container .cards-layout-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 3 * 21px) / 4)), 1fr)); gap: 21px; padding-top: 12px; box-sizing: border-box; min-width: 0; } .stats-overview .stat-box span { color: color-mix(in srgb, var(--color-on-contrast) 80%, transparent); } /* border_bottom_solid — persistent thin border, accent on hover/active */ [data-ce2jtd3] { padding-bottom: 3px; border-bottom: 1px solid color-mix(in srgb, var(--color-border-strong) 70%, transparent); } .process-flow .step-marker{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} .split-section_content .split-text-content h2{ margin: 0 0 10px; color: var(--color-text); } .mod_footer .footer_nav 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); } .menu_list .accordion_body { display: none; gap: 0; padding: 2px 0 8px 10px; margin: 0 0 4px 8px; border-left: 2px solid var(--color-border); } .sidebar-aside .nav-menu-link:hover { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); } .author-card{display:grid;gap:12px;padding:clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) calc(clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) + 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} 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); } .mod_footer .footer-bottom-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); } [data-8w14mhk="v5c3a6u"] .main-navigation { grid-column: 1 / span 2; grid-row: 1; border-bottom: 1px solid var(--color-border); } .how-it-works p{margin:0;color:color-mix(in srgb,var(--color-on-contrast) 78%,transparent);font-size:.88rem} *, *::before, *::after { box-sizing: border-box; } .faq-compact-group .faq-compact-tag{margin:0 0 4px;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text)} .faq-section .faq-question{ cursor: pointer; color: var(--color-accent-contrast); font-weight: 600; list-style: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; } .mod_header .dropdown_inner { max-width: calc(100vw - 24px); } [data-ce2jtd3]:hover, [data-ce2jtd3]:focus-visible, [data-ce2jtd3][aria-current="page"] { border-bottom-color: var(--color-accent); } :root { --font-heading: 'Sora', system-ui, sans-serif; --font-body: 'Nunito Sans', system-ui, sans-serif; --ui-radius: 4px; --btn-hover-transform: none; --btn-hover-filter: none; --btn-hover-shadow: none; --text-scale: 1; --heading-scale: 1.06; --site-scale: 1.06; } @media(max-width:600px){.payout-table .payout-row{grid-template-columns:1fr}.payout-table .payout-info{grid-column:1;grid-row:1}.payout-table .payout-heading{grid-column:1;grid-row:2}} .faq-compact-group .faq-compact-row{border-bottom:1px solid var(--color-border);padding-bottom:6px} /* 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-hjpnej0="vpeu9wm"] 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-hjpnej0 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-hjpnej0="vpeu9wm"] prefix, so they aren't affected. */ .slider_pagination { display: flex; gap: 8px; justify-content: center; margin-top: -2.25rem; margin-bottom: 0; min-height: 1.5rem; align-items: center; } .mod_header .dropdown_inner .dropdown_inner { top: -8px; left: calc(100% - 8px); min-width: 200px; } [data-8w14mhk="v5c3a6u"] .com_content-area { grid-column: 2; grid-row: 2; width: 100%; max-width: none; margin: 0; padding: 29px 21px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 21px; min-width: 0; overflow-x: clip; } .layout-two-columns .layout-col-left{ color: var(--color-muted); border-right: 1px solid var(--color-border-strong); } .mod_header .dropdown_inner .dropdown_inner::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px; } .article-section{ padding: 29px calc(21px + 12px); border-left: 8px solid var(--color-accent-2); background: var(--color-surface); box-sizing: border-box; min-width: 0; } .breadcrumb-nav .breadcrumb-item a{color:var(--color-accent);text-decoration:none} @font-face { font-family: 'Nunito Sans'; src: url('/assets/fonts/nunito-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: optional; } [data-nn4f97c]::-webkit-scrollbar { display: none; } /* fixed_right — floating FAB top-right (legacy default). */ .nav_toggle { position: fixed; top: 12px; right: 12px; left: auto; bottom: auto; } .stats-overview { display: flex; flex-wrap: wrap; gap: 21px; justify-content: center; padding: 29px 21px; background: var(--color-contrast); color: var(--color-on-contrast); border-radius: 4px; background-image: repeating-linear-gradient(90deg, transparent, transparent 12px, color-mix(in srgb, var(--color-on-contrast) 6%, transparent) 12px, color-mix(in srgb, var(--color-on-contrast) 6%, transparent) 13px); } 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; } h3 { font-size: calc(1.35rem * var(--heading-scale, 1)); } .category-grid .category-label{margin:0 0 6px;color:var(--color-text)} /* Hub pages with nested children are links, not accordion buttons — keep the nested list visible so mobile still shows every page. */ .menu_list li:not(.accordion_group) > .accordion_body { display: grid; } /* Ancestor of the current page: subtler cue than the leaf current item. */ .sidebar_right li:has(> ul):not(.active):has(.active) > a, .sidebar_right li:has(> ul):not(.active):has(.active) > span { color: var(--color-text); font-weight: 600; background: transparent; box-shadow: none; } .brand-logo-section{display:flex;flex-direction:column;gap:12px;min-width:0} .sidebar-aside .nav-menu-label { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin-bottom: 6px; } .mod_header .header_container { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%, 1018px); margin: 0 auto; } .mod_header .nav-menu-item { list-style: none; } .payout-table .payout-heading{grid-column:2;grid-row:1;margin:0;color:var(--color-text);min-width:0} .process-flow{display:grid;gap:0;background:var(--color-contrast);border-radius:min(4px, 20px);overflow:hidden;min-width:0} .author-card .author-title{margin:0 0 8px;color:var(--color-muted);font-size:.85rem} .mod_footer .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); } [data-7m7f7uq="v7b54p7"] [data-ce2jtd3] { padding-bottom: 2px; } /* Global nav_link decoration skins — selected via html[data-sz8w5mn="vnavoxf"]. Applies to plain navigational links (header/sidebar/footer menu items) tagged with the plain [data-ce2jtd3] marker attribute; [data-7m7f7uq] 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-ce2jtd3] and stay outside this axis. */ [data-ce2jtd3] { 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; } .pros-cons-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--color-contrast);color:var(--color-on-contrast);border-radius:min(4px, 20px);overflow:hidden;min-width:0} .sidebar_right li:has(> ul).is_open > ul { display: grid; } [data-0k8fsbn].outer_wrap, [data-gx47arn].outer_wrap { opacity: 0; pointer-events: none; } .process-flow .process-title{display:flex;gap:12px;align-items:center;padding:clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px);cursor:pointer;color:var(--color-on-contrast);list-style:none;font-weight:700} .slider_nav_btn[data-gx47arn] { right: 0.4rem; } .benefit-section .benefit-heading{ margin: 0 0 8px; color: var(--color-accent-contrast); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; letter-spacing: 0.02em; } .split-section_content .split-text-image{ min-height: 180px; border-radius: 4px; background: var(--color-contrast); border-left: 4px solid var(--color-accent-2); overflow: hidden; max-width: 100%; min-width: 0; } @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; } .payout-table .payout-info{grid-column:1;grid-row:1;font-family:var(--font-mono,ui-monospace,monospace);font-weight:700;color:var(--color-accent);font-size:.85rem;white-space:nowrap} /* 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-hjpnej0 prefix) so every style gets this regardless of which one a site rolled. */ .slider_container:not(.is-scrollable) .slider_nav_btn, .slider_container:not(.is-scrollable) .slider_pagination, .slider_container:not(.is-scrollable) .slider_loading { display: none !important; } .action-section{ padding: 29px 21px; background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 4px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; } .sidebar_right li:has(> ul) > ul { flex: 1 1 100%; width: 100%; display: none; padding-left: 12px; } .slider_nav_btn[data-0k8fsbn] { left: 0.4rem; } .faq-section .faq-block{ border: 1px dashed var(--color-border-strong); padding: clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) calc(clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) + 8px); background: var(--color-bg); box-sizing: border-box; min-width: 0; } .faq-compact-group .faq-compact-answer{margin-top:6px;font-size:.85rem;color:var(--color-muted)} .menu_list .accordion_body .item_link:hover { color: var(--color-accent); } .category-grid .category-icon{aspect-ratio:16/10;overflow:hidden;margin:0 0 12px;background:var(--color-accent-soft);border-radius:calc(4px - 2px)} .slider_indicator:hover, .slider_indicator:focus-visible, .slider_indicator.active { background: var(--color-accent); } .slider_indicator { width: 8px; height: 8px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--color-muted) 45%, transparent); cursor: pointer; padding: 0; } .hero_cta_btn:hover, .btn_primary:hover { filter: brightness(1.06); } .mod_footer .footer_nav { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .faq-compact-group .faq-compact-question::-webkit-details-marker{display:none} .menu_list .list_item { list-style: none; margin: 0; } .ribbon-banner .ribbon-action{ background: var(--color-accent); color: var(--color-on-accent); padding: 8px 20px; text-decoration: none; font-weight: 700; border-radius: 4px; } .payout-table{display:grid;gap:21px;min-width:0} /* Hub parent that is itself the current page: readable, not a fat tree paint. */ .sidebar_right li.active: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; } .feature-grid .feature-point p{ margin: 0; color: var(--color-muted); position: relative; } .article-section .article-heading{ margin: 0 0 12px; color: var(--color-text); } .cards-container .card-list-item:nth-child(even){ transform: translateY(14px); } @media (max-width: 900px) { /* !important: css_shuffle can place desktop grid rules after this block */ [data-8w14mhk="v5c3a6u"].section_block { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; width: 100% !important; max-width: 100% !important; } [data-8w14mhk="v5c3a6u"] .side-drawer { display: none !important; } [data-8w14mhk="v5c3a6u"] .com_content-area { grid-column: auto !important; grid-row: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-left: 16px; padding-right: 16px; align-items: stretch; gap: 21px; } [data-8w14mhk="v5c3a6u"] .com_content-area > * { width: 100% !important; max-width: 100% !important; min-width: 0; } [data-8w14mhk="v5c3a6u"] .mod_footer, [data-8w14mhk="v5c3a6u"] > .mod_footer, [data-8w14mhk="v5c3a6u"] > footer { grid-column: auto !important; grid-row: auto !important; } } .breadcrumb-nav .breadcrumb-item a:hover{text-decoration:underline} .sidebar-aside .nav-menu-link { display: inline-flex; align-items: center; padding: 6px 11px; text-decoration: none; font-size: 0.82rem; font-weight: 600; color: var(--color-text); background: color-mix(in srgb, var(--color-bg) 75%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent); border-radius: 999px; } /* CLS media: reserve box before image decode */ .bet-product-grid .bet-product-card{aspect-ratio:4 / 3;overflow:hidden} @media (max-width: 800px) { .split-section_content{ grid-template-columns: 1fr; } .split-section_content .split-text-image{ border-left: 0; border-top: 4px solid var(--color-accent-2); min-height: 120px; } } .hero_cta_btn, .btn_primary { 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; } h2 { font-size: calc(1.75rem * var(--heading-scale, 1)); } /* ===== Header utility: nav list to the right ===== */ .mod_header .nav_child, .mod_header ul:first-child { margin-left: auto; } .module_block { /* Approximate header + ~3 match rows before widget paint (mobile CLS). */ min-height: 280px; } .bet-product-grid .bet-product-card { margin: 0; background: linear-gradient(145deg, var(--color-accent-soft), var(--color-accent)); border-radius: 4px; overflow: hidden; border: 1px solid var(--color-border); min-height: 140px; display: grid; align-content: end; } .article_content a { color: var(--color-accent); font-weight: 600; text-decoration: none; } .review-carousel .review-card { margin: 0; padding: 0 0 14px; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-on-contrast) 18%, transparent); } .action-section p{ margin: 0; color: var(--color-muted); } .history-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(160px, calc((100% - 3 * 21px) / 4)),1fr));gap:21px;min-width:0} .sidebar_right li:has(> ul) > a, .sidebar_right li:has(> ul) > span { flex: 1 1 auto; min-width: 0; } /* v6 — elevated surfaces + soft shadows */ .mod_header, .mod_header, header { background: var(--color-surface); border-bottom: 0 !important; box-shadow: 0 4px 24px color-mix(in srgb, var(--color-text) 10%, transparent); } .layout-two-columns{ display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 21px; align-items: start; } .nav_toggle::after { content: "☰"; font-size: 1.25rem; line-height: 1; } .brand-logo-section .brand-logo-lead{max-width:72ch;line-height:1.55;color:var(--color-text);font-size:.95rem} .pros-cons-wrap .pros-column,.pros-cons-wrap .cons-column{padding:clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) calc(clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) + 10px);min-width:0;box-sizing:border-box} /* Global slider / carousel skins — selected via html[data-hjpnej0="vpeu9wm"]. Tracks/items use data-nn4f97c / data-xqy8och (and optional controls). */ [data-nn4f97c] { 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; } .mod_header .nav_child { display: flex; gap: 8px 18px; list-style: none; margin: 0 0 0 auto; padding: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .stats-overview .stats-heading { display: block; font-size: 1.8rem; color: var(--color-accent-2); } h1 { font-size: calc(2.25rem * var(--heading-scale, 1)); } .section_content { padding: 28px 0 8px; } .layout-two-columns .layout-col-right{ background: var(--color-accent-soft); border-radius: 4px; color: var(--color-text); border-left: 4px solid var(--color-accent-contrast); } html, body { font-family: var(--font-body); } .faq-section{ display: grid; gap: 8px; box-sizing: border-box; min-width: 0; } .slider_loading { display: block; height: 3px; margin-top: -1.15rem; margin-bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--color-border) 80%, transparent); overflow: hidden; } .nav_toggle[aria-expanded="true"]::after { content: "✕"; } .breadcrumb-nav .breadcrumb-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;align-items:center} .promo-banner-wrap .promo_btn{ background: transparent; color: var(--color-on-contrast); padding: 8px 20px; border-radius: 4px; text-decoration: none; font-weight: 600; border: 1px solid color-mix(in srgb, var(--color-on-contrast) 55%, transparent); } .history-timeline p{margin:0;color:var(--color-muted);font-size:.92rem} .faq-compact-group{display:grid;gap:8px;padding:clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;min-width:0;box-sizing:border-box} h4 { font-size: calc(1.15rem * var(--heading-scale, 1)); } .brand-logo-section .brand-logo-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} .category-grid .category-icon img{width:100%;height:100%;object-fit:cover;display:block} .mod_footer .footer-extra-nav { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .hero_title, .mod_block h1 { max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.2; } .cards-container .card-copy{ margin: 0; color: var(--color-muted); } .process-flow .accordion-content{padding:0 clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px);color:color-mix(in srgb,var(--color-on-contrast) 80%,transparent)} h1, h2, h3, h4, [class*="title"], [class*="Title"], [class*="headline"], [class*="Headline"] { font-family: var(--font-heading); } .author-card .author-name{margin:0 0 2px;color:var(--color-text)} [data-8w14mhk]:has([data-ggadk4p="v1brm5j"]) .side-drawer { background: var(--color-surface); border: 0 !important; box-shadow: 4px 0 28px color-mix(in srgb, var(--color-text) 9%, transparent); } .faq-compact-group .faq-compact-question{cursor:pointer;font-size:.9rem;font-weight:600;color:var(--color-text);list-style:none} .sidebar_right .sub_menu_toggle:focus-visible { box-shadow: inset 0 0 0 2px var(--color-accent, currentColor); } .cards-container .card-list-item{ background: var(--color-bg); border: 1px solid var(--color-border-strong); padding: clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) calc(clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) + 8px); transform: translateY(0); box-sizing: border-box; min-width: 0; box-shadow: 10px 10px 0 var(--color-accent-soft); } [data-8w14mhk="v5c3a6u"].section_block { display: grid; grid-template-columns: 254px minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100vh; gap: 0; background: var(--color-bg); color: var(--color-text); } .feature-grid .feature-point{ padding: clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) calc(clamp(14px, calc(14px + 0.0341 * (100vw - 360px)), 29px) + 8px); background: var(--color-surface); box-sizing: border-box; min-width: 0; counter-increment: ft; position: relative; overflow: hidden; } @media (max-width: 900px) { .nav_toggle { display: inline-flex !important; } .layout_wrap { 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: