/*
 Theme Name:   Harmonic Framework
 Theme URI:    https://harmonic-framework.com
 Description:  Child theme for Harmonic Framework site
 Author:       William Christopher Anderson
 Template:     generatepress
 Version:      4.1.4
 Text Domain:  harmonic-framework
*/

/* ── Brand tokens ── */
:root {
    --hf-blue:    #4361ee;
    --hf-teal:    #06d6a0;
    --hf-orange:  #ff6b35;
    --hf-red:     #e94560;
    --hf-purple:  #9b59b6;

    --hf-bg:      #ffffff;
    --hf-surface: #f8f9fa;
    --hf-text:    #2d3436;
    --hf-muted:   #636e72;
    --hf-border:  #dfe6e9;
    --hf-code-bg: #f5f6f8;

    --hf-accent:  var(--hf-blue);
}

/* ── Brand accent bar ── */
@keyframes hf-bar-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* gradient bar now in .hf-header-bar (custom header) */

/* ── Widen site container ── */
.grid-container {
    max-width: 1440px !important;
}

/* ── Content width — 80% centered on desktop, full width on mobile ── */
.content-area {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 767px) {
    .content-area { max-width: 100% !important; }
}

/* ── Reduce GeneratePress's 40px container padding site-wide ── */
.one-container .site-content,
.inside-article,
.separate-containers .inside-article {
    padding: 2rem 2rem 3rem !important;
}
/* Home page: hero controls its own top spacing, remove GP top padding */
.home .inside-article,
.home .one-container .site-content {
    padding-top: 0 !important;
}
/* Full-width HF page layouts: negate entry-content side padding so they span edge-to-edge */
.hf-hero,
.hf-methods-page,
.hf-wp-page,
.hf-book-page,
.hf-search-page {
    margin-left: -2rem;
    margin-right: -2rem;
}
.site-main > * { margin-bottom: 0; }

/* ── Header ── */
.hf-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: visible;
    /* positioning context for dropdown */
    background: #fff;
    border-bottom: 1px solid var(--hf-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hf-header-bar {
    height: 3px;
    background: linear-gradient(to right, var(--hf-blue), var(--hf-teal), var(--hf-orange), var(--hf-red), var(--hf-blue));
    background-size: 200% 100%;
    animation: hf-bar-shift 6s ease infinite;
}
.hf-header-inner {
    display: flex;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    gap: 0;
}

/* ── Logo ── */
.hf-header-logo { flex: 0 0 auto; }
.hf-header-logo a { display: block; }
.hf-logo-img { display: block; width: 60px; height: 60px; min-width: 60px; min-height: 60px; }
.hf-logo-text { font-weight: 700; font-size: 1.1rem; color: var(--hf-text); text-decoration: none; }
.hf-header-logo-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.hf-logo-hd {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--hf-text);
    letter-spacing: -0.02em;
}

/* ── Search — floats freely between logo and nav ── */
.hf-header-search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0 2rem;
}
.hf-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-radius: 24px;
    padding: 0 0.5rem 0 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.hf-search-form:focus-within {
    border-color: var(--hf-blue);
    box-shadow: 0 0 0 3px rgba(67,97,238,0.12);
}
.hf-search-input {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--hf-text);
    padding: 0.5rem 0;
    outline: none;
}
.hf-search-input::placeholder { color: var(--hf-muted); }
.hf-search-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hf-muted);
    padding: 0.4rem;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}
.hf-search-btn:hover { color: var(--hf-blue); background: rgba(67,97,238,0.08); }
.hf-search-btn svg { width: 16px; height: 16px; display: block; }

/* ── Nav widget in header ── */
#hf-header-nav .menu-primary-container { display: flex; align-items: center; }
#hf-header-nav ul.menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}
#hf-header-nav ul.menu > li { position: relative; }
#hf-header-nav ul.menu > li > a {
    display: block;
    padding: 0.5em 0.9em;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--hf-text);
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
#hf-header-nav ul.menu > li > a:hover { color: var(--hf-blue); background: rgba(67,97,238,0.06); }
#hf-header-nav ul.menu > .current-menu-item > a,
#hf-header-nav ul.menu > .current-menu-ancestor > a {
    color: var(--hf-text);
    font-weight: 600;
    position: relative;
}
#hf-header-nav ul.menu > .current-menu-item > a::after,
#hf-header-nav ul.menu > .current-menu-ancestor > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0.9em;
    right: 0.9em;
    height: 2px;
    background: linear-gradient(to right, var(--hf-blue), var(--hf-teal), var(--hf-orange), var(--hf-red), var(--hf-blue));
    background-size: 200% 100%;
    animation: hf-bar-shift 6s ease infinite;
    border-radius: 2px;
}
/* Dropdowns */
#hf-header-nav ul.menu .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    border: 1px solid var(--hf-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    padding: 0.4rem 0;
    min-width: 160px;
    z-index: 1002;
    list-style: none;
}
#hf-header-nav ul.menu li:hover > .sub-menu { display: block; }
#hf-header-nav ul.menu .sub-menu li a {
    display: block;
    padding: 0.5em 1rem;
    font-size: 0.875rem;
    color: var(--hf-text);
    text-decoration: none;
    white-space: nowrap;
}
#hf-header-nav ul.menu .sub-menu li a:hover { color: var(--hf-blue); background: var(--hf-surface); }
#hf-header-nav ul.menu .sub-menu > .current-menu-item > a {
    color: var(--hf-blue);
    font-weight: 600;
    position: relative;
}
#hf-header-nav ul.menu .sub-menu > .current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: linear-gradient(to right, var(--hf-blue), var(--hf-teal), var(--hf-orange), var(--hf-red), var(--hf-blue));
    background-size: 200% 100%;
    animation: hf-bar-shift 6s ease infinite;
    border-radius: 2px;
}

/* ── Nav ── */
.hf-header-nav { flex: 0 0 auto; position: relative; }
.hf-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hf-nav-list > li > a {
    display: block;
    padding: 0.5em 0.9em;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--hf-muted);
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}
.hf-nav-list > li > a:hover { color: var(--hf-blue); background: rgba(67,97,238,0.06); }
.hf-nav-list > .current-menu-item > a,
.hf-nav-list > .current-menu-ancestor > a { color: var(--hf-blue); font-weight: 600; }

/* Dropdowns */
.hf-nav-list > li { position: relative; }
.hf-nav-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    background: #fff;
    border: 1px solid var(--hf-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-width: 180px;
    padding: 0.25rem 0;
    list-style: none;
    margin: 0;
    z-index: 200;
}
.hf-nav-list li:hover > .sub-menu { display: block; }
.hf-nav-list .sub-menu li a {
    display: block;
    padding: 0.5em 1rem;
    font-size: 0.875rem;
    color: var(--hf-text);
    text-decoration: none;
    white-space: nowrap;
}
.hf-nav-list .sub-menu li a:hover { color: var(--hf-blue); background: var(--hf-surface); }

/* ── Hamburger — desktop hidden ── */
.hf-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: 0.5rem;
}
.hf-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--hf-text);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* ── Mid-desktop: compact nav to fit 7 items + large logo ── */
@media (max-width: 1400px) {
    .hf-nav-list > li > a { padding: 0.4em 0.5em; font-size: 0.85rem; }
    .hf-header-search { margin: 0 1rem; }
}

/* ── Tablet + mobile: hamburger below 1250px ── */
@media (max-width: 1249px) {
    .hf-header-inner { padding: 0.65rem 1.25rem; }
    .hf-logo-img { height: 72px; }
    .hf-header-search { margin: 0 1rem; }
    .hf-hamburger { display: flex; }
    #hf-header-nav { position: relative; }
    #hf-header-nav .menu-primary-container { display: none; }
    #hf-header-nav .menu-primary-container.is-open { display: block; }
    #hf-header-nav ul.menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: auto;
        width: max-content;
        min-width: 160px;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border: 1px solid var(--hf-border);
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        padding: 0.4rem 0;
        z-index: 1001;
    }
    #hf-header-nav ul.menu > li > a { border-radius: 0; padding: 0.6em 1.25rem; }
    #hf-header-nav ul.menu > .current-menu-item > a,
    #hf-header-nav ul.menu > .current-menu-ancestor > a { display: inline-block; }
    #hf-header-nav ul.menu > .current-menu-item > a::after,
    #hf-header-nav ul.menu > .current-menu-ancestor > a::after { left: 1.25rem; right: 1.25rem; }
    /* Sub-menus: show inline in hamburger */
    #hf-header-nav ul.menu .sub-menu {
        position: static;
        display: block;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 0.25rem 1.25rem;
        z-index: auto;
    }
    #hf-header-nav ul.menu li:hover > .sub-menu { display: block; }
    #hf-header-nav ul.menu .sub-menu > .current-menu-item > a {
        display: block;
        font-weight: 600;
        color: var(--hf-text);
        text-decoration: underline;
        text-decoration-color: var(--hf-blue);
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }
    #hf-header-nav ul.menu .sub-menu > .current-menu-item > a::after {
        display: none;
    }
    .hf-nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border-bottom: 1px solid var(--hf-border);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        padding: 0.5rem 0;
        z-index: 1001;
    }
    .hf-nav-list.is-open { display: flex; }
    .hf-nav-list > li > a { border-radius: 0; padding: 0.65em 1.25rem; }
    .hf-nav-list .sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 0 1.5rem;
        display: block;
    }
}

