/*
Theme Name: Satellite Benqu
Theme URI: https://satellites.mobtools.ai/themes/satellite-benqu
Author: Moburst
Author URI: https://moburst.ai
Description: Adapted from the Benqu ThemeForest news/blog layout — clean white header (left logo + search), white sticky nav, 60/40 hero (big 16:9 feature + 4 stacked square-thumbnail cards), small vivid asymmetric category pills, dense 3-/4-up card grids, editor's pick + numbered popular sidebar, and a dense multi-column dark footer. Uses Benqu's real type system: Encode Sans Condensed headlines, DM Sans UI, Lora reading serif.
Version: 1.3.8
Requires at least: 6.0
Requires PHP: 8.0
Tested up to: 6.7
License: Proprietary
License URI: https://moburst.ai
Text Domain: satellite-benqu
Tags: magazine, news, editorial, dark-header, colored-category-pills, sidebar
*/

/* ══════════════════════════════════════════════════════════════════════
   1. RESET + TOKENS
   ══════════════════════════════════════════════════════════════════════ */

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

:root {
    /* Benqu palette: near-black topbar + WHITE nav + purple/violet primary
       accent + pastel content pills. Matched from the ThemeForest reference
       at itcroctheme.com/wp/demos/themes/benqu. */
    --benqu-ink-950:    #1a1a24;   /* Topbar / footer background — soft black */
    --benqu-ink-900:    #22222e;
    --benqu-ink-800:    #2f2f3d;
    --benqu-ink-line:   #34344a;
    --benqu-primary:    #4e46e5;   /* Benqu purple — LOGIN, links, accents */
    --benqu-primary-2:  #372fb8;   /* Deeper purple for hover */
    --benqu-accent:     #4e46e5;   /* Alias — primary accent used everywhere */

    /* Category pill palette (uppercase-white text on solid color) */
    --benqu-cat-fashion:  #e94e88;   /* pink */
    --benqu-cat-food:     #ff6f3d;   /* orange */
    --benqu-cat-travel:   #21c1d6;   /* cyan */
    --benqu-cat-creative: #ffa63a;   /* amber */
    --benqu-cat-sports:   #48c774;   /* green */
    --benqu-cat-tech:     #2f80ed;   /* blue */
    --benqu-cat-music:    #ef4444;   /* red */
    --benqu-cat-heroes:   #48c774;   /* green */
    --benqu-cat-fantasy:  #ee8fd0;   /* light pink */
    --benqu-cat-gaming:   #a06cff;   /* purple */
    --benqu-cat-action:   #c9a679;   /* beige */

    --benqu-ink:        #121218;
    --benqu-ink-2:      #4a4a58;
    --benqu-ink-3:      #8a8a99;
    --benqu-line:       #ececee;
    --benqu-line-2:     #f4f4f6;
    --benqu-bg:         #ffffff;
    --benqu-bg-alt:     #f6f6fb;
    /* Benqu's real type system:
         --benqu-serif → the CONDENSED display face used on every headline,
                         nameplate, section title and card title (Encode Sans
                         Condensed). Name kept for backwards-compat; it is a
                         sans now, matching the ThemeForest reference.
         --benqu-sans  → DM Sans for UI / meta / nav / body.
         --benqu-lora  → Lora, the long-form reading serif for article bodies,
                         pull-quotes and the drop cap. */
    --benqu-serif:      'Encode Sans Condensed', 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
    --benqu-sans:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --benqu-lora:       'Lora', Georgia, 'Times New Roman', serif;
    --benqu-container:  1320px;
    --benqu-container-narrow: 1180px;
    --benqu-radius:     6px;
    --benqu-radius-lg:  10px;
    --benqu-radius-pill: 999px;
    --benqu-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --benqu-shadow-lift: 0 8px 24px rgba(26, 26, 36, 0.08);

    /* Backwards-compat aliases — some rules still reference the old names */
    --benqu-navy:       var(--benqu-ink-950);
    --benqu-navy-2:     var(--benqu-ink-900);
    --benqu-navy-3:     var(--benqu-ink-800);
    --benqu-navy-line:  var(--benqu-ink-line);
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--benqu-sans);
    font-weight: 400;
    line-height: 1.65;
    color: var(--benqu-ink);
    background: var(--benqu-bg);
    letter-spacing: -0.003em;
}

a { color: inherit; text-decoration: none; transition: color 0.15s var(--benqu-ease); }
a:hover { color: var(--benqu-accent); }
/* WP core injects `a:where(:not(.wp-element-button)){text-decoration:underline}`
   inline AFTER the theme sheet; ties our `a{}` on specificity and wins on order,
   underlining the brand + nav. Re-assert with higher specificity. */
body a:not(.wp-element-button) { text-decoration: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--benqu-serif);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: 0;
    color: var(--benqu-ink);
}

.benqu-container {
    max-width: var(--benqu-container);
    margin: 0 auto;
    padding: 0 clamp(16px, 2.5vw, 30px);
}

.benqu-site-main { min-height: 40vh; }

.screen-reader-text {
    position: absolute !important;
    left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   2. TOPBAR — dark navy strip with date + trending ticker + socials
   ══════════════════════════════════════════════════════════════════════ */

.benqu-topbar {
    background: var(--benqu-ink-950);
    color: #d5d8e0;
    font-family: var(--benqu-sans);
    padding: 0;
}
.benqu-topbar-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(16px, 3vw, 32px);
    min-height: 46px;
    padding: 6px 0;
}
/* Date is a pill-shaped purple badge to mirror the Benqu reference */
.benqu-topbar-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: var(--benqu-primary);
    padding: 5px 14px;
    border-radius: var(--benqu-radius-pill);
    white-space: nowrap;
    text-transform: uppercase;
}
.benqu-topbar-date svg { color: #ffffff; opacity: 0.9; }

.benqu-topbar-ticker {
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    min-width: 0;
}
.benqu-topbar-ticker-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: none;
}
.benqu-topbar-ticker-label::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--benqu-primary);
    box-shadow: 0 0 0 3px rgba(78, 70, 229, 0.22);
    animation: benqu-blink 1.4s ease-in-out infinite;
}
@keyframes benqu-blink { 0%,100% { opacity: 0.4 } 50% { opacity: 1 } }

