:root {
            --zinc-950: #090b10;
            --zinc-900: #11151f;
            --zinc-850: #171c29;
            --zinc-800: #22293a;
            --zinc-700: #333d54;
            --zinc-500: #64748b;
            --zinc-400: #94a3b8;
            --zinc-300: #cbd5e1;
            --zinc-100: #f1f5f9;
            --zinc-50:  #ffffff;
            --emerald:  #10b981;
            --cobalt:   #3b82f6;
            --violet:   #8b5cf6;
            --amber:    #f59e0b;
            --cyan:     #06b6d4;
            --rose:     #f43f5e;
            --border-subtle: rgba(255, 255, 255, 0.09);
            --border-hover:  rgba(255, 255, 255, 0.22);
            --radius-lg: 10px;
            --radius-xl: 14px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--zinc-950);
            background-image: 
                radial-gradient(at 15% 0%, rgba(16, 185, 129, 0.07) 0px, transparent 45%),
                radial-gradient(at 85% 5%, rgba(59, 130, 246, 0.08) 0px, transparent 45%);
            color: var(--zinc-100);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            line-height: 1.68;
            -webkit-font-smoothing: antialiased;
        }

        /* Top Color Bar */
        .top-rainbow-bar {
            height: 3px;
            background: linear-gradient(90deg, var(--emerald), var(--cobalt), var(--violet), var(--rose), var(--amber));
        }

        /* Header */
        header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(9, 11, 16, 0.90);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--border-subtle);
        }

        .header-inner {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0.95rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .brand-logo {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            color: var(--zinc-50);
            text-decoration: none;
            font-weight: 800;
            font-size: 1.25rem;
            letter-spacing: -0.03em;
        }

        .brand-badge-icon {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: linear-gradient(135deg, var(--emerald), var(--cobalt));
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #090b10;
            font-weight: 900;
            font-size: 0.9rem;
        }

        nav.primary-nav {
            display: flex;
            align-items: center;
            gap: 1.05rem;
            flex-wrap: wrap;
        }

        .nav-item {
            color: var(--zinc-300);
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 500;
            transition: color 0.15s ease;
        }

        .nav-item:hover {
            color: var(--emerald);
        }

        .btn-primary-cta {
            background: linear-gradient(135deg, var(--emerald), #059669);
            color: #090b10;
            padding: 0.5rem 1.1rem;
            border-radius: var(--radius-lg);
            font-size: 0.85rem;
            font-weight: 700;
            text-decoration: none;
            transition: transform 0.15s ease, opacity 0.15s ease;
        }

        .btn-primary-cta:hover {
            transform: translateY(-1px);
            opacity: 0.95;
        }

        .page-wrapper {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Hero Section */
        .hero-section {
            padding: 4.5rem 0 3.5rem;
            border-bottom: 1px solid var(--border-subtle);
            display: grid;
            grid-template-columns: 1.35fr 0.65fr;
            gap: 2.5rem;
            align-items: center;
        }

        .pill-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.35rem 0.85rem;
            border-radius: 9999px;
            font-size: 0.78rem;
            font-weight: 600;
            background: rgba(16, 185, 129, 0.12);
            color: var(--emerald);
            border: 1px solid rgba(16, 185, 129, 0.3);
            margin-bottom: 1.35rem;
        }

        h1.hero-title {
            font-size: clamp(2.2rem, 4vw, 3.35rem);
            font-weight: 800;
            letter-spacing: -0.035em;
            line-height: 1.13;
            color: var(--zinc-50);
            margin-bottom: 1.25rem;
        }

        h1.hero-title span {
            background: linear-gradient(90deg, var(--emerald), var(--cobalt), var(--violet));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-lead {
            font-size: 1.1rem;
            color: var(--zinc-300);
            max-width: 64ch;
            line-height: 1.72;
            margin-bottom: 1.75rem;
        }

        .blogger-bio-card {
            background: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            border-top: 3px solid var(--cobalt);
            border-radius: var(--radius-xl);
            padding: 1.6rem;
        }

        .bio-top {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            margin-bottom: 1rem;
        }

        .bio-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--cobalt), var(--violet));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.1rem;
            color: #fff;
        }

        .bio-list {
            list-style: none;
            font-size: 0.84rem;
            color: var(--zinc-300);
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .bio-list li::before {
            content: "✓ ";
            color: var(--emerald);
            font-weight: 800;
        }

        /* Category Color Legend Bar */
        .pillars-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 0.75rem;
            margin-top: 2rem;
        }

        .pillar-mini-card {
            background: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 0.85rem 1rem;
            cursor: pointer;
            transition: transform 0.15s ease, border-color 0.15s ease;
        }

        .pillar-mini-card:hover {
            transform: translateY(-2px);
        }

        
        /* Head-to-Head Pros & Cons Arena */
        .arena-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            margin-bottom: 1.75rem;
        }
        .arena-tab-btn {
            background: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            color: var(--zinc-300);
            padding: 0.65rem 1.15rem;
            border-radius: var(--radius-lg);
            font-size: 0.86rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .arena-tab-btn:hover {
            border-color: var(--emerald);
            color: #fff;
        }
        .arena-tab-btn.active {
            background: rgba(16, 185, 129, 0.15);
            border-color: var(--emerald);
            color: var(--emerald);
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
        }
        .arena-panel {
            display: none;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.25rem;
        }
        .arena-panel.active {
            display: grid;
        }
        .vs-battle-card {
            background: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-xl);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        }
        .vs-battle-card.winner-card {
            border: 2px solid var(--emerald);
            background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, var(--zinc-900) 100%);
        }
        .vs-winner-ribbon {
            position: absolute;
            top: -11px;
            right: 16px;
            background: var(--emerald);
            color: #090b10;
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0.2rem 0.65rem;
            border-radius: 999px;
            box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
        }
        .vs-card-header {
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--border-subtle);
            padding-bottom: 0.85rem;
        }
        .vs-tool-title {
            font-size: 1.2rem;
            font-weight: 800;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.25rem;
        }
        .vs-score-pill {
            font-size: 0.78rem;
            background: var(--zinc-950);
            color: var(--emerald);
            border: 1px solid rgba(16, 185, 129, 0.35);
            padding: 0.15rem 0.5rem;
            border-radius: 6px;
            font-family: monospace;
        }
        .vs-best-for {
            font-size: 0.82rem;
            color: var(--zinc-400);
            font-weight: 500;
        }
        .pros-cons-section {
            margin-bottom: 1.25rem;
        }
        .pc-heading {
            font-size: 0.76rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 800;
            margin: 0.75rem 0 0.4rem;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        .pc-heading.pro-title { color: var(--emerald); }
        .pc-heading.con-title { color: #fb7185; }
        .pc-list {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 0.84rem;
            color: var(--zinc-300);
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }
        .pc-list li {
            line-height: 1.45;
            padding-left: 1.2rem;
            position: relative;
        }
        .pc-list.pro-items li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--emerald);
            font-weight: 800;
        }
        .pc-list.con-items li::before {
            content: "✕";
            position: absolute;
            left: 0;
            color: #fb7185;
            font-weight: 800;
        }
        .vs-verdict-box {
            background: var(--zinc-950);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 0.75rem 0.9rem;
            font-size: 0.81rem;
            color: var(--zinc-300);
            margin-bottom: 1rem;
            line-height: 1.45;
        }
        .vs-verdict-box strong {
            color: #fff;
        }
        .vs-cta-btn {
            display: block;
            text-align: center;
            background: var(--zinc-800);
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.86rem;
            padding: 0.7rem 1rem;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-subtle);
            transition: all 0.15s ease;
        }
        .vs-cta-btn:hover {
            background: var(--emerald);
            color: #090b10;
            border-color: var(--emerald);
        }
        .winner-card .vs-cta-btn {
            background: var(--emerald);
            color: #090b10;
            border-color: var(--emerald);
        }
        .winner-card .vs-cta-btn:hover {
            filter: brightness(1.1);
        }
        /* Article Inline Pros & Cons Box */
        .article-pc-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin: 1.25rem 0;
        }
        .article-pc-card {
            background: var(--zinc-950);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 1.15rem;
        }
        .article-pc-card h5 {
            font-size: 0.95rem;
            font-weight: 800;
            color: #fff;
            margin: 0 0 0.65rem 0;
            padding-bottom: 0.45rem;
            border-bottom: 1px solid var(--border-subtle);
        }

        /* Section Blocks */
        .section-block {
            padding: 3.5rem 0;
            border-bottom: 1px solid var(--border-subtle);
        }

        .section-header-wrap {
            margin-bottom: 2rem;
        }

        .section-eyebrow {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--emerald);
            font-weight: 700;
            display: block;
            margin-bottom: 0.35rem;
        }

        h2.section-heading {
            font-size: 1.8rem;
            font-weight: 750;
            letter-spacing: -0.025em;
            color: var(--zinc-50);
        }

        /* 3 Interactive Simulators Grid */
        .simulators-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
        }

        .sim-card {
            background-color: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-xl);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .sim-card h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--zinc-50);
            margin-bottom: 0.35rem;
        }

        .sim-card p {
            font-size: 0.83rem;
            color: var(--zinc-400);
            margin-bottom: 1rem;
        }

        .range-slider {
            width: 100%;
            accent-color: var(--emerald);
            margin: 0.6rem 0 1rem;
            cursor: pointer;
        }

        .sim-output-box {
            background-color: var(--zinc-950);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 0.9rem 1.1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sim-big-num {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--emerald);
            letter-spacing: -0.02em;
        }

        .sim-select {
            width: 100%;
            background-color: var(--zinc-950);
            color: var(--zinc-100);
            border: 1px solid var(--zinc-700);
            border-radius: var(--radius-lg);
            padding: 0.6rem 0.75rem;
            font-size: 0.84rem;
            margin-bottom: 1rem;
            outline: none;
        }

        .gauge-track {
            height: 8px;
            background: var(--zinc-800);
            border-radius: 999px;
            overflow: hidden;
            margin: 0.5rem 0;
        }

        .gauge-fill {
            height: 100%;
            width: 98%;
            background-color: var(--emerald);
            transition: width 0.35s ease, background-color 0.35s ease;
        }

        /* Two-Column Knowledge Hub Layout */
        .hub-layout {
            display: grid;
            grid-template-columns: 310px 1fr;
            gap: 2.75rem;
            padding: 2.5rem 0 5rem;
            align-items: start;
        }

        aside.hub-sidebar {
            position: sticky;
            top: 4.5rem;
            max-height: calc(100vh - 5.5rem);
            overflow-y: auto;
            padding-right: 0.4rem;
        }

        .sidebar-box {
            background-color: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-xl);
            padding: 1.2rem;
            margin-bottom: 1.2rem;
        }

        .sidebar-title {
            font-size: 0.74rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--zinc-400);
            font-weight: 700;
            margin-bottom: 0.8rem;
        }

        .search-input {
            width: 100%;
            background-color: var(--zinc-950);
            border: 1px solid var(--zinc-700);
            color: var(--zinc-100);
            padding: 0.65rem 0.85rem;
            border-radius: var(--radius-lg);
            font-size: 0.85rem;
            margin-bottom: 0.85rem;
            outline: none;
        }

        .search-input:focus {
            border-color: var(--emerald);
        }

        .filter-buttons {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .filter-btn {
            text-align: left;
            background: transparent;
            border: 1px solid transparent;
            color: var(--zinc-300);
            padding: 0.48rem 0.75rem;
            border-radius: var(--radius-lg);
            font-size: 0.83rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.15s ease;
        }

        .filter-btn:hover, .filter-btn.active {
            background-color: var(--zinc-850);
            color: var(--zinc-50);
            border-color: var(--border-subtle);
        }

        .toc-list {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .toc-item {
            display: flex;
            align-items: flex-start;
            gap: 0.55rem;
            text-decoration: none;
            color: var(--zinc-400);
            font-size: 0.79rem;
            line-height: 1.4;
            padding: 0.35rem 0.45rem;
            border-radius: 6px;
            transition: color 0.15s, background-color 0.15s;
        }

        .toc-item:hover {
            color: var(--zinc-50);
            background-color: var(--zinc-850);
        }

        .toc-num {
            font-family: monospace;
            font-size: 0.75rem;
            margin-top: 1px;
        }

        /* Main Articles Stream */
        .articles-stream {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        article.guide-article {
            background-color: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-xl);
            padding: 2.25rem;
            scroll-margin-top: 5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        }

        .article-meta-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.55rem;
            margin-bottom: 1rem;
            font-size: 0.75rem;
        }

        .meta-num {
            font-family: monospace;
            font-weight: 700;
            background: var(--zinc-950);
            padding: 0.2rem 0.55rem;
            border-radius: 6px;
            border: 1px solid;
        }

        .meta-cat-pill {
            padding: 0.2rem 0.65rem;
            border-radius: 6px;
            font-weight: 700;
        }

        .meta-badge {
            background: var(--zinc-850);
            color: var(--zinc-300);
            padding: 0.2rem 0.65rem;
            border-radius: 6px;
            font-weight: 500;
        }

        .meta-deal {
            background: rgba(16, 185, 129, 0.12);
            color: var(--emerald);
            border: 1px solid rgba(16, 185, 129, 0.3);
            padding: 0.2rem 0.65rem;
            border-radius: 6px;
            font-weight: 600;
        }

        .meta-time {
            color: var(--zinc-400);
            margin-left: auto;
            font-weight: 500;
        }

        h3.article-title {
            font-size: 1.55rem;
            font-weight: 750;
            letter-spacing: -0.02em;
            line-height: 1.3;
            color: var(--zinc-50);
            margin-bottom: 1.25rem;
        }

        /* Direct Answer Featured Snippet Box */
        .snippet-callout {
            background-color: var(--zinc-950);
            border: 1px solid var(--border-subtle);
            border-left: 4px solid var(--emerald);
            border-radius: var(--radius-lg);
            padding: 1.15rem 1.3rem;
            margin-bottom: 1.25rem;
        }

        .snippet-header {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 800;
            margin-bottom: 0.4rem;
        }

        .snippet-body {
            font-size: 0.96rem;
            color: var(--zinc-100);
            max-width: 68ch;
            line-height: 1.62;
        }

        /* Author Personal Experience Note */
        .author-story-box {
            background: rgba(255, 255, 255, 0.025);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 1.05rem 1.3rem;
            margin-bottom: 1.5rem;
        }

        .story-author {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 0.82rem;
            color: var(--zinc-100);
            margin-bottom: 0.35rem;
        }

        .story-avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.68rem;
            font-weight: 800;
        }

        .author-story-box p {
            font-size: 0.92rem;
            color: var(--zinc-300);
            font-style: italic;
            max-width: 68ch;
        }

        /* Blogger Pro Tip Callout */
        .blogger-protip-box {
            border-radius: var(--radius-lg);
            padding: 1rem 1.25rem;
            margin: 1.5rem 0;
            max-width: 68ch;
        }

        .protip-label {
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            margin-bottom: 0.3rem;
        }

        .protip-text {
            font-size: 0.9rem;
            color: var(--zinc-100);
            line-height: 1.55;
        }

        /* Visual Diagnostic Box */
        .visual-diagnostic-box {
            background-color: var(--zinc-950);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }

        .diag-title {
            font-size: 0.82rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.85rem;
        }

        .diag-grid {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .diag-row {
            display: grid;
            grid-template-columns: 1.2fr 1.2fr 1.6fr;
            gap: 0.75rem;
            padding: 0.6rem 0.8rem;
            background: var(--zinc-900);
            border-radius: 6px;
            font-size: 0.83rem;
            align-items: center;
        }

        .diag-col-label { font-weight: 700; color: var(--zinc-100); }
        .diag-col-bad { color: #fb7185; font-weight: 500; }
        .diag-col-good { color: var(--emerald); font-weight: 600; }

        /* Article Prose */
        .article-prose {
            color: var(--zinc-300);
            font-size: 0.98rem;
            line-height: 1.75;
        }

        .article-prose p,
        .article-prose ul,
        .article-prose ol {
            max-width: 68ch;
            margin-bottom: 1.15rem;
        }

        .article-prose ul,
        .article-prose ol {
            padding-left: 1.35rem;
        }

        .article-prose li {
            margin-bottom: 0.5rem;
        }

        .article-prose h4 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--zinc-50);
            margin: 1.65rem 0 0.65rem;
            letter-spacing: -0.015em;
        }

        .article-prose a {
            color: #38bdf8;
            text-decoration: underline;
            text-underline-offset: 3px;
            font-weight: 600;
        }

        .article-prose a:hover {
            color: var(--emerald);
        }

        .article-prose code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 0.85em;
            background: var(--zinc-950);
            border: 1px solid var(--border-subtle);
            padding: 0.15rem 0.4rem;
            border-radius: 4px;
            color: #67e8f9;
        }

        pre.code-block {
            background-color: var(--zinc-950);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 1.15rem;
            overflow-x: auto;
            margin: 1.25rem 0;
        }

        pre.code-block code {
            background: none;
            border: none;
            padding: 0;
            color: var(--zinc-300);
            font-size: 0.82rem;
            line-height: 1.6;
        }

        /* Tables */
        .table-responsive {
            overflow-x: auto;
            margin: 1.5rem 0;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
        }

        .styled-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.85rem;
        }

        .styled-table th {
            background-color: var(--zinc-950);
            color: var(--zinc-50);
            padding: 0.85rem 1rem;
            font-weight: 700;
            border-bottom: 1px solid var(--border-subtle);
        }

        .styled-table td {
            padding: 0.85rem 1rem;
            border-bottom: 1px solid var(--border-subtle);
            color: var(--zinc-300);
        }

        /* Recommended Tool Stack Cards */
        .stack-recommendation-panel {
            margin-top: 1.75rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border-subtle);
        }

        .stack-panel-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--zinc-300);
            font-weight: 700;
            margin-bottom: 0.95rem;
        }

        .stack-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
            gap: 0.85rem;
        }

        .tool-card-cta {
            background-color: var(--zinc-950);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 0.95rem 1.15rem;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            transition: border-color 0.15s ease, transform 0.15s ease;
        }

        .tool-card-cta:hover {
            border-color: var(--card-accent, var(--emerald));
            transform: translateY(-2px);
        }

        .tool-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
        }

        .tool-card-name {
            font-size: 0.93rem;
            font-weight: 700;
            color: var(--zinc-50);
        }

        .tool-card-badge {
            font-size: 0.7rem;
            padding: 0.15rem 0.5rem;
            border-radius: 5px;
            font-weight: 600;
        }

        .tool-card-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.79rem;
        }

        .tool-card-deal {
            color: var(--zinc-300);
            font-weight: 500;
        }

        .tool-card-arrow {
            font-weight: 700;
        }

        /* Secret Owner Command Center Drawer */
        #adminDrawer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--zinc-900);
            border-top: 3px solid var(--emerald);
            box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.9);
            padding: 1.5rem 2rem;
            z-index: 9999;
            display: none;
            max-height: 85vh;
            overflow-y: auto;
        }

        #adminDrawer.visible { display: block; }

        .admin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
            gap: 0.65rem;
            margin: 1rem 0 1.25rem;
        }

        .admin-input-group label {
            display: block;
            font-size: 0.72rem;
            color: var(--zinc-300);
            margin-bottom: 0.2rem;
            font-weight: 600;
        }

        .admin-input-group input {
            width: 100%;
            background: var(--zinc-950);
            border: 1px solid var(--zinc-700);
            color: var(--zinc-50);
            padding: 0.42rem 0.6rem;
            border-radius: 6px;
            font-size: 0.78rem;
        }

        .btn-export-clean {
            background: linear-gradient(135deg, var(--emerald), #059669);
            color: #090b10;
            border: none;
            padding: 0.7rem 1.35rem;
            border-radius: var(--radius-lg);
            font-weight: 800;
            font-size: 0.88rem;
            cursor: pointer;
        }

        .btn-test-browser {
            background-color: var(--zinc-800);
            color: var(--zinc-100);
            border: 1px solid var(--border-subtle);
            padding: 0.7rem 1.15rem;
            border-radius: var(--radius-lg);
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
        }

        footer {
            border-top: 1px solid var(--border-subtle);
            padding: 3.5rem 0 2.5rem;
            color: var(--zinc-500);
            font-size: 0.85rem;
        }

        .footer-inner {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .secret-admin-trigger {
            color: var(--zinc-800);
            font-size: 0.75rem;
            cursor: pointer;
            user-select: none;
        }

        .secret-admin-trigger:hover { color: var(--zinc-500); }

        @media (max-width: 1024px) {
            .hero-section { grid-template-columns: 1fr; }
            .pillars-grid { grid-template-columns: repeat(3, 1fr); }
            .simulators-grid { grid-template-columns: 1fr; }
            .hub-layout { grid-template-columns: 1fr; }
            aside.hub-sidebar { position: static; max-height: none; }
            .diag-row { grid-template-columns: 1fr; }
        }

        @media (max-width: 600px) {
            .pillars-grid { grid-template-columns: repeat(2, 1fr); }
            article.guide-article { padding: 1.5rem; }
        }

        /* --- Fixed Missing Avatar, Spotlight, Social & Legal Compliance Styles --- */
        .ftc-top-bar {
            background: rgba(17, 21, 31, 0.95);
            border-bottom: 1px solid var(--border-subtle);
            font-size: 0.78rem;
            color: var(--zinc-300);
            padding: 0.45rem 1.5rem;
        }
        .ftc-top-inner {
            max-width: 1320px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        .ftc-top-links {
            display: inline-flex;
            align-items: center;
            gap: 0.85rem;
            flex-wrap: wrap;
        }
        .ftc-link-btn {
            background: none;
            border: none;
            color: var(--emerald);
            font-size: 0.77rem;
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 3px;
            cursor: pointer;
            padding: 0;
        }
        .ftc-link-btn:hover {
            color: #fff;
        }

        .nav-author-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-subtle);
            padding: 0.22rem 0.7rem 0.22rem 0.28rem;
            border-radius: 9999px;
            font-size: 0.81rem;
            font-weight: 600;
            color: var(--zinc-100);
            text-decoration: none;
            transition: border-color 0.15s ease, background-color 0.15s ease;
        }
        .nav-author-pill:hover {
            border-color: var(--emerald);
            background: rgba(16, 185, 129, 0.08);
        }
        .nav-author-img {
            width: 24px !important;
            height: 24px !important;
            max-width: 24px !important;
            border-radius: 50%;
            object-fit: cover;
            border: 1.5px solid var(--emerald);
            display: block;
            flex-shrink: 0;
        }

        .bio-avatar-wrapper {
            position: relative;
            width: 56px;
            height: 56px;
            flex-shrink: 0;
        }
        .bio-avatar-img {
            width: 56px !important;
            height: 56px !important;
            max-width: 56px !important;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--emerald);
            display: block;
        }
        .online-indicator {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background-color: var(--emerald);
            border: 2px solid var(--zinc-900);
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
        }

        .social-links-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            margin-top: 1.1rem;
            padding-top: 0.95rem;
            border-top: 1px solid var(--border-subtle);
        }
        .social-pill-link {
            display: inline-flex;
            align-items: center;
            gap: 0.38rem;
            padding: 0.34rem 0.68rem;
            border-radius: 8px;
            background: var(--zinc-950);
            border: 1px solid var(--border-subtle);
            color: var(--zinc-300);
            font-size: 0.75rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.15s ease;
        }
        .social-pill-link:hover {
            border-color: var(--emerald);
            color: #fff;
            transform: translateY(-1px);
            background: rgba(16, 185, 129, 0.1);
        }
        .social-pill-link svg {
            width: 13px;
            height: 13px;
            fill: currentColor;
            flex-shrink: 0;
        }

        /* Founder Spotlight Card */
        .founder-spotlight-card {
            display: grid;
            grid-template-columns: 165px 1fr;
            gap: 1.75rem;
            align-items: center;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, var(--zinc-900) 55%);
            border: 1px solid rgba(16, 185, 129, 0.28);
            border-radius: var(--radius-xl);
            padding: 1.65rem 1.85rem;
            margin: 2.5rem 0 0.5rem;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
        }
        .spotlight-img {
            width: 165px !important;
            height: 165px !important;
            max-width: 165px !important;
            border-radius: var(--radius-lg);
            object-fit: cover;
            border: 2px solid rgba(16, 185, 129, 0.4);
            display: block;
        }
        .spotlight-badge {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--emerald);
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.3);
            padding: 0.2rem 0.65rem;
            border-radius: 999px;
            margin-bottom: 0.55rem;
        }
        .spotlight-heading {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--zinc-50);
            letter-spacing: -0.02em;
            margin-bottom: 0.45rem;
        }
        .spotlight-content p {
            font-size: 0.9rem;
            color: var(--zinc-300);
            line-height: 1.6;
            max-width: 78ch;
        }
        .spotlight-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            margin-top: 1.1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-subtle);
            font-size: 0.82rem;
            color: var(--zinc-400);
        }
        .spotlight-stats strong {
            display: block;
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--emerald);
        }

        /* Story Avatar inside Articles */
        .story-avatar-img {
            width: 28px !important;
            height: 28px !important;
            max-width: 28px !important;
            border-radius: 50%;
            object-fit: cover;
            border: 1.5px solid var(--emerald);
            flex-shrink: 0;
            display: inline-block;
        }

        .toc-text {
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .article-pc-card h4 {
            font-size: 0.95rem;
            font-weight: 800;
            color: #fff;
            margin: 0 0 0.65rem 0;
            padding-bottom: 0.45rem;
            border-bottom: 1px solid var(--border-subtle);
        }

        /* 8-Card 4x2 Balanced Pillars Grid */
        .pillars-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            margin-top: 2rem;
        }

        /* Legal & Compliance Center Modal */
        .legal-modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(9, 11, 16, 0.85);
            backdrop-filter: blur(8px);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1.25rem;
        }
        .legal-modal-backdrop.open {
            display: flex;
        }
        .legal-modal-card {
            background: var(--zinc-900);
            border: 1px solid var(--border-hover);
            border-top: 3px solid var(--emerald);
            border-radius: var(--radius-xl);
            max-width: 860px;
            width: 100%;
            max-height: 86vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75);
        }
        .legal-modal-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border-subtle);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .legal-modal-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            padding: 0.85rem 1.5rem;
            background: var(--zinc-950);
            border-bottom: 1px solid var(--border-subtle);
        }
        .legal-tab-btn {
            background: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            color: var(--zinc-300);
            padding: 0.42rem 0.85rem;
            border-radius: 8px;
            font-size: 0.79rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .legal-tab-btn.active, .legal-tab-btn:hover {
            background: rgba(16, 185, 129, 0.15);
            border-color: var(--emerald);
            color: var(--emerald);
        }
        .legal-modal-body {
            padding: 1.5rem;
            overflow-y: auto;
            font-size: 0.88rem;
            color: var(--zinc-300);
            line-height: 1.7;
        }
        .legal-panel {
            display: none;
        }
        .legal-panel.active {
            display: block;
        }
        .legal-panel h3 {
            color: #fff;
            font-size: 1.15rem;
            margin-bottom: 0.65rem;
        }
        .legal-panel h4 {
            color: var(--zinc-100);
            font-size: 0.95rem;
            margin: 1.15rem 0 0.4rem;
        }
        .legal-panel p, .legal-panel ul {
            margin-bottom: 0.85rem;
        }
        .legal-panel ul {
            padding-left: 1.25rem;
        }

        /* Cookie Consent Bar */
        .cookie-consent-bar {
            position: fixed;
            bottom: 1rem;
            left: 1rem;
            right: 1rem;
            max-width: 980px;
            margin: 0 auto;
            background: rgba(17, 21, 31, 0.97);
            border: 1px solid rgba(16, 185, 129, 0.35);
            border-radius: var(--radius-xl);
            padding: 1rem 1.35rem;
            z-index: 9000;
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 1.25rem;
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(12px);
        }
        .cookie-consent-bar.visible {
            display: flex;
        }

        /* Toast Notification */
        .site-toast {
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            background: var(--zinc-900);
            border: 1px solid var(--emerald);
            color: #fff;
            padding: 0.8rem 1.2rem;
            border-radius: var(--radius-lg);
            font-size: 0.85rem;
            font-weight: 600;
            z-index: 10000;
            display: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
        }
        .site-toast.show {
            display: block;
        }

        @media (max-width: 768px) {
            .founder-spotlight-card {
                grid-template-columns: 1fr;
                text-align: left;
            }
            .spotlight-stats {
                grid-template-columns: repeat(2, 1fr);
            }
            .cookie-consent-bar {
                flex-direction: column;
                align-items: flex-start;
            }
        }


        /* --- V10 RESPONSIVE MOBILE-FIRST HEADER, COUPONS, VA SECURITY SOP & ANTI-TRUNCATION FIXES --- */
        .mobile-menu-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            background: var(--zinc-900);
            border: 1px solid var(--border-hover);
            color: var(--zinc-50);
            padding: 0.45rem 0.8rem;
            border-radius: 8px;
            font-size: 0.82rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .mobile-menu-toggle:hover {
            border-color: var(--emerald);
            color: var(--emerald);
        }
        .header-right-controls {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }
        /* Fix pill-badge on mobile so spans never crush into vertical columns */
        .pill-badge {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.45rem;
            padding: 0.42rem 0.9rem;
            border-radius: 9999px;
            font-size: 0.78rem;
            font-weight: 600;
            line-height: 1.4;
            background: rgba(16, 185, 129, 0.12);
            color: var(--emerald);
            border: 1px solid rgba(16, 185, 129, 0.3);
            margin-bottom: 1.25rem;
            max-width: 100%;
        }
        /* Prevent horizontal clipping on titles, badges, and tables */
        h1, h2, h3, h4, .article-title, .vs-tool-title, .diag-col-label, .diag-col-bad, .diag-col-good {
            overflow-wrap: break-word;
            word-wrap: break-word;
        }
        .tool-card-badge, .vs-winner-ribbon, .spotlight-badge {
            white-space: normal;
            text-align: center;
            line-height: 1.3;
        }
        /* Verified Coupons & Perks Grid */
        .coupons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
            gap: 1.15rem;
        }
        .coupon-card {
            background: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-xl);
            padding: 1.35rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 1rem;
            position: relative;
            transition: transform 0.15s ease, border-color 0.15s ease;
        }
        .coupon-card:hover {
            transform: translateY(-2px);
            border-color: var(--emerald);
        }
        .coupon-badge-top {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.22rem 0.65rem;
            border-radius: 6px;
            background: rgba(16, 185, 129, 0.12);
            color: var(--emerald);
            border: 1px solid rgba(16, 185, 129, 0.3);
            align-self: flex-start;
        }
        .coupon-code-box {
            background: var(--zinc-950);
            border: 1px dashed rgba(16, 185, 129, 0.45);
            border-radius: 8px;
            padding: 0.55rem 0.8rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            font-size: 0.8rem;
        }
        .coupon-code-text {
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-weight: 800;
            color: var(--emerald);
            letter-spacing: 0.04em;
        }
        .coupon-actions {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 0.55rem;
        }
        .btn-copy-code {
            background: var(--zinc-850);
            border: 1px solid var(--border-subtle);
            color: var(--zinc-100);
            padding: 0.58rem 0.75rem;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .btn-copy-code:hover {
            border-color: var(--emerald);
            color: var(--emerald);
        }
        .btn-claim-coupon {
            background: var(--emerald);
            color: #090b10;
            text-decoration: none;
            text-align: center;
            padding: 0.58rem 0.75rem;
            border-radius: 8px;
            font-size: 0.82rem;
            font-weight: 800;
            transition: filter 0.15s ease;
        }
        .btn-claim-coupon:hover {
            filter: brightness(1.1);
        }

        /* VA & VPS Security SOP 4-Tab Interactive Hub */
        .sop-tabs-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
            margin-bottom: 1.5rem;
        }
        .sop-tab-btn {
            background: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            color: var(--zinc-300);
            padding: 0.65rem 1.1rem;
            border-radius: var(--radius-lg);
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .sop-tab-btn:hover {
            border-color: var(--cobalt);
            color: #fff;
        }
        .sop-tab-btn.active {
            background: rgba(59, 130, 246, 0.15);
            border-color: var(--cobalt);
            color: #60a5fa;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
        }
        .sop-panel {
            display: none;
            background: var(--zinc-900);
            border: 1px solid var(--border-subtle);
            border-top: 3px solid var(--cobalt);
            border-radius: var(--radius-xl);
            padding: 1.75rem;
        }
        .sop-panel.active {
            display: block;
        }
        .sop-grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.25rem;
            margin-top: 1rem;
        }
        .sop-step-card {
            background: var(--zinc-950);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            padding: 1.2rem;
        }
        .sop-step-card h4 {
            color: #fff;
            font-size: 0.98rem;
            margin-bottom: 0.5rem;
        }
        .sop-step-card p, .sop-step-card li {
            font-size: 0.86rem;
            color: var(--zinc-300);
            line-height: 1.6;
        }

        /* Inline FTC Notice Pill inside Commercial Sections */
        .inline-ftc-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            padding: 0.35rem 0.75rem;
            font-size: 0.76rem;
            color: var(--zinc-400);
            margin-top: 0.65rem;
        }

        /* Responsive Mobile Header & Layout Overhaul */
        @media (max-width: 1024px) {
            .header-inner {
                padding: 0.7rem 1rem;
                flex-wrap: wrap;
                position: relative;
            }
            .mobile-menu-toggle {
                display: inline-flex;
            }
            nav.primary-nav {
                display: none;
                width: 100%;
                flex-direction: column;
                align-items: stretch;
                gap: 0.4rem;
                padding-top: 0.85rem;
                margin-top: 0.65rem;
                border-top: 1px solid var(--border-subtle);
            }
            nav.primary-nav.mobile-open {
                display: flex;
            }
            nav.primary-nav .nav-item,
            nav.primary-nav .btn-primary-cta {
                padding: 0.6rem 0.85rem;
                border-radius: 8px;
                background: var(--zinc-900);
                border: 1px solid var(--border-subtle);
                text-align: left;
                display: block;
                width: 100%;
            }
            nav.primary-nav .btn-primary-cta {
                background: linear-gradient(135deg, var(--emerald), #059669);
                color: #090b10;
                text-align: center;
                border: none;
            }
            .hero-section {
                padding: 2.25rem 0 2rem;
                gap: 1.75rem;
            }
            h1.hero-title {
                font-size: clamp(1.75rem, 6vw, 2.4rem);
                line-height: 1.18;
            }
            .hero-lead {
                font-size: 0.96rem;
            }
            .pillars-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 640px) {
            .ftc-top-bar {
                padding: 0.45rem 1rem;
                font-size: 0.73rem;
            }
            .page-wrapper {
                padding: 0 1rem;
            }
            .nav-author-pill span {
                display: none;
            }
            .nav-author-pill {
                padding: 0.2rem;
            }
            .coupon-actions {
                grid-template-columns: 1fr;
            }
        }


        @media (min-width: 1025px) {
            .header-inner {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: nowrap;
                padding: 0.75rem 1.5rem;
            }
            .header-right-controls {
                order: 3;
            }
            nav.primary-nav {
                order: 2;
                display: flex;
                align-items: center;
                gap: 0.9rem;
                flex-wrap: nowrap;
                white-space: nowrap;
            }
        }

    
.skip-link{position:absolute;left:-9999px;top:0;background:#10b981;color:#000;padding:.6rem 1rem;z-index:10000;font-weight:700}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #34d399;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- Shared: links styled as the old modal buttons ---- */
a.ftc-link-btn { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Home: guide cards ---- */
.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.guide-card { position: relative; background: var(--zinc-900); border: 1px solid var(--border-subtle); border-top: 3px solid var(--accent, var(--emerald)); border-radius: var(--radius-xl); padding: 1.2rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; transition: border-color .15s ease, transform .15s ease; }
.guide-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.guide-card-meta { display: flex; gap: .6rem; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, var(--emerald)); }
.guide-card-meta span + span { color: var(--zinc-500); }
.guide-card h3 { font-size: 1.04rem; line-height: 1.38; font-weight: 700; letter-spacing: -.01em; }
.guide-card h3 a { color: var(--zinc-50); text-decoration: none; }
.guide-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.guide-card h3 a:focus-visible { outline: none; }
.guide-card:focus-within { outline: 2px solid var(--emerald); outline-offset: 2px; }
.guide-card p { font-size: .87rem; line-height: 1.6; color: var(--zinc-400); flex: 1; }
.guide-card-more { font-size: .82rem; font-weight: 700; color: var(--accent, var(--emerald)); }
.guides-empty { color: var(--zinc-400); padding: 2rem 0; }

/* ---- Guide pages ---- */
.gp-wrap { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.25rem 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 3.5rem; }
.crumbs { grid-column: 1 / -1; font-size: .82rem; color: var(--zinc-500); display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs a { color: var(--zinc-400); text-decoration: none; }
.crumbs a:hover { color: var(--emerald); }
.gp-main, .gp-article { min-width: 0; max-width: 760px; }
.gp-article > header { position: static; background: none; backdrop-filter: none; border: 0; z-index: auto; }
.gp-kicker { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent, var(--emerald)); }
.gp-article h1 { font-size: clamp(1.85rem, 4.2vw, 2.65rem); line-height: 1.14; letter-spacing: -.03em; font-weight: 800; color: var(--zinc-50); margin: .55rem 0 1.1rem; text-wrap: balance; }
.byline { display: flex; align-items: center; gap: .75rem; font-size: .88rem; color: var(--zinc-400); }
.byline img { border-radius: 50%; object-fit: cover; }
.byline a { color: var(--zinc-100); font-weight: 700; text-decoration: none; }
.byline .sep { opacity: .5; }
.aff-note { font-size: .8rem; line-height: 1.55; color: var(--zinc-400); border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, .02); border-radius: 8px; padding: .65rem .9rem; margin: 1.35rem 0 1.75rem; }
.aff-note a { color: var(--zinc-300); }
.gp-article .snippet-callout { margin: 0 0 2rem; }
.gp-article .snippet-body { font-size: 1.02rem; line-height: 1.7; color: var(--zinc-100); }
.gp-body { font-size: 1.07rem; line-height: 1.8; color: var(--zinc-300); overflow-wrap: break-word; }
.gp-body > * { max-width: 70ch; }
.gp-body > .table-responsive, .gp-body > pre, .gp-body > .code-block, .gp-body > .stack-recommendation-panel { max-width: none; }
.gp-body h2 { font-size: 1.5rem; line-height: 1.3; letter-spacing: -.02em; font-weight: 750; color: var(--zinc-50); margin: 2.6rem 0 .9rem; scroll-margin-top: 5.5rem; }
.gp-body h3 { font-size: 1.17rem; line-height: 1.4; font-weight: 700; color: var(--zinc-50); margin: 1.9rem 0 .6rem; scroll-margin-top: 5.5rem; }
.gp-body p, .gp-body ul, .gp-body ol { margin: 0 0 1.15rem; }
.gp-body ul, .gp-body ol { padding-inline-start: 1.4rem; }
.gp-body li { margin: .4rem 0; }
.gp-body li::marker { color: var(--zinc-500); }
.gp-body strong { color: var(--zinc-100); }
.gp-body a { color: #34d399; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gp-body a:hover { color: #6ee7b7; }
.gp-body :not(pre) > code { font-size: .88em; background: var(--zinc-850); border: 1px solid var(--border-subtle); padding: .08em .35em; border-radius: 5px; color: var(--zinc-100); }
.gp-body pre { font-size: .86rem; line-height: 1.6; }
.gp-body .table-responsive { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.gp-body .styled-table { min-width: 560px; }
.gp-body .styled-table td, .gp-body .styled-table th { vertical-align: top; }
.callout { border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent, var(--emerald)); background: rgba(255, 255, 255, .025); border-radius: 10px; padding: 1rem 1.2rem; margin: 1.6rem 0; }
.callout > :last-child { margin-bottom: 0; }
.callout-title { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, var(--emerald)); margin-bottom: .4rem; }
.callout.warn { --accent: var(--amber); }
.callout.risk { --accent: var(--rose); }
.gp-body .author-story-box, .gp-body .blogger-protip-box { max-width: 70ch; }
.gp-updated { font-size: .82rem; color: var(--zinc-500); margin-top: 2.5rem; }

.author-box { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: start; margin-top: 2.5rem; padding: 1.25rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--zinc-900); }
.author-box img { border-radius: 50%; object-fit: cover; }
.author-box strong { color: var(--zinc-50); }
.author-box p { font-size: .9rem; color: var(--zinc-400); margin-top: .25rem; line-height: 1.6; }
.author-box nav { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .55rem; font-size: .82rem; }
.author-box nav a { color: var(--zinc-300); }

