/* ============================================================
   premium_styles.css  —  Premium variable overrides + accents
   Loaded last. Warms up cold slate colors. Fills missing vars.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   1. ROOT OVERRIDES — fix cold/dull variables site-wide
   ══════════════════════════════════════════════════════════ */

:root {
    /* ── Gold scale (was mostly missing) */
    --gold-300: #d4aa6a;
    --gold-400: #c09a58;
    --gold-500: #B08D57;          /* = --secondary-color */
    --gold-600: #9a7a48;
    --gold-700: #7d6038;

    /* ── Client-color tints (all were undefined) */
    --client-color-900: #0f1a14;
    --client-color-800: #162620;
    --client-color-700: #1a2e29;
    --client-color-600: #203c3e;  /* = --client-color */
    --client-color-500: #2d5550;
    --client-color-400: #3d706a;

    /* ── Warm text — replace cold slate */
    --text-primary:   #111816;    /* rich near-black, warm undertone */
    --text-secondary: #4a4540;    /* warm dark taupe, NOT cold #475569 */
    --text-muted:     #7a6f65;    /* warm muted, NOT cold #64748b */

    /* ── Page background — warm ivory, NOT cold white */
    --bg:             #f8f5f0;
    --color-bg:       #f8f5f0;
    --card-bg:        #ffffff;

    /* ── Section alternate background — semi-transparent so the ambient
       animated backdrop (§22) shows through the section bands. */
    --color-bg-section: rgba(241, 236, 228, .5);

    /* ── Accent pointer (used for focus rings etc) */
    --accent: var(--client-color);

    /* ── Missing colour tokens used in components.css / common.css */
    --color-primary:        var(--client-color);
    --color-info-dark:      var(--client-color-700);
    --color-border:         rgba(17,24,22,0.10);
    --color-white:          #ffffff;
    --color-danger:         #b91c1c;
    --color-text-muted:     var(--text-muted);
    --color-success:        #15803d;
    --color-success-bg:     #f0fdf4;
    --color-success-text:   #166534;
    --color-error-bg:       #fef2f2;
    --color-error-text:     #991b1b;
    --color-pill-market-bg: rgba(32,60,62,0.08);
    --color-tag-suggested:  var(--client-color);

    /* ── Slate warm-shift (used in tables, misc) */
    --slate-100: #f5f2ed;
    --slate-200: #e8e2d8;
    --slate-300: #d4ccc0;
    --slate-500: #7a6f65;
    --slate-600: #4a4540;
    --slate-700: #332e28;
    --slate-800: #1e1a15;
    --slate-900: #111816;
}


/* ══════════════════════════════════════════════════════════
   2. BODY & PAGE BACKGROUND — warm, not clinical white
   ══════════════════════════════════════════════════════════ */

body {
    background: var(--bg);
    color: var(--text-primary);
}


/* ══════════════════════════════════════════════════════════
   3. HEADINGS — tighter, richer
   ══════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

/* Section h2 gold underline */
.section-header-wrap h2::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: var(--secondary-color);
    margin-top: 8px;
    border-radius: 2px;
}


/* ══════════════════════════════════════════════════════════
   4. HEADER
   ══════════════════════════════════════════════════════════ */




/* ══════════════════════════════════════════════════════════
   5. BUTTONS — rich, no shadow, no transform
   ══════════════════════════════════════════════════════════ */

.btn {
    box-shadow: none !important;
    font-weight: 600;
    border-radius: var(--radius-sm) !important;
}
.btn:hover { transform: none !important; box-shadow: none !important; filter: none !important; }

.btn-primary {
    background: var(--client-color) !important;
    border-color: var(--client-color) !important;
    color: #fff !important;
}
.btn-primary:hover { background: var(--client-color-700) !important; }


/* ══════════════════════════════════════════════════════════
   6. JOURNEY CARDS — no shadow, gold CTA
   ══════════════════════════════════════════════════════════ */

.jny-card { box-shadow: none !important; }
.jny-card:hover { box-shadow: none !important; }
.jny-card__title { font-family: var(--font-display); letter-spacing: -0.02em; }
.jny-card__cta   { background: var(--secondary-color) !important; box-shadow: none !important; }
.jny-card:hover .jny-card__cta { background: var(--gold-600) !important; }


/* ══════════════════════════════════════════════════════════
   7. GUIDE CARDS
   ══════════════════════════════════════════════════════════ */

.guide-card {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(32,60,62,.07) !important;
    border: 2px solid rgba(32,60,62,.40) !important;
    border-radius: 12px !important;
}