.benqu-topbar-ticker-track {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    min-width: 0;
    height: 20px;
}
.benqu-topbar-ticker-items {
    display: inline-flex;
    gap: 36px;
    padding-left: 0;
    animation: benqu-marquee 40s linear infinite;
    white-space: nowrap;
    color: #d5d8e0;
    font-size: 13px;
}
.benqu-topbar-ticker-items a { color: #d5d8e0; font-weight: 500; }
.benqu-topbar-ticker-items a:hover { color: #ffffff; }
@keyframes benqu-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.benqu-topbar-social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.benqu-topbar-social-label {
    font-size: 12px;
    letter-spacing: 0.01em;
    color: #d5d8e0;
    margin-right: 4px;
    text-transform: none;
    font-weight: 500;
}
.benqu-topbar-social a {
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d5d8e0;
    border: none;
    border-radius: 4px;
    transition: color 0.2s var(--benqu-ease);
}
.benqu-topbar-social a:hover {
    color: var(--benqu-primary);
    background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════
   3. MASTHEAD — white block, logo left, optional ad-slot right
   ══════════════════════════════════════════════════════════════════════ */

.benqu-masthead {
    background: var(--benqu-bg);
    padding: clamp(14px, 2vw, 22px) 0;
    border-bottom: 1px solid var(--benqu-line);
}
.benqu-masthead-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
}

/* Search box that fills the right side of the masthead when there's no ad
   (keeps the brand left + a balanced bar instead of a big empty band). */
.benqu-masthead-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
    width: 100%;
    max-width: 300px;
    background: var(--benqu-bg-alt);
    border: 1px solid var(--benqu-line);
    border-radius: var(--benqu-radius-pill);
    padding: 9px 12px 9px 18px;
}
.benqu-masthead-search input {
    background: transparent;
    border: none;
    outline: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--benqu-ink);
    flex: 1;
    min-width: 0;
    padding: 0;
}
.benqu-masthead-search input::placeholder { color: var(--benqu-ink-3); }
.benqu-masthead-search button {
    background: transparent;
    border: none;
    color: var(--benqu-ink-3);
    padding: 2px;
    display: inline-flex;
    cursor: pointer;
}
.benqu-masthead-search button:hover { color: var(--benqu-primary); }
/* Brand column is a vertical stack (logo + tagline underneath). */
.benqu-masthead-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
/* No ad slot → keep the logo LEFT-aligned (Benqu places the brand on the
   left; a centred logo left a big empty band that looked unbalanced). */
.benqu-masthead-inner--brand-only {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
}
.benqu-masthead-inner--brand-only .benqu-masthead-brand { align-items: flex-start; }
/* Right-hand topbar spacer that replaced the old social row — keeps the date
   pill and centred ticker balanced within the 3-column grid. */
.benqu-topbar-spacer { justify-self: end; min-width: 1px; }
.benqu-brand {
    font-family: var(--benqu-serif);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--benqu-ink);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.benqu-brand:hover { color: var(--benqu-primary); }

/* WordPress' the_custom_logo() outputs <a class="custom-logo-link"><img class="custom-logo"></a>.
   Clamp both the anchor and the image so the natural-size logo can't
   blow up the masthead. */
.benqu-masthead .custom-logo-link,
.benqu-masthead .custom-logo {
    display: inline-block;
    max-height: 60px;
    max-width: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    line-height: 0;
    vertical-align: middle;
}
.benqu-masthead .custom-logo-link {
    text-decoration: none;
}

.benqu-tagline {
    display: block;
    margin-top: 4px;
    font-family: var(--benqu-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--benqu-ink-3);
    font-weight: 500;
}
.benqu-masthead-ad {
    display: none;
    max-width: 468px;
    padding: 12px 16px;
    background: var(--benqu-bg-alt);
    border: 1px dashed var(--benqu-line);
    border-radius: var(--benqu-radius);
    font-family: var(--benqu-sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--benqu-ink-3);
    text-align: center;
    line-height: 1.4;
}
@media (min-width: 900px) { .benqu-masthead-ad { display: block; } }

/* ══════════════════════════════════════════════════════════════════════
   4. PRIMARY NAV — dark navy bar with white uppercase menu
   ══════════════════════════════════════════════════════════════════════ */

.benqu-nav {
    background: #ffffff;
    color: var(--benqu-ink);
    position: sticky;
    top: 0;
    z-index: 90;
    border-top: 1px solid var(--benqu-line);
    border-bottom: 1px solid var(--benqu-line);
    box-shadow: 0 1px 0 rgba(26,26,36,0.02);
}
.benqu-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    position: relative;
}
.benqu-nav-hamburger {
    display: none;
    background: var(--benqu-bg-alt);
    border: 1px solid var(--benqu-line);
    color: var(--benqu-ink);
    padding: 8px 10px;
    border-radius: var(--benqu-radius);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.benqu-nav-hamburger:hover {
    border-color: var(--benqu-primary);
    color: var(--benqu-primary);
}
.benqu-nav-hamburger span {
    display: block;
    width: 16px; height: 2px;
    background: currentColor;
    margin: 3px 0;
}
.benqu-nav ul {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    flex: 1;
}
.benqu-nav ul li {
    position: relative;
    display: inline-flex;
}
.benqu-nav ul li a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 16px clamp(8px, 0.9vw, 14px);
    font-family: var(--benqu-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.005em;
    color: var(--benqu-ink);
    white-space: nowrap;
    position: relative;
    transition: color 0.15s var(--benqu-ease);
    text-transform: none;
}
/* Dropdown caret ›  — added to items that have a submenu */
.benqu-nav ul li.menu-item-has-children > a::after,
.benqu-nav ul li.page_item_has_children > a::after {
    content: "›";
    display: inline-block;
    margin-left: 4px;
    color: var(--benqu-ink-3);
    font-weight: 400;
    transform: rotate(90deg);
    font-size: 12px;
    line-height: 1;
}
.benqu-nav ul li a:hover,
.benqu-nav ul li.current-menu-item > a,
.benqu-nav ul li.current-cat > a {
    color: var(--benqu-primary);
}
.benqu-nav ul li.current-menu-item > a::before,
.benqu-nav ul li.current-cat > a::before {
    content: "";
    position: absolute;
    bottom: -1px; left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    background: var(--benqu-primary);
    border-radius: 2px;
}

/* Inline search box on the right of the nav */
.benqu-nav-search {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--benqu-bg-alt);
    border: 1px solid var(--benqu-line);
    border-radius: var(--benqu-radius-pill);
    padding: 6px 10px 6px 14px;
    flex-shrink: 0;
    min-width: 180px;
}
.benqu-nav-search input {
    background: transparent;
    border: none;
    outline: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--benqu-ink);
    flex: 1;
    min-width: 0;
    padding: 0;
}
.benqu-nav-search input::placeholder { color: var(--benqu-ink-3); }
.benqu-nav-search button {
    background: transparent;
    border: none;
    color: var(--benqu-ink-3);
    padding: 4px;
    display: inline-flex;
    cursor: pointer;
}
.benqu-nav-search button:hover { color: var(--benqu-primary); }