/* ── Small mobile: compact search ── */
@media (max-width: 480px) {
    .hf-header-inner { padding: 0.6rem 0.75rem; }
    .hf-logo-img { height: 56px; }
    .hf-header-search { margin: 0 0.5rem; }
    .hf-search-form { padding: 0 0.25rem 0 0.6rem; }
    .hf-search-input { font-size: 0.8rem; }
}

/* ── Tiny: hide search input, show icon only ── */
@media (max-width: 360px) {
    .hf-search-input { display: none; }
    .hf-search-form {
        padding: 0;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }
    .hf-search-form:focus-within {
        background: var(--hf-surface);
        border-color: var(--hf-blue);
    }
    .hf-search-form:focus-within .hf-search-input { display: block; }
}

/* ── Search results page ── */
.hf-search-page {
    padding: 3rem 0 5rem;
}
.hf-search-page__inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 2rem;
}
.hf-search-header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--hf-border);
}
.hf-search-header__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--hf-text);
    margin-bottom: 1.25rem;
}
.hf-search-header__title em {
    font-style: normal;
    color: var(--hf-blue);
}
.hf-search-page__form {
    display: flex;
    align-items: center;
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-radius: 8px;
    padding: 0 0.75rem 0 1.25rem;
    max-width: 560px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.hf-search-page__form:focus-within {
    border-color: var(--hf-blue);
    box-shadow: 0 0 0 3px rgba(67,97,238,0.12);
}
.hf-search-page__input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--hf-text);
    padding: 0.75rem 0;
    outline: none;
}
.hf-search-page__input::placeholder { color: var(--hf-muted); }
.hf-search-page__btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hf-muted);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.hf-search-page__btn:hover { color: var(--hf-blue); }
.hf-search-page__btn svg { width: 18px; height: 18px; }

.hf-search-count {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hf-muted);
    margin-bottom: 1.5rem;
}
.hf-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.hf-search-card {
    background: #fff;
    border: 1px solid var(--hf-border);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    border-left-width: 4px;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    position: relative;
}
.hf-search-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    transform: translateY(-1px);
}
/* type-based left accent colors */
.hf-search-card[data-type="article"]    { border-left-color: var(--hf-blue); }
.hf-search-card[data-type="whitepaper"] { border-left-color: var(--hf-purple); }
.hf-search-card[data-type="page"]       { border-left-color: var(--hf-teal); }
.hf-search-card[data-type="doc"]        { border-left-color: var(--hf-orange); }
.hf-search-card                         { border-left-color: var(--hf-border); }

.hf-search-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.hf-search-card__type {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.2em 0.6em;
    border-radius: 4px;
}
/* type badge colors */
.hf-search-card[data-type="article"]    .hf-search-card__type { color: var(--hf-blue);   background: rgba(67,97,238,0.08); }
.hf-search-card[data-type="whitepaper"] .hf-search-card__type { color: var(--hf-purple); background: rgba(155,89,182,0.1); }
.hf-search-card[data-type="page"]       .hf-search-card__type { color: var(--hf-teal);   background: rgba(6,214,160,0.1); }
.hf-search-card[data-type="doc"]        .hf-search-card__type { color: var(--hf-orange); background: rgba(255,107,53,0.1); }
.hf-search-card                         .hf-search-card__type { color: var(--hf-muted);  background: var(--hf-surface); }

.hf-search-card__date {
    font-size: 0.8rem;
    color: var(--hf-muted);
}
.hf-search-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.35;
}
.hf-search-card__title a {
    color: var(--hf-text);
    text-decoration: none;
}
.hf-search-card__title a:hover { color: var(--hf-blue); }
.hf-search-card__excerpt {
    font-size: 0.9rem;
    color: var(--hf-muted);
    line-height: 1.65;
    margin: 0 0 1rem;
}
.hf-search-card__link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hf-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: gap 0.15s ease;
}
.hf-search-card__link:hover { gap: 0.45rem; text-decoration: none; }
.hf-search-empty {
    padding: 4rem 0;
    color: var(--hf-muted);
    font-size: 1rem;
    line-height: 1.7;
}
mark {
    background: rgba(67, 97, 238, 0.15);
    color: var(--hf-blue);
    border-radius: 2px;
    padding: 0 2px;
}

/* ── Header logo ── */
.site-logo img {
    max-height: 50px;
    width: auto;
}
/* Hide the text title when logo is present */
.wp-custom-logo .site-branding .main-title {
    display: none;
}

/* ── Navigation ── */
.main-navigation {
    font-size: 0.9em;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.main-navigation .main-nav ul li a {
    color: var(--hf-muted);
    padding: 0.5em 0.9em;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.main-navigation .main-nav ul li a:hover {
    color: var(--hf-blue);
    background: rgba(67, 97, 238, 0.06);
}
.main-navigation .current-menu-item a {
    color: var(--hf-blue) !important;
    font-weight: 600;
}

/* ── Hide redundant page titles (content provides its own headings) ── */
.page .entry-title {
    display: none;
}

/* ── Links ── */
a {
    color: var(--hf-blue);
    transition: color 0.2s ease;
}
a:hover {
    color: var(--hf-teal);
}

/* ── Whitepaper card grid ── */
.hf-whitepaper-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 1.25rem 0 2rem;
}
@media (max-width: 700px) {
    .hf-whitepaper-grid { grid-template-columns: 1fr; }
}

/* ── Methodology / whitepaper cards ── */
.hf-method-card {
    background: #fff;
    border: 1px solid var(--hf-border);
    border-radius: 10px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hf-method-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
/* Colored top accent bar */
.hf-method-card::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--hf-border);
    flex-shrink: 0;
}
.hf-method-card--vbd::before { background: var(--hf-blue); }
.hf-method-card--ebd::before { background: var(--hf-teal); }
.hf-method-card--bdt::before { background: var(--hf-orange); }
.hf-method-card--pd::before  { background: var(--hf-red); }
.hf-method-card--ccr::before { background: linear-gradient(to right, var(--hf-purple), var(--hf-blue)); }

/* Card body */
.hf-method-card__body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* Fallback: when there's no .hf-method-card__body wrapper, pad h2/h3/p directly */
.hf-method-card > h2,
.hf-method-card > h3,
.hf-method-card > p,
.hf-method-card > a.hf-card-link {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.hf-method-card > h2 { padding-top: 0.5rem; margin-top: 0; text-align: center; }
.hf-method-card > h3 { padding-top: 0.5rem; margin-top: 0; text-align: center; }
.hf-method-card > p  { flex: 1; text-align: left; }

/* Category tag above title */
.hf-method-card__tag {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    display: inline-block;
}
.hf-method-card--vbd .hf-method-card__tag { color: var(--hf-blue); }
.hf-method-card--ebd .hf-method-card__tag { color: var(--hf-teal); }
.hf-method-card--bdt .hf-method-card__tag { color: var(--hf-orange); }
.hf-method-card--pd  .hf-method-card__tag { color: var(--hf-red); }
.hf-method-card--ccr .hf-method-card__tag { color: var(--hf-purple); }

.hf-method-icon {
    margin-bottom: 0.75rem;
    color: var(--hf-muted);
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1.5rem 1.5rem 0;
    box-sizing: border-box;
}
.hf-method-card--vbd .hf-method-icon { color: var(--hf-blue); }
.hf-method-card--ebd .hf-method-icon { color: var(--hf-teal); }
.hf-method-card--bdt .hf-method-icon { color: var(--hf-orange); }
.hf-method-card--pd  .hf-method-icon { color: var(--hf-red); }

.hf-method-card h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: 0.6rem;
}
.hf-method-card h3 a {
    color: var(--hf-text);
    text-decoration: none;
}
.hf-method-card h3 a:hover { color: var(--hf-blue); }
.hf-method-card p {
    color: var(--hf-muted);
    font-size: 0.875rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

/* "Read whitepaper →" footer link — WP wraps it in <p>, so target both */
.hf-card-link,
.hf-method-card > p > .hf-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.15s ease;
}
/* The p that contains only the hf-card-link acts as the card footer */
.hf-method-card > p:has(> .hf-card-link) {
    margin-bottom: 0;
    padding: 0 1.5rem 1.25rem;
    color: inherit;
}
.hf-method-card--vbd .hf-card-link { color: var(--hf-blue); }
.hf-method-card--ebd .hf-card-link { color: var(--hf-teal); }
.hf-method-card--bdt .hf-card-link { color: var(--hf-orange); }
.hf-method-card--pd  .hf-card-link { color: var(--hf-red); }
.hf-method-card--ccr .hf-card-link { color: var(--hf-purple); }
.hf-card-link:hover { gap: 0.5rem; text-decoration: none; }

/* ── Diagrams ── */
.hf-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2em 0;
    gap: 16px;
}
.hf-diagram svg {
    max-width: 100%;
    height: auto;
}
.hf-diagram figcaption {
    text-align: center;
    font-size: 0.82rem;
    color: var(--hf-muted);
    max-width: 420px;
    line-height: 1.55;
}

/* ── Tables ── */
.entry-content table,
table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
}
th, td {
    border: 1px solid var(--hf-border);
    padding: 0.6em 0.9em;
    text-align: left;
    white-space: nowrap;
}
th {
    background: var(--hf-surface);
    font-weight: 600;
}

