/* ============================================================================
   KeyboardTester.click — Blog LANDING PAGE skin ("Tech News 04" replica)
   ----------------------------------------------------------------------------
   Faithful recreation of the Astra "Tech News 04" homepage design:
     • Sora (headings 700/800) + Inter (body 400) — base 16px / 1.65
     • Purple #805aed primary, #6d4cc7 hover, #8efbda mint
     • Heading/strong #26222f, body text #4c455f, muted meta #6b6675
     • WHITE page background, borderless flat image-top cards (no box),
       3:2 imagery with slightly rounded corners, tiny uppercase category labels
   Scoped under html.kbt-blog-tn and applied ONLY to the blog landing page
   (blog/index.php). Single posts and the rest of the site are untouched.
   Header/footer chrome is intentionally left as the site's existing chrome.
   ============================================================================ */

html.kbt-blog-tn {
    --tn-primary: #805aed;
    --tn-primary-hover: #6d4cc7;
    --tn-heading: #26222f;
    --tn-body: #4c455f;
    --tn-muted: #6b6675;
    --tn-surface: #ffffff;
    --tn-bg: #ffffff;
    --tn-subtle: #f7f7f8;
    --tn-border: #e4e3e8;
    --tn-mint: #8efbda;
    --tn-head-font: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tn-body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tn-img-radius: 6px;
}
html.dark-theme.kbt-blog-tn,
[data-theme="dark"].kbt-blog-tn {
    --tn-primary: #a98bff;
    --tn-primary-hover: #c4b0ff;
    --tn-heading: #f4f1fb;
    --tn-body: #c7c0d6;
    --tn-muted: #9a93ab;
    --tn-surface: #16131d;
    --tn-bg: #100e16;
    --tn-subtle: #1c1826;
    --tn-border: #2c2738;
}

/* ── Page canvas ───────────────────────────────────────────────────────────
   The themed landing page renders .tn-index (not the classic .blog-wrap),
   so we just need to retake the page background + base font from the
   classic blog-page styles. */
html.kbt-blog-tn body.blog-page,
html.kbt-blog-tn body.blog-page main {
    background: var(--tn-bg) !important;
}
html.kbt-blog-tn body.blog-page {
    color: var(--tn-body) !important;
    font-family: var(--tn-body-font) !important;
}

html.kbt-blog-tn .tn-index {
    width: min(100%, 1240px);
    margin: 0 auto;
    padding: 28px clamp(16px, 4vw, 30px) 80px;
    font-family: var(--tn-body-font);
    color: var(--tn-body);
}
html.kbt-blog-tn .tn-sronly {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ── Category label (uppercase text + small icon) ──────────────────────────*/
html.kbt-blog-tn .tn-tag {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    font: 700 .72rem/1.2 var(--tn-body-font);
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--tn-muted);
}
html.kbt-blog-tn .tn-tagic { flex: none; width: 15px; height: 15px; display: inline-flex; }
html.kbt-blog-tn .tn-tagic svg { width: 100%; height: 100%; display: block; }
/* section heading shows the same icon, a touch larger */
html.kbt-blog-tn .tn-section-title a { display: inline-flex; align-items: center; gap: .5rem; }
html.kbt-blog-tn .tn-section-title .tn-tagic { width: 20px; height: 20px; }
html.kbt-blog-tn .tn-kicker {
    margin: 0;
    font: 700 .8rem/1.2 var(--tn-body-font);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tn-primary);
}

/* ── HERO (overlay lead + Editor's Pick rail) ──────────────────────────────*/
html.kbt-blog-tn .tn-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(290px, 1fr);
    gap: 30px;
    align-items: stretch;
    margin: 4px 0 6px;
}
html.kbt-blog-tn .tn-hero-lead {
    position: relative;
    display: block;
    min-height: 460px;
    border-radius: var(--tn-img-radius);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}