/* LOGIN / CTA button — purple pill on the far right */
.benqu-nav .benqu-nav-cta {
    background: var(--benqu-primary);
    color: #ffffff;
    padding: 9px 20px;
    margin-left: 4px;
    font-family: var(--benqu-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--benqu-radius-pill);
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s var(--benqu-ease);
    border: none;
    cursor: pointer;
    text-transform: none;
}
.benqu-nav .benqu-nav-cta:hover { background: var(--benqu-primary-2); color: #ffffff; }

.benqu-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    color: var(--benqu-ink);
}
.benqu-menu-toggle span {
    display: block;
    width: 20px; height: 2px;
    background: currentColor;
    margin: 4px 0;
}

/* ══════════════════════════════════════════════════════════════════════
   5. CATEGORY PILLS (colored, small, uppercase)
   ══════════════════════════════════════════════════════════════════════ */

/* Benqu category badge (.benqu-cate-badge in the reference): a vivid chip
   whose TOP-LEFT corner is square and the other three are rounded 30px —
   `border-radius: 0 30px 30px 30px`. This asymmetric corner is Benqu's
   signature tag shape. */
.benqu-pill {
    display: inline-block;
    /* Never let the chip stretch: in a flex column (hero side list, card
       body) an inline-block child is blockified and would fill the row. */
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    padding: 5px 15px;
    font-family: var(--benqu-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    background: var(--benqu-primary);
    border-radius: 0 30px 30px 30px;
    line-height: 18px;
    text-decoration: none;
}
.benqu-pill:hover { color: #ffffff; filter: brightness(1.08); }

/* Card media wrapper — lets the tag overlay the image without nesting
   an <a> inside the image <a>. */
.benqu-card-media { position: relative; display: block; }
.benqu-pill--overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

/* ══════════════════════════════════════════════════════════════════════
   6. HERO — 60/40 split
   ══════════════════════════════════════════════════════════════════════ */

.benqu-hero {
    padding: clamp(24px, 3vw, 40px) 0;
}
.benqu-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* Big feature card (left) — fills its column and stretches to match the
   side column height (image covers). No width-driving aspect-ratio, which
   would overflow the grid column. */
.benqu-hero-main {
    position: relative;
    overflow: hidden;
    background: var(--benqu-navy);
    min-height: 360px;
}
.benqu-hero-main img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--benqu-ease);
}
.benqu-hero-main:hover img { transform: scale(1.03); }
.benqu-hero-main-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(13, 20, 33, 0.92) 0%,
        rgba(13, 20, 33, 0.55) 45%,
        rgba(13, 20, 33, 0.05) 100%);
    z-index: 1;
}
.benqu-hero-main-content {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: clamp(20px, 2.5vw, 34px);
    color: #ffffff;
    z-index: 2;
}
.benqu-hero-main-content .benqu-pill { margin-bottom: 14px; }
.benqu-hero-main-title {
    font-family: var(--benqu-serif);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
}
.benqu-hero-main-title a { color: #ffffff; }
.benqu-hero-main-title a:hover { color: var(--benqu-accent); }
/* Benqu's hero shows only badge + title + meta (no excerpt paragraph). */
.benqu-hero-main-excerpt { display: none; }
.benqu-hero-main-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--benqu-sans);
    font-size: 12px;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.02em;
}
.benqu-hero-main-meta .dot { opacity: 0.5; }
.benqu-hero-main-link {
    position: absolute; inset: 0; z-index: 3;
    text-indent: -9999px; overflow: hidden;
}