.gp-aside { position: sticky; top: 5.5rem; align-self: start; display: grid; gap: 1.25rem; max-height: calc(100vh - 7rem); overflow: auto; }
.gp-aside h2 { font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--zinc-400); margin-bottom: .6rem; }
.gp-toc ol { list-style: none; display: grid; gap: .1rem; border-left: 1px solid var(--border-subtle); }
.gp-toc a { display: block; padding: .3rem .8rem; font-size: .85rem; line-height: 1.45; color: var(--zinc-400); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; }
.gp-toc a:hover { color: var(--zinc-50); border-left-color: var(--emerald); }

.related { margin-top: 3rem; }
.related > h2 { font-size: 1.15rem; color: var(--zinc-50); margin-bottom: 1rem; }
.related .guide-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.legal-page { max-width: 760px; }
.legal-page h1 { margin-bottom: .5rem; }
.legal-page .gp-body h2 { font-size: 1.25rem; }

@media (max-width: 1024px) {
    .gp-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .gp-aside { position: static; max-height: none; order: -1; margin-bottom: 1.5rem; }
    .gp-toc { display: none; }
}
@media (max-width: 860px) {
    #site-footer .page-wrapper > div:first-child { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
}
.gp-body :not(pre) > code { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .gp-wrap { padding: 1.25rem 1rem 3.5rem; }
    .gp-body { font-size: 1.02rem; }
    .gp-body h2 { font-size: 1.32rem; }
    .author-box { grid-template-columns: 48px 1fr; }
    .author-box img { width: 48px; height: 48px; }
    .guide-cards { grid-template-columns: 1fr; }
}