.guide-card-category {
    font-size: 0.60rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    color: var(--text-primary) !important;
    background: none !important;
}
.guide-card .card-title-highlight {
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    color: var(--client-color) !important;
}
.guide-card .card-desc-text { color: var(--text-secondary); }
.guide-card .read-more { color: var(--secondary-color) !important; font-weight: 700 !important; }
.guide-card-icon-sm {
    background: rgba(176,141,87,0.10) !important;
    border: 1.5px solid rgba(176,141,87,0.22) !important;
    color: var(--secondary-color) !important;
    box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════
   8. EXPERT CARDS
   ══════════════════════════════════════════════════════════ */

.expert-card {
    background: #ffffff !important;
    box-shadow: none !important;
    border: 1px solid rgba(17,24,22,0.08) !important;
    border-radius: var(--radius-md) !important;
}
.expert-card:hover { box-shadow: none !important; transform: none !important; }
.expert-card::before { display: none !important; }

.expert-name { font-family: var(--font-display); color: var(--text-primary); letter-spacing: -0.01em; }
.expert-title { color: var(--secondary-color) !important; font-weight: 600; }
.expert-profile-btn {
    background: var(--client-color) !important;
    border-color: var(--client-color) !important;
    box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════
   9. MINI / NEWS CARDS
   ══════════════════════════════════════════════════════════ */

.mini-card-title { color: var(--text-primary) !important; font-weight: 600; }
.mini-card-tag {
    color: var(--client-color) !important;
    background: rgba(32,60,62,0.08) !important;
    font-weight: 700;
}
a.mini-card:hover .mini-card-title { color: var(--client-color) !important; }


/* ══════════════════════════════════════════════════════════
   10. CATEGORY HERO
   ══════════════════════════════════════════════════════════ */

.category-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    letter-spacing: -0.03em;
}
.category-hero { border-bottom: 1px solid rgba(17,24,22,0.07); }
.phb-overlay   { border-bottom: none !important; }


/* ══════════════════════════════════════════════════════════
   11. FOOTER
   ══════════════════════════════════════════════════════════ */

.site-footer {
    box-shadow: none !important;
    border-top: 2px solid var(--secondary-color) !important;
}
.footer-col h4 { font-family: var(--font-display); }
.footer-link:hover { color: var(--secondary-color); }


/* ══════════════════════════════════════════════════════════
   12. MISC
   ══════════════════════════════════════════════════════════ */

.bsl__progress-bar          { background: var(--secondary-color) !important; }
.banners-promo-section      { border-bottom: 2px solid var(--secondary-color) !important; }




/* ══════════════════════════════════════════════════════════
   13. LUXURY REFINEMENTS — Tight rhythm, editorial polish
   Surgical overrides only. No global tag overrides.
   ══════════════════════════════════════════════════════════ */

/* ─── 13a. Section padding — eliminate the bloat ──────────── */
.section-pad                  { padding: 40px 0 !important; }
.section-pad-sm               { padding: 24px 0 !important; }

.journey-section              { padding: 28px 0 24px !important; }
.tools-section                { padding: 32px 0    !important; }
.guides-section               { padding: 32px 0    !important; }
.news-three-col               { padding: 32px 0    !important; }
.home-resources-section       { padding: 28px 0    !important; }
.banners-promo-section        { padding: 0         !important; }
.calculators-section          { padding: 28px 0    !important; }
.guides-listing               { padding: 28px 0    !important; }
.guides-grid-section          { padding: 28px 0    !important; }
.tools-listing-page           { padding: 28px 0    !important; }
.need-help-section            { padding: 22px 0    !important; }
/* .jny2-wrap                    { padding: 28px 0    !important; } */

.cat-guide-hero-section       { padding: 24px 0 18px !important; }
.cat-guide-articles-section   { padding: 24px 0 32px !important; }
.cat-guide-news-section       { padding: 24px 0    !important; }
.cat-guide-calcs-section      { padding: 20px 0    !important; }
.cat-highlight-section        { padding: 24px 0    !important; }

.newsletter-cta { padding: 26px 36px !important; margin: 16px auto !important; border-radius: 10px !important; }
.newsletter-cta .newsletter-inner { gap: 40px !important; }


/* ─── 13b. Section headers — refined, not oversized ───────── */
/* .section-header, */
/* .section-header-wrap { margin-bottom: 18px !important; } */

/* Tighter heading size inside section headers only */
.section-header     > h2,
.section-header-wrap > h2 {
    font-size: clamp(1.1rem, 2.2vw, 1.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.022em !important;
}

/* Gold hairline on ALL section-header h2 (section 3 only does -wrap variant) */
/* .section-header > h2::after {
    content: '';
    display: block;
    width: 28px; height: 2px;
    background: var(--secondary-color);
    margin-top: 6px; border-radius: 2px;
} */
/* .section-header--center > h2::after { margin: 6px auto 0; } */

/* "View all" link */
.section-header .read-more,
.section-header-wrap .read-more {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--secondary-color) !important;
}
.section-header .read-more:hover,
.section-header-wrap .read-more:hover { text-decoration: underline; }

/* Journey heading */
.journey-title              { margin-bottom: 16px !important; }
.journey-title > h2         { font-size: clamp(1.1rem, 2.2vw, 1.5rem) !important; font-weight: 700 !important; letter-spacing: -0.022em !important; }
.journey-title .underline-accent { background: var(--secondary-color) !important; width: 28px !important; height: 2px !important; }

/* News column headers */
.news-col-header            { margin-bottom: 14px !important; }
.news-col-header h3         { font-size: clamp(0.95rem, 1.8vw, 1.15rem) !important; }


/* ─── 13c. Eyebrow labels — gold, uppercase ────────────────── */
.pec-eyebrow,
.cat-guide-journey-label {
    font-size: 0.58rem !important;
    letter-spacing: 0.13em !important;
    font-weight: 800 !important;
    color: var(--secondary-color) !important;
    opacity: 1 !important;
}
.guide-card-category {
    font-size: 0.58rem !important;
    letter-spacing: 0.10em !important;
    font-weight: 800 !important;
    color: var(--secondary-color) !important;
    background: none !important;
}


/* ─── 13d. Guide cards — tighter body, 16:9 image area ─────── */
.guide-card-img--photo { aspect-ratio: 16 / 9 !important; height: auto !important; }
.guide-card-body       { padding: 11px 13px 14px !important; }


/* ─── 13e. Journey cards — slightly closer together ─────────── */
.journey-cards { gap: 12px !important; }


/* ─── 13f. Article / post page ─────────────────────────────── */
.article-body      { font-size: 1rem !important; line-height: 1.8 !important; }
.article-body p    { margin-bottom: 14px; }
.post-terms-bar    { padding: 9px 0 10px !important; }
.share-bar         { padding: 10px 0 !important; margin: 12px 0 18px !important; }


/* ─── 13g. Category / topic pages ──────────────────────────── */
.category-hero h1  { font-size: clamp(1.65rem, 3.2vw, 2.6rem) !important; }
.cat-guide-title   { font-size: 1.55rem !important; }


/* ─── 13h. Mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .section-pad    { padding: 26px 0 !important; }
    .section-pad-sm { padding: 16px 0 !important; }
    .journey-section,
    .tools-section,
    .guides-section,
    .news-three-col { padding: 22px 0 !important; }
    .newsletter-cta { padding: 20px 16px !important; margin: 10px !important; }
    .cat-guide-hero-section { padding: 14px 0 10px !important; }
}


/* ══════════════════════════════════════════════════════════════
   13b. HERO HOME — title padding + staggered fade-in
   ══════════════════════════════════════════════════════════════ */
.hero-home-inner { align-items: center !important; }
.hero-content { padding-top: 8px !important; }
.hero-title {
    letter-spacing: -0.02em !important;
    line-height: 1.12 !important;
    margin-bottom: var(--space-2) !important;
}


/* ══════════════════════════════════════════════════════════════
   14. CATEGORY ARTICLES GRID — featured + regular card styling
   ══════════════════════════════════════════════════════════════ */

/* ─── 14a. All listing cards: client-color border + shadow ─── */
.topic-articles-grid .glc {
    background: var(--color-white, #ffffff) !important;
    border: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.topic-articles-grid .glc:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(45, 90, 68, 0.08) !important;
    border-color: var(--color-primary, #2d5a44) !important;
}
.topic-articles-grid .glc-title {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: var(--color-heading, #0f172a) !important;
    margin: 0 0 4px 0 !important;
}
.topic-articles-grid .glc-body { 
    padding: 14px 16px 16px !important; 
    gap: 6px !important;
}


/* ─── 14c. Mobile: single column, equal styling ─────────────── */
@media (max-width: 480px) {
    .topic-articles-grid { gap: 12px !important; }
    .topic-articles-grid .glc-title { font-size: 0.9rem !important; }
}


/* ══════════════════════════════════════════════════════════════
   15. BRIGHT ACCENTS — strategic pops of vibrancy
   ══════════════════════════════════════════════════════════════ */

/* ─── 15a. Section header underline — shimmer gold + glow ────── */
.section-header > h2::after,
.section-header-wrap > h2::after {
    width: 40px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #c9a84c 0%, #f0d080 50%, #c9a84c 100%) !important;
    box-shadow: 0 0 10px rgba(201,168,76,.55) !important;
    border-radius: 3px !important;
}
.section-header--center > h2::after { margin: 6px auto 0 !important; }

/* Journey title accent line */
.journey-title .underline-accent {
    width: 40px !important; height: 3px !important;
    background: linear-gradient(90deg, #c9a84c 0%, #f0d080 50%, #c9a84c 100%) !important;
    box-shadow: 0 0 10px rgba(201,168,76,.5) !important;
    border-radius: 3px !important;
}


/* ─── 15b. Category badge on cards ─── */
.glc-cat {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: var(--color-primary, #2d5a44) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(4px) !important;
    margin: 0 !important;
}


/* ─── 15c. Card image ── */
.glc .glc-img {
    position: relative !important;
}
.glc .glc-img::before {
    display: none !important;
}

/* ─── 15c2. Gradient fallback ──── */
.glc-img-gradient {
    /* Rich primary green theme gradient fallback */
    background: linear-gradient(135deg, #1f4232 0%, #2d5a44 100%) !important;
    border-bottom: none !important;
}
.glc:nth-child(2n) .glc-img-gradient {
    background: linear-gradient(135deg, #193629 0%, #254a37 100%) !important;
    border-bottom: none !important;
}
.glc:nth-child(3n) .glc-img-gradient {
    background: linear-gradient(135deg, #254737 0%, #305f49 100%) !important;
    border-bottom: none !important;
}

/* Icon - clean white medallion, centered */
.glc-img-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    color: #e6c86a !important; /* Gold/yellow icon */
    font-size: 1.5rem !important;
    opacity: 1 !important;
    filter: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.glc-img-icon i::before,
.glc-img-icon .ah-ico::before {
    color: #e6c86a !important;
}


/* ─── 15d. "Read →" arrow — slides in gold on hover ────────── */
.glc:hover .glc-arrow {
    color: var(--secondary-color, #B08D57) !important;
}
/* Read time clock — slightly warmer, more visible */
.glc-read { color: var(--color-text-muted, #6b7280) !important; }


/* ─── 15f. Primary button — rich gradient, not flat ─────────── */
.btn-primary {
    background: linear-gradient(135deg, #163728 0%, var(--color-primary, #1e3a2f) 60%, #2d5c42 100%) !important;
    border-color: transparent !important;
    letter-spacing: 0.02em !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #1e4a35 0%, #2d6645 100%) !important;
    box-shadow: 0 6px 24px rgba(30,58,47,.30) !important;
    transform: translateY(-1px) !important;
    filter: none !important;
}


/* ─── 15g. Eyebrow labels — bright gold, stronger ───────────── */
.pec-eyebrow,
.cat-guide-journey-label {
    color: #d4aa50 !important;
    text-shadow: 0 0 12px rgba(212,170,80,.3) !important;
}


/* ─── 15h. Guide card category label — bright gold ──────────── */
.guide-card-category {
    color: #c9a84c !important;
}


/* ─── 15i. Journey card icon area — gold icon glow ──────────── */
.jny-card-icon {
    color: rgba(201,168,76,.9) !important;
    text-shadow: 0 0 12px rgba(201,168,76,.4) !important;
}


/* ─── 15j. Category guide-tools section — larger icon ───────── */
.cat-guide-tools-section .calc-card-icon-wrap {
    font-size: 3rem !important;
}


/* ─── 15k. Mobile: keep bright accents, simplify ─────────────── */
@media (max-width: 768px) {
    .glc-img-icon { font-size: 1.7rem !important; width: 54px !important; height: 54px !important; }
}


/* ══════════════════════════════════════════════════════════════
   16. 3D DEPTH EFFECTS + CALC CARD PREMIUM + SPACING CLAMPDOWN
   ══════════════════════════════════════════════════════════════ */

/* ─── 16a. Global spacing clampdown ─────────────────────────── */
.topic-listing-layout     { padding-top: 16px !important; padding-bottom: 24px !important; }
.cat-listing-header       { margin-bottom: 10px !important; }
.topic-calc-carousel-wrap { margin-top: 8px !important; }
.popular-tools-section    { padding-bottom: var(--space-4) !important; }
.all-tools-section        { padding-top: 0 !important; }
.find-calc-cta            { margin-top: var(--space-4) !important; padding: 14px 20px !important; }
.tools-trust-bar          { padding: 10px 0 !important; }

/* Section gaps on category page — tight, symmetric */
.cat-guide-related-section { padding: 10px 0 14px !important; }
.cat-guide-calcs-section   { padding: 10px 0 14px !important; }
.cat-highlight-section     { padding: 12px 0 !important; }
.newsletter-cta            { padding: 18px 24px !important; margin: 10px auto !important; }

/* Home page sections */
.tools-section    { padding: 24px 0 !important; }
.guides-section   { padding: 24px 0 !important; }
.journey-section  { padding: 20px 0 18px !important; }
.news-three-col   { padding: 24px 0 !important; }
.banners-promo-section { padding: 0 !important; }


/* ─── 16b. Calc card — UNIFIED premium design (all pages) ───── */

/* Shell — same border/radius/shadow everywhere */
.calc-card {
    border: 1px solid var(--client-color-400) !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    background: var(--color-white, #ffffff) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Media area — single light soft green tint */
.calc-card-media {
    background: radial-gradient(circle, rgba(45,90,68,0.08) 0%, rgba(45,90,68,0.02) 100%) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Remove gold shimmer line */
.calc-card-media::after {
    display: none !important;
}

/* Icon — gold glow replaced with modern circular badge */
.calc-card-icon-wrap {
    background: var(--color-white, #ffffff) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(45, 90, 68, 0.08) !important;
    border: 1px solid rgba(45, 90, 68, 0.08) !important;
    position: relative !important;
    inset: unset !important;
    filter: none !important;
}

.calc-card-icon-wrap i::before,
.calc-card-icon-wrap .ah-ico::before {
    color: var(--color-primary, #2d5a44) !important;
}

/* Card name — clean sans-serif */
.calc-card-name {
    font-family: var(--font-body, system-ui, -apple-system, sans-serif) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--color-heading, #0f172a) !important;
}

/* Carousel grid — layout only (appearance inherits above) */
/* .topic-calc-carousel {
    justify-content: center !important;
    gap: 12px !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 200px)) !important;
} */
.topic-calc-carousel .calc-card-media {
    aspect-ratio: 16 / 9 !important;
}
.topic-calc-carousel .calc-card-icon-wrap {
    font-size: 1.6rem !important;
}

/* Popular listing grid — slightly larger icon */
.calcs-popular-grid .calc-card-icon-wrap {
    font-size: 2.4rem !important;
}


/* ─── 16c. 3D hover effect — all calc cards ──────────────────── */
.popular-calc-card,
.calcs-popular-grid .calc-card,
.topic-calc-carousel .calc-card,
.tool-grid .calc-card {
    transition: transform 0.32s cubic-bezier(.22,.68,0,1.2),
                box-shadow 0.32s ease,
                border-color 0.2s ease !important;
    transform-origin: center 90% !important;
    will-change: transform;
}

.calcs-popular-grid .calc-card:hover,
.topic-calc-carousel .calc-card:hover {
    transform: translateY(-2px) rotateX(3deg) !important;
}

/* ─── 16c-2. UNIFIED calc card — ONE vertical 16/9 design everywhere
   Applies to every .calc-card (home tool-grid, related tools, category
   tools, carousels): media on top 16/9, name below. Container-specific
   grid/track widths are handled separately below.                     */
.calc-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
/* Media: full-width 16/9 light panel */
.calc-card-media {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 0 !important;
}
/* Body: name below, clean separator */
.calc-card-body {
    flex: 1 !important;
    border-left: none !important;
    border-top: 1px solid var(--color-border, #f1f5f9) !important;
    justify-content: flex-start !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    gap:5px;
}
.calc-card-name {
    font-family: var(--font-body, system-ui, -apple-system, sans-serif) !important;
    text-align: left !important;
    color: var(--color-heading, #0f172a) !important;
}

/* Container grids — consistent column sizing */
.tool-grid,
.category-section.category-tools .tool-grid--7col {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 16px !important;
}

/* Clean vertical lift on hover for the grid contexts */
.tool-grid .calc-card:hover,
.category-section.category-tools .calc-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(45, 90, 68, 0.08) !important;
    border-color: var(--color-primary, #2d5a44) !important;
}
.tool-grid .calc-card:hover .calc-card-media,
.category-section.category-tools .calc-card:hover .calc-card-media {
    background: #e6fbf0 !important;
}


/* ─── 16c-3. Popular Calculator Cards Redesign ────────────────── */
.popular-calc-card {
    background: var(--color-white, #ffffff) !important;
    border: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.popular-calc-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(45, 90, 68, 0.08) !important;
    border-color: var(--color-primary, #2d5a44) !important;
}
.popular-calc-icon {
    background: radial-gradient(circle, rgba(45,90,68,0.08) 0%, rgba(45,90,68,0.02) 100%) !important;
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.popular-calc-icon::after {
    display: none !important;
}
.popular-calc-icon i,
.popular-calc-icon .ah-ico {
    background: var(--color-white, #ffffff) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(45, 90, 68, 0.08) !important;
    border: 1px solid rgba(45, 90, 68, 0.08) !important;
    filter: none !important;
    text-shadow: none !important;
    font-size: 1.5rem !important;
    color: var(--color-primary, #2d5a44) !important;
}
.popular-calc-icon i::before,
.popular-calc-icon .ah-ico::before {
    color: var(--color-primary, #2d5a44) !important;
}
.popular-calc-card-body {
    padding: 14px 16px 16px !important;
    gap: 6px !important;
    border-top: 1px solid var(--color-border, #f1f5f9) !important;
    text-align: left !important;
}
.popular-calc-card h4 {
    font-family: var(--font-body, system-ui, -apple-system, sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    color: var(--color-heading, #0f172a) !important;
    margin: 0 0 4px 0 !important;
    text-align: left !important;
}
.popular-calc-card p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    color: var(--color-text, #475569) !important;
    margin-bottom: 8px !important;
    text-align: left !important;
}
.popular-calc-card .calc-cta {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--color-primary, #2d5a44) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
}


/* ─── 16d. Calc list items (tools page — all tools) ────────────── */
.calc-list-item {
    padding: 12px 16px !important;
    background: var(--color-white, #ffffff) !important;
    border: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.calc-list-item:hover {
    box-shadow: 0 8px 20px rgba(45, 90, 68, 0.06) !important;
    border-color: var(--color-primary, #2d5a44) !important;
}
.calc-list-icon {
    width: 42px !important;
    height: 42px !important;
    background: rgba(45, 90, 68, 0.05) !important;
    border: 1px solid rgba(45, 90, 68, 0.08) !important;
    border-radius: 6px !important;
    color: var(--color-primary, #2d5a44) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.calc-list-icon i::before,
.calc-list-icon .ah-ico::before {
    color: var(--color-primary, #2d5a44) !important;
}
.calc-list-text h4 {
    font-family: var(--font-body, system-ui, -apple-system, sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    color: var(--color-heading, #0f172a) !important;
    margin-bottom: 2px !important;
}
.calc-list-text p {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    color: var(--color-text, #475569) !important;
}
.calc-list-arrow { 
    color: #94a3b8 !important; 
    transition: color 0.2s ease !important;
}
.calc-list-item:hover .calc-list-arrow {
    color: var(--color-primary, #2d5a44) !important;
}


/* ─── 16e. Mobile & Responsive Overhaul (tools page) ─────────── */
.calc-tab {
    padding: 6px 14px !important;
    border: 1px solid var(--color-border, #e2e8f0) !important;
    background: var(--color-white, #ffffff) !important;
    color: var(--color-text, #475569) !important;
    border-radius: 99px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
.calc-tab:hover {
    border-color: var(--color-primary, #2d5a44) !important;
    color: var(--color-primary, #2d5a44) !important;
}
.calc-tab.active {
    background: rgba(45, 90, 68, 0.06) !important;
    border-color: var(--color-primary, #2d5a44) !important;
    color: var(--color-primary, #2d5a44) !important;
    font-weight: 600 !important;
}

/* Hide duplicate filter tabs on desktop since the sidebar handles it */
@media (min-width: 769px) {
    .tools-filter-tabs {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .topic-listing-layout { padding-top: 14px !important; padding-bottom: 24px !important; }

    /* Make popular cards scroll horizontally like a carousel on mobile */
    .popular-tools-grid,
    .calcs-popular-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 12px !important;
        padding-bottom: 8px !important;
    }
    .popular-tools-grid::-webkit-scrollbar,
    .calcs-popular-grid::-webkit-scrollbar {
        display: none !important;
    }
    .popular-tools-grid .popular-calc-card,
    .calcs-popular-grid .calc-card {
        flex-shrink: 0 !important;
        width: 250px !important;
    }

    /* Restrict description to exactly 2 lines on mobile */
    .popular-calc-card p,
    .calc-list-text p {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
        font-size: 0.76rem !important;
        line-height: 1.35 !important;
    }

    /* Prevent vertical wrapping, enable smooth horizontal swipe on mobile */
    .tools-filter-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 8px !important;
        padding-bottom: 6px !important;
        margin-bottom: 16px !important;
    }
    .tools-filter-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .calc-tab {
        flex-shrink: 0 !important;
        font-size: 0.78rem !important;
        padding: 5px 12px !important;
    }

    /* Force horizontal items - PREVENT layout wrapping icons below text */
    .calc-list-item-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .calc-list-text h4 {
        white-space: normal !important;
    }

    /* Tidy container paddings to eliminate bloated margins */
    .tools-main-layout,
    .calcs-main-layout {
        padding: 16px 12px 24px !important;
        gap: 16px !important;
    }
    .find-calc-cta {
        padding: 16px 20px !important;
        margin-top: 24px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   17. UNIFIED CARD BORDER SYSTEM — client-color dark teal edge
       Same border language on every card across the whole site.
   ══════════════════════════════════════════════════════════════ */

/* ─── Token ──────────────────────────────────────────────────
   All cards use this one border value.
   Hover → gold (--secondary-color) to signal interactivity.  */

/* ─── 17a. Guide cards (home, listing, category related) ──── */
.guide-card {
    border: 2px solid rgba(32,60,62,.40) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(32,60,62,.07) !important;
}
.guide-card:hover {
    border-color: var(--secondary-color, #B08D57) !important;
    box-shadow: 0 8px 28px rgba(32,60,62,.13) !important;
}

/* ─── 17b. Sidebar widgets (.sw-panel) ───────────────────── */
.sw-panel {
    border: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03) !important;
    background: var(--color-white, #ffffff) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 1px;
}
.sw-header {
    border-bottom: 1px solid var(--color-border, #f1f5f9) !important;
    background: transparent !important;
    padding: 12px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sw-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--color-heading, #0f172a) !important;
    font-family: var(--font-heading) !important;
    margin: 0 !important;
}
.sw-subtitle {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: var(--color-text, #475569) !important;
    padding: 12px 16px !important;
    margin: 0 !important;
}
.sw-footer {
    padding: 0 16px 16px !important;
    border-top: none !important;
    margin-top: 0 !important;
}
.sw-cta-btn {
    background: var(--color-primary, #2d5a44) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(45, 90, 68, 0.12) !important;
    transition: all 0.2s ease !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    border: none !important;
}
.sw-cta-btn:hover {
    background: var(--color-primary-dark, #1c3d2e) !important;
    box-shadow: 0 4px 12px rgba(45, 90, 68, 0.2) !important;
}
.sw-list {
    padding: 6px 12px 12px !important;
}
.sw-item {
    border-bottom: none !important;
}
.sw-item-link {
    padding: 8px 10px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    margin: 1px 0 !important;
}
.sw-item-link:hover {
    background: var(--color-surface, #f8fafc) !important;
    color: var(--color-primary, #2d5a44) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 1px 0 !important;
}
.sw-item-link--active,
.sw-item-link--active:hover {
    background: rgba(45, 90, 68, 0.06) !important;
    color: var(--color-primary, #2d5a44) !important;
    font-weight: 600 !important;
}
.sw-item-link--active .sw-item-arrow,
.sw-item-link--active .sw-item-label {
    color: var(--color-primary, #2d5a44) !important;
}

/* ─── 17c. News widget container ─────────────────────────── */
.news-widget {
    border: 1.5px solid rgba(32,60,62,.2) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: 0 2px 10px rgba(32,60,62,.05) !important;
}

/* ─── 17d. News three-col panels (.news-col) ─────────────── */
.news-col {
    border: 1.5px solid rgba(32,60,62,.18) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    background: var(--color-white) !important;
    box-shadow: 0 2px 10px rgba(32,60,62,.05) !important;
}
/* .news-widget nested inside .news-col — strip the inner border */
.news-col .news-widget {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ─── 17e. Share bar (post page) — darker, client-color ──── */
.share-bar {
    border-top: 1.5px solid rgba(32,60,62,.2) !important;
    border-bottom: 1.5px solid rgba(32,60,62,.2) !important;
}

/* ─── 17f. Post terms bar ────────────────────────────────── */
.post-terms-bar {
    border-bottom: 1.5px solid rgba(32,60,62,.12) !important;
}

/* ─── 17g. Highlight section panels ─────────────────────── */
.cat-hl-panel,
.cat-highlight-section .news-col {
    border-color: rgba(32,60,62,.2) !important;
}

/* ─── 17h. Tools/calc sidebar panels ────────────────────── */
.tools-sidebar-section {
    background: var(--color-white, #ffffff) !important;
    border: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    padding: 20px 20px !important; 
}
.tools-sidebar-section h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-heading, #0f172a) !important;
    font-family: var(--font-heading) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 0 16px 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 2px solid #f1f5f9 !important; 
    position: relative !important;
}
.tools-sidebar-section h3::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 40px !important;
    height: 2px !important;
    background: var(--color-accent, #d4af37) !important;
    border-radius: 2px !important;
}
.tools-cat-list {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.tools-cat-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    margin: 0 !important;
    transition: all 0.25s ease !important;
    background: transparent !important;
    font-weight: 500 !important;
    color: var(--color-text, #475569) !important;
    font-size: 0.9rem !important;
}
.tools-cat-item:hover {
    background: #f8fafc !important;
    color: var(--color-primary, #1e3a2f) !important;
    border-color: #e2e8f0 !important;
    transform: translateX(2px) !important;
}
.tools-cat-item.active {
    background: var(--color-primary, #1e3a2f) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-left: none !important;
    box-shadow: 0 4px 12px rgba(30, 58, 47, 0.15) !important;
}
.tools-cat-item.active::before {
    display: none !important;
}
.tools-cat-item .tools-cat-count {
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
}
.tools-cat-item:hover .tools-cat-count {
    background: #e2e8f0 !important;
    color: var(--color-primary, #1e3a2f) !important;
}
.tools-cat-item.active .tools-cat-count {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}
.tools-sidebar-help {
    background: var(--color-white, #ffffff) !important;
    border: 1px solid var(--color-border, #e2e8f0) !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03) !important;
    padding: 16px !important;
    margin-top: 20px !important;
}
.tools-sidebar-help h4 {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--color-heading, #0f172a) !important;
    margin-bottom: 8px !important;
}
.tools-sidebar-help p {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: var(--color-text, #475569) !important;
    margin-bottom: 12px !important;
}
.tools-help-btn {
    background: var(--color-primary, #2d5a44) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(45, 90, 68, 0.12) !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}
.tools-help-btn:hover {
    background: var(--color-primary-dark, #1c3d2e) !important;
    box-shadow: 0 4px 12px rgba(45, 90, 68, 0.2) !important;
}

/* ─── 17i. Find-calc CTA strip ───────────────────────────── */
.find-calc-cta {
    border: 1.5px solid rgba(32,60,62,.2) !important;
    background: rgba(32,60,62,.025) !important;
}

/* ─── 17j. Article sidebar widgets ──────────────────────── */
.article-toc,
.article-sidebar > * {
    border: 1.5px solid rgba(32,60,62,.18) !important;
    border-radius: 10px !important;
}

/* ─── 17k. Mini-card thumb — rounded dark border ─────────── */
.mini-card-thumb {
    border: 1px solid rgba(32,60,62,.14) !important;
}

/* ─── 17l. Mobile ────────────────────────────────────────── */
@media (max-width: 768px) {
    .news-three-inner > .news-col,
    .news-three-inner > .hot-topics-col { padding: 14px 16px !important; }
    .news-widget { padding: 0 !important; }
}


/* ══════════════════════════════════════════════════════════════
   18. HEADER SEARCH — bigger submit button, visible icon
   ══════════════════════════════════════════════════════════════ */
.header-search-form .btn-primary {
    min-width: 46px !important;
    height: 46px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    background: var(--client-color, #203c3e) !important;
    border-color: var(--client-color, #203c3e) !important;
}
.header-search-form .btn-primary .ah-ico {
    font-size: 1rem !important;
    color: #fff !important;
}
.header-search-form .btn-primary:hover {
    background: var(--secondary-color, #B08D57) !important;
    border-color: var(--secondary-color, #B08D57) !important;
}
/* Search input — match height with button */
.header-search-input {
    height: 46px !important;
    font-size: 0.95rem !important;
    border-color: rgba(32,60,62,.25) !important;
    border-radius: 10px !important;
}
.header-search-input:focus {
    border-color: var(--client-color, #203c3e) !important;
    box-shadow: 0 0 0 3px rgba(32,60,62,.1) !important;
}
/* Close button — larger, clearer */
.header-search-close {
    font-size: 1.2rem !important;
    color: rgba(32,60,62,.55) !important;
    padding: 10px 12px !important;
    transition: color 0.15s ease !important;
}
.header-search-close:hover {
    color: var(--client-color, #203c3e) !important;
    background: rgba(32,60,62,.06) !important;
}


/* ══════════════════════════════════════════════════════════════
   19. NEWS PAGE — color overrides + label pills + single article
   ══════════════════════════════════════════════════════════════ */

/* ─── 19a. Filter tabs — teal active, gold underline ─────── */
.news-cat-tab:hover {
    color: var(--client-color, #203c3e) !important;
    background: rgba(32,60,62,.05) !important;
}
.news-cat-tab.active {
    color: var(--client-color, #203c3e) !important;
    border-bottom-color: var(--secondary-color, #B08D57) !important;
    font-weight: 700 !important;
}
.news-cat-tab.active .news-cat-count {
    background: rgba(32,60,62,.1) !important;
    color: var(--client-color, #203c3e) !important;
}

/* ─── 19b. News card — consistent border + hover ─────────── */
.news-card {
    border: 2px solid rgba(32,60,62,.30) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(32,60,62,.07) !important;
}
.news-card:hover {
    border-color: var(--secondary-color, #B08D57) !important;
    box-shadow: 0 8px 28px rgba(32,60,62,.13) !important;
    transform: translateY(-3px) !important;
}
.news-card-title a:hover {
    color: var(--client-color, #203c3e) !important;
}

/* ─── 19c. Label pill — actual label, not hardcoded NEWS ─── */
.pill-news-label {
    background: #ffffff !important;
    color: var(--client-color, #203c3e) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    position: absolute !important;
    bottom: 12px !important;
    z-index: 10 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    text-align: center;
}
.news-card-img {
    position: relative !important;
    display: block;
}

/* ─── 19d. Featured article — teal body links ───────────── */
.fa-title a:hover { color: var(--client-color, #203c3e) !important; }
.fa-read-btn { gap: 8px !important; }

/* ─── 19e. Load more — teal border ──────────────────────── */
.load-more-btn {
    border-color: var(--client-color, #203c3e) !important;
    color: var(--client-color, #203c3e) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
.load-more-btn:hover {
    background: var(--client-color, #203c3e) !important;
    color: #fff !important;
}

/* ─── 19e2. News card image area — rotating jewel-tone palette ─
   Every card was the same dark teal; cycle 6 refined brand tones
   so the grid feels varied but still premium. Real thumbnails sit
   on top of these, so the gradient only shows on icon fallbacks.  */
.news-grid .news-card:nth-child(6n+1) .news-card-img {
    background: linear-gradient(150deg, #16362a 0%, #2a5d47 100%) !important;  /* deep green-teal */
}
.news-grid .news-card:nth-child(6n+2) .news-card-img {
    background: linear-gradient(150deg, #1a2e3a 0%, #2d5f6b 100%) !important;  /* slate blue */
}
.news-grid .news-card:nth-child(6n+3) .news-card-img {
    background: linear-gradient(150deg, #3a2c17 0%, #7d6038 100%) !important;  /* bronze / gold */
}
.news-grid .news-card:nth-child(6n+4) .news-card-img {
    background: linear-gradient(150deg, #2c1f2c 0%, #593a51 100%) !important;  /* plum */
}
.news-grid .news-card:nth-child(6n+5) .news-card-img {
    background: linear-gradient(150deg, #203320 0%, #4a6b3a 100%) !important;  /* olive */
}
.news-grid .news-card:nth-child(6n+6) .news-card-img {
    background: linear-gradient(150deg, #1a2e30 0%, #2d5550 100%) !important;  /* teal */
}
/* Fallback newspaper icon — warm brand gold on every tone */
.news-grid .news-card-icon {
    color: rgba(230,201,122,.9) !important;
    opacity: 1 !important;
    text-shadow: 0 1px 10px rgba(201,168,76,.25) !important;
}
/* Gold shimmer line under the image, like the calc cards */
.news-grid .news-card-img {
    position: relative !important;
}
.news-grid .news-card-img::after {
    content: '' !important;
    position: absolute !important;
    left: 0; right: 0; bottom: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.7) 50%, transparent) !important;
    pointer-events: none !important;
}

/* ─── 19f. Single news — meta bar + content colors ──────── */
.news-single-meta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}
.news-single-tag {
    background: var(--client-color, #203c3e) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
}
.news-single-date {
    color: var(--text-muted, #7a6f65) !important;
    font-size: 0.83rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
/* Content typography — article-style colors */
.news-single-content h2,
.news-single-content h3,
.news-single-content h4 {
    color: var(--client-color, #203c3e) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
}
.news-single-content a {
    color: var(--client-color, #203c3e) !important;
}
.news-single-content a:hover {
    color: var(--secondary-color, #B08D57) !important;
}
.news-single-content blockquote {
    border-left-color: var(--secondary-color, #B08D57) !important;
    background: rgba(176,141,87,.07) !important;
    color: var(--text-secondary, #4a4540) !important;
    font-style: normal !important;
}
.news-single-article {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ─── 19g. Related news section heading ──────────────────── */
.nsr-heading {
    color: var(--client-color, #203c3e) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 1.1rem !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid rgba(176,141,87,.45) !important;
    margin-bottom: 20px !important;
}
.nsr-heading i { color: var(--secondary-color, #B08D57) !important; }

/* ─── 19h. Sidebar in news listing — same border language ── */
.news-sidebar .sw-panel,
.news-sidebar .news-sb-box {
    border: 1.5px solid rgba(32,60,62,.20) !important;
    border-radius: 12px !important;
}

/* ─── 19i. Source link box ───────────────────────────────── */
.news-single-source {
    border-color: rgba(32,60,62,.18) !important;
    background: rgba(32,60,62,.03) !important;
    border-radius: 10px !important;
    margin-bottom: 2px;
}

/* ─── 19j. Single view — tighten padding everywhere ──────────
   Short news items were swimming in whitespace; pull it all in.  */
.news-layout--single {
    padding-top: 22px !important;
    padding-bottom: 24px !important;
    gap: var(--space-8) !important;
}
.news-layout--single .news-main {
    gap: 14px !important;
}
.news-single-article {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}
.news-single-meta { margin-bottom: 14px !important; }
.news-single-content { line-height: 1.7 !important; }
.news-single-content p:last-child { margin-bottom: 0 !important; }
/* Share bar — tighter, own tidy card */
.news-single-share-out .post-feedback-bar {
    padding: 12px 18px !important;
    box-shadow: 0 2px 10px rgba(32,60,62,.06) !important;
    border-color: rgba(32,60,62,.16) !important;
    border-radius: 12px !important;
}

/* ─── 19k. "More News" — reusable news_widget bar (one card) ──
   Scoped to .news-single-more so home-page news widgets are safe. */

.news-single-more .list-widget-header {
    margin-bottom: 8px !important;
    padding: 5px !important;
    border-bottom: 2px solid rgba(176,141,87,.4) !important;
}
.news-single-more .list-widget-header h2,
.news-single-more .list-widget-header h3 {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    color: var(--client-color, #203c3e) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}
.news-single-more .list-widget-view-all {
    color: var(--secondary-color, #B08D57) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
}
/* Compact list rows inside the bar */
.news-single-more .mini-card {
    /* padding: 14px 12px !important; */
    min-height: 0 !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-bottom: 1px solid rgba(32,60,62,.08) !important;
    border-radius: 0 !important;
    transition: all .2s ease !important;
    background: transparent !important;
}
.news-single-more .mini-card:last-child { border-bottom: none !important; }
/* Premium hover: simple left border accent */
.news-single-more .mini-card:hover {
    background: rgba(32,60,62,.02) !important;
    border-color: transparent !important;
    border-left-color: var(--secondary-color, #B08D57) !important;
    box-shadow: none !important;
}
/* Hide the bulky thumbnail entirely for a sleek look */
.news-single-more .mini-card-thumb {
    display: none !important;
}
.news-single-more .mini-card-title {
    font-weight: 700 !important;
    color: var(--text-primary, #111816) !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
}
.news-single-more .mini-card:hover .mini-card-title {
    color: var(--secondary-color, #B08D57) !important;
}
.news-single-more .mini-card-tag {
    background: transparent !important;
    color: var(--secondary-color, #B08D57) !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
}
.news-single-more .mini-card-date {
    font-size: 0.7rem !important;
    color: var(--text-muted, #7a6f65) !important;
}
.news-single-more .mini-card-arrow {
    color: var(--secondary-color, #B08D57) !important;
    font-size: 1.2rem !important;
    transition: transform .2s ease !important;
}
.news-single-more .mini-card:hover .mini-card-arrow {
    transform: translateX(3px) !important;
}

/* ─── 19l. Mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
    .news-cats-search-input { width: 140px !important; }
    .news-cats-search-input:focus { width: 180px !important; }
    .news-single-article { padding: 2px 2px !important; }
}


/* ══════════════════════════════════════════════════════════════
   20. PAGE HERO — keep title/description on the cream, off the photo
   ══════════════════════════════════════════════════════════════ */
.page-hero-content {
    max-width: 50% !important;
    padding-right: 26px !important;
}
.page-hero h1 {
    font-size: clamp(1.6rem, 2.9vw, 2.5rem) !important;
    line-height: 1.16 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}
/* Tablet: give the text a bit more room before the wave */
@media (max-width: 1024px) {
    .page-hero-content { max-width: 58% !important; }
    .page-hero p { max-width: 54% !important; }
}
/* Mobile: photo drops back, text spans full width */
@media (max-width: 860px) {
    .page-hero-content {
        max-width: 100% !important;
        padding-right: 0 !important;
        text-align: center !important;
    }
    .page-hero h1 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        text-align: center !important;
        color: #fff !important;
    }
    .page-hero p {
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 0.9rem !important;
        color: rgba(255,255,255,0.85) !important;
        text-align: center !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   21. CALCULATOR SINGLE PAGE — spacing + Browse-by-Category widget
   ══════════════════════════════════════════════════════════════ */

/* ─── 21a. Breathing room between stacked blocks in main ────── */
.tool-single-layout main > * {
    margin-bottom: 20px !important;
}
.tool-single-layout main > *:last-child {
    margin-bottom: 0 !important;
}
/* Share bar on the calc page — own tidy card, clear separation */
.tool-single-layout .post-feedback-bar {
    border-radius: 12px !important;
    border-color: rgba(32,60,62,.16) !important;
    box-shadow: 0 2px 10px rgba(32,60,62,.06) !important;
}

/* ─── 21b. "Browse by Category" sidebar widget ─────────────── */
.tools-sidebar-section {
    background: #fff !important;
    border: 2px solid rgba(32,60,62,.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(32,60,62,.06) !important;
    padding: 16px !important;
    margin-bottom: 18px !important;
}
.tools-sidebar-section h3,
.tools-sidebar h3 {
    color: var(--client-color, #203c3e) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid rgba(176,141,87,.4) !important;
}
.tools-cat-list { gap: 3px !important; }
.tools-cat-item {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border-left: 3px solid transparent !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary, #4a4540) !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}
.tools-cat-item:hover {
    background: rgba(32,60,62,.05) !important;
    color: var(--client-color, #203c3e) !important;
    border-left-color: rgba(176,141,87,.55) !important;
    transform: none !important;
}
.tools-cat-item.active {
    background: rgba(32,60,62,.06) !important;
    color: var(--client-color, #203c3e) !important;
    border-left: 3px solid var(--secondary-color, #B08D57) !important;
    font-weight: 700 !important;
}
.tools-cat-count {
    background: rgba(32,60,62,.1) !important;
    color: var(--client-color, #203c3e) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    min-width: 22px !important;
    text-align: center !important;
    border-radius: 20px !important;
    padding: 2px 8px !important;
}
.tools-cat-item.active .tools-cat-count {
    background: var(--client-color, #203c3e) !important;
    color: #fff !important;
}
/* Help CTA card — matching border language */
.tools-sidebar-help {
    border: 2px solid rgba(32,60,62,.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(32,60,62,.06) !important;
}
.tools-sidebar-help h4 {
    color: var(--client-color, #203c3e) !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
}


/* ══════════════════════════════════════════════════════════════
   22. AMBIENT ANIMATED BACKGROUND — site-wide, subtle, on-brand
       Two fixed layers behind ALL content:
         • soft drifting teal / gold / green glows (random-feel motion)
         • a faint slowly-drifting dot texture (refined nod to halftone)
       Sits at z-index:-1 so it never touches layout, sticky, or clicks.
   ══════════════════════════════════════════════════════════════ */
body::before,
body::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: -1;
}

/* Layer 1 — drifting brand-colour glows */
body::before {
    inset: -12%;
    background:
        radial-gradient(38% 40% at 16% 22%, rgba(32,60,62,.12),  transparent 70%),
        radial-gradient(32% 34% at 84% 26%, rgba(176,141,87,.13), transparent 70%),
        radial-gradient(44% 44% at 70% 82%, rgba(45,97,71,.10),   transparent 70%),
        radial-gradient(30% 30% at 40% 60%, rgba(176,141,87,.08), transparent 70%);
    animation: adn-amb-glow 40s ease-in-out infinite alternate;
    will-change: transform;
}

/* Layer 2 — faint drifting dot field */
body::after {
    inset: -25%;
    background-image: radial-gradient(rgba(32,60,62,.09) 1.5px, transparent 1.7px);
    background-size: 40px 40px;
    opacity: .7;
    animation: adn-amb-dots 55s linear infinite alternate;
    will-change: transform;
}

@keyframes adn-amb-glow {
    0%   { transform: translate3d(0, 0, 0)        scale(1);    }
    50%  { transform: translate3d(1.8%, -2.2%, 0) scale(1.07); }
    100% { transform: translate3d(-1.6%, 2%, 0)   scale(1.03); }
}
@keyframes adn-amb-dots {
    0%   { transform: translate3d(0, 0, 0)     rotate(0deg);   }
    100% { transform: translate3d(3.5%, 4%, 0) rotate(0.5deg); }
}

/* Accessibility — hold still for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after { animation: none !important; }
}

/* Dark footer already covers the ambient; keep it crisp there. */
.site-footer { position: relative; z-index: 0; }


/* ══════════════════════════════════════════════════════════════
   23. FLOATING CONTACT — WhatsApp + Call (bottom-left, site-wide)
   ══════════════════════════════════════════════════════════════ */
.adn-fab {
    position: fixed;
    left: 20px;
    bottom: 22px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; /* container ignores clicks; buttons re-enable */
}
.adn-fab-btn {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.adn-fab-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 9px 22px rgba(0,0,0,.26);
    color: #fff;
}
.adn-fab-btn svg { width: 21px; height: 21px; }
.adn-fab-btn i   { font-size: 1.05rem; }

.adn-fab-wa   { background: #25d366; }
.adn-fab-call { background: var(--client-color, #203c3e); }

/* Hover tooltip label (desktop) */
.adn-fab-label {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: var(--client-color, #203c3e);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transition: opacity .18s ease, transform .18s ease;
}
.adn-fab-label::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--client-color, #203c3e);
}
.adn-fab-btn:hover .adn-fab-label,
.adn-fab-btn:focus-visible .adn-fab-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Gentle attention pulse on the WhatsApp button */
.adn-fab-wa::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37,211,102,.5);
    animation: adn-fab-pulse 2.6s ease-out infinite;
}
@keyframes adn-fab-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
    70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
    .adn-fab-wa::after { animation: none; }
}

/* Mobile: icons only, slightly smaller, hugging the corner */
@media (max-width: 768px) {
    .adn-fab { left: 14px; bottom: 16px; gap: 10px; }
    .adn-fab-btn { width: 42px; height: 42px; }
    .adn-fab-btn svg { width: 20px; height: 20px; }
    .adn-fab-label { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   24. CONTACT "explore resources" cards — premium redesign
   ══════════════════════════════════════════════════════════════ */
.contact-section-heading {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    color: var(--client-color, #203c3e) !important;
    font-size: 1.6rem !important;
}
.contact-resources-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 16px !important;
}
.contact-resource-card {
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
    padding: 22px 20px !important;
    background: #fff !important;
    border: 2px solid rgba(32,60,62,.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(32,60,62,.06) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
/* Gold top-accent that sweeps in on hover */
.contact-resource-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--secondary-color, #B08D57), transparent) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform .3s ease !important;
}
.contact-resource-card:hover {
    border-color: var(--secondary-color, #B08D57) !important;
    box-shadow: 0 14px 34px rgba(32,60,62,.14) !important;
    transform: translateY(-4px) !important;
}
.contact-resource-card:hover::before { transform: scaleX(1) !important; }

/* Icon → rounded medallion, flips to teal on hover */
.cr-icon {
    width: 52px !important;
    height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: linear-gradient(150deg, rgba(32,60,62,.08), rgba(176,141,87,.14)) !important;
    border: 1px solid rgba(176,141,87,.3) !important;
    color: var(--client-color, #203c3e) !important;
    font-size: 1.45rem !important;
    margin-bottom: 4px !important;
    transition: background .25s ease, color .25s ease, transform .25s ease !important;
}
.cr-icon i { color: inherit !important; }
.contact-resource-card:hover .cr-icon {
    background: var(--client-color, #203c3e) !important;
    color: var(--secondary-color, #B08D57) !important;
    transform: scale(1.06) rotate(-3deg) !important;
}

.contact-resource-card h3 {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--client-color, #203c3e) !important;
    line-height: 1.3 !important;
}
.contact-resource-card p {
    font-size: 0.82rem !important;
    color: var(--text-secondary, #4a4540) !important;
    line-height: 1.5 !important;
}
.cr-arrow {
    margin-top: auto !important;
    color: var(--secondary-color, #B08D57) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    transition: transform .2s ease !important;
}
.contact-resource-card:hover .cr-arrow { transform: translateX(5px) !important; }

/* Mobile */
@media (max-width: 560px) {
    .contact-resources-grid { grid-template-columns: 1fr 1fr !important; }
}


/* ══════════════════════════════════════════════════════════════
   25. FEATURED-IN LOGO MARQUEE — soft edges + uniform sizing
   ══════════════════════════════════════════════════════════════ */
/* Fade the marquee edges so logos ease in/out instead of hard-clipping */
.fi-track-wrap {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* Uniform logo height so mixed logos line up cleanly */
.fi-logo img {
    height: 120px !important;
    width: auto !important;
    max-width: 150px !important;
    object-fit: contain !important;
}
.fi-label {
    text-align: center !important;
    line-height: 1.25 !important;
}

@media (max-width: 600px) {
    .fi-section { padding: 20px 0 18px !important; }
    .fi-inner   { gap: 14px !important; }
    .fi-label {
        font-size: 0.98rem !important;
        letter-spacing: 0.10em !important;
    }
    .fi-label::before,
    .fi-label::after { width: 18px !important; }
    .fi-logo img { height: 70px !important; max-width: 118px !important; }
    .fi-track    { gap: 0 !important; }
    .fi-logo     { margin-right: 34px !important; }
}


/* ══════════════════════════════════════════════════════════════
   26. SCROLL-REVEAL — cards & section headings fade/rise into view
       Gated on html.adn-reveal (set in <head> only when JS is on and
       reduced-motion is off). Targets are server-rendered, so AJAX
       content is never hidden. .adn-in is added by the observer.
   ══════════════════════════════════════════════════════════════ */
html.adn-reveal .jny-card,
html.adn-reveal .contact-resource-card,
html.adn-reveal .glc,
html.adn-reveal .spotlight-card,
html.adn-reveal .expert-card,
html.adn-reveal .featured-article,
html.adn-reveal .section-header-wrap {
    transition: opacity .6s cubic-bezier(.22,.68,0,1),
                transform .6s cubic-bezier(.22,.68,0,1);
    will-change: opacity, transform;
}
html.adn-reveal .jny-card:not(.adn-in),
html.adn-reveal .contact-resource-card:not(.adn-in),
html.adn-reveal .glc:not(.adn-in),
html.adn-reveal .spotlight-card:not(.adn-in),
html.adn-reveal .expert-card:not(.adn-in),
html.adn-reveal .featured-article:not(.adn-in),
html.adn-reveal .section-header-wrap:not(.adn-in) {
    opacity: 0;
    transform: translateY(20px);
}
.adn-in {
    opacity: 1 !important;
    transform: none !important;
}


/* ══════════════════════════════════════════════════════════════
   27. PREMIUM MICRO-POLISH — overlays & text effects only.
       No padding / margin / layout values are touched here.
   ══════════════════════════════════════════════════════════════ */

/* ─── 27a. Reading progress bar (injected by premium.js) ────── */
.adn-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    z-index: 1200;
    pointer-events: none;
    background: transparent;
}
.adn-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--client-color, #203c3e), var(--secondary-color, #B08D57));
    border-radius: 0 2px 2px 0;
}

/* ─── 27b. News grid skeleton shimmer (AJAX loading) ────────── */
.news-skel {
    background: #fff;
    border: 2px solid rgba(32,60,62,.12);
    border-radius: 12px;
    overflow: hidden;
}
.news-skel-img {
    aspect-ratio: 16 / 9;
    background: linear-gradient(90deg, #ece7df 25%, #f7f4ee 40%, #ece7df 60%);
    background-size: 300% 100%;
    animation: adn-skel 1.15s ease-in-out infinite;
}
.news-skel-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.news-skel-line {
    display: block;
    height: 11px;
    border-radius: 6px;
    background: linear-gradient(90deg, #ece7df 25%, #f7f4ee 40%, #ece7df 60%);
    background-size: 300% 100%;
    animation: adn-skel 1.15s ease-in-out infinite;
}
.news-skel-line--pill  { width: 34%; height: 14px; }
.news-skel-line--short { width: 62%; }
@keyframes adn-skel {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .news-skel-img, .news-skel-line { animation: none; }
}

/* ─── 27c. Branded text selection ───────────────────────────── */
::selection {
    background: var(--client-color, #203c3e);
    color: #fff;
}

/* ─── 27d. Branded scrollbar ────────────────────────────────── */
html {
    scrollbar-color: rgba(32,60,62,.45) rgba(32,60,62,.06);
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(32,60,62,.05); }
::-webkit-scrollbar-thumb {
    background: rgba(32,60,62,.4);
    border-radius: 8px;
    border: 2.5px solid #f8f5f0;
}
::-webkit-scrollbar-thumb:hover { background: var(--client-color, #203c3e); }

/* ─── 27e. Gold sheen sweep on primary buttons ──────────────── */
.btn-primary {
    position: relative !important;
    overflow: hidden !important;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-20deg);
    transition: left .55s ease;
    pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
    .btn-primary::after { display: none; }
}

/* ─── 27f. Subtle image zoom on card thumbnails ─────────────── */
.glc-img img,
.news-card-img img,
.calc-card-thumb {
    transition: transform .45s cubic-bezier(.22,.68,0,1) !important;
}
.glc:hover .glc-img img,
.news-card:hover .news-card-img img,
.calc-card:hover .calc-card-thumb {
    transform: scale(1.05) !important;
}

/* ─── 27g. Gold focus ring (keyboard a11y, on-brand) ────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--secondary-color, #B08D57);
    outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════
   28. PREMIUM MOTION PACK 2 — smooth anchors + micro-animations.
       scroll-margin does NOT change layout; all else is
       transform/opacity only. Reduced-motion users are exempt.
   ══════════════════════════════════════════════════════════════ */

/* ─── 28a. Smooth in-page scrolling + anchors clear the header ─ */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
[id] { scroll-margin-top: 96px; }

/* ─── 28b. Section heading gold underline draws in on reveal ── */
html.adn-reveal .section-header-wrap h2::after {
    width: 0;
    transition: width .7s cubic-bezier(.22,.68,0,1) .15s;
}
html.adn-reveal .section-header-wrap.adn-in h2::after {
    width: 32px;
}

/* ─── 28c. Stat card accent bar grows with the count-up ─────── */
html.adn-reveal .acard-stat::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .8s cubic-bezier(.22,.68,0,1);
}
.acard-stat.adn-stat-live::before {
    transform: scaleY(1) !important;
}

/* ─── 28d. TOC links glide as the scroll-spy moves ──────────── */
.toc-link {
    transition: background .18s ease, color .18s ease, transform .18s ease !important;
}
.toc-link.toc-active {
    transform: translateX(3px);
    /* box-shadow: inset 2.5px 0 0 0 var(--secondary-color, #B08D57); */
}

/* ─── 28e. Button icons nudge on hover ──────────────────────── */
.btn i {
    transition: transform .2s ease;
}
.btn:hover i {
    transform: translateX(3px);
}
/* Search / non-directional icons shouldn't slide */
.btn:hover .fa-magnifying-glass { transform: none; }

/* ─── 28f. Lazy images fade in as they load (premium.js) ────── */
.adn-imgfade { opacity: 0; transition: opacity .5s ease; }
.adn-imgfade.adn-imgloaded { opacity: 1; }

/* ─── 28g. Journey card icon lifts on hover ─────────────────── */
.jny-card-icon {
    transition: transform .25s cubic-bezier(.22,.68,0,1) !important;
    display: inline-block;
}
.jny-card:hover .jny-card-icon {
    transform: translateY(-4px) rotate(-4deg);
}


/* ══════════════════════════════════════════════════════════════
   29. DEFERRED HOME SECTIONS — skeleton placeholders + entrance
   ══════════════════════════════════════════════════════════════ */
.adn-defer-skel {
    background: #fff;
    border: 2px solid rgba(32,60,62,.10);
    border-radius: 14px;
    padding: 24px;
    margin: 26px 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-height: 150px;
}
.adn-defer-line {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #ece7df 25%, #f7f4ee 40%, #ece7df 60%);
    background-size: 300% 100%;
    animation: adn-skel 1.15s ease-in-out infinite;
}
.adn-defer-line--head  { width: 28%; height: 17px; }
.adn-defer-line--short { width: 58%; }
@media (prefers-reduced-motion: reduce) {
    .adn-defer-line { animation: none; }
}

/* Injected section slides in softly */
@media (prefers-reduced-motion: no-preference) {
    .adn-frag-in {
        animation: adn-frag-in .55s cubic-bezier(.22,.68,0,1) both;
    }
    @keyframes adn-frag-in {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
}

/* ─── 19. FEATURED & SIDEBAR SECTION (tools page) ─────────────── */
.tools-featured-section {
    padding: 24px 0 40px !important;
}

.tools-featured-inner {
    display: flex !important;
    gap: 32px !important;
    align-items: stretch !important;
}

.tools-featured-left {
    width: 320px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.tools-featured-right {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Suggested Calculators Widget */
.tools-suggestions-widget .tools-suggested-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-decoration: none !important;
}
.tools-suggestions-widget .tools-suggested-title {
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: var(--color-text, #374151) !important;
    display: inline-flex !important;
    align-items: center !important;
}
.tools-suggestions-widget .tools-cat-arrow {
    color: var(--color-text-muted, #94a3b8) !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}
.tools-suggestions-widget .tools-suggested-item:hover .tools-cat-arrow {
    color: var(--color-primary, #2d5a44) !important;
    transform: translateX(3px) !important;
}

/* Featured Calculator Container (Dark Green Block) */
.featured-calc-card {
    background: linear-gradient(135deg, #122920 0%, #1e3a2f 100%) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    height: 100% !important;
    box-shadow: 0 10px 30px rgba(30, 58, 47, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-sizing: border-box !important;
}

.featured-calc-content {
    padding: 36px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.featured-calc-badge {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #e6c86a !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.featured-calc-content h3 {
    font-family: var(--font-body, system-ui, -apple-system, sans-serif) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.25 !important;
}

.featured-calc-content p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    margin: 0 0 20px 0 !important;
}

.featured-calc-benefits {
    list-style: none !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.featured-calc-benefits li {
    display: flex !important;
    align-items: center !important;
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.benefit-check {
    width: 14px !important;
    height: 14px !important;
    color: #e6c86a !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.btn-featured-calc {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--secondary-color, #B08D57) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 12px 24px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(176, 141, 87, 0.2) !important;
}

.btn-featured-calc:hover {
    background: #9d7d4c !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(176, 141, 87, 0.3) !important;
}

.featured-calc-illustration {
    width: 260px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%) !important;
    padding-right: 36px !important;
    box-sizing: border-box !important;
}

/* Mock Calculator Illustration */
.mock-calculator {
    width: 150px !important;
    height: 210px !important;
    background: var(--client-color, #1e1e1e) !important;
    border: 3px solid #2d2d2d !important;
    border-radius: 12px !important;
    padding: 10px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    transform: rotate(4deg) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.mock-calculator:hover {
    transform: rotate(-1deg) scale(1.03) !important;
}

.mock-calc-screen {
    background: #9cad8f !important;
    border: 2px solid #7c8b74 !important;
    border-radius: 4px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 8px !important;
    font-family: monospace !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #162416 !important;
    letter-spacing: 0.05em !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
}

.mock-calc-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
    flex: 1 !important;
}

.mock-btn {
    background: #444444 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.3) !important;
    user-select: none !important;
}

.mock-btn-fn {
    background: #5a5a5a !important;
}

.mock-btn-op {
    background: #e6c86a !important;
    color: #122920 !important;
    font-weight: 700 !important;
}

.mock-btn-eq {
    background: var(--secondary-color, #B08D57) !important;
    color: #ffffff !important;
}

.mock-btn-double {
    grid-column: span 2 !important;
    justify-content: flex-start !important;
    padding-left: 10px !important;
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .tools-featured-inner {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .tools-featured-left {
        width: 100% !important;
    }
    .featured-calc-card {
        height: auto !important;
    }
}

@media (max-width: 600px) {
    .tools-featured-section {
        padding: 16px 0 24px !important;
    }
    .featured-calc-card {
        flex-direction: column !important;
    }
    .featured-calc-illustration {
        width: 100% !important;
        padding: 0 24px 32px !important;
    }
    .mock-calculator {
        transform: none !important;
        margin: 0 auto !important;
    }
    .featured-calc-content {
        padding: 24px !important;
    }
    .featured-calc-content h3 {
        font-size: 1.4rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TC DESIGN SYSTEM — Tools Calculator Page Widget Components
   Matches site's existing "Latest News" widget design language.
   Prefix: tc-* to avoid collision with global styles.
   ═══════════════════════════════════════════════════════════════ */

/* ── Section wrapper ────────────────────────────────────────── */
.tc-section {
    padding: 24px 0 20px !important;
}

/* ── Widget card — white rounded container with border ──────── */

.tc-widget-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
}

.tc-widget-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tc-widget-icon {
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

.tc-widget-title h2 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--color-dark, #111827) !important;
    margin: 0 !important;
}

/* ── Popular calculators ────────────────────────────────────── */
.tc-popular-section .tc-widget-header {
    border-bottom: 1px solid var(--color-border, #e8eaed) !important;
}

.tc-popular-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 10px !important;
    padding: 14px 16px !important;
}

.tc-pop-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(30, 58, 47, 0.06) !important; /* Soft adaptive border overlay */
    border-radius: 8px !important; /* Consistently rounded */
    text-decoration: none !important;
    background: #ffffff !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.015) !important;
}

.tc-pop-card:hover {
    border-color: var(--color-accent, #d4af37) !important;
    box-shadow: 0 3px 10px rgba(30, 58, 47, 0.02) !important; /* Flattened shadow to prevent optical lift */
}

.tc-pop-card-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
    background: #f8faf9 !important;
    border: 1px solid #eef2f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
    overflow: hidden !important;
}

.tc-pop-card-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

.tc-pop-card:hover .tc-pop-card-icon {
    background: #eef2f0 !important;
}

.tc-pop-card-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.tc-pop-badge {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--color-primary, #1e3a2f) !important;
    background: #eef8f3 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

.tc-pop-card-body h3 {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--color-dark, #111827) !important;
    margin: 0 0 4px 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.tc-pop-card-body p {
    font-size: 0.8rem !important;
    color: var(--color-text-muted, #6b7280) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.tc-pop-arrow {
    font-size: 1.1rem !important;
    color: var(--color-text-muted, #9ca3af) !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.tc-pop-card:hover .tc-pop-arrow {
    color: var(--color-primary, #1e3a2f) !important;
    transform: translateX(4px) !important;
}



/* ── Suggested calculators widget ───────────────────────────── */
.tc-suggested-widget {
    grid-column: span 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    height: auto !important;
    /* Gap before the Featured card below - their shared parent is a plain block
       wrapper with no grid gap, so the two dark cards otherwise sit flush. */
    margin-bottom: 16px !important;
}

.tc-suggested-widget .tc-widget-header {
    background: transparent !important;
    border-bottom: 2px solid #eef2f0 !important; /* Added a sleek bottom anchor line */
    padding: 0 0 10px 0 !important;
    margin-bottom: 14px !important;
}

.tc-suggested-widget .tc-widget-title h2 {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--color-dark, #111827) !important;
    text-transform: none !important;
    margin: 0 !important;
}

.tc-suggested-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
}

.tc-suggested-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(30, 58, 47, 0.08) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.75) !important; /* Glassmorphism background */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.015) !important;
}

.tc-suggested-item:hover {
    border-color: var(--color-accent, #d4af37) !important;
    background: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 10px rgba(30, 58, 47, 0.02) !important; /* Flattened shadow to prevent optical lift */
}

.tc-suggested-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #ffffff !important; /* White icon box to contrast base grey-green card */
    border: 1px solid #eef2f0 !important;
    color: var(--color-primary, #1e3a2f) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.tc-suggested-item:hover .tc-suggested-icon {
    background: #f1f7f4 !important; /* Green branded icon box on hover */
    border-color: #e2ece7 !important;
}

.tc-suggested-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

.tc-suggested-label {
    flex: 1 !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--color-dark, #111827) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.tc-suggested-arrow {
    font-size: 1.1rem !important;
    color: var(--color-text-muted, #9ca3af) !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.tc-suggested-item:hover .tc-suggested-arrow {
    color: var(--color-primary, #1e3a2f) !important;
    transform: translateX(3px) !important;
}

/* ── Suggested Calculator card (content + side illustration, like Featured) ── */
.tc-suggested-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 20px 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(245, 200, 66, 0.08) 0%, transparent 60%),
        linear-gradient(135deg, #102d23 0%, #17362a 50%, #0c2018 100%) !important;
    box-shadow:
        0 10px 32px rgba(30, 58, 47, 0.22),
        0 0 0 1px rgba(201, 168, 76, 0.14),
        0 0 26px rgba(201, 168, 76, 0.14) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
    box-sizing: border-box !important;
}

.tc-suggested-card:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 16px 40px rgba(30, 58, 47, 0.28),
        0 0 0 1px rgba(201, 168, 76, 0.22),
        0 0 34px rgba(201, 168, 76, 0.20) !important;
}

.tc-suggested-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.tc-suggested-illustration {
    flex-shrink: 0 !important;
}

.mock-calculator--sm {
    width: 108px !important;
    height: 150px !important;
    padding: 7px !important;
    gap: 4px !important;
    transform: rotate(4deg) !important;
}

.mock-calculator--sm .mock-calc-screen {
    height: 22px !important;
    font-size: 0.72rem !important;
}

.mock-calculator--sm .mock-calc-grid {
    gap: 3px !important;
}

.mock-calculator--sm .mock-btn {
    font-size: 0.62rem !important;
}

@media (max-width: 480px) {
    .tc-suggested-card {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .tc-suggested-illustration {
        align-self: center !important;
    }
}

.tc-suggested-title {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.tc-suggested-desc {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.tc-suggested-points {
    list-style: none !important;
    padding: 0 !important;
    margin: 4px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}

.tc-suggested-points li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500 !important;
}

.tc-suggested-points svg {
    width: 18px !important;
    height: 18px !important;
    padding: 3px !important;
    background: rgba(111, 207, 138, 0.15) !important;
    border-radius: 50% !important;
    color: #6fcf8a !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.tc-suggested-btn {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    gap: 8px !important;
    background: #f5c842 !important;
    color: #1e3a2f !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    margin-top: auto !important;
    transition: background 0.2s ease !important;
}

.tc-suggested-btn:hover {
    background: #ffffff !important;
    color: #1e3a2f !important;
}

.tc-suggested-btn svg {
    width: 12px !important;
    height: 12px !important;
}

/* ── Featured Calculator card (dark green) ──────────────────── */
.tc-featured-card {
    grid-column: span 2 !important;
    background: 
        radial-gradient(circle at 100% 0%, rgba(245, 200, 66, 0.08) 0%, transparent 60%), /* Golden corner light leak */
        linear-gradient(135deg, #102d23 0%, #17362a 50%, #0c2018 100%) !important; /* Triple stop rich green gradient */
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    overflow: hidden !important;
    position: relative !important;
    /* height: 100% !important; */
    box-shadow: 0 8px 32px rgba(12, 32, 24, 0.2) !important;
}

.tc-featured-content {
    flex: 1 !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.tc-featured-badge {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #f5c842 !important;
    background: rgba(245, 200, 66, 0.15) !important;
    border: 1px solid rgba(245, 200, 66, 0.3) !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    margin-bottom: 16px !important;
}

.tc-featured-card h2 {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.5rem !important; /* Reduced title size from 1.75rem */
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.tc-featured-desc {
    font-size: 1rem !important;
    color: rgba(255,255,255,0.85) !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.5 !important;
}

.tc-featured-benefits {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    display: grid !important;
    gap: 6px 20px !important;
}

.tc-featured-benefits li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 0.92rem !important;
    color: rgba(255,255,255,0.95) !important;
    font-weight: 500 !important;
}

.tc-featured-benefits svg {
    width: 22px !important;
    height: 22px !important;
    padding: 4px !important;
    background: rgba(111, 207, 138, 0.15) !important; /* Soft green background badge */
    border-radius: 50% !important;
    color: #6fcf8a !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.tc-featured-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f5c842 !important;
    color: #1e3a2f !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important; /* Pill style button */
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(245, 200, 66, 0.25) !important;
}

.tc-featured-btn:hover {
    background: #ffffff !important; /* Elegant white background on hover */
    color: #1e3a2f !important;
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.15) !important;
}

.tc-featured-btn svg {
    width: 14px !important;
    height: 14px !important;
}

.tc-featured-illustration {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Responsive */
@media (max-width: 900px) {
    .tc-featured-illustration {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .tc-featured-card {
        padding: 20px !important;
        min-height: auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }
    .tc-featured-illustration {
        align-self: center !important;
    }
    .tc-suggested-card {
        padding: 16px !important;
    }
}



.tc-all-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Header row: title + count badge on left, pills on right */
.calc-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.calc-section-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.calc-section-title-wrap h2 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--color-dark, #0f172a) !important;
    margin: 0 !important;
}

.calc-total-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    background: var(--color-primary, #1e3a2f) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 2px 8px !important;
    line-height: 1.6 !important;
}

/* Filter pills strip */
.calc-filter-pills {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.calc-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--color-text-muted, #4b5563) !important;
    background: #ffffff !important;
    border: 1px solid rgba(30, 58, 47, 0.12) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.015) !important;
}

.calc-pill:hover {
    background: #fdfdfd !important;
    color: var(--color-primary, #1e3a2f) !important;
    border-color: var(--color-primary, #1e3a2f) !important;
    box-shadow: 0 4px 8px rgba(30, 58, 47, 0.04) !important;
}

.calc-pill.active {
    background: var(--color-primary, #1e3a2f) !important;
    color: #ffffff !important;
    border-color: var(--color-primary, #1e3a2f) !important;
    box-shadow: 0 4px 14px rgba(30, 58, 47, 0.18) !important;
}

.calc-pill-count {
    font-size: 0.68rem !important;
    opacity: 0.8 !important;
    background: rgba(30, 58, 47, 0.08) !important;
    color: var(--color-primary, #1e3a2f) !important;
    padding: 1px 5px !important;
    border-radius: 50px !important;
    line-height: 1.6 !important;
}

.calc-pill.active .calc-pill-count {
    background: #f5c842 !important; /* Gold badge accent when filter tab is active */
    color: #1e3a2f !important;
    opacity: 1 !important;
}
/* ── Hero Row (1st calc + next 3) ───────────────────────────── */
.tc-all-hero-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
    border-bottom: none !important; /* Removed border since they are separated into different widgets */
}

@media (max-width: 900px) {
    .tc-all-hero-row {
        grid-template-columns: 1fr !important;
    }
}

/* Big Hero Calculator Card (Left) */
.tc-hero-calc-card {
    grid-column: span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-decoration: none !important;
    border: 1px solid var(--color-accent, #d4af37) !important;
    border-radius: 12px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: linear-gradient(135deg, #ffffff 0%, #f9fbfb 100%) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

@media (max-width: 900px) {
    .tc-hero-calc-card {
        grid-column: span 1 !important;
    }
}

.tc-hero-calc-card:hover {
    background: #fdfcf9 !important;
    border-color: var(--color-accent-dark, #b8962e) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.06) !important;
}

.tc-hero-calc-icon {
    width: 100% !important;
    height: 180px !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: block !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
}

.tc-hero-calc-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

.tc-hero-calc-card:hover .tc-hero-calc-icon {
    /* No bg change needed for large image */
}

.tc-hero-calc-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.tc-hero-calc-body h3 {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.25rem !important; /* Reduced font size from 1.4rem */
    font-weight: 700 !important;
    color: var(--color-dark, #111827) !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
}

.tc-hero-calc-body p {
    font-size: 0.95rem !important;
    color: var(--color-text-muted, #4b5563) !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.5 !important;
}

.tc-hero-calc-cta {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--color-primary, #1e3a2f) !important;
    margin-top: auto !important;
}

/* Side List (Right) */
.tc-all-side-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.tc-all-side-list .mini-card {
    border: 1px solid var(--color-border, #e8eaed) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
}

.tc-all-side-list .mini-card:hover {
    border-color: var(--color-accent, #d4af37) !important;
    background: #fdfcf9 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important; /* Flattened shadow to prevent optical lift */
}

.tc-all-side-list .mini-card-title {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--color-dark, #111827) !important;
    text-transform: none !important;
    margin: 0 !important;
}

/* ── Filter Pills Bar ───────────────────────────────────────── */
.tc-all-pills-bar {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--color-border, #e8eaed) !important;
    background: #fdfdfd !important;
}

/* Calculator grid */
.calc-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.calc-grid .calc-card {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease !important;
}

.calc-grid .calc-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 36px rgba(45, 90, 68, 0.12) !important;
    border-color: var(--color-primary, #1d4ed8) !important;
}

.calc-grid .calc-card-body {
    padding: 18px 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
}

.calc-grid .calc-card-media {
    min-height: 180px !important;
    background: radial-gradient(circle, rgba(45, 90, 68, 0.06) 0%, rgba(45, 90, 68, 0) 100%) !important;
}

/* Grid body area with padding inside widget */
.tc-all-body {
    padding: 16px !important;
}

/* Empty state */
.calc-empty-state {
    align-items: center !important;
    justify-content: center !important;
    padding: 32px !important;
    color: var(--color-text-muted, #6b7280) !important;
    font-size: 0.95rem !important;
    font-style: italic !important;
}

/* Find My Calculator CTA bar at bottom of widget */
.tc-all-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--color-border, #e8eaed) !important;
    background: #f8faf9 !important;
}

.tc-all-cta-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.tc-all-cta-text strong {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--color-dark, #111827) !important;
}

.tc-all-cta-text span {
    font-size: 0.78rem !important;
    color: var(--color-text-muted, #6b7280) !important;
}

.tc-all-cta-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--color-primary, #1e3a2f) !important;
    background: #eaf6ef !important;
    border: 1px solid #c6e8d4 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
}

.tc-all-cta-btn:hover {
    background: #d4eedd !important;
}

.tools-cat-filter-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}

.tools-cat-filter-row .section-title {
    margin: 0 !important;
}

.tools-cat-reset {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--color-primary, #1e3a2f) !important;
    background: #eaf6ef !important;
    border: 1px solid #c6e8d4 !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: background 0.15s ease !important;
}

.tools-cat-reset:hover {
    background: #d4eedd !important;
}

.tools-cat-cards-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

.tools-cat-card {
    background: #ffffff !important;
    border: 1.5px solid var(--color-border, #e2e8f0) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 220px !important; /* Fixed width — won't stretch when few cats */
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.tools-cat-card:hover,
.tools-cat-card.active {
    border-color: var(--color-primary, #1e3a2f) !important;
    background: #f5faf7 !important;
    box-shadow: 0 6px 18px rgba(30, 58, 47, 0.07) !important;
}

.tools-cat-card.active .tools-cat-card-link {
    color: var(--color-primary, #1e3a2f) !important;
    font-weight: 700 !important;
}

.tools-cat-card-header {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.tools-cat-card-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #eaf6ef !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
}

.tools-cat-card-text h3 {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--color-dark, #0f172a) !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.2 !important;
}

.tools-cat-card-text p {
    font-size: 0.72rem !important;
    color: var(--color-text-muted, #64748b) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

.tools-cat-card-footer {
    margin-top: 8px !important;
}

.tools-cat-card-link {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: var(--color-primary, #1e3a2f) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* ─── 21. ALL CALCULATORS GRID ────────────────────────────────── */
.all-tools-section h2 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}

.tools-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
    align-items: stretch !important; /* Equal height cards per row */
}

/* Calculator card styles (Grid items) */
.calc-grid .calc-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: #ffffff !important; /* Reverted back to white but utilizing soft borders */
    border: 1px solid var(--client-color-400) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.015) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.calc-grid .calc-list-item:hover {
    border-color: var(--color-accent, #d4af37) !important;
    box-shadow: 0 3px 10px rgba(30, 58, 47, 0.02) !important; /* Flattened shadow to prevent optical lift */
}

/* Category filter — CSS class, not hidden attr */
.calc-grid .calc-list-item.calc-filtered-out {
    display: none !important;
}

.calc-grid .calc-list-item-left {
    display: flex !important;
    flex: 1 !important;
    gap: 16px !important;
    align-items: center !important;
    min-width: 0 !important;
}

.calc-grid .calc-list-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    background: #f8faf9 !important;
    border: 1px solid #eef2f0 !important;
    color: var(--color-primary, #1e3a2f) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
    overflow: hidden !important;
}

.calc-grid .calc-list-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

.calc-grid .calc-list-item:hover .calc-list-icon {
    background: #eef2f0 !important;
}

.calc-grid .calc-list-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.calc-grid .calc-list-text h4 {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--color-dark, #111827) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.calc-grid .calc-list-desc {
    display: none !important; /* Hide description for horizontal cards to keep them clean */
}

.calc-grid .calc-list-item-bottom {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.calc-grid .calc-list-arrow {
    color: var(--color-text-muted, #9ca3af) !important;
    font-size: 1.1rem !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.calc-grid .calc-list-item:hover .calc-list-arrow {
    color: var(--color-primary, #1e3a2f) !important;
    transform: translateX(4px) !important;
}

/* Responsive: pill filter and grid */
@media (max-width: 991px) {
    .calc-filter-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }
    .calc-filter-pills::-webkit-scrollbar { display: none !important; }
    .calc-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
}

@media (max-width: 768px) {
    .tc-suggested-widget,
    .tc-featured-card {
        grid-column: span 1 !important;
    }
}

/* ─── 22. TOP SECTION SPACING & HERO COMPRESSION ──────────────── */
.tools-hero-section,
.page-hero {
    padding: 24px 0 12px !important;
}

.tools-featured-section {
    padding: 8px 0 16px !important;
}

.tools-categories-section {
    padding: 0 !important;
    display: none !important; /* No-op section hidden */
}

.all-tools-section {
    padding: 16px 0 32px !important;
}

/* ─── 23. MINI CARD FADED BANNER EFFECT ──────────────── */
.mini-card {
    position: relative !important;
    overflow: hidden !important;
}

.mini-card-body,
.mini-card-thumb,
.mini-card-arrow,
.mini-card-info-dot {
    position: relative !important;
    z-index: 1 !important;
}

.mini-card-bg-fade {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 65% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 25%, black 75%) !important;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.1) 25%, black 75%) !important;
    z-index: 0 !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0 !important;
    transition: transform 0.4s ease, opacity 0.4s ease !important;
}

.mini-card:hover .mini-card-bg-fade {
    opacity: 1 !important;
    transform: scale(1.03) !important;
}



/* -- Coming Soon Journey Card -------------------------------------- */
.jny-card--coming-soon {
    cursor: not-allowed !important;
}

.jny-card--coming-soon::after {
    display: none !important;
}

.jny-card--coming-soon:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

.jny-card--coming-soon .jny-card__cta {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}



/* -- Premium Guide Card Redesign -------------------------------------- */
.guide-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    height: 100% !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
    padding: 0 !important;
}

.guide-card:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.01) !important;
}

.guide-card-img {
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    position: relative !important;
}

.guide-card-img img,
.guide-card-img video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
    border-radius: 0 !important;
}

.guide-card:hover .guide-card-img img,
.guide-card:hover .guide-card-img video {
    transform: scale(1.05) !important;
}

.guide-card-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 14px !important;
}

.guide-card-kicker-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.guide-card-category {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-accent, #c89d53) !important;
    margin: 0 !important;
}

.guide-card-icon-sm {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fdfbf7 !important;
    border: 1px solid #f0e6d2 !important;
    font-size: 0.9rem !important;
    color: var(--color-accent, #c89d53) !important;
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
}

.guide-card .card-title-highlight {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--color-dark, #111827) !important;
    font-family: var(--font-heading), sans-serif !important;
}

.guide-card .card-desc-text {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    min-height: 1.4em !important;
    color: #4b5563 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.guide-card-footer {
    margin-top: auto !important;
    border-top: 1px solid #f3f4f6 !important;
}

.guide-card .read-more {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--color-primary, #1e3a2f) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: color 0.2s ease !important;
    padding: 0 !important;
    background: transparent !important;
}

.guide-card:hover .read-more {
    color: var(--color-accent, #c89d53) !important;
}


/* -- Guide Card Thumbnail Overlay ---------------------------------- */
.guide-card-badge {
    position: absolute !important;
    bottom: 6px !important;
    left: 6px !important;
    background: var(--color-accent, #c89d53) !important;
    color: #ffffff !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    font-size: 0.55rem !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.05em !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 2 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

.guide-card-icon-circle {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    color: var(--color-accent, #c89d53) !important;
    z-index: 2 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    border: 2px solid var(--color-accent, #c89d53) !important;
}

.guide-card-no-img-header {
    position: relative !important;
    height: 180px !important;
    background: #fdfbf7 !important;
    border-bottom: 1px solid #f0e6d2 !important;
}



/* -- Mobile Adjustments for Guide Cards -- */
@media (max-width: 767px) {
    /* .guide-card-img,
    .guide-card-no-img-header {
        height: 100px !important;
    } */
    .guide-card-badge {
        top: 8px !important;
        left: 8px !important;
        font-size: 0.45rem !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: calc(100% - 16px) !important;
        height: min-content;
    }
    .guide-card-icon-circle {
        top: auto !important;
        bottom: 6px !important;
        right: 6px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
    }
}