html.kbt-blog-tn .tn-hero-lead img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
html.kbt-blog-tn .tn-hero-lead:hover img { transform: scale(1.04); }
html.kbt-blog-tn .tn-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 16, 30, 0) 30%, rgba(20, 16, 30, .82) 100%);
}
html.kbt-blog-tn .tn-hero-body { position: absolute; inset: auto 0 0 0; padding: clamp(1.2rem, 2.4vw, 2rem); }
html.kbt-blog-tn .tn-hero-body .tn-tag { color: rgba(255, 255, 255, .9); }
html.kbt-blog-tn .tn-hero-title {
    display: block;
    font-family: var(--tn-head-font);
    font-weight: 800;
    font-size: clamp(1.55rem, 2.7vw, 2.25rem);
    line-height: 1.16;
    letter-spacing: -.01em;
    color: #fff;
    margin: .55rem 0 .5rem;
}
html.kbt-blog-tn .tn-hero-excerpt {
    display: block;
    color: rgba(255, 255, 255, .85);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 .55rem;
    max-width: 50ch;
}
html.kbt-blog-tn .tn-hero-meta { display: block; color: rgba(255, 255, 255, .72); font-size: .82rem; font-weight: 600; }

/* Editor's pick rail */
html.kbt-blog-tn .tn-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--tn-heading);
    padding-bottom: .55rem;
    margin-bottom: .2rem;
}
html.kbt-blog-tn .tn-viewall {
    flex: none;
    color: var(--tn-primary);
    font: 700 .8rem/1 var(--tn-body-font);
    text-decoration: none;
    white-space: nowrap;
}
html.kbt-blog-tn .tn-viewall:hover { color: var(--tn-primary-hover); }
html.kbt-blog-tn .tn-rail-list { list-style: none; margin: 0; padding: 0; }
html.kbt-blog-tn .tn-rail-item {
    display: grid;
    grid-template-columns: 1fr 74px;
    gap: .85rem;
    align-items: center;
    padding: .95rem 0;
    border-bottom: 1px solid var(--tn-border);
}
html.kbt-blog-tn .tn-rail-item:last-child { border-bottom: 0; }
html.kbt-blog-tn .tn-rail-link { display: contents; text-decoration: none; }
html.kbt-blog-tn .tn-rail-text { min-width: 0; }
html.kbt-blog-tn .tn-rail-title {
    display: block;
    font-family: var(--tn-head-font);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--tn-heading);
    margin: .2rem 0 0;
    transition: color .15s ease;
}
html.kbt-blog-tn .tn-rail-link:hover .tn-rail-title { color: var(--tn-primary); }
html.kbt-blog-tn .tn-rail-thumb {
    width: 74px; height: 60px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--tn-subtle);
    display: block;
}

/* ── Section header rows ───────────────────────────────────────────────────*/
html.kbt-blog-tn .tn-section { margin-top: 44px; }
html.kbt-blog-tn .tn-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--tn-heading);
    padding-bottom: .55rem;
    margin-bottom: 1.3rem;
}
html.kbt-blog-tn .tn-section-title {
    margin: 0;
    font-family: var(--tn-head-font);
    font-weight: 800;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--tn-heading);
}

/* ── Image-top cards (borderless, flat on white) ───────────────────────────*/
html.kbt-blog-tn .tn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
html.kbt-blog-tn .tn-card {
    display: flex;
    flex-direction: column;
    background: none;
    border: 0;
    text-decoration: none;
    color: inherit;
}
html.kbt-blog-tn .tn-card-imgwrap {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--tn-img-radius);
}
html.kbt-blog-tn .tn-card-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    background: var(--tn-subtle);
    transition: transform .4s ease;
}
html.kbt-blog-tn .tn-card:hover .tn-card-img { transform: scale(1.04); }
html.kbt-blog-tn .tn-card-body { display: flex; flex-direction: column; gap: .42rem; padding: .85rem 0 0; }
html.kbt-blog-tn .tn-card-date { color: var(--tn-muted); font-size: .8rem; font-weight: 600; }
html.kbt-blog-tn .tn-card-title {
    margin: 0;
    font-family: var(--tn-head-font);
    font-weight: 700;
    font-size: 1.18rem;
    line-height: 1.3;
    letter-spacing: -.005em;
    color: var(--tn-heading);
    transition: color .15s ease;
}
html.kbt-blog-tn .tn-card:hover .tn-card-title { color: var(--tn-primary); }
html.kbt-blog-tn .tn-card-excerpt { margin: 0; color: var(--tn-body); font-size: .93rem; line-height: 1.55; }

/* Rating badge sits on the image — keep it readable on the flat card */
html.kbt-blog-tn .tn-card-imgwrap .post-card-rating { left: .55rem; bottom: .55rem; }

