/* ==========================================================================
DGTULS — Design System & Prototype Styles
AI • TECH • TOOLS
--------------------------------------------------------------------------
1. Tokens 7. Cards & editorial 13. Forum
2. Reset / base 8. Tools & directory 14. Pricing / membership
3. Layout 9. Reviews & ratings 15. Article / long-form
4. Typography 10. Comparisons (VS) 16. Account
5. Buttons, badges 11. Deals & commerce 17. Utilities
6. Header / nav 12. Ads & sponsorship 18. Responsive
========================================================================== */
/* 1. TOKENS ================================================================ */
:root {
/* Brand */
--c-pink: #ff2e9a;
--c-magenta: #e0189a;
--c-violet: #b026f0;
--c-purple: #7a2cf5;
--grad-brand: linear-gradient(100deg, #ff2e9a 0%, #c026ea 52%, #7a2cf5 100%);
--grad-brand-soft: linear-gradient(100deg, rgba(255,46,154,.12), rgba(122,44,245,.12));
/* Ink (dark surfaces) */
--c-ink: #0a0910;
--c-ink-2: #121019;
--c-ink-3: #1b1825;
--c-ink-4: #262233;
--c-ink-line: #2c2839;
--c-ink-text: #f5f3fa;
--c-ink-text-2: #b7b2c6;
--c-ink-text-3: #847e96;
/* Paper (light surfaces) */
--c-bg: #ffffff;
--c-bg-soft: #f7f6fa;
--c-bg-sunk: #efedf4;
--c-line: #e6e3ed;
--c-line-2: #d6d2e0;
--c-text: #14121b;
--c-text-2: #4a4659;
--c-text-3: #767186;
/* Interactive */
--c-accent: #c0127e; /* links on white (AA) */
--c-accent-2: #6a1fe0;
--c-focus: #a23bff;
--c-success: #0f8a5f;
--c-danger: #d6334a;
--c-warning: #b7791f;
/* Content-type system (section 28) */
--t-news: #2563eb;
--t-review: #d6168a;
--t-best: #b7791f;
--t-compare: #7c3aed;
--t-guide: #0f8a5f;
--t-tools: #a326e6;
--t-community: #0e8c9a;
--t-deals: #e0461f;
--t-sponsored: #6b6880;
--t-opinion: #444055;
/* Typography */
--f-display: "Sora", "Inter", system-ui, sans-serif;
--f-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-read: "Newsreader", Georgia, "Times New Roman", serif;
--f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--fs-2xs: .6875rem; /* 11 */
--fs-xs: .75rem; /* 12 */
--fs-sm: .875rem; /* 14 */
--fs-md: 1rem; /* 16 */
--fs-lg: 1.125rem; /* 18 */
--fs-xl: 1.3125rem; /* 21 */
--fs-2xl: 1.625rem; /* 26 */
--fs-3xl: 2.125rem; /* 34 */
--fs-4xl: 2.75rem; /* 44 */
--fs-5xl: 3.5rem; /* 56 */
--lh-tight: 1.12;
--lh-snug: 1.3;
--lh-body: 1.6;
--lh-read: 1.72;
/* Spacing (4px base) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px;
/* Radius */
--r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
/* Shadows */
--sh-1: 0 1px 2px rgba(20,18,27,.06), 0 1px 1px rgba(20,18,27,.04);
--sh-2: 0 4px 14px -4px rgba(20,18,27,.12), 0 2px 4px rgba(20,18,27,.05);
--sh-3: 0 18px 40px -12px rgba(20,18,27,.22);
--sh-glow: 0 10px 30px -10px rgba(192,38,234,.55);
/* Layout */
--w-max: 1280px;
--w-read: 700px;
--gutter: 24px;
--header-h: 64px;
/* Breakpoints (reference — used literally in media queries)
--bp-sm: 640px --bp-md: 900px --bp-lg: 1120px --bp-xl: 1280px */
--ease: cubic-bezier(.2,.7,.2,1);
--dur: .18s;
}
/* 2. RESET / BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
margin: 0; background: var(--c-bg); color: var(--c-text);
font: 400 var(--fs-md)/var(--lh-body) var(--f-ui);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; line-height: var(--lh-tight); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.is-locked { overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 16px; height: 16px; }
.ico--xs { width: 13px; height: 13px; }
.ico--lg { width: 26px; height: 26px; }
.ico--fill { fill: currentColor; stroke: none; }
/* 3. LAYOUT =============================================================== */
.container { width: 100%; max-width: var(--w-max); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 920px; }
.section { padding: var(--s-10) 0; }
.section--tight { padding: var(--s-8) 0; }
.section--soft { background: var(--c-bg-soft); }
.section--line { border-top: 1px solid var(--c-line); }
.section--dark { background: var(--c-ink); color: var(--c-ink-text); }
.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.layout-sidebar { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--s-9); align-items: start; }
.layout-sidebar--left { grid-template-columns: 260px minmax(0,1fr); }
.sidebar { display: grid; gap: var(--s-7); }
.sticky { position: sticky; top: calc(var(--header-h) + 20px); }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.divider { height: 1px; background: var(--c-line); border: 0; margin: var(--s-7) 0; }
/* Section heading */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-7); }
.sec-head__kicker { display: block; margin-bottom: var(--s-2); }
.sec-title { font-size: var(--fs-3xl); }
.sec-sub { color: var(--c-text-2); margin-top: var(--s-2); max-width: 60ch; }
.section--dark .sec-sub { color: var(--c-ink-text-2); }
.sec-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-sm); color: var(--c-text); white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color var(--dur); }
.sec-link:hover { border-color: currentColor; }
.section--dark .sec-link { color: #fff; }
/* Page header (hub pages) */
.page-head { background: var(--c-ink); color: var(--c-ink-text); padding: var(--s-9) 0 var(--s-8); position: relative; overflow: hidden; }
.page-head::after { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; background: radial-gradient(closest-side, rgba(176,38,240,.22), transparent 70%); pointer-events: none; }
.page-head > .container { position: relative; z-index: 1; }
.page-head h1 { font-size: var(--fs-5xl); margin-top: var(--s-3); }
.page-head__dek { color: var(--c-ink-text-2); font-size: var(--fs-lg); max-width: 62ch; margin-top: var(--s-4); }
.page-head--light { background: var(--c-bg-soft); color: var(--c-text); border-bottom: 1px solid var(--c-line); }
.page-head--light::after { opacity: .35; }
.page-head--light .page-head__dek { color: var(--c-text-2); }
/* Breadcrumbs + URL hint */
.crumbs { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-xs); color: var(--c-text-3); padding: var(--s-4) 0; flex-wrap: wrap; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crumbs a:hover { color: var(--c-text); }
.page-head .crumbs { color: var(--c-ink-text-3); padding: 0 0 var(--s-5); }
.page-head .crumbs a:hover { color: #fff; }
.url-hint { font-family: var(--f-mono); font-size: var(--fs-2xs); padding: 3px 8px; border: 1px dashed var(--c-line-2); border-radius: var(--r-pill); color: var(--c-text-3); }
.page-head .url-hint { border-color: var(--c-ink-line); color: var(--c-ink-text-3); }
/* 4. TYPOGRAPHY =========================================================== */
.kicker { font-family: var(--f-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3); }
.section--dark .kicker, .page-head .kicker { color: var(--c-ink-text-3); }
.kicker--brand { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.dek { color: var(--c-text-2); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-xs); color: var(--c-text-3); }
.meta > * + *::before { content: "·"; margin-right: 10px; opacity: .6; }
.meta--plain > * + *::before { content: none; }
.section--dark .meta, .page-head .meta { color: var(--c-ink-text-3); }
.text-grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.link { color: var(--c-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mono { font-family: var(--f-mono); }
/* Content type labels */
.type { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tc, var(--c-text-2)); }
.type::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.type--news { --tc: var(--t-news); }
.type--review { --tc: var(--t-review); }
.type--best { --tc: var(--t-best); }
.type--compare { --tc: var(--t-compare); }
.type--guide { --tc: var(--t-guide); }
.type--tools { --tc: var(--t-tools); }
.type--community { --tc: var(--t-community); }
.type--deals { --tc: var(--t-deals); }
.type--sponsored { --tc: var(--t-sponsored); }
.type--opinion { --tc: var(--t-opinion); }
.section--dark .type, .page-head .type, .on-dark .type { filter: brightness(1.5) saturate(1.1); }
.type__cat { color: var(--c-text-3); font-weight: 500; letter-spacing: .06em; }
.type__cat::before { content: "/ "; opacity: .6; }
/* 5. BUTTONS, BADGES, FORMS =============================================== */
.btn { --bh: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--bh); padding: 0 18px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm); line-height: 1; white-space: nowrap; border: 1px solid transparent; transition: transform var(--dur) var(--ease), background var(--dur), border-color var(--dur), box-shadow var(--dur), color var(--dur); }
.btn:active { transform: translateY(1px); }
.btn--sm { --bh: 36px; padding: 0 14px; font-size: var(--fs-xs); }
.btn--lg { --bh: 52px; padding: 0 26px; font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn--primary { background: var(--c-ink); color: #fff; }
.btn--primary:hover { background: #2a2536; }
.btn--brand { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-glow); }
.btn--brand:hover { filter: brightness(1.08); }
.btn--outline { border-color: var(--c-line-2); color: var(--c-text); background: #fff; }
.btn--outline:hover { border-color: var(--c-text); }
.btn--ghost { color: var(--c-text); }
.btn--ghost:hover { background: var(--c-bg-sunk); }
.btn--light { background: #fff; color: var(--c-ink); }
.btn--light:hover { background: #eeeaf6; }
.btn--ghost-dark { color: var(--c-ink-text); border-color: var(--c-ink-line); }
.btn--ghost-dark:hover { border-color: var(--c-ink-text-3); background: var(--c-ink-3); }
.btn--deal { background: var(--t-deals); color: #fff; }
.btn--deal:hover { background: #c63a15; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--r-pill); color: inherit; transition: background var(--dur); }
.icon-btn:hover { background: rgba(127,120,150,.16); }
.icon-btn[aria-pressed="true"] { color: var(--c-accent); }
.icon-btn[aria-pressed="true"] .ico { fill: currentColor; }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--c-bg-sunk); color: var(--c-text-2); white-space: nowrap; }
.badge--free { background: #e5f6ee; color: #0b6d4a; }
.badge--pro { background: var(--grad-brand); color: #fff; }
.badge--plus { background: #f3e8ff; color: #6a1fe0; }
.badge--choice { background: var(--c-ink); color: #fff; }
.badge--choice::before { content: "★"; color: #ff5fb4; font-size: 11px; }
.badge--new { background: #e6efff; color: #1d4ed8; }
.badge--hot { background: #fff0e9; color: #c2410c; }
.badge--sponsored { background: transparent; border: 1px solid var(--c-line-2); color: var(--c-text-3); }
.badge--demo { background: #fff7e0; color: #8a5a00; }
.section--dark .badge--free { background: rgba(15,138,95,.2); color: #6ee7b7; }
.section--dark .badge--sponsored { border-color: var(--c-ink-line); color: var(--c-ink-text-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: #fff; font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-2); white-space: nowrap; transition: all var(--dur); }
.chip:hover { border-color: var(--c-text-3); color: var(--c-text); }
.chip.is-active, .chip[aria-selected="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.chip__count { font-family: var(--f-mono); font-size: var(--fs-2xs); opacity: .6; }
.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
.chips--scroll::-webkit-scrollbar { display: none; }
.on-dark .chip, .section--dark .chip, .page-head .chip { background: transparent; border-color: var(--c-ink-line); color: var(--c-ink-text-2); }
.on-dark .chip:hover, .section--dark .chip:hover, .page-head .chip:hover { color: #fff; border-color: var(--c-ink-text-3); }
.page-head .chip.is-active { background: #fff; color: var(--c-ink); border-color: #fff; }
/* Forms */
.field { display: grid; gap: 6px; }
.field label, .label { font-size: var(--fs-sm); font-weight: 600; }
.input, .select, .textarea { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--c-line-2); background: #fff; border-radius: var(--r-md); font-size: var(--fs-md); transition: border-color var(--dur), box-shadow var(--dur); }
.textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767186' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-purple); box-shadow: 0 0 0 3px rgba(122,44,245,.15); }
.check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--c-text-2); cursor: pointer; padding: 5px 0; }
.check input { width: 17px; height: 17px; accent-color: var(--c-purple); margin: 0; }
.check__count { margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--c-text-3); }
.form-note { font-size: var(--fs-xs); color: var(--c-text-3); }
.form-success { display: none; align-items: center; gap: 8px; font-weight: 600; color: var(--c-success); font-size: var(--fs-sm); }
.is-sent .form-success { display: flex; }
.is-sent .form-hide { display: none; }
/* Search bar (universal) */
.searchbar { position: relative; display: flex; align-items: center; background: #fff; border-radius: var(--r-pill); border: 1px solid var(--c-line-2); box-shadow: var(--sh-2); padding: 6px 6px 6px 20px; gap: 10px; }
.searchbar .ico { color: var(--c-text-3); }
.searchbar input { flex: 1; border: 0; outline: 0; background: transparent; height: 46px; font-size: var(--fs-md); min-width: 0; color: var(--c-text); }
.searchbar input::placeholder { color: var(--c-text-3); }
.searchbar:focus-within { border-color: var(--c-purple); box-shadow: 0 0 0 4px rgba(122,44,245,.18), var(--sh-2); }
.searchbar kbd { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--c-text-3); border: 1px solid var(--c-line); border-radius: 5px; padding: 2px 6px; }
/* 6. HEADER / NAV ========================================================= */
.proto-bar { background: #1b1440; color: #d9cffb; font-size: var(--fs-xs); }
.proto-bar .container { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px; text-align: center; }
.proto-bar strong { font-family: var(--f-mono); letter-spacing: .1em; font-size: var(--fs-2xs); background: rgba(255,255,255,.12); padding: 2px 7px; border-radius: 4px; color: #fff; }
.proto-bar button { color: #b6a8ea; padding: 4px; margin-left: 4px; }
.proto-bar.is-hidden { display: none; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(10,9,16,.97); color: var(--c-ink-text); border-bottom: 1px solid var(--c-ink-line); }
@supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(10,9,16,.88); backdrop-filter: saturate(140%) blur(12px); } }
.header__inner { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { width: 38px; height: auto; }
.brand__word { display: inline-block; font-family: var(--f-display); font-weight: 800; font-size: 1.28rem; letter-spacing: -.01em; color: #fff; line-height: 1; }
.brand__word span:not(.brand__tag) { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand__tag { display: block; background: none; -webkit-text-fill-color: currentColor; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .32em; color: var(--c-ink-text-3); margin-top: 4px; font-weight: 500; }
.nav { flex: 1; }
.nav__list { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; height: var(--header-h); padding: 0 11px; font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink-text-2); transition: color var(--dur); position: relative; }
.nav__link:hover, .nav__item:focus-within > .nav__link, .nav__item.is-open > .nav__link { color: #fff; }
.nav__link.is-current { color: #fff; }
.nav__link.is-current::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 2px; background: var(--grad-brand); border-radius: 2px 2px 0 0; }
.nav__toggle { color: var(--c-ink-text-3); margin-left: -8px; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 4px; }
.nav__toggle .ico { width: 14px; height: 14px; transition: transform var(--dur); }
.nav__item.is-open .nav__toggle .ico { transform: rotate(180deg); }
/* Mega menu */
.mega { position: absolute; top: calc(100% - 6px); left: -12px; min-width: 560px; background: #fff; color: var(--c-text); border-radius: var(--r-lg); box-shadow: var(--sh-3); border: 1px solid var(--c-line); padding: var(--s-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur), transform var(--dur), visibility 0s linear var(--dur); }
.mega--sm { min-width: 300px; grid-template-columns: 1fr; }
.mega--right { left: auto; right: -12px; }
.nav__item:hover > .mega, .nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__title { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: var(--s-2); padding: 0 10px; }
.mega__links { list-style: none; display: grid; gap: 1px; }
.mega__links a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; }
.mega__links a:hover { background: var(--c-bg-soft); }
.mega__links small { display: block; font-size: var(--fs-xs); color: var(--c-text-3); font-weight: 400; }
.mega__ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-bg-sunk); color: var(--c-text-2); flex: none; }
.mega__feature { background: var(--c-bg-soft); border-radius: var(--r-md); padding: var(--s-3); display: grid; gap: var(--s-3); align-content: start; }
.mega__feature h4 { font-size: var(--fs-md); line-height: var(--lh-snug); }
.mega__feature .thumb { aspect-ratio: 16/9; border-radius: var(--r-sm); }
.mega__foot { grid-column: 1 / -1; border-top: 1px solid var(--c-line); padding-top: var(--s-3); display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); }
.header__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.header__actions .icon-btn { color: var(--c-ink-text-2); }
.header__actions .icon-btn:hover { color: #fff; background: var(--c-ink-3); }
.menu-btn { display: none !important; }
/* Trending sub-row */
.subnav { border-top: 1px solid var(--c-ink-line); }
.subnav__inner { display: flex; align-items: center; gap: var(--s-4); height: 38px; font-size: var(--fs-xs); overflow: hidden; }
.subnav__label { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: .14em; color: var(--c-pink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.subnav__list { display: flex; gap: var(--s-5); list-style: none; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list a { color: var(--c-ink-text-2); }
.subnav__list a:hover { color: #fff; }
/* Drawer (mobile nav) */
.drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(5,4,10,.6); opacity: 0; transition: opacity .25s; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--c-ink); color: var(--c-ink-text); transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-4) 0 var(--s-5); height: var(--header-h); border-bottom: 1px solid var(--c-ink-line); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-5); }
.drawer__search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: var(--r-md); background: var(--c-ink-3); color: var(--c-ink-text-3); margin-bottom: var(--s-4); width: 100%; text-align: left; font-size: var(--fs-sm); }
.drawer details { border-bottom: 1px solid var(--c-ink-line); }
.drawer summary, .drawer__link { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-lg); cursor: pointer; }
.drawer__link { border-bottom: 1px solid var(--c-ink-line); }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary .ico { transition: transform var(--dur); color: var(--c-ink-text-3); }
.drawer details[open] summary .ico { transform: rotate(180deg); }
.drawer details ul { list-style: none; padding: 0 0 var(--s-4); display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.drawer details li a { display: block; padding: 8px 0; color: var(--c-ink-text-2); font-size: var(--fs-sm); }
.drawer__foot { padding: var(--s-5); border-top: 1px solid var(--c-ink-line); display: grid; gap: var(--s-3); }
/* Search overlay */
.search-ov { position: fixed; inset: 0; z-index: 160; display: none; }
.search-ov.is-open { display: block; }
.search-ov__scrim { position: absolute; inset: 0; background: rgba(5,4,10,.66); }
.search-ov__panel { position: relative; max-width: 760px; margin: 9vh auto 0; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden; animation: pop .2s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.search-ov__form { display: flex; align-items: center; gap: 12px; padding: 0 var(--s-5); border-bottom: 1px solid var(--c-line); }
.search-ov__form input { flex: 1; height: 68px; border: 0; outline: 0; font-size: var(--fs-xl); font-family: var(--f-display); min-width: 0; }
.search-ov__body { padding: var(--s-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); max-height: 60vh; overflow-y: auto; }
.search-ov__group h4 { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; margin-bottom: var(--s-3); }
.search-ov__group ul { list-style: none; display: grid; gap: 2px; }
.search-ov__group a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.search-ov__group a:hover { background: var(--c-bg-soft); }
.search-ov__foot { padding: 12px var(--s-5); background: var(--c-bg-soft); font-size: var(--fs-xs); color: var(--c-text-3); display: flex; gap: var(--s-5); }
/* 7. CARDS & EDITORIAL ==================================================== */
/* Thumbnails — abstract editorial art (replace with featured images in WP) */
.thumb { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 16/10; background: var(--c-ink-3); display: grid; place-items: center; color: rgba(255,255,255,.88); isolation: isolate; }
.thumb::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.thumb .ico { width: 30%; height: auto; max-width: 96px; stroke-width: 1; opacity: .9; transition: transform .4s var(--ease); }
.thumb__tag { position: absolute; left: 12px; top: 12px; }
.thumb--a { background: radial-gradient(120% 90% at 85% 10%, #8a2be2 0%, transparent 55%), radial-gradient(90% 90% at 10% 100%, #ff2e9a 0%, transparent 55%), #14101f; }
.thumb--b { background: radial-gradient(100% 100% at 100% 100%, #3b1d8f 0%, transparent 60%), linear-gradient(160deg, #1a1726, #0c0b12); }
.thumb--c { background: linear-gradient(135deg, #f1eef7, #dcd6ea); color: #2a2240; }
.thumb--c::before { background-image: linear-gradient(rgba(42,34,64,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(42,34,64,.07) 1px, transparent 1px); }
.thumb--d { background: radial-gradient(80% 80% at 20% 20%, #d81b8f 0%, transparent 60%), linear-gradient(200deg, #2a0f3d, #0f0b17); }
.thumb--e { background: linear-gradient(160deg, #1f1d2b 0%, #101018 100%); }
.thumb--e .ico { color: #ff5fb4; }
.thumb--f { background: radial-gradient(90% 90% at 70% 30%, #5b2fd6 0%, transparent 60%), #0f0d18; }
.thumb--g { background: linear-gradient(135deg, #fde7f3, #ece2ff); color: #5b1f8a; }
.thumb--g::before { background-image: linear-gradient(rgba(91,31,138,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(91,31,138,.08) 1px, transparent 1px); }
.thumb--h { background: linear-gradient(180deg, #232031, #15131d); }
.thumb--h .ico { color: #a78bfa; }
a:hover .thumb .ico, .card:hover .thumb .ico { transform: scale(1.06); }
/* Article card */
.a-card { display: grid; gap: var(--s-3); align-content: start; position: relative; }
.a-card__title { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: -.015em; }
.a-card__title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s var(--ease); }
.a-card:hover .a-card__title a { background-size: 100% 1px; }
.a-card__title a::after { content: ""; position: absolute; inset: 0; }
.a-card__dek { color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.55; }
.a-card .meta { position: relative; z-index: 1; }
.a-card--lead .a-card__title { font-size: var(--fs-4xl); letter-spacing: -.03em; line-height: 1.06; }
.a-card--lead .a-card__dek { font-size: var(--fs-lg); }
.a-card--lead .thumb { aspect-ratio: 16/9; border-radius: var(--r-lg); }
.a-card--lg .a-card__title { font-size: var(--fs-2xl); }
.a-card--row { grid-template-columns: 180px 1fr; gap: var(--s-5); align-items: start; }
.a-card--row .thumb { aspect-ratio: 4/3; }
.a-card--compact { grid-template-columns: 1fr 92px; gap: var(--s-4); }
.a-card--compact .thumb { aspect-ratio: 1; border-radius: var(--r-sm); grid-row: 1 / span 3; grid-column: 2; }
.a-card--compact .thumb .ico { width: 40%; }
.a-card--compact .a-card__title { font-size: var(--fs-md); }
.section--dark .a-card__dek { color: var(--c-ink-text-2); }
/* Top stories grid */
.top-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) 300px; gap: var(--s-8); }
.top-grid__secondary { display: grid; gap: var(--s-7); align-content: start; }
.trending { border-left: 1px solid var(--c-line); padding-left: var(--s-7); }
.trending__head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-4); }
.trending__head .ico { color: var(--c-pink); }
.trending ol { list-style: none; counter-reset: t; display: grid; }
.trending li { counter-increment: t; display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: var(--s-4) 0; border-top: 1px solid var(--c-line); }
.trending li:first-child { border-top: 0; padding-top: 0; }
.trending li::before { content: counter(t, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--c-line-2); }
.trending h3 { font-size: var(--fs-md); line-height: 1.35; font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; margin: 4px 0 6px; }
.trending h3 a:hover { color: var(--c-accent); }
/* River (news list) */
.river { display: grid; }
.river__item { display: grid; grid-template-columns: 76px 1fr 200px; gap: var(--s-5); padding: var(--s-6) 0; border-top: 1px solid var(--c-line); align-items: start; position: relative; }
.river__time { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-3); padding-top: 3px; }
.river__item h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); margin: 6px 0 8px; }
.river__item h3 a::after { content: ""; position: absolute; inset: 0; }
.river__item:hover h3 { color: var(--c-accent); }
.river__item .thumb { aspect-ratio: 16/10; }
/* Generic card */
.card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-6); position: relative; transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.card--hover:hover { border-color: var(--c-line-2); box-shadow: var(--sh-2); }
.card--soft { background: var(--c-bg-soft); border-color: transparent; }
.card--dark { background: var(--c-ink-2); border-color: var(--c-ink-line); color: var(--c-ink-text); }
.card__title { font-size: var(--fs-lg); line-height: var(--lh-snug); }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card > * + * { margin-top: var(--s-3); }
/* Callout / notice */
.notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--c-bg-soft); border: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.55; }
.notice .ico { color: var(--c-text-3); margin-top: 1px; }
.notice strong { color: var(--c-text); }
.notice--disclosure { background: #fbf9fe; border-style: dashed; }
.notice--demo { background: #fffaeb; border-color: #f4e2b0; color: #6b5413; }
.notice--demo .ico { color: #b7791f; }
.section--dark .notice { background: var(--c-ink-2); border-color: var(--c-ink-line); color: var(--c-ink-text-2); }
/* Author */
.author { display: flex; align-items: center; gap: var(--s-3); }
.author__name { font-weight: 600; font-size: var(--fs-sm); display: block; }
.author__role { font-size: var(--fs-xs); color: var(--c-text-3); display: block; }
.avatar { --sz: 36px; width: var(--sz); height: var(--sz); border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: calc(var(--sz) * .38); color: #fff; background: var(--av, #6b5ca5); letter-spacing: -.02em; position: relative; }
.avatar--sm { --sz: 28px; }
.avatar--lg { --sz: 56px; }
.avatar--xl { --sz: 88px; }
.avatar--ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-pink); }
.author-box { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-bg-soft); }
.author-box h4 { font-size: var(--fs-lg); }
.author-box p { color: var(--c-text-2); font-size: var(--fs-sm); margin-top: 6px; }
/* 8. TOOLS & DIRECTORY ==================================================== */
.logo-tile { --lt: 44px; width: var(--lt); height: var(--lt); border-radius: calc(var(--lt) * .26); display: grid; place-items: center; flex: none; font-family: var(--f-display); font-weight: 800; font-size: calc(var(--lt) * .36); color: #fff; background: var(--lc, #3b3550); letter-spacing: -.03em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.logo-tile--sm { --lt: 32px; }
.logo-tile--lg { --lt: 64px; }
.logo-tile--xl { --lt: 88px; }
.tool-card { display: flex; flex-direction: column; gap: var(--s-3); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-5); position: relative; transition: border-color var(--dur), box-shadow var(--dur); }
.tool-card:hover { border-color: var(--c-line-2); box-shadow: var(--sh-2); }
.tool-card__top { display: flex; gap: var(--s-3); align-items: flex-start; }
.tool-card__name { font-size: var(--fs-md); font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; }
.tool-card__cat { font-size: var(--fs-xs); color: var(--c-text-3); }
.tool-card__desc { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.5; flex: 1; }
.tool-card__facts { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-text-2); padding-top: var(--s-3); border-top: 1px dashed var(--c-line); }
.tool-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.tool-card__save { position: absolute; top: 12px; right: 10px; color: var(--c-text-3); width: 34px; height: 34px; }
.tool-card--sponsored { background: linear-gradient(#fff,#fff) padding-box, var(--grad-brand) border-box; border: 1px solid transparent; }
.tool-card__spons { position: absolute; top: -10px; left: 16px; background: #fff; }
.price-tag { font-weight: 600; color: var(--c-text); white-space: nowrap; }
.tool-card__cat .badge { margin-left: 6px; height: 19px; font-size: 10px; padding: 0 7px; }
/* Directory */
.dir { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: var(--s-8); align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; padding-right: 6px; }
.filters__group { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); }
.filters__group:first-child { padding-top: 0; }
.filters__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: var(--s-2); }
.filters__head { display: none; }
.dir__bar { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.dir__bar .searchbar { flex: 1; min-width: 240px; box-shadow: none; padding: 2px 2px 2px 16px; }
.dir__bar .searchbar input { height: 42px; }
.dir__count { font-size: var(--fs-sm); color: var(--c-text-3); margin-bottom: var(--s-4); }
.dir__count strong { color: var(--c-text); }
.dir-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); }
.dir-grid.is-list { grid-template-columns: 1fr; }
.dir-grid.is-list .tool-card { flex-direction: row; align-items: center; flex-wrap: wrap; }
.dir-grid.is-list .tool-card__desc { flex: 1 1 260px; }
.dir-grid.is-list .tool-card__facts { border: 0; padding: 0; gap: var(--s-4); }
.dir-empty { display: none; text-align: center; padding: var(--s-10) var(--s-5); color: var(--c-text-3); border: 1px dashed var(--c-line-2); border-radius: var(--r-lg); }
.dir-empty.is-shown { display: block; }
.seg { display: inline-flex; border: 1px solid var(--c-line-2); border-radius: var(--r-pill); padding: 3px; }
.seg button { height: 34px; width: 38px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--c-text-3); }
.seg button[aria-pressed="true"] { background: var(--c-ink); color: #fff; }
.filter-toggle { display: none !important; }
/* Category tile */
.cat-tile { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--c-line); background: #fff; transition: all var(--dur); font-weight: 600; font-size: var(--fs-sm); }
.cat-tile:hover { border-color: var(--c-text); }
.cat-tile .mega__ico { background: var(--c-bg-soft); }
.cat-tile small { display: block; font-weight: 400; color: var(--c-text-3); font-size: var(--fs-xs); }
/* DGTULS product tools (ecosystem) */
.dgt-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-4); }
.dgt-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-lg); background: var(--c-ink-2); border: 1px solid var(--c-ink-line); color: var(--c-ink-text); transition: border-color var(--dur), transform var(--dur), background var(--dur); min-height: 210px; }
.dgt-card:hover { border-color: #4a3c6e; background: var(--c-ink-3); transform: translateY(-2px); }
.dgt-card__ico { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--c-ink-4); color: #fff; }
.dgt-card--pro .dgt-card__ico { background: var(--grad-brand); }
.dgt-card h3 { font-size: var(--fs-lg); }
.dgt-card p { font-size: var(--fs-sm); color: var(--c-ink-text-2); flex: 1; line-height: 1.5; }
.dgt-card .badge { position: absolute; top: var(--s-5); right: var(--s-5); }
.dgt-card__go { font-size: var(--fs-sm); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.dgt-card__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dgt-card--light { background: #fff; border-color: var(--c-line); color: var(--c-text); }
.dgt-card--light:hover { background: #fff; border-color: var(--c-line-2); box-shadow: var(--sh-2); }
.dgt-card--light p { color: var(--c-text-2); }
.dgt-card--light .dgt-card__ico { background: var(--c-bg-sunk); color: var(--c-text); }
.dgt-card--light.dgt-card--pro .dgt-card__ico { background: var(--grad-brand); color: #fff; }
/* Mini app (calculator / finder) */
.app-panel { background: #fff; color: var(--c-text); border-radius: var(--r-xl); border: 1px solid var(--c-line); box-shadow: var(--sh-3); overflow: hidden; }
.app-panel__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--c-line); background: var(--c-bg-soft); }
.app-panel__body { display: grid; grid-template-columns: 1.3fr 1fr; }
.app-panel__inputs { padding: var(--s-6); display: grid; gap: var(--s-2); }
.app-panel__out { padding: var(--s-6); background: var(--c-ink); color: var(--c-ink-text); display: flex; flex-direction: column; gap: var(--s-4); }
.sub-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--c-line); cursor: pointer; transition: all var(--dur); }
.sub-row:hover { border-color: var(--c-line-2); }
.sub-row:has(input:checked) { border-color: var(--c-purple); background: #faf6ff; }
.sub-row input { accent-color: var(--c-purple); width: 17px; height: 17px; margin: 0; }
.sub-row__name { font-weight: 600; font-size: var(--fs-sm); }
.sub-row__name small { display: block; color: var(--c-text-3); font-weight: 400; font-size: var(--fs-xs); }
.sub-row__price { font-family: var(--f-mono); font-size: var(--fs-sm); }
.big-num { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-5xl); letter-spacing: -.04em; line-height: 1; }
/* 9. REVIEWS & RATINGS ==================================================== */
.stars { display: inline-flex; align-items: center; gap: 1px; color: #f0a020; }
.stars .ico { width: 14px; height: 14px; }
.stars__off { color: var(--c-line-2); }
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; }
.rating__num { font-family: var(--f-mono); font-weight: 700; }
.score { --sz: 64px; --p: 90; position: relative; width: var(--sz); height: var(--sz); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 210deg, #ff2e9a, #b026f0, #7a2cf5 calc(var(--p) * 1%), var(--c-bg-sunk) 0); flex: none; }
.score::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.score__val { position: relative; font-family: var(--f-display); font-weight: 800; font-size: calc(var(--sz) * .32); letter-spacing: -.03em; line-height: 1; }
.score__max { display: block; text-align: center; font-family: var(--f-mono); font-size: 9px; color: var(--c-text-3); font-weight: 500; letter-spacing: .05em; margin-top: 2px; }
.score--sm { --sz: 48px; }
.score--sm::before { inset: 4px; }
.score--lg { --sz: 128px; }
.score--lg::before { inset: 9px; }
.score--dark::before { background: var(--c-ink-2); }
.score--dark { background: conic-gradient(from 210deg, #ff2e9a, #b026f0, #7a2cf5 calc(var(--p) * 1%), var(--c-ink-4) 0); }
.score--dark .score__max { color: var(--c-ink-text-3); }
.review-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; position: relative; transition: box-shadow var(--dur), border-color var(--dur); }
.review-card:hover { box-shadow: var(--sh-2); border-color: var(--c-line-2); }
.review-card__head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); border-bottom: 1px solid var(--c-line); }
.review-card__head h3 { font-size: var(--fs-lg); }
.review-card__body { padding: var(--s-5); display: grid; gap: var(--s-4); flex: 1; align-content: start; }
.review-card__verdict { font-family: var(--f-read); font-size: 1.06rem; line-height: 1.5; color: var(--c-text); }
.review-card__foot { padding: 0 var(--s-5) var(--s-5); display: flex; gap: var(--s-2); }
.review-card__choice { justify-self: start; }
.review-card .pc { grid-template-columns: 1fr; gap: var(--s-3); }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.pc__col h4 { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-2); }
.pc__col ul { list-style: none; display: grid; gap: 6px; }
.pc__col li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-text-2); }
.pc__col li .ico { width: 16px; height: 16px; margin-top: 2px; stroke-width: 2.2; }
.pc__pro h4, .pc__pro .ico { color: var(--c-success); }
.pc__con h4, .pc__con .ico { color: var(--c-danger); }
.pc--boxed { gap: 0; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.pc--boxed .pc__col { padding: var(--s-5) var(--s-6); }
.pc--boxed .pc__pro { background: #f3fbf7; }
.pc--boxed .pc__con { background: #fdf5f6; }
.pc--boxed li { font-size: var(--fs-md); }
/* Sub-score bars */
.bars { display: grid; gap: var(--s-3); }
.bar { display: grid; grid-template-columns: 120px 1fr 36px; gap: var(--s-3); align-items: center; font-size: var(--fs-sm); }
.bar__track { height: 8px; background: var(--c-bg-sunk); border-radius: 99px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--grad-brand); border-radius: inherit; }
.bar__val { font-family: var(--f-mono); font-weight: 700; text-align: right; }
.on-dark .bar__track { background: var(--c-ink-4); }
.on-dark .bar { color: var(--c-ink-text-2); }
.on-dark .bar__val { color: #fff; }
/* Review hero */
.r-hero { background: var(--c-ink); color: var(--c-ink-text); padding: var(--s-8) 0 var(--s-9); }
.r-hero__grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--s-9); align-items: start; }
.r-hero h1 { font-size: var(--fs-5xl); margin: var(--s-3) 0 var(--s-4); }
.r-hero__dek { font-size: var(--fs-lg); color: var(--c-ink-text-2); max-width: 58ch; }
.r-panel { background: var(--c-ink-2); border: 1px solid var(--c-ink-line); border-radius: var(--r-xl); padding: var(--s-6); display: grid; gap: var(--s-5); }
.r-panel__top { display: flex; align-items: center; gap: var(--s-5); }
.r-panel__label { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: .14em; color: var(--c-ink-text-3); text-transform: uppercase; }
.verdict-box { border-radius: var(--r-lg); padding: var(--s-6); background: var(--c-bg-soft); border-left: 4px solid; border-image: var(--grad-brand) 1; }
.verdict-box p { font-family: var(--f-read); font-size: var(--fs-xl); line-height: 1.5; margin-top: var(--s-2); }
/* Sticky CTA box */
.cta-box { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-4); background: #fff; box-shadow: var(--sh-1); }
.cta-box__top { display: flex; gap: var(--s-3); align-items: center; }
.cta-box .form-note { text-align: center; }
/* Screens placeholder */
.shot { aspect-ratio: 16/10; border-radius: var(--r-md); background: #15131d; border: 1px solid var(--c-line); overflow: hidden; display: flex; flex-direction: column; }
.shot__bar { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #211e2c; flex: none; }
.shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: #3d3850; }
.shot__body { flex: 1; display: grid; grid-template-columns: 22% 1fr; gap: 8px; padding: 10px; }
.shot__side, .shot__main { border-radius: 4px; background: repeating-linear-gradient(180deg, #24212f 0 7px, transparent 7px 16px); }
.shot__main { background: repeating-linear-gradient(180deg, #2a2638 0 6px, transparent 6px 14px), linear-gradient(90deg, transparent 60%, rgba(176,38,240,.18)); }
.shot--light { background: #fbfafd; }
.shot--light .shot__bar { background: #ebe8f1; }
.shot--light .shot__side, .shot--light .shot__main { background: repeating-linear-gradient(180deg, #e5e1ee 0 7px, transparent 7px 16px); }
figure { margin: 0; }
figcaption { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: var(--s-2); }
/* 10. COMPARISONS ======================================================== */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); }
.vs__side { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.vs__side strong { font-family: var(--f-display); font-size: var(--fs-md); line-height: 1.25; }
.vs-card .vs__side strong { font-size: var(--fs-sm); }
.vs-card .vs { align-items: start; }
.vs-card .vs__badge { margin-top: 2px; }
.vs__badge { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-sm); background: var(--c-ink); color: #fff; position: relative; letter-spacing: -.02em; }
.vs__badge::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--grad-brand); z-index: -1; }
.vs__badge { isolation: isolate; z-index: 0; }
.vs-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5) var(--s-5); display: grid; gap: var(--s-4); position: relative; transition: all var(--dur); }
.vs-card:hover { border-color: var(--c-line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.vs-card h3 { font-size: var(--fs-md); text-align: center; }
.vs-card h3 a::after { content: ""; position: absolute; inset: 0; }
.vs-card .meta { justify-content: center; }
.vs-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-8); align-items: center; background: var(--c-ink); color: var(--c-ink-text); border-radius: var(--r-xl); padding: var(--s-8); position: relative; overflow: hidden; }
.vs-feature::before { content: ""; position: absolute; left: 50%; top: -50%; width: 80%; height: 200%; background: radial-gradient(closest-side, rgba(176,38,240,.25), transparent); pointer-events: none; }
.vs-feature > * { position: relative; }
.vs-feature h3 { font-size: var(--fs-3xl); margin: var(--s-3) 0; }
.vs-feature p { color: var(--c-ink-text-2); }
.vs-feature .vs { background: var(--c-ink-2); border: 1px solid var(--c-ink-line); border-radius: var(--r-lg); padding: var(--s-7) var(--s-5); }
.vs-feature .vs__side strong { font-size: var(--fs-lg); }
.vs-feature .vs__badge { width: 56px; height: 56px; font-size: var(--fs-lg); }
.vs-picker { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: var(--s-3); align-items: center; }
/* Compare page hero */
.cmp-hero { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-6); align-items: stretch; margin-top: var(--s-7); }
.cmp-hero__side { background: var(--c-ink-2); border: 1px solid var(--c-ink-line); border-radius: var(--r-xl); padding: var(--s-6); display: grid; gap: var(--s-4); align-content: start; }
.cmp-hero__side h2 { font-size: var(--fs-2xl); }
.cmp-hero__vs { display: grid; place-items: center; }
.cmp-hero__vs .vs__badge { width: 64px; height: 64px; font-size: var(--fs-xl); }
/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
.table th, .table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.table thead th { font-size: var(--fs-2xs); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-3); background: var(--c-bg-soft); font-weight: 600; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fcfbfe; }
.table td:first-child { font-weight: 600; }
.table .is-win { background: #f6f0ff; font-weight: 600; }
.table--compare td, .table--compare th { text-align: center; }
.table--compare td:first-child, .table--compare th:first-child { text-align: left; color: var(--c-text-2); font-weight: 500; }
.table--compare thead th { font-family: var(--f-display); font-size: var(--fs-md); text-transform: none; letter-spacing: -.01em; color: var(--c-text); }
.table .yes { color: var(--c-success); }
.table .no { color: var(--c-text-3); }
.sticky-col th:first-child, .sticky-col td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 var(--c-line); }
.sticky-col thead th:first-child { background: var(--c-bg-soft); }
.table-product { display: flex; align-items: center; gap: 10px; }
.rank-num { font-family: var(--f-mono); font-weight: 700; color: var(--c-text-3); font-size: var(--fs-xs); width: 18px; }
/* Persona recommendations */
.persona { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--c-line); background: #fff; }
.persona__who { display: flex; align-items: center; gap: var(--s-3); font-weight: 700; font-family: var(--f-display); }
.persona__pick { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; padding: 6px 10px 6px 6px; border-radius: var(--r-pill); background: var(--c-bg-soft); width: fit-content; }
.persona p { font-size: var(--fs-sm); color: var(--c-text-2); }
/* 11. DEALS & COMMERCE =================================================== */
.deal-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--dur), border-color var(--dur); }
.deal-card:hover { box-shadow: var(--sh-2); border-color: var(--c-line-2); }
.deal-card__media { position: relative; aspect-ratio: 4/3; background: var(--c-bg-soft); display: grid; place-items: center; color: var(--c-text-3); }
.deal-card__media .ico { width: 34%; height: auto; stroke-width: 1; }
.deal-card__off { position: absolute; top: 12px; left: 12px; background: var(--t-deals); color: #fff; font-weight: 800; font-size: var(--fs-xs); padding: 4px 8px; border-radius: var(--r-xs); font-family: var(--f-mono); }
.deal-card__body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-2); flex: 1; align-content: start; }
.deal-card__name { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-md); line-height: 1.35; letter-spacing: -.01em; }
.deal-card__prices { display: flex; align-items: baseline; gap: var(--s-2); }
.deal-card__now { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-xl); }
.deal-card__was { text-decoration: line-through; color: var(--c-text-3); font-size: var(--fs-sm); }
.deal-card__store { font-size: var(--fs-xs); color: var(--c-text-3); display: flex; justify-content: space-between; }
.deal-card .btn { margin-top: var(--s-2); }
.deal-card__expire { color: var(--t-deals); font-weight: 600; }
.deal-feature { display: grid; grid-template-columns: 1fr 1.2fr; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--c-line); background: #fff; }
.deal-feature__media { background: radial-gradient(circle at 50% 40%, #fff1ea, #f6f2fb); display: grid; place-items: center; color: #c2410c; min-height: 280px; }
.deal-feature__media .ico { width: 40%; height: auto; stroke-width: .9; }
.deal-feature__body { padding: var(--s-8); display: grid; gap: var(--s-4); align-content: center; }
.deal-feature h2 { font-size: var(--fs-3xl); }
/* Guide (Best) card */
.guide-card { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; position: relative; transition: all var(--dur); }
.guide-card:hover { border-color: var(--c-line-2); box-shadow: var(--sh-2); }
.guide-card .thumb { border-radius: 0; aspect-ratio: 21/9; }
.guide-card__body { padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.guide-card h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
.guide-card h3 a::after { content: ""; position: absolute; inset: 0; }
.guide-card__pick { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); padding: 10px; background: var(--c-bg-soft); border-radius: var(--r-md); }
.guide-card__pick b { font-weight: 600; }
.guide-card__pick span { color: var(--c-text-3); font-size: var(--fs-xs); }
/* Top-pick cards (best-single) */
.pick-card { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); position: relative; background: #fff; }
.pick-card__label { position: absolute; top: -11px; left: var(--s-5); font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; background: var(--c-ink); color: #fff; padding: 4px 9px; border-radius: var(--r-xs); }
.pick-card--top { border-color: transparent; background: linear-gradient(#fff,#fff) padding-box, var(--grad-brand) border-box; border: 1.5px solid transparent; }
.pick-card--top .pick-card__label { background: var(--grad-brand); }
/* Product block in best list */
.product-block { border-top: 1px solid var(--c-line); padding-top: var(--s-8); margin-top: var(--s-8); }
.product-block__head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: center; margin-bottom: var(--s-5); }
.product-block__rank { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-text-3); font-weight: 700; }
.product-block h2 { font-size: var(--fs-2xl); }
/* Affiliate CTA (in-content) */
.aff-cta { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: center; padding: var(--s-5); border-radius: var(--r-lg); background: var(--c-bg-soft); border: 1px solid var(--c-line); margin: var(--s-7) 0; }
.aff-cta h4 { font-size: var(--fs-md); font-family: var(--f-display); }
.aff-cta p { font-size: var(--fs-sm); color: var(--c-text-2); margin-top: 2px; font-family: var(--f-ui); }
.aff-cta__note { grid-column: 1 / -1; font-size: var(--fs-2xs); color: var(--c-text-3); font-family: var(--f-ui); margin-top: -6px; }
/* 12. ADS & SPONSORSHIP ================================================== */
.ad { position: relative; display: grid; place-items: center; text-align: center; margin: 0 auto; background: repeating-linear-gradient(135deg, var(--c-bg-soft) 0 10px, #f2f0f6 10px 20px); border: 1px solid var(--c-line); border-radius: var(--r-sm); color: var(--c-text-3); font-size: var(--fs-xs); overflow: hidden; }
.ad::before { content: "ADVERTISEMENT"; position: absolute; top: 6px; left: 0; right: 0; font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; color: var(--c-text-3); opacity: .8; }
.ad__inner { display: grid; gap: 2px; padding: 18px 12px 10px; }
.ad__size { font-family: var(--f-mono); font-weight: 700; color: var(--c-text-2); font-size: var(--fs-xs); }
.ad__chain { font-size: 10px; opacity: .85; }
.ad--leader { width: 100%; max-width: 970px; height: 120px; }
.ad--rect { width: 300px; max-width: 100%; height: 250px; }
.ad--tall { width: 300px; max-width: 100%; height: 600px; }
.ad--inline { width: 100%; height: 280px; max-width: 336px; }
.ad--native { width: 100%; height: 110px; }
.ad-band { padding: var(--s-6) 0; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.ad-band--soft { background: var(--c-bg-soft); border: 0; }
.ad-wrap { margin: var(--s-8) 0; display: grid; justify-items: center; }
.section--dark .ad { background: repeating-linear-gradient(135deg, var(--c-ink-2) 0 10px, #16131f 10px 20px); border-color: var(--c-ink-line); }
.sponsor-strip { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; font-size: var(--fs-sm); color: var(--c-text-2); }
.sponsor-strip .logo-tile { --lt: 34px; }
.sponsor-strip a { margin-left: auto; }
.section--dark .sponsor-strip { background: var(--c-ink-2); border-color: var(--c-ink-line); color: var(--c-ink-text-2); }
/* 13. FORUM ============================================================== */
.thread { display: grid; grid-template-columns: auto minmax(0,1fr) 70px 70px 120px; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-line); position: relative; transition: background var(--dur); }
.thread:hover { background: var(--c-bg-soft); }
.thread__title { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-md); line-height: 1.35; letter-spacing: -.01em; }
.thread__title a::after { content: ""; position: absolute; inset: 0; }
.thread__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 5px; font-size: var(--fs-xs); color: var(--c-text-3); }
.thread__stat { text-align: center; font-family: var(--f-mono); font-size: var(--fs-sm); font-weight: 600; }
.thread__stat small { display: block; font-family: var(--f-ui); font-weight: 400; font-size: var(--fs-2xs); color: var(--c-text-3); }
.thread__last { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--c-text-3); justify-content: flex-end; }
.thread-list { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.thread-list__head { display: grid; grid-template-columns: minmax(0,1fr) 70px 70px 120px; gap: var(--s-4); padding: 10px var(--s-5); background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-3); }
.thread-list__head span:not(:first-child) { text-align: center; }
.thread-list__head span:last-child { text-align: right; }
.thread-list .thread:last-child { border-bottom: 0; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); font-weight: 600; padding: 2px 8px; border-radius: var(--r-xs); background: var(--c-bg-sunk); color: var(--c-text-2); }
.tag i { width: 7px; height: 7px; border-radius: 2px; background: var(--tg, #888); }
.tag--solved { background: #e5f6ee; color: #0b6d4a; }
.tag--pinned { background: #f3e8ff; color: #6a1fe0; }
.forum-cats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-3); }
.forum-cat { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; position: relative; transition: border-color var(--dur); }
.forum-cat:hover { border-color: var(--c-text-3); }
.forum-cat__ico { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--tg) 12%, white); color: var(--tg); }
.forum-cat h3 { font-size: var(--fs-md); }
.forum-cat h3 a::after { content: ""; position: absolute; inset: 0; }
.forum-cat p { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 2px; }
.forum-cat__stats { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--c-text-3); margin-top: 6px; }
/* Topic page */
.post { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: var(--s-4); padding: var(--s-6) 0; border-top: 1px solid var(--c-line); }
.post__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-sm); }
.post__head strong { font-weight: 700; }
.post__head .meta { margin-left: auto; }
.post__body { margin-top: var(--s-3); font-size: var(--fs-md); line-height: 1.65; color: #26232f; }
.post__body p + p { margin-top: var(--s-3); }
.post__body code { font-family: var(--f-mono); font-size: .88em; background: var(--c-bg-sunk); padding: 1px 6px; border-radius: 4px; }
.post__body pre { font-family: var(--f-mono); font-size: var(--fs-sm); background: var(--c-ink); color: #e6e1f5; padding: var(--s-4); border-radius: var(--r-md); overflow-x: auto; margin-top: var(--s-3); }
.post__actions { display: flex; gap: var(--s-2); margin-top: var(--s-4); color: var(--c-text-3); font-size: var(--fs-sm); }
.post__actions button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); }
.post__actions button:hover { background: var(--c-bg-sunk); color: var(--c-text); }
.post__actions button[aria-pressed="true"] { color: var(--c-accent); }
.post--op .post__body { font-size: var(--fs-lg); }
.post--accepted { background: linear-gradient(90deg, #f3fbf7, transparent 60%); border-left: 3px solid var(--c-success); padding-left: var(--s-4); margin-left: calc(var(--s-4) * -1 - 3px); }
.user-flair { font-size: var(--fs-2xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); }
.user-flair--plus { background: #f3e8ff; color: #6a1fe0; }
.user-flair--pro { background: var(--grad-brand); color: #fff; }
.user-flair--staff { background: var(--c-ink); color: #fff; }
.reply-box { border: 1px solid var(--c-line-2); border-radius: var(--r-lg); overflow: hidden; }
.reply-box__tools { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--c-line); background: var(--c-bg-soft); }
.reply-box__tools button { width: 32px; height: 32px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--fs-sm); color: var(--c-text-2); }
.reply-box__tools button:hover { background: #fff; }
.reply-box textarea { border: 0; border-radius: 0; min-height: 130px; }
.reply-box__foot { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line); }
/* Community preview (home) */
.stat-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.stat { padding: var(--s-4); border-radius: var(--r-md); background: var(--c-bg-soft); }
.stat__num { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-2xl); letter-spacing: -.03em; }
.stat__label { font-size: var(--fs-xs); color: var(--c-text-3); }
.section--dark .stat, .on-dark .stat { background: var(--c-ink-2); border: 1px solid var(--c-ink-line); }
/* 14. PRICING / MEMBERSHIP ============================================== */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-7) var(--s-6); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--c-line); color: var(--c-text); position: relative; }
.plan__name { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .14em; font-weight: 700; }
.plan__price { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-4xl); letter-spacing: -.04em; line-height: 1; }
.plan__price small { font-size: var(--fs-md); font-weight: 500; color: var(--c-text-3); letter-spacing: 0; }
.plan__desc { font-size: var(--fs-sm); color: var(--c-text-2); }
.plan__list { list-style: none; display: grid; gap: 10px; flex: 1; }
.plan__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--fs-sm); }
.plan__list .ico { width: 18px; height: 18px; color: var(--c-success); stroke-width: 2.2; }
.plan--pro { background: var(--c-ink); color: var(--c-ink-text); border: 0; box-shadow: 0 30px 60px -20px rgba(122,44,245,.5); }
.plan--pro::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.plan--pro .plan__desc, .plan--pro .plan__price small { color: var(--c-ink-text-2); }
.plan--pro .plan__list .ico { color: #ff7ac2; }
.plan__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }
.section--dark .plan:not(.plan--pro) { background: var(--c-ink-2); border-color: var(--c-ink-line); color: var(--c-ink-text); }
.section--dark .plan:not(.plan--pro) .plan__desc, .section--dark .plan:not(.plan--pro) .plan__price small { color: var(--c-ink-text-2); }
.section--dark .plan--pro { background: #17122a; }
.free-note { text-align: center; margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--c-text-3); }
.section--dark .free-note { color: var(--c-ink-text-3); }
/* Newsletter */
.newsletter { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-8); align-items: center; padding: var(--s-9); border-radius: var(--r-xl); background: var(--c-ink); color: var(--c-ink-text); position: relative; overflow: hidden; }
.newsletter::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,46,154,.28), transparent); pointer-events: none; }
.newsletter > * { position: relative; z-index: 1; }
.newsletter__title { font-size: var(--fs-4xl); letter-spacing: -.03em; }
.newsletter__title span { display: block; font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: .3em; font-weight: 600; margin-bottom: var(--s-3); }
.newsletter__lede { color: var(--c-ink-text-2); font-size: var(--fs-lg); margin-top: var(--s-3); }
.newsletter__form { display: flex; gap: var(--s-2); background: #fff; padding: 6px; border-radius: var(--r-pill); }
.newsletter__form input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 16px; height: 46px; background: transparent; color: var(--c-text); }
.newsletter__proof { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--c-ink-text-3); }
.avatars { display: flex; }
.avatars .avatar { --sz: 28px; box-shadow: 0 0 0 2px var(--c-ink); }
.avatars .avatar + .avatar { margin-left: -8px; }
.newsletter__issue { margin-top: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-text-2); }
.newsletter__issue li { list-style: none; display: flex; gap: 10px; }
.newsletter__issue li::before { content: "→"; color: var(--c-pink); }
.nl-mini { padding: var(--s-6); border-radius: var(--r-lg); background: var(--c-ink); color: var(--c-ink-text); display: grid; gap: var(--s-3); }
.nl-mini h3 { font-size: var(--fs-xl); }
.nl-mini p { color: var(--c-ink-text-2); font-size: var(--fs-sm); }
.nl-mini .input { background: var(--c-ink-3); border-color: var(--c-ink-line); color: #fff; }
/* Home intro */
.intro { background: var(--c-ink); color: var(--c-ink-text); padding: var(--s-9) 0 var(--s-8); position: relative; overflow: hidden; }
.intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 85% 0%, rgba(122,44,245,.30), transparent 60%), radial-gradient(40% 80% at 100% 100%, rgba(255,46,154,.18), transparent 60%); pointer-events: none; }
.intro::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); pointer-events: none; }
.intro .container { position: relative; z-index: 1; }
.intro__grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: var(--s-10); align-items: center; }
.intro h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); letter-spacing: -.035em; line-height: 1.02; margin: var(--s-4) 0 var(--s-4); }
.intro__lede { font-size: var(--fs-lg); color: var(--c-ink-text-2); max-width: 54ch; }
.intro .searchbar { margin-top: var(--s-7); max-width: 640px; border: 0; }
.intro__popular { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--c-ink-text-3); }
.intro__popular a { padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--c-ink-line); color: var(--c-ink-text-2); }
.intro__popular a:hover { color: #fff; border-color: var(--c-ink-text-3); }
.today { background: rgba(255,255,255,.03); border: 1px solid var(--c-ink-line); border-radius: var(--r-xl); padding: var(--s-5); }
.today__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-ink-line); }
.today__item { display: grid; grid-template-columns: 1fr 64px; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-ink-line); position: relative; }
.today__item:last-child { border-bottom: 0; padding-bottom: 0; }
.today__item h3 { font-size: var(--fs-md); line-height: 1.35; font-weight: 600; margin-top: 5px; }
.today__item h3 a::after { content: ""; position: absolute; inset: 0; }
.today__item:hover h3 { color: #ffd1ea; }
.today__item .thumb { aspect-ratio: 1; border-radius: var(--r-sm); }
.today__item .thumb .ico { width: 44%; }
/* Content type legend strip */
.typestrip { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); }
.typestrip a { opacity: .9; }
.typestrip a:hover { opacity: 1; }
/* Steps / process */
.steps { counter-reset: s; display: grid; gap: var(--s-4); }
.step { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); }
.step::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: var(--fs-sm); background: var(--c-bg-sunk); }
.step h4 { font-size: var(--fs-md); margin-bottom: 4px; }
.step p { color: var(--c-text-2); font-size: var(--fs-sm); }
/* Priority chain (ads) */
.chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); position: relative; }
.chain__item { padding: var(--s-5); border-radius: var(--r-lg); background: var(--c-ink-2); border: 1px solid var(--c-ink-line); position: relative; }
.chain__item:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--c-pink); font-weight: 700; z-index: 1; }
.chain__n { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--c-pink); letter-spacing: .14em; }
.chain__item h4 { font-size: var(--fs-lg); margin: 6px 0; }
.chain__item p { color: var(--c-ink-text-2); font-size: var(--fs-sm); }
/* Metric tiles */
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
.metric { padding: var(--s-5); border-radius: var(--r-lg); background: var(--c-ink-2); border: 1px solid var(--c-ink-line); }
.metric__num { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-3xl); letter-spacing: -.03em; color: #fff; }
.metric__label { font-size: var(--fs-xs); color: var(--c-ink-text-3); margin-top: 4px; }
.metric .badge { margin-top: var(--s-3); }
/* FAQ */
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform var(--dur); color: var(--c-text-3); flex: none; }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--s-5); color: var(--c-text-2); max-width: 70ch; }
/* Tabs */
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--c-line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] { position: relative; padding: var(--s-3) var(--s-4); font-weight: 600; font-size: var(--fs-sm); color: var(--c-text-3); white-space: nowrap; }
.tabs [role="tab"]:hover { color: var(--c-text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--c-text); }
.tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: var(--s-4); right: var(--s-4); bottom: -1px; height: 2px; background: var(--grad-brand); }
[role="tabpanel"][hidden] { display: none; }
/* Pagination */
.pager { display: flex; justify-content: center; gap: 6px; margin-top: var(--s-8); }
.pager a, .pager span { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--c-line); font-size: var(--fs-sm); font-weight: 600; padding: 0 12px; }
.pager .is-current { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
/* Search results */
.result { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--c-line); position: relative; }
.result h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 6px 0; }
.result h3 a::after { content: ""; position: absolute; inset: 0; }
.result:hover h3 { color: var(--c-accent); }
.result p { font-size: var(--fs-sm); color: var(--c-text-2); }
.result__url { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--c-text-3); margin-top: 6px; }
.result mark { background: #fbe3f2; color: inherit; padding: 0 2px; border-radius: 2px; }
.result.is-hidden { display: none; }
.result--tool { background: var(--c-bg-soft); border-radius: var(--r-lg); padding: var(--s-5); border: 1px solid var(--c-line); margin-bottom: var(--s-4); grid-template-columns: auto 1fr auto; align-items: center; }
/* 15. ARTICLE / LONG-FORM =============================================== */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--grad-brand); z-index: 120; }
.art-head { padding-top: var(--s-7); padding-bottom: var(--s-7); }
.art-head__inner { max-width: 860px; }
.art-head h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing: -.035em; line-height: 1.06; margin: var(--s-4) 0; }
.art-head__dek { font-family: var(--f-read); font-size: 1.4rem; line-height: 1.45; color: var(--c-text-2); max-width: 46ch; }
.art-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.art-byline .meta { margin-top: 0; }
.share { display: flex; flex: none; gap: 4px; color: var(--c-text-2); }
.share .icon-btn { border: 1px solid var(--c-line); width: 38px; height: 38px; font-size: var(--fs-xs); font-weight: 700; }
.art-hero { margin-bottom: var(--s-8); }
.art-hero .thumb { aspect-ratio: 21/9; border-radius: var(--r-lg); }
.art-layout { display: grid; grid-template-columns: 220px minmax(0, var(--w-read)) 300px; gap: var(--s-8); justify-content: space-between; align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); font-size: var(--fs-sm); }
.toc ol { list-style: none; display: grid; gap: 2px; margin-top: var(--s-3); border-left: 1px solid var(--c-line); }
.toc a { display: block; padding: 6px 0 6px 14px; color: var(--c-text-3); line-height: 1.35; margin-left: -1px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--c-text); }
.toc a.is-active { color: var(--c-text); border-color: var(--c-pink); font-weight: 600; }
.toc__mobile { display: none; }
.prose { font-family: var(--f-read); font-size: 1.22rem; line-height: var(--lh-read); color: #1e1b26; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-family: var(--f-display); font-size: var(--fs-2xl); letter-spacing: -.025em; margin-top: 2.1em; line-height: 1.2; }
.prose h3 { font-family: var(--f-display); font-size: var(--fs-xl); margin-top: 1.8em; }
.prose a:not(.btn) { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose strong { font-weight: 650; }
.prose blockquote { margin: 1.8em 0; padding: 0 0 0 var(--s-6); border-left: 3px solid; border-image: var(--grad-brand) 1; font-family: var(--f-display); font-size: var(--fs-2xl); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; color: var(--c-text); }
.prose blockquote cite { display: block; margin-top: var(--s-3); font-family: var(--f-ui); font-size: var(--fs-sm); font-style: normal; color: var(--c-text-3); font-weight: 500; letter-spacing: 0; }
.prose figure figcaption { font-family: var(--f-ui); }
.prose .table-wrap, .prose .pc, .prose .notice, .prose .aff-cta, .prose .product-inline, .prose .ad-wrap { font-family: var(--f-ui); font-size: var(--fs-md); line-height: var(--lh-body); }
.prose .table { font-size: var(--fs-sm); }
.prose > p:first-of-type::first-letter { font-family: var(--f-display); font-weight: 800; float: left; font-size: 3.6em; line-height: .9; margin: .06em .12em 0 0; color: var(--c-text); }
.key-takeaways { background: var(--c-bg-soft); border-radius: var(--r-lg); padding: var(--s-6); font-family: var(--f-ui); font-size: var(--fs-md); }
.key-takeaways h4 { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: var(--s-3); }
.key-takeaways ul { padding-left: 1.1em; display: grid; gap: 6px; }
.product-inline { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.product-inline h4 { font-family: var(--f-display); font-size: var(--fs-lg); }
.sources { font-family: var(--f-ui); font-size: var(--fs-sm); color: var(--c-text-2); border-top: 1px solid var(--c-line); padding-top: var(--s-5); }
.sources ol { padding-left: 1.2em; display: grid; gap: 4px; margin-top: var(--s-2); }
.update-log { font-family: var(--f-ui); font-size: var(--fs-sm); color: var(--c-text-2); background: var(--c-bg-soft); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); }
/* 16. ACCOUNT =========================================================== */
.acct { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: var(--s-8); align-items: start; padding: var(--s-8) 0 var(--s-10); }
.acct-nav { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: var(--s-5); }
.acct-user { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-5); border-bottom: 1px solid var(--c-line); }
.acct-nav ul { list-style: none; display: grid; gap: 2px; }
.acct-nav button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-2); text-align: left; }
.acct-nav button:hover { background: var(--c-bg-soft); color: var(--c-text); }
.acct-nav button[aria-selected="true"] { background: var(--c-bg-sunk); color: var(--c-text); font-weight: 600; }
.acct-nav__label { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: .14em; color: var(--c-text-3); padding: 0 12px; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.acct h1 { font-size: var(--fs-3xl); }
.acct-panel { display: grid; gap: var(--s-7); }
.member-card { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: center; padding: var(--s-6); border-radius: var(--r-xl); background: var(--c-ink); color: var(--c-ink-text); position: relative; overflow: hidden; }
.member-card::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(176,38,240,.4), transparent); }
.member-card > * { position: relative; z-index: 1; }
.list-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); }
.list-row:last-child { border-bottom: 0; }
.list-row__main { flex: 1; min-width: 0; }
.list-row__main h4 { font-size: var(--fs-md); font-family: var(--f-display); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prompt-card { padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); display: grid; gap: var(--s-3); }
.prompt-card pre { font-family: var(--f-mono); font-size: var(--fs-xs); background: var(--c-bg-soft); padding: var(--s-3); border-radius: var(--r-sm); white-space: pre-wrap; color: var(--c-text-2); margin: 0; }
/* Footer */
.site-footer { background: var(--c-ink); color: var(--c-ink-text-2); padding: var(--s-10) 0 var(--s-6); margin-top: 0; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s-8); padding-bottom: var(--s-9); border-bottom: 1px solid var(--c-ink-line); }
.footer__brand p { font-size: var(--fs-sm); margin-top: var(--s-4); max-width: 34ch; line-height: 1.6; }
.footer__col h4 { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: var(--s-4); font-weight: 600; }
.footer__col ul { list-style: none; display: grid; gap: 10px; font-size: var(--fs-sm); }
.footer__col a:hover { color: #fff; }
.social { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.social a { height: 36px; min-width: 36px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--c-ink-line); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-text-2); }
.social a:hover { color: #fff; border-color: var(--c-ink-text-3); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-6); font-size: var(--fs-xs); color: var(--c-ink-text-3); }
.footer__tag { font-family: var(--f-mono); letter-spacing: .3em; }
.footer__disclose { max-width: 70ch; }
/* 17. UTILITIES ========================================================= */
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); } .mt-9 { margin-top: var(--s-9); }
.mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }
.center { text-align: center; }
.muted { color: var(--c-text-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.w-full { width: 100%; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.on-dark { color: var(--c-ink-text); }
/* 18. RESPONSIVE ======================================================== */
@media (max-width: 1240px) {
.nav__link { padding: 0 8px; }
.top-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
.trending { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--c-line); padding-top: var(--s-6); }
.trending ol { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-6); }
.trending li:nth-child(-n+3) { border-top: 0; padding-top: 0; }
.art-layout { grid-template-columns: minmax(0, var(--w-read)) 300px; justify-content: center; }
.art-layout > .toc { display: none; }
.toc__mobile { display: block; }
.dgt-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1120px) {
:root { --header-h: 60px; }
.nav, .header__actions .hide-md { display: none; }
.menu-btn { display: inline-grid !important; }
.grid-4, .dir-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.layout-sidebar { grid-template-columns: minmax(0,1fr) 280px; gap: var(--s-7); }
.footer__top { grid-template-columns: repeat(4, 1fr); }
.footer__brand { grid-column: 1 / -1; }
.r-hero__grid { grid-template-columns: 1fr 340px; gap: var(--s-7); }
}
@media (max-width: 900px) {
:root { --gutter: 20px; }
.section { padding: var(--s-9) 0; }
.sec-title { font-size: var(--fs-2xl); }
.page-head h1, .r-hero h1 { font-size: var(--fs-4xl); }
.grid-3, .plans, .forum-cats { grid-template-columns: 1fr 1fr; }
.layout-sidebar, .layout-sidebar--left, .art-layout, .intro__grid, .r-hero__grid, .newsletter, .vs-feature, .deal-feature, .app-panel__body, .acct { grid-template-columns: minmax(0,1fr); }
.intro__grid { gap: var(--s-7); }
.sidebar.sticky, .layout-sidebar .sticky { position: static; }
.newsletter { padding: var(--s-7); gap: var(--s-6); }
.top-grid { grid-template-columns: minmax(0,1fr); gap: var(--s-7); }
.top-grid__secondary { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.trending ol { grid-template-columns: 1fr; }
.trending li:nth-child(-n+3) { border-top: 1px solid var(--c-line); padding-top: var(--s-4); }
.trending li:first-child { border-top: 0; padding-top: 0; }
.river__item { grid-template-columns: 1fr 140px; }
.river__time { grid-column: 1 / -1; }
.dir { grid-template-columns: 1fr; }
.filter-toggle { display: inline-flex !important; }
.filters { position: fixed; inset: auto 0 0 0; top: auto; z-index: 140; max-height: 82vh; background: #fff; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 0 var(--s-5) var(--s-5); box-shadow: 0 -20px 60px rgba(0,0,0,.25); transform: translateY(105%); transition: transform .3s var(--ease); }
.filters.is-open { transform: none; }
.filters__head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: #fff; padding: var(--s-4) 0; z-index: 1; border-bottom: 1px solid var(--c-line); margin-bottom: var(--s-3); }
.acct-nav { position: static; }
.acct-nav ul { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; }
.acct-nav button { white-space: nowrap; }
.acct-nav .acct-nav__label { display: none; }
.member-card { grid-template-columns: 1fr; }
.cmp-hero { grid-template-columns: 1fr; }
.cmp-hero__vs { margin: calc(var(--s-6) * -1) 0; z-index: 1; }
.chain { grid-template-columns: 1fr; }
.chain__item:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -24px; transform: translateX(-50%); }
.thread { grid-template-columns: auto minmax(0,1fr) 64px; }
.thread__stat--views, .thread__last { display: none; }
.thread-list__head { display: none; }
.search-ov__body { grid-template-columns: 1fr; }
.search-ov__panel { margin: 0; border-radius: 0; min-height: 100vh; }
.footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.ad--tall { height: 250px; }
.sidebar .ad--tall { display: none; }
}
@media (max-width: 640px) {
:root { --gutter: 16px; }
body { font-size: 15.5px; }
.proto-bar .container { font-size: 11px; }
.brand__word { font-size: 1.15rem; }
.brand__mark { width: 34px; }
.header__actions .btn--brand { display: none; }
.subnav__label span { display: none; }
.section { padding: var(--s-8) 0; }
.sec-head { flex-direction: column; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-6); }
.page-head { padding: var(--s-7) 0 var(--s-6); }
.page-head h1, .r-hero h1 { font-size: 2.15rem; }
.grid-2, .grid-3, .grid-4, .plans, .forum-cats, .dir-grid, .top-grid__secondary, .pc, .stat-list { grid-template-columns: minmax(0,1fr); }
.dgt-grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.dgt-card { min-height: 0; padding: var(--s-4); }
.dgt-card p { display: none; }
.dgt-card .badge { top: var(--s-3); right: var(--s-3); }
.dgt-card h3 { font-size: var(--fs-md); }
.a-card--lead .a-card__title { font-size: 1.85rem; }
.a-card--row { grid-template-columns: 1fr 110px; }
.a-card--row .thumb { grid-column: 2; grid-row: 1 / span 3; }
.river__item { grid-template-columns: 1fr 96px; gap: var(--s-4); }
.river__item .thumb { aspect-ratio: 1; }
.river__item h3 { font-size: var(--fs-lg); }
.river__item .a-card__dek { display: none; }
.intro { padding: var(--s-7) 0 var(--s-7); }
.intro .searchbar kbd { display: none; }
.today__item .thumb { display: none; }
.today__item { grid-template-columns: 1fr; }
.newsletter { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); }
.newsletter__title { font-size: var(--fs-3xl); }
.newsletter__form { flex-direction: column; border-radius: var(--r-lg); }
.newsletter__form .btn { width: 100%; }
.container > .newsletter { margin: 0 calc(var(--gutter) * -1); border-radius: 0; }
.vs-feature { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); }
.vs-picker { grid-template-columns: 1fr; }
.vs-picker .vs__badge { justify-self: center; }
.deal-feature__body { padding: var(--s-6); }
.deal-feature__media { min-height: 180px; }
.art-head__dek { font-size: 1.2rem; }
.prose { font-size: 1.12rem; line-height: 1.68; }
.prose blockquote { font-size: var(--fs-xl); padding-left: var(--s-4); }
.art-hero .thumb { aspect-ratio: 16/10; border-radius: 0; }
.art-hero.container { padding: 0; }
.aff-cta, .product-inline { grid-template-columns: auto 1fr; }
.aff-cta .btn, .product-inline .btn { grid-column: 1 / -1; width: 100%; }
.product-block__head { grid-template-columns: auto 1fr; }
.product-block__head .score { grid-column: 2; grid-row: 1; justify-self: end; }
.bar { grid-template-columns: 96px 1fr 30px; }
.review-card__head { padding: var(--s-4); }
.r-hero { padding: var(--s-6) 0 var(--s-7); }
.post { grid-template-columns: 1fr; gap: var(--s-3); }
.post__avatar { display: none; }
.post__head .meta { margin-left: 0; width: 100%; }
.post--accepted { margin-left: 0; }
.thread { grid-template-columns: minmax(0,1fr) 52px; padding: var(--s-4); }
.thread > .avatar { display: none; }
.forum-cat p { display: none; }
.footer__top { grid-template-columns: 1fr 1fr; }
.metrics { grid-template-columns: 1fr 1fr; }
.result--tool { grid-template-columns: auto 1fr; }
.result--tool .btn { grid-column: 1 / -1; }
.result { grid-template-columns: 1fr; }
.result .thumb { display: none; }
.table-wrap { margin: 0 calc(var(--gutter) * -1); border-radius: 0; border-left: 0; border-right: 0; }
.plan { padding: var(--s-6) var(--s-5); }
.ad--leader { height: 100px; max-width: 320px; }
.cmp-hero__side { padding: var(--s-5); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
.site-header, .proto-bar, .site-footer, .ad, .ad-wrap, .share, .toc, .sidebar, .newsletter { display: none !important; }
.art-layout { display: block; }
}
[hidden] { display: none !important; }
/* Patches: 2-column top grid, min-width guards */
.top-grid--2 { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); }
.acct-nav, .acct-nav ul, .acct > div, .post > div { min-width: 0; }
.post { grid-template-columns: 48px minmax(0,1fr); }
@media (max-width: 900px) { .top-grid--2 { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 640px) { .post { grid-template-columns: minmax(0,1fr); } }
.post__actions { flex-wrap: wrap; }
.acct-nav { grid-template-columns: minmax(0,1fr); }
.table--compare thead th .logo-tile { display: inline-grid; vertical-align: middle; margin-right: 6px; }
@media (max-width: 640px) { .art-hero > p { padding: 0 var(--gutter); } }
/* Bricks wrappers: keep the prototype header and mega panels at their real size */
.site-header .mega { max-width: none; }
.brand__word > :not(.brand__tag) { display: inline; }
/* Header chrome matches the prototype, ahead of Automatic.css button defaults */
.site-header .btn.btn--brand {
background: var(--grad-brand) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: var(--sh-glow);
height: 36px;
padding: 0 14px !important;
font-size: var(--fs-xs) !important;
font-family: var(--f-ui) !important;
border-radius: var(--r-pill) !important;
}
.site-header .btn.btn--ghost-dark {
background: transparent !important;
color: var(--c-ink-text) !important;
border: 1px solid var(--c-ink-line) !important;
height: 36px;
padding: 0 14px !important;
font-size: var(--fs-xs) !important;
font-family: var(--f-ui) !important;
border-radius: var(--r-pill) !important;
}
.site-header .nav__link { font-family: var(--f-ui); font-size: var(--fs-sm); font-weight: 500; }
.nav__item:has(> .mega) > .nav__link::after {
content: "";
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
opacity: .7;
margin-left: 2px;
}
.header__actions .icon-btn {
width: 36px;
height: 36px;
display: inline-grid;
place-items: center;
color: var(--c-ink-text-2);
border-radius: 8px;
font-size: 0;
}
.header__actions .icon-btn::before {
content: "";
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* Hero search: Bricks turns the form into its own control */
.intro .brxe-form.searchbar {
display: flex;
flex-wrap: nowrap !important;
align-items: center;
gap: 10px;
background: #fff;
border-radius: var(--r-pill);
box-shadow: var(--sh-2);
padding: 6px 6px 6px 46px;
max-width: 640px;
margin-top: var(--s-7);
position: relative;
}
.intro .brxe-form.searchbar::before {
content: "";
position: absolute;
left: 18px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
background: #767186;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.intro .brxe-form.searchbar .form-group {
flex: 1 1 auto;
flex-direction: row !important;
align-items: center;
width: auto !important;
margin: 0;
min-width: 0;
}
.intro .brxe-form.searchbar .submit-button-wrapper {
flex: 0 0 auto !important;
display: flex;
flex-direction: row !important;
align-items: center;
gap: 10px;
width: auto !important;
min-width: 0;
}
.intro .brxe-form.searchbar .submit-button-wrapper::before {
content: "/";
font-family: var(--f-mono);
font-size: var(--fs-2xs);
font-weight: 500;
color: var(--c-text-3);
border: 1px solid var(--c-line);
border-radius: 5px;
padding: 2px 6px;
line-height: 1.2;
}
.intro .brxe-form.searchbar label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.intro .brxe-form.searchbar input {
width: 100%;
height: 46px;
border: 0 !important;
outline: 0;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
font-family: var(--f-ui);
font-size: var(--fs-md);
color: var(--c-text);
}
.intro .brxe-form.searchbar input::placeholder { color: var(--c-text-3); }
.intro .brxe-form.searchbar button {
background: var(--grad-brand) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--r-pill) !important;
height: 42px !important;
width: auto !important;
min-width: 0 !important;
min-inline-size: 0 !important;
flex: 0 0 auto !important;
padding: 0 18px !important;
font-family: var(--f-ui) !important;
font-size: var(--fs-sm) !important;
font-weight: 600 !important;
box-shadow: var(--sh-glow);
}
.intro .brxe-form.searchbar button:hover { filter: brightness(1.08); }
.intro .brxe-form.searchbar .loading { display: none !important; }
.intro h1 { color: var(--c-ink-text) !important; font-family: var(--f-display); }
.intro h1 .text-grad { color: transparent !important; }
.today__item h3, .today__item h3 a { color: var(--c-ink-text) !important; font-family: var(--f-display); }
.today__item:hover h3, .today__item:hover h3 a { color: #ffd1ea !important; }
.a-card__title, .a-card__title a { color: var(--c-text) !important; }
.trending h3, .trending h3 a { color: var(--c-text) !important; }
.trending h3 a:hover { color: var(--c-accent) !important; }
.forum-archive .hentry > h1 { display: none; }
.forum-archive .page-head { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* Homepage sections: same type, buttons and icons as the prototype.
Inline SVGs cannot be stored without Execute Code, so these masks use the prototype paths. */
:root {
--m-arrow: url("data:image/svg+xml;utf8,");
--m-ext: url("data:image/svg+xml;utf8,");
--m-bookmark: url("data:image/svg+xml;utf8,");
--m-check: url("data:image/svg+xml;utf8,");
--m-dash: url("data:image/svg+xml;utf8,");
--m-info: url("data:image/svg+xml;utf8,");
--m-pin: url("data:image/svg+xml;utf8,");
--m-flame: url("data:image/svg+xml;utf8,");
--m-target: url("data:image/svg+xml;utf8,");
--m-star: url("data:image/svg+xml;utf8,");
--m-chat: url("data:image/svg+xml;utf8,");
--m-code: url("data:image/svg+xml;utf8,");
--m-image: url("data:image/svg+xml;utf8,");
--m-video: url("data:image/svg+xml;utf8,");
--m-pen: url("data:image/svg+xml;utf8,");
--m-bolt: url("data:image/svg+xml;utf8,");
--m-book: url("data:image/svg+xml;utf8,");
--m-mega: url("data:image/svg+xml;utf8,");
--m-layers: url("data:image/svg+xml;utf8,");
--m-mic: url("data:image/svg+xml;utf8,");
--m-case: url("data:image/svg+xml;utf8,");
--m-term: url("data:image/svg+xml;utf8,");
--m-cpu: url("data:image/svg+xml;utf8,");
--m-spark: url("data:image/svg+xml;utf8,");
--m-laptop: url("data:image/svg+xml;utf8,");
--m-card: url("data:image/svg+xml;utf8,");
--m-medal: url("data:image/svg+xml;utf8,");
--m-shield: url("data:image/svg+xml;utf8,");
--m-headphones: url("data:image/svg+xml;utf8,");
--m-ssd: url("data:image/svg+xml;utf8,");
--m-mouse: url("data:image/svg+xml;utf8,");
--m-wand: url("data:image/svg+xml;utf8,");
--m-calc: url("data:image/svg+xml;utf8,");
--m-sliders: url("data:image/svg+xml;utf8,");
--m-globe: url("data:image/svg+xml;utf8,");
--m-bars: url("data:image/svg+xml;utf8,");
}
.thumb-ico-1 { --m: var(--m-term); }
.thumb-ico-2 { --m: var(--m-case); }
.thumb-ico-3 { --m: var(--m-cpu); }
.thumb-ico-4 { --m: var(--m-spark); }
.thumb-ico-5 { --m: var(--m-chat); }
.thumb-ico-6, .thumb-ico-9 { --m: var(--m-code); }
.thumb-ico-7, .thumb-ico-11 { --m: var(--m-laptop); }
.thumb-ico-8 { --m: var(--m-card); }
.thumb-ico-10 { --m: var(--m-image); }
.thumb-ico-12 { --m: var(--m-medal); }
.thumb-ico-13 { --m: var(--m-shield); }
.thumb-ico-14 { --m: var(--m-bolt); }
.chip-ico-1 { --m: var(--m-chat); }
.chip-ico-2 { --m: var(--m-code); }
.chip-ico-3 { --m: var(--m-image); }
.chip-ico-4 { --m: var(--m-video); }
.chip-ico-5 { --m: var(--m-pen); }
.chip-ico-6 { --m: var(--m-bolt); }
.chip-ico-7 { --m: var(--m-book); }
.chip-ico-8 { --m: var(--m-mega); }
.chip-ico-9 { --m: var(--m-layers); }
.chip-ico-10 { --m: var(--m-mic); }
.chip-ico-11 { --m: var(--m-case); }
.deal-ico-1 { --m: var(--m-laptop); }
.deal-ico-2 { --m: var(--m-headphones); }
.deal-ico-3 { --m: var(--m-ssd); }
.deal-ico-4 { --m: var(--m-mouse); }
.dgt-ico-1 { --m: var(--m-target); }
.dgt-ico-2 { --m: var(--m-layers); }
.dgt-ico-3 { --m: var(--m-wand); }
.dgt-ico-4 { --m: var(--m-calc); }
.dgt-ico-5 { --m: var(--m-sliders); }
.dgt-ico-6 { --m: var(--m-globe); }
.dgt-ico-7 { --m: var(--m-bars); }
.dgt-ico-8 { --m: var(--m-image); }
.thumb[class*="thumb-ico-"]::after,
.deal-card__media[class*="deal-ico-"]::before {
content: "";
width: 30%;
max-width: 96px;
aspect-ratio: 1;
background: currentColor;
-webkit-mask: var(--m) center / contain no-repeat;
mask: var(--m) center / contain no-repeat;
}
.today__item .thumb[class*="thumb-ico-"]::after { width: 44%; max-width: none; }
.deal-card__media[class*="deal-ico-"]::before { width: 34%; max-width: none; }
.chip[class*="chip-ico-"]::before,
.sec-link::after,
.dgt-card__go::before,
.guide-card__pick::before,
.tool-card__save::before,
.btn.with-ext::after,
.trending__head::before,
.tag--pinned::before {
content: "";
width: 16px;
height: 16px;
flex: none;
background: currentColor;
-webkit-mask: var(--m, var(--m-arrow)) center / contain no-repeat;
mask: var(--m, var(--m-arrow)) center / contain no-repeat;
}
.chip[class*="chip-ico-"] { display: inline-flex; }
.tool-card__save { font-size: 0; }
.tool-card__save::before { --m: var(--m-bookmark); width: 16px; height: 16px; }
.guide-card__pick::before { --m: var(--m-target); }
.dgt-card__go::before { order: 2; }
.btn.with-ext::after { --m: var(--m-ext); width: 13px; height: 13px; }
.btn.with-arrow::after {
content: "";
width: 16px;
height: 16px;
flex: none;
background: currentColor;
-webkit-mask: var(--m-arrow) center / contain no-repeat;
mask: var(--m-arrow) center / contain no-repeat;
}
.guide-card__pick b { display: block; }
.dgt-card__go, .dgt-card__go:hover { color: inherit !important; }
.trending__head::before { --m: var(--m-flame); color: var(--c-pink); background: var(--c-pink); }
.tag--pinned::before { --m: var(--m-pin); width: 13px; height: 13px; }
.dgt-card__ico[class*="dgt-ico-"]::before {
content: "";
width: 22px;
height: 22px;
background: currentColor;
-webkit-mask: var(--m) center / contain no-repeat;
mask: var(--m) center / contain no-repeat;
}
.pc__pro li::before,
.pc__con li::before,
.plan__list li::before,
.notice::before,
.has-info::before {
content: "";
width: 16px;
height: 16px;
margin-top: 2px;
background: currentColor;
-webkit-mask: var(--m-check) center / contain no-repeat;
mask: var(--m-check) center / contain no-repeat;
}
.pc__pro li::before { background: var(--c-success); }
.pc__con li::before { background: var(--c-danger); -webkit-mask-image: var(--m-dash); mask-image: var(--m-dash); }
.plan__list li::before { width: 18px; height: 18px; background: var(--c-success); }
.plan--pro .plan__list li::before { background: #ff7ac2; }
.notice::before, .has-info::before { --m: var(--m-info); background: var(--c-text-3); -webkit-mask-image: var(--m-info); mask-image: var(--m-info); width: 20px; height: 20px; flex: none; }
.has-info { display: flex; gap: 8px; align-items: flex-start; }
.stars::before {
content: "";
width: 74px;
height: 14px;
background: linear-gradient(90deg, #f0a020 calc(var(--stars, 5) / 5 * 100%), #d9d4e3 0);
-webkit-mask-image: var(--m-star), var(--m-star), var(--m-star), var(--m-star), var(--m-star);
mask-image: var(--m-star), var(--m-star), var(--m-star), var(--m-star), var(--m-star);
-webkit-mask-size: 14px 14px;
mask-size: 14px 14px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 0 0, 15px 0, 30px 0, 45px 0, 60px 0;
mask-position: 0 0, 15px 0, 30px 0, 45px 0, 60px 0;
}
.brxe-section.section, .brxe-section.intro { width: 100%; max-width: none; }
.btn { font-family: var(--f-ui) !important; border-radius: var(--r-pill) !important; height: 44px !important; padding: 0 18px !important; font-size: var(--fs-sm) !important; min-width: 0 !important; min-inline-size: 0 !important; width: auto !important; inline-size: auto !important; }
.btn.btn--sm { height: 36px !important; padding: 0 14px !important; font-size: var(--fs-xs) !important; }
.btn.btn--lg { height: 52px !important; padding: 0 26px !important; font-size: var(--fs-md) !important; }
.btn.btn--block { width: 100% !important; inline-size: 100% !important; }
.score { background: conic-gradient(from 210deg, #ff2e9a, #b026f0, #7a2cf5 calc(var(--p) * 1%), var(--c-bg-sunk) 0) !important; }
.newsletter .brxe-form.stack {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
background: #fff;
padding: 6px;
border-radius: var(--r-pill);
margin-top: var(--s-5);
}
.newsletter .brxe-form .form-group { margin: 0; flex: 1; display: flex; min-width: 0; }
.newsletter .brxe-form .submit-button-wrapper { flex: none; }
.newsletter .brxe-form input {
flex: 1;
width: 100%;
border: 0 !important;
outline: 0;
height: 46px;
padding: 0 16px !important;
background: transparent !important;
color: var(--c-text);
font-family: var(--f-ui);
box-shadow: none !important;
}
.newsletter .brxe-form button.bricks-button {
background: var(--grad-brand) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--r-pill) !important;
height: 46px !important;
padding: 0 22px !important;
font-family: var(--f-ui) !important;
font-weight: 600 !important;
}
.newsletter .brxe-form .loading { display: none !important; }
.btn.btn--primary { background: var(--c-ink) !important; color: #fff !important; border-color: transparent !important; }
.btn.btn--primary:hover { background: #2a2536 !important; }
.btn.btn--outline { background: #fff !important; color: var(--c-text) !important; border: 1px solid var(--c-line-2) !important; }
.btn.btn--ghost { background: transparent !important; color: var(--c-text) !important; border-color: transparent !important; }
.btn.btn--deal { background: var(--t-deals) !important; color: #fff !important; border-color: transparent !important; }
.btn.btn--light { background: #fff !important; color: var(--c-ink) !important; border-color: transparent !important; }
.btn.btn--brand { background: var(--grad-brand) !important; color: #fff !important; border-color: transparent !important; }
.btn.btn--ghost-dark { background: transparent !important; color: var(--c-ink-text) !important; border: 1px solid var(--c-ink-line) !important; }
.sec-title { font-family: var(--f-display); color: var(--c-text) !important; letter-spacing: -.02em; }
.section--dark .sec-title,
.section--dark h1,
.section--dark h2,
.section--dark .brxe-heading,
.section--dark .dgt-card h3,
.newsletter__title { color: var(--c-ink-text) !important; }
.sec-sub { color: var(--c-text-2) !important; }
.section--dark .sec-sub { color: var(--c-ink-text-2) !important; }
.text-grad { color: transparent !important; }
.tool-card__name, .tool-card__name a,
.review-card h3, .review-card h3 a,
.guide-card h3, .guide-card h3 a,
.deal-card__name,
.vs-card h3, .vs-card h3 a,
.thread__title, .thread__title a {
font-family: var(--f-display);
color: var(--c-text) !important;
}
.vs-feature h3,
.dgt-card h3,
.plan__name, .plan__price {
font-family: var(--f-display);
color: inherit !important;
}
.section--dark .plan__name,
.section--dark .plan__price { color: var(--c-ink-text) !important; }
.plan__name.text-grad { color: transparent !important; }
/* Bricks strips CSS gradients on lazy divs. Restore the prototype thumb art. */
.brxe-div.thumb.bricks-lazy-hidden.thumb--f,
.thumb.thumb--f { background-color: #0f0d18 !important; background-image: radial-gradient(90% 90% at 70% 30%, #5b2fd6 0%, transparent 60%) !important; }
.brxe-div.thumb.bricks-lazy-hidden.thumb--d,
.thumb.thumb--d { background-color: #0f0b17 !important; background-image: radial-gradient(80% 80% at 20% 20%, #d81b8f 0%, transparent 60%), linear-gradient(200deg, #2a0f3d, #0f0b17) !important; }
.brxe-div.thumb.bricks-lazy-hidden.thumb--c,
.thumb.thumb--c { background-color: #dcd6ea !important; background-image: linear-gradient(135deg, #f1eef7, #dcd6ea) !important; color: #2a2240 !important; }
.brxe-div.thumb.bricks-lazy-hidden.thumb--e,
.thumb.thumb--e { background-color: #101018 !important; background-image: linear-gradient(160deg, #1f1d2b 0%, #101018 100%) !important; }
.brxe-div.thumb.bricks-lazy-hidden.thumb--b,
.thumb.thumb--b { background-color: #0c0b12 !important; background-image: radial-gradient(100% 100% at 100% 100%, #3b1d8f 0%, transparent 60%), linear-gradient(160deg, #1a1726, #0c0b12) !important; }
.brxe-div.thumb.bricks-lazy-hidden.thumb--g,
.thumb.thumb--g { background-color: #ece2ff !important; background-image: linear-gradient(135deg, #fde7f3, #ece2ff) !important; color: #5b1f8a !important; }
.thumb.thumb--e[class*="thumb-ico-"]::after { background-color: #ff5fb4 !important; }
.thumb.thumb--g[class*="thumb-ico-"]::after { background-color: #5b1f8a !important; }
.thumb.thumb--c[class*="thumb-ico-"]::after { background-color: #2a2240 !important; }
.site-footer, #brx-footer { background: var(--c-ink); }
.site-footer a { color: var(--c-ink-text-2) !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer .footer__disclose a { color: #fff !important; }
.site-footer .footer__col h4 { color: #fff !important; }
/* Bricks splits the copyright into block text nodes. Keep it on one line. */
.site-footer .footer__bottom > .brxe-div {
display: flex !important;
align-items: baseline;
gap: 0.35em;
flex-wrap: nowrap;
width: auto;
}
.site-footer .footer__bottom > .brxe-div > * { margin: 0 !important; }
/* Single and archive templates use the prototype page header and reading type. */
.page-head .brxe-heading,
.page-head h1,
.r-hero .brxe-heading,
.r-hero h1 { color: var(--c-ink-text) !important; }
.page-head--light .brxe-heading,
.page-head--light h1,
.art-head .brxe-heading,
.art-head h1 { color: var(--c-text) !important; }
.page-head .page-head__dek,
.r-hero .r-hero__dek { color: var(--c-ink-text-2) !important; }
.art-head .art-head__dek { color: var(--c-text-2) !important; }
.tpl-body { padding: 56px 0 80px; }
.tpl-body .prose { max-width: 72ch; }
.archive-grid { padding: 40px 0 80px; }
.archive-grid .card h2,
.archive-grid .card h2 a { color: var(--c-text) !important; font-family: var(--f-display); text-decoration: none; }
.archive-grid .card .type { color: var(--c-text-2) !important; }
.archive-grid .card .meta { color: var(--c-text-3) !important; }
.cmp { display: grid; border: 1px solid var(--c-line); border-radius: 12px; overflow: auto; background: #fff; margin-top: 24px; }
.cmp__row { display: grid; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--c-line); align-items: center; }
.cmp__head { border-top: 0; background: var(--c-bg-soft); font-weight: 700; }
.cmp--2 .cmp__row { grid-template-columns: 1.4fr 1fr; }
.cmp--3 .cmp__row { grid-template-columns: 1.4fr 1fr 1fr; }
.cmp--4 .cmp__row { grid-template-columns: 1.6fr repeat(3, 1fr); }
.cmp--5 .cmp__row { grid-template-columns: 1.3fr repeat(4, 1fr); }
.section--dark .cmp { background: #17122a; color: var(--c-ink-text); border-color: rgba(255,255,255,.12); }
.section--dark .cmp__head { background: rgba(255,255,255,.04); }
body.search .bricks-archive-title-wrapper { background: var(--c-ink); color: #fff; padding: 72px 20px 48px; }
body.search .bricks-archive-title-wrapper .title { color: #fff !important; font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3.2rem); text-align: center; }
body.search h3 a { color: var(--c-text) !important; }
/* === Live-site fixes ===
Automatic.css and its custom CSS load their own colors, link color and card padding.
These rules only restore the prototype where that cascade wins. */
html { scroll-behavior: auto; }
.plan--pro,
.member-card,
.card--dark,
.nl-mini,
.newsletter,
.section--dark,
.page-head:not(.page-head--light),
.r-hero,
.vs-feature,
.cmp-hero__side,
.dgt-card:not(.dgt-card--light),
.app-panel__out,
.site-footer {
color: var(--c-ink-text);
}
.plan--pro :is(li, span),
.member-card :is(h1, h2, h3),
.card--dark :is(h1, h2, h3, h4, li),
.nl-mini :is(h1, h2, h3),
.newsletter :is(h1, h2, h3, h4, li),
.section--dark :is(h1, h2, h3, h4, li),
.page-head:not(.page-head--light) :is(h1, h2, h3, h4),
.r-hero :is(h1, h2, h3),
.vs-feature :is(h1, h2, h3),
.cmp-hero__side :is(h1, h2),
.dgt-card:not(.dgt-card--light) :is(h1, h2, h3),
.app-panel__out :is(h1, h2, h3),
.site-footer :is(h1, h2, h3, h4) {
color: inherit;
}
.page-head--light {
background: var(--c-bg-soft);
color: var(--c-text);
}
.page-head--light :is(h1, h2, h3) { color: inherit; }
.page-head--light .page-head__dek,
.page-head--light .meta { color: var(--c-text-2); }
.page-head a:not(.btn):not(.link) { color: inherit; }
.meta a,
.crumbs a,
.site-footer a:not(.btn),
:is(.card, .tool-card, .review-card, .deal-card, .a-card, .thread, .guide-card) a:not(.link):not(.btn) {
color: inherit;
}
.deal-card,
.review-card {
padding: 0;
gap: 0;
}
.today__head {
width: 100%;
align-self: stretch;
}
.today__head > * {
flex: none;
width: auto;
}
.tool-card__cat > div { display: inline; }
.author__name,
.author__role { display: block; }
/* Name and role sit on one line when they are direct flex children of .author. */
.author:has(> .author__name) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--s-3);
align-items: center;
}
.author > .avatar { grid-row: 1 / span 2; }
.author > .author__name { grid-column: 2; grid-row: 1; }
.author > .author__role { grid-column: 2; grid-row: 2; }
/* About team cards do not use those classes: the name is a strong and the role is a span. */
#team + .grid .card strong,
#team + .grid .card .brxe-div > span {
display: block;
}
/* Homepage cards: featured images fill the thumbnail frame. */
.thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
display: block;
}
.a-card__dek,
.review-card__verdict {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.review-card > .thumb {
border-radius: 0;
aspect-ratio: 16 / 9;
}
@media (max-width: 760px) {
.top-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
.vs-card > .thumb {
margin: calc(var(--s-6) * -1) calc(var(--s-5) * -1) 0;
border-radius: var(--r-lg) var(--r-lg) 0 0;
aspect-ratio: 16 / 9;
}
.vs-feature .thumb { margin-bottom: var(--s-5); aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
.tool-card .price-tag { white-space: normal; }
.chips--scroll { max-width: 100%; }
}
/* Today on DGTULS: glass panel, AA labels, and a shorter hero on phones. */
.today {
position: relative;
z-index: 1;
border-radius: var(--r-lg);
background: rgba(18, 16, 25, .72);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.today .kicker,
.today .type__cat { color: #c8c3d6; }
.today .type__cat::before { opacity: 1; }
.today .type--news { --tc: #93c5fd; }
.today .type--review { --tc: #ff8ac8; }
.today .type--best { --tc: #f0c36a; }
.today .type--compare { --tc: #c4b5fd; }
.today .type--guide { --tc: #6ee7b7; }
.today__item h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 1023px) {
.intro__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.today__item:nth-child(n+4) { display: none; }
}
/* Fluid background: keep text above the layer on sections marked data-fluid. */
[data-fluid] { position: relative; overflow: hidden; }
[data-fluid] > *:not(.fluid-bg) { position: relative; z-index: 1; }
.r-hero { position: relative; overflow: hidden; }
.has-fluid.member-card::after { display: none; }
/* Wordmark. The PNG already includes the name and the tagline. */
.brand__mark { width: auto; height: 46px; }
@media (max-width: 640px) {
.brand__mark { width: auto; height: 40px; }
}
/* Task 23 — mobile drawer. Nav hides at 1120px, so the button follows that breakpoint. */
.header__actions .menu-btn { width: 44px; height: 44px; font-size: 0; }
.header__actions .menu-btn::before { content: none; display: none; }
.drawer__scrim { backdrop-filter: blur(6px); }
.drawer__panel {
width: min(88vw, 380px);
background: var(--c-ink);
transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}
.drawer summary,
.drawer__link { min-height: 56px; font-size: 18px; font-weight: 600; }
.drawer__link[aria-current="page"] { color: #fff; }
.drawer__link[aria-current="page"]::before {
content: "";
width: 3px;
align-self: stretch;
margin: 14px 10px 14px 0;
border-radius: 3px;
background: var(--grad-brand);
}
@media (prefers-reduced-motion: reduce) {
.drawer__panel, .drawer__scrim { transition: none; }
}
@media (max-width: 379px) {
#brxe-jcfx6f { display: none !important; }
}
.drawer a, .drawer summary { color: var(--c-ink-text); text-decoration: none; }
.drawer details li a { color: var(--c-ink-text-2); }
.drawer__link:hover, .drawer summary:hover, .drawer details li a:hover { color: #fff; }
/* Task 23 — post hero image. 16:9, never 21:9. */
.r-hero:has(+ .post-hero), .page-head:has(+ .post-hero) { padding-bottom: calc(var(--s-9) + 32px); }
.post-hero { width: min(100%, var(--w-max)); margin: -80px auto var(--s-8); position: relative; z-index: 2; padding: 0 var(--gutter); }
.post-hero--flow { margin-top: var(--s-6); }
.post-hero__img, .post-hero .thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: left center; border-radius: var(--r-lg); box-shadow: var(--sh-3); background: var(--c-ink); display: block; }
.post-hero figcaption { margin-top: 8px; font-size: var(--fs-xs); color: var(--c-text-3); }
@media (max-width: 760px) {
.post-hero, .post-hero--flow { width: 100%; margin: 0 0 var(--s-6); padding: 0; }
.post-hero__img, .post-hero .thumb { border-radius: 0; box-shadow: none; }
}
/* Task 23 — forum join banner and empty states. */
.forum-join, .forum-gate { background: var(--c-ink); color: var(--c-ink-text); border-radius: var(--r-lg); padding: var(--s-7); position: relative; overflow: hidden; }
.forum-join h2, .forum-gate h2 { margin: 0 0 var(--s-3); color: #fff; }
.forum-join p { color: var(--c-ink-text-2); max-width: 62ch; }
.forum-join__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-5); }
.forum-join__note { margin: var(--s-4) 0 0; font-size: var(--fs-sm); }
.forum-join__note a { color: #fff; }
.forum-cat__empty, .forum-empty { margin: 8px 0 0; font-size: var(--fs-sm); }
.forum-single__bar { display: flex; justify-content: flex-end; width: min(100%, var(--w-max)); margin: var(--s-5) auto 0; padding: 0 var(--gutter); }
.bbp-login-form, .bbp-no-topic > .bbp-template-notice { display: none; }
@media (max-width: 640px) {
.forum-join__actions, .forum-gate .forum-join__actions { display: grid; }
.forum-join__actions .btn { width: 100%; }
.forum-single__bar { justify-content: stretch; }
.forum-single__bar .btn { width: 100%; }
}
/* Task 23 — article template. */
.prose { min-width: 0; overflow-wrap: anywhere; }
.prose > p:first-of-type::first-letter { font-size: inherit; float: none; font-weight: inherit; line-height: inherit; margin: 0; font-family: inherit; color: inherit; }
.prose > p.lead:first-of-type::first-letter { font-family: var(--f-display); font-weight: 800; float: left; font-size: 3.6em; line-height: .9; margin: .06em .12em 0 0; color: var(--c-text); }
.prose a { color: #6d28d9; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose code { white-space: pre-wrap; word-break: break-word; }
.prose pre { overflow-x: auto; max-width: 100%; }
.prose pre code { white-space: pre; word-break: normal; }
.toc { margin: var(--s-5) 0; }
.toc summary { cursor: pointer; font-weight: 600; }
.toc ol { margin: 8px 0 0; padding-left: 1.2em; }
.toc a { color: inherit; text-decoration: none; }
.toc--mobile { display: none; width: min(100%, var(--w-max)); margin: 0 auto var(--s-5); padding: 0 var(--gutter); }
.article-side { display: flex; flex-direction: column; gap: 16px; }
.side-cta { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 16px; background: #fff; }
.side-cta__name { margin: 0 0 12px; font-weight: 700; }
.side-cta__date, .disclosure { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--c-text-3); }
.ad-slot { background: var(--c-surface, #f6f4fb); border-radius: var(--r-md, 8px); }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: var(--s-6) 0; }
.pc__col { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 16px; }
.pc__col li { list-style: none; margin: 0 0 8px; padding-left: 1.4em; position: relative; }
.pc__col--pro li::before { content: ""; position: absolute; left: 0; top: .45em; width: .7em; height: .35em; border-left: 2px solid #15803d; border-bottom: 2px solid #15803d; transform: rotate(-45deg); }
.pc__col--con li::before { content: ""; position: absolute; left: 0; top: .35em; width: .7em; height: .7em; background:
linear-gradient(#b91c1c,#b91c1c) center/100% 2px no-repeat,
linear-gradient(#b91c1c,#b91c1c) center/2px 100% no-repeat;
transform: rotate(45deg); }
.related { padding: var(--s-8) 0; }
.related .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related .card { display: block; color: inherit; text-decoration: none; }
.related .card img, .related .thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-md, 8px); }
@media (min-width: 1024px) {
.tpl-body > .container, .page-head .container:has(.article-side) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.article-side { position: sticky; top: calc(var(--header-h) + 16px); }
.toc:not(.toc--mobile) { display: block; }
}
@media (max-width: 1023px) {
.toc--mobile { display: block; }
.article-side .toc { display: none; }
.pc, .related .card-grid { grid-template-columns: 1fr; }
}
/* Task 23 — tool mark and covered list. */
.letter-avatar, .tool-mark { width: 56px; height: 56px; border-radius: 14px; display: inline-grid; place-items: center; background: var(--c-ink); color: #fff; font-weight: 700; font-size: 1.4rem; object-fit: cover; }
.covered { margin-top: var(--s-7); }
.covered ul { padding-left: 1.2em; }
/* Task 23 — keep wide tables inside the column. */
/* contain: inline-size removed in Task 29. It collapsed .prose to 0px. */
.table-wrap { width: 100%; max-width: 100%; }
/* Task 23 — sidebar must not widen the page on a phone. */
.container:has(.article-side), .article-side, .side-cta, .related { min-width: 0; max-width: 100%; }
.article-side { width: 100%; }
.side-cta .btn { white-space: normal; }
/* Task 23 — article frame matches news.html: image in the main column, sidebar on the right. */
.layout-sidebar .post-hero,
.layout-sidebar .post-hero--flow {
width: 100%;
max-width: 100%;
margin: 0 0 var(--s-6);
padding: 0;
position: static;
z-index: auto;
}
.layout-sidebar .post-hero__img,
.layout-sidebar .post-hero .thumb {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
object-position: left center;
border-radius: var(--r-lg);
box-shadow: none;
display: block;
}
.layout-sidebar .toc--mobile { display: none; width: auto; margin: 0 0 var(--s-5); padding: 0; }
.layout-sidebar .sidebar .side-cta { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 16px; background: #fff; }
.layout-sidebar .sidebar .side-cta__name { margin: 0 0 12px; font-weight: 700; }
.layout-sidebar .sidebar .disclosure,
.layout-sidebar .sidebar .side-cta__date { margin: 0; font-size: var(--fs-sm); color: var(--c-text-3); }
@media (max-width: 900px) {
.layout-sidebar .toc--mobile { display: block; }
.layout-sidebar .sidebar > .toc { display: none; }
.layout-sidebar .post-hero__img,
.layout-sidebar .post-hero .thumb { border-radius: var(--r-md); }
}
/* The body container must not add a second column. layout-sidebar is the only split. */
@media (min-width: 1024px) {
.tpl-body > .container { display: block; }
}
/* Pros and cons: the mark stays in the padding. The sentence uses the full card. */
.prose .pc__col li {
display: block;
width: auto;
max-width: 100%;
min-width: 0;
padding-left: 1.6em;
overflow-wrap: break-word;
word-break: normal;
}
/* Task 24 — form layout. The cookie banner is no longer this block. */
.dg-empty { max-width: 62ch; }
.dg-form { margin-top: 24px; }
.dg-form .ff-el-form-control, .dg-form input[type=text], .dg-form input[type=email], .dg-form textarea, .dg-form select { width: 100%; max-width: 100%; }
/* Task 29 P0 — visual audit. Match the prototype; do not redesign. */
.prose {
contain: none;
width: 100%;
max-width: 70ch;
align-self: stretch;
}
.prose .table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 24px 0;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
width: 100%;
max-width: 100%;
}
.prose table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
font-family: var(--f-ui);
font-size: 14px;
line-height: 1.45;
}
.prose th {
background: var(--c-bg-soft);
text-align: left;
font-weight: 600;
padding: 10px 12px;
border-bottom: 1px solid var(--c-line);
white-space: nowrap;
}
.prose td {
padding: 10px 12px;
border-bottom: 1px solid var(--c-line);
vertical-align: top;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
}
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) {
.prose .table-wrap {
margin: 24px 0;
border-left: 1px solid var(--c-line);
border-right: 1px solid var(--c-line);
border-radius: var(--r-md);
background:
linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) 100% 0,
radial-gradient(farthest-side at 0 50%, rgba(10,9,16,.12), transparent),
radial-gradient(farthest-side at 100% 50%, rgba(10,9,16,.12), transparent) 100% 0;
background-repeat: no-repeat;
background-color: #fff;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
}
.toc,
.toc--mobile {
position: static;
top: auto;
}
.toc--mobile summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
list-style: none;
}
.toc--mobile summary::-webkit-details-marker { display: none; }
.toc--mobile summary::after {
content: "";
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
flex: none;
}
.toc--mobile[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
@media (min-width: 901px) {
.layout-sidebar { align-items: start; }
.layout-sidebar .sidebar.sticky {
position: sticky;
top: calc(var(--header-h) + 24px);
align-self: start;
}
.layout-sidebar .sidebar > .toc { display: block; }
.layout-sidebar .toc--mobile { display: none; }
}
.side-cta .letter-avatar,
.side-cta .tool-mark {
width: 48px;
height: 48px;
margin-bottom: 12px;
font-size: 1.1rem;
}
.side-picks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.side-picks li {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.side-picks .letter-avatar,
.side-picks .tool-mark {
width: 36px;
height: 36px;
margin: 0;
font-size: .9rem;
border-radius: 8px;
}
.side-picks a { font-weight: 600; }
body.dg-admin .ad::before {
content: "Admin only";
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
font: 600 11px/1 var(--f-ui), Inter, sans-serif;
letter-spacing: .04em;
text-transform: uppercase;
background: #0a0910;
color: #fff;
padding: 4px 6px;
border-radius: 4px;
}
.bricks-lazy-hidden {
opacity: 1 !important;
visibility: visible !important;
animation: none !important;
filter: none !important;
}
/* Task 29 P1 — match the homepage cards. No redesign. */
.proto-bar,
.subnav { display: none !important; }
.tool-card .price-tag,
.price-tag {
display: block;
white-space: normal;
overflow-wrap: anywhere;
font-size: 13px;
line-height: 1.4;
}
.sec-link > svg,
.sec-link > .ico { display: none; }
.prose .notice > svg.ico { display: none; }
.prose .pc h2,
.prose .pc__col h2 {
margin: 0 0 12px;
font-family: var(--f-display);
font-size: 18px;
letter-spacing: -0.02em;
line-height: 1.2;
}
.prose .pc__col li {
font-size: 15px;
line-height: 1.5;
}
.hub-chips { margin-bottom: 24px; }
.hub-grid,
.dir-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.hub-grid .is-feature { grid-column: span 2; }
.hub-grid .review-card,
.dir-grid .tool-card {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
}
.hub-grid .thumb {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--r-lg) var(--r-lg) 0 0;
background: var(--c-ink);
}
.hub-grid .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
}
.hub-grid .review-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hub-grid .type,
.hub-grid .type__cat { font-family: var(--f-mono); }
.hub-grid .meta,
.hub-grid time { font-family: var(--f-ui); margin-top: auto; }
.hub-grid .review-card__title {
font-family: var(--f-display);
font-size: 1.25rem;
line-height: 1.25;
letter-spacing: -0.02em;
margin: 0;
}
.hub-grid .review-card__title a { color: inherit; text-decoration: none; }
.hub-grid .review-card__dek {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
color: var(--c-text-2);
font-size: 15px;
line-height: 1.45;
}
.hub-grid .is-feature .review-card__title { font-size: 1.75rem; }
.dir-grid .tool-card__actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.review-card .pc,
.review-card__pros,
.review-card__cons { display: none; }
@media (max-width: 800px) {
.hub-grid,
.dir-grid { grid-template-columns: minmax(0, 1fr); }
.hub-grid .is-feature { grid-column: auto; }
}
/* Task 29 P1b — best picks, dark guide head, form controls. */
body.single-guide .page-head,
body.single-guide .page-head--light {
background: #0a0910;
color: #f4f4f5;
position: relative;
overflow: hidden;
}
body.single-guide .page-head h1,
body.single-guide .page-head .meta,
body.single-guide .page-head .page-head__dek,
body.single-guide .page-head .type { color: #f4f4f5; }
body.single-guide .page-head .page-head__dek { margin-top: 24px; }
body.single-guide .fluid-bg,
body.single-guide .page-head canvas {
position: absolute !important;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.pick-card {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
gap: 14px;
align-items: center;
margin: 28px 0 12px;
padding: 16px;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
background: #fff;
}
.pick-card__num {
font-family: var(--f-display);
font-size: 22px;
font-weight: 600;
}
.pick-card__name { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 18px; }
.pick-card__for,
.pick-card__checked { margin: 4px 0 0; color: var(--c-text-2); font-size: 14px; }
.pick-card .btn { margin-top: 10px; }
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="url"],
.fluentform select,
.fluentform textarea {
width: 100%;
min-height: 48px;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
padding: 10px 14px;
font-family: var(--f-ui);
font-size: 16px;
background: #fff;
color: var(--c-text);
}
.fluentform textarea { min-height: 120px; }
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
min-height: 48px;
padding: 0 22px;
border: 0;
border-radius: 999px;
background: #0a0910;
color: #fff;
font-family: var(--f-display);
font-weight: 600;
font-size: 15px;
}
.fluentform .ff-el-form-check-input { accent-color: #0a0910; width: 18px; height: 18px; }
.fluentform .error.text-danger,
.fluentform .ff-el-is-error .ff-el-form-control { color: #9f1239; border-color: #9f1239; }
.fluentform .ff-message-success { color: #166534; font-family: var(--f-ui); }
/* Task 29 P1c — guide title contrast on the dark head. */
body.single-guide .page-head h1,
body.single-guide .page-head .brxe-heading {
color: #f4f4f5 !important;
}
body.single-guide .page-head .type,
body.single-guide .page-head .type--best {
color: #f4c56d !important;
}
/* Task 29 P1d — dark band only behind the Best title. The article stays light. */
body.single-guide #dgtuls-single.page-head,
body.single-guide #dgtuls-single.page-head--light {
background: linear-gradient(#0a0910 0 340px, #fff 340px) !important;
color: #16141d !important;
overflow: visible !important;
}
body.single-guide .fluid-bg {
position: absolute !important;
top: 0;
left: 0;
right: 0;
height: 340px !important;
width: 100% !important;
overflow: hidden !important;
pointer-events: none;
z-index: 0;
}
body.single-guide #dgtuls-single > .container > .type,
body.single-guide #dgtuls-single > .container > h1,
body.single-guide #dgtuls-single > .container > .brxe-heading,
body.single-guide #dgtuls-single > .container > .meta,
body.single-guide #dgtuls-single > .container > .page-head__dek {
position: relative;
z-index: 1;
color: #f4f4f5 !important;
}
body.single-guide .prose,
body.single-guide .prose p,
body.single-guide .prose h2,
body.single-guide .prose li {
color: #16141d;
}
/* Task 30 — tool pages and the eight working cards. */
body.dgtuls-tool-page { overflow-x: hidden; }
.dgt-tool-head {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
}
.dgt-tool-wrap { max-width: 1200px; }
.dgt-trust { margin-top: 12px; color: var(--c-ink-text-2); font-size: 14px; }
.dgt-card__beta {
display: block;
font-family: var(--f-ui);
font-size: 13px;
color: var(--c-text-3);
}
.dgt-tools .dgt-card,
.dgt-grid.dgt-tools .dgt-card { height: 100%; }
.dgt-tools .dgt-card p,
.dgt-grid.dgt-tools .dgt-card > p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.dgt-tools .dgt-card__ico,
.dgt-grid.dgt-tools .dgt-card__ico {
width: 44px;
height: 44px;
border-radius: 12px;
background: #0a0910;
color: #fff;
}
.dgt-tools .dgt-card--pro .dgt-card__ico,
.dgt-grid.dgt-tools .dgt-card--pro .dgt-card__ico {
background: var(--grad-brand);
color: #fff;
}
.dgt-tools .dgt-card:hover,
.dgt-grid.dgt-tools .dgt-card:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, .18);
box-shadow: 0 12px 32px rgba(122, 44, 245, .16);
}
.dgt-tools .dgt-card:focus-within,
.dgt-grid.dgt-tools .dgt-card:focus-within {
outline: 2px solid #7a2cf5;
outline-offset: 3px;
}
.dgt-tools-more { margin-top: 20px; }
.dgt-gate { max-width: 640px; display: grid; gap: 12px; }
@media (max-width: 1024px) {
.dgt-grid.dgt-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.dgt-grid.dgt-tools {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 12px;
padding-bottom: 8px;
}
.dgt-grid.dgt-tools .dgt-card {
flex: 0 0 82%;
scroll-snap-align: start;
min-height: 220px;
}
}
/* Task 31 — dark tool cards, tool-page sections, homepage leftovers. */
article.dgt-card.dgt-card--glass,
article.dgt-card.dgt-card--light {
display: flex;
flex-direction: column;
gap: 0;
min-height: 0;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
color: inherit;
}
article.dgt-card.dgt-card--glass .dgt-card__hit,
article.dgt-card.dgt-card--light .dgt-card__hit {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
min-height: 228px;
padding: 20px;
border-radius: var(--r-lg);
text-decoration: none;
color: inherit;
}
article.dgt-card.dgt-card--glass .dgt-card__hit {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .10);
backdrop-filter: blur(6px);
color: #fff;
}
article.dgt-card.dgt-card--light .dgt-card__hit {
background: #fff;
border: 1px solid var(--c-line);
color: var(--c-text);
}
article.dgt-card.dgt-card--glass:hover,
article.dgt-card.dgt-card--light:hover {
transform: translateY(-2px);
background: transparent;
border-color: transparent;
box-shadow: none;
}
article.dgt-card.dgt-card--glass:hover .dgt-card__hit {
border-color: rgba(255, 255, 255, .22);
box-shadow: 0 16px 40px rgba(176, 38, 240, .28);
}
article.dgt-card.dgt-card--light:hover .dgt-card__hit {
border-color: var(--c-line-2);
box-shadow: var(--sh-2);
}
article.dgt-card .dgt-card__hit:focus-visible {
outline: 2px solid #7a2cf5;
outline-offset: 3px;
}
article.dgt-card.dgt-card--glass .dgt-card__hit:focus-visible {
outline-color: #fff;
}
.dgt-card__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
article.dgt-card.dgt-card--glass .badge,
article.dgt-card.dgt-card--light .badge {
position: static;
}
article.dgt-card.dgt-card--glass .badge--free {
background: rgba(94, 224, 166, .14);
color: #7ff0bd;
}
article.dgt-card.dgt-card--light .badge--free {
background: #0a0910;
color: #fff;
}
article.dgt-card .badge--pro {
background: var(--grad-brand);
color: #fff;
}
article.dgt-card.dgt-card--glass .dgt-card__beta,
article.dgt-card.dgt-card--light .dgt-card__beta {
display: block;
min-height: 1.15em;
margin: 0;
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: .04em;
line-height: 1.15;
}
article.dgt-card.dgt-card--glass .dgt-card__beta { color: var(--c-ink-text-2); }
article.dgt-card.dgt-card--light .dgt-card__beta { color: var(--c-text-3); }
article.dgt-card.dgt-card--glass h3,
article.dgt-card.dgt-card--light h3,
article.dgt-card.dgt-card--glass h3 a,
article.dgt-card.dgt-card--light h3 a {
margin: 0;
font-family: var(--f-display);
font-weight: 600;
font-size: 17px;
line-height: 1.3;
color: inherit;
text-decoration: none;
}
article.dgt-card.dgt-card--glass h3,
article.dgt-card.dgt-card--glass .dgt-card__cta { color: #fff; }
article.dgt-card.dgt-card--light h3,
article.dgt-card.dgt-card--light .dgt-card__cta { color: var(--c-text); }
article.dgt-card.dgt-card--glass p,
article.dgt-card.dgt-card--light p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
flex: 0 1 auto;
font-family: var(--f-ui);
font-size: 14px;
line-height: 1.5;
}
article.dgt-card.dgt-card--glass p { color: var(--c-ink-text-2); }
article.dgt-card.dgt-card--light p { color: var(--c-text-2); }
.dgt-card__cta {
margin-top: auto;
font-family: var(--f-ui);
font-weight: 600;
font-size: 14px;
}
article.dgt-card .dgt-card__go::before,
article.dgt-card .dgt-card__cta::before { content: none; display: none; }
.dgt-tool-kicker {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.dgt-tool-kicker .badge { position: static; }
.dgtuls-tool-page .dgt,
.dgtuls-tool-page .dgc,
.dgtuls-tool-page [data-dg-calc] {
width: 100%;
max-width: 1200px;
}
.dgt-below {
display: grid;
gap: 72px;
padding: 72px 0;
}
.dgt-below .kicker { margin: 0 0 8px; }
.dgt-below h2 {
margin: 0 0 20px;
font-family: var(--f-display);
font-weight: 700;
font-size: 28px;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--c-text);
}
.dgt-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.dgt-stepcard {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
padding: 20px;
}
.dgt-stepcard__n {
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--grad-brand);
color: #fff;
font-family: var(--f-display);
font-weight: 700;
font-size: 13px;
}
.dgt-stepcard h3 {
margin: 12px 0 6px;
font-family: var(--f-display);
font-weight: 600;
font-size: 17px;
line-height: 1.3;
}
.dgt-stepcard p {
margin: 0;
font-family: var(--f-ui);
font-size: 14px;
line-height: 1.5;
color: var(--c-text-2);
}
.dgt-below .notice { font-family: var(--f-ui); }
.dgt-below .notice p { margin: 0; }
.dgt-below .faq summary {
font-family: var(--f-display);
font-weight: 600;
font-size: 17px;
}
.dgt-below .faq summary::after {
content: "";
width: 8px;
height: 8px;
margin-top: -4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
flex: none;
}
.dgt-below .faq details[open] summary::after {
transform: rotate(-135deg);
margin-top: 4px;
}
.dgt-below .faq details p {
font-family: var(--f-ui);
font-size: 16px;
color: var(--c-text-2);
}
.dgt-related {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
.dgt-relart .thumb {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.dgt-relart .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dgt-relart .a-card__title {
font-family: var(--f-display);
font-size: 16px;
}
#calculator,
#finder,
#brxe-fc5w9k,
#brxe-gqx1qh { display: none !important; }
.top-grid--2 { align-items: stretch; }
.top-grid--2 > .a-card--lead {
display: flex;
flex-direction: column;
height: 100%;
}
.top-grid--2 > .a-card--lead .thumb {
flex: 1 1 auto;
min-height: 220px;
aspect-ratio: auto;
}
.top-grid--2 > .a-card--lead .thumb img,
.a-card--compact .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.a-card--compact .thumb img { object-position: 82% 45%; }
.review-card,
.review-card__verdict,
.review-card__body,
.guide-card,
.guide-card__body,
.vs-card,
.tool-card,
.tool-card__desc {
font-family: var(--f-ui);
}
.guide-card .thumb { aspect-ratio: 16 / 9; }
.guide-card .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 32%;
}
.guide-card__pick::before { content: none !important; display: none !important; }
.guide-card__avatars { display: flex; align-items: center; }
.guide-card__avatars .logo-tile {
width: 28px;
height: 28px;
margin-left: -6px;
border: 2px solid #fff;
font-size: 11px;
}
.guide-card__avatars .logo-tile:first-child { margin-left: 0; }
.vs-feature .logo-tile,
.vs-feature .logo-tile--lg {
width: 72px;
height: 72px;
font-size: 22px;
}
.vs-feature > div > .thumb,
.vs-card > .thumb { display: none; }
#newsletter .ff-el-form-control,
#newsletter input[type="email"] {
background: rgba(255, 255, 255, .06) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
border-radius: 12px !important;
font-family: var(--f-ui);
}
#newsletter .ff-el-input--label,
#newsletter .ff_t_c,
#newsletter .ff-el-form-check-label { color: var(--c-ink-text-2); }
#newsletter .asterisk-right > label::after,
#newsletter .ff-el-is-required .asterisk { color: var(--c-pink) !important; }
#newsletter .ff-el-form-check-input {
appearance: none;
width: 18px;
height: 18px;
margin: 0;
border: 1px solid rgba(255, 255, 255, .45);
border-radius: 4px;
background: transparent;
display: grid;
place-items: center;
}
#newsletter .ff-el-form-check-input:checked {
background: var(--grad-brand);
border-color: transparent;
}
#newsletter .ff-el-form-check-input:checked::after {
content: "";
width: 8px;
height: 5px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
margin-top: -2px;
}
#newsletter form.fluent_form_4 .ff-btn-submit,
#newsletter .ff-btn-submit {
background: var(--grad-brand) !important;
background-color: transparent !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
min-height: 48px;
padding: 0 22px !important;
font-family: var(--f-display);
font-weight: 600;
box-shadow: var(--sh-glow);
}
.pick-card {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: start;
gap: 16px;
padding: 20px;
margin: 12px 0 28px;
font-family: var(--f-ui);
}
.pick-card__main { min-width: 0; }
.pick-card__name {
font-family: var(--f-display);
font-weight: 700;
font-size: 20px;
}
.pick-card__for,
.pick-card__checked,
.pick-card .price-tag {
font-family: var(--f-ui);
font-size: 14px;
}
.pick-card .btn {
grid-column: 4;
grid-row: 1 / span 4;
align-self: center;
margin: 0;
text-decoration: none !important;
background: var(--grad-brand) !important;
color: #fff !important;
border: 0 !important;
}
body.single-guide #dgtuls-single .layout-sidebar,
body.single-review #dgtuls-single .layout-sidebar,
body.single-comparison #dgtuls-single .layout-sidebar {
margin-top: 32px;
position: relative;
z-index: 2;
background: #fff;
}
.sidebar.sticky,
.layout-sidebar .toc {
top: calc(var(--header-h) + 24px);
}
.hub-grid { align-items: stretch; }
.hub-grid .review-card:not(.is-feature) .thumb {
flex: 1 1 auto;
aspect-ratio: auto;
min-height: 140px;
}
.hub-grid .review-card:not(.is-feature) .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 900px) {
.dgt-steps,
.dgt-related { grid-template-columns: 1fr 1fr; }
.vs-feature { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
.dgt-below { gap: 48px; padding: 48px 0; }
.dgt-below h2 { font-size: 24px; }
.dgt-steps,
.dgt-related { grid-template-columns: minmax(0, 1fr); }
.dgt-grid.dgt-tools {
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
scroll-padding-inline: var(--gutter);
}
.dgt-grid.dgt-tools > article.dgt-card {
flex: 0 0 78%;
min-width: 78%;
min-height: 0;
}
#brxe-dd6uuv > .container {
display: flex;
flex-direction: column;
}
#brxe-dd6uuv .sec-head { display: contents; }
#brxe-dd6uuv .sec-head > div { order: 1; }
#brxe-dd6uuv .dgt-grid.dgt-tools { order: 2; }
#brxe-dd6uuv .sec-link { order: 3; margin-top: 16px; }
#newsletter .container { padding-left: 16px; padding-right: 16px; }
#newsletter .newsletter { width: auto; margin-left: 0; margin-right: 0; }
.pick-card { grid-template-columns: auto auto minmax(0, 1fr); }
.pick-card .btn {
grid-column: 1 / -1;
grid-row: auto;
width: 100% !important;
}
}
.vs-feature h3, .vs-feature h3 a { color: #fff; text-decoration: none; }
.vs-card h3, .vs-card h3 a { color: var(--c-text); text-decoration: none; }
body.dgtuls-tool-page #brx-content, body.dgtuls-tool-page #brx-content .wordpress { width: 100% !important; max-width: none !important; }
body.dgtuls-tool-page .dgt-tool-wrap { width: min(1200px, calc(100% - 48px)); max-width: 1200px; }
body.dgtuls-tool-page .dgt, body.dgtuls-tool-page .dgc { width: 100%; max-width: none; }
/* Task 31b — homepage tool cards use the original dark card, not white glass. */
#brxe-dd6uuv article.dgt-card.dgt-card--glass .dgt-card__hit {
position: relative;
background: var(--c-ink-2);
border: 1px solid var(--c-ink-line);
backdrop-filter: none;
-webkit-backdrop-filter: none;
color: var(--c-ink-text);
box-shadow: none;
}
#brxe-dd6uuv article.dgt-card.dgt-card--glass .dgt-card__row {
justify-content: flex-start;
}
#brxe-dd6uuv article.dgt-card.dgt-card--glass .badge {
position: absolute;
top: 20px;
right: 20px;
}
#brxe-dd6uuv article.dgt-card.dgt-card--glass .badge--free {
background: rgba(15, 138, 95, .2);
color: #6ee7b7;
}
#brxe-dd6uuv article.dgt-card.dgt-card--glass h3,
#brxe-dd6uuv article.dgt-card.dgt-card--glass .dgt-card__cta {
color: #fff;
}
#brxe-dd6uuv article.dgt-card.dgt-card--glass p,
#brxe-dd6uuv article.dgt-card.dgt-card--glass .dgt-card__beta {
color: var(--c-ink-text-2);
}
#brxe-dd6uuv article.dgt-card.dgt-card--glass:hover {
transform: translateY(-2px);
background: transparent;
box-shadow: none;
}
#brxe-dd6uuv article.dgt-card.dgt-card--glass:hover .dgt-card__hit {
background: var(--c-ink-3);
border-color: #4a3c6e;
box-shadow: none;
}
/* Task 26 — prompt library */
#brxe-fc5w9k { display: flex !important; }
.dgp-wrap {
width: min(1200px, calc(100% - (var(--gutter) * 2)));
max-width: 1200px;
margin-inline: auto;
}
.dgp-wrap > .brxe-shortcode { width: 100%; }
#brxe-dd6uuv .dgp-home {
display: flex;
align-items: center;
gap: 16px 22px;
flex-wrap: wrap;
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, .10);
}
#brxe-dd6uuv .dgp-home .kicker { margin: 0; color: var(--c-ink-text-3); }
#brxe-dd6uuv .dgp-home__links { display: flex; flex-wrap: wrap; gap: 8px 18px; min-width: 0; }
#brxe-dd6uuv .dgp-home__links a { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }
#brxe-dd6uuv .dgp-home__links a:hover { text-decoration: underline; }
#brxe-dd6uuv .dgp-home .sec-link { order: 0; margin-top: 0; margin-left: auto; }
@media (max-width: 700px) {
#brxe-dd6uuv .dgp-home { order: 4; }
#brxe-dd6uuv .dgp-home .sec-link { margin-left: 0; }
}
/* Task 32 — positioning */
.dg-find { padding-top: var(--s-6); }
.dg-find .sec-title { margin-bottom: var(--s-5); }
.dg-find__card { display: grid; gap: 10px; align-content: start; color: inherit; text-decoration: none; }
.dg-find__card h3 { margin: 0; }
.dg-find__card p { margin: 0; color: var(--c-text-2); }
.dg-find__card .ico { width: 28px; height: 28px; }
#brxe-dd6uuv .dgp-strip { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.10); }
#brxe-dd6uuv .dgp-strip__head { display: flex; justify-content: space-between; gap: 12px 20px; align-items: center; flex-wrap: wrap; }
#brxe-dd6uuv .dgp-strip__head h3 { margin: 0; color: #fff; font-size: 22px; }
#brxe-dd6uuv .dgp-strip__tabs { display: flex; gap: 8px; }
#brxe-dd6uuv .dgp-strip__tabs button { appearance: none; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
#brxe-dd6uuv .dgp-strip__tabs button[aria-selected="true"] { background: #fff; color: #121019; }
#brxe-dd6uuv .dgp-strip__list { list-style: none; margin: 12px 0 16px; padding: 0; }
#brxe-dd6uuv .dgp-strip__item { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
#brxe-dd6uuv .dgp-strip__item .kicker { margin: 0; color: var(--c-ink-text-3, #8d879c); }
#brxe-dd6uuv .dgp-strip__title { color: #fff; font-weight: 650; text-decoration: none; }
#brxe-dd6uuv .dgp-strip__title:hover { text-decoration: underline; }
#brxe-dd6uuv .dgp-strip__act { justify-self: end; border: 0; background: #fff; color: #121019; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
#brxe-dd6uuv .dgp-strip .sec-link { color: #fff; }
.dg-topics { display: grid; gap: 8px; margin-bottom: 18px; }
.dg-topics .thread { display: block; text-decoration: none; color: inherit; }
.dg-topics .thread strong { display: block; }
.dg-our-take { margin-bottom: var(--s-5); }
.dg-our-take p { margin: 8px 0 0; }
@media (max-width: 700px) {
#brxe-dd6uuv .dgp-strip__item { grid-template-columns: 1fr auto; }
#brxe-dd6uuv .dgp-strip__item .kicker { grid-column: 1 / -1; }
}
/* Task 34 — news status, what it means, sources */
.dg-status-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:12px 0 0}
.dg-status{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.dg-status--official{background:#12301f;color:#4ade9b}
.dg-status--reported,.dg-status--secondary{background:#2a2410;color:#f5b84a}
.dg-status--rumor{background:#2a1420;color:#ff5fb4}
.dg-status--primary{background:#142033;color:#7eb6ff}
.dg-status__note{font-size:13px;line-height:1.4;color:var(--text-2,#a8a3b5)}
.dg-means{margin:22px 0;padding:18px 18px 6px}
.dg-means .kicker{display:block;margin-bottom:8px}
.dg-sources{margin-top:28px}
.dg-sources li{margin:8px 0}
.dg-src__kind{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-right:6px;opacity:.7}
/* Task 36 — photo credits under the hero and in-article figures */
.post-hero figcaption,
.dg-figure figcaption{margin:8px 0 0;font-size:13px;line-height:1.45;text-align:left;color:var(--c-text-3,#a8a3b5)}
.post-hero figcaption a,
.dg-figure figcaption a{color:inherit;text-decoration:underline}
.dg-figure{margin:22px 0}
.dg-figure img{display:block;width:100%;height:auto}
/* Task 37 — gradient fallback when a post has no photo */
.dg-fallback{aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;padding:16px 18px;text-align:left;color:#fff}
.dg-fallback__kicker{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.dg-fallback__title{font-family:var(--f-display);font-weight:650;line-height:1.25;letter-spacing:-.02em;color:#fff}
.a-card .dg-fallback__title,.review-card .dg-fallback__title,.card .dg-fallback__title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-hero .dg-fallback{border-radius:var(--r-lg)}
.post-hero .dg-fallback__title{font-size:clamp(1.35rem,2.6vw,2rem)}
.a-card .thumb,.review-card > a.thumb,.related .card .thumb{aspect-ratio:16/9}
.thumb:has(img) .thumb__tag,.thumb:has(img) .dg-fallback{display:none}
.dg-discuss{margin:28px 0 8px;padding:18px 20px;border:1px solid var(--c-line,#e6e3ee);border-radius:var(--r-lg,16px);background:var(--c-bg-soft,#f6f5f8)}
.dg-discuss p{margin:0 0 12px;font-weight:650}
.dg-discuss__actions{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.dg-fb{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:inherit}
.dg-fb:hover{text-decoration:underline}
.dg-fb__icon{display:block;flex:none}
.post-hero .thumb.dg-fallback,
.layout-sidebar .post-hero .thumb.dg-fallback {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
background-color: #14101f;
background-image: radial-gradient(120% 90% at 85% 10%, #8a2be2 0%, transparent 55%), radial-gradient(90% 90% at 10% 100%, #ff2e9a 0%, transparent 55%);
object-fit: unset;
}
/* Task 49: Facebook follow link keeps a local SVG icon. No Facebook SDK. */
.social a[aria-label="Follow DGTULS on Facebook"]{
display:inline-flex;
align-items:center;
gap:8px;
width:auto;
height:auto;
min-height:36px;
padding:8px 12px;
font-weight:650;
white-space:nowrap;
}
.social a[aria-label="Follow DGTULS on Facebook"]::before{
content:"";
width:14px;
height:14px;
flex:none;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.8 8.2h-2.1V6.9c0-.6.3-.9.9-.9h1.2V4h-1.9C10.8 4 9.6 5.2 9.6 7.1v1.1H8v2.3h1.6V20h2.9v-9.5h2l.3-2.3z'/%3E%3C/svg%3E") center / contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.8 8.2h-2.1V6.9c0-.6.3-.9.9-.9h1.2V4h-1.9C10.8 4 9.6 5.2 9.6 7.1v1.1H8v2.3h1.6V20h2.9v-9.5h2l.3-2.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Task 41: search modal, hero search, card images, forum topic */
#dg-search-open { border: 0; background: transparent; cursor: pointer; padding: 0; color: inherit; }
.search-ov__scrim { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.search-ov__form input { font-size: max(16px, var(--fs-xl)); }
.search-ov__suggest { list-style: none; margin: 0; padding: 8px 20px 0; display: grid; }
.search-ov__suggest[hidden] { display: none; }
.search-ov__suggest a { display: block; padding: 10px 12px; border-radius: 8px; font-size: var(--fs-sm); }
.search-ov__suggest a:hover { background: var(--c-bg-soft); }
.search-ov__body { grid-template-columns: 1fr; }
@media (max-width: 800px) {
.search-ov__panel { margin: 0; border-radius: 0; min-height: 100vh; min-height: 100dvh; }
}
.intro .searchbar {
display: flex;
align-items: center;
height: 56px;
padding: 0 6px 0 18px;
gap: 10px;
}
.intro .searchbar input {
height: auto;
min-height: 0;
line-height: normal;
margin: 0;
padding: 0;
font-size: 16px;
flex: 1;
min-width: 0;
}
.intro .searchbar .btn { flex: none; }
@media (max-width: 480px) {
.intro .searchbar { height: 52px; }
}
@media (hover: none), (max-width: 480px) {
.intro .searchbar kbd { display: none !important; }
}
.thumb:has(img),
a.thumb:has(img) { background: #f1f0f5; }
.today .thumb:has(img),
.section--dark .thumb:has(img),
.intro .thumb:has(img) { background: #1b1825; }
.thumb:has(img)::before { content: none; }
.js .thumb img { opacity: 0; transition: opacity .25s ease; }
.js .thumb img.is-loaded { opacity: 1; }
.js .thumb:has(img):not(:has(img.is-loaded)) {
background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
background-size: 200% 100%;
animation: dg41-shimmer 1.15s ease-in-out infinite;
}
@keyframes dg41-shimmer {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
.a-card .thumb img,
.review-card .thumb img,
.guide-card .thumb img,
.hub-grid .thumb img,
.today__item .thumb img,
.river__item .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.a-card .thumb,
.review-card > .thumb,
.guide-card > .thumb,
.hub-grid .thumb { aspect-ratio: 16 / 9; }
.a-card--lead .thumb { aspect-ratio: 16 / 9; max-height: 420px; }
.a-card--compact .thumb,
.today__item .thumb { aspect-ratio: 4 / 3; }
.today__item .thumb--photo {
width: 64px;
height: 48px;
border-radius: 8px;
background: #1b1825;
}
.hub-grid .thumb { background: #f1f0f5; }
.hub-grid .review-card:not(.is-feature) .thumb {
flex: 0 0 auto;
aspect-ratio: 16 / 9;
min-height: 0;
}
.grid > .review-card,
.grid > .a-card,
.grid > .guide-card { height: 100%; }
.review-card,
.a-card--std,
.guide-card { display: flex; flex-direction: column; }
.review-card__body,
.guide-card__body { flex: 1; display: flex; flex-direction: column; }
.review-card__body .meta,
.a-card--std .meta,
.guide-card .meta { margin-top: auto; }
.review-card h3,
.a-card--std .a-card__title,
.guide-card h3,
.hub-grid .review-card__title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.review-card__verdict,
.a-card--std .a-card__dek {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 800px) {
.hub-grid .is-feature .review-card__title { font-size: 1.25rem; }
}
body.single-topic #brx-content.wordpress {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.topic-single .container { max-width: 768px; }
.topic-op,
.topic-reply {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 20px;
align-items: start;
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
padding: 20px 22px;
margin: 0 0 16px;
}
.topic-op__who { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; min-width: 0; }
.topic-op__avatar { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }
.topic-op__who strong,
.topic-op__who time { display: block; overflow-wrap: anywhere; }
.topic-op__who time { color: var(--c-text-3); font-size: var(--fs-xs); }
.topic-op .prose,
.topic-reply .prose { min-width: 0; max-width: none; font-size: 17px; line-height: 1.65; }
.topic-op .prose > :first-child,
.topic-reply .prose > :first-child { margin-top: 0; }
.topic-op .prose > :last-child,
.topic-reply .prose > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
.topic-op,
.topic-reply { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
.topic-op__who { flex-direction: row; align-items: center; gap: 10px; }
.topic-op__avatar { width: 36px; height: 36px; }
.topic-op__who > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.topic-op__who > div time::before { content: "· "; }
}
.topic-replies__title { margin: 8px 0 12px; font-size: 1.25rem; }
.topic-replies__empty { color: var(--c-text-2); margin: 0 0 20px; }
.topic-back { margin: 8px 0 28px; }
.topic-more ul { list-style: none; display: grid; gap: 8px; padding: 0; margin: 12px 0 0; }
.topic-more a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.bbp-reply-form textarea,
#bbp_reply_content {
width: 100%;
min-height: 9.5rem;
border-radius: 12px;
border: 1px solid var(--c-line-2);
padding: 12px 14px;
font: 400 16px/1.5 var(--f-ui);
background: #fff;
color: var(--c-text);
}
.bbp-reply-form .quicktags-toolbar { display: none; }
.bbp-reply-form .bbp-template-notice:has(li:empty) { display: none; }
#bbp_reply_submit {
height: 44px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--grad-brand);
color: #fff;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 480px) {
body.single-topic .page-head h1 { font-size: 32px; }
body.single-topic { overflow-x: hidden; }
}
.bbp-reply-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bbp-reply-form legend { font-family: var(--f-display); font-weight: 650; font-size: 1.15rem; padding: 0; margin: 0 0 12px; }
/* Task 42: one sign-up page */
.join-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: 40px; align-items: start; }
.join-perks { margin: 20px 0 0; padding: 0; list-style: none; }
.join-perks li { position: relative; padding: 8px 0 8px 22px; }
.join-perks li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 99px; background: #b026f0; }
.join-card { color: var(--c-text); }
.join-card h2, .join-card h3 { margin: 0 0 14px; color: var(--c-text); }
.join-card h3 { margin-top: 18px; font-size: 1rem; }
.join-card p { margin: 0 0 14px; }
.join-card label { display: block; font-weight: 650; margin: 0 0 6px; }
.join-card input[type="text"],
.join-card input[type="email"],
.join-card input[type="password"] { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--c-line); padding: 0 14px; font-size: 16px; background: #fff; color: var(--c-text); }
.join-card input:focus { outline: none; border-color: #7a2cf5; box-shadow: 0 0 0 3px rgba(122, 44, 245, .2); }
.join-check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.join-check input { margin-top: 4px; flex: none; }
.join-opt { font-weight: 500; color: var(--c-text-2); }
.join-switch { margin: 14px 0 0; font-size: .92rem; }
.join-msg { color: #9b1c1c; }
.join-msg--ok { color: #0d7a45; }
.join-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.join-card .btn--block { width: 100%; }
@media (max-width: 800px) {
.join-layout { grid-template-columns: 1fr; }
.page-head .join-layout h1 { font-size: 2rem; }
}
/* Header: one search icon. The button already contains the SVG. */
.header__actions button.icon-btn::before {
content: none;
}
/* Task 44: legal pages */
.legal-wrap { background: #fff; color: #1c1726; padding: 40px 0 72px; }
.legal-grid { display: grid; gap: 28px; align-items: start; }
.legal-single { max-width: 760px; }
.legal-prose { max-width: 760px; font-size: 17px; line-height: 1.7; color: #1c1726; }
.legal-prose h2 { font-size: 1.45rem; margin: 2rem 0 .6rem; scroll-margin-top: 96px; }
.legal-prose h3 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
.legal-prose p, .legal-prose li { font-size: 17px; line-height: 1.7; }
.legal-prose a { text-decoration: underline; }
.legal-anchor { margin-left: .4rem; color: #8d8798; text-decoration: none; opacity: 0; font-weight: 600; }
.legal-prose h2:hover .legal-anchor, .legal-anchor:focus { opacity: 1; }
.legal-summary { background: #f6f3fb; border-left: 4px solid #b026f0; border-radius: 12px; padding: 8px 18px 12px; margin: 0 0 8px; }
.legal-summary h2 { margin-top: .8rem; }
.legal-top { margin-top: 1.2rem; }
.legal-top a { font-size: 14px; }
.legal-prose .table-wrap { overflow-x: auto; max-width: 100%; margin: 1rem 0 1.2rem; }
.legal-prose table { width: 100%; border-collapse: collapse; background: #fff; color: #1c1726; font-size: 15px; line-height: 1.45; }
.legal-prose th, .legal-prose td { border: 1px solid #e4e0ea; padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-prose th { background: #f4f0fa; font-weight: 700; }
.legal-prose tbody tr:nth-child(even) td { background: #faf9fb; }
.legal-toc__toggle { width: 100%; text-align: left; background: #f6f3fb; border: 1px solid #e4e0ea; border-radius: 12px; padding: 12px 14px; font-weight: 700; }
.legal-toc__nav { display: none; margin-top: 8px; }
.legal-toc.is-open .legal-toc__nav { display: grid; gap: 6px; }
.legal-toc__nav a { color: #3c3650; text-decoration: none; font-size: 14px; line-height: 1.4; padding: 4px 0; }
.legal-toc__nav a.is-current { color: #7a1fb0; font-weight: 700; }
.legal-foot { margin-top: 48px; }
.legal-related { display: grid; gap: 12px; }
.legal-card { display: block; border: 1px solid #e4e0ea; border-radius: 14px; padding: 16px; color: #1c1726; text-decoration: none; background: #fff; font-weight: 650; }
.legal-card:hover { border-color: #b026f0; }
.legal-cards { display: grid; gap: 12px; margin-bottom: 24px; }
.legal-cards article { border: 1px solid #e4e0ea; border-radius: 14px; padding: 16px; background: #faf9fb; }
.legal-cards h2 { margin: 0 0 6px; font-size: 1.05rem; }
.legal-optout { margin: 8px 0 18px; padding: 16px; border: 1px solid #e4e0ea; border-radius: 14px; }
.legal-optout__status { font-weight: 700; margin-top: 0; }
.legal-reply { margin-top: 16px; font-weight: 650; }
@media (min-width: 700px) {
.legal-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.legal-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.legal-grid { grid-template-columns: 220px minmax(0, 760px); justify-content: center; gap: 40px; }
.legal-toc { position: sticky; top: 88px; }
.legal-toc__toggle { display: none; }
.legal-toc__nav, .legal-toc.is-open .legal-toc__nav { display: grid; margin-top: 0; }
}
@media print {
#brx-header, #brx-footer, #dg-ck, #dg-ck-panel, #wpadminbar, .legal-toc, .legal-foot, .subnav { display: none !important; }
.legal-wrap, .legal-prose, .legal-prose p, .legal-prose li, .legal-prose h2, .legal-prose td, .legal-prose th { color: #000 !important; background: #fff !important; }
.legal-summary { border-left-color: #000 !important; }
}
.legal-prose td code { white-space: nowrap; }
.legal-prose .fluentform { margin: 28px 0 8px; max-width: 640px; }
.legal-prose .ff-el-group { margin: 0 0 16px; }
.legal-prose .ff-el-input--label label { display: block; font-weight: 650; margin: 0 0 6px; color: #1c1726; }
.legal-prose .ff-el-form-control,
.legal-prose .fluentform input[type="text"],
.legal-prose .fluentform input[type="email"],
.legal-prose .fluentform input[type="url"],
.legal-prose .fluentform select,
.legal-prose .fluentform textarea { width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid #e4e0ea; border-radius: 12px; background: #fff; color: #1c1726; padding: 12px 14px; font-size: 16px; }
.legal-prose .fluentform textarea { min-height: 140px; }
.legal-prose .ff-el-form-check { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; }
.legal-prose .ff-el-form-check input { margin-top: 4px; }
.legal-prose .ff-btn-submit { background: #7a2cf5; color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 700; cursor: pointer; }
.legal-prose .ff-el-is-error .ff-el-form-control { border-color: #9b1c1c; }
.legal-prose .error.text-danger, .legal-prose .ff-error { color: #9b1c1c; }
.legal-prose form.frm-fluent-form .ff-btn-submit.ff_btn_style { background-color: #7a2cf5; color: #fff; border: 0; border-radius: 999px; }
/* Task 46: article updates under the byline */
.dg-updates { margin: 12px 0 0; max-width: 68ch; }
.dg-updates__line { margin: 0 0 6px; }
.dg-updates summary { cursor: pointer; }
/* Task 50 §2: reading rhythm. automatic.css sets :where(p) line-height, so set it on p itself. */
.prose p { line-height: 1.65; margin-bottom: 1.1em; }
.prose li { line-height: 1.6; margin-bottom: .45em; }
.prose p:last-child,
.prose li:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
.prose { font-size: 18px; }
}
/* Task 50 §4: search results */
.page-head .searchbar { max-width: 640px; margin-top: var(--s-6); border: 0; }
.dg-results { align-items: stretch; }
.type--page { color: var(--c-text-2); }
.dg-pager { margin-top: var(--s-8); }
.dg-pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; padding: 0; margin: 0; }
.dg-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: var(--r-pill); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 500; }
.dg-pager a.page-numbers:hover { border-color: var(--c-text-3); color: var(--c-text); }
.dg-pager .page-numbers.current { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.dg-empty { max-width: 640px; }
.dg-empty__try { font-size: var(--fs-lg); margin: 0 0 var(--s-6); }
.dg-empty__try a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.dg-empty__or { color: var(--c-text-3); font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.dg-findlinks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 640px) {
.page-head .searchbar kbd { display: none; }
}
/* Task 50 §5: 404 */
.dg-404-head { padding: var(--s-10, 96px) 0 var(--s-9); }
.dg-404-head .searchbar { margin-top: var(--s-7); }
.dg-findlinks--dark { margin-top: var(--s-5); }
.dg-findlinks--dark .chip { background: transparent; border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.85); }
.dg-findlinks--dark .chip:hover { border-color: #fff; color: #fff; }
/* Task 50 §6: review and comparison hero — title, dek, then the meta row */
body:is(.single-review, .single-comparison) #dgtuls-single > .container > .r-hero__dek,
body:is(.single-review, .single-comparison) #dgtuls-single > .container > .page-head__dek { order: 1; margin-top: var(--s-4); }
body:is(.single-review, .single-comparison) #dgtuls-single > .container > .art-byline { order: 2; margin-top: var(--s-5); padding-top: 0; border-top: 0; }
body:is(.single-review, .single-comparison) #dgtuls-single > .container > .dg-updates { order: 3; }
body:is(.single-review, .single-comparison) #dgtuls-single .share .icon-btn { color: #fff; background: transparent; border-color: rgba(255,255,255,.25); transition: background var(--dur), border-color var(--dur); }
body:is(.single-review, .single-comparison) #dgtuls-single .share .icon-btn:hover,
body:is(.single-review, .single-comparison) #dgtuls-single .share .icon-btn:focus-visible { background: rgba(255,255,255,.12); border-color: #fff; }
body:is(.single-review, .single-comparison) #dgtuls-single .art-byline .meta { color: var(--c-ink-text-2); }
/* Task 50 §7: Sources, Related and the discuss box line up with the body */
.prose .dg-sources { margin-top: 48px; padding: 0; }
.prose .dg-sources > h2 { margin: 0 0 .6em; }
.prose .dg-sources ul { margin: 0; }
.related > .container { padding-left: 0; padding-right: 0; max-width: none; }
.related h2 { font-family: var(--f-display); font-size: var(--fs-2xl); letter-spacing: -.025em; line-height: 1.2; margin: 0 0 var(--s-5); }
.prose .dg-discuss a,
.prose .dg-discuss a:hover { text-decoration: none; }
.prose .dg-discuss .dg-fb { font-family: var(--f-ui); color: var(--c-text); }
.prose .dg-discuss .dg-fb:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Task 50 §8: "What it means for you" and "Our take" as two cards, one after the other */
.prose .dg-means { margin: 28px 0 16px; }
.prose .dg-means + .dg-our-take { margin-top: 0; }
.prose .dg-our-take { background: #f6f3fb; border: 0; border-left: 4px solid var(--c-pink, #ff3d9a); border-radius: 12px; padding: 16px 20px; margin: 0 0 28px; box-shadow: none; }
.prose .dg-our-take .kicker { display: block; }
/* Task 50 §9: home page */
.top-grid--2 > .a-card--lead .thumb { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 260px; }
@media (max-width: 900px) {
.top-grid--2 > .a-card--lead .thumb { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
}
.review-card__head h3 { min-height: calc(3 * 1.25em); line-height: 1.25; }
.review-card__body { flex: 1 1 auto; }
.review-card__foot { margin-top: auto; }
.vs-card { display: flex; flex-direction: column; align-items: stretch; }
.vs-card h3 { text-align: center; }
.vs-card .meta { margin-top: auto; justify-content: center; }
.guide-card__pick b { line-height: 1.35; }
@media (max-width: 640px) {
.dg-find .grid-3 { gap: var(--s-3); }
.dg-find__card { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; min-height: 0; }
.dg-find__card .ico { grid-row: 1 / span 2; align-self: center; }
.dg-find__card h3 { font-size: var(--fs-md); }
.dg-find__card p { font-size: var(--fs-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Task 50 §10: newsletter block */
#newsletter .newsletter { align-items: center; }
#newsletter .newsletter > div:not(.fluid-bg) { align-self: center; }
#newsletter .ff-el-input--label label { color: rgba(255, 255, 255, .8); }
#newsletter .ff-el-form-control,
#newsletter input[type="email"] { border-color: rgba(255, 255, 255, .25) !important; }
#newsletter .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 10px; }
#newsletter .ff_tc_checkbox { flex: none; display: flex; line-height: 0; margin: 3px 0 0 !important; padding: 0 !important; }
#newsletter .ff_tc_checkbox .ff-el-form-check-input { position: static; top: auto; }
#newsletter .ff-el-form-check-input { width: 20px !important; height: 20px !important; min-width: 20px; padding: 0 !important; margin: 0 !important; border: 1.5px solid rgba(255, 255, 255, .6) !important; }
#newsletter .ff_t_c { margin: 0; line-height: 1.6; color: rgba(255, 255, 255, .8); }
#newsletter .ff_t_c a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#newsletter .newsletter .form-note { color: rgba(255, 255, 255, .6) !important; }
/* Task 50 §11: listings and tool pages */
.hub-grid .is-feature { grid-row: span 2; }
.hub-grid .is-feature .thumb { flex: 1 1 auto; aspect-ratio: auto; min-height: 280px; }
@media (max-width: 800px) {
.hub-grid .is-feature { grid-row: auto; }
.hub-grid .is-feature .thumb { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
}
.dgt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
.dgt-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
/* Task 50 §12: forum index */
@media (min-width: 641px) {
.forum-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Task 50 §13: one content width (1280 container, 1232 content at 1440); reading columns stay narrow */
.archive-grid.container { padding-left: var(--gutter); padding-right: var(--gutter); }
.dgp-wrap { width: min(calc(var(--w-max) - (var(--gutter) * 2)), calc(100% - (var(--gutter) * 2))); max-width: none; }
body.forum-archive #brx-content.wordpress { width: 100%; max-width: none; }
/* Task 50 §14: the footer "Cookie settings" button looks like the links next to it */
.site-footer button.brxe-text-link { color: var(--c-ink-text-2) !important; background: none; border: 0; padding: 0; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.site-footer button.brxe-text-link:hover { color: #fff !important; }
.site-footer button.brxe-text-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
/* Task 51: prompt blocks with a copy button */
.dg-prompt { margin: 1.1em 0; border: 1px solid var(--c-line); border-radius: 12px; background: #f7f6fa; overflow: hidden; }
.dg-prompt__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--c-line); }
.dg-prompt__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-3); }
.dg-prompt__copy { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--c-ink, #14121b); color: #fff; font-family: var(--f-ui); font-size: 13px; font-weight: 600; cursor: pointer; }
.dg-prompt__copy:hover { filter: brightness(1.15); }
.dg-prompt__copy:focus-visible { outline: 2px solid var(--c-focus, #a23bff); outline-offset: 2px; }
.dg-prompt pre { margin: 0; padding: 14px 16px; background: transparent; }
.prose .dg-prompt pre code { white-space: pre-wrap; word-break: break-word; font-family: var(--f-mono); font-size: 14px; line-height: 1.55; }
/* Task 53: forum category pages */
body.single-forum #brx-content.wordpress,
body.bbpress #brx-content.wordpress { width: 100%; max-width: none; margin: 0; padding: 0; }
.page-head:not(.page-head--light) .btn.btn--ghost-dark,
.forum-gate .btn.btn--ghost-dark { color: #fff !important; border-color: rgba(255,255,255,.25) !important; background: transparent !important; }
.forum-hero__stats { margin: 14px 0 0; color: var(--c-ink-text-3); font-size: var(--fs-sm); }
.forum-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.forum-hero__actions .subscription-toggle { text-decoration: none; }
.thread__compact { display: none; }
.forum-empty-card { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 28px; }
.forum-empty-card p { margin: 0 0 16px; }
.forum-empty { margin: 0; color: var(--c-text-2); }
.forum-others { margin-top: 28px; }
.forum-others h2 { margin: 0 0 12px; font-size: 1.05rem; }
.forum-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.forum-pages { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.forum-pages__count { margin: 0; color: var(--c-text-3); font-size: var(--fs-xs); }
.forum-pages__links { display: flex; flex-wrap: wrap; gap: 6px; }
.forum-pages__links a,
.forum-pages__links span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--c-line); background: #fff; color: var(--c-text); text-decoration: none; font-size: var(--fs-xs); }
.forum-composer { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 22px; margin-top: 28px; scroll-margin-top: 88px; }
.forum-composer.is-shut { position: fixed; left: 0; top: 0; width: 720px; max-width: calc(100vw - 32px); visibility: hidden; pointer-events: none; z-index: -1; }
.forum-composer fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.forum-composer__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.forum-composer__head h2 { margin: 0; font-size: 1.25rem; }
.forum-field { margin: 0 0 16px; }
.forum-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.forum-composer label { font-weight: 650; }
.forum-count, .forum-hint { color: var(--c-text-3); font-weight: 500; font-size: var(--fs-xs); }
.forum-hint { margin: 6px 0 0; }
.forum-composer input[type="text"],
.forum-composer select { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--c-line-2); padding: 0 14px; font: 400 16px/1.4 var(--f-ui); background: #fff; color: var(--c-text); }
.forum-composer input:focus, .forum-composer select:focus { outline: none; border-color: #7a2cf5; box-shadow: 0 0 0 3px rgba(122, 44, 245, .2); }
.forum-composer textarea,
.forum-composer .wp-editor-area { width: 100%; min-height: 160px; }
.forum-composer .mce-edit-area iframe { min-height: 160px; }
.forum-composer .quicktags-toolbar { display: none; }
.forum-composer .bbp-template-notice { background: #fff6f6; color: #9b1c1c; border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.forum-composer .bbp-template-notice ul { list-style: none; margin: 0; padding: 0; }
.forum-composer .bbp-template-notice:has(li:empty) { display: none; }
.forum-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; }
.forum-check input { margin-top: 4px; flex: none; }
.forum-check label { font-weight: 500; }
.forum-mod { margin: 0 0 16px; border-top: 1px solid var(--c-line); padding-top: 8px; }
.forum-mod summary { cursor: pointer; font-weight: 650; margin-bottom: 12px; }
.forum-composer .bbp-submit-wrapper { margin: 0; }
.forum-gate { margin-top: 28px; }
#bbpress-forums ul, #bbpress-forums ol, .bbp-template-notice ul { list-style: none; margin: 0; padding: 0; }
@media (max-width: 640px) {
.forum-board .thread { grid-template-columns: minmax(0, 1fr); }
.forum-board .thread__stat, .forum-board .thread__last { display: none; }
.forum-board .thread__compact { display: inline; }
.forum-hero__actions .btn--lg { height: 44px; padding: 0 16px; }
}