/* Stacked sidebar cards (right) — 4 horizontal thumbnail+text cards */
.benqu-hero-side {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 14px;
}
.benqu-hero-side-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 14px;
    background: transparent;
    align-items: start;
    padding: 0;
    min-height: 0;
    position: relative;
}
/* Benqu side/list cards use a SQUARE thumbnail on the left. */
.benqu-hero-side-card .benqu-hero-side-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: var(--benqu-navy-3);
    border-radius: 0;
    flex-shrink: 0;
}
.benqu-hero-side-card .benqu-hero-side-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--benqu-ease);
}
.benqu-hero-side-card:hover .benqu-hero-side-thumb img { transform: scale(1.05); }
.benqu-hero-side-thumb.benqu-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--benqu-serif);
    font-size: 2rem;
    font-weight: 800;
    color: rgba(255,255,255,0.55);
}
.benqu-hero-side-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.benqu-hero-side-title {
    font-family: var(--benqu-serif);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: var(--benqu-ink);
    letter-spacing: 0;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.benqu-hero-side-title a:hover { color: var(--benqu-accent); }
.benqu-hero-side-meta {
    font-family: var(--benqu-sans);
    font-size: 11px;
    color: var(--benqu-ink-3);
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════════════
   7. CONTACT-INFO STRIP (below hero — like Benqu's address/phone/email row)
   ══════════════════════════════════════════════════════════════════════ */

.benqu-info-strip {
    background: var(--benqu-bg-alt);
    color: var(--benqu-ink);
    padding: 18px 0;
    border-top: 1px solid var(--benqu-line);
    border-bottom: 1px solid var(--benqu-line);
}
.benqu-info-strip-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: center;
}
.benqu-info-strip-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--benqu-sans);
    font-size: 13px;
    color: var(--benqu-ink-2);
    justify-content: center;
}
.benqu-info-strip-item svg {
    color: var(--benqu-primary);
    flex-shrink: 0;
}
.benqu-info-strip-item strong {
    color: var(--benqu-ink);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════════════════════════════
   8. SECTIONS + HEADERS
   ══════════════════════════════════════════════════════════════════════ */

.benqu-section {
    padding: clamp(32px, 4.5vw, 56px) 0;
}
.benqu-section.tinted {
    background: var(--benqu-bg-alt);
}

/* Section header: title centered, with horizontal lines both sides.
   This is the signature Benqu section-title style.
   Layout:  [line ————————————]   Trending Stories   [———————————— line]  View All → */
.benqu-section-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin-bottom: clamp(20px, 2.5vw, 34px);
    position: relative;
}
.benqu-section-header::before {
    content: "";
    grid-column: 1 / 2;
    height: 1px;
    background: var(--benqu-line);
    align-self: center;
}
.benqu-section-header::after {
    content: "";
    grid-column: 3 / 4;
    height: 1px;
    background: var(--benqu-line);
    align-self: center;
    justify-self: stretch;
}
.benqu-section-title {
    grid-column: 2 / 3;
    font-family: var(--benqu-serif);
    font-weight: 800;
    font-size: clamp(1.3rem, 1.8vw, 1.7rem);
    letter-spacing: -0.01em;
    text-transform: capitalize;
    color: var(--benqu-ink);
    padding: 0 clamp(12px, 1.5vw, 20px);
    display: inline-block;
    white-space: nowrap;
}
.benqu-section-link {
    grid-column: 3 / 4;
    justify-self: end;
    z-index: 2;
    background: var(--benqu-bg);
    padding-left: 12px;
    font-family: var(--benqu-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--benqu-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.benqu-section-link:hover { color: var(--benqu-primary-2); }
/* When the section is on the tinted background, the "View All" pill needs
   the tinted background too, not white. */
.benqu-section.tinted .benqu-section-link { background: var(--benqu-bg-alt); }

/* ══════════════════════════════════════════════════════════════════════
   9. CARDS — Benqu horizontal small-square + vertical variants
   ══════════════════════════════════════════════════════════════════════ */

.benqu-grid {
    display: grid;
    gap: clamp(20px, 2vw, 28px);
}
.benqu-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.benqu-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.benqu-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Vertical card (default in grids) */
.benqu-card { position: relative; }
.benqu-card-image {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3/2;
    background: var(--benqu-bg-alt);
    border-radius: 0;
}
.benqu-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--benqu-ease);
}
.benqu-card:hover .benqu-card-image img { transform: scale(1.04); }
.benqu-card-image .benqu-pill {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
}
.benqu-card-image.benqu-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--benqu-serif);
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255,255,255,0.55);
}
.benqu-card-body {
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.benqu-card-body > .benqu-pill { align-self: flex-start; }
.benqu-card-title {
    font-family: var(--benqu-serif);
    font-weight: 700;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.22;
    letter-spacing: 0;
    margin: 0;
    color: var(--benqu-ink);
}
.benqu-card-title a { color: inherit; }
.benqu-card-title a:hover { color: var(--benqu-accent); }
.benqu-card-excerpt {
    font-size: 13px;
    line-height: 1.55;
    color: var(--benqu-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.benqu-card-meta {
    font-family: var(--benqu-sans);
    font-size: 11px;
    color: var(--benqu-ink-3);
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
    text-transform: uppercase;
    font-weight: 600;
}
.benqu-card-meta .by {
    color: var(--benqu-ink-2);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.benqu-card-meta strong {
    color: var(--benqu-ink);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: -8px;
}
.benqu-card-meta .dot { display: none; }
/* Icon-prefixed date/comments (calendar, chat bubble) */
.benqu-card-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.benqu-card-meta .meta-item svg {
    width: 12px;
    height: 12px;
    color: var(--benqu-ink-3);
}

/* Horizontal card (list variant — small square thumb + text) */
.benqu-card-h {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    align-items: start;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--benqu-line);
}
.benqu-card-h:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.benqu-card-h .benqu-card-image { aspect-ratio: 1/1; }
.benqu-card-h .benqu-card-image .benqu-pill {
    display: none; /* pill goes ABOVE the title in horizontal layout */
}
.benqu-card-h .benqu-card-body { padding: 0; gap: 6px; }
.benqu-card-h .benqu-card-title { font-size: 15px; line-height: 1.3; }
.benqu-card-h .benqu-card-excerpt { display: none; }
.benqu-card-h .benqu-card-meta { font-size: 11px; }

/* "Popular Posts" row card — circular thumb + text (Benqu style).
   Structure:  [ 62px round thumb ]  📅 date / Title */
.benqu-card-numbered {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--benqu-line);
}
.benqu-card-numbered:last-child { border-bottom: none; }
.benqu-card-num {
    display: none;   /* Reference doesn't use big numerals in the sidebar */
}
.benqu-card-numbered .benqu-card-image {
    width: 62px;
    height: 62px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 0 0 2px currentColor;
    overflow: hidden;
}
.benqu-card-numbered .benqu-card-image img {
    border-radius: 50%;
}
.benqu-card-numbered .benqu-card-title {
    font-size: 14px;
    line-height: 1.3;
    margin-top: 4px;
    font-weight: 700;
}
.benqu-card-numbered .benqu-card-meta {
    font-size: 10.5px;
    margin-top: 0;
    margin-bottom: 2px;
}
.benqu-card-numbered .benqu-pill {
    display: none;   /* Benqu's popular-post row shows only date + title */
}

/* Big feature card (used in "Featured Post" solo section) */
.benqu-card-featured {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(20px, 2.5vw, 40px);
    align-items: center;
    padding: clamp(20px, 2.5vw, 32px);
    background: var(--benqu-bg-alt);
    border-radius: var(--benqu-radius-lg);
}
.benqu-card-featured .benqu-card-image {
    aspect-ratio: 4/3;
    margin: 0;
}
.benqu-card-featured .benqu-card-title {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.15;
    margin-top: 12px;
}
.benqu-card-featured .benqu-card-excerpt {
    -webkit-line-clamp: 3;
    font-size: 14.5px;
    margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════════════════
  10. TABBED SECTION (Latest / Popular / Trending)
   ══════════════════════════════════════════════════════════════════════ */

.benqu-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.benqu-tab {
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--benqu-line);
    color: var(--benqu-ink-2);
    font-family: var(--benqu-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--benqu-radius-pill);
    cursor: pointer;
    transition: all 0.2s var(--benqu-ease);
}
.benqu-tab:hover { border-color: var(--benqu-accent); color: var(--benqu-accent); }
.benqu-tab.is-active {
    background: var(--benqu-accent);
    border-color: var(--benqu-accent);
    color: #ffffff;
}
.benqu-tabpanel { display: none; }
.benqu-tabpanel.is-active { display: block; }

/* ══════════════════════════════════════════════════════════════════════
  11. STATS STRIP (30k+ Like, 25k+ Followers)
   ══════════════════════════════════════════════════════════════════════ */

.benqu-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.benqu-stat {
    padding: 20px 12px;
    background: var(--benqu-ink-950);
    color: #ffffff;
    border-radius: var(--benqu-radius-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--benqu-sans);
}
.benqu-stat-icon { color: var(--benqu-accent); }
.benqu-stat-num {
    font-family: var(--benqu-serif);
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.benqu-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
  12. SIDEBAR (used on single + some homepage sections)
   ══════════════════════════════════════════════════════════════════════ */

.benqu-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.benqu-sidebar-block { }
/* Sidebar title uses the same centered-with-lines style as sections,
   just at a smaller size so it fits in a narrower column. */
.benqu-sidebar-title {
    font-family: var(--benqu-serif);
    font-weight: 800;
    font-size: 1.15rem;
    text-transform: capitalize;
    margin-bottom: 18px;
    color: var(--benqu-ink);
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    text-align: center;
    letter-spacing: -0.005em;
}
.benqu-sidebar-title::before,
.benqu-sidebar-title::after {
    content: "";
    height: 1px;
    background: var(--benqu-line);
}
.benqu-sidebar-title > span {
    grid-column: 2;
    white-space: nowrap;
    padding: 0 4px;
}

/* Newsletter block */
.benqu-newsletter {
    padding: 24px;
    background: var(--benqu-ink-950);
    color: #ffffff;
    border-radius: var(--benqu-radius-lg);
    text-align: center;
}
.benqu-newsletter h4 {
    color: #ffffff;
    font-size: 1.15rem;
    margin-bottom: 8px;
}
.benqu-newsletter p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
    margin-bottom: 16px;
}
.benqu-newsletter form {
    display: flex;
    gap: 6px;
    flex-direction: column;
}
.benqu-newsletter input[type=email] {
    padding: 10px 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    border-radius: var(--benqu-radius);
}
.benqu-newsletter input[type=email]::placeholder { color: rgba(255,255,255,0.5); }
.benqu-newsletter button {
    padding: 10px 16px;
    background: var(--benqu-primary);
    color: #ffffff;
    border: none;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--benqu-radius-pill);
    transition: background 0.2s var(--benqu-ease);
}
.benqu-newsletter button:hover { background: var(--benqu-primary-2); }

/* Popular categories list */
/* "Popular Category" — decorative colored pill boxes, 2 columns. */
.benqu-cat-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.benqu-cat-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 14px;
    background: var(--benqu-bg-alt);
    border-radius: var(--benqu-radius-lg);
    font-family: var(--benqu-sans);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.2s var(--benqu-ease);
    text-align: center;
    line-height: 1.2;
    min-height: 82px;
    position: relative;
    overflow: hidden;
}
.benqu-cat-list a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(26,26,36,0.15);
    color: #ffffff;
}
.benqu-cat-list a span {
    color: rgba(255,255,255,0.9);
    font-size: 11.5px;
    font-weight: 600;
    margin-left: 4px;
}
/* Color rotation for the decorative pill grid */
.benqu-cat-list a:nth-child(6n+1) { background: var(--benqu-cat-action); }
.benqu-cat-list a:nth-child(6n+2) { background: var(--benqu-cat-creative); }
.benqu-cat-list a:nth-child(6n+3) { background: var(--benqu-cat-fantasy); }
.benqu-cat-list a:nth-child(6n+4) { background: var(--benqu-cat-fashion); }
.benqu-cat-list a:nth-child(6n+5) { background: var(--benqu-cat-food); }
.benqu-cat-list a:nth-child(6n+6) { background: var(--benqu-cat-gaming); }