/* ── Code ── */
pre {
    max-width: 100%;
    overflow-x: auto;
    background: var(--hf-code-bg);
    border: 1px solid var(--hf-border);
    border-radius: 4px;
    padding: 1em;
    font-size: 0.9em;
    line-height: 1.5;
}
pre code {
    background: none;
    border: none;
    padding: 0;
    white-space: pre;
}
pre[class*="language-"],
code[class*="language-"] {
    border: 1px solid var(--hf-border);
    border-radius: 4px;
    font-size: 0.9em;
}
:not(pre) > code {
    background: var(--hf-code-bg);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* ── Content overflow ── */
.entry-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
}
.entry-content figure img {
    width: 100%;
    height: auto;
}

/* ── Mermaid diagrams ── */
.mermaid {
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-radius: 6px;
    padding: 1.5rem;
    margin: 1.5em 0;
    text-align: center;
    max-width: 100%;
    overflow-x: auto;
}
.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* ── Blockquotes ── */
blockquote {
    border-left: 4px solid var(--hf-blue);
    background: var(--hf-surface);
    padding: 1rem 1.5rem;
    margin: 1.5em 0;
    border-radius: 0 6px 6px 0;
}

/* ── Reading time badge ── */
.hf-reading-time {
    display: inline-block;
    background: var(--hf-surface);
    color: var(--hf-muted);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    margin-bottom: 1.5em;
    border-left: 3px solid var(--hf-blue);
}

/* ── Category badges ── */
.hf-cat-badge {
    display: inline-block;
    background: var(--hf-surface);
    color: var(--hf-blue);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
    text-decoration: none;
    margin-right: 6px;
    margin-bottom: 8px;
    border: 1px solid var(--hf-border);
    transition: background-color 0.2s, border-color 0.2s;
}
.hf-cat-badge:hover {
    background: var(--hf-blue);
    color: #ffffff;
    border-color: var(--hf-blue);
}
.hf-post-meta-badges {
    margin-bottom: 0.75em;
}

/* ── Archive description ── */
.hf-archive-description {
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-left: 4px solid var(--hf-blue);
    border-radius: 0 6px 6px 0;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.95em;
    line-height: 1.6;
}

/* ── Blog archive grid ── */
.blog .site-main,
.archive .site-main,
.search .site-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .blog .site-main,
    .archive .site-main {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Post cards on archive ── */
.blog .inside-article,
.archive .inside-article {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.blog .post-image,
.archive .post-image {
    margin: -2rem -2rem 1.5rem -2rem;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}
.blog .post-image img,
.archive .post-image img,
.hf-default-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.blog .entry-summary,
.archive .entry-summary {
    flex: 1;
    color: var(--hf-muted);
    font-size: 0.95em;
    line-height: 1.6;
}

/* ── Influence cards ── */
.hf-influence-card {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    background: var(--hf-bg);
    border: 1px solid var(--hf-border);
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.hf-influence-card h3 {
    margin-top: 0;
}
.hf-influence-left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 240px;
}
.hf-influence-photo {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--hf-surface);
}
.hf-influence-interests {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}
.hf-interest-chip {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    background: rgba(67,97,238,0.07);
    border: 1px solid rgba(67,97,238,0.18);
    color: var(--hf-blue);
    width: 100%;
}
.hf-influence-photo img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.hf-influence-content {
    flex: 1;
}
.hf-influence-quote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--hf-blue);
    color: var(--hf-muted);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    background: var(--hf-surface);
    border-radius: 0 6px 6px 0;
}
.hf-influence-credentials {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
    list-style: disc;
}
.hf-influence-credentials li {
    font-size: 0.9rem;
    color: var(--hf-muted);
    line-height: 1.55;
    margin-bottom: 0.4rem;
}
/* ── About page: social links in card ── */
.hf-influence-socials {
    margin-top: 1rem;
}
.hf-influence-socials .wp-block-social-links {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.4rem !important;
}
.hf-influence-socials .wp-block-social-link {
    width: 32px !important;
    height: 32px !important;
}
.hf-influence-socials .wp-block-social-link a {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.hf-influence-socials .wp-block-social-link svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
}
.hf-influence-role {
    color: var(--hf-muted);
    font-style: italic;
    margin-top: -0.5em;
}
.hf-influence-card--compact {
    padding: 1.25rem;
}
.hf-influence-card--compact h3 {
    margin-bottom: 0.25em;
}
@media (max-width: 600px) {
    .hf-influence-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ── Post navigation ── */
.post-navigation {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hf-border);
}
.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
}
.post-navigation a {
    display: block;
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    transition: border-color 0.2s;
}
.post-navigation a:hover {
    border-color: var(--hf-blue);
}

/* ── Methodology taxonomy badges ── */
.hf-methodology-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}
.hf-methodology-badge--vbd { background: rgba(67,97,238,0.1); color: var(--hf-blue); border: 1px solid var(--hf-blue); }
.hf-methodology-badge--ebd { background: rgba(6,214,160,0.1); color: var(--hf-teal); border: 1px solid var(--hf-teal); }
.hf-methodology-badge--bdt { background: rgba(255,107,53,0.1); color: var(--hf-orange); border: 1px solid var(--hf-orange); }
.hf-methodology-badge--pd  { background: rgba(233,69,96,0.1); color: var(--hf-red); border: 1px solid var(--hf-red); }
.hf-methodology-badge--ccr { background: rgba(155,89,182,0.1); color: var(--hf-purple); border: 1px solid var(--hf-purple); }

/* ── Pagination ── */
.page-numbers.current {
    background: var(--hf-blue);
    border-color: var(--hf-blue);
    color: #ffffff;
}

/* ── Breadcrumbs ── */
.hf-breadcrumbs {
    font-size: 0.85em;
    color: var(--hf-muted);
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
}
.hf-breadcrumbs a {
    color: var(--hf-muted);
}
.hf-breadcrumbs a:hover {
    color: var(--hf-blue);
}
.hf-breadcrumbs .separator {
    margin: 0 0.5em;
    color: var(--hf-border);
}

/* ── Homepage: Hero ── */
.hf-hero {
    padding: 2.5rem 0 3.5rem;
    margin-bottom: 0;
    position: relative;
    background: transparent;
}
.hf-hero::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        var(--hf-blue),
        var(--hf-teal),
        var(--hf-orange),
        var(--hf-red),
        var(--hf-blue)
    );
    background-size: 200% 100%;
    animation: hf-bar-shift 6s ease infinite;
    opacity: 0.45;
}
.hf-hero__heading {
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    color: var(--hf-text);
    text-align: center;
}
.hf-hero__lede {
    color: var(--hf-muted);
    font-size: 1.15rem;
    line-height: 1.65;
    max-width: 960px;
    margin-bottom: 1rem;
}
.hf-hero__lede strong {
    color: var(--hf-blue);
    font-weight: 600;
}
.hf-hero__body {
    color: var(--hf-muted);
    line-height: 1.7;
    max-width: 960px;
}

/* ── Homepage: Sections ── */
.hf-section {
    padding: 3rem 0;
    border-bottom: none;
    position: relative;
}
.hf-section::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        var(--hf-blue),
        var(--hf-teal),
        var(--hf-orange),
        var(--hf-red),
        var(--hf-blue)
    );
    background-size: 200% 100%;
    animation: hf-bar-shift 6s ease infinite;
    opacity: 0.4;
}

/* ── Animated horizontal rules (plain hr + WP block separator) ── */
hr,
.wp-block-separator {
    border: none !important;
    border-top: none !important;
    height: 2px !important;
    background: linear-gradient(
        to right,
        var(--hf-blue),
        var(--hf-teal),
        var(--hf-orange),
        var(--hf-red),
        var(--hf-blue)
    ) !important;
    background-size: 200% 100% !important;
    animation: hf-bar-shift 6s ease infinite !important;
    opacity: 0.45;
    margin: 2rem 0;
}
.hf-section__heading {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
    color: var(--hf-text);
    text-align: center;
}
.hf-section__intro {
    color: var(--hf-muted);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    line-height: 1.6;
    text-align: center;
}

/* ── Homepage: Methodology cards (enhanced) ── */
.hf-section--methods .hf-method-card {
    height: 100%;
}
.hf-section--methods .hf-method-card h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.hf-section--methods .hf-method-card p {
    font-size: 0.875rem;
    line-height: 1.65;
}