/* ── Full-bleed overlay cards (the "Must Read" treatment) ──────────────────*/
html.kbt-blog-tn .tn-overlay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
html.kbt-blog-tn .tn-overlay {
    position: relative;
    display: block;
    min-height: 320px;
    border-radius: var(--tn-img-radius);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}
html.kbt-blog-tn .tn-overlay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
html.kbt-blog-tn .tn-overlay:hover img { transform: scale(1.04); }
html.kbt-blog-tn .tn-overlay-body { position: absolute; inset: auto 0 0 0; padding: 1.5rem; }
html.kbt-blog-tn .tn-overlay-body .tn-tag { color: rgba(255, 255, 255, .9); }
html.kbt-blog-tn .tn-overlay-title {
    display: block;
    font-family: var(--tn-head-font);
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1.2;
    color: #fff;
    margin: .5rem 0 .35rem;
}
html.kbt-blog-tn .tn-overlay-excerpt { display: block; color: rgba(255, 255, 255, .85); font-size: .94rem; line-height: 1.5; margin: 0; }

/* ── Feed rows (thumbnail-left list) ───────────────────────────────────────*/
html.kbt-blog-tn .tn-feed { display: block; }
html.kbt-blog-tn .tn-feed-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.3rem;
    align-items: center;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--tn-border);
    text-decoration: none;
    color: inherit;
}
html.kbt-blog-tn .tn-feed-row:first-child { padding-top: 0; }
html.kbt-blog-tn .tn-feed-row:last-child { border-bottom: 0; }
html.kbt-blog-tn .tn-feed-imgwrap { display: block; overflow: hidden; border-radius: var(--tn-img-radius); }
html.kbt-blog-tn .tn-feed-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--tn-subtle); transition: transform .4s ease; }
html.kbt-blog-tn .tn-feed-row:hover .tn-feed-img { transform: scale(1.04); }
html.kbt-blog-tn .tn-feed-body { min-width: 0; }
html.kbt-blog-tn .tn-feed-title {
    display: block;
    font-family: var(--tn-head-font);
    font-weight: 700;
    font-size: 1.22rem;
    line-height: 1.28;
    color: var(--tn-heading);
    margin: .3rem 0 .35rem;
    transition: color .15s ease;
}
html.kbt-blog-tn .tn-feed-row:hover .tn-feed-title { color: var(--tn-primary); }
html.kbt-blog-tn .tn-feed-excerpt { display: block; color: var(--tn-body); font-size: .94rem; line-height: 1.55; margin: 0 0 .35rem; }
html.kbt-blog-tn .tn-feed-date { display: block; color: var(--tn-muted); font-size: .8rem; font-weight: 600; }