/* Tag cloud — dark pill tags on light bg */
.benqu-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.benqu-tag-cloud a {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--benqu-line);
    font-size: 11.5px;
    color: var(--benqu-ink-2);
    border-radius: var(--benqu-radius-pill);
    transition: all 0.2s var(--benqu-ease);
    text-transform: capitalize;
    font-weight: 600;
}
.benqu-tag-cloud a:hover {
    background: var(--benqu-primary);
    color: #ffffff;
    border-color: var(--benqu-primary);
}

/* ══════════════════════════════════════════════════════════════════════
  13. SINGLE POST
   ══════════════════════════════════════════════════════════════════════ */

.benqu-reading-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--benqu-primary);
    z-index: 100;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.1s linear;
    pointer-events: none;
}
.benqu-article-shell { padding: clamp(24px, 4vw, 40px) 0 clamp(40px, 6vw, 72px); }
.benqu-breadcrumb {
    font-size: 12px;
    color: var(--benqu-ink-3);
    letter-spacing: 0.02em;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.benqu-breadcrumb a { color: var(--benqu-ink-2); }
.benqu-breadcrumb a:hover { color: var(--benqu-primary); }
.benqu-breadcrumb .sep { opacity: 0.4; }

.benqu-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}
.benqu-article-main { min-width: 0; }
.benqu-article-head { margin-bottom: 24px; }
.benqu-article-head .benqu-pill { margin-bottom: 16px; }
.benqu-article-title {
    font-family: var(--benqu-serif);
    font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--benqu-ink);
    margin: 0 0 18px;
}
.benqu-article-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-family: var(--benqu-sans);
    font-size: 13px;
    color: var(--benqu-ink-2);
}
.benqu-article-meta .avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
}
.benqu-article-meta .dot { opacity: 0.4; }
.benqu-article-meta .meta-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--benqu-primary);
}