/* ── Homepage: Isomorphism table ── */
.hf-table-wrap {
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-radius: 6px;
    padding: 1.25rem;
    margin: 1.5rem 0;
}
.hf-iso-table {
    border-radius: 6px;
    overflow: hidden;
    width: 85%;
    margin: 0 auto;
    border: none;
}
.hf-iso-table table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border: 1px solid var(--hf-border);
}
.hf-iso-table.hf-table-wide,
.single-post .hf-iso-table {
    width: 100%;
    overflow: hidden;
}
.single-post .hf-iso-table table {
    table-layout: fixed;
}
.single-post .hf-iso-table td,
.single-post .hf-iso-table th {
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
}
.hf-iso-table th {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hf-muted);
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--hf-border);
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: left;
}
.hf-iso-table td {
    font-size: 0.92em;
    padding: 0.8rem 1rem;
    border: none;
    border-bottom: 1px solid var(--hf-border);
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}
.hf-iso-table tr:last-child td {
    border-bottom: none;
}
.hf-iso-table td:first-child {
    font-weight: 600;
    color: var(--hf-text);
    border-left: 4px solid transparent;
    padding-left: 0.85rem;
}
/* Row accent colors — each row is one structural concept across all frameworks */
.hf-iso-table tr.iso-row-1 td:first-child { border-left-color: var(--hf-blue); }
.hf-iso-table tr.iso-row-2 td:first-child { border-left-color: var(--hf-teal); }
.hf-iso-table tr.iso-row-3 td:first-child { border-left-color: var(--hf-orange); }
.hf-iso-table tr.iso-row-4 td:first-child { border-left-color: var(--hf-muted); }
.hf-iso-table tr.iso-row-1 { background: rgba(67,97,238,0.03); }
.hf-iso-table tr.iso-row-2 { background: rgba(6,214,160,0.03); }
.hf-iso-table tr.iso-row-3 { background: rgba(255,107,53,0.03); }
.hf-iso-table tr.iso-row-4 { background: rgba(0,0,0,0.02); }
.hf-iso-consequence {
    color: var(--hf-text);
    font-style: italic;
    line-height: 1.6;
    margin-top: 1.25rem;
    padding-left: 1rem;
    border-left: 3px solid var(--hf-blue);
}