/* ---- Affiliate dashboard ---- */
.aff-dash { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .8); overflow: auto; padding: 1rem; font: 14px system-ui, sans-serif; color: #e4e4e7; }
.aff-dash-card { max-width: 880px; margin: 0 auto; background: #18181b; border: 1px solid #3f3f46; border-radius: 12px; padding: 1.25rem; }
.aff-dash-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.aff-dash-head span, .aff-dash em, .aff-dash p { color: #a1a1aa; font-style: normal; }
.aff-dash-rows { display: grid; gap: .5rem; }
.aff-dash label { display: grid; grid-template-columns: minmax(120px, 210px) 1fr; gap: .5rem; align-items: center; }
.aff-dash input { width: 100%; padding: .45rem .6rem; background: #09090b; color: #fff; border: 1px solid #3f3f46; border-radius: 6px; }
.aff-dash-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.aff-dash button { padding: .5rem .9rem; border-radius: 6px; border: 1px solid #3f3f46; background: #10b981; color: #000; font-weight: 700; cursor: pointer; }
.aff-dash button.ghost { background: #27272a; color: #fff; }
.aff-dash p { margin-top: .75rem; }
@media (max-width: 640px) { .aff-dash label { grid-template-columns: 1fr; } }

/* ---- Pros / cons pairs in comparisons ---- */
.gp-body > .pc { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin: 1.2rem 0 1.4rem; }
.pc > div { border: 1px solid var(--border-subtle); border-top: 3px solid var(--emerald); border-radius: 10px; padding: .9rem 1.1rem .3rem; background: rgba(255, 255, 255, .02); }
.pc > div + div { border-top-color: var(--amber); }
.gp-body .pc h3 { margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.gp-body .pc ul { font-size: .95rem; }
@media (max-width: 640px) { .gp-body > .pc { grid-template-columns: minmax(0, 1fr); } }

/* ---- Diagrams (inline SVG from build.py) and screenshots ---- */
.gp-body > .dg, .gp-body > .shot { max-width: none; margin: 1.8rem 0; }
.dg { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--zinc-900); padding: 1rem 1rem .85rem; }
.dg-title { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, var(--emerald)); margin-bottom: .7rem; }
.dg svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; font-family: inherit; }
.dg-n rect { fill: var(--zinc-850); stroke: var(--zinc-700); stroke-width: 1.2; transition: stroke .15s ease, fill .15s ease; }
.dg-n { outline: none; cursor: default; }
.dg-n:hover rect, .dg-n:focus-visible rect { stroke: var(--accent, var(--emerald)); fill: var(--zinc-800); }
.dg-t { fill: var(--zinc-50); font-size: 14px; font-weight: 700; }
.dg-s, .dg-l { fill: var(--zinc-400); font-size: 12.5px; }
.dg-l { fill: var(--zinc-300); }
.dg-v { fill: var(--zinc-50); font-size: 12.5px; font-weight: 700; }
.dg-a { fill: none; stroke: var(--zinc-500); stroke-width: 1.5; }
.dg-ah { fill: var(--zinc-500); }
.dg .dg-b0 { fill: var(--emerald); stroke: none; }
.dg .dg-b1 { fill: var(--amber); stroke: none; }
.dg .dg-b2 { fill: var(--violet); stroke: none; }
.dg-n:hover .dg-b0, .dg-n:hover .dg-b1, .dg-n:hover .dg-b2, .dg-n:focus-visible [class^="dg-b"] { opacity: .8; }
.dg figcaption, .shot figcaption { font-size: .84rem; line-height: 1.55; color: var(--zinc-400); margin-top: .7rem; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--zinc-900); }
img.logo { display: inline-block; vertical-align: -4px; width: 20px; height: 20px; margin-inline-end: .45rem; padding: 2px; border-radius: 5px; background: #fff; }
.tool-card-name img.logo { vertical-align: -5px; }
@media (prefers-reduced-motion: reduce) { .dg-n rect { transition: none; } }
.ph { display: inline-block; font-size: .78em; font-weight: 700; letter-spacing: .02em; color: var(--amber); border: 1px dashed var(--amber); border-radius: 5px; padding: 0 .4em; white-space: nowrap; }