.benqu-article-hero {
    margin: 0 0 32px;
}
.benqu-article-hero img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--benqu-radius);
}

.benqu-share-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.benqu-share-inline-label {
    font-family: var(--benqu-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--benqu-ink-3);
    font-weight: 700;
    margin-right: 4px;
}
.benqu-share-inline a {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--benqu-line);
    color: var(--benqu-ink);
    border-radius: 3px;
    transition: all 0.2s var(--benqu-ease);
}
.benqu-share-inline a:hover {
    background: var(--benqu-primary);
    color: #ffffff;
    border-color: var(--benqu-primary);
}

.benqu-article-body {
    font-family: var(--benqu-lora);
    font-size: 18px;
    line-height: 1.8;
    color: #2b2b2b;
}
.benqu-article-body p { margin: 0 0 1.3em; }
.benqu-article-body h2 {
    font-family: var(--benqu-serif);
    font-size: clamp(1.45rem, 2.1vw, 1.8rem);
    margin: 2em 0 0.6em;
    color: var(--benqu-ink);
}
.benqu-article-body h3 {
    font-family: var(--benqu-serif);
    font-size: 1.32rem;
    margin: 1.6em 0 0.5em;
    color: var(--benqu-ink);
}
.benqu-article-body a {
    color: var(--benqu-primary);
    border-bottom: 1px solid rgba(78, 70, 229, 0.35);
}
.benqu-article-body a:hover { border-bottom-color: var(--benqu-primary); }
.benqu-article-body ul, .benqu-article-body ol { margin: 0 0 1.3em 1.4em; }
.benqu-article-body ul li, .benqu-article-body ol li { margin-bottom: 0.5em; list-style: revert; }
.benqu-article-body blockquote {
    margin: 1.8em 0;
    padding: 4px 0 4px 22px;
    border-left: 4px solid var(--benqu-primary);
    font-family: var(--benqu-lora);
    font-style: italic;
    font-size: 1.3em;
    line-height: 1.45;
    color: var(--benqu-ink);
}
.benqu-article-body img { margin: 1.6em auto; border-radius: var(--benqu-radius); }
.benqu-article-body figure { margin: 1.6em 0; }
.benqu-article-body figure figcaption {
    font-family: var(--benqu-sans);
    font-size: 12px;
    color: var(--benqu-ink-3);
    text-align: center;
    margin-top: 8px;
}
/* Drop cap */
.benqu-article-body > p:first-of-type::first-letter {
    font-family: var(--benqu-lora);
    font-weight: 700;
    font-size: 3.8em;
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.12em 0 0;
    color: var(--benqu-primary);
}

/* Article CTA — Benqu re-skin */
.benqu-article-body .article-cta,
.article-cta {
    margin: 2em 0;
    padding: clamp(20px, 2.5vw, 30px);
    background: var(--benqu-navy);
    color: #ffffff;
    border-radius: var(--benqu-radius);
    border-left: 4px solid var(--benqu-accent);
    font-family: var(--benqu-sans);
    font-size: 15px;
    line-height: 1.55;
}
.benqu-article-body .article-cta h3,
.article-cta h3 {
    font-family: var(--benqu-serif);
    font-size: 1.25rem;
    margin: 0 0 8px;
    color: #ffffff;
}
.benqu-article-body .article-cta p,
.article-cta p { color: rgba(255,255,255,0.85); }
.benqu-article-body .article-cta a.button,
.benqu-article-body .article-cta .cta-button,
.article-cta a.button,
.article-cta .cta-button {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 20px;
    background: var(--benqu-accent);
    color: #ffffff !important;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    border-radius: var(--benqu-radius);
}
.article-cta a.button:hover,
.article-cta .cta-button:hover { background: var(--benqu-primary-2); }

/* TOC */
.benqu-toc {
    margin: 20px 0 28px;
    padding: 18px 22px;
    background: var(--benqu-bg-alt);
    border-left: 4px solid var(--benqu-accent);
    font-family: var(--benqu-sans);
    font-size: 14px;
    border-radius: var(--benqu-radius);
}
.benqu-toc-title {
    font-family: var(--benqu-serif);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--benqu-primary);
    margin-bottom: 10px;
}
.benqu-toc ol { counter-reset: toc; margin: 0; padding: 0; }
.benqu-toc ol li {
    counter-increment: toc;
    margin-bottom: 5px;
    padding-left: 30px;
    position: relative;
    line-height: 1.4;
}
.benqu-toc ol li::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    font-family: var(--benqu-serif);
    font-weight: 700;
    color: var(--benqu-accent);
}
.benqu-toc a { color: var(--benqu-ink); }
.benqu-toc a:hover { color: var(--benqu-accent); }

/* Feedback */
.benqu-feedback {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    margin: 32px 0 0;
    border-top: 1px solid var(--benqu-line);
    border-bottom: 1px solid var(--benqu-line);
    font-family: var(--benqu-sans);
    font-size: 14px;
    color: var(--benqu-ink-2);
    flex-wrap: wrap;
}
.benqu-feedback-q {
    font-family: var(--benqu-serif);
    font-weight: 700;
    color: var(--benqu-primary);
    margin-right: auto;
}
.benqu-feedback button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--benqu-line);
    border-radius: var(--benqu-radius-pill);
    font-weight: 600;
    font-size: 13px;
    color: var(--benqu-ink);
    cursor: pointer;
    transition: all 0.2s var(--benqu-ease);
}
.benqu-feedback button:hover {
    border-color: var(--benqu-accent);
    color: var(--benqu-accent);
}
.benqu-feedback-thanks {
    color: var(--benqu-accent);
    font-weight: 700;
}