/* ── Isomorphism: interactive card component ── */
.hf-iso-filters {
    display: flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
    margin-bottom: 1.25rem;
}
.hf-iso-filter {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    border-radius: 20px;
    border: 1.5px solid #d0d4df;
    background: white;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.hf-iso-filter:hover { border-color: #9ca3af; color: #374151; }
.hf-iso-filter.active[data-axis="functional"]    { background: #4361ee; border-color: #4361ee; color: white; }
.hf-iso-filter.active[data-axis="nonfunctional"] { background: #7c3aed; border-color: #7c3aed; color: white; }
.hf-iso-filter.active[data-axis="environmental"] { background: #ff6b35; border-color: #ff6b35; color: white; }
.hf-iso-filter.active[data-axis="crosscutting"]  { background: #06b6a0; border-color: #06b6a0; color: white; }
.hf-iso-filter.active[data-axis="replan"]        { background: #1a1a2e; border-color: #1a1a2e; color: white; }

.hf-iso-cards { display: flex; flex-direction: column; gap: 0.6rem; }

.hf-iso-card {
    border: 1.5px solid #e2e5ea;
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    transition: opacity 0.2s, border-color 0.2s;
}
.filtering .hf-iso-card { opacity: 0.15; border-color: #eee; }
.filtering .hf-iso-card.lit { opacity: 1; border-color: inherit; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.hf-iso-card--orch     { border-left: 4px solid #4361ee; }
.hf-iso-card--exec     { border-left: 4px solid #06d6a0; }
.hf-iso-card--boundary { border-left: 4px solid #ff6b35; }
.hf-iso-card--xcut     { border-left: 4px solid #9ca3af; }
.filtering .hf-iso-card--orch.lit     { background: rgba(67,97,238,0.06); border-color: #4361ee; }
.filtering .hf-iso-card--exec.lit     { background: rgba(6,214,160,0.06); border-color: #06d6a0; }
.filtering .hf-iso-card--boundary.lit { background: rgba(255,107,53,0.06); border-color: #ff6b35; }
.filtering .hf-iso-card--xcut.lit     { background: rgba(156,163,175,0.1); border-color: #9ca3af; }

.hf-iso-cell {
    padding: 0.85rem 1rem;
    border-right: 1px solid #e2e5ea;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hf-iso-cell:last-child { border-right: none; }
.hf-iso-cell__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
    font-weight: 600;
}
.hf-iso-cell__value {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.3;
}
.hf-iso-cell__sub {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 400;
}
.hf-iso-cell--dash .hf-iso-cell__value { color: #d1d5db; font-weight: 400; }

.hf-iso-change {
    min-height: 2rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #374151;
    font-style: italic;
    padding: 0.5rem 0.9rem;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #d1d5db;
    transition: all 0.2s;
    display: none;
}
.hf-iso-change.visible { display: block; }
.hf-iso-change[data-axis="functional"]    { border-left-color: #4361ee; background: #eef1fd; }
.hf-iso-change[data-axis="nonfunctional"] { border-left-color: #7c3aed; background: #f5f0ff; }
.hf-iso-change[data-axis="environmental"] { border-left-color: #ff6b35; background: #fff4ef; }
.hf-iso-change[data-axis="crosscutting"]  { border-left-color: #06b6a0; background: #edfaf7; }
.hf-iso-change[data-axis="replan"]        { border-left-color: #1a1a2e; background: #f3f4f6; }

.replan-mode .hf-iso-card { opacity: 1 !important; border-color: inherit !important; }
.replan-mode .hf-iso-cell:not(.hf-iso-cell--pd) { opacity: 0.3; }
.replan-mode .hf-iso-cell--pd {
    background: #f0f0f8;
    border-left: 2px solid #1a1a2e;
}

/* ── EBD: volatility axes interactive component ── */
.hf-axes-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hf-axes-filter {
    font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.9rem;
    border-radius: 20px; border: 1.5px solid #d0d4df; background: white;
    color: #6b7280; cursor: pointer; transition: all 0.15s; user-select: none;
}
.hf-axes-filter:hover { border-color: #9ca3af; color: #374151; }
.hf-axes-filter.active[data-axis="functional"]    { background: #4361ee; border-color: #4361ee; color: white; }
.hf-axes-filter.active[data-axis="nonfunctional"] { background: #7c3aed; border-color: #7c3aed; color: white; }
.hf-axes-filter.active[data-axis="crosscutting"]  { background: #06b6a0; border-color: #06b6a0; color: white; }
.hf-axes-filter.active[data-axis="environmental"] { background: #ff6b35; border-color: #ff6b35; color: white; }

.hf-axes-desc {
    display: none; font-size: 0.85rem; font-style: italic; color: #374151;
    padding: 0.5rem 0.9rem; border-radius: 6px; border-left: 3px solid #d1d5db;
    margin-bottom: 0.75rem; line-height: 1.6;
}
.hf-axes-desc.visible { display: block; }
.hf-axes-desc[data-axis="functional"]    { border-left-color: #4361ee; background: #eef1fd; }
.hf-axes-desc[data-axis="nonfunctional"] { border-left-color: #7c3aed; background: #f5f0ff; }
.hf-axes-desc[data-axis="crosscutting"]  { border-left-color: #06b6a0; background: #edfaf7; }
.hf-axes-desc[data-axis="environmental"] { border-left-color: #ff6b35; background: #fff4ef; }

.hf-axes-cards { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
.hf-axes-card {
    border: 1.5px solid #e2e5ea; border-radius: 8px; overflow: hidden;
    display: grid; grid-template-columns: 180px 1fr 160px;
    transition: opacity 0.2s, border-color 0.2s;
}
.hf-axes-card--functional    { border-left: 4px solid #4361ee; }
.hf-axes-card--nonfunctional { border-left: 4px solid #7c3aed; }
.hf-axes-card--crosscutting  { border-left: 4px solid #06b6a0; }
.hf-axes-card--environmental { border-left: 4px solid #ff6b35; }
.filtering .hf-axes-card { opacity: 0.15; border-color: #eee; }
.filtering .hf-axes-card.lit { opacity: 1; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.filtering .hf-axes-card--functional.lit    { background: rgba(67,97,238,0.05);  border-color: #4361ee; }
.filtering .hf-axes-card--nonfunctional.lit { background: rgba(124,58,237,0.05); border-color: #7c3aed; }
.filtering .hf-axes-card--crosscutting.lit  { background: rgba(6,182,160,0.05);  border-color: #06b6a0; }
.filtering .hf-axes-card--environmental.lit { background: rgba(255,107,53,0.05); border-color: #ff6b35; }

.hf-axes-cell {
    padding: 0.85rem 1rem; border-right: 1px solid #e2e5ea;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.hf-axes-cell:last-child { border-right: none; }
.hf-axes-cell__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: #9ca3af; font-weight: 600; }
.hf-axes-cell__value { font-size: 0.92rem; font-weight: 600; color: #1a1a2e; line-height: 1.3; }
.hf-axes-cell__body  { font-size: 0.82rem; color: #6b7280; font-weight: 400; line-height: 1.5; }
.hf-axes-card--functional    .hf-axes-cell:first-child .hf-axes-cell__value { color: #4361ee; }
.hf-axes-card--nonfunctional .hf-axes-cell:first-child .hf-axes-cell__value { color: #7c3aed; }
.hf-axes-card--crosscutting  .hf-axes-cell:first-child .hf-axes-cell__value { color: #06b6a0; }
.hf-axes-card--environmental .hf-axes-cell:first-child .hf-axes-cell__value { color: #ff6b35; }

@media (max-width: 580px) {
    .hf-axes-card { grid-template-columns: 1fr 1fr; }
    .hf-axes-cell:nth-child(2) { border-right: none; }
    .hf-axes-cell:nth-child(3) { border-top: 1px solid #e2e5ea; grid-column: 1 / -1; }
}

/* ── BDT: test profiles component ── */
.bdt-viz { margin: 1.5rem 0 2rem; }
.bdt-selector {
    display: flex; gap: 0; margin-bottom: 1.25rem;
    border: 1.5px solid #e2e5ea; border-radius: 8px; overflow: hidden;
}
.bdt-group { flex: 1; display: flex; flex-direction: column; }
.bdt-group-label {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
    color: #9ca3af; font-weight: 600; padding: 0.5rem 0.9rem 0.4rem;
    background: #f9fafb; border-bottom: 1px solid #e2e5ea;
}
.bdt-divider-v { width: 1px; background: #e2e5ea; flex-shrink: 0; }
.bdt-pill {
    font-size: 0.85rem; font-weight: 500; padding: 0.55rem 0.9rem;
    border: none; border-bottom: 1px solid #f0f0f0; background: white;
    color: #6b7280; cursor: pointer; transition: all 0.15s; user-select: none;
    text-align: left; width: 100%;
}
.bdt-pill:last-child { border-bottom: none; }
.bdt-pill:hover { background: #f9fafb; color: #374151; }
.bdt-pill[data-role="manager"].active,
.bdt-pill[data-role="experience"].active  { background: #f5f0ff; color: #7c3aed; font-weight: 600; border-left: 3px solid #7c3aed; }
.bdt-pill[data-role="engine"].active,
.bdt-pill[data-role="flow"].active        { background: #eef1fd; color: #4361ee; font-weight: 600; border-left: 3px solid #4361ee; }
.bdt-pill[data-role="accessor"].active    { background: #fff4ef; color: #ff6b35; font-weight: 600; border-left: 3px solid #ff6b35; }
.bdt-pill[data-role="utility"].active,
.bdt-pill[data-role="utility-ebd"].active,
.bdt-pill[data-role="interaction"].active { background: #edfaf7; color: #06b6a0; font-weight: 600; border-left: 3px solid #06b6a0; }

.bdt-card { display: none; border-radius: 8px; border: 1.5px solid #e2e5ea; overflow: hidden; margin-bottom: 2rem; }
.bdt-card.visible { display: block; }
.bdt-card[data-role="engine"],
.bdt-card[data-role="flow"]        { border-left: 4px solid #4361ee; }
.bdt-card[data-role="manager"],
.bdt-card[data-role="experience"]  { border-left: 4px solid #7c3aed; }
.bdt-card[data-role="accessor"]    { border-left: 4px solid #ff6b35; }
.bdt-card[data-role="interaction"],
.bdt-card[data-role="utility"]     { border-left: 4px solid #06b6a0; }

.bdt-card-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.bdt-cell {
    padding: 0.85rem 1rem; border-right: 1px solid #e2e5ea;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.bdt-cell:last-child { border-right: none; }
.bdt-cell__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: #9ca3af; font-weight: 600; }
.bdt-cell__value { font-size: 0.9rem; font-weight: 600; color: #1a1a2e; line-height: 1.3; }
.bdt-cell__body  { font-size: 0.82rem; color: #6b7280; line-height: 1.5; }
.bdt-desc {
    font-size: 0.85rem; font-style: italic; color: #374151;
    padding: 0.6rem 1rem; background: #f9fafb; line-height: 1.6;
    border-top: 1px solid #f0f0f0;
}

@media (max-width: 580px) {
    .bdt-card-grid { grid-template-columns: 1fr 1fr; }
    .bdt-cell:nth-child(2) { border-right: none; }
    .bdt-cell:nth-child(3) { border-top: 1px solid #e2e5ea; grid-column: 1 / -1; }
}

/* ── Isomorphism: responsive ── */
@media (max-width: 580px) {
    .hf-iso-filters { flex-wrap: wrap; }
    .hf-iso-card { grid-template-columns: 1fr 1fr; }
    .hf-iso-cell:nth-child(2) { border-right: none; }
    .hf-iso-cell:nth-child(3),
    .hf-iso-cell:nth-child(4) { border-top: 1px solid #e2e5ea; }
}

/* ── Homepage: CTA ── */
.hf-cta {
    padding: 3rem 0 2rem;
    text-align: center;
}
.hf-cta__heading {
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
    color: var(--hf-text);
}
.hf-cta__body {
    color: var(--hf-muted);
    max-width: 520px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}
.hf-cta__buttons {
    justify-content: center;
}

/* ── Dropdown submenus ── */
.main-navigation .main-nav ul ul {
    background: var(--hf-bg);
    border: 1px solid var(--hf-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 0.4rem 0;
    min-width: 180px;
}
.main-navigation .main-nav ul ul li a {
    padding: 0.5em 1.2em;
    font-size: 0.9em;
    border-radius: 0;
}
.main-navigation .main-nav ul ul li a:hover {
    background: rgba(67, 97, 238, 0.06);
    color: var(--hf-blue);
}
.main-navigation .main-nav ul li.menu-item-has-children > a::after {
    content: '\25BE';
    margin-left: 0.35em;
    font-size: 0.75em;
    opacity: 0.5;
}

/* ── Single post styling ── */
.single .entry-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hf-border);
}
.single .entry-title {
    font-size: 2rem;
    line-height: 1.25;
    color: var(--hf-text);
    margin-bottom: 0.5rem;
    text-align: center;
}
.single .entry-meta {
    color: var(--hf-muted);
    font-size: 0.88em;
}
.single .entry-meta a {
    color: var(--hf-muted);
    text-decoration: none;
}
.single .entry-meta a:hover {
    color: var(--hf-blue);
}
.single .entry-content {
    font-size: 1.05em;
    line-height: 1.75;
    color: var(--hf-text);
}
.single .entry-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--hf-border);
    color: var(--hf-text);
}
.single .entry-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: var(--hf-text);
}
.single .entry-content p {
    margin-bottom: 1.25em;
}
.single .entry-content ul,
.single .entry-content ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}
.single .entry-content li {
    margin-bottom: 0.4em;
    line-height: 1.65;
}
.single .entry-content img {
    border-radius: 6px;
    border: 1px solid var(--hf-border);
}
.single .entry-content figure {
    margin: 2em auto;
    max-width: 640px;
}
.single .entry-content .wp-block-table {
    max-width: 100%;
}

/* Non-blog pages: center plain wp-block-table inner table */
.page .wp-block-table:not(.hf-iso-table) {
    overflow-x: visible;
}
.page .wp-block-table:not(.hf-iso-table) table {
    width: 80%;
    margin: 0 auto;
}
.single .entry-content figcaption {
    text-align: center;
    color: var(--hf-muted);
    font-size: 0.88em;
    margin-top: 0.5em;
}

/* Author box */
.hf-author-box {
    display: flex;
    gap: 1.25rem;
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 2.5rem;
}
.hf-author-box img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hf-author-box .author-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.hf-author-box .author-bio {
    color: var(--hf-muted);
    font-size: 0.9em;
    line-height: 1.5;
}

/* Tags in single posts */
.single .entry-content .post-tags,
.single .cat-links,
.single .tags-links {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hf-border);
    font-size: 0.88em;
    color: var(--hf-muted);
}
.single .tags-links a,
.single .cat-links a {
    display: inline-block;
    background: var(--hf-surface);
    color: var(--hf-blue);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.88em;
    text-decoration: none;
    border: 1px solid var(--hf-border);
    margin: 2px;
    transition: background 0.2s, border-color 0.2s;
}
.single .tags-links a:hover,
.single .cat-links a:hover {
    background: var(--hf-blue);
    color: #ffffff;
    border-color: var(--hf-blue);
}

/* ── Archive / category page cards (enhanced) ── */
.blog article,
.archive article,
.search article {
    background: var(--hf-bg);
    border: 1px solid var(--hf-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.blog article:hover,
.archive article:hover,
.search article:hover {
    border-color: var(--hf-blue);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.08);
}
.blog .inside-article,
.archive .inside-article,
.search .inside-article {
    padding: 1.5rem;
}
.blog .entry-title,
.archive .entry-title,
.search .entry-title {
    font-size: 1.15em;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}
.blog .entry-title a,
.archive .entry-title a,
.search .entry-title a {
    color: var(--hf-text);
    text-decoration: none;
}
.blog .entry-title a:hover,
.archive .entry-title a:hover,
.search .entry-title a:hover {
    color: var(--hf-blue);
}
.blog .entry-meta,
.archive .entry-meta {
    font-size: 0.82em;
    color: var(--hf-muted);
    margin-bottom: 0.75rem;
}

/* Archive page header spans full grid */
.blog .page-header,
.archive .page-header,
.search .page-header {
    grid-column: 1 / -1;
}
.archive .archive-title,
.search .page-title {
    font-size: 1.5rem;
    color: var(--hf-text);
    margin-bottom: 0.5rem;
}
.archive .archive-description p {
    color: var(--hf-muted);
    font-size: 0.95em;
}

/* Pagination spans full grid */
.blog nav.navigation,
.archive nav.navigation,
.search nav.navigation {
    grid-column: 1 / -1;
}
.nav-links {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5em;
    border: 1px solid var(--hf-border);
    border-radius: 4px;
    color: var(--hf-muted);
    text-decoration: none;
    font-size: 0.9em;
    transition: border-color 0.2s, color 0.2s;
}
.page-numbers:hover {
    border-color: var(--hf-blue);
    color: var(--hf-blue);
}

/* Default thumbnail for posts without featured images */
.hf-default-thumb {
    background: linear-gradient(135deg, var(--hf-surface) 0%, var(--hf-border) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hf-muted);
    font-size: 0.85em;
}

/* ── Sidebar / widget styling ── */
.sidebar .widget {
    background: var(--hf-bg);
    border: 1px solid var(--hf-border);
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.sidebar .widget-title {
    font-size: 0.95em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hf-text);
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--hf-blue);
}
.sidebar .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar .widget ul li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--hf-border);
}
.sidebar .widget ul li:last-child {
    border-bottom: none;
}
.sidebar .widget ul li a {
    color: var(--hf-text);
    text-decoration: none;
    font-size: 0.92em;
    transition: color 0.2s;
}
.sidebar .widget ul li a:hover {
    color: var(--hf-blue);
}

/* Widget: search */
.sidebar .widget_search .search-form {
    display: flex;
    gap: 0;
}
.sidebar .widget_search .search-field {
    flex: 1;
    border: 1px solid var(--hf-border);
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 0.5em 0.75em;
    font-size: 0.9em;
    background: var(--hf-surface);
    color: var(--hf-text);
    transition: border-color 0.2s;
}
.sidebar .widget_search .search-field:focus {
    outline: none;
    border-color: var(--hf-blue);
}
.sidebar .widget_search .search-submit {
    background: var(--hf-blue);
    color: #ffffff;
    border: 1px solid var(--hf-blue);
    border-radius: 0 4px 4px 0;
    padding: 0.5em 1em;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.2s;
}
.sidebar .widget_search .search-submit:hover {
    background: #3451d1;
}

/* Widget: tag cloud */
.sidebar .tagcloud a {
    display: inline-block;
    background: var(--hf-surface);
    color: var(--hf-muted) !important;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.82em !important;
    text-decoration: none;
    border: 1px solid var(--hf-border);
    margin: 2px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sidebar .tagcloud a:hover {
    background: var(--hf-blue);
    color: #ffffff !important;
    border-color: var(--hf-blue);
}

/* Widget: recent posts */
.sidebar .widget_recent_entries li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.sidebar .widget_recent_entries .post-date {
    color: var(--hf-muted);
    font-size: 0.8em;
}

/* Widget: categories with counts */
.sidebar .widget_categories li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Search results styling ── */
.search .site-main {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .search .site-main {
        grid-template-columns: 1fr 1fr;
    }
}
.search .entry-summary {
    color: var(--hf-muted);
    font-size: 0.93em;
    line-height: 1.6;
    margin-top: 0.5rem;
}
.search .entry-summary .search-excerpt mark,
.search mark {
    background: rgba(67, 97, 238, 0.12);
    color: var(--hf-blue);
    padding: 1px 3px;
    border-radius: 2px;
}

/* Search page form */
.search-form {
    display: flex;
    gap: 0;
    max-width: 500px;
}
.search-form .search-field {
    flex: 1;
    border: 1px solid var(--hf-border);
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 0.6em 1em;
    font-size: 0.95em;
    background: var(--hf-surface);
    color: var(--hf-text);
}
.search-form .search-field:focus {
    outline: none;
    border-color: var(--hf-blue);
}
.search-form .search-submit {
    background: var(--hf-blue);
    color: #ffffff;
    border: 1px solid var(--hf-blue);
    border-radius: 0 4px 4px 0;
    padding: 0.6em 1.25em;
    cursor: pointer;
    transition: background 0.2s;
}
.search-form .search-submit:hover {
    background: #3451d1;
}
.search-no-results .page-content {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--hf-muted);
}

/* ── GP site-footer (hidden — replaced by hf-footer) ── */
.site-footer {
    display: none;
}

/* ── Custom footer ── */
.hf-footer {
    background: var(--hf-surface);
}
.hf-footer-bar {
    height: 3px;
    background: linear-gradient(to right, var(--hf-blue), var(--hf-teal), var(--hf-orange), var(--hf-red), var(--hf-blue));
    background-size: 200% 100%;
    animation: hf-bar-shift 6s ease infinite;
}
.hf-footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 10% 1.5rem;
}

/* Row 1: logo + social */
.hf-footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 1.75rem;
}
.hf-footer__logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}
.hf-footer__logo-icon { width: 64px; height: 64px; display: block; }
.hf-footer__logo-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.hf-footer__logo-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--hf-text);
}
.hf-footer__logo-sub {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--hf-muted);
}
.hf-footer__socials {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}
.hf-footer__social-link {
    display: flex;
    align-items: center;
    transition: opacity 0.15s;
    text-decoration: none;
    opacity: 0.85;
}
.hf-footer__social-link:hover { opacity: 1; }
.hf-footer__social-link svg { width: 32px; height: 32px; }
.hf-footer__social-link[aria-label="LinkedIn"] { color: #0A66C2; }
.hf-footer__social-link[aria-label="GitHub"] { color: #24292e; }

/* Row 2: nav + copyright */
.hf-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--hf-border, #e5e7eb);
    padding-top: 1.25rem;
    gap: 2rem;
    flex-wrap: wrap;
}
.hf-footer__nav {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.hf-footer__nav a {
    font-size: 0.875rem;
    color: var(--hf-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.hf-footer__nav a:hover { color: var(--hf-text); }
.hf-footer__copy {
    font-size: 0.875rem;
    color: var(--hf-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 700px) {
    .hf-footer__top { flex-direction: row; align-items: center; }
    .hf-footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ── Subscribe box (shortcode) ── */
.hf-subscribe-box {
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem 0;
}
.hf-subscribe-box__title { font-size: 1.25rem; margin: 0 0 0.5rem; }
.hf-subscribe-box__desc { color: var(--hf-muted); margin: 0 0 1.25rem; }
.hf-subscribe-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.hf-subscribe-form__email {
    flex: 1 1 200px;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--hf-border);
    border-radius: 6px;
    background: var(--hf-bg);
    color: var(--hf-text);
    font-size: 0.9rem;
    outline: none;
}
.hf-subscribe-form__email:focus { border-color: var(--hf-blue); box-shadow: 0 0 0 3px rgba(67,97,238,0.12); }
.hf-subscribe-form__btn {
    flex: 0 0 auto;
    padding: 0.55rem 1.25rem;
    background: var(--hf-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.hf-subscribe-form__btn:hover { opacity: 0.88; }
.hf-subscribe-form__btn:disabled { opacity: 0.6; cursor: default; }
.hf-subscribe-form__msg {
    flex: 1 1 100%;
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}
.hf-subscribe-form__msg--ok { color: #1a9e5a; }
.hf-subscribe-form__msg--err { color: var(--hf-red); }

/* ── Contact Form 7 ── */
.wpcf7-form p { margin-bottom: 1.25rem; }
.wpcf7-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hf-text);
    margin-bottom: 0.4rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    max-width: 560px;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--hf-border);
    border-radius: 6px;
    background: var(--hf-bg);
    color: var(--hf-text);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    border-color: var(--hf-blue);
    box-shadow: 0 0 0 3px rgba(67,97,238,0.1);
}
.wpcf7-form textarea { resize: vertical; min-height: 140px; max-width: 560px; }
.wpcf7-form input[type="submit"] {
    background: var(--hf-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.65rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.wpcf7-form input[type="submit"]:hover { opacity: 0.88; }
.hf-cf7-submit-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.hf-cf7-submit-row .wpcf7-submit { flex: 0 0 auto; }
.hf-cf7-submit-row .wpcf7-form-control-wrap { flex: 0 0 auto; }
.wpcf7-not-valid-tip {
    color: var(--hf-red);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}
.wpcf7-response-output {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    border: none !important;
}
.wpcf7-mail-sent-ok { background: rgba(6,214,160,0.1); color: #0a7a5a; }
.wpcf7-mail-sent-ng,
.wpcf7-validation-errors { background: rgba(233,69,96,0.08); color: var(--hf-red); }

/* ── Sticky subscribe bar ── */
.hf-subscribe-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    background: var(--hf-bg);
    border: 1px solid var(--hf-border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    z-index: 90;
    padding: 0.75rem 1.5rem;
}
@media (max-width: 900px) {
    .hf-subscribe-bar { width: 90%; }
}
.hf-subscribe-bar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.hf-subscribe-bar__copy { flex: 0 0 auto; font-size: 0.9rem; font-weight: 700; color: var(--hf-text); }
.hf-subscribe-bar__form { flex: 1 1 auto; }
.hf-subscribe-bar__form .hf-subscribe-form__msg { display: none; }
.hf-subscribe-bar__close {
    flex: 0 0 auto;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--hf-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.hf-subscribe-bar__close:hover { color: var(--hf-text); }
@media (max-width: 600px) {
    .hf-subscribe-bar__copy { display: none; }
}


/* ── Blog archive ── */
.hf-blog-page { padding: 0; }
.hf-blog-page__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 3rem;
    background-color: var(--base-3);
}

.hf-blog-header {
    margin-bottom: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hf-blog-header__title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--hf-text);
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.hf-blog-header__desc {
    color: var(--hf-muted);
    font-size: 1rem;
    margin: 0;
    max-width: 600px;
}

/* RSS icon — inline after title */
.hf-rss-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--hf-orange);
    opacity: 0.7;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.hf-rss-btn:hover { opacity: 1; color: var(--hf-orange); }

/* Category filter pills */
.hf-blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    justify-content: center;
}
.hf-blog-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--hf-muted);
    border: 1px solid var(--hf-border);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    text-decoration: none;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.hf-blog-cat-pill:hover { border-color: var(--hf-blue); color: var(--hf-blue); }
.hf-blog-cat-pill.is-active { background: var(--hf-blue); border-color: var(--hf-blue); color: #fff; }
.hf-blog-cat-pill__count { opacity: 0.7; font-size: 0.75rem; }

/* Unified filter bar */
.hf-blog-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    justify-content: center;
}
.hf-blog-filters__divider {
    display: inline-block;
    width: 1px;
    height: 1.1rem;
    background: var(--hf-border);
    margin: 0 0.25rem;
    flex-shrink: 0;
}
.hf-blog-cat-pill--date {
    font-variant-numeric: tabular-nums;
    color: var(--hf-muted);
    opacity: 0.8;
}
.hf-blog-cat-pill--date:hover { opacity: 1; }
.hf-blog-cat-pill--date.is-active { background: var(--hf-blue); border-color: var(--hf-blue); color: #fff; opacity: 1; }

/* Date dropdown (4+ months) */
.hf-blog-date-select {
    appearance: none;
    -webkit-appearance: none;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--hf-muted);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa0a6'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
    border: 1px solid var(--hf-border);
    border-radius: 999px;
    padding: 0.3rem 2rem 0.3rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s;
}
.hf-blog-date-select:hover { border-color: var(--hf-blue); color: var(--hf-blue); }

/* Blog grid */
.hf-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
/* First card spans full width */
.hf-blog-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.hf-blog-card--featured .hf-blog-card__thumb-link { border-radius: 10px 0 0 10px; overflow: hidden; display: block; }
.hf-blog-card--featured .hf-blog-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-blog-card--featured .hf-blog-card__body { padding: 2rem 2rem 2rem; }

/* Regular card */
.hf-blog-card {
    background: #fff;
    border: 1px solid var(--hf-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hf-blog-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.hf-blog-card__thumb-link { display: block; overflow: hidden; }
.hf-blog-card__thumb { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.3s ease; }
.hf-blog-card:hover .hf-blog-card__thumb { transform: scale(1.03); }

.hf-blog-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hf-blog-card__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.hf-blog-card__cat {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hf-blue);
    text-decoration: none;
    background: rgba(67,97,238,0.08);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
}
.hf-blog-card__cat:hover { background: rgba(67,97,238,0.15); }
.hf-blog-card__date,
.hf-blog-card__read {
    font-size: 0.78rem;
    color: var(--hf-muted);
}
.hf-blog-card__date::before { content: ''; }
.hf-blog-card__read::before { content: '· '; opacity: 0.5; }

.hf-blog-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.6rem;
}
.hf-blog-card--featured .hf-blog-card__title { font-size: 1.5rem; }
.hf-blog-card__title a { color: var(--hf-text); text-decoration: none; }
.hf-blog-card__title a:hover { color: var(--hf-blue); }

.hf-blog-card__excerpt {
    font-size: 0.9rem;
    color: var(--hf-muted);
    line-height: 1.6;
    margin: 0 0 0.75rem;
    flex: 1;
}

/* Tag pills */
.hf-blog-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.hf-tag {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--hf-muted);
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    text-decoration: none;
    transition: color 0.18s, border-color 0.18s;
}
.hf-tag:hover { color: var(--hf-blue); border-color: var(--hf-blue); }

.hf-blog-card__link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hf-blue);
    text-decoration: none;
    margin-top: auto;
}
.hf-blog-card__link:hover { text-decoration: underline; }

.hf-blog-empty { text-align: center; padding: 4rem 0; color: var(--hf-muted); }

/* Responsive */
@media (max-width: 900px) {
    .hf-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .hf-blog-card--featured { grid-template-columns: 1fr; }
    .hf-blog-card--featured .hf-blog-card__thumb-link { border-radius: 10px 10px 0 0; }
    .hf-blog-card--featured .hf-blog-card__thumb { height: 220px; }
}
@media (max-width: 600px) {
    .hf-blog-grid { grid-template-columns: 1fr; }
}

/* ── Book page ── */
.hf-book-page { padding: 3rem 0 2rem; }

/* Hero */
.hf-book-hero {
    max-width: 1100px;
    margin: 0 auto 4rem;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 4rem;
    align-items: start;
}
.hf-book-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hf-orange);
    border: 1.5px solid var(--hf-orange);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    margin-bottom: 1.25rem;
}
.hf-book-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--hf-text);
    margin: 0 0 0.35rem;
}
.hf-book-subtitle {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--hf-muted);
    margin: 0 0 0.4rem;
}
.hf-book-author {
    font-size: 0.95rem;
    color: var(--hf-muted);
    margin: 0 0 1.75rem;
}
.hf-book-pullquote {
    border-left: 3px solid var(--hf-blue);
    padding: 0.75rem 0 0.75rem 1.25rem;
    margin: 0 0 2rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--hf-text);
    font-style: italic;
}
.hf-book-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Buttons */
.hf-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 7px;
    padding: 0.65rem 1.4rem;
    text-decoration: none;
    transition: opacity 0.18s, background 0.18s, color 0.18s;
    cursor: pointer;
    border: none;
}
.hf-book-btn--primary {
    background: var(--hf-blue);
    color: #fff;
}
.hf-book-btn--primary:hover { opacity: 0.88; color: #fff; }
.hf-book-btn--secondary {
    background: transparent;
    color: var(--hf-blue);
    border: 1.5px solid var(--hf-blue);
}
.hf-book-btn--secondary:hover { background: var(--hf-blue); color: #fff; }

/* Cover image */
.hf-book-cover-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3D book cover (fallback) */
.hf-book-cover {
    width: 220px;
    height: 310px;
    position: relative;
    transform: perspective(800px) rotateY(-12deg);
    transform-style: preserve-3d;
    margin: 0 auto;
    filter: drop-shadow(12px 16px 28px rgba(0,0,0,0.18));
}
.hf-book-cover__face {
    position: absolute;
    inset: 0;
    background: var(--hf-text);
    border-radius: 2px 6px 6px 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    color: #fff;
}
.hf-book-cover__spine {
    position: absolute;
    left: -14px;
    top: 0;
    bottom: 0;
    width: 14px;
    background: #1a1a2e;
    border-radius: 2px 0 0 2px;
    transform: rotateY(-90deg) translateX(-7px);
    transform-origin: right;
}
.hf-book-cover__title {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.hf-book-cover__subtitle {
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.75;
    line-height: 1.4;
}
.hf-book-cover__author {
    font-size: 0.75rem;
    opacity: 0.6;
    letter-spacing: 0.04em;
}

/* About + TOC */
.hf-book-about {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem;
    border-top: 1px solid var(--hf-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
.hf-book-about h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hf-text);
    margin: 0 0 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
}
.hf-book-about__col--description p {
    font-size: 1rem;
    color: var(--hf-muted);
    line-height: 1.75;
    margin-bottom: 1rem;
}
.hf-book-about__note {
    font-style: italic;
    color: var(--hf-text) !important;
    border-left: 2px solid var(--hf-border);
    padding-left: 0.75rem;
}

/* Table of contents */
.hf-book-toc { font-size: 0.875rem; }
.hf-book-toc__section {
    color: var(--hf-muted);
    padding: 0.2rem 0;
    font-style: italic;
}
.hf-book-toc__part {
    color: var(--hf-text);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}
.hf-book-toc__chapter {
    color: var(--hf-muted);
    padding: 0.15rem 0 0.15rem 0.75rem;
    border-left: 2px solid var(--hf-border);
}

/* Sample section */
/* Notify section */
.hf-book-notify {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 2rem 2rem;
    border-top: 1px solid var(--hf-border);
}
.hf-book-notify h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.hf-book-notify p { color: var(--hf-muted); margin-bottom: 1.25rem; }
.hf-book-notify__form { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.hf-book-notify__form .hf-subscribe-form__email {
    padding: 0.65rem 1rem;
    border: 1px solid var(--hf-border);
    border-radius: 7px;
    font-size: 0.9rem;
    min-width: 260px;
}
.hf-book-notify__form .hf-subscribe-form__msg { font-size: 0.85rem; color: var(--hf-teal); margin: 0; }

/* Responsive */
@media (max-width: 860px) {
    .hf-book-hero { grid-template-columns: 1fr; gap: 2rem; }
    .hf-book-hero__cover { text-align: center; }
    .hf-book-cover-img { max-width: 260px; }
    .hf-book-title { font-size: 2.2rem; }
    .hf-book-about { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Documentation page ── */
.hf-docs-page {
    margin-left: -2rem;
    margin-right: -2rem;
}
.hf-docs-hero {
    background: var(--base-3);
    padding: 3rem 2rem 0;
    text-align: center;
}
.hf-docs-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}
.hf-docs-hero p {
    font-size: 1.1rem;
    color: var(--hf-muted);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}
.hf-docs-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2.5rem 2rem 3rem;
    background: var(--base-3);
}
.hf-docs-section {
    margin-bottom: 3rem;
}
.hf-docs-section > h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--hf-text);
    margin: 0 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--hf-border);
}
/* Getting Started steps */
.hf-docs-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.hf-docs-step {
    background: #fff;
    border: 1px solid var(--hf-border);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: box-shadow 0.2s, transform 0.2s;
}
.hf-docs-step:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    transform: translateY(-2px);
}
.hf-docs-step__num {
    width: 2rem;
    height: 2rem;
    background: var(--hf-blue);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-bottom: 0.25rem;
}
.hf-docs-step__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--hf-text);
}
.hf-docs-step__title a {
    color: var(--hf-blue);
    text-decoration: none;
}
.hf-docs-step__title a:hover { text-decoration: underline; }
.hf-docs-step__desc {
    font-size: 0.88rem;
    color: var(--hf-muted);
    line-height: 1.5;
    margin: 0;
}
/* Phase cards */
.hf-docs-phases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.hf-docs-phase {
    background: #fff;
    border: 1px solid var(--hf-border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.hf-docs-phase:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.hf-docs-phase__header {
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--hf-border);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.hf-docs-phase__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}
.hf-docs-phase--1 .hf-docs-phase__icon { background: rgba(67,97,238,0.1); color: var(--hf-blue); }
.hf-docs-phase--2 .hf-docs-phase__icon { background: rgba(6,214,160,0.1); color: var(--hf-teal); }
.hf-docs-phase--3 .hf-docs-phase__icon { background: rgba(255,107,53,0.1); color: var(--hf-orange); }
.hf-docs-phase--4 .hf-docs-phase__icon { background: rgba(233,69,96,0.1); color: var(--hf-red); }
.hf-docs-phase__label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.hf-docs-phase--1 .hf-docs-phase__label { color: var(--hf-blue); }
.hf-docs-phase--2 .hf-docs-phase__label { color: var(--hf-teal); }
.hf-docs-phase--3 .hf-docs-phase__label { color: var(--hf-orange); }
.hf-docs-phase--4 .hf-docs-phase__label { color: var(--hf-red); }
.hf-docs-phase__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hf-text);
    margin: 0;
    line-height: 1.3;
}
.hf-docs-phase__body {
    padding: 1.25rem 1.5rem;
}
.hf-docs-phase__body p {
    font-size: 0.88rem;
    color: var(--hf-muted);
    margin: 0 0 0.75rem;
    line-height: 1.55;
}
.hf-docs-phase__body ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    color: var(--hf-text);
    line-height: 1.7;
}
/* Quick reference callout */
.hf-docs-callout {
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-left: 4px solid var(--hf-blue);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}
.hf-docs-callout strong { color: var(--hf-text); }
/* Notice box */
.hf-docs-notice {
    background: var(--hf-surface);
    border: 1px solid var(--hf-border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    font-size: 0.875rem;
    color: var(--hf-muted);
    line-height: 1.6;
    margin-top: 2rem;
    text-align: center;
}
.hf-docs-notice a { color: var(--hf-blue); }
/* Table in docs */
.hf-docs-page .wp-block-table { margin: 0; }
.hf-docs-page .wp-block-table table,
.hf-docs-page .entry-content table,
.hf-docs-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: fixed;
}
.hf-docs-page .wp-block-table th,
.hf-docs-page .wp-block-table td,
.hf-docs-page .entry-content th,
.hf-docs-page .entry-content td,
.hf-docs-page th,
.hf-docs-page td {
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--hf-border);
    text-align: left;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.hf-docs-page .wp-block-table thead th,
.hf-docs-page thead th {
    background: var(--hf-surface);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hf-muted);
}
.hf-docs-page .wp-block-table tbody tr:nth-child(even) td,
.hf-docs-page tbody tr:nth-child(even) td {
    background: #fafafa;
}
/* Code block in docs */
.hf-docs-page .wp-block-code {
    background: var(--hf-code-bg);
    border: 1px solid var(--hf-border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    font-size: 0.82rem;
    line-height: 1.6;
    overflow-x: auto;
}
@media (max-width: 768px) {
    .hf-docs-steps { grid-template-columns: 1fr; }
    .hf-docs-phases { grid-template-columns: 1fr; }
    .hf-docs-hero { padding: 2rem 1.25rem; }
    .hf-docs-inner { padding: 1.5rem 1.25rem 2.5rem; }
}
@media (max-width: 1024px) and (min-width: 769px) {
    .hf-docs-phases { grid-template-columns: 1fr; }
}

/* ── Footer language switcher ── */
.hf-lang-footer {
    border-top: 1px solid var(--hf-border);
    padding: 0.5rem 0;
}
.hf-lang-footer__inner {
    display: flex;
    justify-content: center;
}
/* Normalize TranslatePress output inside footer */
.hf-lang-footer .trp-language-switcher-container { margin: 0; }
.hf-lang-footer .trp-language-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.hf-lang-footer .trp-language-switcher a,
.hf-lang-footer .trp-language-switcher span {
    font-size: 0.8rem;
    color: var(--hf-muted);
    text-decoration: none;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    transition: color 0.2s;
}
.hf-lang-footer .trp-language-switcher a:hover { color: var(--hf-blue); }
.hf-lang-footer .trp-language-switcher .trp-ls-shortcode-current-language span {
    color: var(--hf-text);
    font-weight: 500;
}

/* ── Project Design: work package classification component ── */
.pd-wp-tool {
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    margin: 1.5rem 0 2rem 0;
    background: #fafafa;
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 280px;
}
.pd-wp-sidebar {
    border-right: 1px solid #e2e5ea;
    padding: 1.25rem 1rem;
}
.pd-wp-group { margin-bottom: 1rem; }
.pd-wp-group-label {
    font-family: sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-bottom: 0.4rem;
    padding-left: 0.5rem;
}
.pd-wp-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-radius: 5px;
    border: none;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    background: transparent;
    transition: background 0.15s, color 0.15s;
    color: #374151;
    margin-bottom: 0.15rem;
}
.pd-wp-btn:hover { background: #f0f0f0; }
.pd-wp-btn.active[data-role="manager"]     { background: #4361ee; color: #fff; }
.pd-wp-btn.active[data-role="engine"]      { background: #7c3aed; color: #fff; }
.pd-wp-btn.active[data-role="accessor"]    { background: #ff6b35; color: #fff; }
.pd-wp-btn.active[data-role="utility"]     { background: #06b6d4; color: #fff; }
.pd-wp-btn.active[data-role="experience"]  { background: #4361ee; color: #fff; }
.pd-wp-btn.active[data-role="flow"]        { background: #7c3aed; color: #fff; }
.pd-wp-btn.active[data-role="interaction"] { background: #06d6a0; color: #fff; }
.pd-wp-btn.active[data-role="planning"]    { background: #1a1a2e; color: #fff; }
.pd-wp-btn.active[data-role="quality"]     { background: #ef233c; color: #fff; }
.pd-wp-btn.active[data-role="operations"]  { background: #374151; color: #fff; }
.pd-wp-btn.active[data-role="knowledge"]   { background: #6b7280; color: #fff; }
.pd-wp-main { padding: 1.25rem 1.5rem; }
.pd-wp-card { display: none; }
.pd-wp-card.visible { display: block; }
.pd-wp-card .wp-tag {
    display: inline-block;
    font-family: sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.2em 0.65em;
    border-radius: 20px;
    margin-bottom: 0.5rem;
}
.pd-wp-card[data-role="manager"]    .wp-tag { background: #4361ee; color: #fff; }
.pd-wp-card[data-role="engine"]     .wp-tag { background: #7c3aed; color: #fff; }
.pd-wp-card[data-role="accessor"]   .wp-tag { background: #ff6b35; color: #fff; }
.pd-wp-card[data-role="utility"]    .wp-tag { background: #06b6d4; color: #fff; }
.pd-wp-card[data-role="experience"] .wp-tag { background: #4361ee; color: #fff; }
.pd-wp-card[data-role="flow"]       .wp-tag { background: #7c3aed; color: #fff; }
.pd-wp-card[data-role="interaction"].wp-tag { background: #06d6a0; color: #fff; }
.pd-wp-card[data-role="planning"]   .wp-tag { background: #1a1a2e; color: #fff; }
.pd-wp-card[data-role="quality"]    .wp-tag { background: #ef233c; color: #fff; }
.pd-wp-card[data-role="operations"] .wp-tag { background: #374151; color: #fff; }
.pd-wp-card[data-role="knowledge"]  .wp-tag { background: #6b7280; color: #fff; }
.pd-wp-card .wp-name {
    font-size: 1.05rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: #1a1a2e;
}
.pd-wp-card .wp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
    font-size: 0.88rem;
    line-height: 1.5;
}
.pd-wp-card .wp-item label {
    display: block;
    font-family: sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #9ca3af;
    margin-bottom: 0.2rem;
}
@media (max-width: 600px) {
    .pd-wp-tool { grid-template-columns: 1fr; }
    .pd-wp-sidebar { border-right: none; border-bottom: 1px solid #e2e5ea; padding: 1rem; }
    .pd-wp-group { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin-bottom: 0.5rem; }
    .pd-wp-group-label { display: none; }
    .pd-wp-btn { display: inline-block; width: auto; padding: 0.3rem 0.65rem; border: 1.5px solid #e2e5ea; margin-bottom: 0; }
    .pd-wp-card .wp-grid { grid-template-columns: 1fr; }
}