/* ── Pagination ────────────────────────────────────────────────────────────*/
html.kbt-blog-tn .tn-pagination { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.8rem; }
html.kbt-blog-tn .tn-page {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--tn-border);
    border-radius: 6px;
    background: var(--tn-surface);
    color: var(--tn-heading);
    font: 700 .94rem/1 var(--tn-body-font);
    text-decoration: none;
}
html.kbt-blog-tn .tn-page:hover { border-color: var(--tn-primary); color: var(--tn-primary); }
html.kbt-blog-tn .tn-page.is-active { background: var(--tn-primary); border-color: var(--tn-primary); color: #fff; pointer-events: none; }

/* ── Responsive ────────────────────────────────────────────────────────────*/
@media (max-width: 980px) {
    html.kbt-blog-tn .tn-hero { grid-template-columns: 1fr; }
    html.kbt-blog-tn .tn-hero-lead { min-height: 380px; }
    html.kbt-blog-tn .tn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    html.kbt-blog-tn .tn-grid,
    html.kbt-blog-tn .tn-overlay-grid { grid-template-columns: 1fr; }
    html.kbt-blog-tn .tn-feed-row { grid-template-columns: 128px 1fr; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    html.kbt-blog-tn .tn-card-img,
    html.kbt-blog-tn .tn-hero-lead img,
    html.kbt-blog-tn .tn-overlay img,
    html.kbt-blog-tn .tn-feed-img { transition: none; }
    html.kbt-blog-tn .tn-card:hover .tn-card-img,
    html.kbt-blog-tn .tn-hero-lead:hover img,
    html.kbt-blog-tn .tn-overlay:hover img,
    html.kbt-blog-tn .tn-feed-row:hover .tn-feed-img { transform: none; }
}

/* ── Interstitial bands (podcast / YouTube promo) ──────────────────────────*/
html.kbt-blog-tn .tn-band {
    margin-top: 46px;
    border-radius: 12px;
    padding: clamp(1.6rem, 3vw, 2.6rem);
}
html.kbt-blog-tn .tn-band--media {
    display: grid;
    grid-template-columns: 1.25fr .9fr;
    gap: 28px;
    align-items: center;
    background: linear-gradient(115deg, #ece6ff 0%, #d6fff0 100%);
}
html.kbt-blog-tn .tn-band-eyebrow {
    margin: 0;
    color: var(--tn-primary);
    font: 700 .8rem/1.2 var(--tn-body-font);
    text-transform: uppercase;
    letter-spacing: .09em;
}
html.kbt-blog-tn .tn-band-title {
    font-family: var(--tn-head-font);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    color: #26222f;
    margin: .45rem 0 .55rem;
}
html.kbt-blog-tn .tn-band-text { color: #4c455f; font-size: 1rem; line-height: 1.6; margin: 0 0 1.15rem; max-width: 46ch; }
html.kbt-blog-tn .tn-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--tn-primary);
    color: #fff !important;
    font: 700 1rem/1 var(--tn-body-font);
    padding: 14px 28px;
    border: 1px solid var(--tn-primary);
    border-radius: 25px;
    text-decoration: none;
}
html.kbt-blog-tn .tn-btn:hover { background: var(--tn-primary-hover); border-color: var(--tn-primary-hover); }
html.kbt-blog-tn .tn-band-art { display: flex; align-items: center; justify-content: center; }
html.kbt-blog-tn .tn-band-play {
    width: 104px; height: 104px;
    border-radius: 50%;
    background: rgba(128, 90, 237, .16);
    color: var(--tn-primary);
    display: grid; place-items: center;
    font-size: 2.4rem;
}

/* Newsletter band */
html.kbt-blog-tn .tn-band--newsletter { background: linear-gradient(115deg, #d6fff0 0%, #ece6ff 100%); text-align: center; }
html.kbt-blog-tn .tn-band--newsletter .tn-band-title { margin-top: 0; }
html.kbt-blog-tn .tn-band--newsletter .tn-band-text { margin-left: auto; margin-right: auto; }
html.kbt-blog-tn .tn-news-form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: .3rem; }
html.kbt-blog-tn .tn-news-input {
    min-width: 280px; max-width: 360px; flex: 1 1 280px;
    padding: 13px 16px;
    border: 1px solid #d6d4dd;
    border-radius: 8px;
    background: #fff;
    color: #26222f;
    font: 400 1rem var(--tn-body-font);
}
@media (max-width: 520px) { html.kbt-blog-tn .tn-news-input { min-width: 0; } }
html.kbt-blog-tn .tn-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html.kbt-blog-tn .tn-news-status { min-height: 1.2em; margin: .75rem 0 0; font-size: .92rem; font-weight: 600; }
html.kbt-blog-tn .tn-news-status.is-ok { color: #15803d; }
html.kbt-blog-tn .tn-news-status.is-err { color: #b91c1c; }
html.dark-theme.kbt-blog-tn .tn-news-status.is-ok,
[data-theme="dark"].kbt-blog-tn .tn-news-status.is-ok { color: #4ade80; }
html.dark-theme.kbt-blog-tn .tn-news-status.is-err,
[data-theme="dark"].kbt-blog-tn .tn-news-status.is-err { color: #f87171; }

/* Stay Connected social band */
html.kbt-blog-tn .tn-social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
html.kbt-blog-tn .tn-social-box {
    display: flex; align-items: center; gap: .9rem;
    border: 1px solid var(--tn-border);
    border-radius: 10px;
    padding: 1.05rem 1.15rem;
    text-decoration: none; color: inherit;
    background: var(--tn-surface);
    transition: border-color .15s ease;
}
html.kbt-blog-tn .tn-social-box:hover { border-color: var(--tn-primary); }
html.kbt-blog-tn .tn-social-ic { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; color: #fff; font: 800 1.05rem var(--tn-head-font); flex: none; }
html.kbt-blog-tn .tn-social-ic--yt { background: #ff0000; }
html.kbt-blog-tn .tn-social-ic--fb { background: #1877f2; }
html.kbt-blog-tn .tn-social-ic--gh { background: #24292e; }
html.kbt-blog-tn .tn-social-name { display: block; font-family: var(--tn-head-font); font-weight: 700; color: var(--tn-heading); font-size: 1rem; }
html.kbt-blog-tn .tn-social-cta { display: block; color: var(--tn-muted); font-size: .85rem; }
@media (max-width: 700px) { html.kbt-blog-tn .tn-social-grid { grid-template-columns: 1fr; } }

/* Featured row (big lead + side list) — the "Technology" treatment */
html.kbt-blog-tn .tn-feature-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
html.kbt-blog-tn .tn-feature-lead .tn-card-title { font-size: 1.55rem; }
html.kbt-blog-tn .tn-feature-side { display: flex; flex-direction: column; }
html.kbt-blog-tn .tn-mini {
    display: grid; grid-template-columns: 108px 1fr; gap: .9rem; align-items: center;
    padding: .9rem 0;
    border-bottom: 1px solid var(--tn-border);
    text-decoration: none; color: inherit;
}
html.kbt-blog-tn .tn-mini:first-child { padding-top: 0; }
html.kbt-blog-tn .tn-mini:last-child { border-bottom: 0; }
html.kbt-blog-tn .tn-mini-img { width: 108px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--tn-subtle); display: block; }
html.kbt-blog-tn .tn-mini-title { font-family: var(--tn-head-font); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--tn-heading); margin: .15rem 0 0; transition: color .15s ease; }
html.kbt-blog-tn .tn-mini:hover .tn-mini-title { color: var(--tn-primary); }
@media (max-width: 980px) { html.kbt-blog-tn .tn-feature-row { grid-template-columns: 1fr; } }

/* dark-mode band legibility */
html.dark-theme.kbt-blog-tn .tn-band--media,
html.dark-theme.kbt-blog-tn .tn-band--newsletter,
[data-theme="dark"].kbt-blog-tn .tn-band--media,
[data-theme="dark"].kbt-blog-tn .tn-band--newsletter { background: linear-gradient(115deg, #241d33 0%, #16271f 100%); }
html.dark-theme.kbt-blog-tn .tn-band-title,
[data-theme="dark"].kbt-blog-tn .tn-band-title { color: var(--tn-heading); }
html.dark-theme.kbt-blog-tn .tn-band-text,
[data-theme="dark"].kbt-blog-tn .tn-band-text { color: var(--tn-body); }
html.dark-theme.kbt-blog-tn .tn-news-input,
[data-theme="dark"].kbt-blog-tn .tn-news-input { background: var(--tn-surface); border-color: var(--tn-border); color: var(--tn-heading); }

/* ── Google-ads spaces (real AdSense when available, house ad when blocked —
   same behaviour as the rest of the site via kbtRenderAdSlot) ──────────────*/
html.kbt-blog-tn .tn-ad-box {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 600px;
}
html.kbt-blog-tn .tn-ad-box--rect { min-height: 250px; }
html.kbt-blog-tn .tn-ad-box .kbt-ad-slot { width: 100%; margin: 0; padding: 0; }
html.kbt-blog-tn .tn-ad-box .kbt-ad-slot-inner { min-height: 0; width: 100%; }
html.kbt-blog-tn .tn-ad-box .adsbygoogle { width: 100%; }
html.kbt-blog-tn .tn-ad-sticky { position: sticky; top: 90px; }

/* ── Category nav: full-width flat segmented bar (matches main site) ────────
   Desktop = one connected row that fills the page width (no horizontal scroll);
   tablet/mobile = wraps to a gapped tile grid (still no horizontal scroll). */
html.kbt-blog-tn .tn-catnav-band {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 26px;
    padding: 0 clamp(16px, 4vw, 40px);
    background: var(--tn-surface);
    border-bottom: 1px solid var(--tn-border);
}
html.kbt-blog-tn .tn-catnav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    max-width: 1500px;
    margin: 0 auto;
}
html.kbt-blog-tn .tn-cattab {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .8rem 1rem .85rem;
    background: var(--tn-surface);
    border-left: 1px solid var(--tn-border);
    border-top: 3px solid var(--tn-accent, var(--tn-primary));
    text-decoration: none;
    color: inherit;
    transition: background .15s ease;
}
html.kbt-blog-tn .tn-cattab:first-child { border-left: 0; }
html.kbt-blog-tn .tn-cattab:hover,
html.kbt-blog-tn .tn-cattab:focus-visible { background: var(--tn-subtle); outline: none; }
html.kbt-blog-tn .tn-cattab.is-active { background: var(--tn-subtle); }
html.kbt-blog-tn .tn-cattab-main { display: flex; align-items: center; gap: .5rem; min-width: 0; }
html.kbt-blog-tn .tn-cattab-ic { flex: none; width: 22px; height: 22px; color: var(--tn-accent, var(--tn-primary)); display: inline-flex; }
html.kbt-blog-tn .tn-cattab-ic svg { width: 100%; height: 100%; display: block; }
html.kbt-blog-tn .tn-cattab-title {
    font-family: var(--tn-head-font);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--tn-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.kbt-blog-tn .tn-cattab-desc {
    font-size: .8rem;
    line-height: 1.35;
    color: var(--tn-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Compact nav (category archive pages): name only, no description line.
   Title keeps the same .tn-cattab-title font/size as the landing page. */
html.kbt-blog-tn .tn-catnav--compact .tn-cattab { padding-top: .95rem; padding-bottom: .95rem; }
@media (max-width: 960px) {
    html.kbt-blog-tn .tn-catnav-band { padding: 0 clamp(14px, 4vw, 24px); border-bottom: 0; }
    html.kbt-blog-tn .tn-catnav { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    html.kbt-blog-tn .tn-cattab {
        border: 1px solid var(--tn-border);
        border-top: 3px solid var(--tn-accent, var(--tn-primary));
        border-radius: 8px;
    }
    html.kbt-blog-tn .tn-cattab:first-child { border-left: 1px solid var(--tn-border); }
}
@media (max-width: 760px) {
    html.kbt-blog-tn .tn-catnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html.kbt-blog-tn .tn-cattab { padding: .7rem .7rem .75rem; }
}
@media (max-width: 560px) {
    html.kbt-blog-tn .tn-catnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.kbt-blog-tn .tn-cattab-desc { -webkit-line-clamp: 3; }
}
/* RTL (Arabic): put the connected-bar separators on the correct side */
@media (min-width: 961px) {
    html.kbt-blog-tn[dir="rtl"] .tn-cattab { border-left: 0; border-right: 1px solid var(--tn-border); }
    html.kbt-blog-tn[dir="rtl"] .tn-cattab:first-child { border-right: 0; }
}

/* category archive page header */

/* clickable section headings */
html.kbt-blog-tn .tn-section-title a { color: inherit; text-decoration: none; }
html.kbt-blog-tn .tn-section-title a:hover,
html.kbt-blog-tn .tn-section-title a:focus-visible { color: var(--tn-primary); }

/* category archive header */
html.kbt-blog-tn .tn-cat-head { margin: 8px 0 6px; }
html.kbt-blog-tn .tn-breadcrumb { margin: 0 0 10px; font: 600 .85rem/1.4 var(--tn-body-font); color: var(--tn-muted); }
html.kbt-blog-tn .tn-breadcrumb a { color: var(--tn-primary); text-decoration: none; }
html.kbt-blog-tn .tn-breadcrumb a:hover { text-decoration: underline; }
html.kbt-blog-tn .tn-cat-title {
    margin: 0;
    font-family: var(--tn-head-font);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--tn-heading);
}
html.kbt-blog-tn .tn-cat-count { margin: .5rem 0 0; color: var(--tn-body); font-size: 1rem; }
html.kbt-blog-tn .tn-cat-empty { color: var(--tn-body); font-size: 1.02rem; line-height: 1.6; padding: 1rem 0 2rem; }

/* Tech Reviews: 3 stacked blogs (left) + ad column (right) */
html.kbt-blog-tn .tn-reviews { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
html.kbt-blog-tn .tn-reviews-ad { width: 300px; }
@media (max-width: 980px) {
    html.kbt-blog-tn .tn-reviews { grid-template-columns: 1fr; }
    html.kbt-blog-tn .tn-reviews-ad { width: 100%; }
    html.kbt-blog-tn .tn-reviews-ad .tn-ad-box { min-height: 120px; }
    html.kbt-blog-tn .tn-ad-sticky { position: static; }
}

/* Hardware deep-dive side: ad sits under the side list */
html.kbt-blog-tn .tn-feature-side .tn-ad-box { margin-top: 16px; min-height: 250px; }