/* Tags below article */
.benqu-tags {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.benqu-tags-label {
    font-family: var(--benqu-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--benqu-ink-3);
    font-weight: 700;
    margin-right: 4px;
}
.benqu-tag {
    padding: 4px 12px;
    background: var(--benqu-bg-alt);
    border: 1px solid var(--benqu-line);
    font-size: 12px;
    color: var(--benqu-ink-2);
    border-radius: var(--benqu-radius);
    transition: all 0.2s var(--benqu-ease);
    text-transform: capitalize;
}
.benqu-tag:hover {
    background: var(--benqu-accent);
    color: #ffffff;
    border-color: var(--benqu-accent);
}

/* Author bio */
.benqu-author-bio {
    margin-top: 36px;
    padding: 24px;
    background: var(--benqu-bg-alt);
    border-radius: var(--benqu-radius);
    border-left: 4px solid var(--benqu-accent);
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 20px;
    align-items: start;
}
.benqu-author-bio .avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
}
.benqu-author-name {
    font-family: var(--benqu-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--benqu-ink);
    margin-bottom: 4px;
}
.benqu-author-title {
    font-family: var(--benqu-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--benqu-ink-3);
    margin-bottom: 6px;
}
.benqu-author-credentials {
    display: inline-block;
    background: var(--benqu-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--benqu-radius);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}
.benqu-author-desc {
    font-family: var(--benqu-sans);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--benqu-ink-2);
    margin-bottom: 10px;
}
.benqu-author-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.benqu-author-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--benqu-line);
    font-size: 11px;
    font-weight: 700;
    color: var(--benqu-ink);
    border-radius: var(--benqu-radius);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.2s var(--benqu-ease);
}
.benqu-author-link:hover {
    background: var(--benqu-navy);
    color: #ffffff;
    border-color: var(--benqu-navy);
}
.benqu-author-experience {
    font-size: 11.5px;
    color: var(--benqu-ink-3);
    font-weight: 500;
}

/* Related grid */
.benqu-related {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--benqu-line);
}
.benqu-related-title {
    font-family: var(--benqu-serif);
    font-size: 1.4rem;
    text-transform: capitalize;
    margin-bottom: 20px;
    padding-left: 14px;
    position: relative;
    color: var(--benqu-ink);
}
.benqu-related-title::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 4px;
    background: var(--benqu-accent);
    border-radius: 2px;
}

/* Read-next sticky bar */
.benqu-read-next {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%) translateY(150%);
    background: var(--benqu-navy);
    color: #ffffff;
    max-width: min(640px, calc(100vw - 40px));
    padding: 12px 14px 12px 20px;
    box-shadow: 0 8px 30px rgba(13, 20, 33, 0.4);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 80;
    transition: transform 0.4s var(--benqu-ease);
    font-family: var(--benqu-sans);
    font-size: 13px;
    border-radius: var(--benqu-radius);
    border-left: 3px solid var(--benqu-accent);
}
.benqu-read-next.visible { transform: translateX(-50%) translateY(0); }
.benqu-read-next-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--benqu-accent);
    font-weight: 700;
    flex-shrink: 0;
}
.benqu-read-next-title {
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    max-height: 2.6em;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}
.benqu-read-next-cta {
    background: var(--benqu-accent);
    color: #ffffff;
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 16px;
    text-decoration: none;
}

/* Archive header */
.benqu-archive-header {
    padding: clamp(40px, 6vw, 72px) 0;
    text-align: center;
    background: var(--benqu-ink-950);
    color: #ffffff;
}
.benqu-archive-title {
    font-family: var(--benqu-serif);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #ffffff;
    margin-bottom: 12px;
}
.benqu-archive-title::before {
    content: "";
    display: block;
    width: 44px; height: 3px;
    background: var(--benqu-accent);
    margin: 0 auto 20px;
}
.benqu-archive-description {
    max-width: 640px;
    margin: 0 auto;
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    line-height: 1.55;
}

/* Pagination */
.benqu-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 6px;
    font-family: var(--benqu-sans);
    font-size: 13px;
    font-weight: 700;
}
.benqu-pagination .page-numbers {
    padding: 8px 14px;
    border: 1px solid var(--benqu-line);
    color: var(--benqu-ink);
    display: inline-flex;
    align-items: center;
    min-width: 36px;
    justify-content: center;
    border-radius: var(--benqu-radius);
}
.benqu-pagination .page-numbers.current {
    background: var(--benqu-accent);
    color: #ffffff;
    border-color: var(--benqu-accent);
}
.benqu-pagination a.page-numbers:hover {
    background: var(--benqu-bg-alt);
    border-color: var(--benqu-accent);
}

/* ══════════════════════════════════════════════════════════════════════
  14. FOOTER — dark navy multi-column
   ══════════════════════════════════════════════════════════════════════ */

.benqu-footer {
    background: var(--benqu-ink-950);
    color: #d5d8e0;
    padding: clamp(40px, 5vw, 64px) 0 0;
    margin-top: clamp(40px, 5vw, 64px);
}
.benqu-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: clamp(24px, 3vw, 44px);
    margin-bottom: 40px;
}
.benqu-footer-brand {
    font-family: var(--benqu-serif);
    font-weight: 800;
    font-size: 1.7rem;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: inline-block;
}
.benqu-footer-desc {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
    max-width: 40ch;
    margin-bottom: 16px;
}
.benqu-footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}
.benqu-footer-contact-list li {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
}
.benqu-footer-contact-list svg { color: var(--benqu-accent); flex-shrink: 0; margin-top: 3px; }
.benqu-footer-social {
    margin-top: 14px;
    display: flex;
    gap: 8px;
}
.benqu-footer-social a {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    border-radius: 3px;
    transition: all 0.2s var(--benqu-ease);
}
.benqu-footer-social a:hover {
    background: var(--benqu-accent);
    color: #ffffff;
}
.benqu-footer h4 {
    color: #ffffff;
    font-family: var(--benqu-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative;
}
.benqu-footer h4::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 32px; height: 2px;
    background: var(--benqu-accent);
}
.benqu-footer ul li {
    margin-bottom: 8px;
    font-size: 13px;
}
.benqu-footer ul li a { color: rgba(255,255,255,0.72); }
.benqu-footer ul li a:hover { color: var(--benqu-accent); }
.benqu-footer-popular {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.benqu-footer-popular-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px;
    align-items: center;
}
.benqu-footer-popular-item .benqu-card-image {
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}
.benqu-footer-popular-item .benqu-card-image img { border-radius: 50%; }
.benqu-footer-popular-item .benqu-card-title {
    font-size: 13px;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
}
.benqu-footer-popular-item .benqu-card-title a { color: #ffffff; }
.benqu-footer-popular-item .benqu-card-title a:hover { color: var(--benqu-accent); }
.benqu-footer-popular-item .benqu-card-meta { font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 3px; }

/* Footer category strip — mimics the "Food • Tech • Fashion" ribbon
   Benqu shows below the copyright row. Sits on a slightly-lighter band. */
.benqu-footer-cats {
    background: rgba(255,255,255,0.04);
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 24px;
}
.benqu-footer-cats-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-family: var(--benqu-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.7);
}
.benqu-footer-cats-inner a {
    color: rgba(255,255,255,0.7);
    position: relative;
    padding: 0 4px;
    transition: color 0.2s var(--benqu-ease);
}
.benqu-footer-cats-inner a:hover { color: var(--benqu-primary); }
.benqu-footer-cats-inner a + a::before {
    content: "•";
    position: absolute;
    left: -14px;
    color: rgba(255,255,255,0.25);
    font-weight: 400;
}

.benqu-footer-bottom {
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    flex-wrap: wrap;
    gap: 12px;
}
.benqu-footer-bottom strong { color: #ffffff; font-weight: 700; }

/* Footer "Our Authors" — compact two-column roster (E-E-A-T). */
.benqu-footer-authors {
    columns: 2;
    column-gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.benqu-footer-authors li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 8px;
    font-size: 13px;
}
.benqu-footer-authors li a { color: rgba(255,255,255,0.72); }
.benqu-footer-authors li a:hover { color: var(--benqu-accent); }

/* Footer-bottom nav (privacy / terms / contact from the footer menu). */
.benqu-footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.benqu-footer-nav ul li { margin: 0; font-size: 12px; }
.benqu-footer-nav a { color: rgba(255,255,255,0.55); }
.benqu-footer-nav a:hover { color: var(--benqu-accent); }

/* Sticky footer CTA */
.benqu-sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--benqu-ink-950);
    color: #ffffff;
    padding: 12px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    z-index: 70;
    box-shadow: 0 -8px 30px rgba(13,20,33,0.35);
    transform: translateY(100%);
    transition: transform 0.4s var(--benqu-ease);
    font-family: var(--benqu-sans);
    border-top: 3px solid var(--benqu-accent);
}
.benqu-sticky-cta.visible { transform: translateY(0); }
.benqu-sticky-cta-text {
    font-family: var(--benqu-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.benqu-sticky-cta-btn {
    background: var(--benqu-accent);
    color: #ffffff !important;
    padding: 9px 20px;
    border-radius: var(--benqu-radius);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.benqu-sticky-cta-btn:hover { background: var(--benqu-primary-2); color: #ffffff; }
.benqu-sticky-cta-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0 6px;
}
.benqu-sticky-cta-close:hover { color: #ffffff; }

/* ══════════════════════════════════════════════════════════════════════
  15. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .benqu-article-layout { grid-template-columns: 1fr; }
    .benqu-grid-4 { grid-template-columns: repeat(3, 1fr); }
    .benqu-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    /* Keep the Benqu 60/40 hero on real laptops (≥900px); only stack it
       once the nav also collapses to the hamburger. */
    .benqu-hero-grid { grid-template-columns: 1fr; }
    .benqu-hero-main { min-height: 400px; aspect-ratio: 16/10; }
    .benqu-topbar-inner { grid-template-columns: 1fr; text-align: center; }
    .benqu-topbar-ticker { display: none; }
    .benqu-nav-inner { padding: 0 12px; }
    .benqu-nav ul { display: none; flex-direction: column; width: 100%; }
    .benqu-nav ul.is-open {
        display: flex;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--benqu-navy-2);
        border-top: 1px solid var(--benqu-navy-line);
        padding: 8px 0;
    }
    .benqu-nav ul.is-open li { border-bottom: 1px solid var(--benqu-navy-line); }
    .benqu-nav ul.is-open li:last-child { border-bottom: none; }
    .benqu-menu-toggle { display: block; }
    .benqu-info-strip-inner { grid-template-columns: 1fr; text-align: center; }
    .benqu-info-strip-item { justify-content: center; }
    .benqu-footer-grid { grid-template-columns: 1fr 1fr; }
    .benqu-card-featured { grid-template-columns: 1fr; }
    .benqu-grid-4, .benqu-grid-3, .benqu-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .benqu-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .benqu-masthead-inner { grid-template-columns: 1fr; gap: 12px; }
    .benqu-masthead-search { max-width: none; justify-self: stretch; }
    .benqu-grid-4, .benqu-grid-3, .benqu-grid-2 { grid-template-columns: 1fr; }
    .benqu-footer-grid { grid-template-columns: 1fr; }
    .benqu-author-bio { grid-template-columns: 1fr; text-align: center; }
    .benqu-author-bio .avatar { margin: 0 auto; }
    .benqu-author-links { justify-content: center; }
    .benqu-hero-side-card { grid-template-columns: 100px 1fr; }
    .benqu-article-title { font-size: 1.7rem; }
    .benqu-article-body { font-size: 16px; }
    .benqu-article-body > p:first-of-type::first-letter { font-size: 3em; }
    .benqu-sticky-cta { flex-direction: column; gap: 8px; padding: 10px 14px; }
    .benqu-sticky-cta-close { position: absolute; right: 6px; top: 4px; }
    .benqu-read-next { flex-direction: row; padding: 10px 14px; font-size: 12px; }
    .benqu-read-next-label { display: none; }
    .benqu-card-numbered { grid-template-columns: 36px 70px 1fr; gap: 10px; }
    .benqu-card-num { font-size: 1.8rem; }
}

/* ══════════════════════════════════════════════════════════════════════
  16. LEAD-CAPTURE COMPATIBILITY
   ══════════════════════════════════════════════════════════════════════ */

.aeo-inline-banner {
    margin: 2em 0 !important;
}
#lawyer-lead-form-v2-modal,
.satellite-lead-popup,
#exit-intent-popup,
.aeo-lead-popup,
.vai-teaser,
#vai-teaser {
    z-index: 2147482900 !important;
}